* { box-sizing: border-box; margin: 0; padding: 0; }

/* Card dimensions — JS writes these via updateCardDims() on load and resize. */
:root {
    --card-w: 76px;
    --card-h: 104px;
    /* Firework suit colours */
    --suit-white:  #e9e9f2;
    --suit-red:    #d6453f;
    --suit-blue:   #3f7fd6;
    --suit-yellow: #e0b53a;
    --suit-green:  #43a047;
}

/* ── Full-viewport canvas ──────────────────────────────────────────────────── */

body {
    background-color: #0e0a22;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    font-family: 'Fredoka', 'Segoe UI', sans-serif;
}

/* Cover art (the Hanabi box) zoomed slightly so the framed edges sit off-screen. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('assets/cover.jpg');
    background-size: cover;
    background-position: center;
    transform: scale(1.18);
    transform-origin: center;
    pointer-events: none;
    z-index: -2;
}

/* Dark night overlay — lowish alpha so the fireworks art reads through. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(14, 10, 40, 0.55) 0%, rgba(8, 5, 24, 0.86) 82%);
    pointer-events: none;
    z-index: -1;
}

#game {
    position: relative;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    overflow: hidden;
    color: #ddd;
    touch-action: none;
}

/* ── Header bar ──────────────────────────────────────────────────────────── */

#header-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: linear-gradient(180deg,
        rgba(10, 6, 26, 0.94), rgba(10, 6, 26, 0.65) 80%, rgba(10, 6, 26, 0));
    border-bottom: 1px solid rgba(120, 220, 235, 0.18);
    z-index: 300;
    pointer-events: none;
}
#header-bar > * { pointer-events: auto; }

#status-bar {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: rgba(240, 234, 216, 0.82);
    white-space: nowrap;
    pointer-events: none;
}
#turn-info { font-weight: 600; letter-spacing: 0.4px; }

#header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Deckades logo ───────────────────────────────────────────────────────── */

.deckades-logo {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.12em;
    color: rgba(240, 234, 216, 0.45);
    text-decoration: none;
    user-select: none;
    line-height: 1;
    transition: color 0.2s;
}
.deckades-logo:hover { color: rgba(240, 234, 216, 0.9); }
.deckades-spade {
    color: rgba(180, 148, 60, 0.55);
    font-size: 1.2em;
    vertical-align: middle;
    transition: color 0.2s;
}
.deckades-logo:hover .deckades-spade { color: rgba(180, 148, 60, 1); }

/* ── AI status indicator ─────────────────────────────────────────────────── */

#ai-indicator {
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: default;
    user-select: none;
}
#ai-indicator::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}
.ai-heuristic { color: rgba(230,150,50,0.85); border-color: rgba(230,150,50,0.3); background: rgba(230,150,50,0.07); }
.ai-heuristic::before { background: rgba(230,150,50,1); box-shadow: 0 0 5px rgba(230,150,50,0.5); }

/* ── Rules button — 44×44px minimum ─────────────────────────────────────── */

#rules-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(90, 58, 138, 0.6);
    color: rgba(154, 122, 204, 0.7);
    font-size: 18px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#rules-btn:hover { background: rgba(90,58,138,0.28); color: #cc99ff; border-color: #7a5aaa; }

#rules-popup {
    position: fixed;
    right: 18px; top: 64px;
    background: rgba(16, 10, 36, 0.95);
    border: 1px solid #7a5aaa;
    border-radius: 8px;
    padding: 16px 38px 16px 16px;
    color: #d8c8f0;
    font-size: 12px;
    letter-spacing: 0.3px;
    line-height: 1.65;
    z-index: 301;
    width: 300px; max-width: calc(100vw - 36px);
}
#rules-popup h3 { font-size: 14px; color: #cc99ff; margin-bottom: 6px; }
#rules-popup-close {
    position: absolute; top: 6px; right: 8px;
    background: transparent; border: none;
    color: #9a7acc; font-size: 15px; cursor: pointer; padding: 4px;
    transition: color 0.15s;
}
#rules-popup-close:hover { color: #cc99ff; }
#rules-popup a {
    display: inline-block; margin-top: 10px;
    color: #ffd700; text-decoration: underline; cursor: pointer;
}

/* ── Log button + panel ───────────────────────────────────────────────────── */

#log-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(90, 58, 138, 0.6);
    color: rgba(154, 122, 204, 0.75);
    cursor: pointer;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#log-btn:hover { background: rgba(90,58,138,0.28); color: #cc99ff; border-color: #7a5aaa; }
#log-btn svg, #log-btn svg * { pointer-events: none; }

#move-log-panel {
    position: fixed;
    right: 18px; top: 64px;
    width: 270px; max-height: 70vh;
    overflow-y: auto;
    background: rgba(16, 10, 36, 0.95);
    border: 1px solid #7a5aaa;
    border-radius: 8px;
    padding: 12px 14px;
    z-index: 302;
}
#move-log-panel .log-title {
    font-weight: 600; color: #cc99ff;
    letter-spacing: 0.5px; margin-bottom: 8px;
}
#move-log-panel .log-entry {
    display: flex; align-items: baseline; gap: 7px;
    padding: 3px 0; font-size: 13px; line-height: 1.4;
    color: rgba(240, 234, 216, 0.85);
}
#move-log-panel .log-entry .log-name {
    color: rgba(180, 148, 60, 0.95);
    font-weight: 600; flex: none;
}
#move-log-panel .log-entry span:last-child { flex: 1; }
#move-log-panel .log-divider {
    border-top: 1px solid rgba(150, 120, 200, 0.22);
    margin: 5px 0;
}
#move-log-panel .log-empty { color: rgba(200, 180, 240, 0.5); font-size: 12px; }

/* ── Board ─────────────────────────────────────────────────────────────────── */

#board {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: rgba(0, 0, 0, 0.30);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 70px rgba(0,0,0,0.55), inset 0 0 36px rgba(0,0,0,0.30);
    z-index: 5;
}

/* Row of 5 firework piles */
#fireworks-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* A single firework pile = one card-sized slot, tinted by suit */
.firework-pile {
    width: var(--card-w);
    height: var(--card-h);
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    font-size: 34px; font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.85);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.firework-pile.empty {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.22);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.firework-pile.complete {
    box-shadow: 0 0 18px 3px rgba(255,215,0,0.65), inset 0 0 14px rgba(255,255,255,0.25);
    border-color: gold;
}

/* Bottom strip: discard + tokens + deck count */
#discard-zone {
    position: relative;
    align-self: stretch;
}
.zone-label {
    font-size: 10px; opacity: 0.45; text-transform: uppercase;
    letter-spacing: 0.12em; user-select: none;
}
#discard-cards {
    display: flex; flex-wrap: wrap; gap: 2px;
    margin-top: 4px; max-width: calc(var(--card-w) * 5 + 48px);
    min-height: 22px;
}
/* Discards shown as tiny chips: suit colour + value */
.discard-chip {
    width: 18px; height: 24px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,255,255,0.25);
}

