:root{color-scheme:light;--ink:#395560;--muted:#667d81;--blue:#4d858d;--bg:#eef3f3;--yellow:#ffd471;--outline:#d2e1e2;font-family:'SF Pro Rounded','Hiragino Maru Gothic ProN','PingFang SC','Microsoft YaHei',sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;padding:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}h1,h2,p{margin:0}button:active{transform:translateY(1px)}
.game{display:grid;grid-template-rows:64px minmax(0,1fr) 100px;gap:0;padding:max(8px,env(safe-area-inset-top)) max(26px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(26px,env(safe-area-inset-left));max-width:1900px;margin:auto}
.heading{display:flex;align-items:center;gap:24px;padding-right:var(--play-screen-slot,0px)}.back{color:inherit;font-size:25px;min-width:72px;min-height:44px;display:flex;align-items:center;gap:7px;text-decoration:none}.back span{font-size:16px;font-weight:700}h1{font-size:24px;letter-spacing:.04em;font-weight:850}.icon-button{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;background:transparent;border-radius:50%}.sound-on{display:none}#sound[aria-pressed=true] .sound-on{display:block}#sound[aria-pressed=true] .sound-off{display:none}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,31%);gap:26px;min-height:0;padding:14px 0 20px}.board-column{display:grid;grid-template-rows:30px minmax(0,1fr) 34px;gap:10px;min-width:0;min-height:0}.board-caption{display:flex;align-items:center;justify-content:space-between;padding:0 8px}.board-caption h2{font-size:18px;font-weight:700}.board-caption #progress{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}.board-space{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;position:relative;padding:12px}.board{position:relative;flex:none;background:#f8fcfe;border-radius:12px;box-shadow:0 0 0 9px #fff,0 0 0 11px #ccdfeb,0 12px 28px #47789317;touch-action:none;isolation:isolate}.board>canvas{width:100%;height:100%;display:block;border-radius:10px}.targets{position:absolute;inset:0;display:grid}.target{background:transparent;border:0;touch-action:none;position:relative}.target:focus-visible{outline-offset:-6px;border-radius:6px}.target.is-hint{background:#ffd47155;box-shadow:inset 0 0 0 4px #edb94b}.board.solved{box-shadow:0 0 0 9px #fff,0 0 0 11px #92bfbd,0 12px 28px #47789317}.hint{text-align:center;color:var(--muted);font-size:15px;line-height:30px;white-space:nowrap}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:5;font-size:16px;text-align:center}.loading button{background:white;padding:10px 18px;border-radius:10px}
.tray-column{min-height:0;display:flex;flex-direction:column;background:#e1ebec;border:1px solid #d1e0e2;border-radius:22px;padding:20px 16px 14px;position:relative}.tray-caption{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;padding:0 4px 12px;font-size:16px;font-weight:700}.tray-note{color:var(--muted);font-size:13px;font-weight:400}.tray{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px;min-height:0;flex:1}.tray[data-count="9"],.tray[data-count="12"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.tray[data-count="16"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.piece{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;background:transparent;border-radius:14px;touch-action:none;position:relative}.piece canvas{display:block;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 2px #34587232);pointer-events:none}.piece:hover canvas{filter:drop-shadow(0 5px 3px #34587250)}.piece.selected{background:#ffffff80;box-shadow:inset 0 0 0 3px #e7b94d}.piece.in-drag{opacity:.2}.piece.placed{visibility:hidden;pointer-events:none}.drag-ghost{position:fixed;top:0;left:0;pointer-events:none;z-index:80;filter:drop-shadow(0 10px 8px #213b5344);will-change:transform}.complete{position:absolute;inset:52px 15px 15px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.complete-mark{width:70px;aspect-ratio:1;display:grid;place-items:center;background:#ffdc81;border:4px solid #fff1c9;border-radius:50%;color:#527451;font-size:37px}.complete h2{font-size:28px}.complete p{font-size:15px;color:var(--muted)}.primary{background:var(--blue);color:white;font-weight:700;min-height:46px;border-radius:12px;padding:0 28px;margin-top:8px}.text-button{background:transparent;padding:10px;min-height:44px;font-size:14px;color:var(--muted)}
.controls{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--outline);padding-top:12px;min-height:0}
.gallery-picker{display:flex;align-items:center;gap:15px;background:white;border:1px solid #d2e1e2;border-radius:14px;padding:6px 20px 6px 6px;min-width:0;text-align:left}
.gallery-picker img{width:99px;height:auto;aspect-ratio:1.5;object-fit:cover;border-radius:8px;pointer-events:none}
.picker-copy{display:flex;flex-direction:column;gap:5px}.picker-copy>span:first-child{font-size:16px;font-weight:650;white-space:nowrap}.picker-action{font-size:14px;color:var(--muted)}.picker-action>span{padding-left:8px}
.options{display:flex;align-items:center;gap:14px;flex:none}.difficulty{display:flex;padding:4px;background:#dce8e9;border-radius:13px}.difficulty button{min-width:64px;height:44px;border-radius:9px;font-weight:600;font-size:15px;background:transparent}.difficulty button.active{background:white;box-shadow:0 2px 4px #34587215}
.preview{display:flex;align-items:center;gap:8px;justify-content:center;min-height:48px;background:#fff;padding:0 18px;border-radius:12px;font-size:15px;font-weight:600}.preview[aria-pressed=true]{background:#f4e5b9}
.gallery-dialog{width:min(900px,calc(100vw - 48px));max-height:calc(var(--play-height,100dvh) - 64px);padding:0;border:1px solid #c6d7d9;border-radius:22px;background:#f7faf9;color:var(--ink);box-shadow:0 24px 90px #29454e40;overflow:hidden}
.gallery-dialog[open]{display:flex;flex-direction:column}.gallery-dialog::backdrop{background:#2b424b80;backdrop-filter:blur(5px)}
.gallery-heading{display:flex;justify-content:space-between;align-items:center;flex:none;padding:21px 24px 16px;gap:14px}.gallery-heading h2{font-size:22px;font-weight:750}.gallery-heading p{font-size:14px;color:var(--muted);margin-top:5px}.gallery-heading button{display:grid;place-items:center;background:#e7efee;width:44px;height:44px;border-radius:50%;flex:none}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 24px 24px;overflow:auto;min-height:0;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
.scene{display:flex;flex-direction:column;min-width:0;align-items:stretch;padding:5px;border:2px solid transparent;border-radius:15px;background:white;text-align:left;position:relative;touch-action:pan-y;flex:none}
.scene img{width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;display:block;border-radius:9px;pointer-events:none}
.scene-info{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:10px 6px 7px}.scene-name{font-size:15px;font-weight:650;white-space:nowrap}.scene-style{font-size:12px;color:var(--muted);white-space:nowrap}
.scene.active{border-color:var(--blue);background:#edf6f4}.scene.active .scene-name{color:#34646a}.scene-check{display:none;position:absolute;top:11px;right:11px;background:var(--blue);color:white;border:2px solid white;width:23px;aspect-ratio:1;border-radius:50%;align-items:center;justify-content:center;font-size:14px}.scene.finished .scene-check{display:flex}
.scene:focus-visible{outline-offset:-3px}.tray-column:has(.complete:not([hidden])) .tray-caption{visibility:hidden}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:90}.confetti i{position:absolute;top:-20px;width:10px;height:16px;background:var(--color);border-radius:3px;animation:fall 1800ms ease-in var(--delay) both}@keyframes fall{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(105vh) rotate(550deg);opacity:0}}
@media(max-width:1250px){.controls{gap:15px}.options{gap:10px}.workspace{gap:20px}}
@media(orientation:portrait){
  .game{grid-template-rows:58px minmax(0,1fr) 132px;padding-left:20px;padding-right:20px}
  .workspace{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,.7fr);gap:14px;padding-top:4px;padding-bottom:14px}
  .board-column{gap:5px;grid-template-rows:26px minmax(0,1fr) 25px}.board-space{padding:11px}.hint{font-size:14px;line-height:25px}
  .tray-column{padding:12px 14px;border-radius:18px}.tray-caption{padding-bottom:6px;font-size:14px}.tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px}.tray[data-count="12"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .controls{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:66px 46px;gap:9px 12px;padding-top:10px}
  .gallery-picker{grid-row:1;grid-column:1;gap:10px;padding:4px 10px 4px 4px;width:100%;height:66px}.gallery-picker img{width:77px}.picker-copy>span:first-child{font-size:14px}.picker-action{font-size:13px}.picker-action>span{padding-left:4px}.picker-copy{gap:3px}
  .options{display:contents}.difficulty{grid-row:2;grid-column:1 / 3;justify-content:space-evenly;justify-self:stretch}.difficulty button{flex:1;min-width:55px;height:38px}.preview{grid-row:1;grid-column:2;min-height:48px;padding:0 14px}
  .complete{inset:10px;gap:6px;display:grid;grid-template-columns:auto auto;align-content:center;justify-content:center;column-gap:18px}.complete-mark{grid-row:1 / 3;width:54px;font-size:28px}.complete h2{font-size:24px}.complete p{display:none}.complete .primary{margin:0;grid-column:2}.complete .text-button{grid-column:1 / 3;padding:2px;min-height:32px}.heading{gap:16px}h1{font-size:21px}
  .gallery-dialog{width:calc(100vw - 28px);max-height:calc(var(--play-height,100dvh) - 38px);border-radius:18px}.gallery-heading{padding:18px 16px 14px}.gallery-heading h2{font-size:20px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 12px 16px}.scene-info{flex-direction:column;align-items:flex-start;gap:3px;padding:8px 3px 5px}.scene-name{font-size:14px}.scene-style{font-size:12px}
}
@media(orientation:portrait) and (min-width:700px){
  .game{grid-template-rows:76px minmax(0,1fr) 106px;padding:18px 36px}.heading h1{font-size:28px}.workspace{gap:24px;grid-template-rows:minmax(0,1fr) minmax(0,.68fr)}
  .controls{display:flex}.gallery-picker{width:auto;height:82px;gap:14px;padding:6px 20px 6px 6px}.gallery-picker img{width:99px}.picker-copy>span:first-child{font-size:16px}.picker-action{font-size:14px}.options{display:flex;gap:12px}.difficulty button{min-width:56px;height:44px}.preview{min-height:48px}
  .tray-caption{font-size:17px}.tray-note{font-size:14px}.tray{gap:18px 30px}.tray[data-count="12"],.tray[data-count="16"]{gap:10px 22px}.complete{display:flex;gap:10px}.complete-mark{width:70px}.complete p{display:block}.complete .primary{margin-top:6px}.board-caption h2{font-size:20px}
  .gallery-dialog{width:calc(100vw - 72px);max-height:calc(var(--play-height,100dvh) - 80px)}.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 22px 22px}.gallery-heading{padding:24px 24px 18px}.scene-info{padding:10px 5px 7px}.scene-name{font-size:16px}.scene-style{font-size:13px}
}
@media(orientation:landscape) and (max-height:600px){
  .game{grid-template-rows:42px minmax(0,1fr) 75px;padding:2px 18px 8px}.heading{gap:18px}.heading h1{font-size:19px}.back{font-size:23px}.workspace{grid-template-columns:minmax(0,1fr) minmax(255px,35%);gap:18px;padding:3px 0 8px}
  .board-column{grid-template-rows:22px minmax(0,1fr) 20px;gap:3px}.board-caption h2{font-size:15px}#progress{font-size:13px}.board-space{padding:10px}.board{border-radius:8px;box-shadow:0 0 0 6px white,0 0 0 8px #ccdfeb}.hint{font-size:13px;line-height:20px}
  .tray-column{padding:10px;border-radius:16px}.tray-caption{padding-bottom:5px;font-size:14px}.tray-note{font-size:12px}.tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.tray[data-count="12"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .controls{padding-top:7px;gap:12px}.gallery-picker{height:56px;gap:10px;padding:3px 14px 3px 3px}.gallery-picker img{width:70px}.picker-copy{gap:2px}.picker-copy>span:first-child{font-size:14px}.picker-action{font-size:12px}
  .difficulty button{height:38px;min-width:56px;font-size:14px}.preview{min-height:44px;padding:0 12px;font-size:14px}.options{gap:9px}.complete{inset:27px 10px 5px;gap:4px}.complete-mark{width:42px;font-size:24px;border-width:3px}.complete h2{font-size:21px}.complete p{display:none}.complete .primary{margin:3px 0 0;min-height:38px}.complete .text-button{min-height:30px;padding:4px}
  .gallery-dialog{max-height:calc(var(--play-height,100dvh) - 24px);width:min(820px,calc(100vw - 48px));border-radius:16px}.gallery-heading{padding:12px 18px 8px}.gallery-heading h2{font-size:19px}.gallery-heading p{display:none}.gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 16px 14px}.scene-info{flex-direction:column;align-items:flex-start;gap:3px;padding:6px 2px 4px}.scene-name{font-size:14px}.scene-style{font-size:12px}
}
@media(max-width:380px) and (orientation:portrait){.game{padding-left:12px;padding-right:12px}.heading{gap:5px}.heading h1{font-size:19px}.workspace{gap:8px}.tray-note{font-size:12px}.gallery-picker img{width:63px}.gallery-picker{gap:7px}.preview{padding:0 10px}.controls{column-gap:8px}.picker-copy>span:first-child{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.confetti{display:none}}
/* More space for the harder trays keeps pieces readable on the tablet. */
@media(orientation:landscape) and (min-height:601px){
  .workspace:has(.tray[data-count="12"]){grid-template-columns:minmax(0,1fr) minmax(300px,38%)}
  .workspace:has(.tray[data-count="16"]){grid-template-columns:minmax(0,1fr) minmax(320px,41%)}
}
@media(orientation:portrait) and (max-width:699px){
  .workspace:has(.tray[data-count="16"]){grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
}