/* Scene geometry and states: design/styleguide.md, additions 2026-10-19. */
.task-puzzle{--puzzle-cell:64px;--puzzle-gap:8px;--stick-step:100px;--stick-target:44px;--stick-board:244px;margin-block:var(--space-24)}
.puzzle-work{display:grid;gap:var(--space-24);justify-items:start}.puzzle-work[hidden]{display:none}.puzzle-static:empty{display:none}.magic-picture,.stick-picture{width:var(--stick-board);max-width:100%;height:auto;display:block}.magic-picture{width:216px}
.magic-grid{display:grid;grid-template-columns:repeat(3,var(--puzzle-cell));gap:var(--puzzle-gap)}
.magic-cell{box-sizing:border-box;width:var(--puzzle-cell);height:var(--puzzle-cell);min-width:0;text-align:center;border:1px solid var(--color-border);border-radius:var(--radius-puzzle-cell);background:var(--color-surface);color:var(--color-text);font:600 24px/1 var(--font-body);padding:0;caret-color:var(--color-primary);font-variant-numeric:tabular-nums}
.magic-cell[readonly]{background:var(--color-subtle);border-color:var(--color-divider)}.magic-cell:focus-visible,.puzzle-piece:focus-visible,.stick-slot:focus-visible,.puzzle-choice:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.magic-cell[data-drop="true"]{outline:3px solid var(--color-primary);outline-offset:2px}
.puzzle-bank{display:flex;gap:var(--space-8);flex-wrap:wrap;max-width:480px}.puzzle-piece,.puzzle-choice{min-width:44px;min-height:44px;padding:var(--space-8);border:1px solid var(--color-border);border-radius:var(--radius-puzzle-cell);background:var(--color-surface);color:var(--color-text);font:600 20px/1.4 var(--font-body);cursor:pointer;touch-action:none}.puzzle-piece[aria-pressed="true"],.puzzle-choice[aria-pressed="true"]{background:var(--color-selection);box-shadow:inset 0 0 0 2px var(--color-primary)}.puzzle-piece:active{transform:scale(.94)}
.stick-board{position:relative;width:var(--stick-board);height:var(--stick-board);flex:none;isolation:isolate}.stick-slot{position:absolute;width:var(--stick-target);height:var(--stick-target);padding:0;border:0;border-radius:var(--radius-puzzle-cell);background:transparent;display:grid;place-items:center;touch-action:none;cursor:pointer;overflow:visible}.stick-slot svg{position:absolute;overflow:visible;width:100px;height:12px;transform:rotate(var(--angle));pointer-events:auto}.stick-slot[data-diagonal="true"] svg{width:141.421px}.stick-slot .stick-body{fill:var(--color-puzzle-wood);stroke:var(--color-puzzle-wood-line);stroke-width:1}.stick-slot .stick-head{fill:var(--color-puzzle-red)}.stick-slot:not([data-on="true"]) svg{display:none}.stick-slot:not([data-on="true"])::after{content:"";width:8px;height:8px;border:1px solid var(--color-border);border-radius:50%;background:var(--color-surface)}.stick-slot[aria-pressed="true"]{outline:2px solid var(--color-primary);outline-offset:0;background:var(--color-selection)}.stick-slot[data-drop="true"]{outline:3px dashed var(--color-primary);outline-offset:0}.stick-slot[data-dragging="true"]{opacity:.3}
.puzzle-flight{position:fixed;z-index:1000;pointer-events:none;display:grid;place-items:center;background:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--radius-puzzle-cell);width:44px;height:44px;font:600 24px/1 var(--font-body);box-shadow:0 8px 20px #20282026}.puzzle-flight svg{width:90px;height:14px;overflow:visible}.puzzle-hint{margin:0;font:var(--type-help-weight) var(--type-help-size)/var(--type-help-line) var(--font-body);color:var(--color-secondary);max-width:60ch}
.puzzle-answer{display:grid;gap:var(--space-8)}.puzzle-answer input{width:160px;max-width:100%;min-height:48px;border:1px solid var(--color-border);border-radius:var(--radius-puzzle-cell);background:var(--color-surface);color:var(--color-text);padding:var(--space-8) var(--space-16);font:600 20px/1.4 var(--font-body);caret-color:var(--color-primary)}.puzzle-answer input:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.puzzle-illustration{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-16);width:100%;max-width:480px;min-height:100px}.puzzle-illustration img{width:80px;height:80px;object-fit:contain}.puzzle-illustration figure{margin:0;display:grid;justify-items:center;gap:var(--space-8)}.puzzle-illustration figcaption{font-size:var(--type-help-size);color:var(--color-secondary)}.puzzle-illustration .unknown{font:600 24px/1 var(--font-body);color:var(--color-secondary)}
.puzzle-draft{display:grid;gap:var(--space-16);width:100%;max-width:480px}.puzzle-digits{display:flex;align-items:center;gap:var(--space-8)}.puzzle-digits output{width:56px;height:64px;border-bottom:2px solid var(--color-border);display:grid;place-items:center;font-size:28px;font-weight:600}.puzzle-rectangles{position:relative;isolation:isolate;width:240px;height:80px;display:flex;border-block:2px solid var(--color-primary)}.puzzle-rectangles i{display:block;flex:1;border-inline-start:2px solid var(--color-primary)}.puzzle-rectangles i:last-of-type{border-inline-end:2px solid var(--color-primary)}.puzzle-rect-point{position:absolute;top:18px;left:calc(var(--x)*80px - 22px);width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer}.puzzle-rect-point::after{content:"";display:block;margin:auto;width:10px;height:10px;background:var(--color-border);border-radius:50%}.puzzle-rect-point[aria-pressed="true"]::after{background:var(--color-primary);outline:4px solid var(--color-selection)}.puzzle-rect-highlight{position:absolute;pointer-events:none;inset-block:0;background:var(--color-selection);z-index:-1}.puzzle-bikes{display:flex;gap:var(--space-8);flex-wrap:wrap;max-width:480px}.puzzle-bikes button{width:88px;height:88px;padding:var(--space-8)}.puzzle-bikes svg{width:100%;height:100%;color:var(--color-primary)}
.puzzle-books{display:flex;flex-wrap:wrap;gap:var(--space-8);max-width:400px;min-height:96px}.puzzle-books button{width:44px;height:44px;padding:0}.puzzle-books img{width:40px;height:40px}.puzzle-shelves{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);width:100%;max-width:480px}.puzzle-shelf{height:160px;overflow-y:auto;border:0;border-bottom:6px solid var(--color-puzzle-shelf);border-radius:0;background:var(--color-subtle);padding:var(--space-8);display:flex;align-items:end;align-content:end;flex-wrap:wrap;gap:2px;cursor:pointer}.puzzle-shelf img{width:28px;height:40px;object-fit:contain}.puzzle-week{display:flex;flex-wrap:wrap;gap:var(--space-8);max-width:480px}.puzzle-week button{font-size:16px;min-height:48px;touch-action:manipulation}.puzzle-socks{display:flex;gap:var(--space-8);flex-wrap:wrap;min-height:48px;max-width:400px}.puzzle-color{display:block;width:28px;height:28px;border:2px solid var(--color-text);border-radius:50%;background:var(--piece-color)}.puzzle-sock-choice{min-width:56px;min-height:56px;display:grid;place-items:center}.puzzle-scene-note{margin:0;color:var(--color-secondary)}
@media(max-width:600px){.puzzle-work{gap:var(--space-16)}.puzzle-bikes{max-width:290px}.puzzle-bikes button{width:72px;height:72px}.puzzle-illustration img{width:64px;height:64px}.puzzle-shelves{gap:var(--space-8)}}
@media(prefers-reduced-motion:reduce){.puzzle-piece:active{transform:none}}
@media print{.puzzle-work,.task-puzzle .game-actions,.task-puzzle .game-feedback{display:none!important}.task-puzzle .puzzle-static{display:block!important}}

