/* ============================================
   WATER BUFFALO RUN — Pure CSS Game Styles
   ============================================ */

/* --- Reset --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Palette */
    --sky-top: #87ceeb;
    --sky-bottom: #e0f4ff;
    --cloud: rgba(255,255,255,0.85);
    --mountain: #78909c;
    --mountain-snow: #eceff1;
    --tree-dark: #33691e;
    --tree-mid: #558b2f;
    --tree-light: #7cb342;
    --grass-1: #689f38;
    --grass-2: #8bc34a;
    --mud-dark: #3e2723;
    --mud: #5d4037;
    --mud-mid: #6d4c41;
    --mud-light: #8d6e63;
    --water: #4fc3f7;
    --water-dark: #29b6f6;
    --buffalo-dark: #2e2218;
    --buffalo: #4e342e;
    --buffalo-mid: #5d4037;
    --buffalo-light: #795548;
    --horn: #d7ccc8;
    --horn-dark: #a1887f;
    --hoof: #1b1b1b;
    --gold: #f9a825;
    --cream: #f5f0e1;
    --red: #e53935;

    /* Game dimensions */
    --game-w: 800px;
    --game-h: 400px;
    --ground-h: 80px;
    --buffalo-w: 90px;
    --buffalo-h: 70px;
    --buffalo-x: 80px;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #263238;
}

/* ============ GAME CONTAINER ============ */
#game-container {
    position: relative;
    width: var(--game-w);
    height: var(--game-h);
    margin: 20px auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
    cursor: pointer;
    user-select: none;
}

/* ============ SKY ============ */
#sky {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(100% - var(--ground-h));
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
    z-index: 0;
}

/* ============ CLOUDS ============ */
#clouds {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(100% - var(--ground-h));
    z-index: 1;
    overflow: hidden;
}

#clouds::before,
#clouds::after {
    content: '';
    position: absolute;
    background: var(--cloud);
    border-radius: 50%;
}

#clouds::before {
    width: 120px; height: 40px;
    top: 30px; left: 10%;
    box-shadow:
        30px -10px 0 10px var(--cloud),
        60px 0 0 5px var(--cloud),
        400px 20px 0 8px var(--cloud),
        430px 10px 0 14px var(--cloud),
        460px 20px 0 6px var(--cloud);
    animation: cloud-drift 45s linear infinite;
}

#clouds::after {
    width: 90px; height: 30px;
    top: 60px; left: 50%;
    box-shadow:
        20px -8px 0 8px var(--cloud),
        300px 15px 0 10px var(--cloud),
        330px 5px 0 12px var(--cloud);
    animation: cloud-drift 60s linear infinite;
}

@keyframes cloud-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-600px); }
}

/* ============ MOUNTAINS (parallax back layer) ============ */
#bg-mountains {
    position: absolute;
    bottom: var(--ground-h);
    left: 0;
    width: 200%;
    height: 120px;
    z-index: 2;
    background:
        /* Mountain shapes via gradients */
        linear-gradient(135deg, var(--mountain) 33%, transparent 33%) 0 100%,
        linear-gradient(-135deg, var(--mountain) 33%, transparent 33%) 100px 100%,
        linear-gradient(125deg, var(--mountain-snow) 20%, var(--mountain) 20%, var(--mountain) 40%, transparent 40%) 200px 100%,
        linear-gradient(-130deg, var(--mountain) 35%, transparent 35%) 350px 100%,
        linear-gradient(140deg, var(--mountain) 30%, transparent 30%) 500px 100%,
        linear-gradient(-125deg, var(--mountain-snow) 15%, var(--mountain) 15%, var(--mountain) 38%, transparent 38%) 650px 100%;
    background-size: 200px 120px, 200px 100px, 250px 110px, 180px 90px, 220px 105px, 240px 115px;
    background-repeat: repeat-x;
    animation: scroll-mountains 30s linear infinite;
}

@keyframes scroll-mountains {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============ TREES (parallax mid layer) ============ */
#bg-trees {
    position: absolute;
    bottom: var(--ground-h);
    left: 0;
    width: 200%;
    height: 80px;
    z-index: 3;
    --tree-dur: 20s;
}

