.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}
/* One palette for the face, moving piece, preview, progress and placement flight. */
:is(#board,#piece-icon,.part-icon,.piece-flight){--face-fill:#efdbc2;--face-line:#49392e;--paper:#fffdf7;--face-iris:#aa8b68;--face-nose:#dfbb94;--face-lip:#b97566;--face-hair:#5e4737;--face-hair-line:#3f3128;--mark:#2f5d8a}
/* Cut paper on a sheet: one light shadow for the face and its pieces. */
#board :is(.face-base,.face-part){filter:var(--shadow-piece)}
#board .model-ghost,#board .compare-links{pointer-events:none}
#board .reveal-cover{fill:var(--board-bg);opacity:0;pointer-events:none;transform-box:fill-box}
#board-caption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#piece-progress li[data-state="done"] .part-icon{opacity:.5}
/* Small inline player mark; must outrank the shared ".stage svg" full-width rule. */
:is(.stage,body) svg.pmark{display:inline-block;width:14px;height:14px;max-width:14px;flex:none;vertical-align:-2px;margin-right:5px}
#result-note{margin:0 0 8px;color:var(--ink-sub)}
#result-note:empty{display:none}
#compare-row{margin:8px 0}
#ranking li{display:flex;align-items:center;padding:2px 0}
#ranking li[aria-current="true"]{font-weight:700}
@media(prefers-color-scheme:dark){:is(#piece-icon,.part-icon,.piece-flight){background:var(--paper);border-radius:4px}}
[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{display:none}
 #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){
 /* Reveal: the cover lifts, then the pieces appear in placing order. */
 #board .reveal-cover{animation:cover-lift .28s cubic-bezier(.5,0,.7,1)}
 @keyframes cover-lift{from{opacity:1;transform:translateY(0)}to{opacity:1;transform:translateY(-100%)}}
 #board.just-revealed .face-part{animation:face-reveal .2s ease-out .14s both}
 #board.just-revealed [data-part="rightEye"]{animation-delay:.18s}
 #board.just-revealed [data-part="nose"]{animation-delay:.22s}
 #board.just-revealed [data-part="mouth"]{animation-delay:.26s}
 #board.just-revealed [data-part="leftBrow"]{animation-delay:.30s}
 #board.just-revealed [data-part="rightBrow"]{animation-delay:.34s}
 @keyframes face-reveal{from{opacity:0}to{opacity:1}}
 #piece-progress li.just-done{animation:tile-done .45s ease-out}
 @keyframes tile-done{from{background:var(--accent-soft);border-color:var(--accent)}}
}