:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#f4eee1;background:#17212a}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;border:1px solid #9eb4c7;border-radius:9px;background:#324b5b;color:#fff;padding:.55rem .8rem}button:hover{background:#416479}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,select:focus-visible,.slot:focus-visible,.piece:focus-visible{outline:3px solid #f6bd69;outline-offset:2px}header{padding:1.3rem clamp(1rem,3vw,3rem);display:flex;justify-content:space-between;gap:1rem;align-items:end;background:#21323e;border-bottom:1px solid #496273}h1,h2,p{margin:0}h1{font-size:clamp(1.6rem,3vw,2.5rem);margin:.1rem 0 .35rem}header p:not(.eyebrow),.instruction,.tray-top p{color:#c3d0d7}.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#f6bd69}.controls{display:flex;align-items:end;gap:.6rem;flex-wrap:wrap}.controls label{display:grid;gap:.25rem;font-size:.85rem;color:#d5e0e5}select{background:#eff4f5;color:#17212a;padding:.55rem;border-radius:8px;border:0;min-width:8rem}main{display:grid;grid-template-columns:minmax(0,1fr) minmax(275px,370px);min-height:calc(100vh - 124px)}.play-area{padding:1rem clamp(1rem,2vw,2rem);min-width:0}.topline{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}.topline strong{font-size:1.1rem}.topline span{font-variant-numeric:tabular-nums;color:#f6bd69}.hint{font-size:.85rem;white-space:nowrap}.board-wrap{display:flex;justify-content:center}.board{position:relative;display:grid;width:min(100%,1000px);aspect-ratio:var(--aspect);background:#667b85;border:8px solid #b58d5d;border-radius:4px;box-shadow:0 15px 45px #07121acc;isolation:isolate}.board-guide{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;pointer-events:none}.board.show-guide .board-guide{opacity:.19}.slot{position:relative;border:1px solid #ffffff26;background:transparent;padding:0;min-width:0;min-height:0;z-index:1}.slot:hover{background:#ffffff18}.slot.filled{border-color:transparent}.slot canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--piece-width);height:auto;max-width:none;pointer-events:none}.message{min-height:2rem;color:#f6bd69;padding-top:.8rem}.tray-area{background:#233440;border-left:1px solid #4a6372;padding:1rem;min-width:0}.tray-top{display:flex;justify-content:space-between;align-items:start;gap:.5rem}.tray-top h2{font-size:1.3rem}.tray-top p{font-size:.85rem;margin-top:.2rem}.instruction{font-size:.85rem;line-height:1.45;margin:1rem 0}.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;max-height:calc(100vh - 260px);overflow:auto;padding:.25rem}.piece{aspect-ratio:1;position:relative;background:#385363;border:2px solid #658094;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:.15rem;touch-action:manipulation}.piece:hover{background:#4c7185}.piece.selected{border-color:#f6bd69;box-shadow:0 0 0 2px #f6bd69}.piece canvas{max-width:100%;max-height:100%;pointer-events:none}.piece .turn{position:absolute;right:2px;bottom:2px;padding:.05rem .2rem;font-size:.85rem;background:#16242dd9;border:0;border-radius:4px}dialog{border:2px solid #b58d5d;border-radius:10px;background:#20313e;color:#fff;max-width:min(90vw,1100px);max-height:90vh;padding:1rem}dialog::backdrop{background:#07121bdc}.preview-head{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:.6rem}dialog img{display:block;max-width:100%;max-height:75vh;object-fit:contain}@media(max-width:850px){header{align-items:start;flex-direction:column}main{display:block}.tray-area{border-left:0;border-top:1px solid #4a6372}.tray{grid-template-columns:repeat(5,minmax(0,1fr));max-height:35vh}.board{border-width:5px}}@media(max-width:550px){.tray{grid-template-columns:repeat(4,minmax(0,1fr))}.controls{width:100%}.controls label{flex:1}.controls select{width:100%;min-width:0}.topline{gap:.5rem}.piece .turn{font-size:.7rem}}
:root{--group-accent:#f6bd69}
#float-selected{width:100%;margin:.5rem 0 1rem;background:#644f36;border-color:#d7a765}
.assembly-zone{margin-top:1.2rem;border:2px dashed #7795a4;border-radius:12px;padding:.75rem;min-height:120px}
.assembly-zone.over{border-color:var(--group-accent);background:#516477}
.assembly-heading h2{font-size:1.15rem}
.assembly-heading p{color:#c3d0d7;font-size:.8rem;margin:.25rem 0 .8rem}
.assembly-list{display:grid;gap:.55rem}
.assembly-card{display:grid;grid-template-columns:75px 1fr auto;align-items:center;gap:.6rem;background:#354f5d;border:1px solid #75919f;border-radius:9px;padding:.45rem}
.assembly-card canvas{width:75px;height:65px;object-fit:contain}
.assembly-card strong{display:block;font-size:.9rem}
.assembly-card small{color:#c3d0d7}
.assembly-card button{font-size:.8rem}
.board-group{position:absolute;z-index:3;touch-action:none;cursor:grab;user-select:none;transition:filter .14s ease}
.board-group.moving{z-index:10;cursor:grabbing}
.board-group.selected-group{filter:none}
.board-group.selected-group .group-shape::after{content:none}
.board-group.selected-group .group-shape,.piece.selected canvas{filter:drop-shadow(1px 0 0 #ffe0a3) drop-shadow(-1px 0 0 #ffe0a3) drop-shadow(0 1px 0 #ffe0a3) drop-shadow(0 -1px 0 #ffe0a3) drop-shadow(0 0 4px #f6bd6988)}
.group-shape{position:absolute;inset:0;transform:rotate(var(--rotation));transform-origin:center;pointer-events:auto}
.group-piece{position:absolute;pointer-events:none}
.group-piece canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--piece-width);height:auto;max-width:none}
.group-actions{position:absolute;left:50%;top:-1.6rem;transform:translateX(-50%);display:flex;gap:.2rem;white-space:nowrap}
.group-actions button{font-size:.7rem;padding:.1rem .35rem;background:#10202de8}
body:not(.show-quick-actions) .group-actions,body:not(.show-quick-actions) .piece .turn{display:none}
.tray-area.return-target{box-shadow:inset 0 0 0 3px #f6bd69;background:#314957}
.assembly-picture{display:flex;align-items:center;justify-content:center;max-height:65vh;overflow:auto}
.assembly-picture canvas{display:block;max-width:min(80vw,850px);max-height:60vh;object-fit:contain}
.assembly-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.8rem}
.choice-note{flex-basis:100%;font-size:.72rem;line-height:1.25;color:#f6bd69}
.choice-note:empty{display:none}
.difficulty-note{max-width:1000px;margin:-.35rem auto .75rem;padding:.45rem .65rem;border-left:3px solid #f6bd69;background:#314652;color:#ffdb8e;font-size:.82rem;line-height:1.3}
.difficulty-note[hidden]{display:none}
select:disabled{opacity:.55;cursor:not-allowed}
#series{min-width:11.5rem}
.rotate-phone{display:none}
.zoom-controls{display:none;align-items:center;gap:.25rem;margin-left:auto}
.zoom-controls button{min-width:2rem;padding:.3rem .5rem}
.zoom-controls span{min-width:3.1rem;text-align:center;font-size:.8rem}
@media (max-width:700px) and (orientation:portrait) and (pointer:coarse){
  .rotate-phone{display:flex;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;text-align:center;padding:2rem;background:#17212a}
  .rotate-phone strong{display:block;font-size:1.6rem;color:#f6bd69;margin-bottom:.7rem}
  .rotate-phone p{line-height:1.5;color:#d7e2e8}
  body{overflow:hidden}
}
@media (max-width:1000px) and (orientation:landscape) and (pointer:coarse){
  body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
  header{display:flex;flex-direction:row;align-items:center;padding:.35rem .65rem;gap:.6rem}
  header h1{font-size:1rem;margin:0}
  header p:not(.eyebrow){display:none}
  .eyebrow{font-size:.55rem}
  .controls{width:auto;flex:0 1 auto;gap:.3rem}
  .controls label{flex:0 1 5.4rem;font-size:.65rem}
  .controls select{min-width:0;width:100%;padding:.3rem;font-size:.75rem}
  #series{min-width:0}
  .controls button{padding:.3rem;font-size:.7rem}
  main{display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,30vw,290px);flex:1;min-height:0;overflow:hidden}
  .play-area{min-width:0;min-height:0;overflow:auto;padding:.5rem}
  .topline{gap:.3rem;margin-bottom:.4rem}
  .topline strong{font-size:.8rem}
  .topline button,.topline .hint,.topline span{font-size:.7rem}
  .topline button,.controls button,.piece .turn{min-height:2rem}
  .piece .turn{min-width:2rem}
  .zoom-controls{display:flex}
  .board-wrap{display:block;max-height:calc(100dvh - 125px);overflow:auto;overscroll-behavior:contain;border:1px solid #496273}
  .board{width:max(100%,calc(650px * var(--board-zoom,1)));max-width:none;flex:none;border-width:5px}
  .tray-area{border-left:1px solid #4a6372;border-top:0;min-height:0;overflow:auto;padding:.5rem}
  .tray-top h2,.assembly-heading h2{font-size:.9rem}
  .tray-top button,#float-selected{font-size:.7rem;padding:.3rem}
  .instruction{font-size:.7rem;margin:.35rem 0}
  .tray{grid-template-columns:repeat(2,minmax(0,1fr));max-height:37dvh;gap:.3rem}
  .assembly-zone{margin-top:.6rem;padding:.4rem}
  .assembly-card{grid-template-columns:50px 1fr;gap:.25rem}
  .assembly-card canvas{width:50px;height:50px}
  .assembly-card button{grid-column:1 / -1}
}
.completion-banner{display:flex;align-items:center;gap:1rem;margin:0 auto 1rem;padding:1rem 1.3rem;max-width:1000px;border:2px solid #f6bd69;border-radius:14px;background:linear-gradient(110deg,#765326,#314d5a 72%);box-shadow:0 10px 28px #07121a99;animation:completion-arrive .6s ease-out}
.completion-banner[hidden]{display:none}
.completion-banner .completion-mark{font-size:clamp(2rem,5vw,3.5rem);line-height:1;color:#ffdb8e}
.completion-banner p{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#ffdb8e}
.completion-banner h2{font-size:clamp(1.2rem,2.5vw,2rem);margin:.15rem 0}
.completion-banner span:not(.completion-mark){color:#f4eee1}
@keyframes completion-arrive{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.completion-banner{animation:none}}
main.is-complete{grid-template-columns:minmax(0,1fr)}
main.is-complete .tray-area{display:none}
.board.completed{display:block;overflow:hidden}
.board.completed .finished-picture{display:block;width:100%;height:100%;object-fit:fill}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){main.is-complete{grid-template-columns:minmax(0,1fr)}main.is-complete .board{width:min(100%,1000px)}}
main.is-complete{grid-template-columns:minmax(0,1fr) minmax(275px,370px)}
main.is-complete .tray-area{display:block}
main.is-complete .tray-area > :not(.local-leaderboard){display:none}
.completion-copy{flex:1;min-width:0}
.local-score-entry{flex:0 1 320px;min-width:220px;width:320px;height:105px;border:1px solid #ffdb8e;border-radius:9px;background:#233440}
.local-leaderboard[hidden]{display:none}
.local-leaderboard h2{font-size:1.4rem}
.local-leaderboard p{margin:.35rem 0;color:#c3d0d7;font-size:.85rem}
.local-leaderboard iframe{display:block;width:100%;height:min(60vh,440px);border:1px solid #496273;border-radius:9px;background:#233440}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){main.is-complete{grid-template-columns:minmax(0,1fr) clamp(190px,30vw,290px)}.completion-banner{padding:.4rem .6rem;gap:.5rem;margin-bottom:.4rem}.completion-banner .completion-mark{font-size:1.4rem}.completion-banner h2{font-size:1rem}.completion-banner p,.completion-banner span:not(.completion-mark){font-size:.7rem}.local-score-entry{min-width:175px;width:240px;height:95px}.local-leaderboard h2{font-size:1rem}.local-leaderboard iframe{height:55vh}}
@media(max-width:850px) and not ((orientation:landscape) and (pointer:coarse)){.completion-banner{flex-wrap:wrap}.local-score-entry{flex-basis:100%;width:100%}}
.choice-select{display:none!important}
.current-picture{align-self:center;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f6bd69;font-size:.8rem}
.picture-menu{width:min(94vw,1050px);max-width:none;display:none;flex-direction:column;gap:.7rem}
.picture-menu[open]{display:flex}
.picture-menu .preview-head{margin:0}
.picture-series{display:flex;gap:.4rem;overflow-x:auto;padding:.1rem .1rem .45rem;flex:none}
.picture-series button{white-space:nowrap;font-size:.8rem}
.picture-series button.active{border-color:#f6bd69;background:#6a4f32}
.picture-menu-note{font-size:.82rem;color:#c3d0d7}
.picture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;overflow:auto;min-height:0;max-height:calc(90vh - 160px);padding:.2rem}
.picture-card{display:flex;flex-direction:column;gap:.45rem;min-width:0;text-align:left;padding:.4rem;background:#2b4250}
.picture-card img{display:block;width:100%;height:clamp(90px,12vw,145px);max-height:none;object-fit:contain;background:#17212a;border-radius:5px}
.picture-card span{font-size:.85rem;line-height:1.25}
.picture-card[aria-pressed=true]{border:2px solid #f6bd69;background:#4e4a3e}
@media(max-width:600px){.picture-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.current-picture{display:none}}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.current-picture{display:none}.picture-menu{padding:.55rem;gap:.35rem}.picture-menu .preview-head h2{font-size:1rem}.picture-series button{font-size:.7rem;padding:.3rem}.picture-menu-note{font-size:.7rem}.picture-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:calc(90vh - 105px);gap:.35rem}.picture-card{padding:.25rem}.picture-card img{height:70px}.picture-card span{font-size:.7rem}}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.difficulty-note{margin:0 0 .35rem;padding:.2rem .4rem;font-size:.68rem}}




/* Pannable tabletop: the grid lives inside a bounded parking area while the tray remains fixed. */
.play-area{overflow:hidden}
.tray-area{position:relative;z-index:5}
.zoom-controls{display:flex}
.zoom-controls #fit-board{min-width:auto}
.board-wrap{display:block;position:relative;width:100%;height:min(72vh,760px);min-height:360px;overflow:auto;justify-content:unset;border:1px solid #496273;border-radius:8px;background:#101b22;overscroll-behavior:contain;touch-action:none;scrollbar-color:#75919f #17242c}
/* Keep iOS touch gestures inside the puzzle interaction model. Text selection and
   callouts remain available in the catalogue, dialogs and search fields. */
body.table-active .play-area,body.table-active .tray-area{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.table-active .board-wrap,body.table-active .board,body.table-active .tabletop,body.table-active .board-group,body.table-active .group-shape{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
body.table-active .tray,body.table-active .piece{ -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
body.table-active button,body.table-active summary,body.table-active select,body.table-active label{touch-action:manipulation}
body.table-active canvas,body.table-active img{-webkit-user-drag:none;user-drag:none}
.board-wrap.workspace-panning{cursor:grabbing}
.tabletop{position:relative;overflow:hidden;box-sizing:border-box;background-color:#2b403f;background-image:radial-gradient(circle at 1px 1px,#ffffff12 1px,transparent 0);background-size:18px 18px;box-shadow:inset 0 0 80px #07121a66}
.tabletop.tray-piece-over{box-shadow:inset 0 0 0 3px #f6bd69,inset 0 0 80px #07121a66}
.tabletop .board{position:absolute;margin:0;max-width:none;overflow:visible}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.board-wrap{height:calc(100dvh - 125px);max-height:none;min-height:0}.tabletop .board{max-width:none}.zoom-controls{margin-left:auto}.zoom-controls #fit-board{display:inline-block}}

/* Selectable table finishes. These affect appearance only; puzzle coordinates stay unchanged. */
:root{--table-color:#294340;--table-texture:radial-gradient(circle at 18% 12%,#ffffff0b 0 1px,transparent 2px),repeating-linear-gradient(45deg,#ffffff08 0 1px,transparent 1px 5px),repeating-linear-gradient(-45deg,#06181710 0 1px,transparent 1px 6px);--table-inset:#07121a70;--piece-cell:#385c5b;--piece-cell-hover:#4b7471;--piece-cell-border:#789a98;--tray-panel:#233b42}
body[data-table-finish="charcoal"]{--table-color:#302f31;--table-texture:radial-gradient(circle at 72% 22%,#bda98a0d 0 1px,transparent 2px),repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#0000000e 0 1px,transparent 1px 5px);--table-inset:#08090b80;--piece-cell:#4a4849;--piece-cell-hover:#625e5f;--piece-cell-border:#8b8585;--tray-panel:#302f34}
body[data-table-finish="stone"]{--table-color:#aaa99f;--table-texture:radial-gradient(ellipse at 18% 24%,#ffffff1f 0 1px,transparent 3px),radial-gradient(ellipse at 72% 66%,#3d403718 0 1px,transparent 4px),repeating-linear-gradient(115deg,#ffffff0c 0 1px,transparent 1px 7px);--table-inset:#252a2a45;--piece-cell:#777b78;--piece-cell-hover:#8f9490;--piece-cell-border:#c8cbc5;--tray-panel:#354148}
body[data-table-finish="walnut"]{--table-color:#583a29;--table-texture:radial-gradient(ellipse at 28% 18%,#d2a16d12 0 2px,transparent 4px),repeating-linear-gradient(2deg,#2a130d16 0 1px,transparent 1px 7px),repeating-linear-gradient(91deg,#f1bd7910 0 1px,transparent 1px 19px);--table-inset:#16090575;--piece-cell:#654938;--piece-cell-hover:#7d5c46;--piece-cell-border:#9e7b60;--tray-panel:#342f2e}
.tabletop{background-color:var(--table-color);background-image:var(--table-texture);background-size:auto;box-shadow:inset 0 0 80px var(--table-inset);transition:background-color .18s ease}
.tabletop.tray-piece-over{box-shadow:inset 0 0 0 3px #f6bd69,inset 0 0 80px var(--table-inset)}
.tray-area{background-color:var(--tray-panel);transition:background-color .18s ease}
.piece{background-color:var(--piece-cell);border-color:var(--piece-cell-border)}
.piece:hover{background-color:var(--piece-cell-hover)}
.table-picker{position:relative;font-size:.8rem;z-index:20}
.table-picker summary{display:flex;align-items:center;gap:.35rem;list-style:none;cursor:pointer;border:1px solid #9eb4c7;border-radius:9px;background:#324b5b;color:#fff;padding:.38rem .6rem;white-space:nowrap;user-select:none}
.table-picker summary::-webkit-details-marker{display:none}
.table-picker summary::after{content:'▾';font-size:.7rem;color:#cdd9df}
.table-picker[open] summary{background:#416479;border-color:#f6bd69}
.table-picker #table-finish-name{color:#f6bd69;font-size:.76rem}
.table-swatches{position:absolute;top:calc(100% + .4rem);right:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;width:17rem;padding:.55rem;border:1px solid #75919f;border-radius:10px;background:#182832;box-shadow:0 12px 30px #07121acc}
.table-swatch{position:relative;display:flex;align-items:end;height:4rem;padding:.35rem;border:2px solid transparent;overflow:hidden;background-color:var(--swatch-color);background-image:var(--swatch-texture);color:#fff;text-shadow:0 1px 3px #000;border-radius:7px}
.table-swatch:hover{filter:brightness(1.12)}
.table-swatch[aria-pressed="true"]{border-color:#f6bd69;box-shadow:0 0 0 1px #f6bd69}
.table-swatch span{display:block;width:100%;padding:.15rem .25rem;border-radius:4px;background:#081118a8;color:#fff;text-align:left;font-size:.72rem}
.swatch-teal{--swatch-color:#294340;--swatch-texture:repeating-linear-gradient(45deg,#ffffff0a 0 1px,transparent 1px 5px)}
.swatch-charcoal{--swatch-color:#302f31;--swatch-texture:repeating-linear-gradient(90deg,#ffffff0b 0 1px,transparent 1px 5px)}
.swatch-stone{--swatch-color:#aaa99f;--swatch-texture:radial-gradient(circle at 30% 35%,#ffffff38 0 1px,transparent 3px),radial-gradient(circle at 70% 65%,#393c351f 0 1px,transparent 4px)}
.swatch-walnut{--swatch-color:#583a29;--swatch-texture:repeating-linear-gradient(2deg,#2a130d28 0 1px,transparent 1px 7px),repeating-linear-gradient(91deg,#f1bd7917 0 1px,transparent 1px 19px)}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.table-picker{font-size:.7rem}.table-picker summary{min-height:2rem;padding:.3rem}.table-swatches{position:fixed;top:3.1rem;right:clamp(195px,31vw,300px);width:14rem}.table-swatch{height:3.2rem}}
/* Stage 2: clear, ordered puzzle setup. */
.app-header{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);align-items:center;gap:clamp(1rem,3vw,3rem);padding:.8rem clamp(1rem,3vw,3rem)}
.brand{min-width:0}.brand h1{font-size:clamp(1.55rem,2.5vw,2.15rem);margin:.05rem 0 .18rem}.brand>p:last-child{font-size:.9rem;color:#c3d0d7}
.controls.setup-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.4rem .85rem;width:100%;min-width:0}
.setup-flow{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(112px,.62fr) minmax(125px,.7fr);align-items:end;gap:.55rem;min-width:0}
.setup-field{display:grid;gap:.22rem;min-width:0}.setup-label{font-size:.7rem;line-height:1;text-transform:uppercase;letter-spacing:.09em;color:#aebfc8}.setup-field select{width:100%;min-width:0}
.setup-summary strong{display:flex;align-items:center;min-height:2.4rem;padding:.5rem .65rem;border:1px solid #496273;border-radius:8px;background:#1b2c36;color:#edf3f5;font-size:.86rem;font-weight:650}
.picture-choice>div{display:grid;gap:.14rem;min-width:0}.picture-choice button{width:100%}.current-picture{display:block;order:-1;max-width:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f6bd69;font-size:.78rem;font-weight:650}
.setup-actions{display:flex;align-items:center;gap:.4rem;white-space:nowrap}.setup-actions button{padding:.55rem .68rem}.setup-actions .save-action:not(:disabled){background:#765326;border-color:#f6bd69}.setup-actions .save-action:not(:disabled):hover{background:#8b6730}.setup-actions .clear-action{background:transparent;border-color:#718693;color:#d3dde2}.setup-actions .clear-action:hover{background:#344b58}
.setup-help{grid-column:1/-1;display:flex;align-items:center;gap:.7rem;min-height:1.25rem}.mode-note{color:#b9c8cf;font-size:.72rem;line-height:1.25}.setup-panel .choice-note{flex-basis:auto;margin-left:auto;padding:.18rem .45rem;border-radius:5px;background:#614a2e;color:#ffdb8e;font-size:.72rem;line-height:1.25}.setup-panel .choice-note:empty{display:none}.setup-panel.is-locked .setup-flow{opacity:.67}.setup-panel.is-locked .setup-label{color:#f6bd69}
@media(max-width:1120px){.app-header{grid-template-columns:200px minmax(0,1fr);gap:1rem}.setup-flow{grid-template-columns:minmax(180px,1.25fr) minmax(100px,.65fr) minmax(115px,.7fr)}.current-picture{font-size:.76rem}.setup-actions button{font-size:.78rem;padding:.52rem .55rem}}
@media(max-width:850px) and not ((orientation:landscape) and (pointer:coarse)){.app-header{grid-template-columns:1fr;align-items:start}.controls.setup-panel{grid-template-columns:1fr}.setup-actions{justify-content:flex-start}.setup-help{grid-column:1}}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.app-header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;padding:.3rem .55rem;gap:.55rem}.brand h1{font-size:1rem;margin:0}.brand>p:last-child{display:none}.controls.setup-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.25rem;width:100%}.setup-flow{grid-template-columns:minmax(125px,1.25fr) minmax(76px,.65fr) minmax(88px,.72fr);gap:.25rem}.setup-field{display:grid;gap:.1rem}.setup-label{font-size:.52rem}.picture-choice>div{gap:0}.picture-choice .current-picture{display:none}.picture-choice button,.setup-actions button{min-height:2rem;padding:.3rem;font-size:.68rem}.setup-actions{gap:.22rem}.setup-field select{padding:.28rem;font-size:.72rem}.setup-help{display:none}}

/* Mobile uses separate setup and table views so play gets the full screen height. */
.to-table-action,.exit-table-action{display:none}
.exit-table-dialog{width:min(92vw,480px);padding:1.2rem}
.exit-table-dialog p{margin:.5rem 0 1rem;color:#c3d0d7;line-height:1.45}
.exit-table-actions{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
#save-exit{background:#765326;border-color:#f6bd69}
#cancel-exit{grid-column:1/-1;background:transparent}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){
  body:not(.table-active) main{display:none}
  body:not(.table-active) .app-header{height:100dvh;display:grid;grid-template-columns:minmax(135px,220px) minmax(0,720px);justify-content:center;align-content:center;gap:clamp(.75rem,3vw,2rem);padding:clamp(.7rem,3vw,1.5rem);background:radial-gradient(circle at 70% 35%,#294453 0,transparent 46%),#17212a}
  body:not(.table-active) .brand h1{font-size:clamp(1.2rem,3vw,2rem)}
  body:not(.table-active) .brand>p:last-child{display:block;font-size:.75rem}
  body:not(.table-active) .setup-panel{grid-template-columns:1fr;padding:1rem;border:1px solid #496273;border-radius:14px;background:#21323ee8;box-shadow:0 18px 45px #07121a80}
  body:not(.table-active) .setup-flow{grid-template-columns:minmax(180px,1.35fr) minmax(100px,.7fr) minmax(110px,.75fr);gap:.65rem}
  body:not(.table-active) .picture-choice .current-picture{display:block}
  body:not(.table-active) .setup-label{font-size:.62rem}
  body:not(.table-active) .setup-field select,body:not(.table-active) .picture-choice button{font-size:.78rem;min-height:2.3rem}
  body:not(.table-active) .setup-actions{justify-content:flex-end}
  body:not(.table-active) .setup-actions #save-progress,body:not(.table-active) .setup-actions .clear-action{display:none}
  body:not(.table-active) .to-table-action{display:inline-block;background:#765326;border-color:#f6bd69}
  body.table-active .app-header{display:none}
  body.table-active main{display:grid;height:100dvh;min-height:0;grid-template-columns:minmax(0,1fr) clamp(190px,30vw,290px);overflow:hidden}
  body.table-active .play-area{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:.35rem .5rem}
  body.table-active .topline{flex:none;margin-bottom:.3rem;gap:.25rem;min-height:2rem}
  body.table-active .exit-table-action{display:inline-block}
  body.table-active .difficulty-note{display:none}
  body.table-active .board-wrap{flex:1;height:auto;max-height:none;min-height:0}
  body.table-active .message{display:none}
  body.table-active .tray-area{height:100dvh}
}

/* Stage 3: a scalable, pack-led picture catalogue. */
.picture-menu{width:min(96vw,1180px);height:min(92vh,780px);max-width:none;max-height:none;grid-template-rows:auto auto minmax(0,1fr);gap:.75rem;padding:1rem;overflow:hidden}
.picture-menu[open]{display:grid}
.picture-menu .preview-head{margin:0;padding-bottom:.65rem;border-bottom:1px solid #496273}
.catalogue-toolbar{display:flex;align-items:end;justify-content:space-between;gap:1rem}
.catalogue-toolbar>p{color:#9eb1bb;font-size:.78rem;white-space:nowrap}
.catalogue-search{display:grid;flex:1 1 20rem;gap:.25rem;min-width:12rem;color:#c3d0d7;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.catalogue-search input{width:100%;min-height:2.55rem;padding:.55rem .75rem;border:1px solid #75919f;border-radius:9px;background:#13232d;color:#fff;font:inherit;font-size:.9rem;text-transform:none;letter-spacing:normal}
.catalogue-search input::placeholder{color:#8197a3}
.catalogue-search input:focus-visible{outline:3px solid #f6bd69;outline-offset:2px}
.catalogue-settings{display:grid;grid-template-columns:repeat(2,minmax(7.5rem,auto));gap:.5rem;flex:none}
.catalogue-settings label{display:grid;gap:.25rem;color:#c3d0d7;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.catalogue-settings select{min-width:0;min-height:2.55rem;padding:.45rem .55rem;font-size:.82rem}
.catalogue-body{display:grid;grid-template-columns:235px minmax(0,1fr);gap:1rem;min-height:0}
.catalogue-packs{display:flex;flex-direction:column;min-height:0;padding:.75rem;border:1px solid #496273;border-radius:12px;background:#182832}
.catalogue-packs>strong{padding:.1rem .35rem .65rem;color:#f6bd69;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.picture-series{display:flex;flex-direction:column;gap:.25rem;min-height:0;overflow-y:auto;overflow-x:hidden;padding:.05rem .2rem .05rem 0;scrollbar-color:#75919f #17242c}
.picture-series button{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:.45rem;width:100%;min-height:2.45rem;padding:.38rem .45rem;border-color:transparent;background:transparent;text-align:left;white-space:normal;font-size:.78rem}
.picture-series button:hover{background:#2b4250}
.picture-series button.active{border-color:#f6bd69;background:#4d4538}
.picture-series .volume-all-tab{margin-bottom:.12rem;border-color:#496273;background:#213744}
.picture-series .volume-all-tab .pack-number{color:#f6bd69;font-size:.58rem;font-weight:800;letter-spacing:.06em}
.picture-series .volume-all-tab .pack-name{font-weight:750;color:#eef5f8}
.picture-series .pack-number{color:#7f98a5;font-variant-numeric:tabular-nums;font-size:.68rem}
.picture-series .pack-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picture-series small{display:grid;place-items:center;min-width:1.4rem;height:1.4rem;border-radius:999px;background:#2c4655;color:#bfcdd4;font-size:.65rem}
.catalogue-results{display:flex;flex-direction:column;min-width:0;min-height:0;padding:.2rem .25rem .25rem}
.picture-pack-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem}
.picture-pack-heading p{color:#f6bd69;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em}
.picture-pack-heading h3{margin:.12rem 0 0;font-size:clamp(1.15rem,2vw,1.55rem)}
.picture-pack-heading>span{color:#b7c7cf;font-size:.78rem;white-space:nowrap}
.picture-menu-note{margin:.3rem 0 .7rem;color:#aebfc8;font-size:.76rem}
.picture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:.75rem;min-height:0;max-height:none;overflow-y:auto;padding:.15rem .35rem .35rem .15rem;scrollbar-color:#75919f #17242c}
.volume-pack-divider{grid-column:1/-1;display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;align-items:end;gap:.55rem;margin:.8rem 0 -.05rem;padding:.15rem .2rem .4rem;border-bottom:1px solid #526b78}
.volume-pack-divider:first-child{margin-top:0}
.volume-pack-divider>span{color:#d5b473;font-size:.68rem;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.volume-pack-divider>strong{color:#eef5f8;font-size:.93rem}
.volume-pack-divider>small{color:#9fb1bb;font-size:.68rem}
.picture-card{display:grid;grid-template-rows:auto minmax(3rem,auto);gap:0;min-width:0;padding:0;overflow:hidden;border:2px solid #496273;border-radius:11px;background:#253c49;text-align:left}
.picture-card:hover{border-color:#9eb4c7;background:#304b5a;transform:translateY(-1px)}
.picture-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;max-height:none;object-fit:contain;background:#101b22;border-radius:0}
.picture-card-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.55rem .65rem;line-height:1.25}
.picture-card-copy strong{font-size:.84rem;font-weight:650}
.picture-card-copy small{color:#9eb1bb;font-size:.68rem}
.picture-card-status{display:inline-block;margin-top:.2rem;padding:.15rem .42rem;border-radius:999px;background:#765326;color:#ffdb8e;font-size:.65rem;font-weight:700}
.picture-card[aria-pressed=true]{border-color:#f6bd69;background:#423f37;box-shadow:0 0 0 1px #f6bd69}
.picture-card[data-access=free] .picture-card-status{background:#285b50;color:#c8f5e8}
.picture-card[data-access=owned] .picture-card-status{background:#344f62;color:#d7e8f2}
.picture-card[data-access=locked]{filter:saturate(.45);opacity:.7}
.picture-empty{display:grid;place-items:center;min-height:12rem;color:#b7c7cf;border:1px dashed #5d7481;border-radius:10px}
.picture-empty[hidden]{display:none}
@media(max-width:700px){.catalogue-body{grid-template-columns:1fr}.catalogue-packs{padding:.4rem}.catalogue-packs>strong{display:none}.picture-series{flex-direction:row;overflow-x:auto;overflow-y:hidden}.picture-series button{grid-template-columns:auto;min-width:max-content}.picture-series .pack-number,.picture-series small{display:none}.picture-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.picture-menu{width:96vw;height:94vh;padding:.5rem;gap:.35rem}.picture-menu .preview-head{padding-bottom:.3rem}.picture-menu .preview-head h2{font-size:1rem}.catalogue-toolbar{gap:.5rem}.catalogue-toolbar>p{display:none}.catalogue-search{flex:1 1 auto;min-width:8rem;gap:.1rem;font-size:.55rem}.catalogue-search input{min-height:2rem;padding:.3rem .5rem;font-size:.72rem}.catalogue-settings{grid-template-columns:repeat(2,minmax(6.5rem,auto));gap:.3rem}.catalogue-settings label{gap:.1rem;font-size:.55rem}.catalogue-settings select{min-height:2rem;padding:.25rem .35rem;font-size:.68rem}.catalogue-body{grid-template-columns:155px minmax(0,1fr);gap:.45rem}.catalogue-packs{padding:.35rem;border-radius:8px}.catalogue-packs>strong{padding:0 .25rem .3rem;font-size:.55rem}.picture-series{flex-direction:column;overflow-y:auto;overflow-x:hidden;gap:.12rem}.picture-series button{grid-template-columns:1.35rem minmax(0,1fr) auto;min-width:0;min-height:1.85rem;padding:.2rem .3rem;font-size:.62rem}.picture-series .pack-number{display:inline;font-size:.55rem}.picture-series small{display:grid;width:1.1rem;min-width:1.1rem;height:1.1rem;font-size:.52rem}.picture-pack-heading h3{font-size:.9rem}.picture-pack-heading p,.picture-pack-heading>span,.picture-menu-note{font-size:.58rem}.picture-menu-note{margin:.1rem 0 .3rem}.picture-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}.picture-card{grid-template-rows:auto minmax(2rem,auto);border-radius:7px}.picture-card-copy{padding:.3rem .4rem}.picture-card-copy strong{font-size:.63rem}.picture-card-copy small,.picture-card-status{font-size:.52rem}.picture-card-status{margin-top:.05rem;padding:.08rem .28rem}}

/* Stage 4: optional board grid and adjustable loose-piece density. */
.slot{border-color:transparent}
.board.show-grid .slot:not(.filled){border-color:#ffffff26}
.tray-tools{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.tray-columns{display:flex;align-items:center;gap:.35rem;color:#c3d0d7;font-size:.7rem;white-space:nowrap}
.tray-columns select{min-width:3.2rem;padding:.32rem .4rem;font-size:.78rem}
.tray-overview-toggle{padding:.34rem .5rem;font-size:.7rem;white-space:nowrap}
.tray-area.sorting-overview .tray-overview-toggle{border-color:#f6bd69;background:#765326;color:#fff1d5}
.tray-help>summary{display:none}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.tray-tools{gap:.25rem}.tray-columns{font-size:.6rem}.tray-columns select{min-width:2.8rem;min-height:1.85rem;padding:.2rem;font-size:.68rem}}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.tray[data-columns="4"] .piece .turn,.tray[data-columns="5"] .piece .turn{display:none}}
/* Stage 4: grouped, legible workspace controls. */
:root{--view-control-height:2.3rem}
.topline{align-items:center;gap:.7rem;margin-bottom:.65rem}
.play-status{display:flex;align-items:center;gap:.55rem;flex:0 0 auto;min-height:var(--view-control-height)}
.play-status strong{font-size:1rem;white-space:nowrap}
.play-status #timer{min-width:3.1rem;font-size:.82rem;text-align:left}
.view-controls{display:flex;align-items:center;gap:.4rem;flex:1 1 auto;min-width:0}
.view-action,.control-toggle span,.table-picker summary{min-height:var(--view-control-height)}
.view-action{display:flex;align-items:center;padding:.4rem .68rem;font-size:.78rem;white-space:nowrap}
.view-toggles{display:flex;align-items:center;gap:.3rem}
.control-toggle{position:relative;display:block;white-space:nowrap;cursor:pointer}
.control-toggle input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.control-toggle span{display:flex;align-items:center;gap:.38rem;padding:.38rem .58rem;border:1px solid #617987;border-radius:8px;background:#253945;color:#cbd7dd;font-size:.76rem;line-height:1;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.control-toggle span::before{content:'';width:.48rem;height:.48rem;flex:none;border:1px solid #8297a2;border-radius:999px;background:#16252e}
.control-toggle:hover span{background:#304c5b;border-color:#8da3af}
.control-toggle input:checked+span{border-color:#d7a955;background:#594b35;color:#ffdfa2;box-shadow:inset 0 0 0 1px #9a7435}
.control-toggle input:checked+span::before{border-color:#ffe2a9;background:#f6bd69;box-shadow:0 0 0 2px #f6bd6930}
.control-toggle input:focus-visible+span{outline:3px solid #f6bd69;outline-offset:2px}
.table-picker summary{padding:.38rem .62rem;font-size:.76rem}
.zoom-controls{display:grid;grid-template-columns:2.25rem 3.45rem 2.25rem auto;align-items:stretch;gap:0;margin-left:auto;min-height:var(--view-control-height);overflow:hidden;border:1px solid #708896;border-radius:9px;background:#21343f}
.zoom-controls button{min-width:0;min-height:var(--view-control-height);padding:.3rem .52rem;border:0;border-left:1px solid #516a78;border-radius:0;background:transparent;font-size:.82rem}
.zoom-controls button:first-child{border-left:0}
.zoom-controls button:hover{background:#416479}
.zoom-controls #fit-board{min-width:2.8rem;background:#304b59}
.zoom-controls #fit-board:hover{background:#416479}
.zoom-controls #zoom-level{display:flex;align-items:center;justify-content:center;min-width:0;border-left:1px solid #516a78;color:#f6bd69;font-size:.74rem;font-weight:700}
.difficulty-note{width:max-content;max-width:min(100%,1000px);margin:-.15rem 0 .55rem;padding:.28rem .5rem;border:1px solid #526976;border-left:0;border-radius:6px;background:#20333e;color:#b8c8d0;font-size:.72rem;line-height:1.25}
.difficulty-note::before{content:'ⓘ';margin-right:.38rem;color:#d5b473}
@media(max-width:1180px) and (min-width:1001px){
  .topline{align-items:flex-start}
  .view-controls{flex-wrap:wrap}
  .zoom-controls{margin-left:0}
}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){
  :root{--view-control-height:2rem}
  body.table-active .topline{align-items:center;gap:.25rem;margin-bottom:.3rem}
  .play-status{gap:.3rem}
  .play-status strong{font-size:.72rem}
  .play-status #timer{min-width:2.7rem;font-size:.68rem}
  .view-controls{gap:.25rem;flex-wrap:wrap}
  .view-action{padding:.25rem .4rem;font-size:.66rem}
  .view-toggles{gap:.2rem}
  .control-toggle span{gap:.25rem;padding:.25rem .38rem;font-size:.64rem}
  .control-toggle span::before{width:.4rem;height:.4rem}
  .table-picker summary{padding:.25rem .4rem;font-size:.64rem}
  .zoom-controls{grid-template-columns:2rem 2.8rem 2rem auto;margin-left:auto}
  .zoom-controls button{padding:.2rem .38rem;font-size:.7rem}
  .zoom-controls #zoom-level{font-size:.64rem}
}
@media(max-width:760px) and (orientation:landscape) and (pointer:coarse){
  body.table-active .topline{display:grid;grid-template-columns:auto minmax(0,1fr)}
  .view-controls{justify-content:flex-end}
  .view-action{font-size:.62rem}
  .control-toggle span{font-size:.6rem}
  .zoom-controls{margin-left:0}
}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){
  body.table-active .difficulty-note:not([hidden]){display:block;width:max-content;max-width:100%;margin:0 0 .3rem;padding:.2rem .4rem;font-size:.62rem}
  body.table-active .difficulty-note[hidden]{display:none}
}
/* Tray thumbnails expand with the chosen density; one column becomes a close-up view. */
.piece canvas{display:block;width:100%;height:100%;object-fit:contain}
/* Keep long pack catalogues inside their panel and independently scrollable. */
.catalogue-packs{overflow:hidden}
.catalogue-packs .picture-series{flex:1 1 auto;min-height:0;padding-bottom:.35rem;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
.pack-volume-label{display:block;margin:.45rem .35rem .15rem;color:#d5b473;font-size:.58rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.pack-volume-label:first-child{margin-top:.05rem}

/* Stage 5: clearer sorting and compact joined-section storage. */
.piece{transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.piece.selected{z-index:1;transform:translateY(-2px);border-color:#7893a1;background:#2f4956;box-shadow:0 5px 18px #07121a99}
.piece.selected::after{content:attr(data-selection-order);position:absolute;left:.28rem;top:.28rem;display:grid;place-items:center;min-width:1.45rem;height:1.45rem;padding:0 .25rem;border:2px solid #fff;border-radius:999px;background:#b66d16;color:#fff;font-size:.72rem;font-weight:800;line-height:1;box-shadow:0 2px 8px #07121aaa;pointer-events:none}
.tray-area.return-target::before,.tray-area.store-target::before,.assembly-zone.over::before{position:absolute;z-index:30;left:50%;top:.65rem;translate:-50% 0;padding:.42rem .7rem;border:1px solid #ffdb8e;border-radius:999px;background:#17212aee;color:#ffdb8e;font-size:.76rem;font-weight:750;white-space:nowrap;box-shadow:0 5px 16px #07121aaa;pointer-events:none}
.tray-area.return-target::before{content:"Return to open tray"}
.tray-area.store-target::before{content:"Store joined section"}
.assembly-zone{position:relative;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.assembly-zone.over{border-style:solid;border-color:#f6bd69;background:#3d5661;box-shadow:inset 0 0 0 2px #f6bd6955}
.assembly-zone.over::before{content:"Store joined section"}
.assembly-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.assembly-heading>div{min-width:0}
.assembly-heading>button{flex:none;padding:.32rem .52rem;font-size:.72rem}
.assembly-empty{margin:.55rem 0 0;padding:.7rem;border:1px dashed #67818e;border-radius:8px;color:#aebfc8;font-size:.78rem;line-height:1.35;text-align:center}
.assembly-zone.collapsed .assembly-list{display:none}
.assembly-card{grid-template-columns:96px minmax(0,1fr);gap:.7rem;padding:.55rem}
.assembly-card canvas{width:96px;height:82px}
.assembly-card-actions{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.assembly-card-actions button{width:100%}
.sorting-trays{margin:.25rem 0 .45rem;padding:.45rem;border:1px solid #526d7b;border-radius:9px;background:#192b35}
.sorting-tray-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.35rem}
.sorting-tray-heading>strong{color:#d5b473;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.sorting-tray-heading>div{display:flex;gap:.3rem}
.sorting-tray-heading button{padding:.25rem .45rem;font-size:.68rem}
.sorting-tray-tabs{display:flex;gap:.3rem;overflow-x:auto;padding:.05rem 0 .2rem;scrollbar-width:thin}
.sorting-tray-tabs button{display:flex;align-items:center;gap:.35rem;min-width:max-content;padding:.35rem .5rem;border-color:#536f7e;background:#29414e;font-size:.72rem}
.sorting-tray-tabs button[aria-selected=true]{border-color:#f6bd69;background:#594a36;box-shadow:inset 0 0 0 1px #f6bd6955}
.sorting-tray-tabs button.drop-target{border-color:#ffdb8e;background:#6a5438;box-shadow:0 0 0 2px #ffdb8e66,0 0 18px #ffdb8e44;translate:0 -1px}
.sorting-tray-tabs small{display:grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .2rem;border-radius:999px;background:#172832;color:#c9d5da;font-size:.6rem}
.tray-transfer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.35rem;margin-top:.35rem;padding-top:.35rem;border-top:1px solid #3f5966}
.tray-transfer[hidden]{display:none}
.tray-transfer label{display:grid;gap:.15rem;color:#b9c8cf;font-size:.62rem}
.tray-transfer select{min-width:0;width:100%;padding:.35rem;font-size:.7rem}
.tray-transfer button{padding:.4rem .55rem;font-size:.7rem}
.sorting-tray-dialog{width:min(92vw,480px)}
.sorting-tray-dialog>label{display:block;margin:.2rem 0 .3rem;color:#d5e0e5;font-size:.78rem}
.sorting-tray-dialog>input{width:100%;padding:.65rem;border:1px solid #78909d;border-radius:8px;background:#edf3f5;color:#17212a;font:inherit}
.sorting-tray-dialog>p{margin:.65rem 0;color:#b8c7cf;font-size:.78rem;line-height:1.4}
.sorting-tray-dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}
#remove-sorting-tray{margin-right:auto;border-color:#b47d70;background:#593b39}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.piece.selected::after{left:.15rem;top:.15rem;min-width:1.1rem;height:1.1rem;border-width:1px;font-size:.58rem}.assembly-heading>button{padding:.2rem .34rem;font-size:.6rem}.assembly-empty{padding:.4rem;font-size:.62rem}.assembly-card{grid-template-columns:64px minmax(0,1fr);gap:.35rem}.assembly-card canvas{width:64px;height:58px}.assembly-card-actions{gap:.25rem}.assembly-card-actions button{font-size:.62rem;padding:.25rem}}

/* Stage 7: restrained feedback for turning, joining and fitting pieces. */
.piece.feedback-rotate canvas{animation:piece-turn-feedback .24s ease-out}
.board-group.feedback-rotate .group-shape{animation:group-turn-feedback .24s ease-out}
.board-group.feedback-join{animation:group-join-feedback .38s ease-out}
.slot.feedback-lock{z-index:2;animation:piece-lock-feedback .48s ease-out}
#progress.feedback-progress{animation:progress-feedback .48s ease-out}
.slot.feedback-invalid{z-index:3;animation:invalid-slot-feedback .42s ease-out}
.piece.feedback-invalid{animation:invalid-piece-feedback .42s ease-out}
#message.feedback-invalid{animation:invalid-message-feedback .5s ease-out}
#message.feedback-confirm,button.feedback-confirm{animation:confirm-feedback .7s ease-out}
@keyframes piece-turn-feedback{from{transform:rotate(-90deg) scale(.96)}to{transform:rotate(0) scale(1)}}
@keyframes group-turn-feedback{from{transform:rotate(calc(var(--rotation) - 90deg))}to{transform:rotate(var(--rotation))}}
@keyframes group-join-feedback{0%{filter:drop-shadow(0 0 0 #f6bd6900);transform:scale(.96)}45%{filter:drop-shadow(0 0 11px #f6bd69);transform:scale(1.035)}100%{filter:drop-shadow(0 0 7px var(--group-accent));transform:scale(1)}}
@keyframes piece-lock-feedback{0%{background:#f6bd6966;box-shadow:inset 0 0 0 3px #ffe4a9,0 0 12px #f6bd69}100%{background:transparent;box-shadow:none}}
@keyframes progress-feedback{45%{color:#fff3cc;text-shadow:0 0 9px #f6bd69;transform:scale(1.045)}100%{color:inherit;text-shadow:none;transform:scale(1)}}
@keyframes invalid-slot-feedback{0%,100%{background:transparent;transform:translateX(0)}25%{background:#d9826844;transform:translateX(-2px)}60%{background:#d982682e;transform:translateX(2px)}}
@keyframes invalid-piece-feedback{25%{border-color:#f29a82;box-shadow:0 0 0 2px #f29a8277;transform:translateX(-2px)}60%{transform:translateX(2px)}}
@keyframes invalid-message-feedback{35%{color:#ffd0c3;text-shadow:0 0 7px #c76d58}100%{color:#f6bd69;text-shadow:none}}
@keyframes confirm-feedback{35%{border-color:#f6bd69;box-shadow:0 0 0 2px #f6bd6955,0 0 12px #f6bd6955;color:#fff3cc}100%{box-shadow:none}}
@media(prefers-reduced-motion:reduce){
  .piece,.board-group{transition:none}
  .piece.feedback-rotate canvas,.board-group.feedback-rotate .group-shape,.board-group.feedback-join,.slot.feedback-lock,#progress.feedback-progress,.slot.feedback-invalid,.piece.feedback-invalid,#message.feedback-invalid,#message.feedback-confirm,button.feedback-confirm{animation-duration:.01ms;animation-iteration-count:1}
}

/* Three local progress slots. */
.save-manager{width:min(94vw,900px);max-width:none}
.save-manager .preview-head h2{margin:.12rem 0 0}
.save-manager-note{margin:-.1rem 0 .8rem;color:#c3d0d7;font-size:.86rem;line-height:1.4}
.save-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.save-slot{display:flex;flex-direction:column;min-width:0;min-height:18rem;overflow:hidden;border:1px solid #668292;border-radius:11px;background:#263d49}
.save-slot.empty{justify-content:center;align-items:center;padding:1rem;border-style:dashed;text-align:center}
.save-slot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#101b22}
.save-slot-copy{display:grid;gap:.25rem;padding:.7rem}
.save-slot-copy strong{font-size:.95rem}.save-slot-copy span,.save-slot-copy small{color:#bdcbd2;font-size:.75rem;line-height:1.35}
.save-slot-number{color:#f6bd69!important;font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.save-slot-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem;margin-top:auto;padding:.65rem}
.save-slot-actions button{padding:.45rem .55rem;font-size:.76rem}.save-slot-actions .clear-save{background:#49383a;border-color:#947076}
.save-slots-full{width:min(92vw,520px)}.save-slots-full h2{margin:0 0 .55rem}.save-slots-full>p{color:#c3d0d7;line-height:1.45}
.save-full-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:1rem}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.save-manager{width:96vw;height:94vh;padding:.55rem}.save-manager-note{margin-bottom:.4rem;font-size:.66rem}.save-slots{gap:.4rem}.save-slot{min-height:0}.save-slot-copy{padding:.4rem;gap:.12rem}.save-slot-copy strong{font-size:.72rem}.save-slot-copy span,.save-slot-copy small{font-size:.6rem}.save-slot-actions{padding:.35rem;gap:.25rem}.save-slot-actions button{padding:.3rem;font-size:.62rem}.save-full-actions button{font-size:.68rem;padding:.4rem}}

/* Stage 6: respect phone cut-outs, browser chrome and the home indicator. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
@media(max-width:700px) and (orientation:portrait) and (pointer:coarse){.rotate-phone{padding:max(2rem,var(--safe-top)) max(2rem,var(--safe-right)) max(2rem,var(--safe-bottom)) max(2rem,var(--safe-left))}}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){
  body{overscroll-behavior:none}
  body:not(.table-active) .app-header{padding:max(.7rem,var(--safe-top)) max(.7rem,var(--safe-right)) max(.7rem,var(--safe-bottom)) max(.7rem,var(--safe-left))}
  body.table-active .play-area{padding-top:max(.35rem,var(--safe-top));padding-bottom:max(.35rem,var(--safe-bottom));padding-left:max(.5rem,var(--safe-left))}
  body.table-active .tray-area{padding-top:max(.5rem,var(--safe-top));padding-right:max(.5rem,var(--safe-right));padding-bottom:max(.5rem,var(--safe-bottom));overscroll-behavior:contain}
  dialog{max-width:calc(100vw - var(--safe-left) - var(--safe-right) - .75rem);max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - .75rem)}
  .picture-menu,.save-manager{width:calc(100vw - var(--safe-left) - var(--safe-right) - .75rem);height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - .75rem)}
  body.table-active .tray-area{display:flex;flex-direction:column;overflow:hidden}
  .tray-top,.tray-help,.sorting-trays,#float-selected,.assembly-zone{flex:none}
  .tray-help>summary{display:flex;align-items:center;justify-content:space-between;min-height:1.8rem;margin:.2rem 0;padding:.2rem .4rem;border:1px solid #587180;border-radius:7px;background:#1b2c36;color:#cbd7dd;font-size:.64rem;cursor:pointer;list-style:none}
  .tray-help>summary::-webkit-details-marker{display:none}
  .tray-help>summary::after{content:'+';color:#f6bd69;font-size:.8rem;font-weight:800}
  .tray-help[open]>summary::after{content:'−'}
  .tray-help .instruction{margin:.25rem 0 .35rem;padding:0 .15rem;font-size:.64rem;line-height:1.35}
  #float-selected{margin:.2rem 0 .35rem}
  .sorting-trays{margin:.12rem 0 .25rem;padding:.28rem}
  .sorting-tray-heading{margin-bottom:.18rem}
  .sorting-tray-heading>strong{font-size:.55rem}
  .sorting-tray-heading button,.sorting-tray-tabs button{padding:.2rem .34rem;font-size:.6rem}
  .sorting-tray-tabs small{min-width:1rem;height:1rem;font-size:.5rem}
  .tray-transfer{margin-top:.2rem;padding-top:.2rem}
  .tray-transfer label{font-size:.52rem}
  .tray-transfer select,.tray-transfer button{min-height:1.75rem;padding:.2rem .3rem;font-size:.58rem}
  body.table-active .tray{flex:1 1 auto;min-height:0;max-height:none;overscroll-behavior:contain}
  body.table-active .assembly-zone{min-height:0;margin-top:.35rem}
  body.table-active .assembly-zone:not(.has-sections):not(.over){display:none}
  body.table-active .assembly-empty{display:none}
  body.table-active .assembly-zone.has-sections:not(.collapsed){display:flex;flex-direction:column;max-height:42dvh;overflow:hidden}
  body.table-active .assembly-zone.has-sections:not(.collapsed) .assembly-list{min-height:0;overflow-y:auto;overscroll-behavior:contain}
  body.table-active .tray-area.sections-expanded .tray{display:none}
  body.table-active .tray-area.sections-expanded .assembly-zone{flex:1 1 auto;max-height:none;min-height:0}
}




/* Menu-screen navigation shared by laptop, tablet and phone. */
.home-screen{display:none;min-height:100dvh;padding:clamp(1rem,4vw,4rem);background:radial-gradient(circle at 72% 28%,#315363 0,transparent 42%),linear-gradient(145deg,#17212a,#101920);color:#f4eee1}
body.home-active .home-screen{display:grid;place-items:center}
body.home-active .app-header,body.home-active main{display:none}
body.home-active .rotate-phone{display:none}
body.table-active .home-screen,body.table-active .app-header{display:none}
body.table-active main{display:grid;min-height:100dvh}
body.table-active .exit-table-action{display:inline-block}
.home-shell{display:grid;grid-template-columns:minmax(220px,330px) minmax(360px,700px);align-items:center;gap:clamp(1.5rem,5vw,5rem);width:min(100%,1080px)}
.home-brand h1{margin:.15rem 0 .4rem;font-size:clamp(2.4rem,6vw,5rem);line-height:.95}.home-brand>p:last-child{color:#c7d4da;font-size:clamp(.9rem,1.7vw,1.15rem)}
.home-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.home-card{display:flex;min-height:8rem;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.35rem;padding:1rem;text-align:left;border:1px solid #587484;border-radius:14px;background:#213641e8;box-shadow:0 12px 30px #07121a66}
.home-card:hover{border-color:#b7c9d2;background:#2d4a58;transform:translateY(-1px)}.home-card.primary{border-color:#d7a765;background:#654d31}.home-card.primary:hover{background:#795d3b}.home-card strong{font-size:1.15rem}.home-card span{color:#bfd0d8;font-size:.78rem;line-height:1.35}.home-card.future{opacity:.58;cursor:default}
.play-status{display:flex;align-items:center;gap:.65rem;min-width:0}.table-identity{display:grid;min-width:0;margin-right:auto}.table-identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-identity span{font-size:.68rem;color:#b9c8cf}.play-status>#progress{white-space:nowrap}.play-status>#timer{white-space:nowrap}.play-status>#table-save-progress{padding:.38rem .55rem;font-size:.72rem;white-space:nowrap}
.completion-actions{display:flex;justify-content:flex-end;gap:.5rem;margin:-.35rem 0 .65rem}.completion-actions[hidden]{display:none}.completion-actions button:first-child{background:#765326;border-color:#f6bd69}
.leaderboard-menu{width:min(94vw,900px);max-width:none}.leaderboard-filters{display:grid;grid-template-columns:minmax(220px,1fr) minmax(110px,.35fr) minmax(120px,.4fr);gap:.65rem;margin-bottom:.75rem}.leaderboard-filters label{display:grid;gap:.25rem;color:#cbd7dd;font-size:.72rem}.leaderboard-filters select{width:100%;min-width:0}.leaderboard-menu iframe{display:block;width:100%;height:min(58vh,520px);border:1px solid #587180;border-radius:10px;background:#17212a}
@media(max-width:760px){.home-shell{grid-template-columns:1fr;gap:1rem}.home-brand h1{font-size:2rem}.home-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}.home-card{min-height:5.4rem;padding:.7rem}.leaderboard-filters{grid-template-columns:1fr 1fr}.leaderboard-filters label:first-child{grid-column:1/-1}}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.home-screen{padding:max(.6rem,var(--safe-top)) max(.8rem,var(--safe-right)) max(.6rem,var(--safe-bottom)) max(.8rem,var(--safe-left))}.home-shell{grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:1rem}.home-brand h1{font-size:1.7rem}.home-navigation{gap:.45rem}.home-card{min-height:4.7rem;padding:.55rem}.home-card strong{font-size:.85rem}.home-card span{font-size:.58rem}.play-status{gap:.3rem}.table-identity{max-width:25vw}.table-identity strong{font-size:.72rem}.table-identity span{font-size:.55rem}.play-status>#table-save-progress{font-size:.6rem;padding:.25rem .35rem}.leaderboard-menu{width:calc(100vw - var(--safe-left) - var(--safe-right) - .75rem);height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - .75rem);padding:.55rem}.leaderboard-filters{grid-template-columns:minmax(220px,1fr) 110px 120px;margin-bottom:.35rem}.leaderboard-menu iframe{height:calc(100% - 6.6rem)}}

/* Home visual polish: artwork first, with Continue/New Puzzle as the two main routes. */
.home-screen{position:relative;overflow:hidden;background:radial-gradient(circle at 74% 20%,#294958 0,transparent 42%),radial-gradient(circle at 20% 80%,#172d38 0,transparent 38%),linear-gradient(145deg,#111b22,#172832 58%,#101920)}
.home-screen::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0c151dd9 0,#0c151d4d 35%,transparent 62%)}
.home-shell{position:relative;z-index:1;grid-template-columns:minmax(280px,390px) minmax(410px,650px);width:min(100%,1120px);gap:clamp(2rem,6vw,6.5rem)}
.home-brand{position:relative;align-self:stretch;display:flex;min-height:31rem;flex-direction:column;justify-content:center}
.home-brand h1{position:relative;z-index:2;text-shadow:0 5px 24px #07121acc}
.home-brand>p{position:relative;z-index:2}.home-brand>p:last-of-type{max-width:18rem;color:#d3dce0}
.home-art{position:absolute;z-index:0;inset:31% -18% -4% -20%;pointer-events:none;filter:saturate(.82)}
.home-art span{position:absolute;display:block;overflow:hidden;opacity:.26;filter:contrast(1.06);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,#000c 53%,transparent 76%);mask-image:radial-gradient(ellipse at center,#000 30%,#000c 53%,transparent 76%)}
.home-art img{width:100%;height:100%;object-fit:cover}
.home-art span:nth-child(1){left:0;top:8%;width:48%;height:42%;rotate:-7deg;clip-path:polygon(8% 8%,94% 0,100% 78%,68% 100%,0 85%)}
.home-art span:nth-child(2){right:0;top:0;width:55%;height:45%;rotate:6deg;clip-path:polygon(0 4%,87% 0,100% 83%,24% 100%)}
.home-art span:nth-child(3){left:14%;bottom:2%;width:54%;height:47%;rotate:3deg;clip-path:polygon(5% 0,100% 13%,91% 100%,0 84%)}
.home-art span:nth-child(4){right:-4%;bottom:6%;width:42%;height:39%;rotate:-7deg;clip-path:polygon(10% 0,100% 8%,90% 100%,0 82%)}
.home-art span:nth-child(5){left:36%;top:29%;width:42%;height:38%;opacity:.2;rotate:-2deg;clip-path:polygon(0 8%,88% 0,100% 88%,10% 100%)}
.home-navigation{grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:.72rem}
.home-card{min-height:0;justify-content:center;box-shadow:0 12px 32px #07121a52;transition:transform .14s ease,background-color .14s ease,border-color .14s ease,box-shadow .14s ease}
.home-card-copy{display:grid;min-width:0;gap:.22rem;text-align:left}.home-card-kicker{color:#e1bb77!important;font-size:.62rem!important;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.home-card-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-continue-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;min-height:8.6rem;padding:1rem 1.15rem}.home-continue-thumbs{display:none;width:9.4rem;aspect-ratio:3/2;gap:.22rem;overflow:hidden;border-radius:9px;box-shadow:0 6px 18px #07121a88;background:#10202a}.home-continue-thumbs[data-count="1"]{grid-template-columns:1fr}.home-continue-thumbs[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.home-continue-thumbs[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.home-save-thumb{position:relative;min-width:0;overflow:hidden}.home-save-thumb img{display:block;width:100%;height:100%;object-fit:cover}.home-save-thumb small{position:absolute;right:.2rem;bottom:.2rem;padding:.08rem .23rem;border-radius:999px;background:#07121acc;color:#fff;font-size:.51rem;line-height:1.25}.home-continue-card>small,.home-continue-card .home-card-copy>small{color:#9fb1ba;font-size:.68rem}.home-continue-card:disabled{opacity:.62;cursor:default}.home-continue-card:disabled:hover{border-color:#587484;background:#213641e8;transform:none}
body.home-has-saves .home-continue-card{grid-template-columns:9.4rem minmax(0,1fr);border-color:#d7a765;background:linear-gradient(115deg,#674c2e,#3e382d 58%,#253945);box-shadow:0 15px 38px #07121a80,inset 0 0 0 1px #f6bd6924}
body.home-has-saves .home-continue-card:hover{border-color:#f0c477;background:linear-gradient(115deg,#765a37,#493f30 58%,#304b59)}
body.home-has-saves .home-continue-thumbs{display:grid}
.home-new-card{grid-column:1/-1;display:flex;min-height:6.4rem;flex-direction:row;align-items:center;justify-content:space-between;padding:1rem 1.15rem}.home-new-card .home-card-arrow{flex:none;color:#ffd58b;font-size:1.65rem}.home-new-card.primary{border-color:#d7a765;background:linear-gradient(115deg,#674c2e,#4d3d2b)}.home-new-card.primary:hover{background:linear-gradient(115deg,#765a37,#5a4730)}
body.home-has-saves .home-new-card{border-color:#587484;background:#213641e8}body.home-has-saves .home-new-card:hover{border-color:#b7c9d2;background:#2d4a58}
.home-secondary-card{min-height:5.6rem;padding:.8rem .9rem}.home-secondary-card strong{font-size:.9rem}.home-secondary-card span{font-size:.68rem}
@media(max-width:760px){.home-brand{min-height:0}.home-art{display:none}.home-continue-card{min-height:6.2rem}.home-new-card{min-height:5.2rem}}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.home-shell{grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:1.2rem}.home-brand{min-height:0}.home-art{inset:35% -15% 0 -18%}.home-continue-card{min-height:5.7rem;padding:.55rem .65rem}.home-continue-thumbs{width:7.2rem}body.home-has-saves .home-continue-card{grid-template-columns:7.2rem minmax(0,1fr)}.home-new-card{min-height:4.3rem;padding:.55rem .65rem}.home-secondary-card{min-height:3.8rem;padding:.48rem .58rem}.home-card-kicker{font-size:.5rem!important}.home-card-copy strong{font-size:.78rem}.home-card-copy>span:not(.home-card-kicker){font-size:.56rem}.home-continue-card .home-card-copy>small{font-size:.52rem}.home-save-thumb small{font-size:.43rem}.home-new-card .home-card-arrow{font-size:1.15rem}.home-secondary-card strong{font-size:.7rem}.home-secondary-card span{font-size:.52rem}}

/* Catalogue cards offer a fast Play route and an optional full-picture preview. */
.picture-card{grid-template-rows:auto minmax(3rem,auto) auto}
.picture-card[data-selected=true]{border-color:#f6bd69;background:#423f37;box-shadow:0 0 0 1px #f6bd69}
.picture-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;padding:0 .55rem .55rem}
.picture-card-actions button{min-width:0;padding:.4rem .45rem;font-size:.7rem;font-weight:700}
.picture-card-actions .picture-preview-action{background:#263e4b;border-color:#6f8997}
.picture-card-actions .picture-play-action{background:#765326;border-color:#d8aa63;color:#fff1d5}
.picture-card-actions .picture-play-action:hover{background:#8a6330}
.picture-card-media{position:relative;display:block;min-width:0;background:#101b22}.picture-card-media>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.picture-score-action{position:absolute;top:.4rem;right:.4rem;min-height:0;padding:.3rem .52rem;border-color:#d8aa63;background:#172733dc;color:#fff1d5;font-size:.64rem;font-weight:750;box-shadow:0 3px 10px #07121aaa;backdrop-filter:blur(3px)}.picture-score-action:hover{background:#765326;border-color:#f6bd69}
#preview.catalogue-preview{width:min(96vw,1400px);height:min(94vh,920px);max-width:none;max-height:none;display:flex;flex-direction:column;overflow:hidden;padding:1rem}
#preview.catalogue-preview .preview-head{flex:none}
#preview.catalogue-preview #preview-image{flex:1 1 auto;min-height:0;width:100%;height:100%;max-height:none;object-fit:contain;background:#101b22;border-radius:7px}
.preview-actions{display:flex;flex:none;justify-content:flex-end;gap:.55rem;padding-top:.75rem}
.preview-actions[hidden]{display:none}
.preview-actions #preview-play{background:#765326;border-color:#d8aa63;color:#fff1d5}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.picture-card{grid-template-rows:auto minmax(2rem,auto) auto}.picture-card-actions{gap:.25rem;padding:0 .3rem .3rem}.picture-card-actions button{min-height:1.75rem;padding:.2rem .3rem;font-size:.56rem}.picture-score-action{top:.25rem;right:.25rem;padding:.2rem .36rem;font-size:.5rem}#preview.catalogue-preview{width:calc(100vw - var(--safe-left) - var(--safe-right) - .75rem);height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - .75rem);padding:.55rem}.preview-actions{padding-top:.4rem}.preview-actions button{min-height:2rem;padding:.3rem .55rem;font-size:.65rem}}

/* Stage 9: shared visual tokens, keyboard focus and non-colour state cues. */
:root{--ui-focus:#ffd27d;--ui-text:#f4eee1;--ui-muted:#c4d1d7;--ui-control:#324b5b;--ui-control-hover:#416479;--ui-selected:#6a5132;--ui-warning:#ffd58b;--ui-danger:#f3a28f;--ui-radius-control:9px;--ui-radius-panel:12px;--ui-control-height:2.3rem;--ui-space-1:.25rem;--ui-space-2:.5rem;--ui-space-3:.75rem;--ui-space-4:1rem}
html{font-size:100%;color-scheme:dark}
body{min-width:0;color:var(--ui-text);line-height:1.45}
button,select,input,summary{border-radius:var(--ui-radius-control)}
button:not(.slot):not(.piece):not(.turn):not(.picture-score-action),select,input:not([type="checkbox"]){min-height:var(--ui-control-height)}
button{background-color:var(--ui-control)}
@media(hover:hover){button:hover{background-color:var(--ui-control-hover)}}
button:disabled,select:disabled,input:disabled{opacity:.58;filter:saturate(.4);cursor:not-allowed}
:where(button,select,input,summary,[role="button"],[role="tab"],.slot,.piece):focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px;box-shadow:0 0 0 1px #17212a}
summary:focus-visible{border-color:var(--ui-focus)}
dialog{border-radius:var(--ui-radius-panel)}
.catalogue-toolbar>p,.picture-card-copy small,.picture-menu-note,.save-manager-note,.assembly-empty,.tray-transfer label{color:var(--ui-muted)}
.control-toggle input:checked+span::before{content:'✓';display:grid;place-items:center;color:#17212a;font-size:.48rem;font-weight:900}
.table-swatch[aria-pressed="true"]::after{content:'✓';position:absolute;right:.35rem;top:.35rem;display:grid;place-items:center;width:1.25rem;height:1.25rem;border:1px solid #fff;border-radius:999px;background:#17212ae6;color:#fff;font-size:.72rem;font-weight:900}
.picture-series button[aria-selected="true"] .pack-name::after{content:'  ✓';color:#ffe0a3;font-weight:900}
.sorting-tray-tabs button[aria-selected="true"]::before{content:'✓';color:#ffe0a3;font-weight:900}
.picture-card[data-selected="true"]{outline:1px solid #ffe0a3;outline-offset:-4px}
.difficulty-note{color:#d4e0e5}
.difficulty-note::before{content:'ⓘ  ';color:var(--ui-warning);font-weight:800}
.piece.selected{outline:0}
body[data-table-finish="stone"] .piece.selected,body[data-table-finish="walnut"] .piece.selected{box-shadow:0 5px 18px #07121acc}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){:root{--ui-control-height:2rem}}
@media(forced-colors:active){button,select,input,summary,.home-card,.picture-card,.piece,.assembly-zone,.save-slot{forced-color-adjust:auto}.piece.selected,.board-group.selected-group,.picture-card[data-selected="true"],[aria-selected="true"],[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:2px}.difficulty-note{border:2px solid CanvasText}.difficulty-note::before{color:CanvasText}}
/* Compact landscape tray: keep the controls in the top quarter on phones. */
@media(max-width:1000px) and (orientation:landscape){
  body.table-active .tray-area{display:flex;flex-direction:column;overflow:hidden;gap:.18rem}
  body.table-active .tray-top{align-items:center;gap:.25rem;min-height:2rem}
  body.table-active .tray-top>div:first-child{display:flex;align-items:baseline;gap:.3rem;min-width:0}
  body.table-active .tray-top h2{font-size:.82rem;white-space:nowrap}
  body.table-active .tray-top p{margin:0;font-size:.58rem;white-space:nowrap}
  body.table-active .tray-tools{flex-direction:row;align-items:center;gap:.2rem}
  body.table-active .tray-columns{gap:.2rem;font-size:0}
  body.table-active .tray-columns::before{content:'Density';font-size:.55rem}
  body.table-active .tray-columns select{min-width:2.45rem;min-height:1.65rem;padding:.1rem .2rem;font-size:.62rem}
  body.table-active #rotate{min-height:1.65rem;padding:.12rem .26rem;font-size:.55rem}
  body.table-active #rotate:disabled{display:none}
  body.table-active .tray-help{display:none}
  body.table-active .sorting-trays{display:flex;align-items:center;gap:.2rem;min-height:2.1rem;margin:0;padding:.2rem}
  body.table-active .sorting-tray-heading{order:2;flex:none;margin:0}
  body.table-active .sorting-tray-heading>strong{display:none}
  body.table-active .sorting-tray-heading>div{gap:.15rem}
  body.table-active .sorting-tray-heading button{min-height:1.65rem;padding:.12rem .28rem;font-size:.56rem}
  body.table-active .sorting-tray-tabs{order:1;flex:1 1 auto;min-width:0;padding:0}
  body.table-active .sorting-tray-tabs button{min-height:1.65rem;padding:.16rem .3rem;font-size:.58rem}
  body.table-active .tray-transfer{order:3;flex:0 0 100%;margin:0;padding-top:.18rem}
  body.table-active #float-selected{min-height:1.75rem;margin:0 0 .15rem;padding:.18rem .3rem;font-size:.6rem}
  body.table-active #float-selected:disabled{display:none}
  body.table-active .tray{flex:1 1 auto;min-height:0;max-height:none;overscroll-behavior:contain}
  body.table-active .assembly-zone:not(.has-sections):not(.over){display:none}
}

/* Optional wide sorting drawer: density 1-5 shows 3-15 columns on compact
   layouts and 4-20 on laptops, while leaving a live tabletop strip exposed. */
body.table-active main:not(.is-complete){position:relative}
body.table-active main:not(.is-complete) .tray-area.sorting-overview{
  position:absolute;
  inset:0 0 0 auto;
  width:min(72vw,1000px);
  height:100%;
  border-left:2px solid #6f8997;
  box-shadow:-18px 0 38px #07121aaa;
}
body.table-active main:not(.is-complete) .tray-area.sorting-overview .tray-tools{flex-direction:row;align-items:center}
body.table-active main:not(.is-complete) .tray-area.sorting-overview .tray{gap:clamp(.18rem,.34vw,.42rem)}
body.table-active main:not(.is-complete) .tray-area.sorting-overview .piece{border-width:1px;border-radius:clamp(3px,.45vw,7px);padding:.08rem}
@media(max-width:1000px) and (orientation:landscape){
  body.table-active main:not(.is-complete) .tray-area.sorting-overview{
    width:min(72vw,calc(100vw - max(13rem,22vw)));
    max-width:none;
  }
}