#bg-trees::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background:
        /* Tree canopies */
        radial-gradient(ellipse 30px 40px at 40px 40px, var(--tree-dark) 60%, transparent 61%),
        radial-gradient(ellipse 25px 35px at 100px 45px, var(--tree-mid) 60%, transparent 61%),
        radial-gradient(ellipse 35px 45px at 180px 35px, var(--tree-dark) 60%, transparent 61%),
        radial-gradient(ellipse 20px 30px at 250px 50px, var(--tree-light) 60%, transparent 61%),
        radial-gradient(ellipse 28px 38px at 320px 42px, var(--tree-mid) 60%, transparent 61%),
        radial-gradient(ellipse 32px 42px at 420px 38px, var(--tree-dark) 60%, transparent 61%),
        radial-gradient(ellipse 22px 32px at 500px 48px, var(--tree-light) 60%, transparent 61%),
        radial-gradient(ellipse 30px 40px at 580px 40px, var(--tree-mid) 60%, transparent 61%),
        radial-gradient(ellipse 26px 36px at 670px 44px, var(--tree-dark) 60%, transparent 61%),
        radial-gradient(ellipse 34px 44px at 750px 36px, var(--tree-mid) 60%, transparent 61%);
    background-repeat: no-repeat;
    animation: scroll-trees var(--tree-dur) linear infinite;
}

#bg-trees::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 100%;
    height: 80px;
    background:
        radial-gradient(ellipse 30px 40px at 40px 40px, var(--tree-dark) 60%, transparent 61%),
        radial-gradient(ellipse 25px 35px at 100px 45px, var(--tree-mid) 60%, transparent 61%),
        radial-gradient(ellipse 35px 45px at 180px 35px, var(--tree-dark) 60%, transparent 61%),
        radial-gradient(ellipse 20px 30px at 250px 50px, var(--tree-light) 60%, transparent 61%),
        radial-gradient(ellipse 28px 38px at 320px 42px, var(--tree-mid) 60%, transparent 61%),
        radial-gradient(ellipse 32px 42px at 420px 38px, var(--tree-dark) 60%, transparent 61%),
        radial-gradient(ellipse 22px 32px at 500px 48px, var(--tree-light) 60%, transparent 61%),
        radial-gradient(ellipse 30px 40px at 580px 40px, var(--tree-mid) 60%, transparent 61%),
        radial-gradient(ellipse 26px 36px at 670px 44px, var(--tree-dark) 60%, transparent 61%),
        radial-gradient(ellipse 34px 44px at 750px 36px, var(--tree-mid) 60%, transparent 61%);
    background-repeat: no-repeat;
    animation: scroll-trees var(--tree-dur) linear infinite;
}

@keyframes scroll-trees {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* ============ GRASS LAYER ============ */
#bg-grass {
    position: absolute;
    bottom: var(--ground-h);
    left: 0;
    width: 200%;
    height: 25px;
    z-index: 4;
    background: repeating-linear-gradient(
        90deg,
        var(--grass-1) 0px,
        var(--grass-2) 3px,
        var(--grass-1) 6px
    );
    animation: scroll-grass 8s linear infinite;
}

#bg-grass::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 15px;
    background: repeating-linear-gradient(
        85deg,
        transparent 0px,
        transparent 8px,
        var(--grass-2) 8px,
        var(--grass-2) 10px,
        transparent 10px,
        transparent 20px
    );
}

@keyframes scroll-grass {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============ GROUND ============ */
#ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--ground-h);
    z-index: 5;
    background: linear-gradient(
        180deg,
        var(--mud) 0%,
        var(--mud-mid) 40%,
        var(--mud-dark) 100%
    );
}

#ground-detail {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: var(--ground-h);
    z-index: 6;
    background:
        /* Water puddles */
        radial-gradient(ellipse 60px 8px at 80px 20px, var(--water) 60%, transparent 61%),
        radial-gradient(ellipse 40px 6px at 250px 35px, var(--water-dark) 60%, transparent 61%),
        radial-gradient(ellipse 50px 7px at 450px 25px, var(--water) 60%, transparent 61%),
        radial-gradient(ellipse 35px 5px at 600px 40px, var(--water-dark) 60%, transparent 61%),
        radial-gradient(ellipse 55px 8px at 750px 15px, var(--water) 60%, transparent 61%),
        /* Mud texture spots */
        radial-gradient(circle 4px at 50px 50px, var(--mud-light) 100%, transparent),
        radial-gradient(circle 3px at 150px 60px, var(--mud-light) 100%, transparent),
        radial-gradient(circle 5px at 300px 45px, var(--mud-light) 100%, transparent),
        radial-gradient(circle 3px at 500px 55px, var(--mud-light) 100%, transparent),
        radial-gradient(circle 4px at 700px 42px, var(--mud-light) 100%, transparent);
    background-repeat: no-repeat;
    animation: scroll-ground 6s linear infinite;
}

