/* Uncrossable Rush — uncrossablerushspielen.com — styled after the Evoplay game */
:root {
    --ur-bg: #0b0e18;            /* dark night highway */
    --ur-panel: #141a2e;         /* indigo panel */
    --ur-panel-2: #1c2440;
    --ur-green: #22c55e;         /* GO button / brand */
    --ur-green-d: #16a34a;
    --ur-orange: #f97316;        /* COLLECT */
    --ur-yellow: #facc15;
    --ur-purple: #6366f1;        /* neon city */
}

html { scroll-behavior: smooth; }
body { background-color: var(--ur-bg); font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, .font-display { font-family: 'Baloo 2', 'Inter', cursive; letter-spacing: .01em; }

header img[src="/logo.png"] { width: auto; }

/* Buttons in the game's style */
.btn-go {
    background: linear-gradient(180deg, #2ee06a 0%, var(--ur-green) 60%, var(--ur-green-d) 100%);
    color: #06210f;
    box-shadow: 0 6px 0 #0f7a37, 0 10px 24px rgba(34,197,94,.45);
    border-radius: 9999px;
    font-weight: 800;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-go:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 8px 0 #0f7a37, 0 14px 30px rgba(34,197,94,.55); }
.btn-go:active { transform: translateY(2px); box-shadow: 0 2px 0 #0f7a37, 0 6px 16px rgba(34,197,94,.4); }

.btn-collect {
    background: linear-gradient(180deg, #ffa64d 0%, var(--ur-orange) 70%, #ea6a0c 100%);
    color: #2a1402;
    box-shadow: 0 5px 0 #b4540a, 0 10px 22px rgba(249,115,22,.4);
    border-radius: 9999px;
    font-weight: 800;
    transition: transform .12s ease, filter .12s ease;
}
.btn-collect:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn-collect:active { transform: translateY(2px); }

.glow-green { box-shadow: 0 0 24px rgba(34,197,94,.45); }

.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(34,197,94,.18); border-color: var(--ur-green); }

.table-striped tr:nth-child(even) { background: rgba(255,255,255,.04); }
@media (max-width: 1023px) { .burger-menu { display: flex; } }

/* FAQ */
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(--ur-green); font-size:1.4rem; line-height:1; }
details.faq[open] summary::after { content:'−'; }

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

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

/* ---- Demo simulator (Uncrossable Rush style) ---- */
.ur-road {
    display:flex; gap:6px; overflow-x:auto; padding:16px 14px;
    background:
      repeating-linear-gradient(90deg, transparent 0 64px, rgba(255,255,255,.03) 64px 70px),
      linear-gradient(180deg, #131a30, #0b0e18);
    border-radius:1rem; border:1px solid rgba(99,102,241,.25);
    scroll-behavior:smooth;
}
.ur-lane {
    flex:0 0 70px; height:160px; border-radius:.5rem; position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 0;
    border-left:2px dashed rgba(255,255,255,.10);
}
.ur-lane .disc-mult {
    width:48px; height:48px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
    background: radial-gradient(circle at 50% 40%, #243056, #131a30); border:2px solid rgba(99,102,241,.4);
    color:#cbd5e1; font-weight:700; font-size:.72rem; font-variant-numeric:tabular-nums;
}
.ur-lane.done .disc-mult { background:radial-gradient(circle at 50% 40%, #1f8f4a, #0f5a2e); border-color:var(--ur-green); color:#fff; }
.ur-lane.crash .disc-mult { background:radial-gradient(circle at 50% 40%, #b91c1c, #7f1d1d); border-color:#ef4444; color:#fff; }
.ur-lane .chick { position:absolute; top:40px; display:none; }
.ur-lane .pad { position:absolute; bottom:18px; width:46px; height:12px; border-radius:9999px;
    background:radial-gradient(ellipse, rgba(34,197,94,.85), rgba(34,197,94,0)); }
.chick-sprite { width:42px; height:auto; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.ur-start { flex:0 0 58px; display:flex; align-items:center; justify-content:center; }
.ur-start .chick-sprite { width:46px; }

.diff-btn { transition:all .15s ease; }
.diff-btn.active { background:var(--ur-green); color:#06210f; font-weight:700; }

/* CSS-only desktop nav dropdown (Países) */
.nav-dd { position: relative; }
.nav-dd-menu {
    display: none; position: absolute; top: 100%; left: 0; min-width: 160px;
    background: #1c2440; border: 1px solid rgba(34,197,94,.3); border-radius: .6rem;
    padding: .4rem; box-shadow: 0 12px 30px rgba(0,0,0,.5); 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: .5rem .75rem; border-radius: .4rem; }
.nav-dd-menu a:hover { background: rgba(34,197,94,.12); color: #22c55e; }