:root{--bg:#f1e8d8;--card:#fffbf3;--ink:#4a3628;--ink-soft:#4a36289e;--thin:#4a362824;--shadow:#6e4b2838;--go:#e2725b;--go-dark:#b4503c;--teal:#2a9d8f;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#f1e8d8;--card:#fffbf3;--ink:#4a3628;--ink-soft:#4a36289e;--thin:#4a362824;--shadow:#6e4b2838;--frame:#4a3628}}html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body{background:repeating-linear-gradient(90deg,#785a3209 0 2px,#0000 2px 5px),repeating-linear-gradient(0deg,#785a3209 0 2px,#0000 2px 5px),linear-gradient(#efe4d0,#f6efe3)}.screen{background:radial-gradient(circle at 50% 30%,#fbf5ea,#eadcc4)}.home-card{gap:14px;padding-bottom:20px}.hoop{filter:drop-shadow(0 8px 10px #6e4b2847);width:150px;height:150px;animation:3s ease-in-out infinite bob}.wordmark{color:var(--ink);margin:0;font-size:clamp(2.6rem,12vw,3.3rem);font-weight:700;line-height:1}.wordmark span{color:var(--go)}.btn-play{background:linear-gradient(#f0907b, var(--go));color:#fff;width:100%;box-shadow:0 6px 0 var(--go-dark), inset 0 2px 0 #ffffff59;text-shadow:0 2px #0000002e;flex-direction:column;align-items:center;padding:14px;font-size:1.45rem;line-height:1.15;display:flex}.btn-play small{opacity:.95;font-size:.85rem;font-weight:500}.btn-play:active{box-shadow:0 2px 0 var(--go-dark)}.btn-ghost{box-shadow:0 0 0 2px var(--thin) inset;color:var(--ink)}.hub{color:var(--ink-soft);letter-spacing:.06em;font-size:.85rem;text-decoration:none}#gallery{padding:calc(10px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));place-items:start center;overflow-y:auto}.gal-wrap{width:min(100%,560px)}.gal-head{align-items:center;gap:12px;margin-bottom:12px;display:flex}.gal-head h2{margin:0;font-size:1.6rem;line-height:1.1}.gal-head small{color:var(--ink-soft)}.gal-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;display:grid}.card{background:var(--card);box-shadow:0 5px 0 var(--shadow);color:var(--ink);border:0;border-radius:18px;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;display:flex}.card:active{box-shadow:0 2px 0 var(--shadow);transform:translateY(3px)}.card .art{background:#f7f1e3;border-radius:10px;place-items:center;width:128px;height:128px;display:grid;box-shadow:inset 0 0 0 2px #e8dcc4}.card .art canvas{border-radius:4px}.card b{font-size:.95rem;line-height:1.15}.card small{color:var(--ink-soft);font-size:.78rem}.card.done small{color:#2a8a5a;font-weight:600}#app{max-width:640px;height:100dvh;padding:calc(6px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));gap:6px;overflow:hidden}.hudbar{grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:0 2px;display:grid}.hudbar .icon-btn{background:var(--card);color:var(--ink);box-shadow:0 4px 0 var(--shadow)}.hud-tools{gap:8px;display:flex}#find{background:linear-gradient(#ffe8a3,#f6c445);box-shadow:0 4px #c7942a}.title{grid-template-columns:1fr auto;align-items:center;gap:2px 8px;min-width:0;display:grid}.title b{white-space:nowrap;text-overflow:ellipsis;grid-column:1/-1;font-size:1.05rem;overflow:hidden}.progress{background:#4a36281f;border-radius:4px;height:8px;overflow:hidden}.progress i{background:linear-gradient(90deg, #f0907b, var(--go));border-radius:4px;width:0;height:100%;transition:width .25s;display:block}.title small{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.85rem;font-weight:600}.board-wrap{border-radius:16px;flex:1;min-height:0;position:relative;overflow:hidden}#fabric{touch-action:none;-webkit-tap-highlight-color:transparent;display:block;position:absolute;inset:0}.toast{color:#fff;-webkit-text-stroke:6px var(--ink);font-size:clamp(1.4rem,6vw,2rem)}.palette{overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;background:#fffbf3b3;border-top:1px solid #4a362814;gap:8px;margin:0 -8px;padding:18px 8px 6px;display:flex;overflow-x:auto}.palette::-webkit-scrollbar{display:none}.swatch{isolation:isolate;scroll-snap-align:center;background:0 0;border:0;flex-direction:column;flex:none;align-items:center;gap:3px;width:64px;padding:0;transition:transform .15s;display:flex}.swatch .ball{background:repeating-linear-gradient(60deg, #0000001f 0 1.5px, transparent 1.5px 5px), radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c), #fff 45%), var(--c) 55%, color-mix(in srgb, var(--c), #000 30%));width:50px;height:50px;box-shadow:0 3px 0 #4a362840, 0 0 0 2px var(--card);border-radius:50%;place-items:center;display:grid;position:relative}.swatch .ball:before{content:"";z-index:-1;background:conic-gradient(var(--teal) var(--p,0%), #4a362824 0);border-radius:50%;position:absolute;inset:-6px}.swatch .ball b{color:var(--t);text-shadow:0 1px 2px #00000040;font-size:1.15rem;font-weight:700}.swatch small{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:600}.swatch.on{transform:translateY(-5px)}.swatch.on .ball{box-shadow:0 5px 0 #4a36284d, 0 0 0 2px var(--card);outline:3px solid var(--ink);outline-offset:7px}.swatch.on small{color:var(--ink)}.swatch.done .ball{opacity:.4}.swatch.done small{color:#2a8a5a}.swatch.pop .ball{animation:.45s cubic-bezier(.3,1.6,.5,1) pop}dialog{background:var(--card);color:var(--ink);box-shadow:0 10px 0 var(--shadow)}.end-frame{background:#f7f1e3;border-radius:50%;place-items:center;width:220px;height:220px;margin:-4px auto 4px;display:grid;overflow:hidden;box-shadow:0 0 0 9px #c99a66,0 0 0 12px #e0b47e,0 10px 18px 8px #6e4b2840}.rule-list li{background:#f6eedf}.rule-list li>b:first-child{background:var(--go)}