.stage{max-width:780px}
.turnbar{--tb-msg-lines:2;--tb-st-lines:1;--tb-rt:0px}
.turnbar .status{font-size:16px}
#play-area{max-width:none}
#piece-progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:0;margin:0 0 12px;list-style:none}
#piece-progress li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:6px 3px;border:1px solid var(--line);border-radius:6px;color:var(--ink-sub);background:var(--surface)}
#piece-progress li[data-state="current"]{border:2px solid var(--accent);padding:5px 2px;color:var(--ink)}
#piece-progress li[data-state="done"] .part-state{color:var(--ok);font-weight:700}
.part-icon{width:48px;height:30px;--face-line:#49392e;--paper:#fffdf7}
.part-label,.part-state{font-size:14px;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.game-layout{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;align-items:start}
.board-area,.piece-dock{min-width:0}
.piece-dock{display:flex;flex-direction:column}
#piece-preview{order:0}#action-row{order:1}#direction-row{order:2}#rotation-row{order:3}.tiny-note{order:4}#result{order:5}
#board-caption{font-size:18px;margin:0 0 8px;line-height:1.3}
#board-wrap{border-radius:8px}
#board{--board-bg:#fffaf0;--face-fill:#f0d8b7;--face-line:#49392e;--paper:#fffdf7;border-radius:8px}
#board:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
#board[data-active="true"]{cursor:grab;touch-action:none;user-select:none}
#board-wrap[data-dragging="true"] #board{cursor:grabbing}
#board .guide{stroke:#858891}
#board .face-part{animation:none}
#board .cursor{pointer-events:none;stroke:#2f5d8a}
#board .draft-piece{pointer-events:none;filter:drop-shadow(0 2px 1px #49392e25)}
#board .draft-frame{fill:#fffdf7;stroke:#2f5d8a;stroke-width:2;stroke-dasharray:4 3}
#piece-preview{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 10px;justify-content:start;min-height:72px;margin:0 0 8px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
#piece-icon{grid-column:1;grid-row:1 / 3;width:72px;height:58px}
#piece-name{grid-column:2;grid-row:1;align-self:end;font-size:17px;line-height:1.35}
#angle{grid-column:2;grid-row:2;align-self:start;font-size:14px}
#action-row{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0 12px}
#action-row button{width:100%;min-height:44px}
#place{grid-row:1;min-width:0}
#cancel-position{grid-row:2}
#direction-row{gap:8px}
#direction-row .btn{min-height:44px;min-width:44px;flex:1;max-width:60px}
#rotation-row .btn{flex:1;min-height:44px;min-width:0}
.tiny-note{margin:10px 0;font-size:14px}
#result{margin:0;padding:12px;line-height:1.5}
#ranking{list-style:none;padding-left:0}
#view-player{display:block;width:100%;padding:8px 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;line-height:1.5;min-height:44px}
#result-heading:focus{outline:none}
#record{min-height:0;margin-top:12px}
.piece-flight{position:fixed;z-index:50;pointer-events:none;--face-line:#49392e;--paper:#fffdf7}
[hidden]{display:none!important}
.guide-screen{position:relative;width:100%;max-width:358px}
.guide-screen img{display:block;width:100%;height:auto;max-width:100%}
.guide-annotation{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.howto figcaption{font-size:16px;line-height:1.6;margin-top:10px;max-width:540px}
@media(max-width:620px){
 .game-layout{grid-template-columns:minmax(0,1fr);gap:8px}
 .board-area{max-width:340px;width:100%;margin:auto}
 #board-caption{font-size:16px;margin-bottom:6px}
 #piece-progress{gap:4px;margin-bottom:8px}
 #piece-progress li{padding:4px 1px}
 #piece-progress li[data-state="current"]{padding:3px 0}
 .part-label{display:none}
 .part-icon{width:40px;height:25px}
 #piece-preview{min-height:58px;padding:6px 8px;margin-bottom:6px;grid-template-columns:58px minmax(0,1fr)}
 #piece-icon{width:58px;height:46px}
 #piece-name{font-size:16px}
 #action-row{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px;margin:6px 0 8px}
 #place{grid-column:2;grid-row:1}
 #cancel-position{grid-column:1;grid-row:1}
 #hide-face,#ready,#next{grid-column:1 / -1}
 #direction-row{margin-top:8px}
 #rotation-row{margin:8px 0}
}
@media(prefers-reduced-motion:no-preference){
 #board.just-revealed .face-part{animation:face-reveal .2s ease-out}
 @keyframes face-reveal{from{opacity:0}to{opacity:1}}
}