#token-zone {
    display: flex; align-items: center; gap: 18px;
    flex-wrap: wrap; justify-content: center;
}
.token-group { display: flex; gap: 5px; align-items: center; }
.hint-token, .fuse-token {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.hint-token { background: radial-gradient(circle at 35% 30%, #6fc7ff, #2b7fd0); box-shadow: 0 0 6px rgba(80,170,255,0.6); }
.hint-token.spent { background: rgba(255,255,255,0.08); box-shadow: none; opacity: 0.5; }
.fuse-token { background: radial-gradient(circle at 35% 30%, #555, #111); }
.fuse-token.burned { background: radial-gradient(circle at 35% 30%, #ff7a3c, #c0260f); box-shadow: 0 0 8px rgba(255,90,30,0.8); }
#deck-badge {
    font-size: 12px; color: rgba(240,234,216,0.8);
    padding: 3px 9px; border-radius: 10px;
    background: rgba(20,10,40,0.6); border: 1px solid rgba(120,220,235,0.2);
}

/* ── Cards — visual skin (CSS-drawn, no art for v1) ───────────────────────── */

.card {
    position: absolute;
    width: var(--card-w); height: var(--card-h);
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: white; text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    box-shadow: 2px 3px 8px rgba(0,0,0,0.5);
    user-select: none;
    cursor: default;
    overflow: hidden;
    transition: filter 0.1s, border-color 0.1s, box-shadow 0.12s;
    touch-action: none;
}
.card .card-value { font-size: 36px; line-height: 1; }

/* Suit tints for face-up cards and firework piles */
.suit-white  { background: linear-gradient(150deg, #fbfbff, #c9c9d8); color: #2a2a3a; text-shadow: 0 1px 2px rgba(255,255,255,0.6); }
.suit-red    { background: linear-gradient(150deg, #e8635d, #b8302b); }
.suit-blue   { background: linear-gradient(150deg, #5f9bea, #2c66b8); }
.suit-yellow { background: linear-gradient(150deg, #efc94f, #c79a16); color: #3a2e07; text-shadow: 0 1px 2px rgba(255,255,255,0.4); }
.suit-green  { background: linear-gradient(150deg, #5cbf63, #2f8537); }

/* Card back — own hand (always) and opponents during deal */
.card.face-down {
    background: linear-gradient(135deg, #1a1a2e, #16213e 50%, #0f3460);
    color: rgba(255,255,255,0.18);
}
.card.face-down .cb-motif { font-size: 30px; opacity: 0.5; }

/* Clickable states */
.card.playable { cursor: pointer; }
.card.playable:hover:not(.selected) {
    filter: brightness(1.16);
    border-color: rgba(255,215,0,0.85);
    z-index: 100 !important;
}
.card.selected {
    box-shadow: 0 0 0 3px gold, 2px 12px 22px rgba(0,0,0,0.65);
    border-color: gold;
    z-index: 120 !important;
}

/* ── Hint markers (the human's only knowledge about own cards) ─────────────── */
/* Bar across the bottom of a card: a colour pip if colour is known, a number
   if value is known. Dimmer variant used on teammates' cards. */
.hint-marks {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 32px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(0,0,0,0.6);
    pointer-events: none;
}
.hm-color { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7); }
.hm-value { font-size: 22px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; }
.hint-marks.dim { height: 26px; background: rgba(0,0,0,0.4); }
.hint-marks.dim .hm-color { width: 15px; height: 15px; }
.hint-marks.dim .hm-value { font-size: 17px; opacity: 0.9; }
/* Ruled-out colours/values — smaller, struck through ("not this") */
.hint-marks .hm-color.not,
.hint-marks .hm-value.not { position: relative; opacity: 0.55; }
.hint-marks .hm-color.not { width: 13px; height: 13px; }
.hint-marks .hm-value.not { font-size: 15px; font-weight: 700; }
.hint-marks .hm-color.not::after,
.hint-marks .hm-value.not::after {
    content: ''; position: absolute; left: -1px; right: -1px; top: 50%;
    height: 2px; background: rgba(255,80,80,0.95); transform: rotate(-45deg);
    border-radius: 2px;
}
.hint-marks.dim .hm-color.not { width: 10px; height: 10px; }
.hint-marks.dim .hm-value.not { font-size: 12px; }
/* Pulse applied briefly to cards that were just revealed by a hint */
.card.just-hinted { animation: hintPulse 0.9s ease-out; }
@keyframes hintPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,215,0,0.0); }
    25%  { box-shadow: 0 0 0 4px rgba(255,215,0,0.85); }
    100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.0); }
}

/* ── Player labels ────────────────────────────────────────────────────────── */

.player-label {
    position: absolute;
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    background: rgba(16,10,36,0.6);
    border: 1px solid rgba(120,220,235,0.22);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    pointer-events: none;
    white-space: nowrap;
    transition: border-color 0.2s, background 0.2s;
    z-index: 20;
}
.player-label.active-player {
    border-color: rgba(180,148,60,0.85);
    background: rgba(46,30,78,0.78);
    box-shadow: 0 0 14px rgba(180,148,60,0.35);
}
.label-name { font-size: 13px; font-weight: 600; color: rgba(240,234,216,0.88); }

/* ── Per-card action chooser (play / discard / hint) ──────────────────────── */

#card-menu {
    position: absolute;
    z-index: 400;
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px;
    background: rgba(18,11,40,0.97);
    border: 1px solid rgba(180,148,60,0.5);
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.6);
}
#card-menu .menu-title {
    font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase;
    color: rgba(240,234,216,0.55); text-align: center; padding-bottom: 2px;
}
#card-menu button {
    min-height: 40px; padding: 8px 16px;
    border-radius: 7px;
    border: 1px solid rgba(180,148,60,0.45);
    background: rgba(34,22,64,0.9);
    color: rgba(240,234,216,0.92);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; touch-action: none; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
#card-menu button:hover:not(:disabled) { background: rgba(54,38,96,0.95); border-color: rgba(180,148,60,0.85); }
#card-menu button.primary { background: rgba(180,148,60,0.9); color: rgba(20,12,40,0.97); border-color: transparent; }
#card-menu button.primary:hover { background: rgba(210,180,80,1); }
#card-menu button:disabled { opacity: 0.4; cursor: not-allowed; }
#card-menu .menu-swatch { display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; margin-right:6px; border:1px solid rgba(255,255,255,0.5); }

/* ── Hint chooser (colour + number grid) ──────────────────────────────────── */

#card-menu .hint-sub {
    font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase;
    color: rgba(240,234,216,0.5); padding: 4px 2px 1px;
}
#card-menu .hint-grid { display: flex; gap: 6px; }
.hint-btn {
    position: relative;
    width: 40px; min-height: 40px; padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(180,148,60,0.45);
    background: rgba(34,22,64,0.9);
    color: rgba(240,234,216,0.95);
    font-family: inherit; font-size: 18px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; touch-action: none;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.hint-btn:hover:not(:disabled) { background: rgba(54,38,96,0.95); border-color: rgba(180,148,60,0.9); }
.hint-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hint-btn-color { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.55); }
/* Count badge — top-right. A "0" badge (negative hint) is dimmed and outlined red. */
.hint-btn-count {
    position: absolute; top: -7px; right: -7px;
    min-width: 17px; height: 17px; padding: 0 3px;
    border-radius: 9px;
    background: rgba(180,148,60,0.95); color: rgba(20,12,40,0.97);
    font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
    border: 1px solid rgba(20,12,40,0.5);
}
.hint-btn.none .hint-btn-count {
    background: rgba(40,26,70,0.95); color: rgba(255,120,120,0.95);
    border-color: rgba(255,90,90,0.7);
}
.hint-btn.none { opacity: 0.82; }

/* ── Floating hint arrows (what an AI / human hint touched) ────────────────── */

.hint-arrow-layer { position: fixed; inset: 0; z-index: 500; pointer-events: none; transition: opacity 0.4s ease; }
.hint-arrow-layer.fade-out { opacity: 0; }
.hint-arrow {
    position: fixed;
    display: flex; flex-direction: column; align-items: center;
    /* entrance once, then bob up and down for the rest of its life */
    animation: hintArrowIn 0.25s ease-out, hintArrowBob 1.1s ease-in-out 0.25s infinite;
}
.hint-arrow-tag {
    display: flex; align-items: center; justify-content: center;
    min-width: 52px; height: 52px; padding: 0 12px;
    border-radius: 26px;
    background: rgba(180,148,60,0.96);
    color: rgba(20,12,40,0.98);
    font-size: 30px; font-weight: 800; line-height: 1;
    box-shadow: 0 3px 16px rgba(0,0,0,0.55), 0 0 22px rgba(255,215,0,0.45);
    border: 2px solid rgba(255,235,150,0.8);
}
.hint-arrow-color { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7); }
.hint-arrow-point {
    width: 0; height: 0; margin-top: -2px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 18px solid rgba(180,148,60,0.96);
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5));
}
/* Negative hint ("none of these are X") — red tag with a struck mark */
.hint-arrow.negative .hint-arrow-tag {
    background: rgba(60,20,28,0.96); color: rgba(255,210,210,0.97);
    border-color: rgba(255,90,90,0.85);
    box-shadow: 0 3px 16px rgba(0,0,0,0.55), 0 0 22px rgba(255,60,60,0.4);
    position: relative;
}
.hint-arrow.negative .hint-arrow-tag::after {
    content: ''; position: absolute; left: 6px; right: 6px; top: 50%;
    height: 3px; background: rgba(255,90,90,0.95); transform: rotate(-20deg);
    border-radius: 2px;
}
.hint-arrow.negative .hint-arrow-color { opacity: 0.85; }
.hint-arrow.negative .hint-arrow-point { border-top-color: rgba(60,20,28,0.96); }
@keyframes hintArrowIn {
    0%   { opacity: 0; transform: translateY(-14px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes hintArrowBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-11px); }
}

/* ── Toast ────────────────────────────────────────────────────────────────── */

#toast {
    position: absolute;
    left: 50%; top: 76px;
    transform: translateX(-50%);
    padding: 9px 18px;
    background: rgba(18,11,40,0.94);
    border: 1px solid rgba(120,220,235,0.35);
    border-radius: 20px;
    color: rgba(240,234,216,0.95);
    font-size: 13px; font-weight: 500;
    z-index: 350;
    pointer-events: none;
    max-width: 84vw; text-align: center;
}

/* ── Start screen ─────────────────────────────────────────────────────────── */

#start-screen {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 900;
}
.start-panel {
    width: 400px; max-width: calc(100vw - 32px);
    background: rgba(18,11,40,0.96);
    border: 1px solid rgba(180,148,60,0.4);
    border-radius: 16px;
    padding: 30px 34px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,0.7);
    transform-origin: center;
}
.start-panel h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 46px; letter-spacing: 0.06em;
    color: #ffd95e; margin-bottom: 4px;
    text-shadow: 0 2px 14px rgba(255,180,40,0.5);
}
.start-panel .tagline { font-size: 13px; color: rgba(240,234,216,0.6); margin-bottom: 22px; }
.start-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 14px 0;
}
.start-row label { font-size: 13px; color: rgba(240,234,216,0.82); }
.start-panel select, .start-panel input[type=range] { width: 150px; }
.start-panel select {
    padding: 6px 8px; border-radius: 7px;
    background: rgba(34,22,64,0.9); color: rgba(240,234,216,0.92);
    border: 1px solid rgba(180,148,60,0.4); font-family: inherit; font-size: 13px;
}
#speed-label { font-size: 12px; color: rgba(240,234,216,0.6); min-width: 64px; text-align: right; }
.start-panel .play-btn {
    margin-top: 24px; width: 100%;
    padding: 14px; border: none; border-radius: 10px;
    background: rgba(180,148,60,0.95); color: rgba(18,10,34,0.98);
    font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0.1em;
    cursor: pointer; text-transform: uppercase;
    transition: background 0.15s;
}
.start-panel .play-btn:hover { background: rgba(214,182,80,1); }

