:root{--ink:#071826;--ink-2:#10283a;--cream:#fff7e3;--ivory:#f4e8cf;--coral:#ff6b59;--cyan:#69d9d0;--gold:#ffc857;--panel:rgba(9,31,47,.88);--line:rgba(255,255,255,.12);--shadow:#020c13}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--ink);color:var(--cream);font-family:"DM Sans",sans-serif}body{overflow-x:hidden;background:radial-gradient(circle at 45% 30%,#174661 0,#0b2639 30%,#06131f 72%)}button{font:inherit}.app-shell{min-height:100vh;padding:0 3vw 28px}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand{color:var(--cream);text-decoration:none;font-family:"Unbounded",sans-serif;font-weight:800;letter-spacing:.14em;display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--coral);color:var(--ink);font-size:22px;box-shadow:0 0 25px #ff6b5966}.mode-switch{display:flex;padding:4px;background:#05121c;border:1px solid var(--line);border-radius:99px}.mode{border:0;background:transparent;color:#91a3af;border-radius:99px;padding:9px 18px;font-size:11px;font-weight:700;letter-spacing:.09em;cursor:pointer}.mode.active{background:var(--cream);color:var(--ink);box-shadow:0 4px 16px #0008}.icon-button,.tool-button{border:1px solid var(--line);color:var(--cream);background:#ffffff08;cursor:pointer}.icon-button{border-radius:50%;width:38px;height:38px}.game-layout{display:grid;grid-template-columns:250px minmax(460px,1fr) 250px;gap:32px;max-width:1440px;margin:0 auto;min-height:calc(100vh - 110px)}.panel{padding-top:62px}.eyebrow{font-size:10px;letter-spacing:.2em;color:var(--cyan);font-weight:800}.left-panel h1{font:800 clamp(34px,4vw,60px)/.98 "Unbounded",sans-serif;letter-spacing:-.06em;margin:16px 0}.left-panel h1 span{color:transparent;-webkit-text-stroke:1px #8ca2af}.intro{color:#9bafba;line-height:1.5;margin:0 0 34px}.player-card{display:flex;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}.player-card:last-of-type{border-bottom:1px solid var(--line)}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--ivory);color:var(--ink);font-weight:800}.bot-avatar{background:var(--coral);font-size:18px}.player-card div:nth-child(2){display:flex;flex-direction:column;gap:2px}.player-card small{font-size:9px;color:#8296a2;letter-spacing:.12em}.player-card strong{font-size:13px}.color-dot{width:9px;height:9px;border-radius:50%;margin-left:auto}.black-dot{background:#061019;border:1px solid #547080}.white-dot{background:var(--cream)}.primary-button{width:100%;margin-top:22px;border:0;border-radius:5px;background:var(--coral);color:#071826;padding:14px;font-size:11px;letter-spacing:.12em;font-weight:800;cursor:pointer;box-shadow:0 7px 0 #a93632,0 12px 24px #0007;transition:.15s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 9px 0 #a93632,0 15px 28px #0008}.primary-button:active{transform:translateY(5px);box-shadow:0 2px 0 #a93632}.board-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;perspective:1100px}.stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#69d9d0 0 1px,transparent 1.5px);background-position:18% 21%,78% 68%;background-size:121px 137px,173px 151px;opacity:.27;mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 80%,transparent)}.status-pill{position:relative;z-index:3;display:flex;align-items:center;gap:9px;background:#071620cc;border:1px solid var(--line);border-radius:30px;padding:8px 14px;font-size:11px;font-weight:700;letter-spacing:.04em;margin-bottom:8px;box-shadow:0 6px 20px #0006}.pulse{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.scene{width:min(64vh,680px);height:min(64vh,680px);display:grid;place-items:center;transform-style:preserve-3d}.board-wrap{width:84%;aspect-ratio:1;position:relative;transform-style:preserve-3d;transform:rotateX(48deg) rotateZ(-2deg);transition:transform .7s cubic-bezier(.2,.8,.2,1)}.board-wrap.flipped{transform:rotateX(48deg) rotateZ(178deg)}.board-wrap::before{content:"";position:absolute;inset:-16px;background:#142e3e;border:4px solid #27495b;border-radius:8px;transform:translateZ(-14px);box-shadow:0 24px 0 #06131e,0 52px 50px #000c}.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border:2px solid #91d8cc;box-shadow:0 0 0 5px #0b1d2a,0 0 35px #69d9d044;transform-style:preserve-3d}.square{border:0;padding:0;position:relative;display:grid;place-items:center;cursor:pointer;background:#d9d5bb}.square.dark{background:#31586a}.square::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 12px #0001}.square.selected{box-shadow:inset 0 0 0 4px var(--gold);z-index:2}.square.move::before,.square.capture::before{content:"";position:absolute;width:18%;aspect-ratio:1;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);z-index:5}.square.capture::before{width:68%;background:transparent;border:4px solid var(--coral);box-shadow:inset 0 0 14px #ff6b5977,0 0 14px #ff6b5966}.square.last{box-shadow:inset 0 0 0 4px #69d9d066}.piece{font-family:Georgia,serif;font-size:clamp(31px,4.5vw,57px);line-height:1;position:relative;z-index:4;transform:translateZ(22px) rotateX(-42deg);filter:drop-shadow(0 12px 5px #00101aaa);transition:.18s;user-select:none}.flipped .piece{transform:translateZ(22px) rotateX(-42deg) rotateZ(180deg)}.piece.white{color:#fff8df;text-shadow:0 1px 0 #fff,0 3px 0 #b7a989}.piece.black{color:#071823;text-shadow:0 2px 0 #54707d,0 4px 0 #020a10}.square:hover .piece{transform:translateZ(30px) rotateX(-42deg) scale(1.05)}.flipped .square:hover .piece{transform:translateZ(30px) rotateX(-42deg) rotateZ(180deg) scale(1.05)}.board-tools{position:relative;z-index:2;display:flex;width:min(540px,100%);align-items:center;justify-content:space-between;margin-top:3px}.tool-button{border-radius:4px;padding:9px 13px;font-size:9px;letter-spacing:.1em;font-weight:700}.legend{display:flex;gap:13px;color:#8298a3;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.legend span{display:flex;align-items:center;gap:5px}.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%}.move-dot{background:var(--cyan)}.capture-dot{background:var(--coral)}.right-panel{border-left:1px solid var(--line);padding-left:28px}.panel-head{display:flex;justify-content:space-between;align-items:end;padding-bottom:18px;border-bottom:1px solid var(--line)}.panel-head h2{font:600 20px "Unbounded",sans-serif;margin:8px 0 0}.panel-head>span{font:800 38px "Unbounded";color:#26485a}.moves{height:355px;overflow:auto;padding:16px 0}.empty-log{text-align:center;color:#667f8d;padding:50px 15px}.empty-log span{font-size:42px;opacity:.35}.empty-log p{font-size:12px;line-height:1.5}.move-row{display:grid;grid-template-columns:25px 1fr 1fr;gap:5px;padding:8px 4px;border-bottom:1px solid #ffffff08;font:600 12px "DM Sans"}.move-row .n{color:#58707e}.move-chip{padding:6px 8px;border-radius:3px;background:#ffffff08}.tip{display:flex;gap:12px;border:1px solid #284b5c;background:#0e2a3a;padding:14px}.tip>span{color:var(--gold)}.tip strong{font-size:11px;color:var(--cyan)}.tip p{font-size:11px;line-height:1.4;color:#8fa6b2;margin:5px 0 0}dialog{border:1px solid #527383;background:#0d293a;color:var(--cream);border-radius:10px;text-align:center;padding:30px;width:min(390px,90vw);box-shadow:0 30px 90px #000}dialog::backdrop{background:#020b12cc;backdrop-filter:blur(5px)}dialog .dialog-icon{font-size:56px;color:var(--gold)}dialog h2{font:700 25px "Unbounded"}dialog p{color:#a9bdc7}dialog .primary-button{width:auto;padding-inline:28px}
@media(max-width:1050px){.game-layout{grid-template-columns:190px minmax(420px,1fr)}.right-panel{display:none}.left-panel h1{font-size:38px}.scene{width:min(62vw,620px);height:min(62vw,620px)}}
@media(max-width:730px){.app-shell{padding:0 14px 20px}.topbar{height:65px}.brand span:last-child{display:none}.mode{padding:8px 10px;font-size:9px}.game-layout{display:flex;flex-direction:column;gap:0}.left-panel{padding-top:18px;display:grid;grid-template-columns:1fr auto;align-items:center}.left-panel .eyebrow,.left-panel .intro,.player-card{display:none}.left-panel h1{font-size:25px;margin:0}.primary-button{width:auto;margin:0;padding:11px 14px}.board-zone{min-height:calc(100vh - 150px);justify-content:flex-start;padding-top:12px}.scene{width:96vw;height:96vw;max-width:610px;max-height:610px}.board-wrap{width:89%}.board-tools{padding:0 10px}.legend{display:none}.piece{font-size:clamp(28px,9vw,51px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Piezas verticales talladas: cada figura tiene volumen propio y se mantiene erguida. */
.piece{width:86%;height:188%;font-size:inherit;display:block;position:absolute;left:7%;bottom:8%;transform:translateZ(42px) rotateX(-48deg);transform-origin:50% 94%;filter:drop-shadow(0 13px 6px #00101aaa);transition:transform .18s;pointer-events:none;color:inherit;text-shadow:none;z-index:8}
.flipped .piece{transform:translateZ(34px) rotateX(-48deg) rotateZ(180deg)}
.square:hover .piece{transform:translateZ(42px) rotateX(-48deg) scale(1.06)}
.flipped .square:hover .piece{transform:translateZ(42px) rotateX(-48deg) rotateZ(180deg) scale(1.06)}
.piece i{position:absolute;display:block;left:50%;transform:translateX(-50%);font-style:normal}
.piece.white{--p1:#fff9e9;--p2:#dfcdb0;--p3:#a99375;--shine:#fff}.piece.black{--p1:#5b4a43;--p2:#261f1d;--p3:#0d0b0b;--shine:#9b8278}
.piece-shadow{width:90%;height:8%;bottom:-2%;border-radius:50%;background:#0009;filter:blur(4px)}
.piece-base{width:90%;height:10%;bottom:0;border-radius:50%;background:radial-gradient(ellipse at 38% 18%,var(--shine),var(--p1) 22%,var(--p2) 55%,var(--p3) 88%);border-bottom:3px solid var(--p3);box-shadow:inset 0 4px 3px #fff4,0 4px 5px #0008}
.piece-foot{width:69%;height:13%;bottom:7%;border-radius:48% 48% 30% 30%;background:linear-gradient(90deg,var(--p3),var(--p1) 38%,var(--p2) 72%,var(--p3));box-shadow:inset 0 3px 2px #fff4}
.piece-body{width:39%;height:47%;bottom:17%;clip-path:polygon(34% 0,66% 0,100% 100%,0 100%);border-radius:35% 35% 12% 12%;background:linear-gradient(90deg,var(--p3),var(--p1) 38%,var(--p2) 72%,var(--p3));box-shadow:inset 4px 0 5px #fff3}
.piece-collar{width:55%;height:8%;bottom:58%;border-radius:50%;background:radial-gradient(ellipse at 40% 25%,var(--shine),var(--p1) 30%,var(--p2) 62%,var(--p3));border-bottom:2px solid var(--p3)}
.piece-head{bottom:64%;width:43%;aspect-ratio:1;display:grid!important;place-items:center;border-radius:50%;font:700 clamp(10px,1.35vw,18px)/1 Georgia;color:var(--p3);background:radial-gradient(circle at 35% 25%,var(--shine),var(--p1) 28%,var(--p2) 68%,var(--p3));box-shadow:inset -3px -3px 4px #0003,0 3px 3px #0005}
.piece.black .piece-head{color:var(--shine)}
.type-p{height:145%;bottom:8%}.type-p .piece-body{height:34%;bottom:17%}.type-p .piece-collar{bottom:45%;width:50%}.type-p .piece-head{bottom:51%;width:47%}
.type-r .piece-body{height:41%}.type-r .piece-head{border-radius:8% 8% 36% 36%;height:29%;width:55%;bottom:62%;clip-path:polygon(0 0,20% 0,20% 23%,40% 23%,40% 0,60% 0,60% 23%,80% 23%,80% 0,100% 0,88% 100%,12% 100%)}
.type-n .piece-body{height:39%;transform:translateX(-50%) skew(-5deg)}.type-n .piece-head{width:55%;height:40%;bottom:60%;border-radius:70% 25% 45% 35%;transform:translateX(-43%) rotate(-12deg);font-size:clamp(15px,2vw,27px)}
.type-b .piece-head{border-radius:50% 50% 45% 45%;width:45%;bottom:64%}.type-b .piece-head::after{content:"";position:absolute;width:4px;height:64%;background:var(--p3);transform:rotate(36deg);border-radius:4px}
.type-q .piece-head{width:54%;border-radius:15% 15% 45% 45%;clip-path:polygon(0 0,22% 34%,36% 0,50% 35%,65% 0,79% 34%,100% 0,86% 100%,14% 100%)}
.type-k .piece-head{background:transparent;box-shadow:none;color:var(--p1);font-size:clamp(24px,3vw,42px);text-shadow:1px 1px 0 var(--p3),0 3px 3px #0005;bottom:65%}
@media(max-width:730px){.piece{height:175%;width:88%;left:6%}.type-p{height:140%}.piece-head{font-size:clamp(9px,2.5vw,16px)}}

/* El tablero WebGL reemplaza la maqueta plana cuando está disponible. */
.board-wrap.three-ready{width:100%;height:100%;transform:none!important;transition:none}
.board-wrap.three-ready::before{display:none}
.board-wrap.three-ready .board{display:none}
.three-board{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 30px 28px #000a);cursor:pointer;touch-action:none}
.online-dialog{position:relative}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#9db0ba;font-size:25px;cursor:pointer}.room-code{font:800 34px "Unbounded";letter-spacing:.2em;color:var(--cyan);margin:20px 0 6px;text-shadow:0 0 18px #69d9d077}.join-row{display:flex;gap:8px;margin-top:20px}.join-row input{min-width:0;flex:1;background:#061722;border:1px solid #476577;color:var(--cream);border-radius:5px;padding:13px;text-align:center;font:700 18px "Unbounded";letter-spacing:.16em;text-transform:uppercase}.join-row button{border:0;border-radius:5px;background:var(--cyan);color:var(--ink);font-weight:800;padding:0 18px;cursor:pointer}.online-message{min-height:20px;font-size:12px;color:var(--cyan)!important}
.promotion-dialog{width:min(520px,94vw);overflow:hidden;background:radial-gradient(circle at 50% 0,#1b4d61 0,#0d293a 48%,#071722 100%);border-color:#69d9d088}.promotion-orbit{width:42px;height:42px;margin:0 auto 8px;display:grid;place-items:center;border:1px solid var(--cyan);border-radius:50%;color:var(--gold);box-shadow:0 0 24px #69d9d055}.promotion-dialog h2{margin:10px 0}.promotion-dialog p{margin:0 0 22px}.promotion-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.promotion-choices button{border:1px solid #527383;border-radius:8px;background:#061722;color:var(--cream);padding:13px 5px 11px;cursor:pointer;transition:.18s transform,.18s border-color,.18s background}.promotion-choices button:hover,.promotion-choices button:focus-visible{transform:translateY(-5px);border-color:var(--gold);background:#14384a;outline:none;box-shadow:0 10px 22px #0007}.promotion-choices span{display:block;font:42px/1 Georgia;color:var(--ivory);text-shadow:0 3px 0 #9d896c,0 7px 9px #000}.promotion-choices strong{display:block;margin-top:9px;font:700 9px "Unbounded";letter-spacing:.08em;color:var(--cyan)}
@media(max-width:480px){.promotion-dialog{padding:24px 16px}.promotion-choices{grid-template-columns:repeat(2,1fr)}.promotion-choices button{padding:11px 5px}.promotion-choices span{font-size:38px}}
.top-actions{display:flex;align-items:center;gap:8px}.exit-button{height:38px;display:flex;align-items:center;gap:7px;padding:0 13px;border:1px solid #ff6b5988;border-radius:99px;background:#ff6b5912;color:var(--cream);text-decoration:none;font:700 9px "Unbounded";letter-spacing:.09em;transition:.18s}.exit-button span{color:var(--coral);font:700 17px "DM Sans"}.exit-button:hover,.exit-button:focus-visible{background:var(--coral);color:var(--ink);transform:translateY(-2px);outline:none;box-shadow:0 7px 20px #ff6b5944}.exit-button:hover span,.exit-button:focus-visible span{color:var(--ink)}
@media(max-width:730px){.exit-button{width:34px;height:34px;padding:0;justify-content:center}.exit-button strong{display:none}.exit-button span{font-size:16px}.top-actions{gap:5px}.top-actions .icon-button{width:34px;height:34px}}
@media(max-width:430px){.mode{padding:8px 7px;font-size:8px}.brand-mark{width:32px;height:32px}}
.academy-button{width:100%;margin-top:15px;padding:11px 13px;border:1px solid #69d9d077;border-radius:5px;background:#69d9d010;color:var(--cyan);font:700 10px "Unbounded";letter-spacing:.1em;cursor:pointer;transition:.18s}.academy-button:hover,.academy-button:focus-visible{background:#69d9d022;border-color:var(--cyan);transform:translateY(-2px);outline:none}.academy-button span{color:var(--gold)}
.academy-dialog{width:min(880px,94vw);max-width:none;padding:0;overflow:hidden;text-align:left;background:#071722;border-color:#416579}.academy-head{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:24px 28px;background:radial-gradient(circle at 10% 0,#23566a,#0d293a 48%,#081d2a);border-bottom:1px solid #ffffff18}.academy-seal{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--gold);font-size:38px;color:var(--cream);box-shadow:0 0 28px #ffc85733}.academy-head small{font:700 9px "Unbounded";letter-spacing:.2em;color:var(--cyan)}.academy-head h2{margin:5px 0 3px;font-size:25px}.academy-head p{margin:0!important;font-size:13px}.academy-progress{text-align:center;border-left:1px solid #ffffff1a;padding-left:22px}.academy-progress strong{display:block;font:800 25px "Unbounded";color:var(--gold)}.academy-progress span{font-size:8px;letter-spacing:.16em;color:#91a8b5}.academy-body{display:grid;grid-template-columns:230px 1fr;min-height:410px}.lesson-map{padding:18px;background:#06131e;border-right:1px solid #ffffff12}.lesson-tab{width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;padding:11px 8px;border:0;border-bottom:1px solid #ffffff0c;background:transparent;color:#9bb0bb;text-align:left;cursor:pointer}.lesson-tab:hover,.lesson-tab.active{background:#ffffff08;color:var(--cream)}.lesson-tab.active{box-shadow:inset 3px 0 var(--cyan)}.lesson-tab .lesson-number{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#102c3d;color:var(--cyan);font:700 10px "Unbounded"}.lesson-tab.done .lesson-number{background:var(--gold);color:var(--ink)}.lesson-tab strong{display:block;font-size:12px}.lesson-tab small{font-size:9px;color:#688391}.lesson-check{color:var(--gold)}.lesson-stage{padding:28px 32px;position:relative;background:radial-gradient(circle at 100% 100%,#123b4c55,transparent 55%)}.lesson-rank{font:700 9px "Unbounded";letter-spacing:.18em;color:var(--coral)}.lesson-stage h3{margin:8px 0 8px;font:700 25px "Unbounded"}.lesson-copy{font-size:14px;line-height:1.55;color:#a9bdc7;max-width:570px}.lesson-visual{height:94px;display:flex;align-items:center;justify-content:center;gap:17px;margin:20px 0;border:1px solid #ffffff16;border-radius:8px;background:linear-gradient(135deg,#0d293a,#081722);font:52px Georgia;color:var(--ivory);text-shadow:0 5px 0 #806f5b,0 10px 14px #000}.lesson-visual .arrow{font:28px "DM Sans";color:var(--cyan);text-shadow:none}.lesson-question{font-weight:700;color:var(--cream);margin:18px 0 10px}.lesson-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.lesson-answer{min-height:42px;padding:11px;border:1px solid #34566a;border-radius:5px;background:#0b2231;color:#d8e2e7;font-size:12px;cursor:pointer}.lesson-answer:hover,.lesson-answer:focus-visible{border-color:var(--cyan);outline:none}.lesson-answer.correct{background:#193f3b;border-color:var(--cyan);color:#bffbf5}.lesson-answer.wrong{background:#47252a;border-color:var(--coral)}.lesson-feedback{min-height:24px;margin:12px 0 0!important;font-size:12px}.lesson-next{float:right;margin-top:8px;border:0;border-radius:5px;background:var(--coral);color:var(--ink);padding:11px 16px;font:700 9px "Unbounded";letter-spacing:.08em;cursor:pointer}.lesson-next:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:730px){.left-panel .academy-button{display:block;grid-column:1/-1;width:100%;margin:12px 0 0}.academy-dialog{width:95vw;max-height:88vh}.academy-head{grid-template-columns:auto 1fr;padding:18px;gap:12px}.academy-seal{width:46px;height:46px;font-size:28px}.academy-head h2{font-size:19px}.academy-head p{font-size:11px}.academy-progress{grid-column:1/-1;border-left:0;border-top:1px solid #ffffff16;padding:9px 0 0;display:flex;justify-content:center;gap:8px;align-items:center}.academy-progress strong{font-size:17px}.academy-body{display:block}.lesson-map{display:flex;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid #ffffff12}.lesson-tab{min-width:150px}.lesson-stage{padding:20px}.lesson-stage h3{font-size:20px}.lesson-visual{height:76px;font-size:42px;margin:14px 0}.lesson-options{grid-template-columns:1fr}.academy-dialog .dialog-close{z-index:3}}
.academy-body{grid-template-columns:250px 1fr;min-height:430px}.lesson-map{max-height:500px;overflow-y:auto;scrollbar-color:#2b5868 #06131e}.lesson-tab small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:145px}
@media(max-width:730px){.academy-body{display:block;min-height:0}.lesson-map{display:flex;max-height:none;overflow-x:auto;overflow-y:hidden}.lesson-tab small{max-width:95px}.lesson-stage{min-height:420px}}
.academy-dialog{width:min(1100px,96vw)}.lesson-stage{padding:20px}.trainer-layout{display:grid;grid-template-columns:minmax(360px,520px) minmax(220px,1fr);gap:20px;align-items:stretch}.trainer-board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border:5px solid #17384a;border-radius:6px;overflow:hidden;box-shadow:0 18px 35px #0008,0 0 0 1px #69d9d055;transition:.2s}.trainer-square{position:relative;display:grid;place-items:center;border:0;padding:0;cursor:pointer}.trainer-light{background:#e7dfc0}.trainer-dark{background:#4c7481}.trainer-square:hover{filter:brightness(1.1)}.trainer-square.selected{box-shadow:inset 0 0 0 5px var(--gold)}.trainer-square.lesson-focus::after{content:"";position:absolute;width:18%;aspect-ratio:1;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);bottom:8%;right:8%}.trainer-square.lesson-target::before{content:"";position:absolute;width:30%;aspect-ratio:1;border-radius:50%;background:#69d9d0aa;box-shadow:0 0 18px var(--cyan);z-index:1}.trainer-piece{position:relative;z-index:2;font:clamp(28px,4vw,52px)/1 Georgia;filter:drop-shadow(0 6px 2px #0007);user-select:none}.trainer-piece.white{color:#fff9e9;text-shadow:0 2px 0 #9e896d}.trainer-piece.black{color:#14212a;text-shadow:0 2px 0 #758a92}.rank-label,.file-label{position:absolute;font:700 9px "DM Sans";font-style:normal;opacity:.7;color:#17303a}.rank-label{left:4px;top:3px}.file-label{right:4px;bottom:2px}.trainer-dark .rank-label,.trainer-dark .file-label{color:#e7dfc0}.trainer-coach{display:flex;flex-direction:column;padding:18px;border:1px solid #ffffff16;border-radius:8px;background:linear-gradient(160deg,#102e40,#081722);min-width:0}.coach-title{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid #ffffff14}.coach-avatar{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--coral);color:var(--ink);font-size:29px;box-shadow:0 0 20px #ff6b5944}.coach-title small{font:700 8px "Unbounded";letter-spacing:.12em;color:var(--cyan)}.coach-title h3{font-size:17px;margin:4px 0 0}.coach-bubble{position:relative;margin:22px 0 12px;padding:16px;border-radius:8px;background:var(--cream);color:var(--ink);box-shadow:0 8px 20px #0005}.coach-bubble::before{content:"";position:absolute;left:17px;top:-10px;border:10px solid transparent;border-bottom-color:var(--cream);border-top:0}.coach-bubble p{margin:0!important;color:#17303a;font-size:13px;line-height:1.45}.trainer-status{min-height:42px;padding:11px;border:1px solid #31576a;border-radius:5px;color:#aac0ca;font-size:11px}.trainer-status.success{border-color:var(--gold);color:var(--gold);background:#ffc8570d}.trainer-status.mistake{border-color:var(--coral);color:#ff9d91}.trainer-actions{display:flex;gap:7px;margin-top:12px}.trainer-actions button{flex:1;border:1px solid #456879;border-radius:4px;background:#ffffff08;color:#c3d1d7;padding:9px 5px;font-size:9px;font-weight:700;cursor:pointer}.trainer-coach .lesson-next{float:none;width:100%;margin-top:auto;padding:12px}.trainer-shake{animation:trainerShake .38s ease}@keyframes trainerShake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* En las lecciones, las piezas talladas miran al jugador y caben por completo en su casilla. */
.trainer-board .trainer-piece-model{width:68%;height:88%;left:16%;bottom:6%;transform:none!important;transform-origin:50% 100%;filter:drop-shadow(0 5px 2px #00101a88);z-index:3}
.trainer-board .trainer-piece-model.type-p{height:72%;bottom:7%}
.trainer-square:hover .trainer-piece-model{transform:translateY(-3px) scale(1.04)!important}
.trainer-board .trainer-piece-model .piece-head{font-size:clamp(7px,1.1vw,14px)}
.trainer-board .trainer-piece-model.type-n .piece-head{font-size:clamp(11px,1.55vw,20px)}

/* Academia 3D: la mesa de práctica comparte la perspectiva y la madera del juego principal. */
.trainer-layout{perspective:1100px;perspective-origin:38% 42%}
.trainer-board{
  overflow:visible;
  transform-style:preserve-3d;
  transform:rotateX(46deg) rotateZ(-1deg);
  transform-origin:50% 58%;
  border:3px solid #4a210f;
  border-radius:2px;
  box-shadow:0 0 0 13px #783b1b,0 0 0 17px #3b1b0c,0 24px 0 #2a1209,0 54px 42px #000b;
}
.trainer-square{transform-style:preserve-3d;overflow:visible}
.trainer-light{background:linear-gradient(135deg,#ead9b7,#c9aa7f)}
.trainer-dark{background:linear-gradient(135deg,#8a4c29,#5e2e18)}
.trainer-square::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,#fff2 0,transparent 28%,#0001 75%,#0002);z-index:0}
.trainer-board .trainer-piece-model{
  width:82%;
  height:158%;
  left:9%;
  bottom:8%;
  transform:translateZ(42px) rotateX(-44deg)!important;
  transform-origin:50% 94%;
  filter:drop-shadow(0 12px 5px #160800aa);
  z-index:5;
}
.trainer-board .trainer-piece-model.type-p{height:126%;bottom:8%}
.trainer-square:hover .trainer-piece-model{transform:translateZ(48px) rotateX(-44deg) scale(1.05)!important}
.trainer-board .trainer-piece-model .piece-head{font-size:clamp(9px,1.35vw,17px)}
.trainer-board .trainer-piece-model.type-n .piece-head{font-size:clamp(14px,1.8vw,24px)}
.trainer-dark .rank-label,.trainer-dark .file-label{color:#f2dfbd}

@media(max-width:820px){
  .trainer-layout{perspective-origin:50% 32%}
  .trainer-board{transform:rotateX(39deg) rotateZ(-.5deg);margin:8px auto 18px;max-width:470px}
  .trainer-board .trainer-piece-model{transform:translateZ(35px) rotateX(-37deg)!important}
  .trainer-square:hover .trainer-piece-model{transform:translateZ(41px) rotateX(-37deg) scale(1.04)!important}
}
@media(max-width:520px){
  .trainer-board{width:92%;transform:rotateX(33deg);box-shadow:0 0 0 8px #783b1b,0 0 0 11px #3b1b0c,0 15px 0 #2a1209,0 35px 30px #000b}
  .trainer-board .trainer-piece-model{height:145%;transform:translateZ(28px) rotateX(-31deg)!important}
  .trainer-board .trainer-piece-model.type-p{height:118%}
}

/* Las lecciones montan el mismo WebGL del juego; no existe un segundo tablero visual. */
.trainer-real-layout{perspective:none;grid-template-columns:minmax(430px,560px) minmax(230px,1fr);align-items:center}
.trainer-real-board{width:100%;aspect-ratio:1;display:grid;place-items:center;min-width:0;position:relative;border-radius:10px;background:radial-gradient(circle,#163d50 0,transparent 67%)}
.trainer-real-board #boardWrap{width:100%;height:100%;transform:none!important}
.trainer-real-board .three-board{width:100%!important;height:100%!important;display:block}
.star-progress{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:10px 12px;border:1px solid #ffc85777;border-radius:6px;background:linear-gradient(90deg,#ffc85718,#69d9d00d);box-shadow:inset 0 0 22px #ffc8570a}.star-progress strong{color:var(--gold);font:800 16px "Unbounded";text-shadow:0 0 14px #ffc85788;white-space:nowrap}.star-progress span{color:#b9cbd2;font:700 8px "Unbounded";letter-spacing:.08em;line-height:1.35}
@media(max-width:820px){.trainer-real-layout{grid-template-columns:1fr}.trainer-real-board{width:min(100%,500px);margin:0 auto}.trainer-real-board #boardWrap{width:100%;height:100%}}
@media(max-width:520px){.trainer-real-board{width:100%}.trainer-real-layout{gap:4px}.trainer-real-board #boardWrap{width:100%;height:100%}}
@media(max-width:820px){.academy-dialog{width:96vw;max-height:94vh}.trainer-layout{grid-template-columns:1fr}.trainer-board{max-width:500px;margin:0 auto}.trainer-coach{min-height:280px}.lesson-stage{overflow-y:auto;max-height:70vh}}
@media(max-width:520px){.lesson-stage{padding:10px}.trainer-layout{gap:10px}.trainer-board{max-width:350px}.trainer-piece{font-size:clamp(25px,9vw,40px)}.trainer-coach{padding:13px;min-height:250px}.coach-bubble{margin:15px 0 9px;padding:12px}.coach-title{padding-bottom:9px}.coach-avatar{width:39px;height:39px;font-size:24px}}
.bot-level-picker{margin:10px 0 4px;padding:10px;border:1px solid #ffffff14;border-radius:7px;background:#05131eaa}.bot-level-picker>span{display:block;margin-bottom:7px;color:#718b98;font:700 8px "Unbounded";letter-spacing:.14em}.bot-level-picker>div{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.bot-level-picker button{height:28px;border:1px solid #2e5264;border-radius:4px;background:#0a2230;color:#8ba3af;font:700 10px "Unbounded";cursor:pointer}.bot-level-picker button:hover{border-color:var(--cyan)}.bot-level-picker button.active{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 0 15px #ffc85733}.bot-level-picker>strong{display:block;margin-top:7px;color:var(--cyan);font:700 8px "Unbounded";letter-spacing:.08em;text-align:center}
@media(max-width:730px){.bot-level-picker{grid-column:1/-1;width:100%;margin:10px 0}.bot-level-picker>span{display:none}.bot-level-picker>div{max-width:300px;margin:auto}}
.square.orbit-move::before{width:38%;background:#ffd43d;clip-path:polygon(50% 0,61% 36%,100% 50%,61% 63%,50% 100%,38% 63%,0 50%,38% 36%);border:0;box-shadow:0 0 20px #ffd000,0 0 40px #ffc400aa;animation:orbitStarSpin 1.8s linear infinite}@keyframes orbitStarSpin{to{transform:rotate(360deg)}}
.status-pill.en-passant-flare{color:#071826;background:#ffd54a;border-color:#fff6ba;box-shadow:0 0 0 6px #ffc40035,0 0 48px #ffd000dd;animation:enPassantPulse .55s ease-in-out 3}.status-pill.en-passant-flare .pulse{background:#ff6b59;box-shadow:0 0 12px #ff6b59}.en-passant-gold .scene{filter:drop-shadow(0 0 28px #ffd000) saturate(1.35)}.en-passant-gold .board-zone::after{content:"EN PASSANT";position:absolute;z-index:8;top:18%;font:800 clamp(22px,4vw,52px) "Unbounded";letter-spacing:.08em;color:#fff4a8;text-shadow:0 0 8px #fff,0 0 22px #ffd000,0 5px 0 #9a5b00;pointer-events:none;animation:goldWord 2.1s ease both}@keyframes enPassantPulse{50%{transform:scale(1.07)}}@keyframes goldWord{0%{opacity:0;transform:scale(.45) rotate(-5deg)}25%,75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.status-pill.en-passant-flare,.en-passant-gold .board-zone::after{animation:none}}
.mode.orbit-mode{color:#ffd65a}.mode.orbit-mode.active{background:linear-gradient(135deg,#fff1a6,#ffc62f);color:#301c00;box-shadow:0 0 24px #ffc92877}.orbit-rules-dialog{position:relative;width:min(720px,94vw);background:radial-gradient(circle at 50% -10%,#6b4a0d,#132938 44%,#071722 78%);border-color:#ffd65a99;text-align:left}.orbit-rule-title{display:flex;align-items:center;gap:14px}.orbit-rule-title>span{width:58px;height:58px;display:grid;place-items:center;border:2px solid #ffe17a;border-radius:50%;color:#ffe17a;font-size:30px;box-shadow:0 0 30px #ffd00066}.orbit-rule-title small{color:#ffd65a;font:700 9px "Unbounded";letter-spacing:.16em}.orbit-rule-title h2{margin:5px 0}.orbit-power-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:20px}.orbit-power-grid>div{padding:13px;border:1px solid #ffd65a45;border-radius:7px;background:#ffc9280b}.orbit-power-grid b{display:block;color:#ffe17a;font:700 10px "Unbounded";letter-spacing:.06em}.orbit-power-grid span{display:block;margin-top:6px;color:#a9bdc7;font-size:12px}.orbit-power-pill{color:#201400!important;background:#ffd54a!important;border-color:#fff2a1!important;box-shadow:0 0 40px #ffd000cc!important}.orbit-power-flash .scene{filter:drop-shadow(0 0 35px #ffd000) brightness(1.18)}.orbit-power-flash .board-zone::after{content:"✦ PODER ÓRBITA ✦";position:absolute;z-index:9;top:17%;color:#fff3a0;font:800 clamp(20px,3.4vw,45px) "Unbounded";text-shadow:0 0 12px #fff,0 0 35px #ffc400;animation:goldWord 1.5s ease both;pointer-events:none}@media(max-width:560px){.orbit-power-grid{grid-template-columns:1fr}.orbit-rules-dialog{max-height:90vh;overflow:auto}}

/* Phone controls: the original desktop masthead was wider than compact
   portrait screens. On phones, the logo remains decorative while game modes
   and sound get the full control row. */
@media (hover:none) and (pointer:coarse) and (max-width:430px){
  .app-shell{padding-inline:6px}
  .topbar{height:auto;min-height:104px;gap:6px;align-items:stretch;padding-block:6px}
  .brand,.exit-button{display:none}
  .mode-switch{flex:1;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:24px}
  .mode{min-width:0;min-height:44px;padding:7px 5px;font-size:9px;white-space:nowrap}
  .top-actions{flex:0 0 auto;align-items:flex-start}
  .top-actions .icon-button{width:44px;height:44px;min-width:44px}
  .board-zone{min-height:calc(100vh - 188px)}
}
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:520px){
  .app-shell{padding:0 10px 8px}
  .topbar{height:58px;gap:8px}
  .brand-mark,.exit-button,.top-actions .icon-button{width:44px;height:44px;min-width:44px;min-height:44px}
  .mode{min-height:44px;padding:8px 9px}
  .game-layout{grid-template-columns:172px minmax(0,1fr);gap:10px;min-height:calc(100dvh - 62px)}
  .left-panel{padding-top:10px}
  .left-panel h1{font-size:25px;margin:6px 0}
  .left-panel .intro,.player-card{display:none}
  .bot-level-picker{margin:7px 0}
  .primary-button{margin-top:7px;min-height:44px}
  .board-zone{min-height:calc(100dvh - 66px);justify-content:flex-start;padding-top:3px}
  .scene{width:min(calc(100dvh - 120px),58vw);height:min(calc(100dvh - 120px),58vw)}
  .status-pill{margin-bottom:1px;padding-block:5px}
  .board-tools{margin-top:0}
}