/* ===== DANFO RUSH — Nigerian Street Art / Danfo Bus theme ===== */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    padding: 0;
    color: #fff;
    background: #0c1015;
    font-family: 'Trebuchet MS', 'Arial Black', Impact, Arial, sans-serif;
    overscroll-behavior: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#app {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 50% 0%, #16241c 0%, #0c1015 72%);
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#game-container canvas {
    display: block;
    margin: 0 auto;
}

/* ===== HORIZON BLEND + SKYLINE DEPTH-OF-FIELD =====
   A CSS gradient mask fades the very top edge of the canvas into the page
   backdrop so the scrolling asphalt road dissolves gracefully into the
   distant purple sunset rather than clipping abruptly at the horizon line.
   The mask starts transparent at the top and becomes fully opaque by ~15%
   of the canvas height, so the foreground Danfo bus (~y 740/960 ≈ 77%) and
   all roadside obstacles / pickups stay perfectly crisp and unmasked.
   Hardware-accelerated (composited mask), zero extra texture overhead. */
.horizon-fade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22%;
    pointer-events: none;
    z-index: 5;
    /* Soft warm haze that visually bridges the road top edge and the
       skyline base, reinforcing the depth-of-field perspective illusion. */
    background: linear-gradient(
        to bottom,
        rgba(122, 31, 93, 0.0) 0%,
        rgba(243, 156, 18, 0.16) 55%,
        rgba(243, 156, 18, 0.0) 100%
    );
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

/* The canvas itself receives a very subtle top-edge gradient mask so the
   asphalt road tiles fade gently into the sunset backdrop. The fade is
   confined to the top 4% (~38px of the 960px canvas) so obstacles spawning
   at y=-120 and entering the playfield remain fully visible by the time
   they reach the HUD area. */
#game-container canvas {
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        black 4%,
        black 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        black 4%,
        black 100%
    );
}

/* ===== HUD overlay layer ===== */
#hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

#hud .overlay,
#hud .hud-top,
#hud .touch-controls,
#hud .speed-wrap {
    pointer-events: auto;
}

/* ===== TOP HUD — street-signage counters ===== */
.hud-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.hud-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 10px;
    background: #121820;
    border: 2px solid #ffe600;
    box-shadow: 0 3px 0 #000, inset 0 0 0 1px rgba(0, 255, 102, 0.25);
    min-width: 58px;
}

.hud-label {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #ffe600;
    font-weight: 900;
    text-shadow: 1px 1px 0 #000;
}

.hud-value {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0, 255, 102, 0.35);
}

.hud-pill.coin {
    flex-direction: row;
    gap: 6px;
    align-items: center;
    border-color: #00e676;
}

.coin-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff27a, #ffcc00);
    border: 2px solid #008751;
    box-shadow: 0 0 8px rgba(255, 230, 0, 0.7);
}

/* Combo pill — neon green, pulses on multiplier increase */
.hud-pill.combo {
    border-color: #00ff66;
    background: #04140b;
    box-shadow: 0 3px 0 #000, 0 0 14px rgba(0, 255, 102, 0.55);
}

.hud-pill.combo .hud-label {
    color: #00ff66;
}

.hud-pill.combo .hud-value {
    color: #00ff66;
    text-shadow: 2px 2px 0 #000, 0 0 12px rgba(0, 255, 102, 0.9);
}

.combo-pop {
    animation: combo-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes combo-pop {
    0% {
        transform: scale(1);
        box-shadow: 0 3px 0 #000, 0 0 0 rgba(0, 255, 102, 0);
    }
    35% {
        transform: scale(1.35) rotate(-2deg);
        box-shadow: 0 3px 0 #000, 0 0 26px rgba(0, 255, 102, 0.95);
    }
    60% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 3px 0 #000, 0 0 14px rgba(0, 255, 102, 0.55);
    }
}

.icon-btn {
    margin-left: auto;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 2px solid #ffe600;
    background: #121820;
    color: #ffe600;
    box-shadow: 0 3px 0 #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.icon-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #000;
}

.icon-btn + .icon-btn {
    margin-left: 0;
}

