:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eef4ef;background:#0b120f;color-scheme:dark;--panel:#132019;--panel2:#18291f;--line:#2d4135;--gold:#e7b85c;--green:#5f8f6d;--light:#e7dcc5;--dark:#6e8b72}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% -10%,#284636 0,#101b15 34%,#080d0b 80%);background-attachment:fixed}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:12px;padding:.78rem 1rem;background:#26372d;color:#f5f8f5;font-weight:750;transition:.18s transform,.18s filter,.18s background}button:hover{filter:brightness(1.1);transform:translateY(-1px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}.primary,.accent{background:linear-gradient(135deg,#618d69,#3f7050);box-shadow:0 8px 24px rgba(62,112,79,.22)}.ghost{background:transparent;border:1px solid #425849}.danger{background:#76373e}.hidden{display:none!important}
.shell{max-width:1280px;margin:auto;padding:26px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:54px;height:54px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#e8c06c,#a7772e);color:#162016;font-size:35px;box-shadow:0 10px 30px rgba(0,0,0,.25)}.topbar h1{margin:0;font-size:clamp(1.7rem,4vw,2.55rem)}.topbar p{margin:.2rem 0 0;color:#9fb2a6}.card{background:linear-gradient(145deg,rgba(24,41,31,.96),rgba(16,29,22,.96));border:1px solid var(--line);border-radius:20px;box-shadow:0 22px 60px rgba(0,0,0,.22)}
.hero{min-height:210px;padding:30px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative;margin-bottom:22px}.hero h2{font-size:clamp(2rem,4vw,3.5rem);max-width:760px;margin:.4rem 0 .7rem;line-height:1.02}.hero p{color:#afbeb5;max-width:700px;font-size:1.04rem;line-height:1.6}.hero-piece{font-size:clamp(8rem,17vw,14rem);line-height:.7;color:rgba(231,184,92,.14);transform:rotate(-8deg);margin-right:4vw}.eyebrow{font-size:.72rem;letter-spacing:.15em;font-weight:900;color:var(--gold)}
.lobby-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}.setup-card,.join-box{padding:26px}.setup-card h2,.join-box h2,.academy h2{margin-top:0}label{display:grid;gap:8px;margin:14px 0;color:#d6e0d9;font-weight:650}input,select{width:100%;padding:.85rem .95rem;border-radius:11px;border:1px solid #3a5041;background:#0e1812;color:#f7faf8}.mode-buttons,.ai-options,.actions{display:flex;gap:10px;flex-wrap:wrap}.mode-buttons.three button{flex:1;min-width:170px}.ai-options label{flex:1;min-width:180px}.tutorial-options{padding:15px;border-radius:14px;background:#0f1a14;border:1px solid #314638;margin-top:15px}.tutorial-options p{margin-top:0;color:#b7c4bb}.large{width:100%;margin-top:16px;padding:1rem}
.academy{margin-top:22px;padding:26px}.academy-head{display:flex;justify-content:space-between;gap:20px;align-items:center}.academy-head p{color:#aebdb3}.progress-badge{font-weight:900;background:#213328;border:1px solid #425947;padding:.8rem 1rem;border-radius:999px;color:#f0ca79}.lesson-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.lesson-card{padding:17px;border-radius:16px;background:#101c15;border:1px solid #2a4032;display:flex;flex-direction:column;min-height:205px;transition:.2s}.lesson-card:hover{transform:translateY(-3px);border-color:#6a8e72}.lesson-card.completed{box-shadow:inset 0 0 0 2px #5b9668}.lesson-card.completed:after{content:"✓ Compris";color:#81c68e;font-weight:900;margin-top:10px}.lesson-card h3{margin:.6rem 0}.lesson-card p{color:#9fb0a5;line-height:1.45;flex:1}.lesson-level{color:#e7b85c;font-size:.78rem;font-weight:850}.lesson-card button{width:100%}
.game-layout{display:grid;grid-template-columns:minmax(360px,760px) minmax(300px,1fr);gap:24px;align-items:start}.board-column{width:100%}.board-wrap{display:flex;gap:10px}.board{width:min(100%,740px);aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border:12px solid #27362d;border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.42),inset 0 0 0 1px #55675b}.square{display:grid;place-items:center;position:relative;user-select:none;line-height:1;padding:0;border-radius:0;overflow:hidden}.square:hover{filter:brightness(1.06);transform:none}.square.light{background:linear-gradient(145deg,#eadfc9,#d9ceb8)}.square.dark{background:linear-gradient(145deg,#77927a,#667f6a)}.square.selected{box-shadow:inset 0 0 0 5px #f3c55f}.square.legal::after{content:"";width:22%;height:22%;border-radius:50%;background:rgba(18,28,22,.36);position:absolute}.square.last{box-shadow:inset 0 0 0 999px rgba(243,197,95,.27)}.square::before{content:attr(data-rank);position:absolute;left:4px;top:3px;font-size:10px;color:rgba(20,30,23,.65);font-weight:900}.square::after{content:attr(data-file);position:absolute;right:4px;bottom:3px;font-size:10px;color:rgba(20,30,23,.65);font-weight:900}.square.legal::after{content:""}.piece{font-family:"DejaVu Sans","Segoe UI Symbol","Noto Sans Symbols 2",serif;font-size:clamp(33px,6.4vw,72px);transform:translateY(-2%);filter:drop-shadow(0 3px 1px rgba(0,0,0,.35));z-index:1}.piece-white{color:#fffdf7;-webkit-text-stroke:1.1px #28332c}.piece-black{color:#172019;-webkit-text-stroke:.7px #0a0e0b}.player-strip{display:flex;justify-content:space-between;padding:10px 12px;font-weight:850}.player-strip div{display:grid}.player-strip small{color:#83988b;font-size:.72rem}.turn-dot{width:12px;height:12px;border-radius:50%;background:#7cdb8e;opacity:0;box-shadow:0 0 18px #6de17f}.turn-dot.active{opacity:1}
.eval-bar{width:25px;position:relative;background:#f1eee6;border-radius:8px;overflow:hidden;border:2px solid #243127;display:flex;align-items:center;justify-content:center}.eval-bar div{position:absolute;bottom:0;width:100%;height:50%;background:#1a211d;transition:height .3s}.eval-bar span{z-index:2;font-size:.65rem;font-weight:900;color:#d6b765;writing-mode:vertical-rl}.side-stack{display:grid;gap:16px}.side{padding:20px}.status-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.status-row span{font-family:ui-monospace,monospace;color:#9fb0a5}.share{display:flex;margin:14px 0;gap:8px}.share input{min-width:0}.moves{min-height:140px;max-height:290px;overflow:auto;background:#0c1510;border-radius:12px;padding:12px;display:grid;grid-template-columns:42px 1fr 1fr;gap:7px 10px;font-family:ui-monospace,monospace}.move-num{color:#758a7c}.message{min-height:1.4em;color:#f4d178}.opening-box{padding:14px;margin:14px 0;background:linear-gradient(135deg,#342d1b,#1c251d);border:1px solid #685633;border-radius:13px}.opening-box strong{display:block;margin:.4rem 0;color:#ffe09b}.opening-box p{font-size:.9rem;color:#c7c2ae;line-height:1.45;margin:.3rem 0}
.coach-panel{padding:20px;border-color:#5d7047;background:linear-gradient(145deg,#1b2c20,#151f17)}.coach-title{display:flex;align-items:center;gap:12px}.coach-title h3{margin:.1rem 0}.coach-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#e5b85f;color:#1a241c;font-size:30px}.coach-class{display:inline-block;margin:15px 0 7px;padding:.35rem .65rem;border-radius:999px;background:#314a37;color:#bfe3c6;font-weight:900;font-size:.82rem}.coach-panel p{color:#c1cec4;line-height:1.55}.tags{display:flex;gap:7px;flex-wrap:wrap}.tags span{padding:.3rem .55rem;border-radius:999px;background:#25362a;color:#e8c980;font-size:.75rem;font-weight:850}.lesson-objective{border-top:1px solid #344838;margin-top:16px;padding-top:16px}.lesson-objective strong{color:#f1cd7b}.hint{padding:10px;border-left:3px solid #e5b85f;background:#201e14}.lesson-objective button{margin-top:8px;width:100%}
@media(max-width:1080px){.lesson-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:860px){.shell{padding:14px}.lobby-grid,.game-layout{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr}.hero-piece{display:none}.board{border-width:7px}.lesson-grid{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start}.eval-bar{width:20px}}@media(max-width:560px){.lesson-grid{grid-template-columns:1fr}.hero,.academy,.setup-card,.join-box{padding:18px}.hero h2{font-size:2rem}.piece{font-size:clamp(30px,11vw,56px)}.mode-buttons.three button{min-width:100%}.board-wrap{gap:5px}.eval-bar{width:16px}.game-layout{grid-template-columns:minmax(0,1fr)}}

.opening-meta{display:flex;gap:8px;flex-wrap:wrap;margin:.35rem 0}.opening-meta span{font-size:.72rem;font-weight:900;padding:.22rem .48rem;border-radius:999px;background:#2b392c;color:#edc978}.opening-box details{margin-top:.65rem;color:#aebaa9}.opening-box summary{cursor:pointer;font-weight:750}.opening-box code{display:block;white-space:normal;margin-top:.4rem;color:#d8ddce;line-height:1.45}.coach-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}.coach-actions button{padding:.62rem .4rem;font-size:.82rem}.coach-extra{padding:11px 12px;border-left:3px solid #e5b85f;background:#201e14;border-radius:7px}.square.suggested-from{box-shadow:inset 0 0 0 6px rgba(80,160,230,.9)!important}.square.suggested-to{box-shadow:inset 0 0 0 7px rgba(240,184,70,.95)!important}.square.suggested-to::before{content:"➜";position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(20px,4vw,46px);color:rgba(58,35,3,.65);z-index:2}.academy{max-height:920px;overflow:auto}.lesson-card h3{font-size:1rem}.lesson-card p{font-size:.9rem}@media(max-width:560px){.coach-actions{grid-template-columns:1fr}.academy{max-height:none}}

.knowledge{margin-top:22px;padding:26px}.knowledge-grid{display:grid;gap:12px;margin-top:14px}.knowledge details{background:#0f1913;border:1px solid #2b4032;border-radius:14px;padding:12px 14px}.knowledge summary{cursor:pointer;font-weight:900;color:#e7c278}.knowledge-items{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.knowledge-items article{background:#15231a;border:1px solid #263a2c;border-radius:12px;padding:12px}.knowledge-items strong{color:#e8edf0}.knowledge-items p{font-size:.84rem;line-height:1.45;color:#aebbb2;margin:.45rem 0 0}@media(max-width:900px){.knowledge-items{grid-template-columns:1fr 1fr}}@media(max-width:560px){.knowledge-items{grid-template-columns:1fr}.knowledge{padding:18px}}

/* v4 Interactive Academy */
.community{margin-top:22px;padding:26px}.community-grid{display:grid;grid-template-columns:minmax(220px,.65fr) 1.35fr;gap:18px}.online-players{display:grid;gap:8px}.online-player{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#101c15;border:1px solid #2c4033;border-radius:12px}.online-player .who{display:flex;align-items:center;gap:9px}.online-dot{width:9px;height:9px;border-radius:50%;background:#76d688;box-shadow:0 0 12px rgba(118,214,136,.55)}.online-player button{padding:.5rem .7rem;font-size:.8rem}.chat-shell{display:grid;gap:9px}.chat-log{min-height:180px;max-height:250px;overflow:auto;background:#0b1510;border:1px solid #2c4033;border-radius:13px;padding:11px;display:grid;align-content:start;gap:8px}.chat-log.compact{min-height:120px;max-height:180px}.chat-msg{padding:8px 10px;border-radius:10px;background:#16251b;border-left:3px solid #5f8f6d}.chat-msg strong{color:#f0cb7c}.chat-msg small{color:#788c80;margin-left:7px}.chat-compose{display:grid;grid-template-columns:1fr auto;gap:8px}.chat-compose input{margin:0}.privacy-note,.muted{color:#91a397;font-size:.85rem}.comm-panel{padding:18px}.comm-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.comm-head h3{margin:.1rem 0}.presence-pill{font-size:.78rem;padding:.35rem .55rem;border-radius:999px;background:#26372d;color:#a2afa6}.presence-pill.online{color:#a8efb5;background:#1e3b28}.voice-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.voice-status{color:#9fb0a5;font-size:.85rem;margin:.65rem 0 0}.voice-status.live{color:#8ee49f}.assist-options{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0;font-size:.82rem;color:#aebdb3}.assist-options label{display:flex;align-items:center;gap:6px;margin:0}.assist-options input{width:auto}.lesson-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.lesson-narration{margin-top:10px;padding:12px 13px;border-radius:11px;background:#101c15;border:1px solid #425b47;animation:lessonFade .28s ease}.lesson-narration strong{display:block;color:#edc978;margin-bottom:4px}.board-stage{position:relative;width:min(100%,740px);aspect-ratio:1}.board-stage .board{width:100%;height:100%}.board-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;overflow:visible}.teach-arrow{stroke:#f0b84e;stroke-width:16;stroke-linecap:round;opacity:.86;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35));animation:arrowPulse 1.1s ease-in-out infinite alternate}.teach-arrow-head{fill:#f0b84e}.teach-focus{fill:rgba(241,192,91,.24);stroke:#f0c05b;stroke-width:7;animation:focusPulse 1.15s ease-in-out infinite alternate}.square.threatened{box-shadow:inset 0 0 0 5px rgba(211,86,80,.72)}.square.loose::before{content:"!";position:absolute;right:5px;top:5px;left:auto;background:#9e3e3e;color:#fff;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;font-size:11px;z-index:5}.piece-img{width:86%;height:86%;object-fit:contain;z-index:2;pointer-events:none;transition:transform .16s ease,filter .16s ease;animation:pieceSettle .2s ease-out}.square:hover .piece-img{transform:translateY(-3%) scale(1.035)}.square.last .piece-img{animation:lastMovePiece .35s ease-out}.academy-path{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.skill-chip{padding:.45rem .7rem;border-radius:999px;background:#19291f;border:1px solid #304636;font-size:.78rem}.lesson-card{position:relative;overflow:hidden}.lesson-card:hover::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(231,184,92,.35);pointer-events:none}@keyframes pieceSettle{from{transform:scale(.78);opacity:.55}to{transform:scale(1);opacity:1}}@keyframes lastMovePiece{0%{transform:translateY(-8%) scale(.88)}60%{transform:translateY(1%) scale(1.05)}100%{transform:none}}@keyframes arrowPulse{from{opacity:.55}to{opacity:.96}}@keyframes focusPulse{from{opacity:.35}to{opacity:.9}}@keyframes lessonFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:760px){.community-grid{grid-template-columns:1fr}.lesson-actions{grid-template-columns:1fr}.chat-compose{grid-template-columns:1fr}.community{padding:18px}}