/* Carrom: one compact play station; no button covering a pocket or a coin. */
.carrom-station{position:relative;width:100%;max-width:min(100%,calc(100svh - 200px));margin-inline:auto}
.carrom-dock{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:8;border:1px solid var(--table-line,#67583b);border-radius:0 0 14px 14px;padding:12px 14px;background:var(--table-paper,#fff5df);color:var(--table-ink,#29382f);box-shadow:0 8px 24px #0004}
.carrom-dock .carrom-controls{gap:6px}.carrom-shot-row{display:flex;align-items:center;gap:16px}.carrom-shot-row>label{flex:1;min-width:70px}.carrom-shot-row>.button{min-height:48px;flex:1.1;background:var(--table-ink,#29382f);color:var(--table-paper,#fff5df);border:1px solid currentColor}
.carrom-dock input[type=range]{min-height:32px;margin:0}.carrom-dock output{font-weight:700}.carrom-dock .muted{color:inherit;opacity:.82}
.carrom-aim-note{font-size:12px;line-height:1.4;margin:0}.carrom-settings{font-size:12px}.carrom-settings summary{cursor:pointer;min-height:28px;align-content:center}.carrom-fine-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:10px}.carrom-fine-controls p,.carrom-fine-controls button{grid-column:1/-1;margin:0}.carrom-dock .move-confirm{margin:6px 0 0;padding:8px;flex-wrap:wrap}
.carrom-dock .move-confirm[hidden]{display:none}
.carrom-dock:has(.carrom-settings[open]){position:relative;bottom:auto;top:auto}
@media(max-width:600px){.carrom-station{max-width:100%}.carrom-dock{padding:8px 10px}.carrom-shot-row{gap:12px}.carrom-shot-row>.button{font-size:12px;padding:10px}.carrom-aim-note{font-size:11px}.carrom-fine-controls{max-height:32svh;overflow:auto}.carrom-station:has(.zoomed){max-width:100%}}
@media(max-height:550px) and (min-width:601px){.game-layout:has(.carrom-station){grid-template-columns:1fr}.carrom-station{max-width:100%;display:grid;grid-template-columns:minmax(0,calc(100svh - 40px)) minmax(180px,240px);justify-content:center;gap:12px;align-items:start}.carrom-dock{border-radius:12px;top:8px;bottom:auto}.carrom-shot-row{flex-direction:column;align-items:stretch;gap:6px}.carrom-shot-row>label{width:100%}.carrom-fine-controls{grid-template-columns:1fr;max-height:36svh;overflow:auto}}
/* A skippable, finite result ceremony. Theme colours stay authoritative. */
.result-dialog{width:min(480px,calc(100vw - 28px));max-height:calc(100svh - 28px);overflow:auto;padding:24px;border:1px solid var(--table-line,#9a895d);border-radius:24px;background:var(--table-paper,#fff7e7);color:var(--table-ink,#293b32);box-shadow:0 24px 100px #0009;text-align:center}
.result-dialog::backdrop{background:#08100dd9}.result-dialog .eyebrow{margin:0;font-size:11px;color:inherit}.result-close{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:transparent;color:inherit;font-size:28px;cursor:pointer;border-radius:50%}.result-close:focus-visible{outline:2px solid currentColor}
.result-art{position:relative;isolation:isolate;height:min(310px,38svh);margin:6px auto 10px;overflow:hidden}.result-art::before{content:'';position:absolute;inset:8%;border:1px solid currentColor;opacity:.12;border-radius:50%;background:radial-gradient(ellipse,#e5c46c44,transparent 68%)}
.result-sprite{height:100%;aspect-ratio:1;margin:auto;background-size:400% 400%;background-repeat:no-repeat;position:relative}
.result-emblem{position:relative;width:44%;height:52%;object-fit:contain;border-radius:12px;filter:drop-shadow(0 8px 7px #0003);animation:result-reveal 1.3s ease-out both}
.result-miniature{position:absolute;bottom:0;left:6%;width:88%;height:50%;overflow:visible}.result-trace{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.45;stroke-dasharray:1;animation:result-draw 1.8s ease-out both}.result-disc{fill:var(--table-ink,#27372e);stroke:var(--table-paper,#fff7df);stroke-width:2}.result-glyph{fill:var(--table-paper,#fff7df);font:20px serif}.result-token{transform-box:fill-box;transform-origin:center;animation:result-land .7s ease-out both;animation-delay:calc(var(--order)*90ms)}
.result-dialog h2{font-size:clamp(24px,4vw,36px);margin:4px 0 10px}.result-dialog p{line-height:1.5}#result-dialog.result-dialog .muted{color:inherit;opacity:1}.result-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.result-actions .primary{background:var(--table-ink,#293b32);color:var(--table-paper,#fff7e7)}.result-actions .subtle{color:inherit;border:1px solid currentColor;background:transparent}.result-reopen{margin:14px 0}
.result-sparks{position:absolute;inset:0;pointer-events:none}.result-sparks i{position:absolute;left:var(--x);top:65%;width:4px;height:10px;background:currentColor;border-radius:50%;opacity:0;animation:result-spark 1.8s calc(var(--i)*65ms) ease-out both}
[data-motion=flip] .result-token{animation-name:result-flip}[data-motion=jump] .result-token,[data-motion=pounce] .result-token{animation-name:result-jump}[data-motion=loop] .result-token,[data-motion=orbit] .result-token{animation-name:result-orbit}[data-motion=bearoff] .result-token,[data-motion=pocket] .result-token{animation-name:result-pocket}[data-motion=home] .result-token,[data-motion=race] .result-token,[data-motion=push] .result-token{animation-name:result-run}[data-motion=bow] .result-token{animation-name:result-bow}[data-motion=rise] .result-token{animation-name:result-rise}
.result-dialog[data-outcome=defeat] .result-token{animation:result-settle 1.7s ease-out both;animation-delay:calc(var(--order)*50ms)}.result-dialog[data-outcome=defeat] .result-emblem{animation:result-bow 1.8s ease both}.result-dialog[data-outcome=defeat] .result-trace{animation:result-fade 2s ease both}.result-dialog:not([data-outcome=victory]) .result-sparks{display:none}.result-dialog[data-outcome=draw] .result-token,.result-dialog[data-outcome=finished] .result-token{animation:result-land 1s ease-out both}
@keyframes result-reveal{from{opacity:0;transform:translateY(12px) scale(.88)}to{opacity:1;transform:none}}
@keyframes result-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes result-land{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes result-flip{from{transform:scaleX(-1);opacity:.2}to{transform:scaleX(1);opacity:1}}
@keyframes result-jump{0%{transform:translate(-30px,15px)}50%{transform:translate(-15px,-24px)}100%{transform:none}}
@keyframes result-orbit{from{transform:rotate(-120deg) translateY(22px);opacity:0}to{transform:none;opacity:1}}
@keyframes result-pocket{0%{transform:translate(-28px,20px);opacity:0}60%{transform:none;opacity:1}100%{transform:scale(.85);opacity:1}}
@keyframes result-run{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
@keyframes result-bow{0%,100%{transform:rotate(0)}55%{transform:rotate(12deg)}}
@keyframes result-rise{from{transform:translateY(35px);opacity:0}to{transform:none;opacity:1}}
@keyframes result-settle{from{transform:translateY(-8px);opacity:1}to{transform:translateY(5px) scale(.92);opacity:.6}}
@keyframes result-fade{from{opacity:.7}to{opacity:.2}}
@keyframes result-spark{0%{transform:translateY(0) rotate(0);opacity:0}25%{opacity:.7}100%{transform:translateY(-130px) rotate(150deg);opacity:0}}
.result-dialog.still *,.reduce-motion .result-dialog *{animation:none!important;transition:none!important}.result-dialog.still .result-sparks,.reduce-motion .result-sparks{display:none}
@media(prefers-reduced-motion:reduce){.result-dialog *{animation:none!important;transition:none!important}.result-sparks{display:none}}
@media(max-height:550px){.result-dialog{padding:16px}.result-art{height:28svh}.result-dialog p{margin:6px 0}.result-dialog h2{font-size:24px}}
.result-raster-scene{position:relative;height:100%;aspect-ratio:1;margin:auto}.result-ornament{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:result-reveal 1.2s ease-out both}.result-raster-scene>.result-emblem{position:absolute;left:29%;top:25%;width:42%;height:43%;border-radius:0;object-fit:contain;animation:result-reveal .9s .15s ease-out both}.result-raster-pieces{position:absolute;left:33%;bottom:18%;width:34%;height:17%;display:flex;align-items:center;justify-content:center;gap:3px}.result-raster-pieces img{width:30%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px #0004)}.result-raster-scene[data-motion=bow]>.result-emblem{animation:result-bow 1.6s ease both}.result-raster-scene[data-motion=flip]>.result-emblem{animation:result-flip 1s ease-out both}.result-raster-scene[data-motion=rise]>.result-emblem{animation:result-rise 1.1s ease-out both}.result-dialog[data-outcome=defeat] .result-ornament{animation:result-reveal 1.6s ease both}.result-dialog[data-outcome=defeat] .result-raster-scene>.result-emblem{animation:result-bow 1.8s ease both}
.result-raster-scene>.result-emblem{border-radius:50%}
/* Same numbered camp colour as the board roster; not a black/white duel token. */
.result-camp{position:absolute;z-index:2;left:50%;bottom:8%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 20px);box-sizing:border-box;padding:7px 13px 7px 7px;border:2px solid #fffaf0;border-radius:18px;background:var(--camp,#293b32);color:#fffaf0;box-shadow:0 3px 10px #0004;text-align:left}
.result-camp-number{flex:0 0 auto;display:grid;place-items:center;min-width:28px;height:28px;padding:0 3px;box-sizing:border-box;border:1px solid currentColor;border-radius:50%;font:bold 16px/1 sans-serif}
.result-camp-name{min-width:0;overflow-wrap:anywhere;font:bold clamp(11px,2.6vw,14px)/1.3 sans-serif}