/* Chicken Road — juegodelpollocasino.com custom styles */
:root {
    --cr-yellow: #facc15;
    --cr-orange: #f97316;
    --cr-green: #22c55e;
    --cr-asphalt: #12161c;
    --cr-asphalt-2: #1b212b;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--cr-asphalt);
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, .font-display {
    font-family: 'Baloo 2', 'Inter', cursive;
    letter-spacing: 0.01em;
}

/* Logo keeps aspect ratio: width/height attrs reserve space (CLS), CSS height scales it */
header img[src="/logo.png"] { width: auto; }

.glow-yellow { box-shadow: 0 0 25px rgba(250, 204, 21, 0.45); }
.glow-green { box-shadow: 0 0 22px rgba(34, 197, 94, 0.40); }

.float { animation: float 3.5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(250,204,21,.18);
    border-color: var(--cr-yellow);
}

.table-striped tr:nth-child(even) { background: rgba(255,255,255,.04); }

@media (max-width: 1023px) { .burger-menu { display: flex; } }

/* FAQ accordion */
details.faq summary { cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; float: right; color: var(--cr-yellow); font-size: 1.4rem; line-height: 1; }
details.faq[open] summary::after { content: '−'; }

/* Language switcher */
.lang-switch a.active { color: var(--cr-yellow); font-weight: 700; }

/* Stat bars */
.stat-bar { height: 10px; border-radius: 9999px; background: linear-gradient(90deg, var(--cr-green), var(--cr-yellow)); }

/* Tailwind utility absent from the prod build (added after build) */
.max-w-md { max-width: 28rem; }

/* Hero illustration on the first section of every page */
main > section:first-of-type { position: relative; }
main > section:first-of-type::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/hero_chicken.svg') no-repeat center bottom / cover;
    opacity: 0.20;
    pointer-events: none;
}
main > section:first-of-type > .container { position: relative; z-index: 10; }

/* ---- Chicken Road demo simulator ---- */
.cr-road {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 14px;
    background:
        repeating-linear-gradient(90deg, #20262f 0 60px, #1a1f27 60px 66px);
    border-radius: 0.9rem;
    border: 1px solid rgba(250,204,21,.25);
    scroll-behavior: smooth;
}
.cr-lane {
    flex: 0 0 64px;
    height: 150px;
    border-radius: 0.5rem;
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    position: relative;
    font-size: 1.5rem;
}
.cr-lane .mult { font-size: .72rem; color: #9ca3af; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-lane.cur { background: rgba(250,204,21,.12); border-color: var(--cr-yellow); }
.cr-lane.done { background: rgba(34,197,94,.12); border-color: var(--cr-green); }
.cr-lane.crash { background: rgba(239,68,68,.18); border-color: #ef4444; }
.cr-lane .chick { position: absolute; top: 50%; transform: translateY(-50%); transition: all .2s ease; }
.chick-sprite { width: 42px; height: auto; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.cr-lane.crash .chick-sprite { transform: rotate(12deg); opacity: .5; }

.cr-start { flex: 0 0 56px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.cr-start .chick-sprite { width: 44px; }

.diff-btn { transition: all .15s ease; }
.diff-btn.active { background: var(--cr-yellow); color: #12161c; font-weight: 700; }

/* CSS-only desktop nav dropdown */
.nav-dd { position: relative; }
.nav-dd-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 170px;
    background: var(--cr-asphalt-2);
    border: 1px solid rgba(250,204,21,.25);
    border-radius: 0.6rem;
    padding: 0.4rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
    z-index: 60;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: block; }
.nav-dd-menu a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.4rem; }
.nav-dd-menu a:hover { background: rgba(250,204,21,.12); color: var(--cr-yellow); }