:root {
    --bg-color:     #050505;
    --text-primary: #ffffff;
    --accent-cyan:  #00ffcc;
    --accent-pink:  #ff00ff;
    --glass-bg:     rgba(255,255,255,0.04);
    --glass-strong: rgba(255,255,255,0.06);
    --border-thin:  1px solid rgba(255,255,255,0.15);
    --border-cyan:  1px solid rgba(0,255,204,0.35);
    --onion-glow:   0 0 20px rgba(0,255,204,0.3);
    --pink-glow:    0 0 18px rgba(255,0,255,0.45);

    --ink:    #050505;
    --red:    #ff6b6b;
    --purple: #a29bfe;
    --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-color);
    background-image:
        linear-gradient(rgba(0,255,204,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,204,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    background-attachment: fixed;
    min-height: 100dvh;
    color: var(--text-primary);
    overflow: hidden;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

/* ═══════════════════════════════════════════════════════════════════
   SCREENS
   ═══════════════════════════════════════════════════════════════════ */
.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
             env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    animation: fadeIn 0.35s ease;
}
.screen.active { display: flex !important; z-index: 10; }

@keyframes fadeIn {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.btn {
    font-family: inherit;
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    padding: 14px 36px;
    background: transparent;
    border: 2px solid var(--accent-cyan);
    border-radius: 8px;
    cursor: pointer;
    color: var(--accent-cyan);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    box-shadow: var(--onion-glow);
    transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.btn-xl { font-size: clamp(1.4rem, 5vw, 2rem); padding: 18px 48px; }

@media (hover: hover) {
    .btn:hover {
        background: var(--accent-cyan);
        color: var(--ink);
        box-shadow: 0 0 28px var(--accent-cyan);
    }
}
.btn:active {
    transform: translateY(2px) scale(0.98);
    background: var(--accent-cyan);
    color: var(--ink);
    box-shadow: 0 0 18px var(--accent-cyan);
}

/* legacy class kept (no-op) so existing markup styles via .btn */
.btn-yellow { /* re-themed via .btn rules */ }

/* ═══════════════════════════════════════════════════════════════════
   MENU SCREEN
   ═══════════════════════════════════════════════════════════════════ */
.menu-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--border-thin);
    border-radius: var(--radius);
    box-shadow: var(--onion-glow), 0 20px 60px rgba(0,0,0,0.6);
    padding: clamp(20px, 4vw, 36px) clamp(20px, 5vw, 44px);
    width: clamp(300px, 92vw, 520px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2vh, 18px);
}
.menu-title {
    font-size: clamp(2rem, 8vw, 3.2rem);
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1;
    background: linear-gradient(to bottom, #fff 60%, var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(3px 3px 0px var(--accent-pink));
}
.menu-subtitle {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: clamp(0.85rem, 2.6vw, 1.05rem);
    color: var(--accent-cyan);
    margin-top: -2px;
    letter-spacing: 1px;
    opacity: 0.9;
}
.menu-mascot {
    width: clamp(120px, 35vw, 200px);
    height: clamp(120px, 35vw, 200px);
    background-image: url('assets/img/eater.png');
    background-repeat: no-repeat;
    background-size: 300% 200%;
    background-position: 100% 0%; /* frame-one */
    filter: drop-shadow(0 0 18px rgba(0,255,204,0.45)) drop-shadow(0 8px 14px rgba(0,0,0,0.55));
    animation: menu-bob 2.4s ease-in-out infinite;
}
@keyframes menu-bob {
    0%,100% { transform: translateY(0)    rotate(-2deg); }
    50%     { transform: translateY(-8px) rotate(2deg);  }
}
.menu-blurb {
    font-size: clamp(0.9rem, 2.6vw, 1.05rem);
    color: rgba(255,255,255,0.85);
    line-height: 1.45;
    max-width: 36ch;
}
.menu-hint {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: clamp(0.7rem, 1.9vw, 0.85rem);
    color: rgba(0,255,204,0.75);
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   GAME SCREEN
   ═══════════════════════════════════════════════════════════════════ */
#screen-game {
    padding: 0;
    justify-content: flex-start;
    background: transparent;
}
#screen-feast {
    background: transparent;
}

.game-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px clamp(12px, 4vw, 24px);
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    z-index: 30;
    pointer-events: none;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,255,204,0.12);
}
.hud-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
}
.hud-label {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: clamp(0.65rem, 1.8vw, 0.8rem);
    color: rgba(255,255,255,0.55);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.hud-value {
    font-weight: 900;
    font-size: clamp(1.4rem, 5vw, 2rem);
    color: var(--accent-cyan);
    text-shadow: 0 0 14px rgba(0,255,204,0.55), 0 2px 6px rgba(0,0,0,0.7);
    transition: transform 0.18s ease, color 0.18s ease;
}
.hud-value.bump {
    transform: scale(1.35);
    color: #fff;
    text-shadow: 0 0 22px var(--accent-cyan), 0 0 38px rgba(0,255,204,0.6);
}

.game-stage {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,0,255,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 110%, rgba(0,255,204,0.14) 0%, transparent 70%),
        linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.85) 100%);
    cursor: crosshair;
}

