:root{--ink:#26304a;--muted:#79819a;--cream:#fffaf1;--purple:#7057d9;--yellow:#ffc94a;--mint:#55d4b1;--pink:#ff7e9d;--card:#fff;--shadow:0 12px 30px #51448a18}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Kanit,system-ui,sans-serif}button,input{font:inherit}button{border:0;cursor:pointer}.shell{max-width:1160px;margin:auto;padding:22px 24px 50px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.brand{display:flex;align-items:center;gap:11px;font-family:Nunito;font-weight:900;font-size:22px}.brand-mark{width:43px;height:43px;background:var(--purple);border-radius:14px;display:grid;place-items:center;color:#fff;font-size:24px;transform:rotate(-7deg)}.nav{display:flex;align-items:center;gap:14px}.pill{background:#fff;padding:9px 16px;border-radius:99px;color:var(--purple);font-weight:600;box-shadow:var(--shadow)}.btn{padding:12px 21px;border-radius:14px;font-weight:600;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--purple);color:white;box-shadow:0 6px 0 #5844b2}.btn-yellow{background:var(--yellow);color:#5b4510;box-shadow:0 6px 0 #e4aa2b}.btn-plain{background:#f2efff;color:var(--purple)}.hero{background:#e9e3ff;border-radius:29px;padding:35px 42px;display:grid;grid-template-columns:1.3fr .7fr;overflow:hidden;position:relative;margin-bottom:24px}.hero:after{content:'✦';position:absolute;font-size:170px;color:#fff6;right:55px;top:13px}.eyebrow{color:var(--purple);font-weight:600;letter-spacing:.4px;margin:0 0 7px}.hero h1{font-size:clamp(32px,5vw,56px);line-height:1.1;margin:0 0 12px;font-weight:700}.hero p{font-size:18px;color:#625b81;margin:0 0 23px}.mascot{align-self:end;justify-self:center;font-size:120px;z-index:1;filter:drop-shadow(0 8px 0 #c0b5f0)}.layout{display:grid;grid-template-columns:1.5fr .8fr;gap:24px}.card{background:var(--card);border-radius:24px;padding:24px;box-shadow:var(--shadow)}.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.card h2{margin:0;font-size:24px}.subtle{color:var(--muted);font-size:14px}.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.level{border:2px solid #eeeafa;border-radius:18px;padding:15px 11px;min-height:114px;text-align:left;background:#fff;color:var(--ink);position:relative}.level.active{border-color:var(--purple);background:#f5f2ff}.level.locked{opacity:.55}.level-no{font-family:Nunito;color:var(--purple);font-size:13px}.level strong{display:block;font-size:17px}.stars{color:var(--yellow);letter-spacing:-3px}.leader-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #f0edf6}.leader-row:last-child{border:0}.rank{width:28px;text-align:center;font-family:Nunito;color:var(--muted)}.avatar{width:36px;height:36px;border-radius:50%;background:#ffe3a5;display:grid;place-items:center}.leader-name{flex:1}.points{color:var(--purple);font-weight:700}.game-card{max-width:760px;margin:0 auto}.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.timer{background:#fff2d0;color:#9b6b00;padding:8px 14px;border-radius:12px;font-family:Nunito;font-size:20px}.progress{height:9px;background:#eeeaf8;border-radius:9px;overflow:hidden;margin-bottom:24px}.progress i{display:block;height:100%;background:var(--mint);border-radius:9px}.game-board{background:#ecf9f6;border-radius:22px;padding:22px;text-align:center}.grid{display:grid;gap:5px;max-width:420px;margin:0 auto 20px}.cell{aspect-ratio:1;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:25px}.wall{background:#b5a9eb}.goal{background:#ffe5a0}.player{background:#bbf0dd}.controls{display:grid;grid-template-columns:repeat(3,54px);gap:7px;justify-content:center}.controls button{width:54px;height:48px;background:#fff;border-radius:13px;color:var(--purple);font-size:25px;box-shadow:0 4px 0 #d9d4e6}.controls button:active{transform:translateY(3px);box-shadow:none}.auth-wrap{max-width:420px;margin:60px auto}.auth-wrap h1{text-align:center}.field{margin:14px 0}.field label{display:block;margin-bottom:5px;font-weight:600}.field input{width:100%;padding:12px 14px;border:2px solid #eeeafa;border-radius:13px;outline:none}.field input:focus{border-color:var(--purple)}.full{width:100%}.switch{text-align:center;color:var(--muted);margin:19px 0 0}.switch button{background:none;color:var(--purple);font-weight:600}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;z-index:5}.back{background:none;color:var(--purple);font-weight:600;margin-bottom:16px}@media(max-width:760px){.shell{padding:15px}.hero{grid-template-columns:1fr;padding:25px}.mascot{position:absolute;right:18px;bottom:0;font-size:90px;opacity:.65}.layout{grid-template-columns:1fr}.levels{grid-template-columns:repeat(2,1fr)}.nav .pill{display:none}.topbar{margin-bottom:17px}}