@keyframes scroll-ground {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============ BUFFALO (Emoji) ============ */
#buffalo {
    position: absolute;
    left: var(--buffalo-x);
    bottom: var(--ground-h);
    width: var(--buffalo-w);
    height: var(--buffalo-h);
    z-index: 20;
    font-size: 58px;
    line-height: 1;
    text-align: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
    animation: buffalo-bob 0.35s ease-in-out infinite alternate;
}

@keyframes buffalo-bob {
    from { transform: scaleX(-1) translateY(0); }
    to { transform: scaleX(-1) translateY(-3px); }
}

/* --- Duck state --- */
#buffalo.ducking {
    transform: scaleX(-1.15) scaleY(0.55);
    transform-origin: bottom center;
    animation: none;
}

/* --- Hit flash --- */
#buffalo.hit {
    animation: hit-flash 0.4s ease !important;
}

@keyframes hit-flash {
    0%, 100% { filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3)); }
    25% { filter: drop-shadow(0 0 8px #e53935) brightness(1.5); }
    50% { filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3)); }
    75% { filter: drop-shadow(0 0 8px #e53935) brightness(1.5); }
}

/* --- Stopped --- */
#buffalo.stopped {
    animation: none;
}

/* ============ OBSTACLES ============ */
#obstacles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none;
}

.obstacle {
    position: absolute;
    bottom: var(--ground-h);
}

/* Shared danger indicator — pulsing warning triangle above every obstacle */
.obstacle::after {
    content: '⚠';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    line-height: 1;
    animation: warn-pulse 0.8s ease-in-out infinite alternate;
    z-index: 2;
    pointer-events: none;
}

@keyframes warn-pulse {
    from { opacity: 0.5; transform: translateX(-50%) scale(0.85); }
    to   { opacity: 1;   transform: translateX(-50%) scale(1.1); }
}

/* --- Rock --- */
.obstacle.rock {
    width: 35px;
    height: 28px;
    background: linear-gradient(140deg, #90a4ae 0%, #607d8b 50%, #455a64 100%);
    border-radius: 40% 50% 45% 48%;
    box-shadow:
        0 0 0 2px rgba(255, 235, 59, 0.6),
        0 2px 8px rgba(0,0,0,0.4),
        inset -4px -4px 6px rgba(0,0,0,0.3),
        inset 3px 3px 4px rgba(255,255,255,0.15);
}

.obstacle.rock::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 8px;
    width: 8px;
    height: 5px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    transform: rotate(-15deg);
}

