:root{
  --bg:#0b1220;--panel:#131f31;--panel2:#1b2b42;--border:#304762;--text:#f7fbff;--muted:#98abc0;
  --accent:#22c55e;--gold:#eab308;--light:#d9c7a3;--dark:#735744;--select:#facc15;--legal:#22c55e;--danger:#ef4444;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#08111d,var(--bg));color:var(--text)}
a,button{font:inherit}button{cursor:pointer}
.topbar{max-width:1500px;margin:auto;padding:22px 20px 14px}.topbar h1{margin:4px 0 6px;font-size:clamp(28px,4vw,42px)}.topbar p{margin:0;color:var(--muted)}
.eyebrow{font-size:11px;letter-spacing:.15em;color:#93c5fd;font-weight:800}
.mode-nav{max-width:1500px;margin:auto;padding:0 20px 16px;display:flex;gap:8px;flex-wrap:wrap}.mode-nav a{text-decoration:none;color:var(--text);background:var(--panel);border:1px solid var(--border);padding:10px 13px;border-radius:10px}.mode-nav a.active{border-color:#93c5fd;color:#bfdbfe}
.app-shell{max-width:1500px;margin:auto;padding:0 20px 24px;display:grid;grid-template-columns:280px minmax(0,1fr) 280px;gap:18px}
.panel{background:rgba(19,31,49,.97);border:1px solid var(--border);border-radius:18px;padding:17px}.sidebar,.history-panel{align-self:start}
.level-box span{display:block;color:var(--muted);font-size:12px;margin-bottom:7px}.level-links{display:flex;gap:6px}.level-links a{text-decoration:none;color:var(--text);padding:7px 9px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;font-size:12px}.level-links a.active{border-color:var(--accent)}
.stats{display:grid;gap:8px;margin-top:16px}.stats div{display:flex;justify-content:space-between;padding:10px;background:var(--panel2);border:1px solid var(--border);border-radius:9px}.stats span{color:var(--muted);font-size:12px}
.actions{display:grid;gap:8px;margin-top:14px}.actions button,.challenge-actions button,#nextQuiz{border:1px solid var(--border);background:var(--panel2);color:var(--text);padding:10px;border-radius:9px}.actions .primary{background:var(--accent);color:#052e16;border-color:transparent;font-weight:800}
.rules{margin-top:17px;padding-top:14px;border-top:1px solid var(--border)}.rules p,.muted{color:var(--muted);font-size:13px;line-height:1.5}
.board-area{display:grid;gap:14px;min-width:0}.board-panel{display:grid;justify-items:center}.player-bar{width:min(100%,680px);display:flex;gap:10px;align-items:center;padding:8px 4px}.player-bar span{font-size:28px}.player-bar div{display:grid}.player-bar small{color:var(--muted)}
.chessboard{width:min(100%,680px);aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border:5px solid #4b362b;border-radius:8px;overflow:hidden;user-select:none}
.square{border:0;padding:0;display:grid;place-items:center;font-size:clamp(26px,6vw,58px);position:relative;line-height:1}.square.light{background:var(--light)}.square.dark{background:var(--dark)}.square.selected{box-shadow:inset 0 0 0 5px var(--select)}.square.legal:after{content:"";width:24%;height:24%;border-radius:50%;background:rgba(34,197,94,.65);position:absolute}.square.capture:after{content:"";position:absolute;inset:7%;border-radius:50%;border:5px solid rgba(239,68,68,.72)}.square.last{box-shadow:inset 0 0 0 4px rgba(250,204,21,.42)}
.piece.white-piece{color:#fff;text-shadow:0 1px 2px #000,0 0 1px #000}.piece.black-piece{color:#101010;text-shadow:0 1px 1px rgba(255,255,255,.25)}
.message{color:var(--muted)}.message.good{border-color:var(--accent);color:#bbf7d0}.message.bad{border-color:var(--danger);color:#fecaca}
.history{margin:0;padding-left:28px;display:grid;gap:6px;max-height:480px;overflow:auto}.history li{font-size:12px;color:#dce7f4;padding:6px 8px;background:var(--panel2);border-radius:7px}.captured{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}.captured div{margin-top:8px;color:var(--muted);font-size:12px}.captured strong{margin-left:6px;font-size:18px}
.learning-layout.wide{grid-column:1/-1;display:grid;grid-template-columns:280px minmax(0,1fr) 280px;gap:18px}.challenge-buttons{display:grid;gap:8px}.challenge-buttons button{border:1px solid var(--border);background:var(--panel2);color:var(--text);padding:11px;border-radius:9px;text-align:left}.challenge-buttons button.active{border-color:var(--gold);color:#fde68a}.challenge-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.challenge-head span{color:var(--muted);font-size:11px}.challenge-head h2{margin:4px 0 12px}.challenge-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.concept{margin-top:16px;padding:12px;background:var(--panel2);border-radius:10px}.concept span{display:block;color:var(--muted);font-size:10px}.concept strong{display:block;margin-top:5px;font-size:12px}
.learning-layout.lessons{grid-column:1/-1;display:grid;gap:18px}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.lesson-grid article,.lesson-list article{padding:13px;background:var(--panel2);border:1px solid var(--border);border-radius:11px}.lesson-grid b{font-size:20px}.lesson-grid p,.lesson-list p{color:var(--muted);font-size:13px;line-height:1.45}.lesson-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz p{font-size:17px}.quiz #quizOptions{display:grid;gap:8px}.quiz #quizOptions button{border:1px solid var(--border);background:var(--panel2);color:var(--text);padding:10px;border-radius:9px;text-align:left}.quiz-feedback{min-height:30px;color:var(--muted);padding:8px 0}
footer{text-align:center;color:var(--muted);padding:20px;font-size:12px}
@media(max-width:1100px){.app-shell{grid-template-columns:240px 1fr}.history-panel{grid-column:1/-1}.learning-layout.wide{grid-template-columns:1fr 1fr}.challenge-info{grid-column:1/-1}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.learning-layout.wide{grid-template-columns:1fr}.lesson-grid,.lesson-list{grid-template-columns:1fr}.square{font-size:clamp(25px,10vw,46px)}}
@media(max-width:480px){.app-shell,.topbar,.mode-nav{padding-left:10px;padding-right:10px}.panel{padding:12px}.mode-nav a{flex:1;text-align:center}}