/* ── Tub Butter sitting in the corner ─────────────────────────── */
.tub-butter {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: clamp(80px, 22vw, 130px);
    height: clamp(80px, 22vw, 130px);
    background-image: url('assets/img/eater.png');
    background-repeat: no-repeat;
    background-size: 300% 200%;
    background-position: 100% 0%; /* frame-one (idle) */
    filter: drop-shadow(0 0 12px rgba(0,255,204,0.35)) drop-shadow(0 6px 10px rgba(0,0,0,0.55));
    pointer-events: none;
    z-index: 12;
    animation: tub-breathe 2.4s ease-in-out infinite;
    transform-origin: bottom center;
}
.tub-butter.chomp {
    background-position: 50% 0%; /* frame-four (mouth open) */
    animation: tub-chomp 0.32s ease-out;
}
@keyframes tub-breathe {
    0%,100% { transform: scaleY(1)    translateY(0);    }
    50%     { transform: scaleY(1.05) translateY(-3px); }
}
@keyframes tub-chomp {
    0%   { transform: scale(1.15) translateY(-4px); }
    60%  { transform: scale(0.95) translateY(2px);  }
    100% { transform: scale(1)    translateY(0);    }
}

/* ── Pile zone next to Tub Butter ─────────────────────────────── */
.pile-zone {
    position: absolute;
    bottom: 14px;
    left: clamp(80px, 22vw, 130px);
    width: clamp(60px, 18vw, 110px);
    height: clamp(40px, 14vw, 70px);
    pointer-events: none;
    z-index: 11;
}
.pile-cookie {
    position: absolute;
    width: clamp(28px, 9vw, 44px);
    height: clamp(28px, 9vw, 44px);
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 6px rgba(0,255,204,0.35)) drop-shadow(0 3px 4px rgba(0,0,0,0.5));
    transform-origin: center bottom;
    animation: pile-plop 0.32s ease-out;
}
@keyframes pile-plop {
    0%   { transform: translateY(-22px) scale(0.6) rotate(-12deg); opacity: 0; }
    60%  { transform: translateY(4px)   scale(1.12) rotate(6deg);  opacity: 1; }
    100% { transform: translateY(0)     scale(1)    rotate(0);     opacity: 1; }
}

/* ── Flying cookies & veggies ────────────────────────────────── */
.flying-cookie,
.flying-veggie {
    position: absolute;
    width: clamp(54px, 14vw, 90px);
    height: clamp(54px, 14vw, 90px);
    background-repeat: no-repeat;
    pointer-events: auto;
    cursor: pointer;
    will-change: transform, left, top;
    z-index: 6;
    filter: drop-shadow(0 0 10px rgba(0,255,204,0.35)) drop-shadow(0 6px 10px rgba(0,0,0,0.55));
    /* expanded touch target via padding (negated by margin so layout/position is unchanged) */
    padding: 56px;
    margin: -56px;
    box-sizing: content-box;
    background-origin: content-box;
    background-clip: content-box;
    -webkit-touch-callout: none;
}
.flying-veggie {
    filter: drop-shadow(0 0 10px rgba(255,0,255,0.4)) drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}
