/* Pixel arcade theme. Geometry and interaction remain in styles.css / app.js. */
.app.game-view { height:100dvh; min-height:0; display:flex; flex-direction:column; padding-bottom:calc(var(--tabbar-h) + 2px + env(safe-area-inset-bottom)); }
.game-view > .header { flex-shrink:0; }
.game-view > main { flex:1; min-height:0; display:flex; flex-direction:column; }
.game-view #screen-game.active { display:flex; flex-direction:column; flex:1; min-height:0; }
.game-view .stats-row,.game-view .bottom-panel { flex-shrink:0; }
.game-view .field-outer { flex:1; min-height:0; overflow:hidden; }
.game-view .game-field { height:100%; justify-content:flex-end; }
.level-row[hidden] { display:none; }
@media(max-height:650px) {
  .game-view .stats-row { padding-block:7px; }
  .game-view .bottom-panel { gap:7px; padding-bottom:7px; }
  .game-view .bet-row { padding-block:5px; }
}
:root {
  --gold:#ffd16a; --amber:#eea52d; --dark:#102238; --darker:#071321;
  --green:#65e9cd; --red:#ff7383; --stone:#47749b;
  --text:#e4f0fc; --muted:#91abc5; --faint:#6f8ca8;
  --panel:#102238; --line:#294764; --tabbar-h:70px;
}
html,body { background:#071321; font-family:var(--font-app); }
body::before { background:radial-gradient(ellipse at 50% 15%,#142c45 0%,transparent 65%); }
body::after { background:none; }
.app { max-width:480px; min-height:100dvh; border-inline:1px solid #172d43; background:rgba(7,19,33,.86); }
.header { padding:8px 16px; }
.logo { font-family:var(--font-app); font-size:40px; font-weight:1000; letter-spacing:5px; line-height:1; color:#ffce61; background:none; -webkit-text-fill-color:initial; filter:none; text-shadow:0 3px #ad6b25,3px 0 #ad6b25,3px 6px #402e24; }
.logo-sub { margin-top:2px; padding:0; color:#78d9ee; font:700 8px var(--font-app); letter-spacing:2px; }
.logo { width:90px; height:30px; font-size:0; image-rendering:pixelated; text-shadow:none; }
.balance-pill { border:1px solid #345672; border-radius:3px; color:#f1f6ff; background:#0e2033; padding:5px 6px 5px 9px; font-size:12px; gap:5px; min-height:34px; box-shadow:inset 0 -2px #091521; }
.balance-pill .plus { border-radius:0; color:#8eeaff; background:#19344b; border:1px solid #426580; width:20px; height:20px; font-size:13px; }
.game-field { padding:0 28px 0 17px; }
.level-row { gap:7px; padding:3px 0; }
.level-num { order:-1; width:25px; height:26px; display:grid; place-items:center; font:700 12px var(--font-app); color:#96b4ce; border:1px solid #38526a; background:#102137; box-shadow:inset 0 -2px #071321; }
.level-row.active .level-num { color:#87f2ff; border-color:#6de6fc; box-shadow:0 0 9px #6de6fc44; }
.level-row.future { opacity:1; }
.cells { gap:9px; min-width:0; }
.cell { height:48px; padding:3px 9px; border-radius:3px; border-width:2px; min-width:0; text-align:left; box-shadow:inset 0 3px #ffffff12,inset 0 -4px #00000033,2px 2px #030b14; }
.cell.normal { border-color:#3d5b75; background:repeating-linear-gradient(0deg,transparent 0 13px,#ffffff03 13px 15px),#20364c; }
.cell.gold { border-color:#816530; background:repeating-linear-gradient(0deg,transparent 0 13px,#ffffff03 13px 15px),#423922; }
.cell-icon-wrap { width:25px; height:28px; flex-shrink:0; }
.pixel-gem { width:32px; height:32px; image-rendering:pixelated; flex-shrink:0; }
.cell-info { gap:1px; }
.cell-label { font-size:8px; letter-spacing:.2px; opacity:1; }
.cell.normal .cell-label { color:#b2c9e0; }
.cell.gold .cell-label { color:#dcc18b; }
.cell-mult { font-size:15px; }
.cell-prob { opacity:1; color:#a3b8cb; font-size:9px; }
.cell.gold .cell-prob { color:#c5b995; }
.cell-mult .step-l { opacity:.8; font-size:8px; }
.level-divider { display:none; }
.level-row.active .cell.normal { background:#143f56; border-color:#7aeaff; box-shadow:inset 0 0 0 2px #27748a,0 0 12px #68e6fc44; }
.level-row.active .cell.gold { background:#62431c; border-color:#ffd376; box-shadow:inset 0 0 0 2px #a37735,0 0 12px #ffc15e44; }
.cell:disabled { cursor:default; }
.char img { display:block; width:42px; height:60px; object-fit:contain; image-rendering:pixelated; }
#human,#dino { font-size:0; filter:drop-shadow(2px 3px #030b14); }
#dino img { width:58px; height:66px; }
.stats-row { gap:0; padding:14px 16px 10px; }
.stat-pill { border:0; border-right:1px solid #29435b; border-radius:0; padding:2px 8px; background:none; }
.stat-pill:last-child { border:0; }
.s-label { color:#97b4ce; font-size:10px; letter-spacing:.3px; text-transform:none; }
.s-value { font:800 19px var(--font-app); margin-top:5px; }
.bottom-panel { padding:0 16px 14px; gap:12px; }
.bet-row { padding:10px; border:1px solid #2e4f6d; background:#0a192b; }
.bet-label { text-transform:none; color:#9fbcd6; }
.chip { border-radius:2px; border-color:#355471; background:#142a42; color:#b9cee1; box-shadow:inset 0 -3px #00000025; }
.chip.active { border-color:#78e8ff; background:#153e56; color:#a2f1ff; }
.bet-chips .chip { min-height:36px; font-size:12px; }
.btn-primary,.btn-cashout,.btn-ghost { border-radius:2px; min-height:46px; font-size:16px; letter-spacing:0; }
.btn-primary { color:#112535; background:#80e9f6; border:2px solid #b0f5ff; box-shadow:inset 0 -4px #42aebf,3px 3px #020c17; }
.btn-primary:disabled { opacity:.55; }
.btn-cashout { background:#173f3c; border-color:#65e9cd; box-shadow:inset 0 -4px #0a2628; }
.btn-ghost { border-color:#456480; color:#b6d1e9; background:#11273c; }
.card,.stat-card,.method,.row,.hero-num,.pl,.chart-card,.rcard { border-radius:3px; border-color:#2a4662; background:#102238; box-shadow:inset 0 2px #ffffff04; }
.title { padding-top:12px; color:#d7ebfc; font-size:23px; }
.field-label { color:#98b2cb; }
.hero { border-left:3px solid #ffce68; background:linear-gradient(110deg,#28342f,#102238); }
.amount-input,.ref-link,.search,.select,.seg,.seg button,.avatar,.chart-tip,.toggle-row button { border-radius:2px; }
.amount-input,.search { border-color:#365572; background:#091a2b; }
.amount-input input { color:#d6f6ff; }
.seg { border:1px solid #2a4662; padding:4px; }
.seg button { min-height:40px; }
.seg button.active { color:#8deaff; background:#1a3b53; box-shadow:inset 0 -2px #80e9f6; }
.ref-link { color:#87dcec; }
.avatar { background-color:#e8bc61; box-shadow:3px 3px #35516a; }
.empty { color:#91abc5; }
.method { min-height:72px; }
.method.selected { border-color:#7de6f6; background:#16364b; }
.method:disabled { opacity:.6; }
.tabbar { left:50%; right:auto; transform:translateX(-50%); width:100%; max-width:480px; background:#091827; border-top:2px solid #294961; backdrop-filter:none; padding-inline:8px; }
.tabbar button { position:relative; max-width:none; min-width:0; color:#819eb8; font-size:10px; gap:5px; }
.tabbar button span { filter:none; font-size:0; width:23px; height:23px; display:block; background:currentColor; mask:var(--nav-icon) center/contain no-repeat; }
.tabbar button.active { color:#80eaff; background:linear-gradient(#79e5ff0c,transparent); }
.tabbar button.active::after { content:''; position:absolute; bottom:5px; width:28px; height:3px; background:#80eaff; box-shadow:0 0 8px #80eaff66; }
.tabbar [data-tab=game] { --nav-icon:url('assets/nav-game.svg'); }
.tabbar [data-tab=ref] { --nav-icon:url('assets/islands/nav-friends.svg'); }
.tabbar [data-tab=cases] { --nav-icon:url('assets/nav-cases.svg'); }
.tabbar [data-tab=profile] { --nav-icon:url('assets/islands/nav-profile.svg'); }
.tabbar [data-tab=admin] { --nav-icon:url('assets/nav-admin.svg'); }
.sheet { background:#0b1c2e; border-color:#34516b; }
.sheet-head { background:#102238; }
.filters { flex-wrap:wrap; }
.filters .select { min-width:130px; min-height:40px; }
.select { color:#c0d8ed; border-color:#355471; background:#142a42; }
.row-details { border-radius:0; }
.chart-card .axis { fill:#a1bad0; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #8fefff; outline-offset:3px; }
button:not(:disabled):active { filter:brightness(1.12); }
@media(max-width:360px) {
  .header { padding-inline:16px; } .game-field { padding-right:16px; padding-left:10px; }
  .cell { padding-inline:5px; } .cell-icon-wrap { width:24px; } .pixel-gem { width:26px; height:26px; }
  .cells { gap:6px; } .cell-mult { font-size:13px; } .bet-row { gap:6px; padding:7px; }
  .bet-chips { gap:4px; } .bet-label { font-size:11px; } .s-value { font-size:16px; }
  .action-row { gap:6px; } .btn-primary.sm { padding-inline:10px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
}

/* Compact game controls leave more height for the ladder. */
#screen-game .stats-row { padding:6px 16px; }
#screen-game .stat-pill { padding:0 6px; min-width:0; }
#screen-game .s-label { font-size:9px; line-height:13px; }
#screen-game .s-value { font-size:16px; line-height:22px; height:22px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#screen-game .bottom-panel { padding:0 16px 7px; gap:7px; }
#screen-game .bet-row { padding:4px 7px; gap:7px; }
#screen-game .bet-label { font-size:11px; }
#screen-game .bet-chips .chip { min-height:32px; padding:4px 0; font-size:11px; }
#screen-game .btn-primary,#screen-game .btn-cashout { height:42px; min-height:42px; font-size:14px; }
.custom-bet { display:flex; align-items:center; gap:5px; flex:0 0 100px; min-width:0; }
.custom-bet span { font-size:9px; color:var(--muted); }
.custom-bet input { width:60px; min-width:0; height:32px; border:1px solid #50778e; border-radius:2px; padding:3px 4px; background:#091827; color:#d8f7ff; font:800 12px var(--font-app); }
.custom-bet input[aria-invalid=true] { border-color:var(--red); }
@media(max-width:360px) { .custom-bet { flex-basis:72px; flex-direction:column; gap:0; } .custom-bet span { display:none; } .custom-bet input { width:72px; } }

/* Illustrated result scenes reuse the game's character sprites. */
.r-emoji { margin:0 0 14px; font-size:0; }
.result-art { height:132px; width:190px; margin:auto; position:relative; display:flex; align-items:flex-end; justify-content:center; isolation:isolate; }
.result-art::before { content:''; position:absolute; inset:5px 10px 0; z-index:-1; background:radial-gradient(ellipse,#ffcc5538,transparent 70%); }
.result-art::after { content:''; position:absolute; bottom:0; left:25px; right:25px; height:7px; background:#263e50; border-top:3px solid #557183; box-shadow:0 4px #071321; z-index:-1; }
.result-character { height:128px; width:100px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(3px 4px #06111d); }
.victory .result-character { transform:translateX(-12px); }
.result-treasure { position:absolute; right:5px; bottom:2px; width:66px; height:66px; image-rendering:pixelated; }
.result-coin { position:absolute; width:24px; height:24px; image-rendering:pixelated; }
.coin-one { left:12px; top:38px; transform:rotate(-12deg); }
.coin-two { right:20px; top:12px; transform:rotate(15deg); }
.defeat::before { background:radial-gradient(ellipse,#ff526a35,transparent 70%); }
.defeat .result-character { width:125px; height:132px; }
.result-claws { position:absolute; right:9px; top:12px; width:5px; height:30px; background:#ff7383; box-shadow:10px 0 #ff7383,20px 0 #ff7383; transform:rotate(28deg); opacity:.65; z-index:-1; }
.r-amount { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; }
.result-currency { width:30px; height:30px; image-rendering:pixelated; }
@media(max-height:600px) { .result-art { height:100px; } .result-character,.defeat .result-character { height:100px; } .rcard { padding:18px; } }