/* --- Log --- */
.obstacle.log {
    width: 55px;
    height: 22px;
    background: linear-gradient(180deg, #a1887f 0%, #8d6e63 30%, #6d4c41 70%, #5d4037 100%);
    border-radius: 8px;
    bottom: var(--ground-h);
    box-shadow:
        0 0 0 2px rgba(255, 235, 59, 0.6),
        0 2px 8px rgba(0,0,0,0.4);
}

.obstacle.log::before {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    width: 22px;
    height: 22px;
    background: radial-gradient(circle, #4e342e 25%, #6d4c41 50%, #8d6e63 80%, #a1887f 100%);
    border-radius: 50%;
    border: 2px solid #5d4037;
}

.obstacle.log::after {
    content: '⚠';
    top: -24px;
}

/* --- Mud Pit --- */
.obstacle.mud-pit {
    width: 65px;
    height: 14px;
    background: radial-gradient(ellipse, #1a0e0a 30%, var(--mud-dark) 60%, var(--mud) 90%, transparent 100%);
    border-radius: 50%;
    bottom: calc(var(--ground-h) - 4px);
    box-shadow:
        0 0 12px 3px rgba(62, 39, 35, 0.7),
        0 0 0 2px rgba(255, 235, 59, 0.5);
}

.obstacle.mud-pit::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 15px;
    width: 10px;
    height: 10px;
    background: var(--mud-dark);
    border-radius: 50%;
    opacity: 0.8;
    animation: mud-bubble 1.2s ease-in-out infinite;
}

.obstacle.mud-pit::after {
    content: '⚠';
    top: -26px;
}

@keyframes mud-bubble {
    0%, 100% { transform: scale(0.5); opacity: 0.3; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

/* --- Tall Reeds / Thorns (duck obstacle) --- */
.obstacle.reeds {
    width: 48px;
    height: 75px;
    bottom: var(--ground-h);
    display: flex;
    align-items: flex-end;
    gap: 2px;
    filter: drop-shadow(0 0 6px rgba(229, 57, 53, 0.5));
    animation: reeds-danger-pulse 1s ease-in-out infinite alternate;
}

@keyframes reeds-danger-pulse {
    from { filter: drop-shadow(0 0 4px rgba(229, 57, 53, 0.4)); }
    to   { filter: drop-shadow(0 0 10px rgba(229, 57, 53, 0.8)); }
}

.obstacle.reeds::after {
    content: '⬇ DUCK';
    top: -24px;
    font-size: 10px;
    font-weight: 700;
    color: #ffeb3b;
    text-shadow: 0 0 4px rgba(0,0,0,0.9);
    white-space: nowrap;
    background: rgba(229, 57, 53, 0.7);
    padding: 1px 5px;
    border-radius: 3px;
}

.reed {
    width: 5px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #e53935 0%, #ff6f00 15%, #ffab00 30%, #8bc34a 60%, var(--tree-dark) 100%);
    border-radius: 1px 1px 0 0;
    transform-origin: bottom center;
    animation: reed-sway 2s ease-in-out infinite alternate;
    box-shadow: 0 0 3px rgba(229, 57, 53, 0.4);
    position: relative;
}

/* Thorn tips */
.reed::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 5px solid #e53935;
}

.reed:nth-child(1) { height: 62px; animation-delay: 0s; }
.reed:nth-child(2) { height: 72px; animation-delay: 0.2s; }
.reed:nth-child(3) { height: 57px; animation-delay: 0.4s; }
.reed:nth-child(4) { height: 68px; animation-delay: 0.1s; }
.reed:nth-child(5) { height: 60px; animation-delay: 0.3s; }
.reed:nth-child(6) { height: 75px; animation-delay: 0.15s; }
.reed:nth-child(7) { height: 54px; animation-delay: 0.35s; }
.reed:nth-child(8) { height: 65px; animation-delay: 0.25s; }

@keyframes reed-sway {
    from { transform: rotate(-3deg); }
    to { transform: rotate(3deg); }
}

/* --- Water Stream (slowing obstacle) --- */
.obstacle.stream {
    width: 55px;
    height: 12px;
    bottom: calc(var(--ground-h) - 2px);
    background: linear-gradient(90deg, transparent, var(--water), var(--water-dark), var(--water), transparent);
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 8px 3px rgba(79, 195, 247, 0.5),
        0 0 0 2px rgba(255, 235, 59, 0.5);
}

.obstacle.stream::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 200%;
    height: 5px;
    background: repeating-linear-gradient(90deg, transparent 0, transparent 8px, rgba(255,255,255,0.4) 8px, rgba(255,255,255,0.4) 12px);
    animation: water-flow 0.6s linear infinite;
}

.obstacle.stream::after {
    content: '⚠';
    top: -26px;
    overflow: visible;
}

@keyframes water-flow {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* --- Branch (aerial obstacle) --- */
.obstacle.branch {
    width: 75px;
    height: 10px;
    bottom: calc(var(--ground-h) + 55px);
    background: linear-gradient(90deg, #a1887f, var(--mud), #8d6e63, var(--mud), #a1887f);
    border-radius: 5px;
    transform: rotate(-3deg);
    box-shadow:
        0 0 0 2px rgba(255, 235, 59, 0.6),
        0 3px 10px rgba(0,0,0,0.4);
}

.obstacle.branch::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 12px;
    width: 24px;
    height: 18px;
    background: radial-gradient(ellipse, var(--tree-mid) 50%, transparent 70%);
    border-radius: 50%;
}

.obstacle.branch::after {
    content: '⬇ DUCK';
    font-size: 10px;
    font-weight: 700;
    color: #ffeb3b;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
    top: -22px;
    white-space: nowrap;
}

/* ============ SPLASH EFFECTS ============ */
#splash-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 25;
    pointer-events: none;
}

.splash {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mud-light);
    opacity: 0;
    animation: splash-out 0.5s ease-out forwards;
}

@keyframes splash-out {
    0% { transform: scale(0.3); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ============ SCORE POPUPS ============ */
.score-popup {
    position: absolute;
    font-weight: 800;
    font-size: 1.1rem;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    z-index: 26;
    animation: score-float 0.85s ease-out forwards;
}

.score-gain {
    color: #66bb6a;
}

.score-loss {
    color: #ef5350;
    font-size: 1.3rem;
}

@keyframes score-float {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    20%  { transform: translateY(-15px) scale(1.3); }
    100% { opacity: 0; transform: translateY(-50px) scale(0.8); }
}

/* ============ HUD ============ */
#hud {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 30;
    display: flex;
    gap: 16px;
    pointer-events: none;
}

#hud > div {
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
}

.hud-label {
    opacity: 0.7;
    margin-right: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* HUD buttons (pause, fullscreen) */
.hud-btn {
    position: absolute;
    top: 12px;
    z-index: 31;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    line-height: 1;
}

.hud-btn:hover {
    background: rgba(0,0,0,0.7);
}

.pause-hud-btn { right: 12px; }
.fs-hud-btn    { right: 50px; font-size: 1.15rem; }

/* Freeze all animations when paused */
.game-paused,
.game-paused * {
    animation-play-state: paused !important;
}

#score {
    font-weight: 700;
    color: var(--gold);
}

#speed {
    font-weight: 700;
    color: var(--water);
}

