.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{margin-left:auto;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)}
.ja-outcome{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}.ja-outcome #result{font-size:16px;line-height:1.5;min-height:0;flex:1 1 180px}.ja-outcome .btn{min-height:44px}.ja-quality[data-phase=play] .ja-outcome #result:empty{display:none}.ja-quality[data-phase=play] .ja-outcome{justify-content:flex-end}
.ja-input{display:flex;align-items:center;gap:8px;min-height:52px;margin:8px 0}.ja-input>span{font-size:14px;line-height:1.4;flex:1;min-height:2.8em;display:flex;align-items:center}.ja-input .btn{min-height:44px;padding:8px 12px;flex-shrink:0}
.ja-quality .pad{gap:8px;margin:8px 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}.ja-mark{display:inline-block;width:20px;height:14px;flex-shrink:0;border:2px solid var(--line-strong)}.ja-mark.crack{background:var(--warn);clip-path:polygon(0 0,40% 0,55% 50%,40% 100%,0 100%,0 0,100% 0,100% 100%,60% 100%,75% 45%,60% 0)}.ja-mark.dash{border-style:dashed}.ja-mark.stripe{background:repeating-linear-gradient(45deg,var(--ng) 0 3px,var(--surface) 3px 6px)}.ja-mark.exit{border-color:var(--ok)}
#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)))}}