:root{
  --bg:#0b1020;
  --panel:rgba(17,24,39,.78);
  --panel-2:rgba(30,41,59,.72);
  --line:rgba(255,255,255,.10);
  --text:#f8fafc;
  --muted:#94a3b8;
  --gold:#f4c15d;
  --gold-2:#d89b32;
  --red:#ef4444;
  --green:#22c55e;
  --blue:#38bdf8;
  --light-square:#d7c19b;
  --dark-square:#6d4e39;
  --light-square-2:#ead8b6;
  --dark-square-2:#805d43;
  --shadow:0 24px 70px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  margin:0; min-height:100vh; color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 20% 10%, rgba(94,234,212,.07), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(244,193,93,.09), transparent 30%),
    linear-gradient(160deg,#08101c 0%,#101827 48%,#090e19 100%);
  overflow-x:hidden;
}
button{font:inherit}
.ambient{position:fixed;pointer-events:none;filter:blur(90px);opacity:.18;border-radius:999px;z-index:-1}
.ambient-a{width:420px;height:420px;background:#e7a93f;left:-120px;top:24%}
.ambient-b{width:460px;height:460px;background:#2563eb;right:-150px;bottom:5%}
.topbar{
  width:min(1500px,calc(100% - 36px)); margin:0 auto; padding:22px 0 8px;
  display:flex;justify-content:space-between;align-items:center;gap:20px
}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}
.brand-mark{
  width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(244,193,93,.35);
  background:linear-gradient(145deg,rgba(244,193,93,.18),rgba(244,193,93,.04));
  border-radius:14px;font-size:26px;color:var(--gold)
}
.brand strong{display:block;font-size:16px;letter-spacing:.01em}
.brand small{display:block;color:var(--muted);margin-top:2px;font-size:12px}
.top-actions{display:flex;gap:8px;align-items:center}
.icon-btn,.new-btn,.secondary-btn,.danger-btn,.history-head button,.skip-btn{
  border:1px solid var(--line);color:var(--text);cursor:pointer;transition:.18s ease
}
.icon-btn{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.04)}
.icon-btn:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
.new-btn{
  height:40px;padding:0 16px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#241b0d;border-color:transparent;font-weight:800
}
.new-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.game-shell{width:min(1500px,calc(100% - 36px));margin:20px auto 0}
.hero{
  border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border-radius:24px;padding:22px 26px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;box-shadow:0 12px 34px rgba(0,0,0,.16)
}
.eyebrow{margin:0 0 7px;font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--gold)}
.hero h1{font-size:clamp(25px,3vw,42px);line-height:1;margin:0 0 8px;letter-spacing:-.035em}
.lead{margin:0;color:#cbd5e1;max-width:760px;font-size:14px}
.hero-badge{
  min-width:250px;display:flex;align-items:center;gap:12px;border:1px solid rgba(244,193,93,.22);
  border-radius:16px;padding:13px 15px;background:rgba(244,193,93,.07)
}
.hero-badge>span{font-size:28px;color:var(--gold)}
.hero-badge strong,.hero-badge small{display:block}
.hero-badge strong{font-size:13px}.hero-badge small{color:var(--muted);font-size:11px;margin-top:2px}
.game-grid{display:grid;grid-template-columns:minmax(210px,270px) minmax(520px,820px) minmax(210px,270px);gap:18px;align-items:start;justify-content:center}
.side-panel{display:flex;flex-direction:column;gap:14px}
.player-card,.status-card,.captured-box,.history-card,.tips-card{
  border:1px solid var(--line);border-radius:18px;background:var(--panel);backdrop-filter:blur(16px);
  box-shadow:0 16px 35px rgba(0,0,0,.12)
}
.player-card{display:grid;grid-template-columns:46px 1fr 12px;align-items:center;gap:11px;padding:14px}
.player-card .avatar{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:27px;background:rgba(255,255,255,.055);border:1px solid var(--line)}
.player-card span,.player-card strong{display:block}.player-card span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.player-card strong{font-size:14px;margin-top:2px}
.turn-dot{width:9px;height:9px;border-radius:50%;background:#475569;box-shadow:0 0 0 0 rgba(34,197,94,0)}
.player-card.active{border-color:rgba(34,197,94,.42);background:linear-gradient(135deg,rgba(34,197,94,.09),rgba(17,24,39,.82))}
.player-card.active .turn-dot{background:var(--green);box-shadow:0 0 0 5px rgba(34,197,94,.12)}
.status-card{padding:17px}.status-label{display:block;color:var(--gold);font-weight:900;letter-spacing:.12em;font-size:9px;margin-bottom:7px}
.status-card strong{display:block;font-size:15px}.status-card small{display:block;margin-top:5px;color:var(--muted);line-height:1.45}
.captured-box{padding:16px}.captured-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.captured-head span{font-weight:800;font-size:13px}.captured-head small{font-size:10px;color:var(--muted)}
.captured-row{padding:10px 0;border-top:1px solid rgba(255,255,255,.07)}.captured-label{display:block;color:var(--muted);font-size:10px;margin-bottom:5px}.captured-pieces{min-height:24px;display:flex;align-items:center;flex-wrap:wrap;gap:2px;font-size:21px}
.board-area{min-width:0}.board-frame{
  position:relative;width:100%;aspect-ratio:1;border-radius:22px;padding:14px;
  background:linear-gradient(145deg,#412d22,#1d1715);border:1px solid rgba(244,193,93,.25);
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.035)
}
.chess-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.square{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;user-select:none;cursor:pointer;transition:filter .12s ease}
.square.light{background:linear-gradient(135deg,var(--light-square-2),var(--light-square))}
.square.dark{background:linear-gradient(135deg,var(--dark-square-2),var(--dark-square))}
.square:hover{filter:brightness(1.08)}
.square.last::before,.square.selected::before{content:"";position:absolute;inset:0;pointer-events:none}
.square.last::before{background:rgba(250,204,21,.24)}
.square.selected::before{box-shadow:inset 0 0 0 4px rgba(56,189,248,.75);background:rgba(56,189,248,.12)}
.square.check::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(239,68,68,.68),rgba(239,68,68,.18) 58%,transparent 72%)}
.square .coord{position:absolute;font-size:8px;font-weight:900;opacity:.55;pointer-events:none}
.square .file{right:4px;bottom:3px}.square .rank{left:4px;top:3px}
.square.light .coord{color:#5a3929}.square.dark .coord{color:#f2ddba}
.piece{
  position:relative;z-index:3;width:78%;height:78%;display:grid;place-items:center;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2",serif;font-size:clamp(34px,5.2vw,68px);line-height:1;
  filter:drop-shadow(0 6px 4px rgba(0,0,0,.3));transition:transform .16s ease,filter .16s ease
}
.square:hover .piece{transform:translateY(-2px) scale(1.025)}
.piece.white{color:#fff7dd;text-shadow:0 2px 0 #9b7e53,0 0 1px #3c2b1b}
.piece.black{color:#25201e;text-shadow:0 1px 0 #9a806c,0 0 1px #000;filter:drop-shadow(0 5px 3px rgba(0,0,0,.35))}
.legal-marker{position:absolute;z-index:5;width:22%;aspect-ratio:1;border-radius:50%;background:rgba(34,197,94,.63);box-shadow:0 0 0 4px rgba(34,197,94,.14);pointer-events:none}
.capture-marker{position:absolute;z-index:5;inset:7%;border:4px solid rgba(239,68,68,.67);border-radius:50%;pointer-events:none}
.board-caption{padding:11px 6px 0;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:10px}.board-caption span{display:flex;gap:6px;align-items:center}.legend-dot{width:8px;height:8px;border-radius:50%}.legal-dot{background:var(--green)}.capture-dot{background:var(--red)}.last-dot{background:#facc15}
.history-card{overflow:hidden}.history-head{display:flex;justify-content:space-between;align-items:center;padding:14px 15px;border-bottom:1px solid rgba(255,255,255,.07)}.history-head span{font-weight:800;font-size:13px}.history-head button{background:transparent;border-radius:9px;padding:6px 8px;color:var(--muted);font-size:10px}.history-head button:hover{color:white;background:rgba(255,255,255,.06)}
.move-history{height:310px;overflow:auto;padding:9px}.empty-history{color:var(--muted);font-size:11px;text-align:center;padding:28px 8px}.history-row{display:grid;grid-template-columns:28px 1fr 1fr;gap:5px;align-items:center;padding:5px;border-radius:8px;font-size:11px}.history-row:nth-child(odd){background:rgba(255,255,255,.025)}.history-row .n{color:#64748b}.history-move{padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.035)}
.tips-card{padding:15px}.tips-card strong{font-size:12px}.tips-card p{color:var(--muted);font-size:10px;line-height:1.5;margin:6px 0 0}
.move-layer{position:absolute;inset:14px;pointer-events:none;z-index:30}.moving-piece{position:absolute;display:grid;place-items:center;font-family:"Segoe UI Symbol",serif;font-size:clamp(34px,5vw,68px);transition:transform .48s cubic-bezier(.2,.75,.2,1);filter:drop-shadow(0 8px 5px rgba(0,0,0,.35));will-change:transform}.moving-piece.white{color:#fff7dd;text-shadow:0 2px 0 #9b7e53}.moving-piece.black{color:#25201e;text-shadow:0 1px 0 #9a806c}
.battle-overlay{position:fixed;inset:0;z-index:100;background:rgba(4,7,14,.9);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.battle-overlay.open{opacity:1;pointer-events:auto}
.battle-stage{width:min(900px,calc(100% - 28px));height:min(580px,78vh);position:relative;overflow:hidden;border-radius:28px;border:1px solid rgba(244,193,93,.3);background:
 radial-gradient(circle at 50% 30%,rgba(244,193,93,.15),transparent 28%),
 linear-gradient(#172033 0 58%,#30251d 58% 100%);box-shadow:0 30px 100px #000}
.battle-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 58%,rgba(0,0,0,.45)),repeating-linear-gradient(90deg,transparent 0 80px,rgba(255,255,255,.018) 80px 81px);pointer-events:none}
.battle-title{position:absolute;z-index:7;left:50%;top:30px;transform:translateX(-50%);text-align:center;width:90%}.battle-title span{display:block;color:var(--gold);font-weight:900;letter-spacing:.18em;font-size:11px}.battle-title strong{display:block;margin-top:8px;font-size:clamp(18px,3vw,28px)}
.fighters{position:absolute;inset:95px 6% 75px;display:grid;grid-template-columns:1fr 100px 1fr;align-items:end;z-index:4}.fighter{text-align:center;position:relative;transition:transform .25s ease,opacity .25s ease;transform-origin:center bottom}.fighter-piece{font-family:"Segoe UI Symbol",serif;font-size:clamp(100px,19vw,190px);line-height:1;position:relative;z-index:2;filter:drop-shadow(0 13px 7px rgba(0,0,0,.42))}.fighter.white .fighter-piece{color:#fff7dd;text-shadow:0 3px 0 #a48250}.fighter.black .fighter-piece{color:#27201e;text-shadow:0 2px 0 #8f735e}.fighter span{display:inline-block;margin-top:8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);padding:7px 12px;border-radius:999px;font-size:11px}.fighter-aura{position:absolute;width:170px;height:170px;border-radius:50%;left:50%;bottom:40px;transform:translateX(-50%);background:radial-gradient(circle,rgba(244,193,93,.22),transparent 68%);filter:blur(4px)}
.fighter.attack{animation:attackLunge .6s ease}.fighter.hit{animation:hitShake .55s ease}.fighter.defeated{animation:defeated .8s forwards ease-in}.fighter.magic .fighter-aura{animation:magicPulse .5s alternate 3;background:radial-gradient(circle,rgba(96,165,250,.55),transparent 68%)}
.battle-flash{width:90px;height:90px;align-self:center;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 8%,#fbbf24 9% 28%,rgba(239,68,68,.6) 29% 46%,transparent 68%);filter:blur(1px);transform:scale(.3)}
.battle-flash.boom{animation:boom .55s ease}
.battle-ground{position:absolute;left:0;right:0;bottom:0;height:42%;background:radial-gradient(ellipse at center,rgba(255,255,255,.06),transparent 55%);pointer-events:none}
.skip-btn{position:absolute;right:18px;top:18px;z-index:20;border-radius:10px;padding:7px 10px;background:rgba(255,255,255,.06);font-size:10px;color:#cbd5e1}.skip-btn:hover{background:rgba(255,255,255,.12);color:#fff}
@keyframes attackLunge{0%{transform:translateX(0) scale(1)}40%{transform:translateX(70px) scale(1.08)}70%{transform:translateX(52px) scale(1.03)}100%{transform:translateX(0) scale(1)}}
.defender.attack{animation-name:attackLungeR}@keyframes attackLungeR{0%{transform:translateX(0)}45%{transform:translateX(-70px) scale(1.08)}100%{transform:translateX(0)}}
@keyframes hitShake{0%,100%{transform:translateX(0)}20%{transform:translateX(16px) rotate(4deg)}40%{transform:translateX(-11px) rotate(-3deg)}60%{transform:translateX(8px)}}
@keyframes defeated{0%{transform:rotate(0);opacity:1}55%{transform:rotate(18deg) translateY(12px);opacity:.85}100%{transform:rotate(45deg) translateY(80px);opacity:0}}
@keyframes boom{0%{opacity:0;transform:scale(.25)}25%{opacity:1}100%{opacity:0;transform:scale(2.3)}}
@keyframes magicPulse{from{transform:translateX(-50%) scale(.8);opacity:.35}to{transform:translateX(-50%) scale(1.25);opacity:1}}
.modal{position:fixed;inset:0;z-index:120;background:rgba(3,6,12,.83);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.2s ease;backdrop-filter:blur(8px)}.modal.open{opacity:1;pointer-events:auto}.modal-card{width:min(520px,calc(100% - 28px));padding:28px;border:1px solid var(--line);background:#111827;border-radius:24px;box-shadow:var(--shadow);text-align:center}.modal-card.compact{max-width:420px}.modal-kicker{color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.15em}.modal-card h2{margin:8px 0 7px;font-size:23px}.modal-card p{color:var(--muted);font-size:12px;margin:0 0 20px}.promotion-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.promotion-choice{border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.04);color:#fff;padding:12px 8px;cursor:pointer}.promotion-choice:hover{border-color:rgba(244,193,93,.5);background:rgba(244,193,93,.08);transform:translateY(-2px)}.promotion-choice .symbol{display:block;font-family:"Segoe UI Symbol",serif;font-size:42px}.promotion-choice small{color:var(--muted)}
.modal-actions{display:flex;justify-content:center;gap:9px}.secondary-btn,.danger-btn{border-radius:11px;padding:9px 13px}.secondary-btn{background:rgba(255,255,255,.05)}.danger-btn{background:#b91c1c;border-color:#dc2626}.danger-btn:hover{background:#dc2626}
footer{width:min(1500px,calc(100% - 36px));margin:30px auto 18px;display:flex;justify-content:space-between;color:#64748b;font-size:9px;border-top:1px solid rgba(255,255,255,.06);padding-top:13px}
@media(max-width:1100px){.game-grid{grid-template-columns:minmax(0,760px) 250px}.panel-left{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr 1.3fr}.board-area{grid-column:1}.panel-right{grid-column:2;grid-row:2}.hero-badge{display:none}}
@media(max-width:820px){.topbar,.game-shell,footer{width:min(100% - 20px,760px)}.hero{padding:17px}.hero .lead{font-size:12px}.game-grid{display:flex;flex-direction:column}.panel-left,.panel-right{width:100%;display:grid;grid-template-columns:1fr 1fr}.captured-box,.history-card{grid-column:1 / -1}.board-area{width:100%;order:1}.panel-left{order:2}.panel-right{order:3}.history-card .move-history{height:170px}.board-frame{padding:8px;border-radius:15px}.move-layer{inset:8px}.fighter-piece{font-size:clamp(85px,25vw,160px)}}
@media(max-width:560px){.brand small{display:none}.brand-mark{width:40px;height:40px}.new-btn{padding:0 11px}.hero{margin-top:4px}.hero h1{font-size:27px}.eyebrow{font-size:9px}.game-shell{margin-top:10px}.panel-left,.panel-right{display:flex}.board-caption{gap:9px;font-size:9px}.square .coord{font-size:7px}.piece{font-size:clamp(31px,10vw,50px)}.fighters{grid-template-columns:1fr 42px 1fr;inset-left:2%;inset-right:2%}.fighter-piece{font-size:26vw}.battle-title{top:24px}.promotion-choices{grid-template-columns:repeat(2,1fr)}footer{display:block;text-align:center}footer span{display:block;margin:4px}}

/* =========================================================
   FASE 2 · PERSONAJES MEDIEVALES SVG ANIMADOS
   ========================================================= */
/* El contenido SVG nunca debe participar en el cálculo del tamaño de las filas/columnas del tablero. */
.board-frame{overflow:hidden}
.chess-board,.square,.piece{contain:layout paint}
.square>.piece{position:absolute;left:4%;top:4%}
.move-layer{overflow:hidden}
.moving-piece{overflow:hidden}
.piece{
  width:92%;height:92%;min-width:0;min-height:0;font-size:0;overflow:hidden;
  transform-origin:50% 88%;
}
.piece .medieval-character,.moving-piece .medieval-character,.fighter-piece .medieval-character{
  width:100%;height:100%;display:block;overflow:hidden;
  max-width:100%;max-height:100%;
}
.piece.white,.piece.black,.moving-piece.white,.moving-piece.black,
.fighter.white .fighter-piece,.fighter.black .fighter-piece{
  color:inherit;text-shadow:none;
}
.square:hover .piece{transform:translateY(-3px) scale(1.045)}
.piece .char-body{animation:charIdleBody 2.2s ease-in-out infinite;transform-origin:50px 88px}
.piece .char-head{animation:charIdleHead 3.1s ease-in-out infinite;transform-origin:50px 44px}
.piece .char-arm-left{animation:charIdleArm 2.8s ease-in-out infinite;transform-origin:35px 58px}
.piece .char-arm-weapon{animation:charIdleWeapon 3.3s ease-in-out infinite;transform-origin:66px 58px}
.piece.type-N .char-horse{animation:horseIdle 1.8s ease-in-out infinite;transform-origin:50px 95px}
.piece.type-Q .magic-orb{animation:orbIdle 1.35s ease-in-out infinite;transform-origin:91px 64px}

.moving-piece{font-size:0;overflow:hidden;transform-origin:center bottom}
.moving-piece.walking .char-body{animation:marchBody .28s ease-in-out infinite alternate;transform-origin:50px 88px}
.moving-piece.walking .char-head{animation:marchHead .28s ease-in-out infinite alternate;transform-origin:50px 44px}
.moving-piece.walking .char-leg-left{animation:stepLeft .28s ease-in-out infinite alternate;transform-origin:43px 87px}
.moving-piece.walking .char-leg-right{animation:stepRight .28s ease-in-out infinite alternate;transform-origin:57px 87px}
.moving-piece.walking .char-arm-left{animation:armWalkLeft .28s ease-in-out infinite alternate;transform-origin:35px 58px}
.moving-piece.walking .char-arm-weapon{animation:armWalkRight .28s ease-in-out infinite alternate;transform-origin:65px 58px}
.moving-piece.type-N.walking .char-horse{animation:horseGallop .22s ease-in-out infinite alternate;transform-origin:50px 94px}
.moving-piece.type-N.walking .char-leg-left{animation:horseLegFront .22s ease-in-out infinite alternate;transform-origin:31px 90px}
.moving-piece.type-N.walking .char-leg-right{animation:horseLegRear .22s ease-in-out infinite alternate;transform-origin:66px 90px}

.fighter-piece{font-size:0;width:min(220px,30vw);height:min(260px,36vw);margin:0 auto;overflow:visible}
.fighter .char-body,.fighter .char-head,.fighter .char-arm-left,.fighter .char-arm-weapon,.fighter .char-horse{transform-box:fill-box}
.fighter.type-Q .magic-orb{animation:orbBattleIdle 1s ease-in-out infinite;transform-origin:center}
.fighter.attack .char-arm-weapon{animation:weaponSwing .58s cubic-bezier(.2,.9,.2,1)}
.fighter.type-Q.attack .char-arm-weapon{animation:queenCast .7s ease}
.fighter.type-Q.attack .magic-orb{animation:queenOrbBlast .7s ease}
.fighter.type-R.attack .char-arm-weapon{animation:hammerSmash .65s ease}
.fighter.type-B.attack .char-arm-weapon{animation:poleSlash .6s ease}
.fighter.type-K.attack .char-arm-weapon{animation:kingSlash .58s ease}
.fighter.type-P.attack .char-arm-weapon{animation:pawnStab .52s ease}
.fighter.type-N.attack .char-body{animation:knightLean .52s ease}
.fighter.type-N.attack .char-horse{animation:horseCharge .52s ease}
.fighter.hit .char-body,.fighter.hit .char-head{animation:charDamage .4s ease}
.fighter.defeated .medieval-character{filter:grayscale(.45) brightness(.78)}

.battle-flash{position:relative;background:none;filter:none;overflow:visible}
.battle-flash .effect-core{position:absolute;inset:0;display:block}
.battle-flash.effect-Q .effect-core{border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#8ed8ff 9% 26%,#5c6cff 27% 42%,rgba(91,70,255,.1) 43% 60%,transparent 72%);box-shadow:0 0 26px #75bfff,0 0 60px rgba(92,108,255,.8)}
.battle-flash.effect-K .effect-core,.battle-flash.effect-B .effect-core,.battle-flash.effect-P .effect-core{width:18px;height:130px;left:36px;top:-20px;border-radius:999px;background:linear-gradient(#fff,#ffd36b 38%,rgba(255,255,255,0));box-shadow:0 0 18px #ffd36b;transform:rotate(54deg)}
.battle-flash.effect-B .effect-core{background:linear-gradient(#fff,#7dd3fc 42%,rgba(255,255,255,0));box-shadow:0 0 22px #38bdf8;transform:rotate(-55deg)}
.battle-flash.effect-P .effect-core{height:95px;transform:rotate(78deg);background:linear-gradient(#fff,#fca5a5 45%,rgba(255,255,255,0));box-shadow:0 0 18px #ef4444}
.battle-flash.effect-R .effect-core{width:130px;height:45px;left:-20px;top:24px;border:8px solid rgba(244,193,93,.88);border-radius:50%;box-shadow:0 0 35px rgba(244,193,93,.65)}
.battle-flash.effect-N .effect-core{width:145px;height:65px;left:-26px;top:12px;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(255,255,255,.9) 9px 12px,transparent 13px 20px);filter:drop-shadow(0 0 8px #93c5fd);transform:skewX(-26deg)}
.battle-flash.effect-Q.boom{animation:magicBoom .65s ease}
.battle-flash.effect-R.boom{animation:smashBoom .6s ease}
.battle-flash.effect-N.boom{animation:chargeBoom .55s ease}
.battle-flash.effect-K.boom,.battle-flash.effect-B.boom,.battle-flash.effect-P.boom{animation:slashBoom .55s ease}

@keyframes charIdleBody{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.8px)}}
@keyframes charIdleHead{0%,100%{transform:rotate(0)}40%{transform:rotate(-1.3deg)}70%{transform:rotate(1deg)}}
@keyframes charIdleArm{0%,100%{transform:rotate(0)}50%{transform:rotate(2deg)}}
@keyframes charIdleWeapon{0%,100%{transform:rotate(0)}50%{transform:rotate(-2deg)}}
@keyframes horseIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) rotate(.5deg)}}
@keyframes orbIdle{0%,100%{transform:scale(.75);opacity:.55}50%{transform:scale(1.25);opacity:1}}
@keyframes marchBody{from{transform:translateY(1px) rotate(-1deg)}to{transform:translateY(-4px) rotate(1deg)}}
@keyframes marchHead{from{transform:rotate(1.5deg)}to{transform:rotate(-1.5deg)}}
@keyframes stepLeft{from{transform:rotate(13deg) translateY(-1px)}to{transform:rotate(-13deg) translateY(2px)}}
@keyframes stepRight{from{transform:rotate(-13deg) translateY(2px)}to{transform:rotate(13deg) translateY(-1px)}}
@keyframes armWalkLeft{from{transform:rotate(-8deg)}to{transform:rotate(9deg)}}
@keyframes armWalkRight{from{transform:rotate(7deg)}to{transform:rotate(-8deg)}}
@keyframes horseGallop{from{transform:translateY(2px) rotate(-1deg)}to{transform:translateY(-5px) rotate(1deg)}}
@keyframes horseLegFront{from{transform:rotate(16deg)}to{transform:rotate(-18deg)}}
@keyframes horseLegRear{from{transform:rotate(-18deg)}to{transform:rotate(16deg)}}
@keyframes weaponSwing{0%{transform:rotate(0)}35%{transform:rotate(-32deg)}70%{transform:rotate(48deg)}100%{transform:rotate(0)}}
@keyframes queenCast{0%{transform:rotate(0) translate(0)}45%{transform:rotate(-18deg) translate(-4px,-5px)}70%{transform:rotate(26deg) translate(7px,-8px)}100%{transform:rotate(0)}}
@keyframes queenOrbBlast{0%{transform:scale(.8);opacity:.5}55%{transform:scale(2.4);opacity:1}100%{transform:scale(.5);opacity:.3}}
@keyframes hammerSmash{0%{transform:rotate(0)}35%{transform:rotate(-58deg)}75%{transform:rotate(64deg)}100%{transform:rotate(0)}}
@keyframes poleSlash{0%{transform:rotate(0)}45%{transform:rotate(-46deg)}75%{transform:rotate(56deg)}100%{transform:rotate(0)}}
@keyframes kingSlash{0%{transform:rotate(0)}35%{transform:rotate(-35deg)}70%{transform:rotate(62deg)}100%{transform:rotate(0)}}
@keyframes pawnStab{0%,100%{transform:translateX(0)}55%{transform:translateX(16px) rotate(6deg)}}
@keyframes knightLean{0%,100%{transform:rotate(0)}55%{transform:rotate(12deg) translateX(8px)}}
@keyframes horseCharge{0%,100%{transform:translateX(0) translateY(0)}55%{transform:translateX(16px) translateY(-5px)}}
@keyframes charDamage{0%,100%{transform:translateX(0) rotate(0)}35%{transform:translateX(8px) rotate(6deg)}65%{transform:translateX(-5px) rotate(-4deg)}}
@keyframes orbBattleIdle{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.2);opacity:1}}
@keyframes magicBoom{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes slashBoom{0%{opacity:0;transform:scale(.5) rotate(-16deg)}35%{opacity:1}100%{opacity:0;transform:scale(1.7) rotate(14deg)}}
@keyframes smashBoom{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(2.2)}}
@keyframes chargeBoom{0%{opacity:0;transform:translateX(-45px) scale(.7)}35%{opacity:1}100%{opacity:0;transform:translateX(55px) scale(1.25)}}

@media(max-width:560px){
  .piece{width:92%;height:92%}
  .fighter-piece{width:35vw;height:42vw}
}
.promotion-choice .symbol.medieval-promo{height:76px;display:block}
.promotion-choice .symbol.medieval-promo .medieval-character{width:70px;height:76px;margin:0 auto;display:block}


/* =========================================================
   FASE 3 — COMBATES DINÁMICOS
   ========================================================= */
.battle-duel-label{display:block;color:#94a3b8;font-size:10px;font-weight:700;margin-top:5px;letter-spacing:.08em;text-transform:uppercase}
.battle-stage{isolation:isolate}
.battle-center-zone{width:100px;height:180px;align-self:end;position:relative;display:grid;place-items:center;margin-bottom:42px;z-index:8;overflow:visible}
.battle-center-zone .battle-flash{position:absolute;left:5px;top:45px}
.battle-projectile{position:absolute;left:-75px;top:73px;width:45px;height:45px;opacity:0;z-index:5;transform:translateX(0) scale(.65);pointer-events:none}
.battle-projectile span{display:block;width:100%;height:100%;border-radius:50%}
.battle-projectile.fly{animation:projectileFly .42s cubic-bezier(.18,.75,.15,1) forwards}
.projectile-arcane span,.projectile-royal-magic span{background:radial-gradient(circle,#fff 0 10%,#8ed8ff 18%,#6366f1 48%,transparent 70%);box-shadow:0 0 22px #60a5fa,0 0 48px #6366f1}
.projectile-fire span{background:radial-gradient(circle,#fff7ad 0 10%,#fb923c 26%,#dc2626 52%,transparent 72%);box-shadow:0 0 22px #f97316,0 0 50px #dc2626;animation:firePulse .12s alternate infinite}
.projectile-lightning{width:125px;height:24px;left:-92px;top:82px}.projectile-lightning span{border-radius:0;background:linear-gradient(90deg,transparent,#dbeafe 12%,#60a5fa 45%,#fff 52%,#60a5fa 60%,transparent);clip-path:polygon(0 42%,23% 28%,31% 54%,53% 20%,58% 56%,78% 32%,100% 48%,77% 57%,59% 82%,52% 50%,32% 78%,22% 50%);filter:drop-shadow(0 0 9px #60a5fa)}
.projectile-ice span{background:linear-gradient(135deg,#fff,#bae6fd 38%,#38bdf8 64%,transparent 66%);clip-path:polygon(50% 0,64% 32%,100% 50%,65% 62%,50% 100%,38% 64%,0 50%,36% 35%);filter:drop-shadow(0 0 12px #7dd3fc)}
.projectile-steel,.projectile-holy,.projectile-earth,.projectile-charge{display:none}
.battle-particles{position:absolute;left:50%;top:88px;width:1px;height:1px;z-index:10;pointer-events:none}
.battle-particles .particle{position:absolute;width:8px;height:8px;border-radius:50%;opacity:0;animation:particleBurst var(--d) ease-out var(--delay) forwards}
.battle-particles .particle.fire{background:#fb923c;box-shadow:0 0 8px #ef4444}.battle-particles .particle.lightning{background:#dbeafe;box-shadow:0 0 9px #60a5fa}.battle-particles .particle.ice{background:#bae6fd;border-radius:1px;transform:rotate(45deg)}.battle-particles .particle.arcane,.battle-particles .particle.royal-magic{background:#a5b4fc;box-shadow:0 0 8px #818cf8}.battle-particles .particle.earth{background:#c59b6a}.battle-particles .particle.charge,.battle-particles .particle.steel,.battle-particles .particle.holy{background:#fde68a;box-shadow:0 0 6px #fbbf24}
.battle-phase{position:absolute;z-index:12;bottom:18px;left:50%;transform:translateX(-50%);padding:7px 13px;border-radius:999px;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.1);color:#cbd5e1;font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}

.fighter.guard-shield .char-arm-left{animation:guardShield .55s ease forwards}.fighter.guard-parry .char-arm-weapon{animation:guardParry .55s ease forwards}.fighter.guard-ward .fighter-aura{animation:wardShield .7s ease forwards;background:radial-gradient(circle,rgba(129,140,248,.55),rgba(96,165,250,.16) 45%,transparent 70%)}.fighter.guard-sidestep{animation:defenderSidestep .55s ease forwards}.fighter.guard-evade{animation:defenderEvade .6s ease forwards}
.fighter.windup.attack-cast .char-arm-weapon{animation:castWindup .5s ease forwards}.fighter.windup.attack-slash .char-arm-weapon{animation:swordWindup .5s ease forwards}.fighter.windup.attack-smash .char-arm-weapon{animation:hammerWindup .55s ease forwards}.fighter.windup.attack-sweep .char-arm-weapon{animation:spearWindup .5s ease forwards}.fighter.windup.attack-charge .char-horse{animation:chargeWindup .5s ease forwards}.fighter.windup.attack-stab .char-arm-weapon{animation:stabWindup .45s ease forwards}
.fighter.attack.attack-cast{animation:casterStep .55s ease}.fighter.attack.attack-slash{animation:attackLunge .58s ease}.fighter.attack.attack-smash{animation:heavyLunge .65s ease}.fighter.attack.attack-sweep{animation:attackLunge .58s ease}.fighter.attack.attack-charge{animation:horseLunge .62s ease}.fighter.attack.attack-stab{animation:shortLunge .52s ease}
.fighter.finisher .char-arm-weapon{animation:finisherSwing .5s cubic-bezier(.2,.9,.2,1)}
.fighter.victorious{animation:victoryBounce .7s ease}.fighter.victorious .char-arm-weapon{animation:victoryWeapon .8s ease}

.fighter.defeated.defeat-heavy{animation:defeatHeavy .75s forwards ease-in}.fighter.defeated.defeat-spin{animation:defeatSpin .8s forwards ease-in}.fighter.defeated.defeat-rider{animation:defeatRider .85s forwards ease-in}.fighter.defeated.defeat-fall{animation:defeatFall .72s forwards ease-in}.fighter.defeated.defeat-kneel{animation:defeatKneel .85s forwards ease-in}.fighter.defeated.defeat-dissolve{animation:defeatDissolve .9s forwards ease-out}.fighter.defeated.defeat-dissolve .medieval-character{filter:brightness(1.4) saturate(.55) blur(.3px)}

.battle-flash.effect-fire .effect-core{border-radius:50%;background:radial-gradient(circle,#fff7ad 0 8%,#fb923c 18%,#ef4444 42%,rgba(127,29,29,.1) 62%,transparent 74%);box-shadow:0 0 28px #f97316,0 0 62px #dc2626}.battle-flash.effect-lightning .effect-core{width:130px;height:70px;left:-22px;top:8px;background:repeating-linear-gradient(128deg,transparent 0 8px,#fff 9px 11px,#60a5fa 12px 15px,transparent 16px 25px);filter:drop-shadow(0 0 10px #60a5fa);clip-path:polygon(0 30%,35% 20%,42% 0,51% 36%,100% 20%,66% 47%,78% 100%,48% 63%,10% 86%,34% 50%)}
.battle-flash.effect-ice .effect-core{width:115px;height:115px;left:-12px;top:-12px;background:conic-gradient(from 10deg,transparent,#e0f2fe,#38bdf8,transparent,#bae6fd,#0ea5e9,transparent);clip-path:polygon(50% 0,62% 32%,86% 14%,70% 40%,100% 50%,69% 61%,87% 86%,61% 70%,50% 100%,39% 69%,14% 86%,31% 60%,0 50%,31% 39%,14% 14%,39% 31%);filter:drop-shadow(0 0 12px #7dd3fc)}
.battle-flash.effect-royal-magic .effect-core{border-radius:50%;background:conic-gradient(#facc15,#60a5fa,#a78bfa,#facc15);box-shadow:0 0 30px #facc15,0 0 62px #6366f1;mask:radial-gradient(circle,transparent 0 28%,#000 30% 46%,transparent 48%)}
.battle-flash.effect-fire.boom,.battle-flash.effect-lightning.boom,.battle-flash.effect-ice.boom,.battle-flash.effect-royal-magic.boom,.battle-flash.effect-arcane.boom{animation:magicBoom .58s ease}
.battle-flash.final-boom{filter:brightness(1.45)}
.battle-stage.camera-hit{animation:cameraHit .28s ease}.battle-stage.camera-hit-strong{animation:cameraHitStrong .38s ease}

.settings-card{max-width:620px}.battle-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:left;margin:18px 0}.battle-mode-option{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);color:var(--text);padding:15px;cursor:pointer;min-height:115px;transition:.18s ease}.battle-mode-option strong,.battle-mode-option span{display:block}.battle-mode-option strong{font-size:13px;margin-bottom:8px}.battle-mode-option span{font-size:10px;color:var(--muted);line-height:1.45}.battle-mode-option:hover{transform:translateY(-2px);background:rgba(255,255,255,.065)}.battle-mode-option.active{border-color:rgba(244,193,93,.65);background:rgba(244,193,93,.09);box-shadow:inset 0 0 0 1px rgba(244,193,93,.16)}.settings-actions{margin-top:4px}
.victory-card{max-width:470px;overflow:hidden;background:radial-gradient(circle at 50% 30%,rgba(244,193,93,.16),transparent 40%),#111827}.victory-character{width:160px;height:190px;margin:0 auto -12px}.victory-character .medieval-character{width:100%;height:100%;animation:victoryKing 1.5s ease-in-out infinite}.victory-card h2{font-size:28px;color:#fde68a}.victory-new{height:auto;padding:9px 14px}.victory-modal.open .victory-card{animation:victoryCardIn .45s cubic-bezier(.18,.88,.25,1.2)}

@keyframes projectileFly{0%{opacity:0;transform:translateX(0) scale(.6)}12%{opacity:1}100%{opacity:1;transform:translateX(235px) scale(1.05)}}
@keyframes firePulse{from{transform:scale(.85) rotate(-5deg)}to{transform:scale(1.15) rotate(5deg)}}
@keyframes particleBurst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.15)}}
@keyframes guardShield{0%{transform:rotate(0)}100%{transform:rotate(-24deg) translate(7px,-4px)}}
@keyframes guardParry{0%{transform:rotate(0)}100%{transform:rotate(-42deg) translate(-4px,-3px)}}
@keyframes wardShield{0%{transform:translateX(-50%) scale(.5);opacity:.15}100%{transform:translateX(-50%) scale(1.35);opacity:1}}
@keyframes defenderSidestep{0%{transform:translateX(0)}100%{transform:translateX(22px) rotate(2deg)}}
@keyframes defenderEvade{0%{transform:translateX(0) translateY(0)}100%{transform:translateX(24px) translateY(-9px) rotate(3deg)}}
@keyframes castWindup{0%{transform:rotate(0)}100%{transform:rotate(-28deg) translate(-6px,-8px)}}
@keyframes swordWindup{0%{transform:rotate(0)}100%{transform:rotate(-56deg)}}
@keyframes hammerWindup{0%{transform:rotate(0)}100%{transform:rotate(-78deg) translate(-5px,-4px)}}
@keyframes spearWindup{0%{transform:rotate(0)}100%{transform:rotate(-35deg) translate(-6px,0)}}
@keyframes chargeWindup{0%{transform:translateX(0)}100%{transform:translateX(-12px) translateY(3px) rotate(-2deg)}}
@keyframes stabWindup{0%{transform:translateX(0)}100%{transform:translateX(-9px) rotate(-7deg)}}
@keyframes casterStep{0%{transform:translateX(0)}55%{transform:translateX(35px)}100%{transform:translateX(0)}}
@keyframes heavyLunge{0%{transform:translateX(0) scale(1)}55%{transform:translateX(78px) scale(1.08)}100%{transform:translateX(0)}}
@keyframes horseLunge{0%{transform:translateX(0)}60%{transform:translateX(92px) translateY(-4px)}100%{transform:translateX(0)}}
@keyframes shortLunge{0%{transform:translateX(0)}58%{transform:translateX(62px)}100%{transform:translateX(0)}}
@keyframes finisherSwing{0%{transform:rotate(-18deg)}58%{transform:rotate(72deg) translate(8px,2px)}100%{transform:rotate(0)}}
@keyframes victoryBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px) scale(1.03)}}
@keyframes victoryWeapon{0%{transform:rotate(0)}45%{transform:rotate(-35deg) translateY(-5px)}100%{transform:rotate(0)}}
@keyframes defeatHeavy{0%{transform:rotate(0);opacity:1}45%{transform:translateX(18px) rotate(8deg)}100%{transform:translateY(92px) rotate(54deg);opacity:0}}
@keyframes defeatSpin{0%{transform:rotate(0);opacity:1}100%{transform:translate(65px,75px) rotate(190deg);opacity:0}}
@keyframes defeatRider{0%{transform:rotate(0);opacity:1}45%{transform:translateX(30px) rotate(12deg)}100%{transform:translate(88px,70px) rotate(70deg);opacity:0}}
@keyframes defeatFall{0%{transform:rotate(0);opacity:1}65%{transform:rotate(35deg) translateY(28px);opacity:.8}100%{transform:rotate(72deg) translate(35px,84px);opacity:0}}
@keyframes defeatKneel{0%{transform:translateY(0);opacity:1}55%{transform:translateY(28px) rotate(6deg)}100%{transform:translateY(65px) scaleY(.72);opacity:0}}
@keyframes defeatDissolve{0%{transform:scale(1);opacity:1;filter:none}45%{transform:scale(1.08);opacity:.75;filter:brightness(1.8) blur(1px)}100%{transform:scale(.72) translateY(-20px);opacity:0;filter:brightness(2.6) blur(7px)}}
@keyframes cameraHit{0%,100%{transform:translate(0)}22%{transform:translate(-5px,3px)}45%{transform:translate(5px,-2px)}70%{transform:translate(-2px,1px)}}
@keyframes cameraHitStrong{0%,100%{transform:translate(0)}18%{transform:translate(-9px,5px)}38%{transform:translate(8px,-5px)}58%{transform:translate(-6px,3px)}78%{transform:translate(4px,-2px)}}
@keyframes victoryKing{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes victoryCardIn{from{transform:translateY(20px) scale(.94);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}

@media(max-width:700px){.battle-mode-grid{grid-template-columns:1fr}.battle-mode-option{min-height:0}.battle-center-zone{width:42px}.battle-phase{bottom:12px}.victory-character{width:130px;height:155px}}