:root{--sq-light: #fdf2fb;--sq-mid: #c8b6f5;--bg: #fff5fb;--bg2: #f0e7ff;--panel: #fff;--panel-edge: #ffd6ee;--ink: #4a2a5e;--ink-soft: #8f6fa8;--accent: #ff5fa2;--accent2: #8b5cf6;--accent3: #ffc93c;--piece-light: #fffdfe;--piece-light-edge: #d9a7cf;--piece-dark: #7b3fa0;--piece-dark-edge: #4a2266;--radius: 22px;--radius-sm: 14px;--shadow: 0 8px 0 rgba(0, 0, 0, .06), 0 14px 30px rgba(120, 60, 130, .14);--shadow-sm: 0 3px 0 rgba(0, 0, 0, .05), 0 6px 16px rgba(120, 60, 130, .12);--rainbow: linear-gradient(90deg, #ff6b9d, #ffa94d, #ffd93d, #6bcf7f, #4dabf7, #b197fc)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;font-family:Nunito,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,.display{font-family:"Baloo 2",Nunito,system-ui,sans-serif;font-weight:800;letter-spacing:.2px;margin:0}button{font-family:inherit}.app{min-height:100%;position:relative;background:radial-gradient(1100px 600px at 12% -8%,var(--bg2) 0%,transparent 60%),radial-gradient(900px 500px at 88% 4%,color-mix(in srgb,var(--accent) 16%,transparent) 0%,transparent 62%),var(--bg);display:flex;flex-direction:column}.app-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:14px 16px 16px;position:relative;z-index:1}.sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;contain:strict}.sky span{position:absolute;font-size:26px;opacity:.35;animation:drift linear infinite;will-change:transform}@keyframes drift{0%{transform:translate3d(0,108vh,0) rotate(0)}to{transform:translate3d(40px,-18vh,0) rotate(340deg)}}@media(prefers-reduced-motion:reduce){.sky{display:none}*{animation-duration:1ms!important;transition-duration:1ms!important}}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bg);border-bottom:2px solid color-mix(in srgb,var(--panel-edge) 70%,transparent)}.brand{display:flex;align-items:center;gap:9px;font-family:"Baloo 2",sans-serif;font-size:22px;font-weight:800;cursor:pointer;border:0;background:none;color:var(--ink);padding:4px 6px;border-radius:var(--radius-sm)}.brand .crown{font-size:26px;animation:bob 3s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}.brand-text{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}.topbar-spacer{flex:1}.btn{border:0;cursor:pointer;font-weight:800;font-size:16px;padding:12px 20px;border-radius:999px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s,filter .12s;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;min-height:46px}.btn:hover{transform:translateY(-2px) scale(1.03)}.btn:active{transform:translateY(2px) scale(.98);box-shadow:0 1px #00000014}.btn:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent2) 70%,var(--accent)));color:#fff;box-shadow:0 5px color-mix(in srgb,var(--accent) 55%,#000),0 12px 24px #c83c8c47}.btn-primary:active{box-shadow:0 1px color-mix(in srgb,var(--accent) 55%,#000)}.btn-ghost{background:color-mix(in srgb,var(--panel) 70%,transparent)}.btn-lg{font-size:20px;padding:16px 30px;min-height:60px;border-radius:26px}.btn-sm{font-size:14px;padding:8px 14px;min-height:38px}.btn-icon{padding:10px;min-width:46px;border-radius:16px}.panel{background:var(--panel);border:2px solid var(--panel-edge);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.panel-tight{padding:12px}.card{background:var(--panel);border:2px solid var(--panel-edge);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm);text-align:left;cursor:pointer;color:inherit;transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .14s;position:relative;overflow:hidden}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.card:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}.card[aria-disabled=true]{opacity:.55;cursor:default;transform:none}.muted{color:var(--ink-soft)}.tiny{font-size:13px}.row{display:flex;align-items:center;gap:10px}.wrap{flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:10px}.grid{display:grid;gap:14px}.center{text-align:center}.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:800;background:color-mix(in srgb,var(--accent2) 15%,var(--panel));color:var(--ink)}.pill-rainbow{background:var(--rainbow);color:#4a2a5e}.board-wrap{position:relative;width:100%;max-width:min(640px,max(280px,calc(100vh - var(--board-chrome, 22vh))));max-width:min(640px,max(280px,calc(100dvh - var(--board-chrome, 22vh))));margin:0 auto}.board{position:relative;width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:20px;overflow:hidden;border:6px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--rainbow) border-box;box-shadow:0 10px color-mix(in srgb,var(--accent2) 22%,transparent),0 24px 44px #5a286e38;touch-action:manipulation;user-select:none;container-type:inline-size}.board.flat{box-shadow:var(--shadow-sm)}.sq{position:relative;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:var(--sq-light);cursor:pointer}.sq.dark{background:var(--sq-mid)}.sq[disabled]{cursor:default}.sq .coord{position:absolute;font-size:max(7px,1.4cqw);font-weight:800;opacity:.5;pointer-events:none}.sq .coord.file{bottom:2px;right:4px}.sq .coord.rank{top:2px;left:4px}.sq.sel:after{content:"";position:absolute;inset:4%;border-radius:14px;border:4px solid var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent);animation:pulseGlow 1.3s ease-in-out infinite;pointer-events:none}@keyframes pulseGlow{0%,to{opacity:.85}50%{opacity:.35}}.sq.last{background-image:linear-gradient(color-mix(in srgb,var(--accent3) 45%,transparent),color-mix(in srgb,var(--accent3) 45%,transparent))}.sq.hint{background-image:linear-gradient(color-mix(in srgb,var(--accent2) 30%,transparent),color-mix(in srgb,var(--accent2) 30%,transparent))}.dot{position:absolute;width:30%;height:30%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff8,transparent 60%),var(--accent2);opacity:.6;pointer-events:none;animation:popIn .22s cubic-bezier(.34,1.56,.64,1)}.dot.capture{width:92%;height:92%;background:none;border:7px solid color-mix(in srgb,var(--accent) 80%,transparent);border-radius:50%;opacity:.85}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.sq.check-sq:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ff5a7a 0%,#ff5a7a55 45%,transparent 72%);animation:pulseGlow .7s ease-in-out infinite;pointer-events:none}.sq .marker{position:absolute;font-size:6cqw;pointer-events:none;animation:twinkle 1.4s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}@keyframes twinkle{0%,to{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.18) rotate(6deg)}}.piece-svg{width:88%;height:88%;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(60,20,70,.28));overflow:visible}.piece-svg .pc-fill{fill:var(--piece-light);stroke:var(--piece-light-edge);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}.piece-svg.pc-black .pc-fill{fill:var(--piece-dark);stroke:var(--piece-dark-edge)}.piece-svg .pc-dot{fill:var(--piece-light-edge);stroke:var(--piece-light-edge)}.piece-svg.pc-black .pc-dot{fill:var(--piece-dark-edge);stroke:var(--piece-dark-edge)}.piece-svg .pc-line{fill:none}.piece-svg .pc-accent{fill:var(--accent3);stroke:color-mix(in srgb,var(--accent3) 60%,#000);stroke-width:2.5;stroke-linejoin:round}.piece-svg .pc-accent.pc-line{fill:none;stroke:var(--accent3)}.piece-svg .pc-accent2{fill:var(--accent);stroke:color-mix(in srgb,var(--accent) 65%,#000);stroke-width:2;stroke-linejoin:round}.piece-svg .pc-mane1{fill:var(--accent);opacity:.95}.piece-svg .pc-mane2{fill:var(--accent2);opacity:.9}.piece-svg .pc-shine{fill:#fff;opacity:.35}.piece-svg.pc-black .pc-shine{opacity:.14}.piece-svg.set-classic .pc-fill{fill:#fffdf7;stroke:#2a2230;stroke-width:3}.piece-svg.set-classic.pc-black .pc-fill{fill:#34293c;stroke:#16101c}.piece-svg.set-classic .pc-dot{fill:#2a2230;stroke:#2a2230}.piece-svg.set-classic.pc-black .pc-dot{fill:#d8cde4;stroke:#d8cde4}.piece-svg.set-classic .pc-shine{opacity:0}.piece-badge{width:42px;height:42px}.pc-wrap{display:grid;place-items:center;width:100%;height:100%}.pc-wrap.slide{animation:slideIn .24s cubic-bezier(.3,.8,.4,1)}@keyframes slideIn{0%{transform:translate(var(--dx),var(--dy))}to{transform:translate(0)}}.drop-in{animation:dropIn .32s cubic-bezier(.34,1.56,.64,1)}@keyframes dropIn{0%{transform:scale(.3) rotate(-20deg);opacity:0}to{transform:scale(1);opacity:1}}.dragging-piece{position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:grid;place-items:center;will-change:transform;filter:drop-shadow(0 8px 10px rgba(60,20,70,.35))}.dragging-piece .piece-svg{width:100%;height:100%;filter:none}.poof{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;font-size:7cqw;animation:poof .5s ease-out forwards}@keyframes poof{0%{transform:scale(.4);opacity:1}to{transform:scale(1.9) rotate(25deg);opacity:0}}.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}.confetti{position:absolute;top:-8vh;font-size:22px;animation:confettiFall var(--dur, 2.4s) linear forwards;will-change:transform}@keyframes confettiFall{0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:1}to{transform:translate3d(var(--drift, 30px),110vh,0) rotate(720deg);opacity:.9}}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%);z-index:95;background:var(--panel);border:3px solid var(--panel-edge);padding:12px 22px;border-radius:999px;font-weight:800;box-shadow:var(--shadow);animation:bounceIn .4s cubic-bezier(.34,1.56,.64,1);max-width:90vw;text-align:center}@keyframes bounceIn{0%{transform:translate(-50%) translateY(40px) scale(.8);opacity:0}to{transform:translate(-50%) translateY(0) scale(1);opacity:1}}.scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 66%,transparent);display:grid;place-items:center;z-index:100;padding:18px;animation:fadeIn .18s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--panel);border:3px solid var(--panel-edge);border-radius:28px;padding:24px;max-width:460px;width:100%;box-shadow:0 20px 60px #3c144659;animation:bounceIn .34s cubic-bezier(.34,1.56,.64,1);text-align:center;max-height:88vh;overflow-y:auto}.hero{text-align:center;padding:26px 10px 8px}.hero h1{font-size:clamp(38px,9vw,74px);line-height:1;background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(255,255,255,.6))}.hero .tag{font-size:clamp(15px,3.4vw,20px);font-weight:700;color:var(--ink-soft);margin-top:8px}.hero .crown-big{font-size:clamp(54px,13vw,92px);display:block;animation:bob 3.4s ease-in-out infinite}.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:26px}.menu-card{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:26px;min-height:140px;justify-content:center;border:3px solid var(--panel-edge)}.menu-card .big{font-size:42px}.menu-card h3{font-size:23px}.home-stats{margin-top:20px}.home-links{margin-top:16px;justify-content:center}@media(orientation:landscape)and (max-height:860px){.hero{padding:4px 10px 0}.hero .crown-big{font-size:clamp(40px,7vh,72px)}.hero h1{font-size:clamp(38px,7.5vh,66px)}.hero .tag{margin-top:2px}.menu-grid{margin-top:14px;gap:12px}.menu-card{min-height:0;padding:14px 18px;gap:2px}.menu-card .big{font-size:32px}.home-stats{margin-top:12px}.home-links{margin-top:8px}.footer-note{padding-top:8px}}.menu-card:before{content:"";position:absolute;inset:auto -30% -60% auto;width:160px;height:160px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent)}.play-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;--board-chrome: 260px}.play-layout.lesson-layout{--board-chrome: 230px}@media(min-width:900px){.play-layout{grid-template-columns:minmax(0,1fr) 320px}}.player-strip{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:18px;background:var(--panel);border:2px solid var(--panel-edge);box-shadow:var(--shadow-sm)}.player-strip.active{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 24%,transparent),var(--shadow-sm)}.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:24px;flex:none;background:var(--rainbow)}.avatar.thinking{animation:bob .9s ease-in-out infinite}.taken{display:flex;gap:1px;flex-wrap:wrap;align-items:center}.taken .piece-svg{width:22px;height:22px;filter:none;opacity:.85}.movelist{display:grid;grid-template-columns:30px 1fr 1fr;gap:3px 8px;font-size:14px;max-height:260px;overflow-y:auto;font-variant-numeric:tabular-nums}.movelist .num{color:var(--ink-soft);font-weight:700}.movelist .san{font-weight:800;padding:1px 5px;border-radius:7px}.movelist .san.current{background:color-mix(in srgb,var(--accent3) 55%,transparent)}.thinkbar{height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}.thinkbar i{display:block;height:100%;width:40%;border-radius:999px;background:var(--rainbow);animation:sweep 1.1s ease-in-out infinite}@keyframes sweep{0%{transform:translate(-100%)}to{transform:translate(300%)}}.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}.lesson-card{display:flex;flex-direction:column;gap:6px;min-height:150px}.lesson-card .icon{font-size:34px}.lesson-card.done{border-color:color-mix(in srgb,var(--accent2) 60%,transparent)}.stars{font-size:17px;letter-spacing:2px}.chapter-head{display:flex;align-items:center;gap:10px;margin:22px 0 10px}.chapter-head .line{flex:1;height:4px;border-radius:4px;background:var(--rainbow);opacity:.55}.coach{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:3px solid var(--panel-edge);border-radius:22px;padding:14px 16px;box-shadow:var(--shadow-sm)}.coach .face{font-size:34px;flex:none;animation:bob 3s ease-in-out infinite}.coach p{margin:0;font-size:16px;font-weight:700;line-height:1.45}.coach .step{font-size:13px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.6px}.progress-track{height:12px;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}.progress-track i{display:block;height:100%;border-radius:999px;background:var(--rainbow);transition:width .4s cubic-bezier(.34,1.56,.64,1)}.queen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}.queen-card{display:flex;flex-direction:column;gap:8px}.queen-portrait{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:36px;flex:none;box-shadow:inset 0 -6px 12px #00000014;border:3px solid #fff8}.queen-card h3{font-size:18px;line-height:1.15;overflow-wrap:anywhere}.queen-card .row>div{min-width:0}.level-dots{display:flex;gap:3px}.level-dots i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent)}.level-dots i.on{background:var(--accent)}.fact{background:color-mix(in srgb,var(--accent3) 22%,var(--panel));border-radius:16px;padding:10px 13px;font-size:14px;font-weight:700}.swatches{display:flex;gap:10px;flex-wrap:wrap}.swatch{border:3px solid transparent;border-radius:18px;padding:8px;cursor:pointer;background:var(--panel);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:800;width:98px;color:inherit}.swatch.on{border-color:var(--accent)}.swatch .mini{width:56px;height:56px;border-radius:12px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.swatch .mini i{display:block}.field{display:flex;flex-direction:column;gap:6px}.field label{font-weight:800;font-size:14px}.field input,.field select{font:inherit;font-weight:700;padding:12px 14px;border-radius:16px;border:2px solid var(--panel-edge);background:var(--panel);color:var(--ink);min-height:48px}.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}.code-box{font-family:"Baloo 2",monospace;font-size:clamp(28px,8vw,44px);font-weight:800;letter-spacing:4px;background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:all}.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:2px dashed color-mix(in srgb,var(--panel-edge) 90%,transparent);font-weight:700}.toggle:last-child{border-bottom:0}.switch{width:58px;height:32px;border-radius:999px;border:0;cursor:pointer;background:color-mix(in srgb,var(--ink) 16%,transparent);position:relative;transition:background .2s;flex:none}.switch.on{background:var(--accent)}.switch:after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .22s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 5px #0003}.switch.on:after{transform:translate(26px)}.footer-note{text-align:center;font-size:13px;color:var(--ink-soft);padding:26px 16px 8px}.footer-note a{color:var(--accent2)}.scroll-x{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.scroll-x>*{flex:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.wiggle{animation:wiggle .42s ease-in-out}@keyframes wiggle{0%,to{transform:translate(0)}20%{transform:translate(-7px) rotate(-3deg)}45%{transform:translate(7px) rotate(3deg)}70%{transform:translate(-4px)}}@media(max-width:560px){.app-main{padding:10px 11px 12px}.panel{padding:13px;border-radius:18px}.btn{font-size:15px;padding:11px 17px}}.timeline{display:flex;flex-direction:column;gap:12px;margin-top:14px}.champ{display:grid;grid-template-columns:116px 1fr;gap:14px;background:var(--panel);border:2px solid var(--panel-edge);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm)}.champ h3{font-size:19px;overflow-wrap:anywhere}.champ-when{font-weight:800;font-size:13px;color:var(--accent2);padding-top:3px;font-variant-numeric:tabular-nums}@media(max-width:560px){.champ{grid-template-columns:1fr;gap:4px}}.linkish{border:0;background:none;padding:0;font:inherit;font-weight:800;color:var(--accent2);text-decoration:underline;cursor:pointer}:root[data-calm="1"] .sky{display:none}:root[data-calm="1"] .hero h1,:root[data-calm="1"] .brand .crown,:root[data-calm="1"] .hero .crown-big,:root[data-calm="1"] .coach .face,:root[data-calm="1"] .marker,:root[data-calm="1"] .avatar.thinking,:root[data-calm="1"] .sq.sel:after,:root[data-calm="1"] .sq.check-sq:before{animation:none}