*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;touch-action:manipulation}#app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}.game{width:min(92vw,460px);display:flex;flex-direction:column;gap:12px}.crumb{font-size:14px}.crumb a{color:var(--accent);text-decoration:none;font-weight:700}.crumb a:hover{text-decoration:underline}.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.title{font-size:clamp(30px,8.5vw,44px);font-weight:800;line-height:1;letter-spacing:-1px;background:linear-gradient(100deg,#ec5a63,#f0904a 22%,#f0c343 40%,#37bd85 60%,#4a8ae6 78%,#9a6ede);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.sizes{display:flex;gap:8px}.size{flex:1;background:var(--surface);color:var(--text);border:2px solid var(--line);border-radius:8px;padding:8px 6px;font-size:13px;font-weight:700;cursor:pointer;transition:border-color .12s ease,background .12s ease,transform 80ms ease}.size:hover{border-color:var(--accent)}.size:active{transform:scale(.97)}.size.active{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.stats{display:flex;gap:8px}.stat{flex:1;background:linear-gradient(160deg,#ffffff1f,#fff0 55%),var(--board-bg);color:var(--accent-text);border-radius:8px;padding:6px 10px;text-align:center;box-shadow:inset 0 1px #ffffff24}.stat .label{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.85;font-weight:700}.stat .value{font-size:22px;font-weight:800;line-height:1.1}.board-wrap{position:relative;width:min(100%,62dvh);margin:0 auto}.board{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;padding:7px;background:radial-gradient(130% 100% at 30% 0%,#ffffff1a,#0000 55%),linear-gradient(155deg,#0000000f,#0000002e),var(--board-bg);border-radius:14px;width:100%;overflow:hidden;box-shadow:inset 0 1px #ffffff29,inset 0 0 24px #0000002e,0 10px 26px #00000024}.board-wrap:has(.overlay.win) .board{animation:win-pop .62s cubic-bezier(.34,1.56,.64,1)}.board-wrap:has(.overlay.win) .board:after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,#fff0 38%,#ffffff8c,#fff0 62%);transform:translate(-120%);animation:win-shimmer 1.1s ease-in-out .12s 2;pointer-events:none;z-index:5}@keyframes win-pop{0%{transform:scale(1)}45%{transform:scale(1.035)}to{transform:scale(1)}}@keyframes win-shimmer{0%{transform:translate(-120%) rotate(.001deg)}to{transform:translate(120%) rotate(.001deg)}}.cell{position:relative;aspect-ratio:1 / 1;border-radius:24%;transition:background .26s cubic-bezier(.22,.61,.36,1);box-shadow:inset 0 0 0 1px #0000000f}.cell:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(115% 90% at 28% 20%,#ffffff75,#ffffff1a 40%,#fff0 62%),linear-gradient(180deg,#fff0 52%,#00000029);pointer-events:none}.colors{display:flex;gap:8px}.color{position:relative;flex:1;aspect-ratio:1 / 1;min-height:44px;max-height:68px;border:none;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;box-shadow:inset 0 0 0 1px #00000024,0 4px 10px #00000029;transition:transform 90ms ease,box-shadow .16s ease,filter .12s ease}.color:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 80% at 30% 14%,#ffffff8c,#ffffff1f 42%,#fff0 60%),linear-gradient(180deg,#fff0 50%,#0003);pointer-events:none}.color.current{transform:translateY(-3px) scale(1.02);box-shadow:inset 0 0 0 1px #ffffff59,0 0 0 3px var(--bg),0 0 0 5px var(--text),0 8px 18px #00000047}.color .sym{position:relative;z-index:1;font-size:clamp(16px,5vw,24px);font-weight:900;color:#fffffff5;text-shadow:0 1px 2px rgba(0,0,0,.5);line-height:1}.color:hover{filter:brightness(1.06)}.color:active{transform:scale(.92)}.color.kbcursor{outline:3px solid var(--accent);outline-offset:3px;z-index:2}.btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:filter .12s ease,transform 80ms ease}.btn:hover{filter:brightness(1.05)}.btn:active{filter:brightness(.95);transform:scale(.97)}.overlay{position:absolute;inset:0;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:var(--overlay-bg);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10;opacity:0;pointer-events:none;transition:opacity .2s ease}.overlay.show{opacity:1;pointer-events:auto}.overlay .msg{font-size:clamp(26px,8vw,42px);font-weight:800}.overlay.win .msg{color:#2fae6b;text-shadow:0 2px 14px rgba(47,174,107,.35)}.overlay.over .msg{color:#ef6a4b}.overlay .sub{font-size:15px;font-weight:700;color:var(--text);opacity:.9}.overlay .actions{display:flex;gap:10px;margin-top:8px}.how{font-size:13px;opacity:.85;line-height:1.5}.how b{font-weight:700}@media(prefers-reduced-motion:reduce){.board-wrap:has(.overlay.win) .board,.board-wrap:has(.overlay.win) .board:after{animation:none}.cell{transition:background .12s ease}}