.flying-cookie.popped,
.flying-veggie.popped { pointer-events: none; }

/* veggie tap = penalty visual */
.flying-veggie.zapped {
    animation: veg-zap 0.55s ease-out forwards;
    filter: drop-shadow(0 0 24px rgba(255,0,255,0.95)) saturate(1.9) brightness(1.15);
}
@keyframes veg-zap {
    0%   { transform: scale(1)    rotate(0);     opacity: 1; }
    25%  { transform: scale(1.45) rotate(12deg); opacity: 0.95; }
    100% { transform: scale(0.25) rotate(-40deg); opacity: 0; }
}

/* large magenta zap-ring (onioncore "danger" accent) */
.zap-ring {
    position: absolute;
    border: 9px solid var(--accent-pink);
    border-radius: 50%;
    pointer-events: none;
    z-index: 25;
    transform: translate(-50%, -50%);
    animation: zap-ring-kf 0.7s ease-out forwards;
    box-shadow: 0 0 38px rgba(255,0,255,0.85), inset 0 0 22px rgba(255,0,255,0.6);
    width: 18px; height: 18px;
    left: 0; top: 0;
}
@keyframes zap-ring-kf {
    0%   { width: 18px;  height: 18px;  opacity: 1;   border-width: 11px; }
    100% { width: 320px; height: 320px; opacity: 0;   border-width: 1px;  }
}

.game-stage.veg-shake { animation: veg-shake 0.42s linear; }
@keyframes veg-shake {
    0%,100% { transform: translate(0,0); }
    15%     { transform: translate(-9px, 3px);  }
    30%     { transform: translate(8px, -4px);  }
    45%     { transform: translate(-7px, 5px);  }
    60%     { transform: translate(6px, -3px);  }
    80%     { transform: translate(-3px, 2px);  }
}

/* ── Catch flash + score pop ─────────────────────────────────── */
.score-pop {
    position: absolute;
    font-family: inherit;
    font-weight: 900;
    font-size: clamp(1.4rem, 4.5vw, 2rem);
    color: var(--accent-cyan);
    text-shadow: 0 0 14px rgba(0,255,204,0.75), 0 0 28px rgba(0,255,204,0.45), 0 3px 8px rgba(0,0,0,0.9);
    pointer-events: none;
    z-index: 40;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    animation: score-pop-kf 0.8s ease-out forwards;
    letter-spacing: 1px;
}
@keyframes score-pop-kf {
    0%   { opacity: 1; transform: translate(-50%, -50%)  scale(0.7); }
    20%  { opacity: 1; transform: translate(-50%, -100%) scale(1.45); }
    100% { opacity: 0; transform: translate(-50%, -180%) scale(1);   }
}

.crumb {
    position: absolute;
    width: 9px; height: 9px;
    border-radius: 2px;
    background: var(--crumb-color, #e8b86d);
    pointer-events: none;
    z-index: 20;
    animation: crumb-fly 0.7s cubic-bezier(.2,.6,.3,1) forwards;
    box-shadow: 0 0 4px rgba(0,0,0,0.35);
}
@keyframes crumb-fly {
    0%   { opacity: 1; transform: translate(0,0) scale(1) rotate(0); }
    100% { opacity: 0; transform: var(--crumb-end) scale(0.2) rotate(var(--crumb-rot)); }
}

/* ── Dynamic cookie-tap visuals ──────────────────────────────── */
.tap-ring {
    position: absolute;
    border: 8px solid var(--accent-cyan);
    border-radius: 50%;
    pointer-events: none;
    z-index: 25;
    transform: translate(-50%, -50%);
    animation: tap-ring-kf 0.7s ease-out forwards;
    box-shadow: 0 0 36px rgba(0,255,204,0.8), inset 0 0 20px rgba(0,255,204,0.55);
    width: 16px; height: 16px;
    left: 0; top: 0;
}
@keyframes tap-ring-kf {
    0%   { width: 16px;  height: 16px;  opacity: 1;   border-width: 10px; }
    60%  { opacity: 0.6; }
    100% { width: 280px; height: 280px; opacity: 0;   border-width: 1px;  }
}
.tap-ring.outer {
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 24px rgba(255,255,255,0.5);
    animation: tap-ring-outer 0.85s ease-out forwards;
}
@keyframes tap-ring-outer {
    0%   { width: 28px;  height: 28px;  opacity: 1;   border-width: 6px; }
    100% { width: 380px; height: 380px; opacity: 0;   border-width: 1px; }
}

.tap-flash {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(0,255,204,0.7) 28%, rgba(0,255,204,0.0) 70%);
    pointer-events: none;
    z-index: 21;
    transform: translate(-50%, -50%);
    animation: tap-flash-kf 0.55s ease-out forwards;
    mix-blend-mode: screen;
    left: 0; top: 0;
}
@keyframes tap-flash-kf {
    0%   { opacity: 1;    transform: translate(-50%, -50%) scale(0.3); }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(2.2); }
}

/* stage burst — radial flash centered on the tap point.
   Singleton (one at a time) — see spawnStageFlash in game.js. No mix-blend-mode
   so each instance is a single composite layer instead of forcing the whole
   stage to recomposite. */
.stage-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(circle at var(--burst-x, 50%) var(--burst-y, 50%),
                                var(--burst-color, rgba(0,255,204,0.6)) 0%,
                                rgba(0,0,0,0) 32%);
    animation: stage-flash-kf 0.42s ease-out forwards;
}
@keyframes stage-flash-kf {
    0%   { opacity: 0; transform: scale(0.55); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.6);  }
}

/* fat cookie chunks — bigger than crumbs */
.chunk {
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 4px;
    background: var(--chunk-color, #c08a4a);
    pointer-events: none;
    z-index: 24;
    animation: chunk-fly 0.85s cubic-bezier(.2,.6,.3,1) forwards;
    box-shadow: 0 0 6px rgba(0,0,0,0.45);
}
@keyframes chunk-fly {
    0%   { opacity: 1; transform: translate(0,0) scale(1) rotate(0); }
    100% { opacity: 0; transform: var(--chunk-end) scale(0.3) rotate(var(--chunk-rot)); }
}

.spark {
    position: absolute;
    width: 10px; height: 10px;
    pointer-events: none;
    z-index: 22;
    background: radial-gradient(circle, #fff 0%, var(--spark-color, #00ffcc) 55%, transparent 80%);
    border-radius: 50%;
    animation: spark-fly 0.75s ease-out forwards;
    /* box-shadow instead of filter:drop-shadow — much cheaper per layer */
    box-shadow: 0 0 8px rgba(0,255,204,0.75);
    left: 0; top: 0;
}
@keyframes spark-fly {
    0%   { opacity: 1; transform: translate(0,0) scale(1.2); }
    100% { opacity: 0; transform: var(--spark-end) scale(0.15); }
}

.confetti {
    position: absolute;
    width: 7px; height: 11px;
    pointer-events: none;
    z-index: 23;
    background: var(--confetti-color, #00ffcc);
    border-radius: 1px;
    animation: confetti-fly 0.85s cubic-bezier(.2,.6,.3,1) forwards;
    left: 0; top: 0;
}
@keyframes confetti-fly {
    0%   { opacity: 1; transform: translate(0,0) rotate(0); }
    100% { opacity: 0; transform: var(--confetti-end) rotate(var(--confetti-rot)); }
}

.score-pop.big {
    font-size: clamp(2rem, 7vw, 2.8rem);
    color: #fff;
    text-shadow: 0 0 18px var(--accent-cyan), 0 0 38px rgba(0,255,204,0.75), 0 3px 8px rgba(0,0,0,0.9);
    letter-spacing: 1.5px;
}

/* ── Countdown overlay (3 / 2 / 1 / GO!) ─────────────────────── */
.countdown {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: clamp(5rem, 28vw, 14rem);
    color: #fff;
    text-shadow: 0 0 22px var(--accent-cyan), 0 0 50px rgba(0,255,204,0.6), 0 8px 0 var(--accent-pink);
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    letter-spacing: 4px;
}
.countdown.show {
    animation: count-pop 0.9s ease-out forwards;
}
@keyframes count-pop {
    0%   { opacity: 0; transform: scale(0.4); }
    25%  { opacity: 1; transform: scale(1.2); }
    70%  { opacity: 1; transform: scale(1);   }
    100% { opacity: 0; transform: scale(1.4); }
}

/* ═══════════════════════════════════════════════════════════════════
   FEAST SCREEN
   ═══════════════════════════════════════════════════════════════════ */
.feast-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--border-thin);
    border-radius: var(--radius);
    box-shadow: var(--onion-glow), 0 20px 60px rgba(0,0,0,0.6);
    padding: clamp(18px, 3.5vw, 30px) clamp(18px, 4vw, 36px);
    width: clamp(300px, 92vw, 560px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2vh, 16px);
}
.feast-title {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    font-weight: 900;
    letter-spacing: 2px;
    background: linear-gradient(to bottom, #fff 60%, var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(2px 2px 0px var(--accent-pink));
}

.feast-stage {
    position: relative;
    width: 100%;
    height: clamp(220px, 38dvh, 320px);
    background:
        radial-gradient(ellipse at 50% 110%, rgba(0,255,204,0.14) 0%, transparent 70%),
        rgba(0,0,0,0.45);
    border-radius: var(--radius);
    border: var(--border-thin);
    overflow: hidden;
}
.feast-tub {
    position: absolute;
    bottom: 6%;
    left: 8%;
    width: clamp(110px, 28vw, 170px);
    height: clamp(110px, 28vw, 170px);
    background-image: url('assets/img/eater.png');
    background-repeat: no-repeat;
    background-size: 300% 200%;
    background-position: 100% 0%; /* frame-one (closed mouth) */
    filter: drop-shadow(0 0 14px rgba(0,255,204,0.35)) drop-shadow(0 6px 12px rgba(0,0,0,0.55));
    z-index: 5;
    transform-origin: bottom center;
    animation: tub-breathe 2.4s ease-in-out infinite;
}
/* eater walking-sequence frames (3-col x 2-row sheet) */
.eater-frame-five  { background-position: 0%   0%; }
.eater-frame-four  { background-position: 50%  0%; }
.eater-frame-one   { background-position: 100% 0%; }
.eater-frame-six   { background-position: 0%   100%; }
.eater-frame-three { background-position: 50%  100%; }
.eater-frame-two   { background-position: 100% 100%; }
.feast-pile {
    position: absolute;
    bottom: 6%;
    right: 6%;
    width: 60%;
    height: 90%;
    pointer-events: none;
    z-index: 4;
}
.feast-pile .feast-cookie {
    position: absolute;
    width: clamp(38px, 12vw, 70px);
    height: clamp(38px, 12vw, 70px);
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 6px rgba(0,255,204,0.3)) drop-shadow(0 3px 6px rgba(0,0,0,0.55));
    transform-origin: center center;
    transition: opacity 0.3s ease, transform 0.4s ease;
}
.feast-pile .feast-cookie.gone {
    opacity: 0;
    transform: translateY(-30px) scale(0.3) rotate(60deg);
}

.feast-stats {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: clamp(1rem, 3vw, 1.25rem);
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
    letter-spacing: 0.5px;
}
.feast-stats #end-score {
    color: var(--accent-cyan);
    font-size: 1.25em;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0,255,204,0.55);
}
.end-rank {
    font-family: 'Inter', -apple-system, sans-serif;
    color: rgba(0,255,204,0.95);
    font-size: clamp(0.95rem, 2.6vw, 1.15rem);
    margin-top: 4px;
    letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════════════
   MUTE BUTTON
   ═══════════════════════════════════════════════════════════════════ */
.btn-mute {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(0,255,204,0.55);
    background: rgba(5,5,5,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--accent-cyan);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 0 12px rgba(0,255,204,0.2);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn-mute:active { transform: scale(0.92); }
.btn-mute.muted  {
    opacity: 0.55;
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.6);
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER (subtle)
   ═══════════════════════════════════════════════════════════════════ */
footer {
    position: fixed; bottom: 0; left: 0; right: 0;
    text-align: center;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: clamp(0.5rem, 1.5vw, 0.7rem);
    opacity: 0.42; padding: 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    pointer-events: none; z-index: 5;
}
footer a { color: var(--accent-cyan); pointer-events: auto; }