:root{--bg: #fff9ec;--card: #ffffff;--ink: #4a3f2e;--accent: #ff6b6b;--accent2: #ffd43b;--cell: #f4eee0;--radius: 20px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{margin:0;padding:0}body{font-family:"M PLUS Rounded 1c",Hiragino Maru Gothic ProN,sans-serif;color:var(--ink);background-color:var(--bg);background-image:radial-gradient(rgba(255,190,120,.14) 22%,transparent 23%);background-size:26px 26px;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;min-height:100dvh}#app{max-width:620px;margin:0 auto;padding:10px 12px calc(16px + env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 10px}h1{margin:0;font-size:1.1rem;font-weight:800;letter-spacing:.02em}.timer{background:var(--card);border-radius:999px;padding:6px 16px;font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 3px #4a3f2e1f}main{display:flex;flex-direction:column;gap:12px}.side{display:flex;flex-direction:column;gap:10px}.board-wrap{background:var(--card);border-radius:var(--radius);padding:8px;box-shadow:0 6px #4a3f2e1a}#board{display:block;width:100%;height:auto;touch-action:none}#board .cell{fill:var(--cell)}#board .piece{cursor:grab}#board .piece.sel rect.c{stroke:#fffffff2;stroke-width:2.5}#board .g-ok{fill:#40c05780}#board .g-ng{fill:#fa525273}.piece.pop{animation:pop .18s ease-out;transform-box:fill-box;transform-origin:center}.shake{animation:shake .3s ease;transform-box:fill-box;transform-origin:center}@keyframes pop{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.controls{display:flex;gap:8px}.ctl{flex:1;min-height:44px;border:none;border-radius:999px;background:var(--card);color:var(--ink);font-family:inherit;font-size:.95rem;font-weight:700;box-shadow:0 3px #4a3f2e1f;cursor:pointer;transition:transform .08s ease}.ctl:active{transform:translateY(2px);box-shadow:0 1px #4a3f2e1f}.ctl:disabled{opacity:.4;cursor:default}.ctl.danger{color:#e8590c}.hint{margin:0;font-size:.78rem;text-align:center;opacity:.65}.tray{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;touch-action:none}.slot{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:4px;background:var(--card);border:2px solid transparent;border-radius:14px;box-shadow:0 3px #4a3f2e1a;cursor:grab;transition:transform .1s ease,border-color .1s ease}.slot svg{width:100%;height:100%;pointer-events:none}.slot.sel{border-color:var(--accent);transform:translateY(-2px)}.slot.placed{background:transparent;border:2px dashed rgba(74,63,46,.15);box-shadow:none;cursor:default}.slot.dragging svg{opacity:.25}#float{position:fixed;left:0;top:0;z-index:50;pointer-events:none;will-change:transform;filter:drop-shadow(0 10px 12px rgba(74,63,46,.3))}#float svg{display:block}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:#503c1e66;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal-card{width:min(340px,100%);background:var(--card);border-radius:24px;padding:24px 24px 20px;text-align:center;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px #4a3f2e26;animation:rise .25s ease-out}@keyframes rise{0%{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-emoji{font-size:2.6rem;line-height:1}.modal-card h2{margin:0;font-size:1.5rem;font-weight:800}.result{margin:0;display:flex;justify-content:center;gap:28px}.result dt{font-size:.8rem;opacity:.65}.result dd{margin:2px 0 0;font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums}.newbest{margin:0;color:#e8590c;font-weight:800}.btn{display:block;width:100%;min-height:48px;line-height:48px;border:none;border-radius:999px;font-family:inherit;font-size:1rem;font-weight:800;text-decoration:none;cursor:pointer}.btn.share{background:#0f1419;color:#fff}.btn.primary{background:linear-gradient(135deg,var(--accent),#ff8787);color:#fff;box-shadow:0 4px #c83c3c59}.btn.ghost{background:transparent;color:var(--ink);opacity:.6;min-height:36px;line-height:36px}@media(orientation:landscape)and (max-height:540px){#app{max-width:900px}main{flex-direction:row;align-items:flex-start}.board-wrap{flex:1.3}.side{flex:1;display:flex;flex-direction:column;gap:10px}.tray{grid-template-columns:repeat(4,1fr)}}@media(prefers-reduced-motion:reduce){.piece.pop,.shake,.modal-card{animation:none}.ctl,.slot{transition:none}}