.puzzle-shelf button{flex:none;width:44px;height:44px;border:0;padding:0;background:transparent;cursor:pointer;touch-action:none}.puzzle-shelf button img{width:40px;height:40px}.puzzle-flight img{width:40px;height:40px;object-fit:contain}

.puzzle-bike-art{display:block;width:100%;aspect-ratio:1060/742;background-image:url('/assets/characters/bikes-sprite.webp');background-size:200% 100%;background-position:left center}.puzzle-bike-art[data-three="true"]{background-position:right center}.puzzle-bikes button{width:112px;height:96px}@media(max-width:600px){.puzzle-bikes button{width:88px;height:80px}}
.puzzle-bikes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,600px);max-width:600px}.puzzle-bikes button{width:100%;height:96px}.puzzle-books{height:148px;min-height:148px;align-content:start;overflow-y:auto}.puzzle-socks{height:112px;align-content:start;overflow-y:auto}@media(max-width:600px){.puzzle-bikes{grid-template-columns:repeat(3,minmax(0,1fr));max-width:290px}.puzzle-bikes button{width:100%;height:80px}}

.puzzle-rectangles{width:216px;height:72px;margin-inline:22px}.puzzle-rect-point{top:14px;left:calc(var(--x)*72px - 22px)}

.stick-solution-pair{display:flex;flex-wrap:wrap;gap:var(--space-24)}.stick-solution-pair figure{margin:0;max-width:100%}.stick-solution-pair figcaption{font-size:var(--type-help-size);color:var(--color-secondary)}
/* Spatial meaning is part of OL2-05: upper and lower shelves. */
.puzzle-shelves{grid-template-columns:1fr}