:root{--bg:#0b1020;--bg-soft:#131a2f;--panel:rgba(255,255,255,.10);--panel-2:rgba(255,255,255,.16);--text:#eef2ff;--muted:#b7c3ea;--line:rgba(255,255,255,.18);--brand:#7c5cff;--brand-2:#15c6ff;--good:#2dd4bf;--warn:#f59e0b;--danger:#f43f5e;--shadow:0 18px 50px rgba(0,0,0,.25);--radius:22px;--radius-sm:14px;--max:1200px}
:root[data-theme='light']{--bg:#edf2ff;--bg-soft:#dfe9ff;--panel:rgba(255,255,255,.72);--panel-2:rgba(255,255,255,.84);--text:#111936;--muted:#42517d;--line:rgba(17,25,54,.12);--shadow:0 16px 45px rgba(57,74,123,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:radial-gradient(circle at top left,#24325b 0,#12192f 35%,#09101e 100%);min-height:100vh}html[data-theme='light'] body{background:radial-gradient(circle at top left,#ffffff 0,#edf2ff 42%,#dfe7ff 100%)}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.sr-only{position:absolute;left:-9999px}
.page-shell{position:relative;overflow:hidden}.orb,.orb-2{position:fixed;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.35}.orb{width:280px;height:280px;background:#7c5cff;top:-80px;right:-60px}.orb-2{width:320px;height:320px;background:#15c6ff;left:-120px;bottom:-100px}.container{width:min(100% - 28px,var(--max));margin:auto}.topbar{position:sticky;top:0;backdrop-filter:blur(18px);background:rgba(9,16,30,.58);border-bottom:1px solid var(--line);z-index:20}html[data-theme='light'] .topbar{background:rgba(255,255,255,.74)}.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}.brand{display:flex;align-items:center;gap:12px}.brand-badge{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow);display:grid;place-items:center;color:#fff;font-weight:800}.brand h1,.brand p{margin:0}.brand h1{font-size:1.05rem}.brand p{color:var(--muted);font-size:.82rem}.nav-links{display:flex;flex-wrap:wrap;gap:10px}.nav-links a,.chip,.btn{border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(14px);padding:11px 16px;border-radius:999px;color:var(--text);transition:.25s transform,.25s background,.25s border-color;cursor:pointer}.nav-links a:hover,.chip:hover,.btn:hover{transform:translateY(-2px);background:var(--panel-2)}.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none}.btn-ghost{background:transparent}.hero{padding:54px 0 28px}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}.glass{background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.hero-copy,.hero-panel,.card,.game-shell,.guide-section,.faq-item,.control-bar,.meta-grid>div,.footer-card,.board-panel{padding:22px}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:.9rem}.hero h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;margin:16px 0 12px}.lead{font-size:1.08rem;color:var(--muted);max-width:62ch}.cta-row,.action-row,.top-actions{display:flex;flex-wrap:wrap;gap:12px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.stat{padding:16px;border-radius:18px;background:var(--panel-2);border:1px solid var(--line)}.stat strong{display:block;font-size:1.35rem}.section{padding:26px 0}.section h2{font-size:1.8rem;margin:0 0 14px}.section h3{margin:0 0 10px}.grid{display:grid;gap:18px}.game-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.card{display:flex;flex-direction:column;gap:14px}.card:hover{transform:translateY(-3px)}.card p,.muted{color:var(--muted)}.tags{display:flex;flex-wrap:wrap;gap:8px}.tag{padding:7px 11px;border-radius:999px;background:rgba(124,92,255,.14);color:var(--text);border:1px solid rgba(124,92,255,.28);font-size:.86rem}.page-title{padding:32px 0 10px}.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:.92rem}.breadcrumbs a:hover{text-decoration:underline}.game-layout{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}.sidebar{position:sticky;top:84px}.control-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.control-bar{display:grid;gap:14px}.control-line{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.control-line label{color:var(--muted)}.switch{display:inline-flex;align-items:center;gap:10px}.game-shell{min-height:520px;display:grid;gap:16px}.meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.meta-grid>div{border-radius:18px;background:var(--panel-2);border:1px solid var(--line)}.meta-grid span{display:block;color:var(--muted);font-size:.85rem}.status{padding:12px 16px;border-radius:16px;background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.28)}.board-panel{border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--line)}.board,.grid-board,.memory-board,.sudoku-board,.water-board,.line-board,.chess-board,.blast-board,.ludo-board{display:grid;gap:8px;touch-action:manipulation}.tile,.bubble,.memory-card,.sudoku-cell,.bottle,.cell,.ludo-cell,.piece-chip,.shape-chip,.num-btn{user-select:none}.board-2048{grid-template-columns:repeat(4,minmax(0,1fr));max-width:440px;margin:auto}.tile{aspect-ratio:1;border-radius:18px;display:grid;place-items:center;font-weight:800;font-size:clamp(1rem,3vw,2rem);background:rgba(255,255,255,.08);border:1px solid var(--line)}.game-over,.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;place-items:center;padding:20px;z-index:40}.modal-card{max-width:540px;width:100%;padding:24px;border-radius:26px;background:var(--bg-soft);border:1px solid var(--line);box-shadow:var(--shadow)}.show{display:grid!important}.toast{position:fixed;right:16px;bottom:16px;min-width:220px;padding:14px 16px;border-radius:16px;background:rgba(15,23,42,.88);color:#fff;box-shadow:var(--shadow);transform:translateY(18px);opacity:0;transition:.25s;z-index:60}.toast.show{opacity:1;transform:translateY(0)}.loader{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:80;transition:.35s}.loader.hide{opacity:0;pointer-events:none}.spinner{width:72px;height:72px;border-radius:50%;border:6px solid rgba(255,255,255,.15);border-top-color:var(--brand-2);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.guide-wrap{display:grid;gap:16px}.guide-section ul{padding-left:18px;margin:10px 0 0}.guide-section p,.guide-section li{color:var(--muted)}.faq-item summary{cursor:pointer;font-weight:700}.footer{padding:28px 0 42px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.footer small{color:var(--muted)}.top-top{position:fixed;right:16px;bottom:80px}.hidden{display:none!important}.canvas-wrap{max-width:100%;overflow:auto}.canvas-wrap canvas{max-width:100%;display:block;margin:auto;background:rgba(255,255,255,.04);border-radius:18px;border:1px solid var(--line)}.water-board{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));align-items:end}.bottle{height:180px;border-radius:18px 18px 12px 12px;border:2px solid var(--line);padding:8px;display:flex;flex-direction:column-reverse;gap:4px;background:rgba(255,255,255,.04)}.liquid{height:25%;border-radius:10px}.memory-board{grid-template-columns:repeat(auto-fit,minmax(72px,1fr))}.memory-card{aspect-ratio:1;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,92,255,.28),rgba(21,198,255,.22));border:1px solid var(--line);font-size:1.7rem;font-weight:800}.memory-card.revealed{background:rgba(255,255,255,.82);color:#111}.sudoku-board{grid-template-columns:repeat(9,1fr);max-width:540px;margin:auto}.sudoku-cell{aspect-ratio:1;border:1px solid var(--line);display:grid;place-items:center;background:rgba(255,255,255,.06);font-weight:700;border-radius:10px}.sudoku-cell.fixed{background:rgba(21,198,255,.16)}.sudoku-cell.selected{outline:2px solid var(--brand-2)}.num-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:540px;margin:14px auto 0}.num-btn{padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}.chess-board{grid-template-columns:repeat(8,1fr);max-width:560px;margin:auto}.cell{aspect-ratio:1;border-radius:12px;display:grid;place-items:center;font-size:2rem}.cell.light{background:#f4ead8;color:#111}.cell.dark{background:#8f6f52}.cell.hl{outline:3px solid #15c6ff}.line-board{grid-template-columns:repeat(6,1fr);max-width:520px;margin:auto}.arrow-tile{aspect-ratio:1;border-radius:18px;border:1px solid var(--line);display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:1.7rem}.blast-board{grid-template-columns:repeat(8,1fr);max-width:480px;margin:auto}.blast-cell{aspect-ratio:1;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--line)}.blast-cell.filled{background:linear-gradient(135deg,var(--brand),var(--brand-2))}.shape-bank{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.shape-chip{min-height:110px;border-radius:18px;padding:10px;border:1px dashed var(--line);display:grid;place-items:center;background:rgba(255,255,255,.04)}.shape-grid{display:grid;gap:4px}.shape-grid .shape-cell{width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.18)}.shape-grid .shape-cell.on{background:linear-gradient(135deg,var(--brand),var(--brand-2))}.ludo-board{grid-template-columns:repeat(7,1fr);max-width:520px;margin:auto}.ludo-cell{aspect-ratio:1;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);display:grid;place-items:center;position:relative}.token{width:60%;height:60%;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}.token.red{background:#ef4444}.token.blue{background:#3b82f6}.token.green{background:#22c55e}.token.yellow{background:#eab308}.bubble-ui{display:grid;gap:14px}.bubble-grid{grid-template-columns:repeat(8,1fr);max-width:520px;margin:auto}.bubble{aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.3)}.controls-hint{color:var(--muted);font-size:.92rem}.legal{outline:3px solid rgba(45,212,191,.55)}.selected-card{outline:3px solid var(--brand-2)}
@media (max-width:960px){.hero-grid,.game-layout,.footer-grid{grid-template-columns:1fr}.sidebar{position:static}.meta-grid{grid-template-columns:repeat(2,1fr)}.nav{align-items:flex-start;flex-direction:column}.line-board{grid-template-columns:repeat(5,1fr)}}
@media (max-width:640px){.control-grid,.stats,.meta-grid{grid-template-columns:1fr 1fr}.hero h2{font-size:2.2rem}.brand-badge{width:42px;height:42px}.memory-board{grid-template-columns:repeat(4,1fr)}.bubble-grid{grid-template-columns:repeat(7,1fr)}}