#distance {
    font-weight: 700;
}

/* ============ OVERLAYS ============ */
.overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

.overlay.hidden {
    display: none;
}

.overlay-content {
    background: var(--cream);
    padding: 2.5rem 2rem;
    border-radius: 1rem;
    text-align: center;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 12px 48px rgba(0,0,0,0.3);
}

.overlay-content h1 {
    font-size: 2rem;
    color: var(--mud-dark);
    margin-bottom: 0.5rem;
}

.overlay-content p {
    color: #555;
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.controls-hint {
    font-size: 0.85rem;
    color: #777;
    background: rgba(0,0,0,0.05);
    padding: 0.6rem;
    border-radius: 0.5rem;
}

.final-score {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold);
}

.final-distance {
    font-size: 1rem;
    color: var(--mud);
}

/* Overlay mini-buffalo */
.overlay-buffalo {
    font-size: 3.5rem;
    line-height: 1;
    margin: 0 auto 0.8rem;
    text-align: center;
}

/* ============ BUTTONS ============ */
.game-btn {
    display: inline-block;
    background: var(--grass-1);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.8rem 2.2rem;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-top: 0.5rem;
}

.game-btn:hover {
    background: var(--grass-2);
    transform: translateY(-2px);
}

.game-btn:active {
    transform: translateY(0);
}

/* ============ BACK NAV ============ */
.back-nav {
    text-align: center;
    padding: 0.8rem;
}

.back-nav a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
}

.back-nav a:hover {
    color: rgba(255,255,255,0.85);
}

/* ============ FULLSCREEN MODE ============ */
body.fullscreen-mode {
    overflow: hidden;
}

body.fullscreen-mode #game-container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

body.fullscreen-mode .back-nav {
    display: none;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 840px) {
    :root {
        --game-w: 100vw;
        --game-h: 60vw;
        --ground-h: 10vw;
        --buffalo-w: 11.25vw;
        --buffalo-h: 8.75vw;
        --buffalo-x: 10vw;
    }

    #game-container {
        margin: 0;
        border-radius: 0;
    }
}

/* Secondary game button (fullscreen on start screen) */
.game-btn--secondary {
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.4);
    font-size: 0.85rem;
    padding: 0.4rem 1.2rem;
    margin-top: 0.5rem;
}

.game-btn--secondary:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

/* ============ BMC (BUY ME A COFFEE) ============ */
.bmc-pause {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.bmc-message {
    font-size: 0.8rem;
    color: #7a6835;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.bmc-btn-sm {
    display: inline-block;
    background: #ffdd00;
    color: #000;
    font-family: 'Cookie', cursive, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.4rem 1.2rem;
    border-radius: 2rem;
    text-decoration: none;
    border: 2px solid #000;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.bmc-btn-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.16);
}

.bmc-nav-link {
    color: #ffdd00 !important;
    font-weight: 700;
}

.bmc-nav-link:hover {
    color: #ffe84d !important;
}

.back-nav-sep {
    color: rgba(255,255,255,0.3);
    margin: 0 0.4rem;
}