/* Dust & Plunder — TOKEN mode UI layer.
   Palette: charcoal / dark brown wood, amber, gold, warm orange, cream, muted western signage.
   Fonts are self-hosted (SIL OFL 1.1, see fonts/OFL-*.txt): Rye (western headings), Oswald (signage/numbers). */
@font-face { font-family: 'Rye'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/rye-latin.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/oswald-latin.woff2') format('woff2'); }
:root {
    --bar-h: 60px;
    --ink: #1b120b;
    --wood: #2a1a10;
    --panel: rgba(26, 16, 9, 0.86);
    --line: #8b5a2b;
    --amber: #f2a33a;
    --gold: #ffd24a;
    --orange: #e8742a;
    --cream: #f7e8c8;
    --muted: #c4a67a;
    --rust: #a5442a;
    --sign: 'Oswald', 'Impact', 'Arial Narrow Bold', sans-serif;
    --western: 'Rye', 'Oswald', Georgia, serif;
}

html, body { height: 100%; }
/* ---------------- background: full scene, never cropped; only the UI resizes over it ---------------- */
body { background: #1a0a00 none; }
#bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #1a0a00; }
#bg-fill { position: absolute; inset: -40px; background: url('../assets/bck-video-poster.webp') center / cover no-repeat; filter: blur(22px) brightness(.55) saturate(1.1); }
#bg-still, #bg-video { position: absolute; inset: 0; width: 100%; height: 100%; }
#bg-still { background: url('../assets/bck-video-poster.webp') center / contain no-repeat; }
#bg-video { object-fit: contain; object-position: center; }
body.bg-still #bg-video { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { #bg-video { display: none; } }
body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100vh;
    height: 100dvh;
    color: var(--cream);
}
button { font: inherit; }

/* ---------------- top bar ---------------- */
#topbar {
    flex: 0 0 auto;
    min-height: var(--bar-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 22px;
    padding: 6px 16px;
    background: linear-gradient(180deg, rgba(18, 11, 6, 0.95), rgba(32, 19, 10, 0.88));
    border-bottom: 2px solid var(--line);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
    z-index: 50;
}
.tb-token { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tb-center { display: flex; align-items: center; gap: 22px; }
.tb-logo { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
#tb-name { font-family: var(--western); font-size: 17px; letter-spacing: .5px; color: var(--gold); white-space: nowrap; line-height: 1.05; text-shadow: 0 2px 0 #5a2c0c; }
#tb-symbol { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 1.5px; }
.tb-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); white-space: nowrap; }
.tb-label em { font-style: normal; margin-left: 6px; padding: 1px 6px; border-radius: 3px; background: var(--rust); color: var(--cream); font-size: 9px; letter-spacing: 1px; vertical-align: 1px; }
.tb-vault {
    position: relative;
    padding: 4px 16px 5px;
    border: 2px solid #b37a2c;
    border-radius: 8px;
    background: linear-gradient(180deg, #3a2412, #23150b);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .55), 0 0 0 3px rgba(0, 0, 0, .35);
    text-align: center;
    min-width: 200px;
}
#jackpot-amount { display: block; font-family: var(--sign); font-weight: 700; font-size: 27px; line-height: 1; color: var(--gold); letter-spacing: .5px; text-shadow: 0 0 12px rgba(255, 190, 60, .45), 0 2px 0 #6b3a0c; font-variant-numeric: tabular-nums; }
#jackpot-amount.rising { color: #fff0a8; }
#vault-delta { position: absolute; right: -4px; bottom: -22px; z-index: 2; padding: 2px 7px; border-radius: 10px; background: var(--amber); color: var(--ink); font-weight: 800; font-size: 12px; opacity: 0; pointer-events: none; }
#vault-delta.show { animation: vaultDelta 1.8s ease-out; }
@keyframes vaultDelta { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.tb-stat { text-align: center; }
.tb-stat > span:last-child { display: block; font-family: var(--sign); font-weight: 600; font-size: 20px; color: var(--cream); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tb-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
#sound-btn, #wallet-btn, #buy-btn {
    border-radius: 6px; padding: 8px 12px; font-size: 12px; font-weight: 800; letter-spacing: 1px; cursor: pointer; white-space: nowrap; text-decoration: none;
}
#sound-btn { background: transparent; border: 1px solid #6e4a26; color: var(--muted); }
#sound-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--amber); }
#wallet-btn { background: linear-gradient(180deg, #4a2e17, #2e1c0e); border: 2px solid var(--line); color: var(--cream); }
#wallet-btn.connected { border-color: var(--amber); color: var(--gold); }
#buy-btn { background: linear-gradient(180deg, #ffcf4a, #e8742a); border: 2px solid #fff1c4; color: #2a1405; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); }
#buy-btn:hover, #wallet-btn:hover { filter: brightness(1.08); }

#away-banner, #wallet-hint {
    position: fixed; top: calc(var(--bar-h) + 10px); left: 50%; transform: translateX(-50%);
    z-index: 60; padding: 10px 18px; border-radius: 8px; text-align: center; cursor: pointer;
    font-weight: 800; letter-spacing: 1px; box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
}
#away-banner { background: linear-gradient(180deg, #ffd24a, #e8932a); color: #2a1405; border: 2px solid #fff3c9; font-family: var(--sign); font-size: 20px; font-weight: 700; animation: overlayBounce .5s ease-out; }
#wallet-hint { background: var(--panel); border: 1px solid var(--line); color: var(--cream); font-size: 13px; }

/* ---------------- stage layout ----------------
   Desktop: three columns [spacer | machine | side]; the spacer mirrors the side column so the slot sits in the
   exact horizontal centre of the viewport. game.js fitGrid sizes the symbols (--sym) from the space left. */
:root { --side-w: clamp(250px, 19vw, 360px); }
#stage { flex: 1 1 auto; min-height: 0; position: relative; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-w); }
#game-container { grid-column: 2; min-width: 0; height: 100%; padding: 12px 0 16px; gap: 14px; justify-content: center; }

/* header unit: logo + BUY = SPIN as one plaque, in flow above the machine (never overlaps it) */
#hero {
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-shrink: 0; max-width: 100%;
    padding: 6px 20px 6px 10px; border-radius: 10px;
    background: linear-gradient(180deg, rgba(58, 34, 16, .93), rgba(32, 19, 10, .93));
    border: 2px solid #b37a2c; box-shadow: 0 0 0 3px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .45);
}
#logo { width: 60px; max-width: none; height: auto; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)); }
#pitch { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
#pitch h1 { font-family: var(--western); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: 2px; white-space: nowrap; color: var(--gold); text-shadow: 0 3px 0 #6b300c, 0 0 18px rgba(255, 180, 40, .35); }
#pitch h1 span { color: var(--orange); }
#pitch p { font-size: 16px; line-height: 1.3; color: var(--cream); }
#pitch .dash { color: var(--amber); }

/* the machine: slot + status bar share one width (the slot's); the bar never widens it (inline-size containment) */
#machine { display: flex; flex-direction: column; align-items: stretch; gap: 24px; max-width: 100%; flex-shrink: 0; }
#reels-container .symbol { transition: width .35s ease-out, height .35s ease-out, transform .2s, box-shadow .2s, border-color .2s; }

/* grid: expansion is the hero mechanic */
#grid-wrapper { flex-shrink: 0; }
#grid-wrapper.expanding { box-shadow: 0 0 0 4px rgba(0, 0, 0, .5), 0 0 0 7px #e8a020, 0 0 45px rgba(255, 170, 40, .65), inset 0 0 30px rgba(0, 0, 0, .5); }
#grid-wrapper.expanding .reel:last-child { animation: reelSlideIn .4s ease-out, newReelGlow .9s ease-out; }
@keyframes newReelGlow { 0% { filter: brightness(1.8) drop-shadow(0 0 14px #ffcc4a); } 100% { filter: none; } }
#reel-meter { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); display: flex; gap: 5px; padding: 3px 8px; border-radius: 10px; background: #1b110a; border: 1px solid var(--line); z-index: 5; }
#reel-meter i { width: 16px; height: 6px; border-radius: 3px; background: #4a3220; transition: background .3s, box-shadow .3s; }
#reel-meter i.on { background: var(--gold); box-shadow: 0 0 6px rgba(255, 210, 74, .8); }
#multiplier-display { z-index: 6; }
#free-spins-display { z-index: 6; }

#stage-win { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 20; }
#stage-win .pop {
    font-family: var(--sign); font-weight: 700; font-size: clamp(30px, 5vw, 56px); color: var(--gold); letter-spacing: 1px;
    text-shadow: 0 3px 0 #6b300c, 0 0 4px #000, 0 0 22px rgba(255, 190, 60, .8);
    animation: stagePop 1.3s ease-out forwards;
}
#stage-win .pop { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#stage-win .pop .eq { font-size: .42em; letter-spacing: 1px; color: #fff3cf; padding: 2px 12px; border-radius: 10px; background: rgba(40, 20, 6, .8); text-shadow: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
#stage-win .pop.bonus-sum { animation-duration: 2.2s; max-width: min(94vw, 760px); text-align: center; }
#stage-win .pop.bonus-sum .eq { white-space: normal; }
#stage-win .pop.bonus-sum .amt { color: #ffe08a; }
#bonus-display { flex-direction: column; gap: 0; align-items: center; flex-shrink: 0; }
#bonus-display .control-value { font-family: var(--sign); font-weight: 700; font-size: 20px; color: #ffd24a; font-variant-numeric: tabular-nums; }
#win-amount.bump, #bonus-amount.bump { animation: moneyBump .45s ease-out; }
@keyframes moneyBump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
#big-win-label { font-family: var(--sign); font-weight: 700; letter-spacing: 3px; color: var(--amber); font-size: clamp(16px, 2.4vw, 26px); margin-top: 6px; }
@keyframes stagePop { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.12); } 30% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }

/* ---------------- transaction bar (replaces balance / bet / spin) ---------------- */
#txbar {
    display: flex; align-items: center; gap: 14px; flex-shrink: 0; container-type: inline-size;
    width: 100%; min-height: 66px; padding: 8px 16px;
    background: linear-gradient(135deg, rgba(30, 15, 5, 0.94), rgba(50, 25, 10, 0.9));
    border-radius: 10px; border: 2px solid var(--line);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .35);
    transition: border-color .3s, box-shadow .3s;
}
#tx-main { flex: 1 1 auto; min-width: 0; }
#tx-title { font-family: var(--sign); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: 1px; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tx-sub { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#txbar[data-tone="detected"] { border-color: var(--amber); animation: barPulse 1s ease-in-out infinite; }
#txbar[data-tone="detected"] #tx-title { color: var(--amber); }
#txbar[data-tone="spin"] #tx-title, #txbar[data-tone="bonus"] #tx-title { color: var(--gold); }
#txbar[data-tone="bonus"] { border-color: #ffd700; }
#txbar[data-tone="win"], #txbar[data-tone="paid"] { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 26px rgba(255, 200, 60, .45); }
#txbar[data-tone="win"] #tx-title, #txbar[data-tone="paid"] #tx-title { color: var(--gold); }
#txbar[data-tone="paid"] #tx-sub { color: #ffe58f; }
#txbar[data-tone="nohit"] #tx-title { color: var(--muted); }
#txbar[data-tone="info"] #tx-title { color: var(--amber); font-size: 20px; }
@keyframes barPulse { 50% { box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 22px rgba(242, 163, 58, .55); } }
#win-display { flex-direction: column; gap: 0; align-items: center; flex-shrink: 0; animation: winReveal .5s ease-out; }
@keyframes winReveal { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
#win-display .control-value { font-family: var(--sign); font-weight: 700; font-size: 24px; min-width: 110px; font-variant-numeric: tabular-nums; }
#queue-chip { flex-shrink: 0; padding: 6px 10px; border-radius: 14px; background: var(--amber); color: var(--ink); font-weight: 800; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
#skip-btn { flex-shrink: 0; background: transparent; border: 1px solid #6e4a26; color: var(--muted); border-radius: 6px; padding: 6px 9px; font-size: 11px; font-weight: 800; letter-spacing: 1px; cursor: pointer; }
@container (max-width: 440px) {
    #tx-title { font-size: 17px; letter-spacing: .5px; }
    #tx-sub { font-size: 10.5px; letter-spacing: .6px; }
    #win-display .control-label { font-size: 9px; }
    #win-display .control-value { font-size: 20px; min-width: 0; }
}

/* ---------------- side column (desktop) / collapsible strip (narrow) ---------------- */
#side { grid-column: 3; display: flex; flex-direction: column; min-height: 0; padding: 14px 14px 16px 0; }
#side-bar { display: flex; gap: 8px; margin-bottom: 12px; }
#side-toggle { display: none; }
#lookup-btn {
    flex: 1 1 auto; min-height: 40px; padding: 8px 12px; cursor: pointer; border-radius: 8px;
    background: linear-gradient(180deg, #4a2e17, #2e1c0e); border: 2px solid var(--line); color: var(--gold);
    font-family: var(--sign); font-weight: 700; font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase;
}
#lookup-btn:hover { filter: brightness(1.12); border-color: var(--amber); }
#lookup-btn .lk-short { display: none; }

/* ---------------- "Check my wallet" dialog ---------------- */
#lookup {
    width: min(640px, calc(100% - 24px)); max-height: min(86vh, 900px); margin: auto; padding: 16px 18px 18px;
    background: linear-gradient(180deg, #2a1a0e, #1b110a); color: var(--cream); border: 2px solid #b37a2c; border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), 0 18px 50px rgba(0, 0, 0, .7); overflow: auto;
}
#lookup::backdrop { background: rgba(8, 4, 1, .72); }
.lk-head { display: flex; align-items: center; gap: 10px; }
#lookup h2 { font-family: var(--western); font-weight: 400; font-size: 22px; letter-spacing: 1.5px; color: var(--gold); flex: 1; }
#lookup-close { background: none; border: 0; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }
.lk-note { font-size: 13px; color: var(--muted); margin: 6px 0 12px; }
.lk-form { display: flex; gap: 8px; }
#lookup-input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid #6e4a26; background: #120b06; color: var(--cream); font: 14px ui-monospace, Menlo, monospace; }
#lookup-input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
#lookup-go, #lookup-use { padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 800; letter-spacing: 1px; }
#lookup-go { background: linear-gradient(180deg, #ffcf4a, #e8742a); border: 2px solid #fff1c4; color: #2a1405; }
#lookup-use { margin-top: 8px; background: transparent; border: 1px solid #6e4a26; color: var(--amber); font-size: 12px; padding: 6px 10px; }
#lookup-msg { margin: 10px 0 6px; font-size: 13px; color: var(--muted); min-height: 1.2em; }
#lookup-msg.err { color: #ff9b7a; }
#lookup-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lk-chip { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid #5a3c20; }
.lk-chip b { font-family: var(--sign); font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
.lk-chip span { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
#lookup-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lk-row { padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .28); border-left: 3px solid #5a3c20; }
.lk-row.win { border-left-color: var(--gold); background: rgba(255, 210, 74, .08); }
.lk-row.jp { border-left-color: var(--orange); background: linear-gradient(90deg, rgba(232, 116, 42, .35), rgba(255, 210, 74, .12)); }
.lk-top, .lk-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lk-bottom { margin-top: 5px; }
.lk-when { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lk-buy { font-weight: 700; font-size: 14px; }
.lk-pay { font-family: var(--sign); font-weight: 700; font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
.lk-badge { font-size: 11px; font-weight: 800; letter-spacing: .8px; padding: 3px 7px; border-radius: 4px; background: #4a3220; color: var(--cream); text-transform: uppercase; }
.lk-badge.gold { background: var(--gold); color: var(--ink); }
.lk-badge.ok { background: #2f7d3a; color: #eaffe9; }
.lk-badge.wait { background: #6b4a2a; }
.lk-badge.hold { background: #8a5a10; color: #fff1c4; }
.lk-badge.bad { background: var(--rust); }
.lk-badge.muted { background: #3a2a1c; color: var(--muted); }
.lk-details { margin-top: 6px; font-size: 12px; }
.lk-details summary { cursor: pointer; color: var(--amber); font-weight: 700; letter-spacing: .5px; }
.lk-bd { width: 100%; margin-top: 6px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lk-bd th { text-align: right; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 2px 6px; }
.lk-bd th:first-child, .lk-bd td:first-child { text-align: left; }
.lk-bd td { text-align: right; padding: 2px 6px; border-top: 1px solid rgba(139, 90, 43, .25); }
.lk-bd .lk-bd-phase td { color: var(--amber); font-weight: 700; border-top: 0; padding-top: 6px; }
.lk-bd .lk-bd-sub td { color: var(--cream); font-weight: 700; }
.lk-bd .lk-bd-total td { color: var(--gold); font-weight: 800; font-size: 13px; border-top: 2px solid var(--line); }
.lk-tx { font-size: 12px; color: var(--amber); text-decoration: none; margin-left: auto; white-space: nowrap; }
.lk-tx:hover { text-decoration: underline; }
#side-panels { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1 1 auto; }
#side section { background: var(--panel); border: 1px solid #6e4a26; border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
#recent { flex: 0 0 auto; }
#feed { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#side h3 { font-family: var(--western); font-weight: 400; font-size: 17px; letter-spacing: 1.6px; color: var(--amber); margin-bottom: 8px; text-transform: uppercase; }
.rw-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); padding: 3px 0; }
.rw-row b { color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
#rw-winners, #feed-list { list-style: none; }
#rw-winners { margin-top: 8px; border-top: 1px solid rgba(139, 90, 43, .4); padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
#rw-winners li { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 5px 8px; border-radius: 6px; color: var(--cream); background: rgba(255, 210, 74, .08); border-left: 3px solid var(--gold); font-variant-numeric: tabular-nums; }
#rw-winners li b { color: var(--gold); }
#rw-winners li.jp { background: linear-gradient(90deg, rgba(232, 116, 42, .45), rgba(255, 210, 74, .25)); border-left-color: var(--orange); font-weight: 700; animation: jpGlow 1.6s ease-in-out infinite alternate; }
#rw-winners li.jp b { color: #fff0a8; }
#rw-winners li.jp .w::before { content: 'JACKPOT \00b7 '; color: #ffe08a; font-weight: 800; letter-spacing: 1px; font-size: 12px; }
#feed-list { overflow-y: auto; min-height: 0; }
#feed-list li { display: flex; gap: 8px; align-items: center; font-size: 14px; padding: 6px 6px; border-bottom: 1px solid rgba(139, 90, 43, .25); color: var(--cream); border-radius: 5px; }
#feed-list li:last-child { border-bottom: 0; }
#feed-list .tag { flex: 0 0 60px; font-weight: 800; font-size: 11px; letter-spacing: 1px; text-align: center; padding: 3px 0; border-radius: 3px; background: #4a3220; color: var(--cream); }
#feed-list .txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#feed-list .feed-buy .tag { background: var(--amber); color: var(--ink); }
#feed-list .feed-buy_small .tag, #feed-list .feed-buy_limited .tag { background: #6b4a2a; }
#feed-list .feed-sell .tag { background: var(--rust); }
#feed-list .feed-win { background: rgba(255, 210, 74, .1); }
#feed-list .feed-win .tag { background: var(--gold); color: var(--ink); }
#feed-list .feed-win .txt { color: var(--gold); font-weight: 700; }
#feed-list .feed-jackpot { background: linear-gradient(90deg, rgba(232, 116, 42, .5), rgba(255, 210, 74, .25)); animation: jpGlow 1.6s ease-in-out infinite alternate; }
#feed-list .feed-jackpot .tag { background: linear-gradient(180deg, #ffe08a, var(--orange)); color: var(--ink); box-shadow: 0 0 8px rgba(255, 200, 60, .9); }
#feed-list .feed-jackpot .txt { color: #fff0a8; font-weight: 800; }
#feed-list li.mine .txt::after { content: ' \2022 you'; color: var(--amber); }
#feed-list .feed-empty { color: var(--muted); }
/* only entries that arrive while the page is open slide in */
#feed-list li.new, #rw-winners li.new { animation: slideIn .45s cubic-bezier(.2, .9, .3, 1.2) both; }
#feed-list li.feed-win.new, #rw-winners li.new { animation: slideIn .45s cubic-bezier(.2, .9, .3, 1.2) both, goldFlash 1.4s ease-out .2s; }
#feed-list li.feed-jackpot.new, #rw-winners li.jp.new { animation: slideIn .45s cubic-bezier(.2, .9, .3, 1.2) both, jpGlow 1.6s ease-in-out .45s infinite alternate; }
@keyframes slideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes goldFlash { 0% { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255, 210, 74, .9); } 100% { box-shadow: none; } }
@keyframes jpGlow { from { box-shadow: 0 0 4px rgba(255, 190, 60, .4); } to { box-shadow: 0 0 16px rgba(255, 190, 60, .95), inset 0 0 8px rgba(255, 230, 140, .35); } }

/* jackpot: below its payable minimum it reads BUILDING… with the amount small */
.jp-line { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
#jackpot-building { font-family: var(--sign); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: 1.5px; color: var(--amber); }
#jackpot-building i { font-style: normal; animation: dots 1.4s steps(4) infinite; display: inline-block; overflow: hidden; vertical-align: bottom; width: 1.1em; }
@keyframes dots { 0% { width: 0; } 100% { width: 1.1em; } }
.tb-vault.building #jackpot-amount { font-size: 14px; font-weight: 600; color: var(--muted); text-shadow: none; }
#jackpot-amount.rising { animation: jpBump .9s ease-out; }
@keyframes jpBump { 0% { transform: scale(1); } 30% { transform: scale(1.1); } 100% { transform: scale(1); } }
.tb-vault.building #jackpot-amount.rising { color: var(--cream); }

/* ---------------- overlays (no buttons in TOKEN mode) ---------------- */
#overlay { background: rgba(15, 8, 3, 0.82); }
#overlay h2 { font-family: var(--western); font-weight: 400; letter-spacing: 2px; text-shadow: 0 4px 0 #6b300c, 0 0 30px rgba(255, 215, 0, 0.7); }
#big-win-overlay { background: radial-gradient(ellipse at center, rgba(60, 30, 8, .9), rgba(10, 5, 2, .95)); overflow: hidden; }
#big-win-content { position: relative; z-index: 3; }
#big-win-content h2 { font-family: var(--western); font-weight: 400; letter-spacing: 3px; text-shadow: 0 5px 0 #6b300c, 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.5); }
#big-win-amount { font-family: var(--sign); font-weight: 700; color: #fff6dc; font-variant-numeric: tabular-nums; }
#big-win-sub { margin-top: 12px; font-weight: 800; letter-spacing: 3px; color: var(--amber); }
#jackpot-rays { position: absolute; inset: -50%; z-index: 1; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255, 200, 60, .16) 0deg 10deg, rgba(0, 0, 0, 0) 10deg 20deg); }
#big-win-overlay[data-kind="MEGA"] #jackpot-rays { opacity: .6; animation: rays 14s linear infinite; }
#big-win-overlay[data-kind="JACKPOT"] #jackpot-rays { opacity: 1; animation: rays 8s linear infinite; }
#big-win-overlay[data-kind="JACKPOT"] h2 { font-size: clamp(56px, 11vw, 120px); color: #ffcf3a; animation: bigWinText .35s ease-out infinite alternate; }
#big-win-overlay[data-kind="JACKPOT"] #big-win-amount { font-size: clamp(48px, 9vw, 104px); text-shadow: 0 0 40px rgba(255, 200, 60, .8); }
#big-win-overlay[data-kind="MEGA"] h2 { color: #ffb43a; }
@keyframes rays { to { transform: rotate(360deg); } }
#jackpot-rain { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#jackpot-rain .drop { position: absolute; top: -12%; width: 70px; height: 70px; background: center / contain no-repeat; animation: drop 3s linear infinite; opacity: .95; }
@keyframes drop { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(125vh) rotate(540deg); } }

#conn-status { position: fixed; left: 12px; bottom: 12px; z-index: 70; padding: 6px 10px; border-radius: 6px; background: var(--rust); color: var(--cream); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
#dev-state.downgraded { max-width: min(94vw, 900px); white-space: normal; text-align: center; color: #1b120b; background: rgba(255, 170, 70, .95); font-weight: 700; }
#dev-state { position: fixed; left: 50%; transform: translateX(-50%); bottom: 2px; z-index: 70; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, .75); color: #ffd24a; font: 11px/1.4 ui-monospace, monospace; pointer-events: none; }

[hidden] { display: none !important; }

/* ---------------- responsive ---------------- */
@media (min-width: 1100px) and (max-height: 860px) {
    #game-container { padding: 8px 0 10px; gap: 10px; }
    #hero { padding: 3px 16px 3px 8px; gap: 10px; }
    #logo { width: 42px; }
    #pitch h1 { font-size: 24px; }
    #pitch p { font-size: 14px; }
    #machine { gap: 22px; }
    #txbar { min-height: 58px; padding: 6px 14px; }
}
/* narrow: one column, page scrolls; side panels become a collapsible strip under the machine */
@media (max-width: 1099px) {
    body { height: auto; min-height: 100vh; overflow-y: auto; overflow-x: hidden; }
    #stage { display: flex; flex-direction: column; align-items: center; }
    #game-container { height: auto; width: 100%; padding: 10px 8px 12px; gap: 12px; }
    #side { width: min(100% - 16px, 720px); padding: 0 0 16px; }
    #side-bar { margin-bottom: 0; }
    #lookup-btn { flex: 0 0 auto; min-height: 44px; font-size: 13px; padding: 6px 12px; }
    #side-toggle {
        display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px; cursor: pointer;
        background: var(--panel); border: 1px solid #6e4a26; border-radius: 10px; color: var(--cream); text-align: left;
    }
    #side-toggle .st-label { flex-shrink: 0; font-family: var(--western); font-size: 14px; letter-spacing: 1.2px; color: var(--amber); text-transform: uppercase; }
    #side-latest { flex: 1 1 auto; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
    #side-latest.win { color: var(--gold); font-weight: 700; }
    #side-latest.jackpot { color: #fff0a8; font-weight: 800; text-shadow: 0 0 8px rgba(255, 190, 60, .8); }
    #side-latest.new { animation: slideIn .45s ease-out; }
    .st-chev { flex-shrink: 0; color: var(--amber); transition: transform .25s; }
    #side.open .st-chev { transform: rotate(180deg); }
    #side-panels { display: none; margin-top: 8px; }
    #side.open #side-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; animation: slideDown .3s ease-out; }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 900px) {
    /* two rows: [token · actions] then [jackpot · stats] */
    #topbar { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 6px 10px; }
    .tb-token { order: 1; }
    .tb-actions { order: 2; margin-left: auto; gap: 6px; }
    .tb-center { order: 3; flex: 1 1 100%; justify-content: center; gap: 14px; }
    .tb-vault { min-width: 0; padding: 3px 14px; }
}
@media (max-width: 760px) {
    .tb-vault { flex: 1 1 auto; }
    #jackpot-amount { font-size: 22px; }
    #jackpot-building { font-size: 19px; }
    .tb-stat > span:last-child { font-size: 16px; }
    #sound-btn, #wallet-btn, #buy-btn { padding: 6px 8px; font-size: 10px; }
    #sound-btn { max-width: 70px; white-space: normal; line-height: 1.1; }
    #tb-name { font-size: 15px; }
    .tb-logo { width: 32px; height: 32px; }
    #game-container { padding: 8px 8px 12px; gap: 10px; }
    #hero { gap: 10px; padding: 5px 14px 5px 8px; }
    #logo { width: 46px; }
    #pitch { flex-direction: column; align-items: flex-start; gap: 3px; }
    #pitch h1 { font-size: 24px; }
    #pitch p { font-size: 13px; }
    #pitch .dash { display: none; }
    #pitch p::first-letter { text-transform: uppercase; }
    #machine { gap: 22px; }
    #txbar { padding: 8px 12px; min-height: 60px; gap: 10px; }
    #side.open #side-panels { grid-template-columns: 1fr; }
    #lookup-btn .lk-long { display: none; }
    #lookup-btn .lk-short { display: inline; }
    #lookup { width: calc(100% - 16px); max-height: 92vh; padding: 14px 12px; }
    #lookup h2 { font-size: 19px; }
    .lk-chip { min-width: 0; flex: 1 1 18%; }
    .lk-tx { margin-left: 0; }
    #reel-meter i { width: 11px; }
}
@media (max-width: 440px) {
    /* phone: token name and the two buttons share the first row */
    #topbar { gap: 6px 8px; padding: 6px 8px; }
    .tb-token { gap: 6px; }
    #tb-name { font-size: 13.5px; }
    #tb-symbol { font-size: 10px; letter-spacing: 1px; }
    .tb-logo { width: 28px; height: 28px; }
    .tb-actions { gap: 5px; }
    #sound-btn { max-width: 68px; padding: 5px 6px; font-size: 9.5px; }
    #wallet-btn, #buy-btn { padding: 6px 7px; font-size: 9.5px; letter-spacing: .6px; }
}
@media (max-width: 380px) {
    .tb-stat { display: none !important; }
}

/* shadow instance (server/shadow.js): real chain trades, simulated payouts */
#shadow-badge { display: inline-block; margin: 0 0 4px; padding: 2px 10px; border-radius: 4px; background: #7a1f6b; color: #fff; font: 800 11px/1.5 system-ui, sans-serif; letter-spacing: 1px; text-decoration: none; box-shadow: 0 1px 6px rgba(0,0,0,.5); }
#shadow-badge[hidden] { display: none; }