/* Structure only; a game's own stylesheet gives it its look. Colours come from --pt-* variables. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--pt-bg,#050b24);color:var(--pt-text,#e9fbff);font-family:var(--pt-font,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans JP",sans-serif);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
.pt-root{position:fixed;left:0;right:0;top:0;bottom:64px;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding:8px 12px 4px}
.pt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px}
.pt-title{margin:0;font-size:20px;line-height:1.1}
.pt-rules-btn{margin-left:auto}
.pt-btn{min-width:44px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--pt-line,rgba(255,255,255,.25));background:var(--pt-panel,rgba(8,30,50,.7))}
.pt-demo{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--pt-line,rgba(255,255,255,.25))}
.pt-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.pt-rows{display:flex;align-items:center;gap:6px}
.pt-label{font-size:13px;opacity:.8;margin-right:2px}
.pt-step{width:44px;height:44px;border-radius:50%;border:1px solid var(--pt-line,rgba(255,255,255,.25));background:var(--pt-panel,rgba(8,30,50,.7));font-size:22px;line-height:1}
.pt-step:disabled{opacity:.35}
.pt-rows-value{min-width:2ch;text-align:center;font-size:20px;font-weight:700}
.pt-risk{display:flex;gap:6px}
.pt-risk-btn{min-width:64px;min-height:44px;padding:0 10px;border-radius:12px;border:1px solid var(--pt-line,rgba(255,255,255,.25));background:var(--pt-panel,rgba(8,30,50,.7));font-size:14px}
.pt-risk-btn.is-active{background:var(--pt-accent,#17a3b8);color:var(--pt-accent-ink,#031018);border-color:transparent;font-weight:700}
.pt-risk-btn.is-unavailable{opacity:.4;text-decoration:line-through}
.pt-risk-btn:disabled:not(.is-active){opacity:.45}
.pt-stage{position:relative;flex:1;min-height:0}
.pt-canvas{position:absolute;inset:0;display:block}
.pt-result{position:absolute;left:0;right:0;top:6%;display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;transition:opacity .2s;text-align:center}
.pt-result.is-on{opacity:1}
.pt-result-x{font-size:30px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.pt-result-amount{font-size:14px;opacity:.9;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.pt-result.is-celebrate .pt-result-x{animation:pt-pop .5s ease-out}
.pt-toast{position:absolute;left:8px;right:8px;bottom:8px;padding:10px 12px;border-radius:12px;background:rgba(120,20,40,.9);font-size:14px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}
.pt-toast.is-on{opacity:1}
.pt-dialog{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,6,20,.78)}
.pt-dialog[hidden]{display:none}
.pt-dialog-card{max-width:520px;max-height:100%;overflow:auto;padding:18px;border-radius:16px;background:var(--pt-card,#0b2a40);border:1px solid var(--pt-line,rgba(255,255,255,.25));font-size:14px;line-height:1.45}
.pt-dialog-card h2{margin:0 0 8px;font-size:18px}
.pt-rules-list{padding-left:20px;margin:0 0 12px}
.pt-pockets{width:100%;border-collapse:collapse;margin-bottom:12px;font-size:13px}
.pt-pockets caption{text-align:left;font-weight:700;padding-bottom:4px}
.pt-pockets th,.pt-pockets td{padding:3px 6px;text-align:left;border-bottom:1px solid rgba(255,255,255,.1)}
.pt-bar{position:fixed;left:0;right:0;bottom:0;height:64px;z-index:20;display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 10px;background:var(--pt-bar,rgba(3,12,28,.96));border-top:1px solid var(--pt-line,rgba(255,255,255,.2))}
.pt-bar-cell{display:flex;flex-direction:column;align-items:center;min-width:56px}
.pt-bar-label{font-size:12px;opacity:.7}
.pt-bar-value{font-size:15px;white-space:nowrap}
.pt-bar-bet{display:flex;align-items:center;gap:4px}
.pt-bar-step{width:44px;height:44px;border-radius:50%;border:1px solid var(--pt-line,rgba(255,255,255,.25));background:var(--pt-panel,rgba(8,30,50,.7));font-size:20px}
.pt-bar-step:disabled{opacity:.35}
.pt-bar-play{min-width:96px;height:48px;border-radius:24px;border:0;background:var(--pt-accent,#17a3b8);color:var(--pt-accent-ink,#031018);font-weight:800;font-size:16px;padding:0 16px}
.pt-bar-play:disabled{opacity:.5}
.pt-bar-sound{width:44px;height:44px;border-radius:50%;border:1px solid var(--pt-line,rgba(255,255,255,.25));background:transparent;font-size:18px}
.pt-bar-sound.is-off{opacity:.4}
.pt-bar.is-replay .pt-bar-bet,.pt-bar.is-replay .pt-bar-play{display:none}
.pt-muted{opacity:.6}
@keyframes pt-pop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pt-result.is-celebrate .pt-result-x{animation:none}}
@media (max-width:520px){
.pt-bar{height:auto;display:grid;grid-template-columns:1fr 1fr auto;grid-template-areas:"bal win snd" "bet bet play";gap:4px 10px;padding:6px 12px 8px;align-items:center}
.pt-area-bal{grid-area:bal;align-items:flex-start}.pt-area-win{grid-area:win}.pt-area-snd{grid-area:snd}.pt-area-bet{grid-area:bet;align-items:flex-start;flex-direction:row;gap:8px}.pt-area-play{grid-area:play}
.pt-area-bet .pt-bar-label{align-self:center}.pt-bar-play{min-width:112px}}
/* RGS (html.asgf-menu, client/menu.js): every control is on the panel (Henrik and Jonny, 8 Nov 2026); rules is its INFO */
html.asgf-menu .pt-rules-btn{visibility:hidden}
/* A short phone held upright (browser bars and the operator's menu on screen, 390×560, 360×480; 9 Nov 2026): rows and
   risk share one line so the board keeps the height, and the board never runs under the panel (no 200 px floor). */
@media (max-width:600px) and (max-height:700px){.pt-root{gap:6px}.pt-controls{flex-wrap:nowrap;gap:6px}.pt-risk{gap:4px}.pt-risk-btn{min-width:44px;padding:0 8px}}
@media (max-width:380px) and (max-height:700px){.pt-label{display:none}}