/* ===== SPEED BAR ===== */
.speed-wrap {
    position: absolute;
    top: calc(74px + env(safe-area-inset-top));
    left: 16px;
    right: 16px;
    height: 12px;
    border-radius: 8px;
    background: #0a0d12;
    overflow: hidden;
    border: 2px solid #008751;
    box-shadow: 0 2px 0 #000;
}

.speed-bar {
    height: 100%;
    background: linear-gradient(90deg, #008751, #00ff66, #ffe600, #ff5722);
    transition: width 0.2s linear;
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.6);
}

/* ===== OVERLAY (menu / pause / over / board) ===== */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 8, 12, 0.78);
    backdrop-filter: blur(5px);
    z-index: 30;
}

.menu-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 22px 24px;
    border-radius: 18px;
    background: linear-gradient(160deg, #16202c, #0c1015);
    border: 4px solid #ffe600;
    box-shadow: 0 10px 0 #008751, 0 18px 50px rgba(0, 0, 0, 0.7),
        inset 0 0 0 2px rgba(0, 255, 102, 0.2);
    text-align: center;
    max-height: 92vh;
    overflow-y: auto;
}

/* Danfo hazard stripe */
.hazard-stripe {
    width: 100%;
    height: 14px;
    border-radius: 4px;
    background: repeating-linear-gradient(
        -45deg,
        #ffe600 0,
        #ffe600 14px,
        #0c1015 14px,
        #0c1015 28px
    );
    box-shadow: 0 2px 0 #000;
}

.route-badge {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    color: #04140b;
    background: #00ff66;
    padding: 3px 12px;
    border-radius: 999px;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 #000;
    margin-top: -6px;
}

.brand {
    font-family: Impact, 'Arial Black', 'Trebuchet MS', sans-serif;
    font-size: 52px;
    line-height: 0.9;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.brand-danfo {
    display: block;
    color: #ffe600;
    text-shadow: 4px 4px 0 #000, 6px 6px 0 #008751;
}

.brand-rush {
    display: block;
    color: #00ff66;
    text-shadow: 4px 4px 0 #000, 6px 6px 0 #ffcc00, 0 0 18px rgba(0, 255, 102, 0.7);
}

.tagline {
    margin: 0;
    color: #ffe600;
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 13px;
    text-shadow: 2px 2px 0 #000;
}

.card-title {
    margin: 0;
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 34px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffe600;
    text-shadow: 3px 3px 0 #000, 5px 5px 0 #008751;
}

.card-title.danger {
    color: #ff3b30;
    text-shadow: 3px 3px 0 #000, 5px 5px 0 #ffe600, 0 0 18px rgba(255, 59, 48, 0.6);
}

.badge {
    align-self: center;
    padding: 6px 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #008751, #00ff66);
    color: #04140b;
    font-family: Impact, 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 1px;
    border: 2px solid #000;
    box-shadow: 0 0 16px rgba(0, 255, 102, 0.8);
    animation: pulse 1s infinite;
}

.hi-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 230, 0, 0.08);
    border: 2px solid rgba(255, 230, 0, 0.45);
    font-weight: 900;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}

.hi-row strong {
    color: #00ff66;
    font-family: Impact, 'Arial Black', sans-serif;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

.result-grid > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 6px;
    border-radius: 10px;
    background: #121820;
    border: 2px solid #008751;
    box-shadow: 0 3px 0 #000;
}

.r-label {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: #ffe600;
    text-transform: uppercase;
}

.r-value {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #00ff66;
    text-shadow: 2px 2px 0 #000;
}

/* ===== BUTTONS ===== */
.btn-primary {
    width: 100%;
    min-height: 60px;
    border: 3px solid #000;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffe600, #ffcc00);
    color: #0c1015;
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 22px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 0 #008751, 0 10px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.08s, box-shadow 0.08s;
}

.btn-primary:hover {
    filter: brightness(1.05);
}

.btn-primary:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #008751;
}

.menu-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

.btn-ghost {
    flex: 1;
    min-height: 52px;
    border-radius: 12px;
    border: 2px solid #00ff66;
    background: rgba(0, 255, 102, 0.08);
    color: #00ff66;
    font-family: 'Arial Black', Impact, sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 3px 0 #000;
}

