.app{width:min(1210px,calc(100% - 36px))}
.game-layout{grid-template-columns:165px 320px minmax(360px,430px);gap:24px;justify-content:center}
.board-shell{width:320px}.board-bezel{padding:9px}.board-bezel:after{inset:9px}
.left-panel{padding-top:0}.left-panel .card{padding:14px}.left-panel .next-card{padding-bottom:8px}.next-canvases{margin-top:6px}.next{height:72px}.hold-card canvas{height:80px;margin-top:4px}
.puzzle-panel{min-width:0;border:1px solid #58749c;background:linear-gradient(155deg,#142943ed,#101a32eb 54%,#1e2146e8);border-radius:16px;padding:18px;box-shadow:0 18px 50px #0008,0 0 42px #34d9ff25,inset 0 1px #ffffff2b}
.puzzle-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.puzzle-kicker{font-size:9px;letter-spacing:2.1px;font-weight:800;color:#68e4ef}.puzzle-head h2{font:800 28px/1 'Barlow Condensed',sans-serif;letter-spacing:1px;margin:7px 0 0}.puzzle-count{font:800 23px 'Barlow Condensed',sans-serif;letter-spacing:1px;color:#fff;text-shadow:0 0 15px #5fe9f7}.puzzle-progress{height:6px;background:#223950;border-radius:5px;margin:15px 0 11px;overflow:hidden}.puzzle-progress div{height:100%;width:0;background:linear-gradient(90deg,#55e4ed,#be85fb,#ff9bcb);box-shadow:0 0 12px #63eaff;transition:width .3s}.puzzle-rule{font-size:11px;line-height:1.6;color:#a8bed4;margin:0 0 14px}
.puzzle-stage{--board-w:min(360px, calc(100% - 12px));position:relative;width:100%;height:calc(var(--board-w) * 1.5 + 260px);overflow:hidden;background:radial-gradient(circle at 50% 35%,#2e47754a,#081529b0 75%);border:1px solid #53728e;border-radius:11px;touch-action:none}
.puzzle-board{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:var(--board-w);aspect-ratio:2/3;background:#0e1e31;border:2px solid #6ea9ca;box-shadow:0 0 0 4px #0a1725,0 0 28px #4feaff44;overflow:hidden}.puzzle-board:before{content:"";position:absolute;inset:0;background-image:var(--puzzle-image,url('assets/delta-puzzle.png'));background-position:center;background-size:100% 100%;background-repeat:no-repeat;opacity:.16}.puzzle-stage.complete .puzzle-board:before{opacity:0}.puzzle-slots{position:absolute;inset:0}.puzzle-slot{position:absolute;border:1px dashed #a6dcf75e;background:#ffffff06}.puzzle-slot:after{content:"";position:absolute;inset:4px;border:1px solid #a8eaff16}.puzzle-slot.filled{border-color:transparent;background:transparent}
.puzzle-tray{position:absolute;top:calc(var(--board-w) * 1.5 + 25px);left:8px;right:8px;height:220px;border:1px dashed #75b1cd73;border-radius:10px;background:#0a1729b8}.puzzle-tray:before{content:"COLLECTED PIECES";position:absolute;top:9px;left:10px;color:#87a7c0;font-size:9px;font-weight:800;letter-spacing:1.6px}.puzzle-tray #trayHint{position:absolute;inset:0;display:grid;place-items:center;color:#65849d;font-size:11px}.puzzle-pieces{position:absolute;inset:0;pointer-events:none}.puzzle-piece{position:absolute;box-sizing:border-box;background-image:var(--puzzle-image,url('assets/delta-puzzle.png'));background-repeat:no-repeat;border:2px solid #e4f7ff;box-shadow:0 5px 13px #000b,0 0 12px #60ddff66;cursor:grab;touch-action:none;pointer-events:auto;user-select:none;transition:box-shadow .1s,filter .1s}.puzzle-piece:hover{filter:brightness(1.15);box-shadow:0 8px 22px #000b,0 0 20px #7beaffaa}.puzzle-piece.dragging{cursor:grabbing;z-index:20;filter:brightness(1.12);box-shadow:0 15px 30px #000d,0 0 24px #77edff}.puzzle-piece.fixed{cursor:default;z-index:2;border:1px solid #ffffff45;box-shadow:inset 0 0 7px #ffffff33;pointer-events:none;transition:left .16s,top .16s,box-shadow .3s}.puzzle-piece.snap{animation:pieceSnap .34s ease-out}@keyframes pieceSnap{0%{filter:brightness(3);box-shadow:0 0 45px #fff;transform:scale(1.09)}100%{filter:brightness(1);box-shadow:inset 0 0 7px #ffffff33;transform:scale(1)}}
.puzzle-hint{text-align:center;font-size:10px;color:#7699b3;letter-spacing:.5px;margin-top:11px}.puzzle-win{position:absolute;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:linear-gradient(transparent,#061d31ed 22%);text-align:center;animation:winAppear .7s ease-out;pointer-events:none}.puzzle-win[hidden]{display:none}.puzzle-win strong{font:900 31px/1 'Barlow Condensed',sans-serif;color:#fff;letter-spacing:2px;text-shadow:0 0 15px #fff,0 0 40px #42dfff}.puzzle-win span{font-size:13px;color:#d9faff;font-weight:700}@keyframes winAppear{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px) and (min-width:701px){.app{width:calc(100% - 18px)}.game-layout{grid-template-columns:120px 300px minmax(300px,1fr);gap:10px}.board-shell{width:300px}.board-bezel{padding:0}.board-bezel:after{inset:0}#board{width:298px}.left-panel .card{padding:10px}.puzzle-panel{padding:10px}.puzzle-head h2{font-size:23px}}
@media(max-width:700px){.app{width:min(440px,calc(100% - 16px))}.game-layout{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding-top:12px}.board-shell{grid-column:1/-1;grid-row:1;width:min(320px,100%);margin:auto}.board-bezel{padding:9px}.board-bezel:after{inset:9px}#board{width:100%}.left-panel{display:contents}.left-panel .hold-card,.left-panel .next-card{display:none}.left-panel .score-card,.left-panel .stat-card{grid-row:2}.puzzle-panel{grid-column:1/-1;grid-row:3;width:100%;padding:12px;margin-top:5px}.puzzle-stage{--board-w:min(360px, calc(100% - 12px))}.touch-controls{display:flex}}

/* The two play surfaces share one baseline on desktop. */
@media(min-width:701px){
  .puzzle-panel{height:655px;display:flex;flex-direction:column;padding:14px}
  .puzzle-head h2{font-size:19px;letter-spacing:.3px;margin-top:4px}
  .puzzle-kicker{font-size:8px;letter-spacing:1.5px}
  .puzzle-count{font-size:18px}
  .puzzle-progress{margin:10px 0 8px}
  .puzzle-rule{font-size:10px;line-height:1.35;margin-bottom:7px}
  .puzzle-stage{--board-w:min(230px, calc(100% - 12px));height:0;min-height:0;flex:1}
  .puzzle-tray{height:80px}
  .puzzle-hint{margin-top:5px}
  .puzzle-win strong{font-size:24px}
  .left-panel{height:655px;overflow:hidden}
  .left-panel .next{width:70px;height:50px}
}
@media(min-width:701px) and (max-width:1050px){
  .puzzle-panel{height:637px;padding:10px}
  .puzzle-stage{--board-w:min(195px, calc(100% - 12px))}
  .left-panel{height:637px}
}

.puzzle-stage.paused{pointer-events:none;background:#0a1528}
.puzzle-stage.paused .puzzle-board,.puzzle-stage.paused .puzzle-tray,.puzzle-stage.paused .puzzle-pieces,.puzzle-stage.paused .puzzle-win{visibility:hidden}
.puzzle-stage.paused:after{content:"PAUSED";position:absolute;z-index:50;inset:0;display:grid;place-items:center;background:#0a1528;color:#9deff6;font:900 42px 'Barlow Condensed',sans-serif;letter-spacing:5px;text-shadow:0 0 25px #5ceaff}

.puzzle-board:before{animation:artBreath 7s ease-in-out infinite alternate;transform-origin:50% 52%}
.puzzle-stage.complete .puzzle-board{z-index:5}
.puzzle-stage.complete .puzzle-board:after{content:"";position:absolute;z-index:4;inset:-2%;background-image:var(--puzzle-image);background-position:center;background-size:100% 100%;animation:artBreath 5s ease-in-out infinite alternate;pointer-events:none}
.puzzle-slot.hint-target{z-index:3;border:2px solid var(--hint-color);background:color-mix(in srgb,var(--hint-color) 23%,transparent);box-shadow:inset 0 0 24px var(--hint-color),0 0 22px var(--hint-color);animation:hintPulse .55s ease-in-out infinite alternate}
.puzzle-slot.hint-target:after{content:attr(data-hint-label);inset:auto;top:3px;left:3px;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--hint-color);color:#071323;font:900 15px sans-serif;box-shadow:0 0 12px var(--hint-color)}
.puzzle-piece.hint-piece{outline:3px solid var(--hint-color);outline-offset:1px;box-shadow:0 0 20px var(--hint-color),0 8px 18px #000b}
.puzzle-piece.hint-piece:after{content:attr(data-hint-label);position:absolute;top:2px;left:2px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--hint-color);color:#071323;font:900 15px sans-serif;box-shadow:0 0 12px var(--hint-color);pointer-events:none}
@keyframes artBreath{0%{transform:scale(1) translateY(0);filter:brightness(1)}100%{transform:scale(1.045) translateY(-.6%);filter:brightness(1.12)}}
@keyframes hintPulse{to{background:color-mix(in srgb,var(--hint-color) 45%,transparent);box-shadow:inset 0 0 32px var(--hint-color),0 0 34px var(--hint-color)}}
@media(prefers-reduced-motion:reduce){.puzzle-board:before,.puzzle-stage.complete .puzzle-board:after,.puzzle-slot.hint-target{animation:none}}