.stage{max-width:640px;margin:auto;padding:12px!important}.turnbar{--tb-st-lines:1;--tb-msg-lines:1;--tb-st-rt:11px;--tb-rt:11px;line-height:1.4}:root:lang(en) .turnbar{--tb-st-rt:0px;--tb-rt:0px}
:root{--board-wall:#eee7d8;--board-grain:#e3dac6;--wood-top:#c8a273;--wood-edge:#9a6e43;--wood-ink:#6e5038;--board-ink:#1f2328;--board-muted:#786f60;--board-target:#2f5d8a;--board-ok:#2e7d4f;--board-ng:#b23a3a;--weight-1:#c8dfed;--weight-2:#d5e8d7;--weight-3:#efd4aa;--piece-shadow:#b9a790}
.field{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:12px 0}.field select,.field input{min-height:44px;max-width:100%;min-width:150px;padding:8px 32px 8px 12px;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:6px}.field select:focus-visible,.field input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.round-head{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0}#progress{font-weight:700;white-space:nowrap}#queue{display:flex;gap:16px;min-height:52px}.queue-item{display:flex;gap:4px;align-items:center;font-size:14px}.queue-item:not(:first-child){flex-direction:column;font-size:14px;gap:0}.weight{display:inline-flex;justify-content:center;align-items:center;width:36px;height:32px;border:2px solid var(--board-ink);border-radius:4px;color:var(--board-ink);font-size:24px;font-weight:750;background:var(--weight-1);box-shadow:2px 2px 0 var(--piece-shadow)}.weight[data-weight='2']{background:var(--weight-2)}.weight[data-weight='3']{background:var(--weight-3)}.queue-item:first-child .weight{width:44px;height:38px}.queue-item:not(:first-child) .weight{width:28px;height:25px;font-size:19px}
#board-shell{position:relative;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;background:var(--board-wall)}#board{display:block;width:100%;height:auto}#slots{position:absolute;inset:0;pointer-events:none}.slot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:2px solid var(--board-target);border-radius:50%;background:var(--board-wall);color:var(--board-target);font-size:27px;font-weight:700;line-height:1;cursor:pointer;box-shadow:1px 2px 0 var(--piece-shadow);transition:background 150ms,border-color 150ms}.slot[aria-pressed=true]{background:var(--board-target);color:var(--board-wall);border:4px double var(--board-wall);outline:2px solid var(--board-target)}.slot:disabled{border:1px dashed var(--board-muted);color:var(--board-muted);opacity:.6;box-shadow:none;cursor:default}.slot[hidden]{display:none}.slot:focus-visible{outline:3px solid var(--warn);outline-offset:2px}.moving .slot{visibility:hidden}
.readout{text-align:center;font-size:14px;min-height:22px;margin:4px 0}.tilt-meter{height:6px;background:var(--line);max-width:220px;margin:4px auto 8px;overflow:hidden;border-radius:3px}#tilt-fill{display:block;height:100%;background:var(--accent);transition:width 240ms}#tilt-fill.danger{background:var(--ng)}.actions{display:flex;gap:8px;justify-content:center;margin:8px 0}.actions .btn{min-height:44px}.actions #place{flex:1}.actions #undo,.actions #clear{padding:8px 12px}.save-note{font-size:14px;margin:4px 0}#result{padding:8px 12px;border:2px solid var(--ng);border-radius:6px;margin:8px 0}#result h2{font-size:18px;margin:0 0 4px}#result-detail{font-size:14px;margin:4px 0}#result .btn{min-height:44px}#result #change{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}.toolbar{display:flex;gap:8px;margin:8px 0}.toolbar .btn{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);min-height:44px}.auxiliary{margin-top:12px;font-size:14px}.auxiliary summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.auxiliary summary::before{content:'＋';margin-right:8px}.auxiliary[open] summary::before{content:'−'}
.article{line-height:1.9}.article figure{margin:24px 0}.article img{width:100%;height:auto}.article table{width:100%;table-layout:fixed}.article th,.article td{overflow-wrap:anywhere}.article figcaption{font-size:14px}.howto-scene{position:relative;max-width:640px}.howto-scene svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.howto-scene svg path,.howto-scene svg rect{stroke:#b23a3a;stroke-width:3;fill:none}.howto-scene svg text{font:700 22px system-ui;fill:#b23a3a;paint-order:stroke;stroke:#fff;stroke-width:4px}
@media(max-width:420px){.stage{padding:8px!important}.turnbar{font-size:15px}.round-head{gap:8px}#queue{gap:12px}.queue-item:first-child{flex-direction:column;gap:0}#queue{min-height:60px}.readout{margin:2px 0}.auxiliary{margin-top:4px}.actions .btn{font-size:16px}.article{padding:16px}}
@media(prefers-reduced-motion:reduce){.slot,#tilt-fill{transition:none}}
@media(min-width:700px){#table{display:grid;grid-template-columns:minmax(0,1fr) 190px;column-gap:16px;align-items:start}#board-shell{grid-column:1;grid-row:1/9}.round-head{grid-column:2;flex-direction:column;align-items:stretch;margin:0 0 8px}#queue{justify-content:center;margin-top:8px}#moments,#angle,.tilt-meter,.actions,#preview,#result{grid-column:2}.tilt-meter{width:100%}.actions{flex-wrap:wrap}.actions #place{flex-basis:100%}#result .btn{width:100%;margin-top:8px}.turnbar{--tb-msg-lines:1}.auxiliary{margin-top:4px}}
#table[data-phase='won'] #result{border-color:var(--ok)}
#table:not([data-phase='play']) .round-head{display:none}#table:not([data-phase='play']) .actions{margin-top:0}#table:not([data-phase='play']) #result{margin-top:4px}
@media(max-width:420px){#table:not([data-phase='play']) #moments{display:none}#table:not([data-phase='play']) #result .btn{padding:8px 12px;font-size:16px}}
.slot[aria-pressed=true]{background:transparent;color:var(--board-target);border:2px solid var(--board-target);outline:2px solid var(--board-target);outline-offset:2px;box-shadow:none}
.result-actions{display:flex;flex-wrap:wrap;gap:8px}.result-actions .btn{margin:0!important}@media(min-width:700px){.result-actions{flex-direction:column}}
.howto-parts{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;align-items:start}.howto-scene img{display:block}.howto-controls{max-width:190px}.howto-scene svg rect,.howto-scene svg path{stroke-width:2.5}@media(max-width:600px){.howto-parts{grid-template-columns:minmax(0,1fr)}.howto-board{max-width:409px}.howto-controls{justify-self:center}}

/* Reserve two message lines so narrow English notices do not shift the beam. */
@media(max-width:420px){:root:lang(en) .turnbar{--tb-msg-lines:2}}