/* ── Game-over modal ──────────────────────────────────────────────────────── */

.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.80);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.modal-content {
    background: rgba(20,12,42,0.98);
    border-radius: 16px;
    border: 1px solid rgba(180,148,60,0.4);
    padding: 34px 48px;
    text-align: center;
    display: flex; flex-direction: column; gap: 14px;
    max-width: 480px; width: calc(100vw - 48px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.modal-eyebrow {
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: rgba(180,148,60,0.75);
}
.modal-content h2 { font-size: 2rem; color: rgba(240,234,216,0.97); }
#game-over-ranking .final-score {
    font-family: 'Cormorant Garamond', serif;
    font-size: 58px; font-weight: 700; color: #ffd95e;
    text-shadow: 0 2px 16px rgba(255,180,40,0.5);
}
#game-over-ranking .rating-label { font-size: 16px; color: rgba(240,234,216,0.9); margin-top: -4px; }
#game-over-ranking .firework-breakdown {
    display: flex; gap: 8px; justify-content: center; margin: 12px 0 4px;
}
#game-over-ranking .fb-pile {
    width: 30px; height: 42px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.25);
}
.restart-btn {
    padding: 12px 40px;
    font-family: inherit;
    font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    background: rgba(180,148,60,0.92); color: rgba(20,12,40,0.97);
    border: none; border-radius: 8px;
    cursor: pointer; min-height: 48px;
    transition: background 0.15s;
}
.restart-btn:hover { background: rgba(214,182,80,1); }

/* ── Banner flash ─────────────────────────────────────────────────────────── */
@keyframes banner-pop {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
    18%  { opacity: 1; transform: translate(-50%,-50%) scale(1.12) rotate(-2deg); }
    32%  { transform: translate(-50%,-50%) scale(0.96) rotate(1deg); }
    48%  { transform: translate(-50%,-50%) scale(1.04); }
    65%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.0); }
}