:root{--ink:#f4fbf8;--ink-soft:#ecfaf6b8;--glass:#0a2e3252;--glass-hi:#ffffff24;--line:#dcfff838;--accent:#ffd59a;--radius:22px;--serif:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;--sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--safe-b:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;user-select:none;background:#0d4a4a;margin:0;overflow:hidden}#pond{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block;position:fixed;top:0;bottom:0;left:0;right:0}#ui{pointer-events:none;transition:opacity .5s,transform .5s;position:fixed;top:0;bottom:0;left:0;right:0}#ui>*{pointer-events:auto}body.ui-hidden #ui{opacity:0;transform:translateY(8px)}body.ui-hidden #ui>*{pointer-events:none}.glass{background:linear-gradient(160deg, #ffffff29, #ffffff0a 60%), var(--glass);border:1px solid var(--line);box-shadow:0 18px 50px #001e2247, inset 0 1px 0 var(--glass-hi);-webkit-backdrop-filter:blur(18px)saturate(140%)}.brand{text-shadow:0 2px 18px #00282873;position:absolute;top:18px;left:24px;pointer-events:none!important}.brand h1{font-family:var(--serif);letter-spacing:.04em;margin:0;font-size:34px;font-weight:600;line-height:1}.brand .count{letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 0;font-size:12px}.toolbar{border-radius:999px;align-items:center;gap:2px;padding:5px;display:flex;position:absolute;top:16px;right:16px}.toolbar .sep{background:var(--line);width:1px;height:22px;margin:0 4px}.toolbar button{height:36px;color:var(--ink);font:500 13px/1 var(--sans);letter-spacing:.01em;cursor:pointer;background:0 0;border:0;border-radius:999px;align-items:center;gap:7px;padding:0 13px;transition:background .2s,color .2s;display:inline-flex}.toolbar button:hover{background:#ffffff1f}.toolbar button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.toolbar button[aria-pressed=true]{color:#173b3a;background:#ffecc8e6}.toolbar svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:18px;height:18px}.toolbar [data-action=sound] .on{display:none}.toolbar [data-action=sound][aria-pressed=true] .on{display:inline}.toolbar [data-action=sound][aria-pressed=true] .off{display:none}.toolbar button:disabled{opacity:.4;cursor:not-allowed}.panel{left:50%;bottom:calc(18px + var(--safe-b));border-radius:var(--radius);width:min(720px,100% - 32px);padding:10px 12px 12px;position:absolute;transform:translate(-50%)}.panel-hint{text-align:center;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 9px;font-size:11.5px}.cards{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.card{color:var(--ink);cursor:grab;touch-action:none;font:inherit;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:16px;flex-direction:column;align-items:center;padding:8px 6px 10px;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s;display:flex;position:relative}.card:hover{background:#ffffff1f;border-color:#ffffff47;transform:translateY(-3px)}.card:active{cursor:grabbing}.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.card.pressed{transform:scale(.96)}.card canvas{aspect-ratio:2.2;width:100%;max-width:140px;display:block}.card .name{font-family:var(--serif);letter-spacing:.02em;margin-top:4px;font-size:19px;font-weight:600;line-height:1.1}.card .note{color:var(--ink-soft);margin-top:2px;font-size:11px}.card.full{opacity:.45;cursor:not-allowed;transform:none}.ghost{pointer-events:none;z-index:20;filter:drop-shadow(0 18px 18px #00141473);width:150px;transition:opacity .15s;position:fixed;top:0;left:0}.ghost canvas{width:100%;display:block}.ghost .ring{border:1.5px solid #ffffffa6;border-radius:50%;width:64px;height:64px;margin:-32px 0 0 -32px;animation:1.2s ease-out infinite pulse;position:absolute;top:50%;left:50%}.ghost.invalid{opacity:.45}.ghost.invalid .ring{border-color:#ff8c78cc}@keyframes pulse{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}#show-ui{right:16px;bottom:calc(16px + var(--safe-b));color:var(--ink);font:500 12px/1 var(--sans);letter-spacing:.04em;cursor:pointer;opacity:0;pointer-events:none;border-radius:999px;padding:9px 14px;transition:opacity .4s;position:fixed}body.ui-hidden.ui-peek #show-ui{opacity:.85;pointer-events:auto}#toast{-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;background:#082426b8;border-radius:999px;padding:9px 16px;font-size:13px;transition:opacity .3s,transform .3s;position:fixed;top:76px;left:50%;transform:translate(-50%,-8px)}#toast.show{opacity:1;transform:translate(-50%)}#fallback{text-align:center;font-family:var(--serif);background:radial-gradient(circle at 50% 40%,#1d6b69,#0b3434);place-items:center;padding:32px;font-size:22px;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}#fallback[hidden]{display:none}@media (max-width:720px){.brand{top:14px;left:16px}.brand h1{font-size:26px}.toolbar{top:auto;right:50%;bottom:calc(154px + var(--safe-b));max-width:calc(100% - 24px);transform:translate(50%)}.toolbar button{height:38px;padding:0 9px}.toolbar button span{display:none}.toolbar .sep{margin:0 2px}.panel{bottom:calc(10px + var(--safe-b));width:calc(100% - 20px);padding:8px 8px 9px}.panel-hint{margin-bottom:6px;font-size:10.5px}.cards{gap:6px}.card{border-radius:13px;padding:6px 2px 8px}.card .name{white-space:nowrap;font-size:14px}.card .note{display:none}#toast{top:64px}}@media (max-width:720px) and (max-height:500px){.panel-hint{display:none}.toolbar{top:10px;bottom:auto;right:10px;transform:none}}@media (prefers-reduced-motion:reduce){.card,#ui{transition:none}}