.stage{max-width:640px;margin:24px auto;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}.turnbar{--tb-msg-lines:2;--tb-st-lines:1;--tb-rt:0px;margin-bottom:12px}.message{font-size:16px;line-height:28px}.status{font-size:14px}.field{display:flex;align-items:center;gap:12px;margin:12px 0}.controls,.actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.pad{display:flex;gap:12px;margin:12px 0}.pad button{width:88px;min-height:56px;touch-action:none;user-select:none}.pad #jump{width:128px}.pad .held{background:var(--accent);color:var(--surface)}#board{width:100%;display:block;aspect-ratio:480/320;background:#e9ede7;border:1px solid var(--line-strong);border-radius:6px}.records,.legend{font-size:14px;line-height:1.7}#result{min-height:52px}.ad-gap{height:160px}.article{max-width:800px;margin:auto}.article p{line-height:1.85}.article figure{margin:24px 0}.article img{max-width:560px;width:100%;height:auto;display:block;margin:auto}.article figcaption{font-size:14px;margin-top:8px}@media(max-width:640px){.stage{margin-left:-8px;margin-right:-8px;padding:4px}.turnbar{--tb-msg-lines:3}.field{flex-wrap:wrap}.pad{gap:8px}.pad button{width:88px}.pad #jump{width:120px}}

/* Local quality UI, independent from the course physics. */
.ja-board{position:relative}.ja-quality #board{border-width:2px}.ja-quality[data-phase=fail] #board{border-color:var(--ng)}.ja-quality[data-phase=clear] #board{border-color:var(--ok)}
/* One fixed-height row under the view: live state while playing, result after. */
.ja-outcome{display:flex;align-items:center;gap:8px;min-height:52px;margin:8px 0}.ja-outcome .btn{min-height:44px;padding:8px 14px;flex-shrink:0}
.ja-outcome #result,.ja-outcome #ja-input-state{flex:1;min-width:0;min-height:0;font-size:15px;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ja-outcome #ja-input-state{color:var(--ink-sub)}.ja-outcome #result{font-weight:600}
.ja-quality[data-phase=clear] #result{color:var(--ok)}.ja-quality[data-phase=fail] #result{color:var(--ng)}
.ja-quality:is([data-phase=play],[data-phase=paused],[data-phase=setup]) .ja-outcome #result,.ja-quality:is([data-phase=clear],[data-phase=fail]) .ja-outcome #ja-input-state{display:none}
.records{margin:8px 0}.rec-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0 12px;font-weight:600}.rec-total{font-weight:400;color:var(--ink-sub)}
.rec-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:4px}.rec{display:flex;flex-direction:column;align-items:center;padding:4px 2px;border:1px solid var(--line);border-radius:6px;font-size:14px;line-height:1.35;color:var(--ink-sub);white-space:nowrap}.rec b{color:var(--ink)}.rec.done{color:var(--ink)}.rec.now{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ja-quality .pad{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;margin:8px 0}.ja-quality .pad button,.ja-quality .pad #jump{width:100%;min-width:0;margin-left:0}.ja-quality .pad button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:64px;padding:8px 6px;font-size:17px}.pad svg{width:22px;height:22px;flex-shrink:0}.ja-quality .pad .held{background:var(--btn);color:var(--btn-ink);outline:3px solid var(--accent);outline-offset:2px}.ja-quality .legend{display:flex;gap:8px 16px;flex-wrap:wrap;margin:8px 0}.legend>span{display:flex;gap:6px;align-items:center}.legend .ja-mark{display:inline-block;width:28px;height:24px;flex-shrink:0}

#setup select{font:inherit;font-size:16px;min-height:44px;min-width:0;max-width:100%;padding:8px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink)}#setup .field{align-items:stretch;gap:8px}#setup label{align-self:center;flex-shrink:0}#setup select{flex:1}.ja-quality .actions{margin:8px 0}.ja-quality .records{margin:8px 0}.article .howto-shot{position:relative;max-width:390px;margin:auto}.article .howto-shot>img{display:block;width:100%;height:auto}.article .howto-shot>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.article .howto figcaption{font-size:16px;line-height:1.65}
@media(max-width:640px){.ja-quality .pad button{flex:1;min-width:0;width:auto;flex-direction:column;gap:2px}.ja-quality .pad #jump{flex:1.4;min-width:0;width:auto;margin-left:0}}

@media(min-width:641px){.ja-quality{max-width:min(640px,max(420px,calc((100svh - 320px)*1.5)))}}

.legend .ja-mark{background:var(--board);border-radius:3px}
#board:focus-visible{outline:3px solid var(--accent);outline-offset:3px}