.btn-ghost:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #000;
    background: rgba(0, 255, 102, 0.2);
}

.hint {
    margin: 0;
    font-size: 12px;
    color: #9fb3c8;
    line-height: 1.4;
    font-weight: 700;
}

/* ===== LEADERBOARD ===== */
.board-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-height: 40vh;
    overflow-y: auto;
}

.board-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #121820;
    border: 2px solid rgba(255, 230, 0, 0.4);
    box-shadow: 0 2px 0 #000;
    text-align: left;
}

.rank {
    font-family: Impact, 'Arial Black', sans-serif;
    font-weight: 900;
    color: #ffe600;
    text-shadow: 1px 1px 0 #000;
}

.b-score {
    font-family: Impact, 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: 18px;
    color: #00ff66;
}

.b-meta {
    font-size: 12px;
    color: #9fb3c8;
    font-weight: 700;
}

/* ===== TOUCH CONTROLS ===== */
.touch-controls {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22px;
}

.touch-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid #ffe600;
    background: rgba(18, 24, 32, 0.8);
    color: #ffe600;
    box-shadow: 0 4px 0 #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    backdrop-filter: blur(2px);
}

.touch-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #000;
    background: rgba(255, 230, 0, 0.25);
}

.touch-btn.turbo {
    width: 64px;
    height: 64px;
    border-color: #00ff66;
    color: #00ff66;
    box-shadow: 0 4px 0 #000, 0 0 16px rgba(0, 255, 102, 0.5);
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

/* ===== SECOND CHANCE TRIVIA ===== */
.trivia-overlay {
    background: rgba(6, 8, 12, 0.86);
    z-index: 40;
}

.trivia-card {
    max-width: 420px;
    border-color: #00ff66;
    box-shadow: 0 10px 0 #008751, 0 18px 50px rgba(0, 0, 0, 0.75),
        inset 0 0 0 2px rgba(255, 230, 0, 0.25);
}

.trivia-badge {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 13px;
    letter-spacing: 3px;
    color: #04140b;
    background: linear-gradient(90deg, #ffe600, #00ff66);
    padding: 4px 16px;
    border-radius: 999px;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 #000, 0 0 16px rgba(0, 255, 102, 0.7);
    margin-top: -4px;
    animation: pulse 1s infinite;
}

.trivia-card .card-title {
    font-size: 26px;
    line-height: 1;
}

.trivia-question {
    margin: 2px 0 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}

.trivia-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.trivia-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 2px solid #ffe600;
    background: #121820;
    color: #fff;
    font-family: 'Trebuchet MS', 'Arial Black', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 3px 0 #000;
    transition: transform 0.08s, box-shadow 0.08s, background 0.15s, opacity 0.15s;
}

.trivia-key {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffe600;
    color: #0c1015;
    font-family: Impact, 'Arial Black', sans-serif;
    font-weight: 900;
    border: 2px solid #000;
}

.trivia-text {
    flex: 1;
    line-height: 1.25;
}

.trivia-opt:hover:not(:disabled) {
    filter: brightness(1.1);
}

.trivia-opt:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #000;
}

.trivia-opt.locked {
    cursor: default;
}

.trivia-opt.locked:not(.correct):not(.wrong) {
    opacity: 0.4;
}

.trivia-opt.correct {
    border-color: #00ff66;
    background: #04140b;
    box-shadow: 0 3px 0 #000, 0 0 18px rgba(0, 255, 102, 0.8);
    animation: trivia-correct 0.5s ease;
}

.trivia-opt.correct .trivia-key {
    background: #00ff66;
}

.trivia-opt.wrong {
    border-color: #ff3b30;
    background: #1a0808;
    box-shadow: 0 3px 0 #000, 0 0 18px rgba(255, 59, 48, 0.8);
    animation: trivia-wrong 0.4s ease;
}

.trivia-opt.wrong .trivia-key {
    background: #ff3b30;
    color: #fff;
}

@keyframes trivia-correct {
    0% { transform: scale(1); }
    40% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes trivia-wrong {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@media (min-width: 700px) {
    .menu-card {
        max-width: 400px;
    }
    .brand {
        font-size: 60px;
    }
}