/* The geometric pieces are the artwork; the board never uses answer colours. */
.tangram-scene { display:flex; align-items:center; justify-content:center; gap:clamp(24px,5vw,64px); padding:2px 4px; max-width:980px; }
.tangram-board { position:relative; flex:0 1 480px; aspect-ratio:33/32; min-width:0; background:#eee0c1; border-radius:24px; box-shadow:0 7px 0 #b6a07d,0 12px 28px rgb(0 0 0 / 12%); }
.tangram-outline { width:100%; height:100%; display:block; pointer-events:none; }
.tangram-slot { position:absolute; margin:0; padding:0; border:0; background:transparent; border-radius:0; touch-action:manipulation; }
.tangram-slot > svg { display:block; width:100%; height:100%; pointer-events:none; }
.tangram-slot-number { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font:600 13px var(--tf-font); color:#514834; display:none; pointer-events:none; }
.tangram-slot:focus-visible { outline:none; }
.tangram-slot:focus-visible polygon, .tangram-slot.tangram-over polygon { stroke:#236179; stroke-width:9; stroke-opacity:1; }
.tangram-show-lines .tangram-slot:not(.tangram-filled) polygon { stroke:#796a4e; stroke-opacity:.9; stroke-width:4; }
.tangram-slot.tangram-hint polygon { stroke:#236179; stroke-opacity:1; stroke-width:7; stroke-dasharray:9 5; }
/* A rejected placement remains empty. A muted inset contour is visible even
   when the helper copy is hidden on a short screen or motion is reduced. */
.tangram-slot.tangram-tried polygon { fill:#b7aa8e; stroke:#756a52; stroke-opacity:1; stroke-width:7; }
.tangram-filled { cursor:default; }
.tangram-reserve { display:grid; grid-template-columns:1fr; flex:0 1 320px; gap:22px; min-width:0; }
.tangram-tray { display:grid; grid-auto-flow:dense; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.tangram-rest { aspect-ratio:1; background:var(--play-hover); border-radius:15px; }
.tangram-rest-wide { grid-column:span 2; aspect-ratio:2.15; }
.tangram-piece { position:relative; width:100%; height:100%; display:block; padding:0; border:0; border-radius:15px; background:transparent; touch-action:none; transform-origin:center; }
.tangram-piece > svg { display:block; width:100%; height:100%; overflow:visible; pointer-events:none; filter:drop-shadow(0 3px 0 rgb(0 0 0 / 15%)); }
.tangram-piece[aria-pressed=true] { outline:3px solid var(--tf-accent-text); outline-offset:3px; background:var(--play-hover); }
.tangram-piece:focus-visible { outline:var(--tf-focus-ring); outline-offset:4px; }
.tangram-piece.tangram-placed { visibility:hidden; pointer-events:none; }
.tangram-piece.tangram-dragging { z-index:20; background:var(--play-soft); cursor:grabbing; }
.tangram-piece kbd { position:absolute; top:3px; left:6px; font:600 12px var(--tf-font); display:none; color:var(--tf-muted); }
.tangram-scene:focus-within .tangram-piece kbd,.tangram-scene:focus-within .tangram-slot:not(.tangram-filled) .tangram-slot-number { display:block; }
.tangram-tools { display:flex; gap:15px; justify-content:center; }
.tangram-tools button { display:flex; align-items:center; justify-content:center; gap:7px; min-width:90px; height:52px; padding:7px 12px; border:1px solid var(--tf-control-border); border-radius:12px; color:var(--tf-text); background:var(--play-hover); font:500 14px var(--tf-font); touch-action:manipulation; }
.tangram-tools svg { width:27px; height:27px; flex-shrink:0; }
.tangram-tools button:disabled { opacity:.35; cursor:default; }
.tangram-tools button:focus-visible { outline:var(--tf-focus-ring); outline-offset:4px; }
.tangram-tools .tangram-hint,.tangram-piece.tangram-hint { outline:3px dashed var(--tf-link); outline-offset:4px; }
.tangram-help[aria-pressed=true] { border-color:var(--tf-link); }
.tangram-status { margin:0; min-height:2.8em; max-width:280px; color:var(--tf-muted); font-size:.82rem; line-height:1.4; text-align:center; }
@media (max-width:700px) and (orientation:portrait) {
 .tangram-scene { flex-direction:column; gap:22px; }
 .tangram-board { flex:0 0 auto; width:min(330px,100%,calc(100dvh - 438px)); }
 .tangram-reserve { flex:0 0 auto; width:min(300px,100%); grid-template-columns:1fr 50px; gap:12px 18px; align-items:center; }
 .tangram-tray { gap:10px; }
 .tangram-tools { flex-direction:column; gap:12px; }
 .tangram-tools button { width:50px; min-width:50px; height:50px; padding:8px; }
 .tangram-tools span { display:none; }
 .tangram-status { grid-column:1/-1; min-height:1.4em; font-size:.75rem; }
}
@media (max-width:700px) and (max-height:690px) and (orientation:portrait) {
 body[data-game=tangram] .play-topline { flex-basis:80px; }
 body[data-game=tangram] .play-heading { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); }
 .tangram-scene { gap:16px; }
 .tangram-board { width:230px; flex:0 0 auto; border-radius:18px; box-shadow:0 5px 0 #b6a07d; }
 .tangram-reserve { width:266px; grid-template-columns:1fr 48px; gap:10px 15px; }
 .tangram-tray { gap:9px; }
 .tangram-tools button { width:48px; min-width:48px; height:48px; }
 .tangram-status { display:none; }
}
@media (max-height:520px) and (orientation:landscape) {
 body[data-game=tangram] .play-view { --play-bottom-space:calc(62px + env(safe-area-inset-bottom,0px)); }
 body[data-game=tangram] .play-topline { flex-basis:64px; }
 body[data-game=tangram] .game-content { margin-top:20px; }
 body[data-game=tangram] .play-heading h1 { font-size:20px; }
 body[data-game=tangram] .play-heading > p:last-child { font-size:11px; }
 .tangram-scene { gap:28px; }
 .tangram-board { flex:0 0 auto; width:min(36vw,calc(100dvh - 140px)); border-radius:17px; box-shadow:0 4px 0 #b6a07d; }
 .tangram-reserve { flex:0 0 auto; width:245px; grid-template-columns:1fr 46px; gap:14px; align-items:center; }
 .tangram-tray { gap:10px; }
 .tangram-tools { flex-direction:column; gap:12px; }
 .tangram-tools button { width:46px; min-width:46px; height:46px; padding:8px; }
 .tangram-tools span,.tangram-status { display:none; }
}
@media (max-height:360px) and (orientation:landscape) {
 body[data-game=tangram] .play-view { --play-bottom-space:calc(64px + env(safe-area-inset-bottom,0px)); }
 body[data-game=tangram] .play-topline { flex-basis:64px; }
 body[data-game=tangram] .game-content { margin-top:12px; }
 body[data-game=tangram] .game-progress { position:absolute; left:calc(50% + 11px); bottom:72px; width:246px; margin:0; }
 .tangram-board { width:182px; }
 .tangram-scene { gap:30px; }
 .tangram-reserve { width:246px; }
}
@media (forced-colors:active) {
 .tangram-slot polygon { fill:Canvas; stroke:CanvasText; stroke-opacity:1; }
 .tangram-filled polygon { fill:Highlight; }
 .tangram-piece { border:1px solid ButtonText; }
}
/* During a drag the artwork uses the board's scale, anchored at the grabbed point. */
.tangram-drag-ghost { position:fixed; inset:0; width:100vw; height:100vh; z-index:40; pointer-events:none; overflow:visible; filter:drop-shadow(0 4px 3px rgb(0 0 0 / 15%)); }
.tangram-piece.tangram-dragging { opacity:.2; background:transparent; }
.tangram-piece polygon { transform-box:fill-box; transform-origin:center; }
.tangram-detail,.tangram-hint-shape,.tangram-free-aim { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.tangram-board:focus-visible { outline:var(--tf-focus-ring); outline-offset:5px; }
.tangram-free-piece { position:absolute; margin:0; padding:0; border:0; border-radius:0; background:transparent; touch-action:none; }
.tangram-free-piece > svg { width:100%; height:100%; display:block; pointer-events:none; }
.tangram-free-piece polygon { transform-box:fill-box; transform-origin:center; }
.tangram-free-piece[aria-pressed=true] polygon,.tangram-free-piece:focus-visible polygon { stroke:#236179; stroke-opacity:1; stroke-width:6; }
.tangram-free-piece.tangram-dragging { opacity:.15; }
.tangram-piece.tangram-on-board { opacity:.48; }
.tangram-piece.tangram-on-board[aria-pressed=true] { opacity:1; }
.tangram-tools [hidden],.tangram-keepsake[hidden] { display:none; }
.tangram-scene[data-mode=free] .tangram-tools { gap:8px; }
.tangram-scene[data-mode=free] .tangram-tools button { min-width:0; flex:1; padding:7px 9px; }
.tangram-keepsake { padding-top:16px; }
.tangram-keepsake > button { display:flex; align-items:center; gap:8px; }
.tangram-keepsake svg { width:20px; height:20px; flex-shrink:0; }
@media (max-width:700px) and (orientation:portrait) {
 .tangram-scene[data-mode=free] .tangram-tools { gap:8px; }
 .tangram-scene[data-mode=free] .tangram-tools button { flex:0 0 auto; }
}
@media (max-height:520px) and (orientation:landscape) {
 .tangram-scene[data-mode=free] .tangram-tools { gap:6px; }
 .tangram-scene[data-mode=free] .tangram-tools button { flex:0 0 auto; }
}
/* A free picture has no progress dots; give that space back to the artwork. */
body[data-game=tangram] .game-progress[data-total="0"] { display:none; }
/* A large wing or kite gets four tray cells. Smaller pieces stay readable,
   retain their relative scale, and never move when the large piece is turned. */
.tangram-scene[data-wide-tray=true] .tangram-tray { grid-template-columns:repeat(4,minmax(0,1fr)); }
.tangram-rest-large { grid-column:span 2; grid-row:span 2; aspect-ratio:1; }
@media (max-height:520px) and (orientation:landscape) {
 .tangram-scene[data-wide-tray=true] .tangram-reserve { width:264px; }
 .tangram-scene[data-wide-tray=true] .tangram-tray { gap:8px; }
}