: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}
.board-group.moving{z-index:10;cursor:grabbing}
.board-group.selected-group{filter:drop-shadow(0 0 5px var(--group-accent))}
.group-shape{position:absolute;inset:0;transform:rotate(var(--rotation));transform-origin:center;pointer-events:none}
.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}
.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}
select:disabled{opacity:.55;cursor:not-allowed}
.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}
  .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}
}

.case-back{display:inline-block;margin-bottom:.35rem;color:#f6bd69;text-decoration:none;font-size:.8rem;font-weight:700}
.case-back:hover,.case-back:focus-visible{text-decoration:underline}
header .demo-scope{margin-top:.45rem;color:#b8c9d3;font-size:.82rem;line-height:1.35}
@media(max-width:1000px) and (orientation:landscape) and (pointer:coarse){.case-back{font-size:.65rem;margin-bottom:0}header .demo-scope{font-size:.62rem;margin-top:.1rem}}