/* ═══════════════════════════════════════════════════════════
   CHAIN — Illustrated Skin v5
   ALL sizes derived from: native_asset_px / 1601 * 100%
   (1601×2479 is the reference canvas for all assets)

   FONT: Exo 2 throughout (geometric, Cyrillic-ready).
         Headings use 800w + all-caps + wide tracking for
         "inscribed alien rune" character — no serif needed.
═══════════════════════════════════════════════════════════ */

/* ── CSS DESIGN TOKENS ──────────────────────────────────── */
:root {
    --col-bg:        #07060f;
    --col-nebula-a:  #0d0a1a;
    --col-nebula-b:  #080e18;
    --col-artifact:  #c79b46;
    --col-gold:      #e8b84a;
    --col-gold-dim:  #a87e32;
    --col-text:      #e8dfc8;
    --col-text-dim:  #9a8870;
    /* Panel bg: warm dark brown, 88% — matches artifact shadow tone,
       lets stars ghost through, feels projected not plastered */
    --col-panel-bg:  rgba(20,11,6,0.88);
    --col-holo-bg:   rgba(6,4,16,0.88);
    --col-holo-edge: rgba(160,210,255,0.18);
    --font-ui:       'Exo 2', 'Segoe UI', system-ui, sans-serif;
    /* font-display = font-ui — single typeface, hierarchy via weight */
    --font-display:  'Exo 2', 'Segoe UI', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
    /* Deep space with nebula colour and warm artifact glow */
    background:
        /* Warm amber halo — glows behind the artifact center */
        radial-gradient(ellipse 55% 70% at 50% 48%, rgba(120,70,10,0.28) 0%, transparent 65%),
        /* Teal accent — lower right, alien atmosphere */
        radial-gradient(ellipse 50% 40% at 78% 72%, rgba(0,60,70,0.32) 0%, transparent 60%),
        /* Violet nebula — upper left */
        radial-gradient(ellipse 70% 55% at 18% 22%, rgba(45,15,80,0.38) 0%, transparent 58%),
        /* Deep teal — upper right */
        radial-gradient(ellipse 40% 35% at 82% 18%, rgba(0,35,55,0.28) 0%, transparent 50%),
        /* Warm ember — lower left, echoing fire element */
        radial-gradient(ellipse 35% 30% at 12% 78%, rgba(60,20,5,0.22) 0%, transparent 55%),
        /* Base — deep near-black with very faint violet tint */
        radial-gradient(ellipse 100% 100% at 50% 50%, #0c0918 0%, #050308 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    font-family: var(--font-ui);
    color: var(--col-text);
    user-select: none;
}

/* ── GAME FRAME ────────────────────────────────────────────
   Locked to the background's native aspect ratio 1601:2479.
   Everything inside uses % of this container.            */
.game-frame {
    position: relative;
    width: min(560px, 100vw);
    aspect-ratio: 1601 / 2479;
    flex-shrink: 0;
    container-type: inline-size;
}

@media (max-height: 700px) {
    .game-frame { width: auto; height: 98vh; aspect-ratio: 1601 / 2479; }
}

.frame-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: fill;
    display: block;
    pointer-events: none;
    z-index: 0;
}

/* ── MUTE BUTTON ─────────────────────────────────────────
   Upper-left of score area, sits in the dark artifact surround.
   Sized as a small icon-only button, no text.                */
/* ── MUTE WRAP — positions hologram + button together ────
   Upper-left of score area. Uses absolute% so it scales with
   the artifact frame like all other controls.               */
.mute-wrap {
    position: absolute; z-index: 10;
    left: 10.4%;
    top: 2%;          /* shifted up to give room for hologram above */
    width: 6.2%;
    display: flex; flex-direction: column; align-items: center;
    gap: 0;
}

/* ── HOLOGRAM ── floats above button, gilded projection     */
.mute-hologram {
    position: relative;
    width: 90%;         /* same visual width as button */
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    color: #d4a030;     /* golden/gilded base */
    /* Hologram scan-line shimmer via animation */
    animation: holoFlicker 4.5s ease-in-out infinite;
    /* Glow from below — as if the button beneath is projecting it */
    filter:
        drop-shadow(0 3px 6px rgba(210,150,20,0.90))
        drop-shadow(0 0 3px rgba(255,200,60,0.50))
        drop-shadow(0 -2px 8px rgba(255,220,80,0.20));
}
.mute-hologram svg {
    width: 80%; height: 80%;
    opacity: 0.88;
}
/* Muted state: hologram dims and turns reddish */
.mute-hologram.muted {
    color: #803020;
    animation: holoFlickerMuted 3s ease-in-out infinite;
    filter:
        drop-shadow(0 3px 5px rgba(180,60,20,0.70))
        drop-shadow(0 0 3px rgba(220,80,30,0.40));
}

/* Projection cone — wide base at icon, tapers to near-point toward button.
   Sits at the bottom of the hologram container, bridging to the button. */
.mute-holo-beam {
    position: absolute; bottom: -11px; left: 50%;
    transform: translateX(-50%);
    width: 48%;
    height: 13px;
    clip-path: polygon(5% 0%, 95% 0%, 53% 100%, 47% 100%);
    background: linear-gradient(to bottom,
        rgba(220,170,30,0.00) 0%,    /* base edge dissolves */
        rgba(220,170,30,0.28) 28%,   /* peak opacity near wide end */
        rgba(220,170,30,0.00) 100%); /* tip fully dissolves */
    pointer-events: none;
}
.mute-hologram.muted .mute-holo-beam {
    background: linear-gradient(to bottom,
        rgba(180,60,20,0.00) 0%,
        rgba(180,60,20,0.22) 28%,
        rgba(180,60,20,0.00) 100%);
}

@keyframes holoFlicker {
    0%, 100% { opacity: 0.88; }
    30%       { opacity: 0.82; }
    50%       { opacity: 0.95; }
    72%       { opacity: 0.79; }
    85%       { opacity: 0.92; }
}
@keyframes holoFlickerMuted {
    0%, 100% { opacity: 0.65; }
    40%       { opacity: 0.55; }
    70%       { opacity: 0.70; }
}

/* ── MUTE BUTTON — image-based, scales within wrap ─────── */
.btn-mute {
    width: 100%;
    aspect-ratio: 1;
    background: none; border: none; outline: none;
    cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1);
    transform-origin: center;
}
.btn-mute img {
    width: 86%; height: 86%; object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(210,150,20,0.40));
    transition: filter 0.14s ease, transform 0.12s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-mute:hover img {
    filter: drop-shadow(0 0 7px rgba(210,150,20,0.80)) brightness(1.2);
    transform: scale(1.10);
}
.btn-mute:active { transform: scale(0.92); }
/* Muted state — button image dims slightly */
.mute-wrap.muted .btn-mute img {
    filter: drop-shadow(0 0 2px rgba(180,60,20,0.50)) brightness(0.75) saturate(0.6);
}
.mute-wrap.muted .btn-mute:hover img {
    filter: drop-shadow(0 0 6px rgba(200,80,30,0.70)) brightness(1.0) saturate(1.0);
}

/* ── SCORE LABELS  (above slots, y ≈ 9.5–12.2%) ────────── */
.slot-label-above {
    position: absolute;
    z-index: 10;
    font-family: var(--font-ui);
    font-size: clamp(12px, 1.5cqw, 13px);
    font-weight: 800;
    color: #342916;
    text-shadow: 0 0 4px rgba(195, 181, 145, 0.909);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    top: 10%; bottom: calc(100% - 12.8%);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    
}
.slot-label-score { left: 16.7%; right: calc(100% - 36.5%); }
.slot-label-best  { left: 39.2%; right: calc(100% - 63.2%); }
.slot-label-atoms { left: 65.7%; right: calc(100% - 82.8%); }

/* ── RANK BADGE (above Best score slot) ─────────────────
   Best slot center: (39.2+63.2)/2 = 51.2%
   Badge positioned to sit over the carved circle above best score. */
#rank-badge {
    position: absolute; z-index: 11;
    width: 11%;
    left: 45.5%;
    top: 3.7%;
    pointer-events: none;
    object-fit: contain;
    filter: none;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                filter 0.35s ease;
}
#rank-badge.rank-upgrade {
    animation: rankUpgradePulse 1.2s ease-out forwards;
}
@keyframes rankUpgradePulse {
    0%   { transform: translateX(-50%) scale(1);    filter: drop-shadow(0 0  4px rgba(0,0,0,0.7)); }
    30%  { transform: translateX(-50%) scale(1.35); filter: drop-shadow(0 0 18px rgba(255,220,80,0.95))
                                                            drop-shadow(0 0 32px rgba(220,160,20,0.70)); }
    70%  { transform: translateX(-50%) scale(1.12); filter: drop-shadow(0 0 10px rgba(255,220,80,0.60)); }
    100% { transform: translateX(-50%) scale(1);    filter: drop-shadow(0 0  4px rgba(0,0,0,0.7)); }
}

