:root {
  --bg: #0a0b10;
  --panel: rgba(16, 18, 26, 0.86);
  --line: rgba(255, 255, 255, 0.08);
  --text: #e8e6df;
  --muted: #9a9aa6;
  --gold: #f5c451;
  --corner-red: #e11d48;
  --corner-blue: #2563eb;
  --green: #22c55e;
  --red: #ef4444;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; overflow: hidden; }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: 10px 16px; background: var(--gold); color: #1b1300; font-weight: 700; letter-spacing: 0.02em; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.5; cursor: default; }
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }

#topbar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent); pointer-events: none; z-index: 5; }
#topbar .brand { font-weight: 900; letter-spacing: 0.18em; font-size: 15px; }
#topbar .brand span { color: var(--gold); }
#topbar .match, #topbar .bank { font-size: 14px; color: var(--muted); }
#topbar b { color: var(--text); font-size: 16px; margin-left: 4px; }
#topbar .bank b { color: var(--gold); }
#topbar #install-btn { pointer-events: auto; margin-left: 14px; }
#topbar #sound-btn { pointer-events: auto; margin-left: 14px; font-size: 14px; padding: 3px 8px; }
#topbar .who { display: flex; align-items: center; gap: 8px; margin-left: 14px; font-size: 12px; color: var(--muted); pointer-events: auto; }
#topbar .who #name-btn { color: var(--text); }
body.live #bet-panel footer { display: none; }
body.live .local-only { display: none !important; }
body:not(.live) .live-only { display: none !important; }
#topbar #wallet-btn { padding: 4px 10px; font-size: 11px; letter-spacing: 0.06em; }
#auth-panel { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 27; display: grid; place-items: center; padding: 16px; }
#auth-panel .sheet { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; backdrop-filter: blur(10px); }
#auth-panel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#auth-panel h2 { margin: 0; font-size: 18px; }
#auth-panel .tabs { display: flex; gap: 6px; margin-bottom: 14px; }
#auth-panel .tab { flex: 1; background: rgba(255,255,255,0.06); color: var(--muted); font-weight: 600; }
#auth-panel .tab.active { background: var(--gold); color: #1b1300; }
#auth-panel label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
#auth-panel input { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 16px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,0.4); color: var(--text); }
#auth-panel #auth-msg { min-height: 18px; margin: 0 0 8px; font-size: 13px; color: #fca5a5; }
#auth-panel #auth-submit { width: 100%; padding: 12px; }
#auth-panel .fine { font-size: 11px; color: var(--muted); margin: 12px 0 0; line-height: 1.4; }
#need-login { display: none; grid-column: 1 / -1; align-items: center; gap: 10px; padding: 14px 16px; border: 1px dashed rgba(245,196,81,0.45); border-radius: 14px; background: rgba(245,196,81,0.06); flex-wrap: wrap; }
#need-login .text { flex: 1; min-width: 180px; }
#need-login .text b { display: block; font-size: 15px; }
#need-login .text small { color: var(--muted); font-size: 12px; }
#need-login button { flex: none; padding: 12px 18px; }
.wager.guest .tray, .wager.guest .stack-area, .wager.guest .current, .wager.guest #no-chips { display: none; }
.wager.guest #need-login { display: flex; }
#topbar #login-btn { padding: 4px 10px; font-size: 11px; letter-spacing: 0.06em; }
body.live.guest #topbar .bank { display: none; }
#wallet-panel { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 25; display: grid; place-items: center; padding: 16px; }
#wallet-panel .sheet { width: min(440px, 100%); max-height: 92vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)); backdrop-filter: blur(10px); }
#wallet-panel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#wallet-panel .playing { font-size: 12px; color: var(--muted); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
#wallet-panel .playing b { color: var(--text); }
#wallet-panel h2 { margin: 0; font-size: 18px; }
#wallet-panel .balances { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
#wallet-panel .balances div { background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
#wallet-panel .balances small { display: block; color: var(--muted); font-size: 11px; }
#wallet-panel .balances b { font-size: 22px; color: var(--gold); }
#wallet-panel .rate { margin: -4px 0 14px; font-size: 12px; color: var(--muted); line-height: 1.4; }
#wallet-panel .rate b { color: var(--gold); }
#wallet-panel .deposit { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.warn-band { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: rgba(239,68,68,0.16); border: 1px solid rgba(239,68,68,0.8); color: #fecaca; font-size: 12px; line-height: 1.4; }
.warn-band b { display: block; color: #fff; font-size: 13px; letter-spacing: 0.04em; margin-bottom: 2px; }
#wallet-panel.testnet .qr, #wallet-panel.testnet .addr code { border-color: rgba(239,68,68,0.6); }
#wallet-panel.testnet .addr code { border: 1px solid rgba(239,68,68,0.6); }
#wallet-panel .qr { width: 112px; height: 112px; flex: none; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
#wallet-panel .qr svg { width: 100%; height: 100%; display: block; }
#wallet-panel .addr { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#wallet-panel .addr code { font-size: 11px; word-break: break-all; color: var(--text); background: rgba(0,0,0,0.35); padding: 6px 8px; border-radius: 8px; }
#wallet-panel .addr small { color: var(--muted); font-size: 11px; line-height: 1.35; }
#wallet-panel .addr button { align-self: flex-start; }
#wallet-panel .hint { color: var(--gold); font-weight: 600; margin-left: 6px; }
#wallet-panel .move .row + .row { margin-top: 6px; }
/* the money figure: bettors think in their currency, so it reads at least as loud as the chips */
.fiat { display: block; font-style: normal; font-size: 16px; font-weight: 800; color: #fff; min-height: 18px; letter-spacing: 0.01em; }
.fiat:empty { display: none; }
.fiat-inline { font-style: normal; color: #fff; font-weight: 800; font-size: 1em; margin-left: 6px; }
#topbar .bank .fiat-inline { font-size: 14px; color: #fff; }
#result-panel #result-pay .fiat-inline { display: block; font-size: 30px; margin: 2px 0 4px; }
#result-panel #result-pay.win .fiat-inline { color: var(--green); }
#result-panel #result-pay.loss .fiat-inline { color: var(--red); }
#result-panel #result-pay small { display: block; font-weight: 500; font-size: 14px; color: var(--muted); }
#history li .fiat-inline { font-size: 11px; margin-left: 4px; color: inherit; opacity: 0.9; }
#wallet-panel .balances .fiat { font-size: 15px; }
#wallet-panel .currency-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 12px; font-size: 12px; color: var(--muted); }
#wallet-panel .currency-row select { font: inherit; font-size: 13px; font-weight: 700; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,0.4); color: var(--text); }
#wallet-panel .currency-row small { flex-basis: 100%; }
#wallet-panel .currency-row small { font-size: 11px; }
/* the currency picker lives in the top bar, just before the sound toggle */
#topbar #currency-select { pointer-events: auto; margin-left: 14px; width: 66px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 22px 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9aa6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 7px center; color: var(--text); appearance: none; -webkit-appearance: none; cursor: pointer; }
#topbar #currency-select option { color: #111; }
.stack-info .total .fiat { margin-top: -2px; }
#wallet-panel .move { margin-bottom: 12px; }
#wallet-panel .wtabs { display: flex; gap: 6px; margin: 0 0 14px; }
#wallet-panel .wtabs .tab { flex: 1; padding: 10px 8px; background: rgba(255,255,255,0.06); color: var(--muted); font-weight: 700; letter-spacing: 0.04em; }
#wallet-panel .wtabs .tab.active { background: var(--gold); color: #1b1300; }
#wallet-panel .wtab > h4:first-child { margin-top: 2px; }
#wallet-panel .rate { margin: 0 0 14px; }
#wallet-panel .move label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
#wallet-panel .row { display: flex; gap: 8px; }
#wallet-panel .row .currency { align-self: center; color: var(--muted); font-size: 14px; min-width: 18px; }
#wallet-panel .row input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,0.4); color: var(--text); }
#wallet-panel .quick { display: flex; gap: 6px; margin-top: 6px; }
#wallet-panel #bonus-btn { width: 100%; margin: 4px 0 8px; }
#wallet-panel #wallet-msg { min-height: 18px; margin: 4px 0 10px; font-size: 13px; color: var(--gold); }
#wallet-panel h4 { margin: 12px 0 6px; font-size: 11px; letter-spacing: 0.15em; color: var(--muted); }
#wallet-panel ul { list-style: none; margin: 0; padding: 0; font-size: 12px; max-height: 180px; overflow: auto; }
#wallet-panel li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); color: var(--muted); }
#wallet-panel li small { color: var(--muted); opacity: 0.7; margin-left: 6px; }
#wallet-panel li .win { color: var(--green); } #wallet-panel li .loss { color: var(--red); }
#wallet-panel .fine { font-size: 11px; color: var(--muted); margin: 10px 0 0; }
body.live #next-btn { display: none; }
#result-next { color: var(--gold) !important; font-weight: 600; }
#replay-badge { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgba(225,29,72,0.85); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; z-index: 5; }
#replay-exit { position: fixed; top: 130px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 6px 14px; font-size: 12px; }
button.replay { padding: 1px 7px; font-size: 11px; margin-left: 6px; background: rgba(255,255,255,0.1); color: var(--gold); border-radius: 6px; }
#wallet-panel #logout-btn { margin-left: auto; }
#catchup { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 3; }
#catchup.show { opacity: 0.85; transition: none; }
#offline-notice { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); padding: 8px 14px; background: rgba(127, 29, 29, 0.9); border-radius: 10px; font-size: 13px; z-index: 30; }
/* the house's announcement: a flashing band under the top bar, dismissable per device */
#announce { position: fixed; top: calc(44px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 14px; font-weight: 800; font-size: 14px; letter-spacing: 0.02em; text-align: center; color: #1b1300; background: var(--gold); box-shadow: 0 2px 10px rgba(0,0,0,0.5); animation: announce-flash 1.1s steps(1, end) infinite; }
@keyframes announce-flash { 0%, 100% { background: var(--gold); color: #1b1300; } 50% { background: #b91c1c; color: #fff; } }
@media (prefers-reduced-motion: reduce) { #announce { animation: none; } }
/* everything that sits under the top bar moves down while the band shows */
body.announced #bet-timer { top: calc(58px + var(--announce-h, 34px) + env(safe-area-inset-top, 0px)); }
body.announced #fight-hud { top: calc(60px + var(--announce-h, 34px) + env(safe-area-inset-top, 0px)); }
body.announced #history { top: calc(150px + var(--announce-h, 34px)); }
body.announced #replay-badge, body.announced #offline-notice, body.announced #update-toast { top: calc(96px + var(--announce-h, 34px)); }
#update-toast { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); padding: 10px 14px; background: var(--panel); border: 1px solid var(--gold); border-radius: 12px; font-size: 13px; z-index: 30; backdrop-filter: blur(8px); display: flex; gap: 10px; align-items: center; }
#update-toast button { padding: 6px 12px; font-size: 12px; }

#fight-hud { position: fixed; top: 54px; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: center; gap: 18px; padding: 0 18px; z-index: 4; pointer-events: none; }
#fight-hud .fighter { width: min(34vw, 360px); }
#fight-hud .fname { font-weight: 700; font-size: 14px; margin-bottom: 6px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
#fight-hud .fighter.blue .fname { text-align: right; }
#fight-hud .side { font-size: 11px; letter-spacing: 0.15em; padding: 2px 6px; border-radius: 4px; color: white; }
#fight-hud .red .side { background: var(--corner-red); }
#fight-hud .blue .side { background: var(--corner-blue); }
#fight-hud .bar { height: 10px; background: rgba(0,0,0,0.5); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 4px; }
#fight-hud .bar.sta { height: 5px; }
#fight-hud .bar i { display: block; height: 100%; width: 100%; transition: width 0.25s ease-out; }
#fight-hud .hp i { background: linear-gradient(90deg, #f87171, #fbbf24 60%, #4ade80); }
#fight-hud .sta i { background: #60a5fa; }
#fight-hud .blue .bar i { margin-left: auto; }
#fight-hud .vs { font-weight: 900; color: var(--gold); font-size: 20px; letter-spacing: 0.1em; margin-top: 14px; }
#hud-fight { display: none; }
#fight-hud .mybet { display: inline-flex; gap: 8px; align-items: baseline; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.6); border: 1px solid var(--gold); font-size: 12px; color: var(--muted); backdrop-filter: blur(6px); }
#fight-hud .mybet b { color: var(--gold); font-size: 14px; }
#fight-hud .mybet .win { color: var(--green); }
#fight-hud .blue .mybet { float: right; }

#ticker { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; padding: 10px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; z-index: 4; max-width: 90vw; text-align: center; backdrop-filter: blur(8px); transition: bottom 0.3s; }
body.betting #ticker { display: none; }

#bet-panel { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(980px, 100vw); background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; padding: 14px 18px 16px; backdrop-filter: blur(10px); z-index: 6; }
#bet-panel header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
#bet-panel h2 { margin: 0; font-size: 18px; letter-spacing: 0.04em; }

/* countdown lives outside the panel so the panel never needs to scroll */
#bet-timer { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 14px; white-space: nowrap; backdrop-filter: blur(8px); z-index: 5; }
#bet-timer b { color: var(--gold); font-size: 18px; margin: 0 2px; }
#bet-timer .fight { display: none; margin-right: 8px; padding-right: 8px; border-right: 1px solid var(--line); color: var(--text); font-weight: 600; }
#bet-timer.urgent b { color: var(--red); }
/* short windows: shrink the whole panel instead of scrolling it */
@media (max-height: 760px) { #bet-panel { zoom: 0.9; } }
@media (max-height: 660px) { #bet-panel { zoom: 0.8; } }
@media (max-height: 560px) { #bet-panel { zoom: 0.7; } }
#bet-panel .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: rgba(255,255,255,0.03); position: relative; }
.card.red { border-top: 3px solid var(--corner-red); }
.card.blue { border-top: 3px solid var(--corner-blue); }
.card.chosen { outline: 2px solid var(--gold); background: rgba(245,196,81,0.08); }
.card h3.side { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.2em; color: var(--muted); }
.stats-toggle { display: none; }
.card .rname { font-size: 18px; font-weight: 800; }
.card .rmeta { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.card ul.stats { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; font-size: 12.5px; }
.card ul.stats li { display: flex; justify-content: space-between; color: var(--muted); }
.card ul.stats li b { font-weight: 400; font-size: 18px; line-height: 1; letter-spacing: 0.1em; white-space: nowrap; }
.card ul.stats li b i { font-style: normal; }
.card ul.stats li b .on { color: var(--gold); text-shadow: 0 0 6px rgba(245,196,81,0.35); }
.card ul.stats li b .off { color: rgba(255,255,255,0.16); }
.card .pool { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 10px; font-size: 13px; }
.card .pool small { display: block; color: var(--muted); font-size: 11px; }
.card .pool span { font-weight: 700; font-size: 15px; }
.card .pool .odds { color: var(--gold); }
.card .tag { margin-left: auto; font-size: 11px; letter-spacing: 0.1em; white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.08); }
.card .tag.favorite { background: rgba(34,197,94,0.18); color: #86efac; }
.card .tag.underdog { background: rgba(239,68,68,0.18); color: #fca5a5; }
.card .tag.paused { background: rgba(245,196,81,0.18); color: var(--gold); }
.card .bet-btn:disabled { opacity: 0.4; filter: grayscale(0.4); }
.card .bet-btn { width: 100%; }
.card.red .bet-btn { background: var(--corner-red); color: white; }
.card.blue .bet-btn { background: var(--corner-blue); color: white; }

.pool-bar { position: relative; height: 18px; border-radius: 9px; overflow: hidden; background: var(--corner-blue); margin: 12px 0; font-size: 11px; font-weight: 700; }
.pool-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--corner-red); transition: width 0.4s; }
.pool-bar span { position: absolute; top: 0; line-height: 18px; padding: 0 8px; color: white; }
#pool-left { left: 0; } #pool-right { right: 0; }

.wager { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: start; }
.wager .current { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.wager .current b { color: var(--gold); }
.wager .current .fiat-inline { margin-left: 0; }
.wager .current.warn { color: #fca5a5; }
/* a change to a bet that is already down waits for a confirming tap */
#bet-confirm { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--gold); border-radius: 12px; background: rgba(245,196,81,0.1); }
#bet-confirm-text { flex: 1; font-weight: 700; font-size: 14px; }
#bet-confirm-text .fiat-inline { font-weight: 700; }
#bet-confirm button { padding: 9px 14px; }
.pile .chip.ghost { opacity: 0.45; outline: 2px dashed var(--gold); outline-offset: -2px; }
.stack.pending { outline: 2px dashed rgba(245,196,81,0.5); outline-offset: 6px; border-radius: 14px; }
.tray { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tray .allin { padding: 8px 12px; background: rgba(255,255,255,0.1); color: var(--text); font-size: 12px; letter-spacing: 0.08em; }

/* nothing to bet with: the tray makes way for a cash-in prompt */
#no-chips { display: none; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px dashed rgba(245,196,81,0.45); border-radius: 14px; background: rgba(245,196,81,0.06); }
#no-chips .text b { display: block; font-size: 15px; }
#no-chips .text small { color: var(--muted); font-size: 12px; }
#no-chips .text small span { color: var(--gold); font-weight: 700; }
#no-chips button { flex: none; padding: 12px 22px; }
.wager.empty .tray, .wager.empty .stack-area, .wager.empty .current { display: none; }
.wager.empty #no-chips { display: flex; }

/* casino chips */
.chip { --c: #16a34a; position: relative; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 0; background: var(--c); color: #fff; font-weight: 900; font-size: 15px; box-shadow: inset 0 0 0 5px rgba(255,255,255,0.9), inset 0 0 0 7px var(--c), inset 0 0 0 9px rgba(255,255,255,0.35), 0 3px 4px rgba(0,0,0,0.55); text-shadow: 0 1px 2px rgba(0,0,0,0.6); transition: transform 0.08s; user-select: none; }
.chip::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,0.92) 0 14deg, transparent 14deg 45deg); -webkit-mask: radial-gradient(circle, transparent 23px, #000 23.5px); mask: radial-gradient(circle, transparent 23px, #000 23.5px); }
.chip span { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; }
.chip:hover { filter: none; transform: translateY(-3px); }
.chip:active { transform: scale(0.94); }
.chip:disabled { opacity: 0.35; transform: none; cursor: default; }
.chip.c25 { --c: #15803d; }
.chip.c100 { --c: #1f2937; }
.chip.c500 { --c: #6d28d9; }
.chip.c1000 { --c: #d97706; }
.chip.c5000 { --c: #b91c1c; }
.chip.bump { animation: chip-bump 0.25s ease-out; }
@keyframes chip-bump { 0% { transform: translateY(-14px) scale(1.1); } 100% { transform: none; } }
.tray.shake { animation: tray-shake 0.3s; }
@keyframes tray-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* the wager: one pile per denomination, tap a pile to take a chip back */
.stack-area { display: flex; gap: 14px; align-items: center; min-height: 72px; }
.stack { display: flex; gap: 10px; align-items: flex-end; min-width: 84px; min-height: 72px; }
.pile { position: relative; width: 56px; height: 72px; padding: 0; border: 0; background: none; flex: none; }
.pile .chip { position: absolute; left: 0; bottom: calc(var(--i, 0) * 4px); z-index: var(--i, 0); display: block; cursor: pointer; }
.pile:hover .chip { transform: translateY(-3px); }
.pile .count { position: absolute; right: -6px; top: 0; z-index: 10; font-style: normal; font-size: 11px; font-weight: 700; color: #1b1300; background: var(--gold); border-radius: 8px; padding: 1px 5px; }
.stack .empty { display: grid; place-items: center; width: 150px; height: 60px; border: 2px dashed var(--line); border-radius: 12px; font-size: 11px; color: var(--muted); text-align: center; padding: 4px; }
.stack-info { display: flex; flex-direction: column; gap: 6px; }
.stack-info .total small { display: block; color: var(--muted); font-size: 11px; }
.stack-info .total b { font-size: 22px; color: var(--gold); }
.stack-info .actions { display: flex; gap: 6px; }
button.small { padding: 5px 10px; font-size: 12px; }
#bet-panel footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

#result-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; text-align: center; z-index: 7; backdrop-filter: blur(10px); }
#result-panel h2 { margin: 0 0 6px; font-size: 24px; }
#result-panel p { margin: 4px 0; color: var(--muted); }
#result-panel #result-pay { font-size: 20px; font-weight: 800; color: var(--text); margin: 12px 0 16px; }
#result-panel #result-pay.win { color: var(--green); }
#result-panel #result-pay.loss { color: var(--red); }
#result-panel button { margin: 4px; }

#history { position: fixed; right: 14px; top: 150px; width: 290px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 12px; z-index: 3; backdrop-filter: blur(8px); }
#history h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.15em; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
button.tiny { padding: 2px 8px; font-size: 10px; letter-spacing: 0.1em; border-radius: 6px; }
#history ul { list-style: none; margin: 0; padding: 0; }
#history li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 3px 0; border-top: 1px solid var(--line); color: var(--muted); }
#history li span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#history li span:last-child { flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#history li .win { color: var(--green); font-weight: 700; }
#history li .loss { color: var(--red); font-weight: 700; }
#history li .flat { color: var(--muted); }

#loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 20; font-size: 18px; letter-spacing: 0.08em; color: var(--muted); }

@media (max-width: 720px) {
  :root { --safe-b: env(safe-area-inset-bottom, 0px); }
  button { padding: 12px 14px; touch-action: manipulation; }
  #topbar { padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  #topbar .brand { font-size: 13px; letter-spacing: 0.12em; }
  #topbar .match::before { content: ''; }
  #topbar .match, #topbar .bank { font-size: 13px; }
  #topbar #install-btn { margin-left: 8px; padding: 4px 8px; }
  #topbar #currency-select { margin-left: 6px; width: 56px; font-size: 11px; padding: 4px 18px 4px 6px; background-position: right 5px center; }
  /* replay controls sit above the ticker so they never cover the fight HUD */
  #replay-badge { top: auto; bottom: calc(132px + var(--safe-b)); }
  #replay-exit { top: auto; bottom: calc(84px + var(--safe-b)); background: var(--panel); backdrop-filter: blur(8px); padding: 9px 16px; }
  #offline-notice, #update-toast { top: calc(150px + env(safe-area-inset-top, 0px)); max-width: calc(100vw - 24px); }
  #announce { top: calc(40px + env(safe-area-inset-top, 0px)); font-size: 13px; padding: 6px 12px; }
  body.announced #bet-timer { top: calc(48px + var(--announce-h, 32px) + env(safe-area-inset-top, 0px)); }
  body.announced #fight-hud { top: calc(46px + var(--announce-h, 32px) + env(safe-area-inset-top, 0px)); }
  body.announced #history.open { top: calc(54px + var(--announce-h, 32px) + env(safe-area-inset-top, 0px)); }
  body.announced #replay-badge { top: auto; }
  #topbar > * { white-space: nowrap; }
  #topbar .who { margin-left: 6px; font-size: 11px; gap: 5px; }
  #topbar .who #viewers { display: none; }
  /* live mode on a phone: the arena signage already says the name; the player's name lives in the wallet sheet */
  body.live #topbar .brand, body.live #topbar #name-btn, body.live #topbar .match { display: none; }
  body.live #topbar { justify-content: flex-end; gap: 10px; }
  body.live #topbar .bank { margin-right: auto; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.live #topbar .bank .lbl { display: none; }
  body.live #topbar .bank b { font-size: 14px; margin-left: 0; }
  #topbar .bank .fiat-inline { font-size: 11px; margin-left: 3px; }
  #topbar #sound-btn { margin-left: 6px; }
  #topbar #wallet-btn { padding: 4px 7px; }

  #fight-hud { top: calc(44px + env(safe-area-inset-top, 0px)); gap: 10px; padding: 0 12px; }
  #fight-hud .fighter { flex: 1; width: auto; }
  #fight-hud .fname { font-size: 12px; }
  #fight-hud .mybet { font-size: 11px; padding: 3px 8px; gap: 6px; margin-top: 4px; }
  #fight-hud .mybet b { font-size: 12px; }
  #fight-hud .mybet { flex-wrap: wrap; max-width: 100%; row-gap: 0; }
  #fight-hud .mybet > * { white-space: nowrap; }
  #fight-hud .mybet .fiat-inline { margin-left: 0; }
  #topbar .bank .fiat-inline { font-size: 13px; margin-left: 4px; }
  #result-panel #result-pay .fiat-inline { font-size: 26px; }
  #fight-hud .vs { display: none; }
  #fight-hud { flex-wrap: wrap; }
  #hud-fight { display: block; flex-basis: 100%; text-align: center; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); margin-top: 2px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

  #ticker { font-size: 13px; padding: 8px 12px; bottom: calc(14px + var(--safe-b)); max-width: 94vw; }
  body.betting #ticker { display: none; }
  /* the ledger panel is hidden on phones; tapping the chip count opens it as a sheet */
  #history { display: none; }
  #history.open { display: block; position: fixed; top: calc(52px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; width: auto; max-height: 60vh; overflow: auto; z-index: 26; }
  #topbar .bank { pointer-events: auto; cursor: pointer; }
  #topbar .bank b { text-decoration: underline dotted rgba(245,196,81,0.6); text-underline-offset: 3px; }

  #bet-timer { top: calc(46px + env(safe-area-inset-top, 0px)); font-size: 13px; padding: 5px 12px; width: max-content; max-width: calc(100vw - 24px); white-space: normal; text-align: center; line-height: 1.35; border-radius: 14px; }
  #bet-timer b { font-size: 16px; }
  #bet-timer .fight { display: inline; }
  /* while the pit waits for bettors the explanation needs two lines: the fight label gets its own */
  #bet-timer.status .fight { display: block; border-right: 0; margin: 0; padding: 0; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
  #bet-timer.status { font-size: 12px; }

  /* betting panel: two compact cards side by side, nothing to scroll */
  #bet-panel { padding: 10px 10px 0; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; }
  #bet-panel header { display: none; }
  #bet-panel .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { padding: 8px 9px 9px; border-radius: 12px; min-width: 0; overflow: hidden; }
  .card h3.side { font-size: 10px; margin-bottom: 2px; display: flex; justify-content: space-between; align-items: center; }
  .stats-toggle { display: inline; background: none; color: var(--gold); padding: 2px 0 2px 8px; font-size: 10px; letter-spacing: 0.1em; font-weight: 700; }
  /* compact cards: the breed line and the stars fold away so the pit stays in view */
  #bet-panel.compact .card ul.stats, #bet-panel.compact .card .rmeta { display: none; }
  #bet-panel.compact .card .rname { margin-bottom: 6px; }
  #bet-panel.compact .card .pool { gap: 4px 14px; margin-bottom: 8px; }
  #bet-panel.compact .card .pool small { white-space: nowrap; }
  #bet-panel.compact .stack-area { min-height: 50px; }
  #bet-panel.compact .pile, #bet-panel.compact .stack { min-height: 50px; height: 50px; }
  .card .rname { font-size: 15px; line-height: 1.15; }
  .card .rmeta { font-size: 11px; line-height: 1.3; margin-bottom: 6px; }
  .card ul.stats { grid-template-columns: 1fr; gap: 2px; font-size: 11px; margin-bottom: 8px; }
  .card ul.stats li { align-items: center; }
  .card ul.stats li b { font-size: 15px; letter-spacing: 0.06em; }
  .card .pool { flex-wrap: wrap; gap: 6px 12px; font-size: 12px; margin-bottom: 8px; }
  .card .pool small { font-size: 10px; }
  .card .pool span { font-size: 14px; }
  .card .tag { margin-left: 0; flex-basis: 100%; text-align: center; font-size: 10px; padding: 3px 6px; }
  .card .bet-btn { padding: 11px 8px; font-size: 14px; }
  #bet-panel > * { flex: none; }
  .pool-bar { height: 16px; margin: 10px 0 8px; }
  .pool-bar span { line-height: 16px; font-size: 10px; }
  .wager { grid-template-columns: 1fr; gap: 8px; }
  .tray { gap: 6px; justify-content: space-between; }
  .chip, .stack .chip { width: 46px; height: 46px; font-size: 12px; box-shadow: inset 0 0 0 4px rgba(255,255,255,0.9), inset 0 0 0 6px var(--c), inset 0 0 0 7px rgba(255,255,255,0.35), 0 2px 3px rgba(0,0,0,0.55); }
  .chip::before { -webkit-mask: radial-gradient(circle, transparent 18px, #000 18.5px); mask: radial-gradient(circle, transparent 18px, #000 18.5px); }
  .tray .allin { padding: 8px 8px; font-size: 11px; }
  .stack-area { min-height: 58px; gap: 8px; }
  .stack { min-width: 54px; min-height: 58px; gap: 6px; }
  .pile { width: 46px; height: 58px; }
  .pile .chip { bottom: calc(var(--i, 0) * 3px); }
  .stack .empty { width: 120px; height: 50px; font-size: 10px; }
  .stack-info { flex-direction: row; align-items: center; gap: 10px; flex: 1; justify-content: space-between; }
  .card .rmeta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card .rname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stack-info .total b { font-size: 19px; }
  .wager .current { font-size: 12px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
  #need-login .text { flex-basis: 100%; min-width: 0; }
  #need-login button { flex: 1; }
  #no-chips { gap: 10px; }

  /* the wallet is a bottom sheet on phones: full width, the header stays while it scrolls */
  #wallet-panel { padding: 0; align-items: end; background: rgba(0,0,0,0.7); }
  #wallet-panel .sheet { width: 100%; max-height: calc(100% - 36px - env(safe-area-inset-top, 0px)); border-radius: 18px 18px 0 0; border-bottom: 0; padding: 0 16px calc(20px + var(--safe-b)); }
  #wallet-panel header { position: sticky; top: 0; z-index: 1; margin: 0 -16px 6px; padding: 14px 16px 8px; background: rgba(16, 18, 26, 0.97); }
  #wallet-panel .qr { width: 104px; height: 104px; }
  #auth-panel .sheet { padding: 16px; }
  .card ul.stats { margin-bottom: 6px; }
  .card .pool { margin-bottom: 6px; }
  .pool-bar { margin: 8px 0 6px; }
  #bet-confirm { padding: 8px 10px; gap: 8px; }
  #bet-confirm-text { font-size: 13px; }
  #bet-confirm button { padding: 9px 12px; font-size: 13px; }
  #bet-panel footer { margin: 8px -10px 0; padding: 8px 10px calc(8px + var(--safe-b)); border-top: 1px solid var(--line); gap: 8px; }
  #bet-panel footer button { flex: 1; padding: 12px 8px; font-size: 14px; }

  #result-panel { padding: 18px 16px calc(18px + var(--safe-b)); }
  #result-panel h2 { font-size: 20px; }
  #result-panel #result-pay { font-size: 17px; }
  #result-panel button { padding: 12px 14px; }
}

@media (max-width: 360px) {
  #bet-panel .cards { grid-template-columns: 1fr; }
}

@media (max-width: 720px) and (max-height: 700px) { #bet-panel { zoom: 0.85; } }
@media (max-width: 720px) and (max-height: 600px) { #bet-panel { zoom: 0.72; } }