:root{--font: "Nunito", "Quicksand", ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;--ink: #2c1d55;--p1: #e6247a;--p2: #2f6ae8;--gold: #ffc93b;--edge: rgba(255, 255, 255, .92);--sh-1: 0 1px 1px rgba(44, 29, 85, .1), 0 3px 10px rgba(44, 29, 85, .12);--sh-2: 0 1px 2px rgba(44, 29, 85, .12), 0 8px 24px rgba(44, 29, 85, .18)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font);font-weight:600;color:var(--ink);overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#a78bff,#a78bff00 60%),radial-gradient(90% 70% at 85% 100%,#ffc2e6,#ffc2e600 55%),linear-gradient(180deg,#7f63e0,#6aa8f0 48%,#ffd7ee);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font-family:inherit;color:inherit}button:focus-visible{outline:3px solid rgba(255,255,255,.95);outline-offset:2px}.viewport{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;overflow:hidden}.stage{position:relative;width:960px;height:560px;flex:none}canvas.game{width:960px;height:560px;display:block;border-radius:26px;background:#aee3ff;box-shadow:0 0 0 1px #ffffff80,0 20px 50px #26164e66,0 60px 90px -40px #26164e80}.sound-btn{position:absolute;top:14px;left:50%;transform:translate(-50%);z-index:20;font-weight:800;font-size:13px;color:var(--ink);background:#fffc;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);border:1px solid var(--edge);border-radius:999px;padding:7px 16px;cursor:pointer;box-shadow:var(--sh-1);transition:transform .14s ease,background .14s ease,box-shadow .14s ease}.sound-btn:hover{transform:translate(-50%) translateY(-1px);box-shadow:var(--sh-2)}.sound-btn:active{transform:translate(-50%) translateY(1px);box-shadow:var(--sh-1)}.sound-btn.on{background:linear-gradient(180deg,#ffe07a,var(--gold));border-color:#fffffff2}.screen{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:26px;display:flex;flex-direction:column;align-items:center;padding:0;overflow:hidden;background:radial-gradient(110% 70% at 50% 0%,#ffffff80,#fff0 70%),linear-gradient(180deg,#c4aaffe6,#96d0ffdb 55%,#ffe0f2e6);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25)}.screen.win-screen{justify-content:center;text-align:center;gap:8px;padding:14px 20px 12px}.screen-fit{width:100%;padding:14px 20px 12px;display:flex;flex-direction:column;align-items:center;transform-origin:top center}h1{font-size:30px;font-weight:900;letter-spacing:.01em;line-height:1.1;background:linear-gradient(96deg,#ff4d87,#ff9a3c 22%,#ffd93b 40%,#35c98a,#3d9bff,#a06bff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(255,255,255,.55)) drop-shadow(0 4px 10px rgba(44,29,85,.28))}.tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2c1d558c;margin:5px 0 12px}.tagline{display:flex;align-items:center;gap:14px;margin:6px 0 11px}.tagline .tag{margin:0}.sound-pill{font-size:11px;padding:5px 14px}.sound-pill.on{color:#4a3200;background:linear-gradient(180deg,#ffe694,var(--gold));box-shadow:var(--sh-1),inset 0 1px #fffc}.builders{display:flex;gap:20px;width:100%;justify-content:center}.card{width:424px;padding:10px 16px 11px;border-radius:22px;background:linear-gradient(180deg,#ffffffe6,#ffffffb8);border:1px solid var(--edge);box-shadow:var(--sh-2),inset 0 1px #ffffffe6}.card-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}.card-head h2{font-size:16px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.card-head .dot{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 3px #ffffffd9}.card-head .dot.p1c{background:var(--p1)}.card-head .dot.p2c{background:var(--p2)}.card-head .hint{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#2c1d5561}.p1c{color:var(--p1)}.p2c{color:var(--p2)}.preview{display:flex;justify-content:center;border-radius:16px;overflow:hidden;margin-bottom:9px;background:linear-gradient(180deg,#e3f2ff,#ffeaf6);box-shadow:inset 0 1px #ffffffe6,inset 0 -12px 24px -14px #2c1d5566}.preview canvas{display:block}.row{display:flex;align-items:center;gap:10px;margin:6px 0;flex-wrap:wrap}.row label{font-weight:800;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#2c1d5580;width:74px;flex:none}.swatches,.pills{display:inline-flex;gap:7px;flex-wrap:wrap;align-items:center}.swatch{width:26px;height:26px;border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:inset 0 -3px 6px #2c1d5547,inset 0 2px 3px #ffffffb3,0 0 0 2px #ffffffe6,0 2px 5px #2c1d5533;transition:transform .13s ease,box-shadow .13s ease}.swatch:hover{transform:translateY(-2px) scale(1.08)}.swatch.sel{transform:translateY(-2px) scale(1.12);box-shadow:inset 0 -3px 6px #2c1d5547,inset 0 2px 3px #ffffffb3,0 0 0 2px #fffffff2,0 0 0 4.5px var(--ink),0 4px 10px #2c1d554d}.pill{border:1px solid var(--edge);background:linear-gradient(180deg,#fff,#f3e9ff);border-radius:999px;padding:5px 13px;font-weight:800;font-size:11.5px;letter-spacing:.03em;cursor:pointer;color:#2c1d55b8;box-shadow:var(--sh-1);transition:transform .13s ease,box-shadow .13s ease,color .13s ease}.pill:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}.pill:active{transform:translateY(1px);box-shadow:none}.pill.sel{color:#4a3200;background:linear-gradient(180deg,#ffe694,var(--gold));box-shadow:var(--sh-1),inset 0 1px #fffc}.bigbtn{margin:11px auto 8px;font-size:18px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#ff7ab8,#ff3d8a 55%,#e01f6f);border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:12px 38px;cursor:pointer;text-shadow:0 1px 2px rgba(120,8,56,.45);box-shadow:inset 0 1px #fff9,inset 0 -3px 8px #960a4659,0 4px #b8175a,0 10px 24px #b8175a66;transition:transform .12s ease,box-shadow .12s ease}.bigbtn:hover{transform:translateY(-2px);box-shadow:inset 0 1px #fff9,inset 0 -3px 8px #960a4659,0 6px #b8175a,0 14px 30px #b8175a73}.bigbtn:active{transform:translateY(3px);box-shadow:inset 0 1px #ffffff80,inset 0 -2px 6px #960a4666,0 1px #b8175a,0 4px 12px #b8175a59}.back-btn{font-size:13px;padding:8px 18px;margin-top:2px}.controls{display:flex;gap:28px;font-size:11px;font-weight:600;line-height:1.5;color:#2c1d55b8;background:#ffffff8c;border:1px solid rgba(255,255,255,.75);border-radius:16px;padding:8px 20px;box-shadow:var(--sh-1)}.controls b{display:block;font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}.ctl-line{white-space:nowrap}kbd{display:inline-block;min-width:18px;text-align:center;background:linear-gradient(180deg,#fff,#ece4f7);border-radius:6px;padding:1px 5px;margin:0 1px;border:1px solid rgba(44,29,85,.25);box-shadow:0 1.5px #2c1d554d;font-family:inherit;font-weight:800;font-size:10.5px;color:var(--ink)}.win-crest{font-size:56px;line-height:1;filter:drop-shadow(0 8px 16px rgba(44,29,85,.35));animation:crest-pop .5s cubic-bezier(.22,1.4,.4,1) both}@keyframes crest-pop{0%{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.win-text{font-size:44px;font-weight:900;letter-spacing:.01em;background:none;-webkit-background-clip:border-box;background-clip:border-box;filter:drop-shadow(0 2px 0 rgba(255,255,255,.6)) drop-shadow(0 6px 14px rgba(44,29,85,.3))}.win-sub{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#2c1d5573}@media(prefers-reduced-motion:reduce){.win-crest{animation:none}.sound-btn,.pill,.swatch,.bigbtn{transition:none}}