/* ── SCORE SLOTS ───────────────────────────────────────── */
.slot {
    position: absolute;
    z-index: 10;
    display: flex; align-items: flex-end; justify-content: center;
    text-align: center;
    top: 12.2%; bottom: calc(100% - 15.0%);
    padding-bottom: 0%;
}
.slot-score { left: 16.7%; right: calc(100% - 36.5%); }
.slot-best  { left: 39.2%; right: calc(100% - 63.2%); }
.slot-atoms { left: 65.7%; right: calc(100% - 82.8%); }

.slot-value {
    font-family: var(--font-ui);
    font-size: clamp(11px, 2.8cqw, 28px);
    font-weight: 900; color: #f0e4c0;
    line-height: 1; letter-spacing: 0.03em;
}
.slot-value--gold { color: #ffd700; }
.slot-value.bump { animation: scoreBump 0.25s ease-out; }
@keyframes scoreBump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); filter: brightness(1.5); }
    100% { transform: scale(1); }
}

/* ── PLUS BUTTON ─────────────────────────────────────────
   Native: 120×100 px
   CSS width  = 120/1601 = 7.50%
   CSS height = 100/2479 = 4.03%   (height < slot, OK)
   Slot in bg: x=84.5%–91.5%, y≈12.2%–15%               */
.btn-plus {
    position: absolute; z-index: 10;
    left: 84.5%;
    width: 7.50%;               /* 120/1601 */
    top: 12.0%;
    height: 4.03%;              /* 100/2479 */
    background: none; border: none; outline: none;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.btn-plus img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 0 3px #ffd70033);
    transition: filter 0.14s ease, transform 0.12s cubic-bezier(0.34,1.56,0.64,1);
    transform-origin: center;
}
.btn-plus:hover  img {
    filter: drop-shadow(0 0 7px #d4880099) brightness(1.2);
    transform: scale(1.10);
}
.btn-plus:active img {
    transform: scale(0.90);
    filter: drop-shadow(0 0 9px #e89000bb) brightness(1.3);
    transition: filter 0.05s, transform 0.06s cubic-bezier(0.55,0,1,0.45);
}

/* ── DIFFICULTY BAR ─────────────────────────────────────
   From result.png: slot at x=24%–70%, y=16.5%–17%       */
.diff-label {
    position: absolute; z-index: 10;
    left: 2%; right: calc(100% - 39.8%);
    top: 18.2%; bottom: calc(100% - 19.4%);
    font-family: var(--font-ui);
    font-size: clamp(7.6px, 1.1cqw, 10px);
    font-weight: 700;
    color: #d8b771;
    letter-spacing: 0.22em; text-transform: uppercase;
    display: flex; align-items: center; justify-content: flex-end;
    pointer-events: none;
    text-shadow: 0 0 6px rgba(200,160,60,0.5);
}
/* Beam channel — slim dark groove, rounded ends */
.diff-track-wrap {
    position: absolute; z-index: 10;
    left: 41.4%; right: 32.2%;
    top: 18.45%; height: 0.90%;
    background: rgba(0, 0, 0, 0.274);
    border-radius: 999px;
    overflow: visible;
    box-shadow: inset 0 0 4px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,0.8);
}
/* The plasma beam — white to blue, dimmed */
.diff-fill {
    height: 100%; width: 0%;
    position: relative;
    border-radius: 999px;
    /* White-hot start cooling to ice-blue then deeper blue */
    background: linear-gradient(90deg,
        #944a00f1  0%,
        #9a3e05f1 18%,
        #8f5511f1 38%,
        #b07d3bf1 60%,
        #ffd058f1 80%,
        #ffd51df1 100%);
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    /* Softer glow — light yellow-white halo, not blazing */
    box-shadow:
        0  0  2px 1px rgba(209, 170, 120, 0.484),
        0  0  5px 2px rgba(198, 133, 59, 0.3),
        0  0 12px 3px rgba(183, 79, 50, 0.18),
        0  0 24px 5px rgba(175, 63, 18, 0.1);
}
/* Subtle filament — soft, not overwhelming */
.diff-fill::before {
    content: '';
    position: absolute;
    top: 5%; left: 2%; right: 2%; bottom: 5%;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.0) 0%,
        rgba(253, 181, 113, 0.6) 15%,
        rgba(255, 223, 179, 0.767) 50%,
        rgba(255, 180, 81, 0.55) 85%,
        rgba(100,180,255,0.0) 100%);
    border-radius: 999px;
    mix-blend-mode: screen;
}
.diff-fill::after {
    content: '';
    position: absolute;
    bottom: 0; left: 8%; right: 8%; height: 25%;
    background: linear-gradient(90deg,
        rgba(200,230,255,0.0),
        rgba(200,230,255,0.20) 40%,
        rgba(150,200,255,0.15) 70%,
        rgba(100,160,255,0.0));
    border-radius: 999px;
    opacity: 0.5;
}

/* ── ELEMENT ICONS ───────────────────────────────────────
   Native: ~101–105px square
   CSS width ≈ 103/1601 = 6.43% (using average of the 4)
   Positions: centres at x=35.6%, 44.1%, 52.4%, 61.2%
   y centre = 23.5% → top = 23.5% − (height/2)
   height = 6.43% × (frame_W / frame_H) = 6.43%×0.6458 = 4.15%
   → top = 23.5% − 2.07% = 21.4%                        */
.el-slot {
    position: absolute; z-index: 10;
    width: 6.43%;              /* ~103/1601 */
    aspect-ratio: 1;           /* keeps it square in pixels */
    top: 21.0%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2%;
    transition: opacity 0.5s, filter 0.5s;
}
.el-slot.locked { opacity: 0.12; filter: grayscale(0.6); }

/* left = centre_x − half_width (6.43%/2 = 3.22%) */
.el-fire      { left: 32.4%; }   /* 35.6 − 3.2 */
.el-water     { left: 40.9%; }   /* 44.1 − 3.2 */
.el-lightning { left: 49.8%; }   /* 52.4 − 3.2 */
.el-earth     { left: 58.0%; }   /* 61.2 − 3.2 */

.el-img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 0 4px #00000088);
    transition: filter 0.4s;
}
#leg-fire:not(.locked)      .el-img { filter: drop-shadow(0 0 5px #ff6b35aa) drop-shadow(0 0 12px #ff6b3544); }
#leg-water:not(.locked)     .el-img { filter: drop-shadow(0 0 5px #00b4d8aa) drop-shadow(0 0 12px #00b4d844); }
#leg-lightning:not(.locked) .el-img { filter: drop-shadow(0 0 5px #b24fd6aa) drop-shadow(0 0 12px #b24fd644); }
#leg-earth:not(.locked)     .el-img { filter: drop-shadow(0 0 5px #7bc700aa) drop-shadow(0 0 12px #7bc70044); }

.el-name { display: none; }

/* ── BOARD ZONE ──────────────────────────────────────────
   The grid background image is 1080×1080.
   CSS width = 1080/1601 = 67.46%
   Using aspect-ratio:1 locks it square in rendered pixels,
   which is exactly right for a square source image.
   Position: top/left from background art analysis.        */
.board-zone {
    position: absolute; z-index: 5;
    left: 14.2%;
    width: 67.46%;              /* 1080/1601 */
    aspect-ratio: 1;
    top: 30.5%;
    overflow: visible;
}

.grid-container {
    position: absolute; inset: 0; overflow: visible;
}

#board-bg {
    position: absolute; inset: 0;
    width: 101%; height: 101%;
    object-fit: fill;
    pointer-events: none; z-index: 0;
}

#particleCanvas {
    position: absolute;
    top: -15%; left: -15%;
    width: 130%; height: 130%;
    pointer-events: none; z-index: 10;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 45%, rgba(0,0,0,0.5) 68%, transparent 86%);
    mask-image:         radial-gradient(circle at 50% 50%, black 45%, rgba(0,0,0,0.5) 68%, transparent 86%);
}

/* Grid bounds from board background pixel analysis:
   Stone squares: x=5%–94.2%, y=6%–99.4%                 */
.grid {
    position: absolute;
    left: 5.0%; right: 5.0%;
    top: 5.0%; bottom: 5.0%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 1.9%;
    z-index: 1;
}

/* ── DIRECTION BUTTONS ───────────────────────────────────
   Each sized at native_px/1601 (width) or native_px/2479 (height).

   up_button.png:    221×135 → width=221/1601=13.80%
   down_button.png:  230×131 → width=230/1601=14.37%
   left_button.png:  127×234 → height=234/2479=9.44%
   right_button.png: 135×229 → height=229/2479=9.24%

   Positions from result.png analysis.                    */
