:root{--violet:#762ceb;--cosmic:#26104d;--cyan:#12cfe0;--magenta:#f05bc8;--star:#ffd23f;--cloud:#fff8fc;--ink:#261d38;--ok:#4fd6b1;--err:#ff6b83;--signature:linear-gradient(90deg,#762ceb,#12cfe0,#f05bc8);--font-title:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--font-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--muted:#5a4d72}*{box-sizing:border-box}body,html{margin:0;background:var(--cosmic);color:var(--ink);font:400 16px/1.5 var(--font-body)}h1,h2,h3{font-family:var(--font-title);margin:0;line-height:1.2}h1{font-size:28px}h2{font-size:22px}h3{font-size:18px}p{margin:0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.top{background:var(--cosmic);color:var(--cloud);padding:16px;display:flex;align-items:center;justify-content:space-between;max-width:720px;margin:0 auto}.wordmark{font:700 24px var(--font-title);background:var(--signature);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}.tagline{font-size:14px;color:#e6d9fa}.stage{background:var(--cloud);min-height:calc(100vh - 64px);border-radius:24px 24px 0 0}.wrap{margin:0 auto;padding:24px 16px 40px;grid-gap:16px;gap:16px}.card,.wrap{display:grid}.card{background:#fff;border:1px solid #e4d6f5;border-radius:16px;padding:16px;grid-gap:8px;gap:8px}.card.soon{background:#f6effb;border-style:dashed}.badge{justify-self:start;font:600 13px var(--font-body);padding:2px 10px;border-radius:999px;border:2px solid var(--cosmic);background:var(--star);color:var(--ink)}.badge.soon{background:transparent;border-color:var(--muted)}.badge.soon,.muted{color:var(--muted)}.row{display:flex;flex-wrap:wrap;gap:8px}button,input,textarea{font:500 16px var(--font-body)}.btn{min-height:48px;padding:0 20px;border-radius:12px;border:2px solid var(--violet);background:var(--violet);color:#fff;cursor:pointer}.btn:hover{background:#6420d0}.btn:active{transform:translateY(1px)}.btn.sec{background:#fff;color:var(--violet)}.btn.sec:hover{background:#f3ebfd}.btn.cta{background:var(--star);border-color:var(--star);color:var(--ink);font-weight:600}.btn.cta:hover{background:#f5c52c}.btn:disabled{opacity:.5;cursor:not-allowed}:focus-visible{outline:3px solid var(--violet);outline-offset:3px}.top :focus-visible{outline-color:var(--cyan)}input,textarea{width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:2px solid #b9a6d6;background:#fff;color:var(--ink)}label{font-weight:600;display:block;margin-bottom:4px}.note{display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:12px;border:2px solid;font-size:16px;background:#fff}.note b{font-family:var(--font-title)}.note.info{border-color:var(--cyan);background:#e7fbfd}.note.ok{border-color:var(--ok);background:#e9faf4}.note.warn{border-color:var(--err);background:#ffeef1}.note.hint{border-color:var(--star);background:#fff7db}.progress{height:12px;border-radius:6px;background:#e4d6f5;overflow:hidden}.progress>i{display:block;height:100%;background:var(--cyan);transition:width .2s}.board{width:min(100%,360px);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);border:3px solid var(--cosmic);border-radius:12px;overflow:hidden;background:var(--cosmic);grid-gap:2px;gap:2px}.cell{position:relative;aspect-ratio:1;border:0;border-radius:0;background:#fff;color:var(--ink);font:700 32px var(--font-title);cursor:pointer;padding:0}.cell.given{background:#ebdff8;color:var(--cosmic);cursor:default}.cell.rel{background:#f6f1fb}.cell.given.rel{background:#e3d3f5}.cell.sel{background:#ddf8fb;box-shadow:inset 0 0 0 4px var(--cyan)}.cell.bad{background:#ffe3e8;box-shadow:inset 0 0 0 3px var(--err)}.cell.bad:after{content:"!";position:absolute;top:2px;right:6px;font:700 16px var(--font-title);color:#b3243e}.cell.tip{box-shadow:inset 0 0 0 3px var(--star)}.cell.tip:after{content:"?";position:absolute;top:2px;right:6px;font:700 16px var(--font-title);color:#7a5a00}.cell.bx-r{margin-right:2px}.cell.bx-b{margin-bottom:2px}.cell:focus-visible{outline-offset:-4px}.pad{width:min(100%,360px);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);grid-gap:8px;gap:8px}.pad .btn{padding:0;min-height:56px;font:700 24px var(--font-title)}.pad .btn.erase{font-size:14px;font-family:var(--font-body)}.paused{width:min(100%,360px);margin:0 auto;aspect-ratio:1;display:grid;place-content:center;border:3px dashed var(--violet);border-radius:12px;background:#fff;padding:16px}.celebrate,.paused{text-align:center;grid-gap:12px;gap:12px}.celebrate{border:2px solid transparent;border-radius:16px;padding:20px;background:linear-gradient(#fff,#fff) padding-box,var(--signature) border-box;display:grid}.rating{display:flex;gap:8px;border:0;padding:0}.rating,.rating label{margin:0}.rating input{position:absolute;opacity:0;width:1px;min-height:0}.rating span{display:grid;place-content:center;width:48px;height:48px;border-radius:12px;border:2px solid var(--violet);font:700 18px var(--font-title);cursor:pointer;background:#fff}.rating input:checked+span{background:var(--cyan);border-color:var(--cosmic)}.rating input:checked+span:after{content:"✓";font-size:12px}.rating input:focus-visible+span{outline:3px solid var(--violet);outline-offset:3px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (min-width:640px){.wrap{padding-top:32px}.menu-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;gap:16px}}.brand{display:inline-flex;align-items:center;gap:10px}.brand img{display:block;height:40px;width:auto}.hero{display:grid;place-items:center;padding:24px 16px;background-color:var(--cosmic);background-image:linear-gradient(rgba(38,16,77,.25),rgba(38,16,77,.7)),url(/fantasy.jpg);background-size:cover;background-position:50%}.hero img{width:min(72vw,300px);height:auto;border-radius:24px;box-shadow:0 0 32px rgba(18,207,224,.45)}.stage{margin-top:0}.zboard-wrap{width:min(100%,360px);margin:0 auto}.zboard{position:relative;display:grid;border:3px solid var(--cosmic);border-radius:12px;background:#fff;overflow:hidden;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.zboard:focus-visible{outline:3px solid var(--violet);outline-offset:3px}.zline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.zcell{position:relative;z-index:2;aspect-ratio:1;display:grid;place-items:center;border:1px solid #e4d6f5;cursor:pointer}.zcell.head{box-shadow:inset 0 0 0 4px var(--cyan)}.zcell.tip{box-shadow:inset 0 0 0 4px var(--star)}.zcell.tip:after{content:"?";position:absolute;top:2px;right:6px;font:700 14px var(--font-title);color:#7a5a00}.zdot{display:grid;place-items:center;width:60%;aspect-ratio:1;border-radius:50%;background:var(--cosmic);color:#fff;font:700 20px var(--font-title);border:2px solid var(--cosmic)}.zdot.done{background:var(--cyan);color:var(--ink)}.zdot.done:after{content:"✓";position:absolute;bottom:4px;right:6px;font-size:11px}body{background:transparent;min-height:100vh}body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(38,16,77,.35),rgba(38,16,77,.15) 40%,rgba(38,16,77,.7)),url(/fantasy.jpg) 50% /cover no-repeat}.top{background:transparent;padding:12px 16px}.brand .wordmark{text-shadow:0 0 18px rgba(18,207,224,.35)}.tagline{text-shadow:0 1px 6px rgba(38,16,77,.8);color:#fff}.stage{background:transparent;border-radius:0;min-height:0;padding-bottom:32px}.hero{background:none;padding:8px 16px 20px}.hero img{width:min(84vw,400px);border-radius:0;box-shadow:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in,xor;mask-composite:intersect}.wrap{background:var(--cloud);border-radius:24px;width:calc(100% - 24px);max-width:720px;margin:0 auto 16px;padding:24px 16px 32px;box-shadow:0 12px 40px rgba(18,6,40,.45),0 0 0 1px hsla(0,0%,100%,.25)}@media (min-width:640px){.wrap{padding:32px 32px 40px}}.top{background:linear-gradient(rgba(38,16,77,.85),rgba(38,16,77,0))}.brand .wordmark{background:none;color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 1px 8px rgba(38,16,77,.9),0 0 18px rgba(18,207,224,.4)}body:before{background-position:35%}.top{background:none}body:before{background:linear-gradient(180deg,rgba(38,16,77,.55),rgba(38,16,77,.1) 30%,rgba(38,16,77,.25) 70%,rgba(38,16,77,.75)),url(/fantasy.jpg) 35% /cover no-repeat}