/* Game controls use the same quiet palette, with distinct tabletop surfaces. */
.tool-help { border:1px solid var(--line); border-radius:12px; background:#151c2d; min-width:0; }
.tool-help summary { cursor:pointer; padding:12px 16px; min-height:44px; color:#c8b3e4; font-size:13px; }
.tool-help[open] { flex-basis:100%; }
.tool-help p { padding:0 16px 16px; color:#bcc9dc; line-height:1.8; font-size:13px; }
.resume-notice { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 14px; border:1px solid #49665f; border-radius:12px; background:#1b302f; margin-bottom:14px; color:#c6e6d9; font-size:13px; }
.resume-notice span { flex:1 1 150px; }
.resume-notice button,.shared-roster button,.motion-control button,.match-summary button { min-height:44px; padding:10px 13px; border:1px solid #656081; border-radius:9px; background:#2b2b43; color:#e4dbf5; font:inherit; font-size:12px; cursor:pointer; }
.resume-notice button:first-of-type { background:#2e5148; border-color:#709c89; color:#e3fff1; }
.shared-roster { display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line); padding-top:12px; }
.shared-roster p { flex-basis:100%; color:#aebed4; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.motion-control { padding:16px; border:1px solid var(--line); border-radius:12px; background:#141c2b; }
.motion-control p { margin-top:10px; font-size:12px; line-height:1.8; color:#aebed4; }
.motion-control button[aria-pressed="true"] { background:#29433d; border-color:#659f88; }
.match-summary { padding:20px; border:1px solid #79856a; border-radius:16px; background:linear-gradient(140deg,#30372c,#1e2831); animation:matchReveal .3s ease-out; }
.match-summary h3 { font-size:13px; color:#cad5b4; margin-bottom:10px; }
.match-outcome { color:#edf4dc; font-size:18px; line-height:1.6; overflow-wrap:anywhere; }
.match-summary pre { white-space:pre-wrap; overflow-wrap:anywhere; color:#cad9cf; font:inherit; font-size:14px; line-height:1.9; margin:14px 0; }
.match-summary button { width:100%; background:#394534; border-color:#79896c; }
.page .resume-notice[hidden],.page .match-summary[hidden] { display:none; }
@keyframes matchReveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .match-summary { animation:none; } }
@media(max-width:700px) { .match-summary { width:100%; order:3; } .motion-control { width:100%; order:4; } }
@media(max-width:600px) { .tool-help { flex:1; } .tool-help[open] { flex-basis:100%; } .resume-notice { padding:10px; } .match-summary { padding:16px; } }
.play-toolbar { display:flex; align-items:flex-start; gap:12px; margin:0 0 18px; flex-wrap:wrap; }
.is-running .wheel-pointer { animation:none; }.is-running .wheel-pointer.pointer-hit { animation:pointerTick .16s ease; }
.play-mode-switch { display:inline-flex; flex-wrap:wrap; padding:4px; border:1px solid var(--line); border-radius:12px; background:#101727; gap:4px; }
.play-mode-switch button { border:0; border-radius:8px; padding:10px 15px; min-height:42px; background:transparent; color:#98a6be; font-size:13px; }
.play-mode-switch button[aria-pressed="true"] { background:#3e3159; color:#f0e4ff; box-shadow:inset 0 0 0 1px #8970ad50; }
.play-settings { flex:1; min-width:200px; border:1px solid var(--line); border-radius:12px; background:#151c2d; }
.play-settings[hidden], .game-hud[hidden], .game-record[hidden] { display:none; }
.player-edit[hidden] { display:none; }
.player-edit,.player-defaults { min-height:44px; padding:10px 14px; border:1px solid #8970ad; border-radius:10px; color:#f0e4ff; background:#3e3159; font:inherit; font-size:13px; cursor:pointer; }
.player-defaults { justify-self:start; background:#20283a; border-color:#58627d; }
.player-name-note { color:#aebed4; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.bottle-players .player-name-note { margin:12px 0; }
.player-edit:focus-visible,.player-defaults:focus-visible { outline:2px solid #dfc8ff; outline-offset:3px; }
.player-edit:hover:not(:disabled),.player-defaults:hover:not(:disabled) { background:#504065; }
.player-editor-count { color:#cec0e2; font-size:12px; margin:4px 0; }
.player-editor-rows { display:grid; gap:10px; }
.player-editor-row { display:flex; gap:8px; align-items:flex-end; min-width:0; }
.player-editor-row label { flex:1; min-width:0; display:grid; gap:6px; }
.player-editor-row input { min-height:44px; }
.player-add,.player-remove,.player-cancel { min-height:44px; border:1px solid #58627d; border-radius:9px; background:#20283a; color:#e1d8ef; padding:9px 12px; font:inherit; font-size:13px; cursor:pointer; }
.player-add { justify-self:start; border-style:dashed; }
.player-remove { flex-shrink:0; color:#e6bfc9; }
.player-bulk { border-top:1px solid var(--line); padding-top:4px; }
.player-bulk>summary { padding:10px 0; color:#c5b1e0; }
.player-bulk>label { display:block; margin:6px 0; }
.player-bulk textarea { min-height:130px; }
.player-editor-actions { display:flex; gap:8px; flex-wrap:wrap; }
.player-editor-actions .play-new { flex:1 1 170px; min-height:44px; }
.player-editor-error { color:#ffc6cd; background:#482733; border:1px solid #935368; border-radius:8px; padding:10px; font-size:13px; line-height:1.7; }
.player-editor-rows[hidden],.player-add[hidden],.player-editor-error[hidden] { display:none; }
.player-add:focus-visible,.player-remove:focus-visible,.player-cancel:focus-visible { outline:2px solid #dfc8ff; outline-offset:3px; }
@media(max-width:700px) { .player-editor-row input,.player-bulk textarea { font-size:16px; } }
.play-settings summary,.compact-config>summary,.game-record>summary { cursor:pointer; padding:14px 16px; font-size:13px; color:#bec9dc; min-height:44px; }
.play-settings-body { padding:0 16px 16px; display:grid; gap:10px; }
.play-settings-body label { font-size:12px; color:#b9c4d7; }
.play-settings-body textarea,.play-settings-body input,.play-settings-body select { width:100%; min-width:0; padding:10px 12px; border:1px solid #414b64; border-radius:9px; background:#0f1626; color:#edf1fa; font:inherit; font-size:14px; }
.play-settings-body textarea { resize:vertical; line-height:1.7; }
.play-settings-body.player-editor-form { max-height:min(65dvh,660px); overflow:auto; overscroll-behavior:contain; scroll-padding:16px 0 96px; }
.player-editor-form .player-editor-actions { position:sticky; bottom:-16px; z-index:3; padding:12px 0 max(12px,env(safe-area-inset-bottom)); background:#151c2d; border-top:1px solid #58627d; box-shadow:0 -8px 18px #151c2de6; }
.player-editor-form [aria-invalid="true"] { border-color:#f397ab; box-shadow:0 0 0 1px #f397ab; }
@media(max-width:700px) { .play-settings-body.player-editor-form input,.play-settings-body.player-editor-form textarea,.play-settings-body.player-editor-form select { font-size:16px; } }
.play-help { color:#9eacc2; font-size:12px; line-height:1.7; }
.play-new,.game-reset,.game-task-actions button,.game-skip { border:1px solid #67547e; color:#e5d6fa; background:#342946; border-radius:8px; min-height:40px; padding:9px 13px; font-size:12px; }
.game-hud { position:relative; padding:14px 16px; background:linear-gradient(110deg,#302842b0,#1b253b80); border:1px solid #67547d70; border-radius:12px; margin-bottom:16px; }
.game-eyebrow { color:#ad98cc; font-size:10px; letter-spacing:.6px; margin-bottom:5px; }
.game-hud h3 { font-size:18px; color:#efdefe; padding-right:76px; overflow-wrap:anywhere; line-height:1.5; }
.game-reset { position:absolute; right:10px; top:12px; background:#1f2638; padding:5px 8px; font-size:11px; }
.game-scores { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:12px; }
.game-player { display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid #49516b70; border-radius:9px; min-width:0; background:#111c2a90; font-size:12px; }
.game-player.current { background:#453759; border-color:#b89ddb; }.avatar { width:23px; height:23px; display:grid; place-items:center; background:#737e9f33; border-radius:50%; flex-shrink:0; font-size:10px; }.player-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.game-player b { margin-left:auto; color:#d3ebde; font-variant-numeric:tabular-nums; }
.game-caption { font-size:11px; color:#a8b6c9; margin-top:9px; }
.game-task-actions { display:flex; gap:8px; margin-top:12px; }.game-task-actions button { flex:1; }.game-task { color:#e4edf6; font-size:15px; line-height:1.85; margin-top:12px; }.game-skip { margin-top:10px; background:transparent; }
.game-record,.compact-config { border:1px solid var(--line); border-radius:12px; background:#141c2b; min-width:0; }
.game-record ol { padding:0 20px 16px 36px; max-height:260px; overflow:auto; }.game-record li { color:#b9c6d9; font-size:12px; line-height:1.8; padding:5px 0; overflow-wrap:anywhere; }
.game-record>ol.round-groups { list-style:none; padding:0 12px 12px; max-height:460px; }
.round-record { border:1px solid #414b64; border-radius:10px; background:#111a2b; }
.round-record>summary { cursor:pointer; min-height:44px; padding:10px 12px; color:#e0d2f3; font-size:13px; }
.round-record .round-meta,.round-record .round-roster,.round-record .round-score { margin:0 12px 9px; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.round-record .round-meta { color:#95a5bd; }.round-record .round-score { color:#d5eadb; }
.round-record>ol { max-height:none; overflow:visible; padding:0 16px 12px 32px; }
.compact-config .random-config,.compact-config .bottle-players { border:0; background:transparent; padding-top:4px; }
.game-mode .play-surface { border-color:#65547e; }.game-mode .tool-statebar { margin-bottom:10px; }
#card-page .play-surface { background:radial-gradient(ellipse at 50% 100%,#3d3355 0%,#1b2036 75%); }
#card-page .cards-container { max-width:460px; }.card-wrapper { padding-bottom:135%; }.card-wrapper:hover .card:not(.flipped) { transform:translateY(-5px) rotateZ(-1deg); }.card:disabled { opacity:1; cursor:default; }.card.flipped .card-back { border-color:#b8a0da; box-shadow:inset 0 0 0 4px #b8a0da12,0 8px 18px #060c1840; }.card-back .card-order { max-width:90%; overflow-wrap:anywhere; text-align:center; }
#bomb-page .bomb-grid { max-width:420px; }.bomb-cell.revealed { box-shadow:inset 0 2px 5px #0003; }.bomb-cell:not(:disabled):focus-visible { outline:2px solid #c8b0e8; outline-offset:3px; }
.page .card:disabled { opacity:1; }
#dice-page .dice-container { border-bottom:1px solid #62677955; background:radial-gradient(ellipse at 50% 85%,#4a647435,transparent 65%); }
#coin-page .coin-3d-container { position:relative; background:transparent; isolation:isolate; }
.coin-3d-container canvas { position:relative; z-index:1; }
.coin-3d-container::before { content:''; position:absolute; bottom:8%; left:50%; width:104px; height:16px; border-radius:50%; background:#020611; opacity:var(--coin-shadow-opacity,.3); transform:translateX(-50%) scale(var(--coin-shadow-scale,1)); filter:blur(4px); pointer-events:none; }
.coin-3d-container::after { content:''; position:absolute; bottom:8%; left:50%; width:110px; height:20px; border:1px solid #d9b772; border-radius:50%; opacity:0; pointer-events:none; }
.coin-3d-container.coin-landed::after { animation:coinLandingRing .44s ease-out both; }
@keyframes coinLandingRing { from { opacity:.65; transform:translateX(-50%) scale(.6); } to { opacity:0; transform:translateX(-50%) scale(1.65); } }
.bottle-container { isolation:isolate; }
.bottle-container::before { content:''; position:absolute; inset:9%; border-radius:50%; background:conic-gradient(from 0deg,transparent 0deg 265deg,#b09acf12 310deg,#c6afe94d 358deg,transparent 360deg); transform:rotate(var(--spin-angle,0deg)); opacity:0; pointer-events:none; z-index:-1; }
.bottle-container.is-spinning::before { opacity:var(--spin-energy,0); }
.bottle-container::after { content:''; position:absolute; inset:14%; border:1px solid #c1aae5; border-radius:50%; opacity:0; pointer-events:none; z-index:-1; }
.bottle-container.is-settled::after { animation:bottleSettleRing .55s ease-out both; }
@keyframes bottleSettleRing { from { opacity:.55; transform:scale(.55); } to { opacity:0; transform:scale(1.25); } }
.bottle-container.is-spinning .bottle { will-change:transform; }
.player-marker.is-passing:not(.selected) { border-color:#9483ac; background:#3c344d; color:#e4d9f3; box-shadow:0 0 14px #b9a1da20; }
@media(prefers-reduced-motion:reduce) { .coin-3d-container.coin-landed::after,.bottle-container.is-settled::after { animation:none; } .bottle-container::before { display:none; } }
.player-marker { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:48px; border-radius:14px; }.player-marker::before { content:attr(data-avatar); display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#8d78aa40; color:#e8d6ff; font-size:9px; }.player-marker.selected { box-shadow:0 0 0 5px #c0a4e615,0 0 25px #ac88dc50; }
.random-result:has(.random-number:only-child) .random-number { min-width:140px; font-size:64px; background:transparent; border:0; box-shadow:none; }.random-result { max-height:480px; overflow-y:auto; }.random-number:nth-child(5n+1) { border-color:#5b879c; }
.random-number:not(:only-child)::before { content:attr(data-position); display:block; font-size:9px; letter-spacing:1px; color:#8393ab; line-height:1.5; }
.ball-window.answer-positive .ball-answer,.ball-window.answer-neutral .ball-answer,.ball-window.answer-negative .ball-answer { animation:answerSurface .75s ease both; }.ball-answer { line-height:1.4; overflow-wrap:anywhere; }.magic8ball-instruction { display:none; }
#magic8ball-page .play-settings { width:100%; }.play-settings-body:has(#play-question) { grid-template-columns:1fr; }.play-settings-body:has(#play-question) .play-help { display:none; }
@keyframes answerSurface { from { opacity:0; filter:blur(6px); transform:translateY(6px); } to { opacity:1; filter:blur(0); transform:none; } }
@media(max-width:700px) {
    .tool-intro { display:none; }.page-header { padding-bottom:12px; }.play-toolbar { margin-bottom:12px; gap:8px; }.play-mode-switch { width:100%; }.play-mode-switch button { flex:1; font-size:12px; padding:8px; }.play-settings { min-width:0; width:100%; flex-basis:100%; }.play-settings summary { padding:10px 12px; }
    .game-hud { padding:11px 12px; margin-bottom:10px; }.game-hud h3 { font-size:16px; }.game-scores { gap:5px; margin-top:8px; }.game-player { padding:5px 7px; }.game-caption { margin-top:7px; }
    .play-surface { padding:12px; }.tool-statebar { min-height:20px; margin-bottom:8px; font-size:10px; }.state-symbol { font-size:16px; }
    .play-surface .dice-container,.play-surface .coin-3d-container { height:220px; min-height:220px; }.play-surface .dice-controls,.play-surface .coin-controls { padding-top:6px; }
    .game-mode .play-surface .dice-container,.game-mode .play-surface .coin-3d-container { height:180px; min-height:180px; }
    .tool-feedback { padding:12px 14px; }.feedback-heading,.feedback-tip { display:none; }.feedback-value { font-size:27px; margin:5px 0; }.feedback-detail { font-size:12px; margin-top:6px; line-height:1.6; }.feedback-actions { margin-top:10px; }.result-chips { margin:8px 0; }.tool-layout { gap:10px; }.game-record { width:100%; order:5; }.compact-config { order:3; width:100%; }.tool-layout[data-tool="random"] .compact-config { order:0; }
    .play-surface .cards-container { gap:8px; max-width:350px; }.card-wrapper { padding-bottom:120%; }.card-back { font-size:24px; }.card-front::before { font-size:58px; }
    .play-surface .bomb-grid { max-width:320px; gap:7px; }.bomb-cell { font-size:23px; }
    .play-surface .random-result { min-height:145px; max-height:290px; }.random-result:has(.random-number:only-child) .random-number { font-size:58px; }
    .magic8ball-wrapper { width:190px; height:190px; margin:10px auto; }.ball-window { width:104px; height:104px; }.ball-answer { font-size:14px; }
    .play-surface .bottle-container { margin-top:35px; margin-bottom:30px; width:min(190px,calc(86.2% - 45px)); }.player-marker { height:42px; }.player-marker::before { width:15px; height:15px; }
    #card-page .card-count { margin-top:0; }.page-header .dice-count { padding:0; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }