:root { color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:#eeeae2; color:#48443e; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; min-height:100svh; touch-action:manipulation; background-image:radial-gradient(ellipse at 20% 0%,#fffdf8,transparent 75%),repeating-linear-gradient(105deg,#927b5c05 0 1px,transparent 1px 4px),linear-gradient(155deg,#f4f1e9,#e3e8e5); }
main { width:min(100%,440px); margin:auto; padding:max(10px,env(safe-area-inset-top)) 18px max(16px,env(safe-area-inset-bottom)); }
header { display:flex; align-items:center; justify-content:space-between; height:48px; }
h1 { font:400 24px Georgia,serif; letter-spacing:.15em; margin:0; color:#514b43; }
a,button { color:inherit; touch-action:manipulation; }
a { font-size:30px; text-decoration:none; width:58px; }
button { border:0; background:none; cursor:pointer; font:inherit; min-height:44px; }
button:disabled { cursor:default; opacity:.28; }
button:focus-visible,a:focus-visible { outline:2px solid #d5c5ff; outline-offset:3px; }
#restart { color:#70695f; font-size:12px; padding:0; width:58px; }
.stats { position:relative; display:flex; justify-content:center; height:62px; color:#777064; align-items:center; }
#end-panel { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; gap:18px; padding:24px 8px; background:#f4f1e9e8; cursor:default; }
#end-panel[hidden] { display:none; }
#status { font-size:34px; font-weight:600; text-align:center; }
#end-restart { padding:12px 36px; min-height:50px; border-radius:999px; background:#e9c964; color:#2a2410; font-size:18px; font-weight:600; }
#end-restart:active { transform:scale(.97); }
.stats b { font-size:38px; font-weight:500; color:#423d36; font-variant-numeric:tabular-nums; }
#field { position:relative; width:min(100%,calc((100svh - 167px) * 6 / 10)); min-width:200px; margin:auto; aspect-ratio:6/10; cursor:crosshair; touch-action:none; --gatherMs:420ms; --vanishMs:180ms; }
#well { position:absolute; top:20%; bottom:0; left:0; right:0; border:1px solid #aa9b8438; border-top:1px dashed #9c907b85; background-color:#e7dfd0; background-image:repeating-linear-gradient(97deg,#fff8 0 1px,transparent 1px 5px),repeating-linear-gradient(3deg,#8e785408 0 1px,transparent 1px 3px),linear-gradient(145deg,#f4efe4,#ded7c8); box-shadow:inset 0 2px 9px #79644518,0 1px 0 #fffc; }
#blocks { position:absolute; inset:0; overflow:visible; pointer-events:none; }
.block { overflow:visible; position:absolute; width:16.666667%; height:10%; padding:0; transition-property:top,left; transition-timing-function:linear; }
.face { position:relative; width:100%; height:100%; display:grid; place-items:center; background-color:var(--color); background-image:radial-gradient(ellipse at 25% 12%,#ffffff75,transparent 55%),repeating-linear-gradient(112deg,#ffffff08 0 1px,#00000008 1px 3px),linear-gradient(145deg,#ffffff12 25%,#00000035); color:#20212b9c; border-radius:0; border:1px solid #ffffff35; box-shadow:inset 3px 4px 1px #ffffff80,inset -3px -6px 1px #00000040,inset -5px -8px 6px #00000020; }
.pips { width:68%; height:68%; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); gap:9%; }
.pip { border-radius:50%; background:var(--ink,#fff); box-shadow:inset 0 1px 2px #00000065,0 1px 0 #ffffff40; }
.color-0 { --color:#ef2852; }.color-1 { --color:#ffda19; --ink:#352b12; }
.color-2 { --color:#08c67a; --ink:#123c30; }.color-3 { --color:#1769ed; }
.color-4 { --color:#9335e2; }.color-5 { --color:#ff7819; --ink:#49200b; }
#ghost { position:absolute; width:33.333333%; height:20%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; opacity:.48; outline:1px dashed #84796790; outline-offset:-1px; pointer-events:none; }
#ghost[hidden] { display:none; }
.preview { min-height:0; padding:0; }
.impact { z-index:2; }
.impact .face { transform-origin:center center; animation:impact 420ms both; }
@keyframes impact {
  0% { transform:translateY(0) rotate(0deg); animation-timing-function:cubic-bezier(.2,.65,.35,1); }
  45% { transform:translateY(-9%) rotate(var(--tilt)); animation-timing-function:cubic-bezier(.5,0,.8,.4); }
  100% { transform:translateY(0) rotate(0deg); }
}
.vanish .face { animation:fade-away var(--vanishMs) ease-in both; }
@keyframes fade-away { from { opacity:1; } to { opacity:0; } }
.particles { position:absolute; inset:0; display:none; pointer-events:none; overflow:visible; }
.impact .particles { display:block; }
.particles i { position:absolute; width:8px; height:8px; left:50%; top:50%; border-radius:50%; background:#fff; box-shadow:0 0 2px #88796040; animation:dust 420ms ease-out both; --px:-35px; --py:-18px; }
.particles i:nth-child(2) { --px:32px; --py:-25px; left:80%; }
.particles i:nth-child(3) { --px:-20px; --py:22px; left:10%; top:70%; }
.particles i:nth-child(4) { --px:25px; --py:15px; left:80%; top:75%; }
.particles i:nth-child(5) { --px:4px; --py:-32px; top:10%; width:6px; height:6px; }
@keyframes dust { 0% { transform:translate(0,0); opacity:0; } 12% { opacity:.95; } 100% { transform:translate(var(--px),var(--py)); opacity:0; } }
#field:focus-visible { outline:2px solid #b9adcc; outline-offset:5px; }
#position { text-align:center; font-size:10px; color:#746d62; margin:8px 0; font-variant-numeric:tabular-nums; }
.hint { text-align:center; font-size:11px; line-height:1.7; color:#71695f; margin:6px 0 0; }
@media (prefers-reduced-motion:reduce) { .impact .face { animation:none; }.impact .particles { display:none; }.vanish .face { animation:none; opacity:.3; } }