/* av-dd.css — Dungeon Dice (crazy-dice-arcane.html). Loaded after av-bj.css, which supplies the shared game layout (#main, #game-area, #stage,
   #bottom-zone, #sidebar, the chip row, the main button, the log). Shell tokens and Inter only. */
#dd-table{width:min(100%,720px);flex:0 0 auto;margin:auto 0;display:flex;flex-direction:column;gap:10px}
.dd-hist{display:flex;gap:5px;min-height:24px;overflow:hidden}
.dd-pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;color:var(--av-white);background:var(--av-raised)}
#dd-dz{height:clamp(210px,38vh,340px)}
.dd-total{font-size:44px;font-weight:800;color:var(--av-white);line-height:1;min-height:46px;letter-spacing:-1px;text-align:center}
.dd-verdict{min-height:30px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--av-muted);text-align:center;line-height:1.2}
.dd-verdict.w{color:var(--av-win)}.dd-verdict.l{color:var(--av-loss)}

/* the five bands: pick one, then bet */
#dd-bands{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.dd-band{position:relative;min-height:92px;border-radius:12px;border:1px solid var(--av-line);background:var(--av-panel);color:var(--av-white);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;font:600 13px var(--av-font,Inter,system-ui,sans-serif);transition:border-color .12s,background .12s}
.dd-band:hover:not(:disabled){border-color:var(--av-accent-soft)}.dd-band:active:not(:disabled){transform:scale(.985)}
.dd-band .nm{font-size:12px;font-weight:600;color:var(--av-muted)}
.dd-band .rg{font-size:18px;font-weight:800;color:var(--av-white);letter-spacing:-.3px}
.dd-band .py{font-size:13px;font-weight:700;color:var(--av-accent-soft)}
.dd-band .ch{font-size:11px;font-weight:500;color:var(--av-muted)}
.dd-band.sel{border-color:var(--av-accent);background:var(--av-accent-bg)}
.dd-band.hit{border-color:var(--av-win);background:var(--av-win-bg)}.dd-band.hit .py{color:var(--av-win)}
.dd-band.miss{border-color:var(--av-loss)}
.dd-band:disabled{cursor:default;opacity:.6}.dd-band.hit:disabled,.dd-band.miss:disabled,.dd-band.sel:disabled{opacity:1}
/* the side bets: three switches under the bands */
#dd-sides{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dd-side{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;min-height:46px;padding:6px 8px;border-radius:10px;border:1px solid var(--av-line);background:var(--av-panel);color:var(--av-white);cursor:pointer;font:600 13px var(--av-font,Inter,system-ui,sans-serif);transition:border-color .12s,background .12s}
.dd-side .ss{font-size:11px;font-weight:500;color:var(--av-muted)}.dd-side .sp{font-size:12px;font-weight:700;color:var(--av-accent-soft)}
.dd-side:hover:not(:disabled){border-color:var(--av-accent-soft)}
.dd-side.on{border-color:var(--av-accent);background:var(--av-accent-bg)}
.dd-side.hit{border-color:var(--av-win);background:var(--av-win-bg)}.dd-side.hit .sp{color:var(--av-win)}
.dd-side.miss{border-color:var(--av-loss)}
.dd-side:disabled{cursor:default;opacity:.6}.dd-side.hit:disabled,.dd-side.miss:disabled,.dd-side.on:disabled{opacity:1}
.sm.on{border-color:var(--av-accent);color:var(--av-accent-soft);background:var(--av-accent-bg)}
#dd-controls{display:flex;flex-direction:column;gap:8px}
.dd-bet-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dd-bet-row .amt{font-size:24px;font-weight:700;color:var(--av-white)}.dd-bet-row .amt small{font-size:12px;font-weight:500;color:var(--av-muted);margin-left:4px}
.dd-tools{display:flex;gap:6px}
#dd-go{transition:transform .08s}#dd-go:active:not(:disabled){transform:scale(.985)}

@media(min-width:1280px) and (min-height:860px){#dd-table{width:min(100%,820px)}.dd-total{font-size:52px}}
@media(max-width:720px){
  #dd-table{gap:6px}
  .dd-total{display:none}
  .dd-verdict{min-height:26px;font-size:16px}
  #dd-dz{height:clamp(190px,34vh,300px)}
  #dd-bands{gap:5px}
  .dd-band{min-height:78px;padding:6px 2px;border-radius:10px}.dd-band .rg{font-size:14px}.dd-band .nm{font-size:10.5px}.dd-band .py{font-size:12px}.dd-band .ch{font-size:10px}
  #dd-sides{gap:5px}.dd-side{min-height:40px;padding:4px 4px;gap:1px 5px;flex-direction:column}.dd-side .ss{display:none}
  #dd-controls{gap:6px}
  #dd-controls .rule{display:none}
  #stage:has(#dd-table){padding-top:6px}
}
@media(max-width:720px) and (max-height:720px){
  #dd-dz{height:clamp(130px,22vh,165px)}.dd-band{min-height:64px}.dd-side{min-height:34px}.dd-verdict{min-height:22px;font-size:15px}
  #stage:has(#dd-table){padding-top:6px}
  #bottom-zone:has(#dd-controls){padding-top:6px;padding-bottom:8px}
}