*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}body{overflow-x:hidden;--bg:#080c18;--surface:#11182a;--surface2:#182238;--border:#26334d;--text:#f5f7ff;--muted:#94a0b8;--primary:#5eead4;--primary2:#22d3ee;--danger:#fb7185;--shadow:0 24px 80px #0008}body[data-theme=ocean]{--primary:#60a5fa;--primary2:#22d3ee}body[data-theme=forest]{--primary:#86efac;--primary2:#34d399}body[data-theme=sunset]{--primary:#fbbf24;--primary2:#fb7185}body[data-theme=neon]{--primary:#e879f9;--primary2:#22d3ee}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,60px);border-bottom:1px solid var(--border);background:#080c18cc;backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}.brand{font-size:18px;font-weight:900;letter-spacing:.16em;color:var(--text);display:flex;gap:10px;align-items:center}.brand-mark{color:var(--primary);font-size:25px}.top-actions{display:flex;align-items:center;gap:8px}.pill{font-size:12px;color:var(--muted);padding:8px 12px;border:1px solid var(--border);border-radius:999px}.pill b{color:var(--text)}button,select,input{font:inherit}.btn,.icon-btn,.btn-ghost,.feature-card,.mode-card,.dpad button{cursor:pointer;border:0}.btn{border-radius:14px;padding:13px 20px;font-weight:800;transition:.2s transform,.2s filter}.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#061017;box-shadow:0 10px 35px color-mix(in srgb,var(--primary) 25%,transparent)}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-danger{background:#3a1823;color:#fecdd3;border:1px solid #6b2738}.icon-btn{width:42px;height:42px;border-radius:12px;background:var(--surface);color:var(--text);border:1px solid var(--border);font-size:17px}.btn-ghost{background:transparent;color:var(--text)}.screen{display:none;max-width:1200px;margin:auto;padding:clamp(25px,5vw,70px) clamp(16px,4vw,40px)}.screen.active{display:block}.hero{min-height:540px;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;position:relative}.hero-glow{position:absolute;width:430px;height:430px;border-radius:50%;background:var(--primary);filter:blur(120px);opacity:.12;left:-130px;top:60px;pointer-events:none}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--primary);margin:0 0 14px}.hero h1{font-size:clamp(48px,7vw,88px);line-height:.95;margin:0 0 25px;letter-spacing:-.06em}.hero h1 span{background:linear-gradient(100deg,var(--primary),var(--primary2));-webkit-background-clip:text;background-clip:text;color:transparent}.lead{color:var(--muted);font-size:17px;line-height:1.7;max-width:540px}.hero-actions{display:flex;gap:12px;margin-top:30px}.hero-card{background:linear-gradient(145deg,#ffffff0b,#ffffff03);border:1px solid var(--border);border-radius:28px;padding:25px;box-shadow:var(--shadow)}.mini-board{aspect-ratio:1;border-radius:20px;background:repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 10%),repeating-linear-gradient(90deg,#ffffff04 0 1px,transparent 1px 10%);position:relative;overflow:hidden}.mini-board:before{content:"";position:absolute;width:42%;height:12%;border-radius:20px;background:linear-gradient(90deg,var(--primary),var(--primary2));left:25%;top:48%;box-shadow:0 0 30px var(--primary)}.mini-board:after{content:"";position:absolute;width:7%;aspect-ratio:1;border-radius:50%;background:#fb7185;right:20%;top:28%;box-shadow:0 0 20px #fb7185}.mini-stats{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:800;padding-top:18px}.mini-stats b{color:var(--text);font-size:18px;margin-left:5px}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feature-card{text-align:left;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:18px;color:var(--text);transition:.2s transform,.2s border}.feature-card:hover{transform:translateY(-3px);border-color:#ffffff33}.feature-card span{font-size:25px;display:block;margin-bottom:16px}.feature-card b,.feature-card small{display:block}.feature-card small{color:var(--muted);margin-top:6px}.page-head{display:flex;align-items:center;gap:18px;margin-bottom:30px}.page-head h2{margin:0;font-size:40px;letter-spacing:-.04em}.back{font-size:28px}.game-screen{max-width:1000px;padding-top:20px}.game-shell{max-width:720px;margin:auto}.game-head{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:10px;align-items:center;margin-bottom:12px}.game-head div{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:9px 12px}.game-head .muted{display:block;font-size:9px;color:var(--muted);letter-spacing:.12em}.game-head strong{font-size:18px}.board-wrap{position:relative;width:min(82vw,720px);margin:auto;aspect-ratio:1;border-radius:24px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow),0 0 80px #0005;background:#07101b}.board-wrap canvas{width:100%;height:100%;display:block;touch-action:none}.game-overlay{position:absolute;inset:0;background:#050913d9;backdrop-filter:blur(8px);display:grid;place-items:center;text-align:center;padding:30px}.game-overlay.hidden{display:none}.overlay-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:30px;max-width:360px;width:100%}.overlay-card h2{font-size:32px;margin:0 0 10px}.overlay-card p{color:var(--muted);line-height:1.6}.game-foot{display:flex;justify-content:center;padding:13px;color:var(--muted)}.game-foot div{display:flex;gap:25px}.dpad{display:none;width:190px;margin:8px auto 0;grid-template-columns:repeat(3,58px);gap:6px;justify-content:center}.dpad button{height:52px;border-radius:13px;background:var(--surface2);color:var(--text);border:1px solid var(--border);font-size:18px}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1}.dpad button:nth-child(3){grid-column:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.mode-card{padding:25px;text-align:left;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:20px;min-height:170px}.mode-card.selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}.mode-card .emoji{font-size:30px}.mode-card h3{margin:15px 0 7px}.mode-card p{margin:0;color:var(--muted);line-height:1.5}.mode-card small{display:block;color:var(--primary);margin-top:15px}.progress-card,.panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px;margin-bottom:16px}.progress-card>div:first-child{display:flex;justify-content:space-between;color:var(--muted)}.progress-card b{color:var(--text)}.progress{height:8px;background:#ffffff0b;border-radius:99px;margin-top:14px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary2));border-radius:inherit}.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.achievement{background:var(--surface);border:1px solid var(--border);border-radius:17px;padding:18px;min-height:155px}.achievement.locked{opacity:.48}.achievement .aicon{font-size:28px}.achievement h3{font-size:15px;margin:12px 0 5px}.achievement p{font-size:12px;color:var(--muted);line-height:1.5;margin:0}.achievement small{display:block;color:var(--primary);margin-top:12px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.stat{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px}.stat span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.stat b{font-size:29px;display:block;margin-top:8px}.history-item{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding:12px 0}.history-item:last-child{border:0}.history-item span{color:var(--muted);font-size:13px}.settings-list{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;margin-bottom:16px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid var(--border)}.setting-row:last-child{border:0}.setting-row b,.setting-row small{display:block}.setting-row small{color:var(--muted);margin-top:5px}.setting-row select{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:9px}.setting-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--primary)}.button-row{display:flex;flex-wrap:wrap;gap:10px}.file-label{display:inline-flex;align-items:center}.file-label input{display:none}.how p{color:var(--muted);line-height:1.7}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;background:var(--surface2);border:1px solid var(--border);padding:12px 18px;border-radius:999px;box-shadow:var(--shadow);z-index:50;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:800px){.hero{grid-template-columns:1fr;min-height:auto;padding:35px 0}.hero-card{max-width:460px;margin:auto;width:100%}.quick-grid{grid-template-columns:repeat(2,1fr)}.achievement-grid{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.mode-grid{grid-template-columns:1fr}.dpad{display:grid}.game-screen{padding-left:8px;padding-right:8px}.game-head{grid-template-columns:repeat(4,1fr) auto}.game-head div{padding:7px}.game-head strong{font-size:15px}}@media(max-width:480px){.topbar{height:62px}.pill{display:none}.hero h1{font-size:50px}.lead{font-size:15px}.quick-grid{gap:9px}.feature-card{padding:15px}.feature-card span{font-size:21px;margin-bottom:10px}.feature-card small{font-size:11px}.screen{padding-top:25px}.page-head h2{font-size:30px}.achievement-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.stat{padding:15px}.stat b{font-size:23px}.game-head .icon-btn{width:38px;height:38px}.game-foot div{gap:13px;font-size:12px}.board-wrap{border-radius:17px}.hero-actions .btn{flex:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}