:root{--bg:#fff8e7;--ink:#3b3b3b;--tile:#fff;--shadow:#e6dcc6;--slot:#d9d0bd;--board:min(56vmin, 92vw);--tray-piece:max(96px, calc(var(--board) * .24));--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}*,:before,:after{box-sizing:border-box}html,body,#app{height:100%;margin:0;overflow:hidden}body{background:var(--bg);color:var(--ink);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.emoji{font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;line-height:1}.screen{padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));grid-template-rows:auto 1fr;gap:8px;display:grid;position:fixed;inset:0}.screen.game{touch-action:none}.topbar{justify-content:space-between;align-items:center;min-height:96px;display:flex}.stage{place-items:center;min-height:0;display:grid}.tile{background:var(--tile);min-width:96px;min-height:96px;color:inherit;box-shadow:0 8px 0 var(--shadow);cursor:pointer;will-change:transform;border:0;border-radius:28px;place-items:center;padding:8px;font-size:clamp(56px,14vmin,140px);display:grid;position:relative}.tile:active{box-shadow:0 2px 0 var(--shadow);transform:translateY(6px)}.tile.wiggle{animation:.45s wiggle}.tile.bounce{animation:.45s bounce}.tile.pulse{animation:1s ease-in-out infinite pulse}.tile-small{background:var(--tile);min-width:96px;min-height:96px;box-shadow:0 6px 0 var(--shadow);cursor:pointer;border:0;border-radius:24px;place-items:center;font-size:48px;display:grid}.tile-small:active{box-shadow:0 2px 0 var(--shadow);transform:translateY(4px)}@keyframes wiggle{0%,to{transform:translate(0)}25%{transform:translate(-12px)rotate(-4deg)}75%{transform:translate(12px)rotate(4deg)}}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.unlock{place-items:center;display:grid;position:fixed;inset:0}.unlock-tile{grid-template-rows:1fr auto;width:min(70vmin,360px);height:min(70vmin,360px)}.unlock-text{font-size:24px;font-weight:600}.menu-grid{aspect-ratio:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(90vw,80vh,720px);display:grid}.count-display{text-align:center;min-width:96px;font-size:64px;font-weight:800}.count-grid{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));justify-items:center;gap:12px;width:min(92vw,900px);display:grid}.count-grid .tile{aspect-ratio:1;width:100%;max-width:220px;font-size:clamp(48px,10vmin,110px)}.count-grid .tile.counted{opacity:.55}.choice-grid{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));justify-items:center;gap:16px;width:min(92vw,900px);display:grid}.choice-grid .tile{aspect-ratio:1;width:100%;max-width:220px;font-size:clamp(64px,18vmin,180px);font-weight:800}.puzzle{place-items:center;gap:12px;display:grid}.board{width:var(--board);height:var(--board);box-shadow:inset 0 0 0 4px var(--slot);background:#fff;border-radius:24px;position:relative}.board-ghost{font-size:calc(var(--board) * .8);opacity:.18;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.slot{place-items:center;display:grid;position:absolute;transform:translate(-50%,-50%)}.slot.shape{--size:calc(var(--board) * .22);width:var(--size);height:var(--size)}.slot.quad{--size:calc(var(--board) * .5);width:var(--size);height:var(--size);border:3px dashed var(--slot);border-radius:12px}.silhouette{fill:var(--slot)}.slot.pulse{animation:1s ease-in-out infinite slot-pulse}@keyframes slot-pulse{0%,to{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-50%)scale(1.12)}}.tray{min-height:var(--tray-piece);max-width:calc(4 * var(--tray-piece) + 24px);flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.piece{touch-action:none;cursor:grab;place-items:center;display:grid}.piece.shape,.piece.quad{--size:var(--tray-piece);width:var(--size);height:var(--size)}.piece.wiggle{animation:.45s wiggle}.piece.dragging{z-index:10;pointer-events:none;transform:translate(var(--dx), var(--dy));position:relative}.piece svg,.slot svg{width:100%;height:100%}.quad-window{background:#fff;border-radius:12px;width:100%;height:100%;position:relative;overflow:hidden}.quad-window .full{width:200%;height:200%;left:calc(-100% * var(--qx));top:calc(-100% * var(--qy));font-size:calc(var(--size) * 1.6);place-items:center;display:grid;position:absolute}@media (orientation:landscape) and (max-height:520px){.puzzle{grid-auto-flow:column}.tray{max-width:calc(2 * var(--tray-piece) + 8px)}}.celebration{pointer-events:none;z-index:20;position:fixed;inset:0;overflow:hidden}.confetti{top:-20px;left:var(--x);background:var(--c);width:14px;height:22px;animation:fall var(--d) ease-in forwards;border-radius:3px;position:absolute}@keyframes fall{to{transform:translateY(110vh) rotate(var(--r));opacity:.6}}.celebration-emoji{place-items:center;font-size:30vmin;animation:.6s bounce;display:grid;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.tile,.piece,.slot,.confetti,.celebration-emoji{animation:none!important}}