.dir-btn {
    position: absolute; z-index: 20;
    background: none; border: none; outline: none;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.12s;
}
.dir-btn img {
    display: block; width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 4px #ffd70033);
    transition: filter 0.14s ease, transform 0.12s cubic-bezier(0.34,1.56,0.64,1);
    transform-origin: center;
}
.dir-btn:hover img {
    filter: drop-shadow(0 0 9px #e8a020cc) drop-shadow(0 0 18px #c8780044) brightness(1.22);
    transform: scale(1.08);
}
.dir-btn.pressed img,
.dir-btn:active img {
    filter: drop-shadow(0 0 14px #e8a020ff) brightness(1.38);
    transform: scale(0.91);
    transition: filter 0.05s, transform 0.06s cubic-bezier(0.55,0,1,0.45);
}
.dir-btn:focus { outline: none; }

/* up: width=13.80%, aspect locks height. left=49%−6.9%=42.1% */
.dir-up {
    width: 13.80%;              /* 221/1601 */
    aspect-ratio: 221 / 135;
    left: 41.5%;
    top: 26.5%;
}
/* down: width=14.37% */
.dir-down {
    width: 14.37%;              /* 230/1601 */
    aspect-ratio: 230 / 131;
    left: 41.6%;
    top: 73.6%;
}
/* left: height=9.44%, aspect locks width */
.dir-left {
    height: 9.44%;              /* 234/2479 */
    aspect-ratio: 127 / 234;
    left: 7.5%;
    top: 47.8%;
}
/* right: height=9.24% */
.dir-right {
    height: 9.24%;              /* 229/2479 */
    aspect-ratio: 135 / 229;
    right: 10.5%;
    top: 47.8%;
}

/* ── CELLS ───────────────────────────────────────────────── */
.cell {
    background: transparent; border-radius: 6%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: relative; overflow: visible;
    min-height: 0; min-width: 0;
    transition: box-shadow 0.3s;
}
.cell-image {
    position: absolute;
    top: -4%; left: -4%;
    width: 108%; height: 108%;
    object-fit: contain; display: block;
    pointer-events: none; z-index: 0;
}
.cell-level {
    font-family: var(--font-ui);
    font-size: clamp(6px, 1.4cqw, 13px);
    font-weight: 700; letter-spacing: 0.10em;
    position: absolute; bottom: 7%; left: 50%;
    transform: translateX(-50%); z-index: 2;
    white-space: nowrap; color: #e8dfc8;
    text-shadow: 0 0 3px #000, 0 0 6px #000, 0 0 14px rgba(0,0,0,0.95);
}
.cell.fire-1 .cell-level, .cell.fire-2 .cell-level,
.cell.fire-3 .cell-level, .cell.fire-4 .cell-level {
    color: #ffb87a; text-shadow: 0 0 3px #000, 0 0 8px #000, 0 0 10px rgba(255,100,0,0.7);
}
.cell.water-1 .cell-level, .cell.water-2 .cell-level,
.cell.water-3 .cell-level, .cell.water-4 .cell-level {
    color: #90e0ef; text-shadow: 0 0 3px #000, 0 0 8px #000, 0 0 10px rgba(0,180,216,0.7);
}
.cell.earth-1 .cell-level, .cell.earth-2 .cell-level,
.cell.earth-3 .cell-level, .cell.earth-4 .cell-level {
    color: #b8f07a; text-shadow: 0 0 3px #000, 0 0 8px #000, 0 0 10px rgba(123,199,0,0.7);
}
.cell.lightning-1 .cell-level, .cell.lightning-2 .cell-level,
.cell.lightning-3 .cell-level, .cell.lightning-4 .cell-level {
    color: #e0aaff; text-shadow: 0 0 3px #000, 0 0 8px #000, 0 0 10px rgba(178,79,214,0.7);
}
.cell.wild .cell-level {
    color: #f0e8d0; text-shadow: 0 0 3px #000, 0 0 8px #000, 0 0 10px rgba(255,255,255,0.4);
}
.cell.fire-1 { background: #3d1a00; }
.cell.fire-2 { background: #5c2500; }
.cell.fire-3 { background: #6e2b00; }
.cell.fire-4 { background: #7a3000; animation: pulse-fire 1.5s infinite; }
.cell.water-1 { background: #001a3d; }
.cell.water-2 { background: #002857; }
.cell.water-3 { background: #003064; }
.cell.water-4 { background: #003870; animation: pulse-water 1.5s infinite; }
.cell.earth-1 { background: #1a2e00; }
.cell.earth-2 { background: #274400; }
.cell.earth-3 { background: #2e5000; }
.cell.earth-4 { background: #355c00; animation: pulse-earth 1.5s infinite; }
.cell.lightning-1 { background: #2a1a3d; }
.cell.lightning-2 { background: #3d2557; }
.cell.lightning-3 { background: #472a64; }
.cell.lightning-4 { background: #512f70; animation: pulse-lightning 1.5s infinite; }
.cell.wild { background: radial-gradient(135deg,#1a1a3d,#2a1a2e,#1a2a1a); animation: pulse-wild 2s infinite; }
.cell.fusion-tile {
    background: radial-gradient(circle,#2a1a3d,#3d1a00,#1a2e00);
    box-shadow: 0 0 20px #ffd700, 0 0 40px #ffd70066;
    animation: pulse-fusion 1s infinite;
}
@keyframes pulse-fire      { 0%,100%{box-shadow:0 0 12px #ff8800aa} 50%{box-shadow:0 0 26px #ff8800ff,0 0 40px #ff880044} }
@keyframes pulse-water     { 0%,100%{box-shadow:0 0 12px #48cae4aa} 50%{box-shadow:0 0 26px #48cae4ff,0 0 40px #48cae444} }
@keyframes pulse-earth     { 0%,100%{box-shadow:0 0 12px #82c200aa} 50%{box-shadow:0 0 26px #82c200ff,0 0 40px #82c20044} }
@keyframes pulse-lightning { 0%,100%{box-shadow:0 0 12px #cc55eeaa} 50%{box-shadow:0 0 26px #cc55eeff,0 0 40px #cc55ee44} }
@keyframes pulse-wild      { 0%,100%{box-shadow:0 0 10px #ffffff33} 50%{box-shadow:0 0 22px #ffffffaa} }
@keyframes pulse-fusion    { 0%,100%{box-shadow:0 0 20px #ffd700,0 0 40px #ffd70066;transform:scale(1)} 50%{box-shadow:0 0 36px #ffd700,0 0 72px #ffd700aa;transform:scale(1.06)} }
.cell.pop    { animation: pop 0.18s ease-out; }
@keyframes pop    { 0%{transform:scale(1)} 50%{transform:scale(1.28)} 100%{transform:scale(1)} }
.cell.vanish { animation: vanish 0.38s ease-out forwards; }
@keyframes vanish { 0%{transform:scale(1);opacity:1} 60%{transform:scale(1.4);opacity:0.6} 100%{transform:scale(0);opacity:0} }

/* Earth fusion: tiles convert in-place — dramatic green bloom, don't disappear */
.cell.earth-convert { animation: earthConvert 1.35s ease-out forwards; }
@keyframes earthConvert {
    0%   { filter: brightness(1)   saturate(1)   hue-rotate(0deg);   transform: scale(1);    box-shadow: none; }
    15%  { filter: brightness(2.8) saturate(0.3) hue-rotate(110deg); transform: scale(1.18); box-shadow: 0 0 18px 6px rgba(80,220,40,0.85); }
    35%  { filter: brightness(2.2) saturate(4)   hue-rotate(90deg);  transform: scale(1.12); box-shadow: 0 0 24px 8px rgba(60,200,20,0.70); }
    60%  { filter: brightness(1.7) saturate(3)   hue-rotate(75deg);  transform: scale(1.06); box-shadow: 0 0 14px 4px rgba(40,180,10,0.50); }
    85%  { filter: brightness(1.2) saturate(2)   hue-rotate(40deg);  transform: scale(1.02); box-shadow: 0 0  6px 2px rgba(30,160,10,0.25); }
    100% { filter: brightness(1)   saturate(1)   hue-rotate(0deg);   transform: scale(1);    box-shadow: none; }
}
.cell.cosmic-impact { animation: cosmicImpact 0.6s ease-out; }
@keyframes cosmicImpact {
    0%   { transform:scale(1);    filter:brightness(1); }
    25%  { transform:scale(1.2);  filter:brightness(2.5) drop-shadow(0 0 10px #fff); }
    60%  { transform:scale(1.08); filter:brightness(1.6); }
    100% { transform:scale(1);    filter:brightness(1); }
}
.float-score {
    position: absolute; font-size: clamp(12px, 1.5cqw, 15px);
    font-weight: 900; color: #fff; pointer-events: none; z-index: 20;
    white-space: nowrap;
    text-shadow: 0 0 8px #ffb34799, 0 0 16px #ffb34744;
    animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
    0%   { opacity:1; transform:translateX(-50%) translateY(0) scale(1.1); }
    30%  { opacity:1; transform:translateX(-50%) translateY(-14px); color:#ffdb8d; }
    100% { opacity:0; transform:translateX(-50%) translateY(-55px); }
}
.wild-badge {
    position: absolute; top: 4%; right: 5%;
    font-size: clamp(4px, 0.6cqw, 6px); letter-spacing: 0.08em;
    color: #fff; opacity: 0.6; font-weight: 700;
}
.fusion-icon { font-size: clamp(9px, 1.6cqw, 16px); line-height: 1; }
/* armed-mode: no cursor change — item is cancelled by any move */
/* .grid.armed-mode .cell { cursor: crosshair; } */

/* ── UTILITY BUTTONS ─────────────────────────────────────
   new_game_button.png / info_button.png: 167×135
   CSS width  = 167/1601 = 10.43%
   CSS height = 135/2479 =  5.45%
   Positions: new_game centre x≈33%, info centre x≈48%, y≈77% */
.btn-util {
    position: absolute; z-index: 10;
    background: none; border: none; outline: none;
    cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: filter 0.15s;
    width: 10.43%;                    /* 167/1601 */
    height: 5.45%;              /* 135/2479 */
}
.btn-util img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 0 3px #00000077);
    transition: filter 0.14s ease, transform 0.12s cubic-bezier(0.34,1.56,0.64,1);
    transform-origin: center;
}
.btn-util:hover  img {
    filter: drop-shadow(0 0 8px #d4880099) drop-shadow(0 0 16px #c8780033) brightness(1.18);
    transform: scale(1.09);
}
.btn-util:active img {
    transform: scale(0.91);
    filter: drop-shadow(0 0 10px #e8900088) brightness(1.28);
    transition: filter 0.05s, transform 0.06s cubic-bezier(0.55,0,1,0.45);
}
.btn-util:focus { outline: none; }

/* left = centre_x − half_width (10.43%/2 = 5.22%) */
.btn-newgame { left: 31.0%; top: 75.2%; }
.btn-info    { left: 56.5%; top: 75.2%; }

/* ── ITEM BUTTONS ────────────────────────────────────────
   black/nova/gravity_well: 344×344 square
   CSS width = 344/1601 = 21.49%
   aspect-ratio:1 → height = 21.49% of frame width = 13.88% of frame height
   Centres: x=22%, 49.1%, 76.1%  y=86.7%
   top = 86.7% − 13.88%/2 = 79.76% ≈ 79.8%              */
.item-btn {
    position: absolute; z-index: 10;
    background: none; border: none; outline: none;
    cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    width: 21.49%;              /* 344/1601 */
    aspect-ratio: 1;            /* square in pixels, matches 344×344 source */
    display: flex; flex-direction: column; align-items: center;
    transition: filter 0.15s;
    will-change: transform;
    transform-origin: center;
}
.item-btn:focus { outline: none; }

/* left = centre_x − half_width (21.49%/2 = 10.75%) */
.item-blackhole   { left: 12.5%;  top: 78.5%; }
.item-novaburst   { left: 38.35%; top: 79.8%; }
.item-gravitywell { left: 64.0%;  top: 78.5%; }

.item-btn img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 0 6px #3a2e1888);
    transition: filter 0.18s ease, transform 0.14s cubic-bezier(0.34,1.56,0.64,1);
    display: block; flex-shrink: 0;
    transform-origin: center;
}
.item-btn:hover img {
    transform: scale(1.10);
}
.item-btn:active img {
    transform: scale(0.90);
    transition: filter 0.05s, transform 0.07s cubic-bezier(0.55,0,1,0.45);
}
.item-blackhole:hover img {
    filter: drop-shadow(0 0 14px #9040d0bb) drop-shadow(0 0 28px #60109855) brightness(1.12);
}
.item-novaburst:hover img {
    filter: drop-shadow(0 0 14px #d06820bb) drop-shadow(0 0 28px #a0380044) brightness(1.12);
}
.item-gravitywell:hover img {
    filter: drop-shadow(0 0 14px #1888c8bb) drop-shadow(0 0 28px #00689944) brightness(1.12);
}

/* Armed state — each item glows in its own colour, not yellow */
.item-blackhole.armed img {
    animation: armPulseBlackhole 1s ease-in-out infinite;
}
.item-novaburst.armed img {
    animation: armPulseNova 1s ease-in-out infinite;
}
.item-gravitywell.armed img {
    animation: armPulseGravity 1s ease-in-out infinite;
}

@keyframes armPulseBlackhole {
    0%,100% { filter: drop-shadow(0 0 12px #8030b888) drop-shadow(0 0 22px #50108844); transform: scale(1.0); }
    50%     { filter: drop-shadow(0 0 22px #a050e0dd) drop-shadow(0 0 42px #7020bb88); transform: scale(1.04); }
}
@keyframes armPulseNova {
    0%,100% { filter: drop-shadow(0 0 12px #c0501088) drop-shadow(0 0 22px #90280044); transform: scale(1.0); }
    50%     { filter: drop-shadow(0 0 22px #e07030dd) drop-shadow(0 0 42px #b0400088); transform: scale(1.04); }
}
@keyframes armPulseGravity {
    0%,100% { filter: drop-shadow(0 0 12px #1070b888) drop-shadow(0 0 22px #00588844); transform: scale(1.0); }
    50%     { filter: drop-shadow(0 0 22px #2090d8dd) drop-shadow(0 0 42px #1070aa88); transform: scale(1.04); }
}

.item-label {
    font-family: var(--font-ui);
    font-size: clamp(9px, 1.3cqw, 12px);
    font-weight: 700;
    color: #c8a870; letter-spacing: 0.10em;
    text-transform: uppercase; text-align: center; line-height: 1;
    position: absolute; bottom: -13%; width: 150%; left: -24%;
    /* label + cost sit on same line via flex */
    display: flex; align-items: center; justify-content: center; gap: 0.3em;
    white-space: nowrap;
}
.item-cost {
    font-family: var(--font-ui);
    font-size: clamp(12px, 1.3cqw, 12px);
    color: var(--col-gold); font-weight: 700; letter-spacing: 0.05em;
    /* inline inside .item-label flex row — NOT absolutely positioned */
    position: static;
    bottom: auto; width: auto; text-align: left;
}

/* ── ATOM FLOAT ─────────────────────────────────────────── */
.atom-float {
    position: fixed; font-family: var(--font-ui);
    font-size: clamp(12px, 2vw, 20px);
    font-weight: 900; color: var(--col-gold); pointer-events: none;
    animation: floatUp 1.4s ease-out forwards; z-index: 9999;
    text-shadow: 0 0 14px rgba(255, 213, 76, 0.9), 0 0 28px rgba(232,184,74,0.5);
    white-space: nowrap; letter-spacing: 0.05em;
}

/* ── FLASH ──────────────────────────────────────────────── */
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 495; opacity: 0; }
#flash.go        { animation: flashAnim       0.5s ease-out forwards; }
#flash.go-fusion { animation: flashAnimFusion 1.6s ease-out forwards; }
@keyframes flashAnim       { 0%{opacity:0.5} 100%{opacity:0} }
@keyframes flashAnimFusion { 0%{opacity:0} 6%{opacity:1} 30%{opacity:0.8} 65%{opacity:0.4} 100%{opacity:0} }


/* ══════════════════════════════════════════════════════════
   RETRO HOLOGRAPHIC UI
   Full chamfered frame · intentional CRT glitch · scanline sweep
   · chromatic aberration · festive sparkle mode
══════════════════════════════════════════════════════════ */

/* ── INTENTIONAL CRT GLITCH ─────────────────────────────
   Filter-only — NO translateX so the panel never bounces.
   The colour shift IS the glitch. Three brief events per 14s. */
@keyframes retroGlitch {
    0%, 76%, 100% { filter: none; opacity: 1; }
    77.0% { filter: hue-rotate(28deg) saturate(2.0) brightness(1.08); opacity: 0.88; }
    77.4% { filter: hue-rotate(-18deg) saturate(1.6); opacity: 1.0; }
    77.8% { filter: hue-rotate(8deg); opacity: 0.95; }
    78.2% { filter: none; opacity: 1; }
    88.0% { filter: hue-rotate(-32deg) saturate(2.8) brightness(1.15); opacity: 0.78; }
    88.3% { filter: hue-rotate(22deg) saturate(1.8); opacity: 0.96; }
    88.6% { filter: hue-rotate(-8deg); opacity: 1.0; }
    88.9% { filter: none; opacity: 1; }
    95.5% { filter: hue-rotate(16deg) saturate(1.6); opacity: 0.92; }
    95.8% { filter: none; opacity: 1; }
}

/* Chromatic aberration — red/blue channel split on headings */
@keyframes chromaGlitch {
    0%, 76%, 100% {
        text-shadow:
            0 0 4px  rgba(140,85,10,0.95),
            0 0 10px rgba(180,110,15,0.65),
            0 0 22px rgba(200,140,20,0.25);
    }
    77.0% { text-shadow: -4px 0 #ff2060, 4px 0 #00e8ff, 0 0 12px rgba(160,100,15,0.5); }
    77.4% { text-shadow:  3px 0 #ff2060,-3px 0 #00e8ff, 0 0 10px rgba(160,100,15,0.5); }
    77.8% { text-shadow: -1px 0 #ff2060, 1px 0 #00e8ff, 0 0 14px rgba(160,100,15,0.6); }
    78.2% { text-shadow:  0 0 4px rgba(140,85,10,0.95), 0 0 10px rgba(180,110,15,0.65), 0 0 22px rgba(200,140,20,0.25); }
    88.0% { text-shadow: -5px 0 #ff1050, 5px 0 #00ccff, 0 0 12px rgba(160,100,15,0.4); }
    88.3% { text-shadow:  4px 0 #ff1050,-4px 0 #00ccff, 0 0 10px rgba(160,100,15,0.45); }
    88.6% { text-shadow: -2px 0 #ff1050, 2px 0 #00ccff, 0 0 14px rgba(160,100,15,0.55); }
    88.9% { text-shadow:  0 0 4px rgba(140,85,10,0.95), 0 0 10px rgba(180,110,15,0.65), 0 0 22px rgba(200,140,20,0.25); }
    95.5% { text-shadow: -3px 0 #ff2060, 3px 0 #00e8ff, 0 0 12px rgba(160,100,15,0.5); }
    95.8% { text-shadow:  0 0 4px rgba(140,85,10,0.95), 0 0 10px rgba(180,110,15,0.65), 0 0 22px rgba(200,140,20,0.25); }
}

/* CRT roll bar — authentic: a wide, soft, dark gradient band rolling
   slowly upward through the panel. This is what you see when you
   photograph a CRT — not a bright flash, a shadowy wave. */
@keyframes crtRollBar {
    0%   { transform: translateY(120%); }
    100% { transform: translateY(-120%); }
}

/* Panel entrance — scale bounce in */
@keyframes panelReveal {
    0%   { opacity: 0; transform: scale(0.88) translateY(8px); filter: brightness(1.8); }
    55%  { opacity: 1; transform: scale(1.025) translateY(-2px); filter: brightness(1.15); }
    100% { opacity: 1; transform: none; filter: none; }
}

/* Sparkle star — gentle fade-in, soft scale, floats away */
@keyframes sparklePop {
    0%   { opacity: 0;    transform: scale(0.2) rotate(0deg); }
    15%  { opacity: 0.55; transform: scale(1.0)  rotate(18deg); }
    60%  { opacity: 0.65; transform: scale(1.05) rotate(52deg); }
    100% { opacity: 0;    transform: scale(0.4)  rotate(80deg) translateY(-6px); }
}

/* Festive toast bounce */
@keyframes toastBounce {
    0%  { top: -110px; }
    60% { top: 18px; }
    80% { top: 10px; }
    100%{ top: 14px; }
}

/* ── SPARKLE DOM ELEMENTS ────────────────────────────────── */
.overlay-sparkle {
    position: absolute;
    clip-path: polygon(50% 0%, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0% 50%, 44% 44%);
    pointer-events: none;
    z-index: 25;
    animation: sparklePop ease-out forwards;
}

/* ── TOAST ──────────────────────────────────────────────── */
#toast {
    position: fixed; top: -110px; left: 50%; transform: translateX(-50%);
    z-index: 300;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    background: rgba(14,8,3,0.72);
    padding: 14px 28px 15px;
    text-align: center; min-width: 270px;
    transition: top 0.42s cubic-bezier(0.34,1.56,0.64,1);
    font-family: var(--font-ui);
    background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.38) 2px, rgba(0,0,0,0.38) 4px);
    animation: retroGlitch 14s 2s infinite;
    outline: 1.5px solid rgba(188,142,28,0.65); outline-offset: -1.5px;
    box-shadow: 0 0 16px rgba(0,0,0,0.85), 0 0 6px rgba(160,115,18,0.18);
}
#toast::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent 3%, rgba(188,142,28,0.85) 18%, rgba(215,168,38,1.00) 50%, rgba(188,142,28,0.85) 82%, transparent 97%);
    box-shadow: 0 0 6px rgba(200,150,25,0.60), 0 0 14px rgba(180,130,20,0.25);
}
#toast::after {
    content: ''; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160,115,18,0.40), transparent);
}
#toast.show { top: 14px; }
#toast.show.festive-toast { animation: toastBounce 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; }
#toast .toast-title {
    font-family: var(--font-ui); font-size: clamp(12px, 1.6vw, 17px); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.22em; color: var(--col-gold); margin-bottom: 4px;
    text-shadow: 0 0 4px rgba(140,85,10,0.90), 0 0 12px rgba(180,110,15,0.50);
}
#toast .toast-sub { font-family: var(--font-ui); font-size: clamp(11px, 1.2vw, 14px); color: #8a7a58; letter-spacing: 0.06em; font-weight: 400; }

/* Icons inside toast titles and fusion dialog messages */
.toast-icon {
    height: 1.6em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.35em;
    margin-top: -0.12em;
}
.fusion-msg-icon {
    height: 1.6em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.3em;
    margin-top: -0.08em;
}

#toast[data-theme="fire"]      { outline-color: rgba(200,78,30,0.60); }
#toast[data-theme="fire"]::before { background: linear-gradient(90deg, transparent 3%, rgba(210,80,30,0.85) 18%, rgba(255,110,55,1.00) 50%, rgba(210,80,30,0.85) 82%, transparent 97%); box-shadow: 0 0 8px rgba(190,55,15,0.55); }
#toast[data-theme="fire"]      .toast-title { color:#ff9a6c; text-shadow: 0 0 6px rgba(190,55,15,0.65); }
#toast[data-theme="water"]     { outline-color: rgba(22,148,190,0.60); }
#toast[data-theme="water"]::before { background: linear-gradient(90deg, transparent 3%, rgba(22,148,190,0.85) 18%, rgba(55,195,235,1.00) 50%, rgba(22,148,190,0.85) 82%, transparent 97%); box-shadow: 0 0 8px rgba(0,128,175,0.55); }
#toast[data-theme="water"]     .toast-title { color:#60d8f8; text-shadow: 0 0 6px rgba(0,148,195,0.65); }
#toast[data-theme="lightning"] { outline-color: rgba(138,48,190,0.60); }
#toast[data-theme="lightning"]::before { background: linear-gradient(90deg, transparent 3%, rgba(138,48,190,0.85) 18%, rgba(178,80,235,1.00) 50%, rgba(138,48,190,0.85) 82%, transparent 97%); box-shadow: 0 0 8px rgba(118,30,170,0.55); }
#toast[data-theme="lightning"] .toast-title { color:#c880ff; text-shadow: 0 0 6px rgba(118,30,170,0.65); }
#toast[data-theme="earth"]     { outline-color: rgba(70,158,12,0.60); }
#toast[data-theme="earth"]::before { background: linear-gradient(90deg, transparent 3%, rgba(70,158,12,0.85) 18%, rgba(108,200,22,1.00) 50%, rgba(70,158,12,0.85) 82%, transparent 97%); box-shadow: 0 0 8px rgba(50,135,8,0.55); }
#toast[data-theme="earth"]     .toast-title { color:#a0e038; text-shadow: 0 0 6px rgba(50,135,8,0.65); }
#toast[data-theme="default"]   .toast-title { color:#e0c880; }
#toast[data-theme="luck"]      .toast-title { color: var(--col-gold); }
#toast[data-theme="luck"]      .toast-sub   { color: #b89040; }

/* ── DRAG HINT ──────────────────────────────────────────── */
#drag-hint {
    display: flex; align-items: center; gap: 14px;
    position: fixed; bottom: -110px; left: 50%; transform: translateX(-50%);
    z-index: 250;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    background: rgba(14,8,3,0.72);
    outline: 1.5px solid rgba(165,125,22,0.55); outline-offset: -1.5px;
    padding: 12px 22px 13px 18px;
    box-shadow: 0 0 14px rgba(0,0,0,0.80), 0 0 5px rgba(145,105,16,0.15);
    cursor: pointer;
    transition: bottom 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
    opacity: 0; white-space: nowrap; pointer-events: none;
    font-family: var(--font-ui);
    background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.34) 2px, rgba(0,0,0,0.34) 4px);
}
#drag-hint::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent 5%, rgba(178,134,24,0.80) 25%, rgba(208,158,34,1.00) 50%, rgba(178,134,24,0.80) 75%, transparent 95%);
    box-shadow: 0 0 6px rgba(178,128,18,0.45);
}
#drag-hint.show { bottom: 20px; opacity: 1; pointer-events: auto; }
.drag-hint-text { display:flex; flex-direction:column; gap:4px; }
.drag-hint-title { font-family: var(--font-ui); font-size: clamp(11px,1.4vw,14px); font-weight: 700; letter-spacing: 0.22em; color: var(--col-gold); text-shadow: 0 0 6px rgba(160,110,15,0.65); }
.drag-hint-sub   { font-family: var(--font-ui); font-size: clamp(10px,1.1vw,13px); color: #7a6840; letter-spacing: 0.05em; font-weight: 400; }

/* ── OVERLAYS ───────────────────────────────────────────── */
.overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(3,1,8,0.65);
    backdrop-filter: blur(4px);
    z-index: 500;
    align-items: center; justify-content: center;
    flex-direction: column;
    text-align: center; padding: 20px;
    font-family: var(--font-ui);
}
.overlay.show { display: flex; }

/* ── HUD PANEL FRAME ─────────────────────────────────────
   Inspired by: sci-fi HUD line frames + retro alien aesthetic.
   The frame is mostly transparent — a thin amber line system
   drawn by SVG defines the visual boundary.
   Corner L-brackets · diagonal hash marks · inner parallel line
   · asymmetric step details · amber glow on all lines.        */
.overlay-frame {
    position: relative;
    /* Barely-there dark band — just enough to visually separate
       frame zone from the background. Lines come from SVG. */
    background: rgba(10,6,2,0.30);
    clip-path: polygon(
        22px 0%, calc(100% - 22px) 0%,
        100% 22px, 100% calc(100% - 22px),
        calc(100% - 22px) 100%, 22px 100%,
        0% calc(100% - 22px), 0% 22px
    );
    padding: 10px;
    min-width: 290px; max-width: 510px; width: 92%;
    /* Ambient HUD glow — not a physical shadow, more like energy */
    filter:
        drop-shadow(0 0 14px rgba(0,0,0,0.85))
        drop-shadow(0 0  6px rgba(170,120,18,0.18));
}
.overlay.show .overlay-frame {
    animation: panelReveal 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Festive: slightly more radiant glow (more energy charging through lines) */
.overlay-frame.festive {
    filter:
        drop-shadow(0 0 18px rgba(0,0,0,0.85))
        drop-shadow(0 0 10px rgba(200,150,25,0.30));
}

/* SVG overlay — all visual frame lines drawn here */
.overlay-frame-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 12;
    overflow: visible;
}

/* No ::before bevel — removed entirely */

/* ── INNER PANEL — the screen ────────────────────────────── */
.overlay-panel {
    position: relative;
    background: rgba(14, 8, 3, 0.28);
    border: none; border-radius: 0;
    padding: 30px 34px 26px;
    min-width: 0; max-width: none; width: 100%;
    /* Screen sits slightly below HUD frame lines */
    box-shadow:
        inset 0  2px  8px rgba(0, 0, 0, 0.479),
        inset 2px 0   8px rgba(0, 0, 0, 0.299),
        inset 0 -1px  4px rgba(0, 0, 0, 0.068);
    background-image:
        radial-gradient(ellipse 80% 70% at 50% 45%, rgba(32,18,10,0.00) 0%, rgba(10,5,2,0.35) 100%),
        repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(20,12,0,0.60) 2px, rgba(20,12,0,0.60) 4px);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    overflow: hidden;
}
/* CRT roll bar — dark gradient band, ~35% tall, rolls upward slowly */
.overlay-panel::before {
    content: ''; position: absolute; left: 0; right: 0;
    height: 35%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(0,0,0,0.28) 25%,
        rgba(0,0,0,0.50) 50%,
        rgba(0,0,0,0.28) 75%,
        transparent 100%);
    animation: crtRollBar 8s 1s linear infinite;
    pointer-events: none; z-index: 5;
    will-change: transform;
}
.overlay-panel::after {
    content: ''; position: absolute; bottom: 0; left: 8%; right: 8%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,160,50,0.45), transparent);
    pointer-events: none;
}

/* Heading — Exo 2 800w all-caps, chromatic aberration during glitch */
.overlay h2 {
    font-family: var(--font-ui);
    font-size: clamp(18px, 2.8vw, 28px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    color: var(--col-gold);
    /* Glow: tight dark-amber enriches letterforms, wide spread is very faint */
    text-shadow:
        0 0 4px  rgba(140,85,10,0.95),    /* tight dark halo — depth */
        0 0 10px rgba(180,110,15,0.65),   /* mid warm bloom */
        0 0 22px rgba(200,140,20,0.25);   /* very faint wide spread */
    margin: 0; line-height: 1.15;
    animation: chromaGlitch 14s 1s infinite;
}

.overlay p {
    font-family: var(--font-ui); color: #a89870;
    font-size: clamp(13px, 1.6vw, 16px); letter-spacing: 0.04em;
    line-height: 1.65; font-weight: 400;
}

/* Fusion message colored by element — set via data-element on #overlay-fusion */
#overlay-fusion[data-element="fire"]      #fusion-message { color: #ff8040; text-shadow: 0 0 8px rgba(255,80,20,0.80), 0 0 16px rgba(255,60,10,0.40); }
#overlay-fusion[data-element="water"]     #fusion-message { color: #40d8ff; text-shadow: 0 0 8px rgba(0,180,230,0.80), 0 0 16px rgba(0,150,210,0.40); }
#overlay-fusion[data-element="lightning"] #fusion-message { color: #d060ff; text-shadow: 0 0 8px rgba(160,40,220,0.80), 0 0 16px rgba(140,20,200,0.40); }
#overlay-fusion[data-element="earth"]     #fusion-message { color: #90e820; text-shadow: 0 0 8px rgba(90,180,0,0.80),  0 0 16px rgba(70,150,0,0.40); }
#overlay-fusion[data-element="wild"]      #fusion-message { color: #f0e0a0; text-shadow: 0 0 8px rgba(240,200,120,0.70), 0 0 14px rgba(220,180,100,0.35); }
/* Multi-element fusions — use neutral warm */
#overlay-fusion[data-element="multi"]     #fusion-message { color: inherit; }
.overlay .final-score {
    font-family: var(--font-ui); font-size: clamp(22px, 3.2vw, 34px);
    color: #f0e4c0; font-weight: 900; letter-spacing: 0.06em;
    text-shadow: 0 0 16px rgba(240,228,192,0.55), 0 0 32px rgba(240,228,192,0.2);
}
.fusion-atoms-display {
    font-family: var(--font-ui); font-size: clamp(15px, 2.1vw, 22px);
    color: var(--col-gold); font-weight: 700; letter-spacing: 0.12em;
    text-shadow: 0 0 12px rgba(232,184,74,0.8), 0 0 28px rgba(232,184,74,0.3);
}

/* ── INFO OVERLAY ───────────────────────────────────────── */
.info-overlay-content {
    max-width: 500px; width: 100%; text-align: left;
    display: flex; flex-direction: column; gap: 8px;
    max-height: 74vh; overflow-y: auto; padding-right: 6px;
}
.info-overlay-content::-webkit-scrollbar { width: 3px; }
.info-overlay-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.4); }
.info-overlay-content::-webkit-scrollbar-thumb { background: rgba(200,160,60,0.45); border-radius: 1px; }
.info-overlay-content h2 {
    font-family: var(--font-ui); text-align: center;
    font-size: clamp(16px, 2.2vw, 22px); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.26em;
    color: var(--col-gold);
    text-shadow: 0 0 4px rgba(140,85,10,0.90), 0 0 12px rgba(180,110,15,0.45);
    margin-bottom: 8px;
}
.info-section {
    position: relative;
    background: rgba(255,255,255,0.018);
    border: 1px solid rgba(185,140,26,0.20);
    border-left: none;     /* left side handled by the corner accent below */
    border-radius: 0;
    padding: 10px 14px;
    background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.22) 3px, rgba(0,0,0,0.22) 4px);
}
/* HUD corner bracket on info-section — top-left only, subtle */
.info-section::before {
    content: '';
    position: absolute;
    /* L-bracket: 14px down left edge + 14px across top edge */
    top: -1px; left: -1px;
    width: 14px; height: 14px;
    border-top: 2px solid rgba(200,155,28,0.75);
    border-left: 2px solid rgba(200,155,28,0.75);
    pointer-events: none;
}
/* Bottom-right matching corner — asymmetric, dimmer */
.info-section::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 10px; height: 10px;
    border-bottom: 1px solid rgba(165,120,20,0.45);
    border-right: 1px solid rgba(165,120,20,0.45);
    pointer-events: none;
}
.info-section-title {
    font-family: var(--font-ui); font-size: clamp(10px, 1.1vw, 12px);
    letter-spacing: 0.24em; color: var(--col-gold);
    text-shadow: 0 0 8px rgba(232,184,74,0.6), 0 0 16px rgba(232,184,74,0.25);
    margin-bottom: 5px; font-weight: 700; text-transform: uppercase;
}
.info-section p { font-size: clamp(12px, 1.4vw, 15px); color: #9a8a68; line-height: 1.6; font-weight: 400; }
.info-overlay-content button { align-self: center; margin-top: 8px; }

/* ── OVERLAY BUTTONS ────────────────────────────────────── */
/* ── OVERLAY BUTTONS ──────────────────────────────────────
   Buttons are visually RECESSED into the panel — darker than
   the panel background, creating clear depth.
   Left accent bar in cool stone-silver breaks the amber mono-
   chrome and reads as a physical switch or terminal key. */
.overlay button {
    font-family: var(--font-ui);
    /* Darker than panel — creates depth, feels pressed-in */
    background: rgba(8,5,3,0.95);
    /* Thin outer border, stronger left accent in cool silver-stone */
    border: 1px solid rgba(140,120,80,0.30);
    border-left: 3px solid rgba(160,170,180,0.55);   /* cool steel — breaks amber */
    border-radius: 1px;
    color: rgba(200,175,120,0.90);
    padding: 11px 24px 11px 20px;
    font-size: clamp(11px, 1.3vw, 14px);
    letter-spacing: 0.20em;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s, box-shadow 0.14s;
    text-transform: uppercase;
    font-weight: 700;
    outline: none;
    text-shadow: 0 0 8px rgba(200,160,60,0.35);
    position: relative;
    /* Subtle inner scanlines — lighter than panel ones */
    background-image: repeating-linear-gradient(
        0deg, transparent 0px, transparent 2px,
        rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px
    );
    /* Very faint left-side inner glow matching the steel accent */
    box-shadow: inset 3px 0 8px rgba(160,170,180,0.08);
}
.overlay button:hover {
    background: rgba(16,10,5,0.98);
    border-left-color: rgba(200,215,230,0.80);   /* steel brightens on hover */
    border-color: rgba(180,155,80,0.45);
    color: #e8d8a0;
    text-shadow: 0 0 12px rgba(220,190,100,0.60);
    box-shadow:
        inset 3px 0 12px rgba(180,200,220,0.12),
        0 0 14px rgba(140,120,60,0.20);
}
.overlay button:active { transform: scale(0.97); }

/* Primary action button — Continue, Play Again, Got It:
   warm gold accent replaces the steel on the left bar */
.overlay button:not([style*="opacity"]):not([onclick*="cancel"]):not([onclick*="close"]):not([onclick*="dismiss"]):first-of-type,
.overlay button[onclick*="closeOverlay"],
.overlay button[onclick*="newGame"],
.overlay button[onclick*="continue"] {
    border-left-color: rgba(210,170,60,0.75);    /* warm gold — primary action */
    box-shadow: inset 3px 0 8px rgba(200,150,40,0.10);
}
.overlay button[onclick*="closeOverlay"]:hover,
.overlay button[onclick*="newGame"]:hover {
    border-left-color: rgba(240,195,70,0.95);
    box-shadow: inset 3px 0 14px rgba(220,170,50,0.16), 0 0 16px rgba(180,140,40,0.25);
}

/* Watch-ad button — slightly warmer, stands out as special offer */
.overlay button[onclick*="watchAd"] {
    border-left-color: rgba(190,160,50,0.70);
    color: #d4b860;
    text-shadow: 0 0 10px rgba(200,160,50,0.50);
    background: rgba(12,8,3,0.96);
}
.overlay button[onclick*="watchAd"]:hover {
    border-left-color: rgba(232,184,74,0.90);
    color: var(--col-gold);
    box-shadow: inset 3px 0 14px rgba(200,160,40,0.16), 0 0 20px rgba(180,140,30,0.28);
}

/* Dismiss / secondary — very muted, clearly subordinate */
.overlay button[style*="opacity"] {
    opacity: 0.45;
    font-size: clamp(10px, 1.1vw, 12px);
    letter-spacing: 0.14em;
    border-left-color: rgba(120,120,120,0.30);
    border-color: rgba(100,90,70,0.20);
    color: rgba(160,140,100,0.70);
}

/* ═══════════════════════════════════════════════════════════
   BEETLE REVEAL — 500 pt secret room
   ═══════════════════════════════════════════════════════════ */

/* Video container — bigger, shifted left to align room with artifact window */
#video-reveal {
    position: absolute; z-index: 2;
    left: 9.8%;
    top: 28.2%;
    width: 76%;
    aspect-ratio: 1;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease;
}
#video-reveal.active { opacity: 1; }

#beetle-video {
    width: 100%; height: 100%;
    object-fit: fill;
    display: block;
}

/* Frame overlay — artifact frame at z:4 masks video black edges */
.frame-overlay { z-index: 4 !important; }

/* Board slide transition */
.board-zone {
    transition: transform 0.70s cubic-bezier(0.55, 0, 1, 0.45);
    transform-origin: top center;
}
.board-zone.slide-down { transform: translateY(112%); }

/* During reveal: buttons STAY visible but are non-interactive */
#game-frame.beetle-reveal .dir-btn,
#game-frame.beetle-reveal .btn-util,
#game-frame.beetle-reveal .item-btn,
#game-frame.beetle-reveal .mute-wrap {
    pointer-events: none;   /* no clicking — game is paused */
    /* opacity unchanged — buttons remain fully visible */
}

/* Board-zone moves to very foreground during entire reveal
   (z:490 = above all buttons/items z:10-20, below overlays z:500) */
#game-frame.beetle-reveal .board-zone { z-index: 490; }

/* Warm tint as board slides down — overheated, like a furnace door opening */
@keyframes boardSlideGlow {
    0%   { filter: drop-shadow(0 0  0px rgba(255,120,20,0.00)) brightness(1.00); }
    40%  { filter: drop-shadow(0 0 16px rgba(255,140,30,0.60)) brightness(1.12); }
    100% { filter: drop-shadow(0 0 22px rgba(255,100,10,0.45)) brightness(1.08); }
}
.board-zone.slide-down {
    animation: boardSlideGlow 0.7s ease-out forwards;
}

/* Glow burst when the board returns — amber energy discharge */
@keyframes boardReturnGlow {
    0%   { filter: drop-shadow(0 0  0px rgba(210,150,20,0.00)); }
    20%  { filter: drop-shadow(0 0 24px rgba(210,150,20,1.00))
                   drop-shadow(0 0 48px rgba(180,100,10,0.70)); }
    60%  { filter: drop-shadow(0 0 14px rgba(210,150,20,0.55)); }
    100% { filter: drop-shadow(0 0  0px rgba(210,150,20,0.00)); }
}
.board-zone.glow-return {
    animation: boardReturnGlow 1.4s ease-out forwards;
}

/* Scanline shimmer over the video for atmosphere */
#video-reveal::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px, transparent 3px,
        rgba(0,0,0,0.15) 3px, rgba(0,0,0,0.15) 4px
    );
    pointer-events: none; z-index: 1;
}

/* ── REVEAL CELEBRATION STARS ───────────────────────────── */
.reveal-star {
    position: absolute;
    z-index: 550;
    pointer-events: none;
    font-style: normal;
    line-height: 1;
    text-shadow: 0 0 var(--glow, 6px) currentColor, 0 0 var(--glow2, 0px) currentColor;
    animation: revealStarBurst var(--dur, 1.8s) ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}
@keyframes revealStarBurst {
    0%   { opacity: 0;   transform: translate(0,0) scale(0.2) rotate(0deg); }
    12%  { opacity: 1;   transform: translate(calc(var(--tx)*0.1), calc(var(--ty)*0.1)) scale(1.3); }
    85%  { opacity: 0.8; }
    100% { opacity: 0;   transform: translate(var(--tx), var(--ty)) scale(0.9) rotate(var(--rot)); }
}

/* ═══════════════════════════════════════════════════════════
   BEETLE SIGNAL — Phase 1 anomalous transmission toast
   Positioned over the board. Game is paused but screen is not
   blocked — the signal appears as a very corrupted toast.
   ═══════════════════════════════════════════════════════════ */

#beetle-signal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 600;
    width: clamp(280px, 82vw, 500px);
    padding: 20px 28px 18px;
    text-align: center;

    /* Same visual language as the other toasts */
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    background: rgba(4, 2, 0, 0.92);
    background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.45) 2px, rgba(0,0,0,0.45) 4px);
    outline: 1.5px solid rgba(188,142,28,0.65); outline-offset: -1.5px;
    box-shadow: 0 0 24px rgba(0,0,0,0.95), 0 0 8px rgba(160,115,18,0.18);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
}
#beetle-signal::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent 3%, rgba(188,142,28,0.85) 18%, rgba(215,168,38,1.00) 50%, rgba(188,142,28,0.85) 82%, transparent 97%);
    box-shadow: 0 0 6px rgba(200,150,25,0.60);
}
#beetle-signal.show {
    opacity: 1;
    animation: signalGlitch 1.05s steps(1) infinite;
}

/* Container-level glitch: horizontal skew jumps + hue flares */
@keyframes signalGlitch {
    0%     { transform: translateX(-50%) translateY(-50%) skewX(0deg);      filter: brightness(1); }
    4%     { transform: translateX(calc(-50% + 7px)) translateY(-50%) skewX(1.4deg);  filter: brightness(2.4) hue-rotate(100deg); }
    4.6%   { transform: translateX(calc(-50% - 4px)) translateY(-50%) skewX(-0.7deg); filter: brightness(0.85) hue-rotate(200deg); }
    5.2%   { transform: translateX(-50%) translateY(-50%) skewX(0deg);      filter: brightness(1); }
    22%    { transform: translateX(-50%) translateY(-50%);                   filter: brightness(1); }
    22.6%  { transform: translateX(calc(-50% - 8px)) translateY(calc(-50% + 3px)) skewX(-1.8deg); filter: brightness(2.0) hue-rotate(280deg); }
    23.2%  { transform: translateX(-50%) translateY(-50%);                   filter: brightness(1); }
    50%    { transform: translateX(-50%) translateY(-50%);                   filter: brightness(1); }
    50.5%  { transform: translateX(calc(-50% + 10px)) translateY(-50%) skewX(2.2deg); filter: brightness(3.0) hue-rotate(55deg); }
    51%    { transform: translateX(calc(-50% - 3px)) translateY(-50%) skewX(-0.5deg); filter: brightness(1.15); }
    51.5%  { transform: translateX(-50%) translateY(-50%);                   filter: brightness(1); }
    78%    { transform: translateX(-50%) translateY(-50%);                   filter: brightness(1); }
    78.5%  { transform: translateX(calc(-50% + 5px)) translateY(-50%);      filter: brightness(2.2) hue-rotate(165deg); }
    79%    { transform: translateX(-50%) translateY(-50%);                   filter: brightness(1); }
    100%   { transform: translateX(-50%) translateY(-50%) skewX(0deg);      filter: brightness(1); }
}

/* Shared keyframe: glyph pop-in (used by signal glyphs) */
@keyframes glyphAppear {
    0%   { opacity: 0;   transform: scale(0.4) translateY(10px); }
    55%  { opacity: 1;   transform: scale(1.15) translateY(-2px); }
    100% { opacity: 1;   transform: scale(1) translateY(0); }
}

/* Glyphs: chromatic aberration — red/blue ghost copies shifting sides */
#beetle-signal .alien-glyphs {    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3.5vw, 24px);
}
#beetle-signal .alien-glyph {
    width: clamp(24px, 5vw, 42px);
    height: auto;
    color: rgba(210, 162, 34, 0.92);
    opacity: 0;
    animation: glyphAppear 0.65s ease-out forwards, glyphChroma 0.38s steps(2) infinite;
}
/* Glyph stagger — each appears sequentially */
#beetle-signal .alien-glyph:nth-child(1) { animation-delay: 0.05s, 0s; }
#beetle-signal .alien-glyph:nth-child(2) { animation-delay: 0.28s, 0s; }
#beetle-signal .alien-glyph:nth-child(3) { animation-delay: 0.51s, 0s; }
#beetle-signal .alien-glyph:nth-child(4) { animation-delay: 0.74s, 0s; }
#beetle-signal .alien-glyph:nth-child(5) { animation-delay: 0.97s, 0s; }

@keyframes glyphChroma {
    0%  { filter: drop-shadow(3px  0 0 rgba(255,0,60,0.82)) drop-shadow(-3px 0 0 rgba(0,60,255,0.82)); }
    50% { filter: drop-shadow(-4px 0 0 rgba(255,30,0,0.75)) drop-shadow(5px  0 0 rgba(0,40,255,0.75)); }
}

/* Alien subtext: SVG mini-glyphs, color channel flicker */
#beetle-signal .alien-subtext {
    margin-top: 14px;
    line-height: 0;
    opacity: 0;
    animation: glyphAppear 0.9s ease-out 1.3s forwards, subtextFlicker 0.55s steps(3) infinite;
}
.alien-subtext-svg {
    width: clamp(160px, 55vw, 280px);
    height: auto;
    display: block;
    margin: 0 auto;
    overflow: visible;
}
@keyframes subtextFlicker {
    0%   { opacity: 0.80; filter: hue-rotate(0deg)   brightness(0.9); }
    33%  { opacity: 0.28; filter: hue-rotate(120deg)  brightness(1.4); }
    66%  { opacity: 1.00; filter: hue-rotate(240deg)  brightness(1.1); }
    100% { opacity: 0.80; filter: hue-rotate(0deg)   brightness(0.9); }
}

/* ═══════════════════════════════════════════════════════════
   HINT TOAST — bottom-positioned, same visual language as #toast
   Used for player guidance: item first-use tips, board-full warning
   ═══════════════════════════════════════════════════════════ */

#hint-toast {
    position: fixed; bottom: -120px; left: 50%; transform: translateX(-50%);
    z-index: 300;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    background: rgba(14,8,3,0.72);
    padding: 14px 28px 15px;
    text-align: center; min-width: 270px;
    transition: bottom 0.42s cubic-bezier(0.34,1.56,0.64,1);
    font-family: var(--font-ui);
    background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.38) 2px, rgba(0,0,0,0.38) 4px);
    outline: 1.5px solid rgba(188,142,28,0.65); outline-offset: -1.5px;
    box-shadow: 0 0 16px rgba(0,0,0,0.85), 0 0 6px rgba(160,115,18,0.18);
}
#hint-toast::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent 3%, rgba(188,142,28,0.85) 18%, rgba(215,168,38,1.00) 50%, rgba(188,142,28,0.85) 82%, transparent 97%);
    box-shadow: 0 0 6px rgba(200,150,25,0.60), 0 0 14px rgba(180,130,20,0.25);
}
#hint-toast::after {
    content: ''; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160,115,18,0.40), transparent);
}
#hint-toast.show { bottom: 14px; }
#hint-toast .toast-title {
    font-family: var(--font-ui); font-size: clamp(12px, 1.6vw, 17px); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.22em; color: var(--col-gold); margin-bottom: 4px;
    text-shadow: 0 0 4px rgba(140,85,10,0.90), 0 0 12px rgba(180,110,15,0.50);
}
#hint-toast .toast-sub {
    font-family: var(--font-ui); font-size: clamp(11px, 1.2vw, 14px); color: #8a7a58; letter-spacing: 0.06em; font-weight: 400;
}

/* Theme variants — mirrors #toast themes */
#hint-toast[data-theme="fire"]      { outline-color: rgba(200,78,30,0.60); }
#hint-toast[data-theme="fire"]::before { background: linear-gradient(90deg, transparent 3%, rgba(210,80,30,0.85) 18%, rgba(255,110,55,1.00) 50%, rgba(210,80,30,0.85) 82%, transparent 97%); box-shadow: 0 0 8px rgba(190,55,15,0.55); }
#hint-toast[data-theme="fire"]      .toast-title { color:#ff9a6c; text-shadow: 0 0 6px rgba(190,55,15,0.65); }
#hint-toast[data-theme="water"]     { outline-color: rgba(22,148,190,0.60); }
#hint-toast[data-theme="water"]::before { background: linear-gradient(90deg, transparent 3%, rgba(22,148,190,0.85) 18%, rgba(55,195,235,1.00) 50%, rgba(22,148,190,0.85) 82%, transparent 97%); box-shadow: 0 0 8px rgba(0,128,175,0.55); }
#hint-toast[data-theme="water"]     .toast-title { color:#60d8f8; text-shadow: 0 0 6px rgba(0,148,195,0.65); }
#hint-toast[data-theme="lightning"] { outline-color: rgba(138,48,190,0.60); }
#hint-toast[data-theme="lightning"]::before { background: linear-gradient(90deg, transparent 3%, rgba(138,48,190,0.85) 18%, rgba(178,80,235,1.00) 50%, rgba(138,48,190,0.85) 82%, transparent 97%); box-shadow: 0 0 8px rgba(118,30,170,0.55); }
#hint-toast[data-theme="lightning"] .toast-title { color:#c880ff; text-shadow: 0 0 6px rgba(118,30,170,0.65); }
#hint-toast[data-theme="default"]   .toast-title { color:#e0c880; }
#hint-toast[data-theme="luck"]      .toast-title { color: var(--col-gold); }
#hint-toast[data-theme="luck"]      .toast-sub   { color: #b89040; }