:root {
  --bg:#0b0e16; --panel:#151a27; --panel2:#1b2233; --line:#2e3952; --text:#f7f4ea;
  --muted:#99a6bd; --gold:#f2c45b; --danger:#ff6464; --good:#72e0a5; --blue:#6eb8ff;
  --rock:#e49b55; --paper:#73c982; --scissors:#6aa9e8;
}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 50% 0,#1a2132 0,#0b0e16 42%,#07090e 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;min-height:100vh}
button,input{font:inherit}.app{width:min(1120px,calc(100% - 24px));margin:0 auto;padding:28px 0 48px}.hidden{display:none!important}.panel{background:linear-gradient(180deg,rgba(28,34,51,.98),rgba(18,22,34,.98));border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 22px 70px rgba(0,0,0,.35)}
.home-panel,.end-panel{max-width:620px;margin:7vh auto 0;text-align:center}.brand-mark{font-size:44px}.eyebrow{letter-spacing:.18em;font-size:12px;color:var(--gold);font-weight:800;margin:8px 0}.home-panel h1{font-size:clamp(38px,8vw,72px);line-height:.9;margin:8px 0}.motto{font-family:Georgia,serif;font-style:italic;font-size:20px;color:#ddd4bd}.lead{color:var(--muted);font-size:17px}.field{display:grid;gap:7px;text-align:left;color:var(--muted);margin:26px auto 14px;max-width:420px}.field input,.join-row input{background:#0f1420;border:1px solid var(--line);border-radius:12px;color:var(--text);padding:13px 14px;outline:none}.field input:focus,.join-row input:focus{border-color:var(--gold)}
.home-actions,.join-row{display:flex;gap:10px;justify-content:center;max-width:520px;margin:10px auto}.join-row input{width:160px;text-transform:uppercase;font-weight:800;letter-spacing:.12em;text-align:center}.btn{border:1px solid #47536b;background:#20283a;color:var(--text);border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer;min-height:46px}.btn:hover{filter:brightness(1.12)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{border-color:#d6aa49;background:linear-gradient(180deg,#f1ca69,#c8942f);color:#17120a}.wide{width:100%;margin-top:18px}.error{color:#ff8a8a;min-height:1.3em}
.topline{display:flex;align-items:center;justify-content:space-between;gap:16px}.topline h2{margin:4px 0;font-size:28px}.status-chip,.ready-indicator{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;letter-spacing:.06em;color:var(--muted)}.hint{color:var(--muted);font-size:14px}.hint.compact{font-size:12px}.class-grid{display:grid;grid-template-columns:repeat(9,minmax(88px,1fr));gap:8px;margin:22px 0}.class-pick{background:#121827;border:1px solid var(--line);border-radius:14px;padding:13px 8px;color:var(--text);cursor:pointer;min-height:78px}.class-pick strong{display:block;margin-top:6px}.class-pick:hover{border-color:#66738f}.family-rock{--family:var(--rock)}.family-paper{--family:var(--paper)}.family-scissors{--family:var(--scissors)}.class-pick,.axie-card{box-shadow:inset 0 3px 0 var(--family,transparent)}.selection-box{border:1px solid var(--line);border-radius:15px;padding:15px;background:#101521}.selection-title{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.08em}.picked-team{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.picked{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#1b2232;border-radius:12px;padding:10px}.pick-actions{display:flex;gap:4px}.pick-actions button{width:30px;height:30px;border:1px solid #3c465d;background:#111725;color:#fff;border-radius:8px;cursor:pointer}
.battle-shell{display:grid;gap:14px}.battle-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 16px;border:1px solid var(--line);background:rgba(16,20,31,.96);border-radius:16px}.room-small{font-size:11px;color:var(--muted);letter-spacing:.1em}.round-label{font-weight:900;font-size:18px}.timer-wrap{text-align:center}.timer-label{display:block;color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.18em}.timer{font-size:38px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}.timer.danger{color:var(--danger);animation:pulse .55s infinite alternate}.ready-indicator{justify-self:end}.ready-indicator.ready{color:var(--good);border-color:#3a7258;background:#10251c}.team-section{padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(17,22,34,.9)}.section-label{font-size:11px;font-weight:900;letter-spacing:.11em;color:var(--muted);display:block;margin-bottom:8px}.team-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.axie-card{position:relative;border:1px solid #34405a;background:linear-gradient(180deg,#20283a,#141a28);border-radius:14px;padding:12px;min-height:84px;color:var(--text);text-align:left}.own-section .axie-card.alive{cursor:pointer}.own-section .axie-card.selected{border-color:var(--gold);outline:2px solid rgba(242,196,91,.25)}.axie-card.ko{opacity:.34;filter:grayscale(1)}.axie-card .class-icon{font-size:23px;margin-right:8px}.axie-name{font-weight:900}.axie-meta{color:var(--muted);font-size:12px;margin-top:5px}.vanguard-badge{position:absolute;right:8px;top:8px;font-size:9px;font-weight:900;color:#191309;background:var(--gold);border-radius:999px;padding:4px 7px}
.arena{position:relative;min-height:245px;border-radius:22px;border:1px solid #3a4358;overflow:hidden;background:radial-gradient(circle at 50% 70%,#34384a 0,#1b2030 38%,#0c101a 76%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:30px 7% 54px}.arena:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(228,155,85,.08),transparent 38%,transparent 62%,rgba(106,169,232,.08));pointer-events:none}.arena-floor{position:absolute;left:12%;right:12%;bottom:38px;height:42px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.62),transparent 67%)}.fighter{z-index:1;text-align:center;min-width:0}.fighter-token{width:112px;height:112px;margin:auto;border-radius:48% 52% 44% 56%;display:grid;place-items:center;font-size:50px;background:linear-gradient(145deg,#39455d,#1b2232);border:3px solid var(--family,#67748e);box-shadow:0 14px 35px rgba(0,0,0,.36)}.fighter-name{font-weight:950;margin-top:8px}.fighter-card{font-size:12px;color:var(--gold);margin-top:4px}.vs{font-size:28px;font-weight:950;color:#6d7890;z-index:1}.battle-message{position:absolute;left:0;right:0;bottom:11px;text-align:center;font-weight:900;letter-spacing:.08em;font-size:13px;color:var(--gold)}.fighter.hit .fighter-token{animation:hit .42s}.fighter.ko .fighter-token{animation:ko .8s forwards}.fighter.attack .fighter-token{animation:attack .48s}
.cards-panel{border:1px solid var(--line);border-radius:16px;background:#111724;padding:13px}.cards-head{display:flex;justify-content:space-between;align-items:end;gap:12px}.hand{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}.card-btn{position:relative;text-align:left;border-radius:14px;border:1px solid #3c475e;background:linear-gradient(180deg,#232b3d,#171d2b);color:var(--text);padding:13px;min-height:104px;cursor:pointer}.card-btn.selected{border-color:var(--gold);outline:2px solid rgba(242,196,91,.2)}.card-btn.attack{box-shadow:inset 0 3px 0 #e26c5d}.card-btn.defense{box-shadow:inset 0 3px 0 #62a7dd}.card-kind{font-size:11px;font-weight:950;letter-spacing:.08em}.card-level{font-size:31px;font-weight:950;float:right}.card-part{display:block;color:var(--muted);font-size:12px;margin-top:13px}.empty-hand{grid-column:1/-1;border:1px dashed #46516a;border-radius:12px;padding:18px;text-align:center;color:var(--muted)}
.fight-zone{display:grid;grid-template-columns:1fr minmax(210px,320px) 1fr;gap:12px;align-items:center}.selection-summary{color:var(--muted);font-size:13px}.fight-btn{border:1px solid #e7bb57;background:linear-gradient(180deg,#ffd779,#d39427);color:#1b1408;border-radius:15px;min-height:58px;font-size:19px;font-weight:1000;letter-spacing:.06em;cursor:pointer;box-shadow:0 10px 28px rgba(214,154,44,.18)}.fight-btn:disabled{filter:grayscale(1);opacity:.42;cursor:not-allowed}.waiting-text{text-align:right;color:var(--good);font-weight:900;font-size:13px}.end-panel h2{font-size:46px;margin:12px 0}
@keyframes pulse{to{transform:scale(1.05)}}@keyframes attack{50%{transform:translateX(16px) scale(1.06)}}@keyframes hit{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}}@keyframes ko{to{transform:rotate(13deg) translateY(28px);opacity:.25}}
@media(max-width:820px){.class-grid{grid-template-columns:repeat(3,1fr)}.battle-header{grid-template-columns:1fr auto}.ready-indicator{grid-column:1/-1;justify-self:stretch;text-align:center;margin-top:8px}.arena{min-height:210px;padding-left:3%;padding-right:3%}.fighter-token{width:88px;height:88px;font-size:38px}.team-row,.hand,.picked-team{grid-template-columns:1fr 1fr 1fr}.fight-zone{grid-template-columns:1fr}.selection-summary,.waiting-text{text-align:center}.fight-btn{order:-1}}
@media(max-width:520px){.app{width:min(100% - 12px,1120px);padding-top:8px}.panel{padding:18px;border-radius:15px}.home-actions{flex-direction:column}.join-row{display:grid;grid-template-columns:1fr 1fr}.join-row input{width:100%}.team-row{gap:5px}.axie-card{padding:8px;min-height:96px}.axie-name{font-size:12px}.axie-meta{font-size:10px}.vanguard-badge{position:static;display:inline-block;margin-top:6px}.arena{min-height:190px}.fighter-token{width:72px;height:72px;font-size:31px}.hand{grid-template-columns:1fr}.card-btn{min-height:82px}.cards-head{align-items:start;flex-direction:column}.timer{font-size:30px}}

/* V0.2 — combate horizontal: rival izquierda, dueño de pantalla derecha */
@media(min-width:1100px){
  .app{width:min(1500px,calc(100% - 28px));padding:16px 0 28px}
  .battle-shell{gap:10px}
  .battle-header{min-height:72px}
  .battle-landscape{display:grid;grid-template-columns:minmax(245px,.78fr) minmax(520px,1.65fr) minmax(330px,1.02fr);gap:12px;align-items:stretch;min-height:650px}
  .combat-side,.battle-center{min-width:0}
  .opponent-side,.player-side{display:flex;min-height:0}
  .opponent-side .team-section{width:100%}
  .player-side{display:grid;grid-template-rows:auto 1fr auto;gap:10px}
  .battle-center{display:flex}
  .battle-center .arena{width:100%;min-height:650px}
  .side-team{grid-template-columns:1fr!important;gap:10px}
  .side-team .axie-card{min-height:118px;padding:14px}
  .side-team .class-icon{font-size:30px}
  .side-title{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;font-size:18px;font-weight:950;margin:2px 0 10px}
  .side-title small{display:block;font-size:9px;letter-spacing:.08em;color:var(--muted);text-align:right}
  .cards-panel{min-height:0}
  .hand{grid-template-columns:1fr;gap:8px}
  .card-btn{min-height:82px;padding:11px 12px}
  .card-level{font-size:27px}
  .card-part{margin-top:8px}
  .fight-zone{display:grid;grid-template-columns:1fr;gap:8px;align-self:end}
  .selection-summary,.waiting-text{text-align:center;min-height:18px}
  .fight-btn{width:100%}
  .arena{padding:38px 5% 64px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .fighter-token{width:142px;height:142px;font-size:62px}
  .fighter-name{font-size:17px}
  .vs{font-size:34px}
}

.round-result{position:absolute;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none;font-size:clamp(54px,7vw,110px);font-weight:1000;letter-spacing:.08em;text-shadow:0 8px 34px #000,0 2px 3px #000;animation:resultIn .28s ease-out both}
.round-result.victory{color:#f8d56d;background:radial-gradient(circle,rgba(114,224,165,.20),transparent 47%)}
.round-result.defeat{color:#ff6b6b;background:radial-gradient(circle,rgba(255,72,72,.18),transparent 48%)}
.round-result.draw{color:#d7e0ef;background:radial-gradient(circle,rgba(120,148,190,.18),transparent 47%)}
@keyframes resultIn{from{opacity:0;transform:scale(.68)}55%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}

/* Sangre estilizada breve al producirse un KO. */
.blood-burst{position:absolute;z-index:16;top:44%;width:1px;height:1px;pointer-events:none}
.blood-left{left:25%}.blood-right{right:25%}
.blood-burst i{position:absolute;width:var(--s);height:calc(var(--s) * 1.35);border-radius:60% 60% 72% 72%;background:#a61922;box-shadow:0 0 0 1px rgba(40,0,0,.35);animation:bloodDrop .75s cubic-bezier(.2,.72,.35,1) var(--d) both}
@keyframes bloodDrop{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:.95}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 74px)) rotate(32deg) scale(.85)}}

.fighter-right.attack .fighter-token{animation:attackLeft .48s}
.fighter-left.attack .fighter-token{animation:attackRight .48s}
@keyframes attackLeft{50%{transform:translateX(-24px) scale(1.07)}}
@keyframes attackRight{50%{transform:translateX(24px) scale(1.07)}}

@media(max-width:1099px){
  .battle-landscape{display:grid;gap:12px}
  .opponent-side{order:1}.battle-center{order:2}.player-side{order:3;display:grid;gap:12px}
  .side-title{display:flex;justify-content:space-between;font-weight:900;margin-bottom:8px}.side-title small{color:var(--muted);font-size:9px}
}


/* ==========================================================
   V0.3 — RESPONSIVE MULTIPANTALLA
   Objetivo: en desktop/laptop el combate completo cabe dentro
   del viewport sin scroll. En tablet/móvil se reorganiza sin
   overflow horizontal, manteniendo RIVAL a la izquierda y TÚ
   a la derecha siempre que ambos equipos comparten fila.
   ========================================================== */
html,body{max-width:100%;overflow-x:hidden}
body.battle-mode{overflow:hidden}
body.battle-mode .app{
  width:100%;max-width:none;margin:0;
  height:100vh;height:100dvh;
  padding:clamp(6px,1vw,12px);
}
body.battle-mode .battle-shell{
  height:100%;min-height:0;
  grid-template-rows:auto minmax(0,1fr);
  gap:clamp(6px,.7vw,10px);
}
body.battle-mode .battle-header{
  min-height:0;
  padding:clamp(7px,.8vw,11px) clamp(10px,1vw,16px);
  border-radius:clamp(10px,1vw,15px);
}
body.battle-mode .round-label{font-size:clamp(14px,1.35vw,18px)}
body.battle-mode .timer{font-size:clamp(27px,3vw,38px)}
body.battle-mode .battle-landscape,
body.battle-mode .combat-side,
body.battle-mode .battle-center,
body.battle-mode .team-section,
body.battle-mode .cards-panel{min-width:0;min-height:0}
body.battle-mode .battle-landscape{height:100%;overflow:hidden}
body.battle-mode .team-section,
body.battle-mode .cards-panel{border-radius:clamp(10px,1vw,15px)}
body.battle-mode .side-title{min-width:0}
body.battle-mode .side-title>span,
body.battle-mode .side-title small{min-width:0}

/* Lobby y selector también se adaptan mejor antes de entrar a batalla. */
@media (min-width:821px) and (max-width:1120px){
  .class-grid{grid-template-columns:repeat(5,minmax(100px,1fr))}
}

/* ---------- DESKTOP / LAPTOP / TABLET HORIZONTAL AMPLIA ---------- */
@media (min-width:1000px){
  body.battle-mode .battle-landscape{
    display:grid;
    grid-template-columns:clamp(205px,18vw,285px) minmax(360px,1fr) clamp(320px,25vw,430px);
    gap:clamp(6px,.75vw,11px);
    align-items:stretch;
  }
  body.battle-mode .opponent-side,
  body.battle-mode .player-side,
  body.battle-mode .battle-center{height:100%;min-height:0}
  body.battle-mode .opponent-side{display:flex}
  body.battle-mode .opponent-section{
    width:100%;height:100%;
    display:grid;grid-template-rows:auto minmax(0,1fr);
  }
  body.battle-mode .player-side{
    display:grid;
    grid-template-rows:minmax(0,1fr) auto auto;
    gap:clamp(6px,.65vw,9px);
  }
  body.battle-mode .own-section{
    display:grid;grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
  }
  body.battle-mode .side-team{
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(3,minmax(0,1fr));
    height:100%;gap:clamp(5px,.55vw,8px);
    min-height:0;
  }
  body.battle-mode .side-team .axie-card{
    min-height:0;height:100%;
    padding:clamp(7px,.75vw,11px);
    overflow:hidden;
  }
  body.battle-mode .side-team .class-icon{font-size:clamp(18px,1.8vw,27px)}
  body.battle-mode .axie-name{font-size:clamp(12px,1.1vw,16px)}
  body.battle-mode .axie-meta{font-size:clamp(9px,.85vw,11px);margin-top:3px}
  body.battle-mode .vanguard-badge{font-size:8px;padding:3px 6px}
  body.battle-mode .side-title{
    font-size:clamp(14px,1.35vw,18px);
    margin:0 0 clamp(4px,.45vw,7px);
  }
  body.battle-mode .side-title small{font-size:8px}

  body.battle-mode .battle-center{display:flex}
  body.battle-mode .battle-center .arena{
    width:100%;height:100%;min-height:0;
    padding:clamp(18px,3vh,34px) clamp(14px,3vw,40px) clamp(42px,6vh,60px);
    border-radius:clamp(14px,1.4vw,20px);
  }
  body.battle-mode .fighter-token{
    width:clamp(82px,9vw,142px);height:clamp(82px,9vw,142px);
    font-size:clamp(38px,4.4vw,62px);
  }
  body.battle-mode .fighter-name{font-size:clamp(12px,1.15vw,17px)}
  body.battle-mode .fighter-card{font-size:clamp(10px,.9vw,12px)}
  body.battle-mode .vs{font-size:clamp(23px,2.4vw,34px)}

  /* La mano va en horizontal: ahorra mucha altura en laptops. */
  body.battle-mode .cards-panel{padding:clamp(8px,.75vw,12px)}
  body.battle-mode .cards-head{align-items:center}
  body.battle-mode .cards-head .section-label{margin-bottom:3px}
  body.battle-mode .hand{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(5px,.55vw,8px);margin-top:6px;
  }
  body.battle-mode .card-btn{
    min-width:0;min-height:68px;
    padding:clamp(7px,.65vw,10px);
  }
  body.battle-mode .card-level{font-size:clamp(22px,2vw,28px)}
  body.battle-mode .card-kind{font-size:clamp(8px,.7vw,10px)}
  body.battle-mode .card-part{
    font-size:clamp(8px,.7vw,10px);margin-top:6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body.battle-mode .empty-hand{padding:10px;font-size:11px}

  body.battle-mode .fight-zone{
    display:grid;grid-template-columns:1fr;gap:4px;
    align-self:end;
  }
  body.battle-mode .fight-btn{min-height:48px;font-size:clamp(14px,1.25vw,18px)}
  body.battle-mode .selection-summary,
  body.battle-mode .waiting-text{font-size:10px;min-height:13px;text-align:center}
}

/* Laptops de poca altura: comprimir sin esconder funciones. */
@media (min-width:1000px) and (max-height:780px){
  body.battle-mode .app{padding:5px 7px}
  body.battle-mode .battle-shell{gap:5px}
  body.battle-mode .battle-header{padding:5px 10px}
  body.battle-mode .room-small{font-size:9px}
  body.battle-mode .round-label{font-size:14px}
  body.battle-mode .timer-label{font-size:8px}
  body.battle-mode .timer{font-size:27px}
  body.battle-mode .ready-indicator{padding:5px 8px;font-size:9px}
  body.battle-mode .team-section{padding:7px 8px}
  body.battle-mode .side-team .axie-card{padding:6px 7px}
  body.battle-mode .side-team .class-icon{font-size:18px}
  body.battle-mode .axie-name{font-size:12px}
  body.battle-mode .axie-meta{font-size:8.5px;margin-top:2px}
  body.battle-mode .cards-panel{padding:7px 8px}
  body.battle-mode .cards-head strong{font-size:12px}
  body.battle-mode .hint.compact{font-size:9px}
  body.battle-mode .card-btn{min-height:58px;padding:6px 7px}
  body.battle-mode .card-level{font-size:20px}
  body.battle-mode .card-kind{font-size:8px}
  body.battle-mode .card-part{font-size:8px;margin-top:3px}
  body.battle-mode .fight-btn{min-height:43px;font-size:14px}
  body.battle-mode .fighter-token{width:clamp(72px,8vw,108px);height:clamp(72px,8vw,108px);font-size:clamp(34px,4vw,48px)}
  body.battle-mode .battle-message{font-size:10px;bottom:7px}
}

/* ---------- TABLET / PANTALLA MEDIA ---------- */
@media (min-width:600px) and (max-width:999px){
  body.battle-mode{overflow:hidden}
  body.battle-mode .app{padding:6px}
  body.battle-mode .battle-landscape{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto minmax(180px,1fr) auto auto;
    grid-template-areas:
      "opp own"
      "arena arena"
      "cards cards"
      "fight fight";
    gap:6px;
  }
  body.battle-mode .opponent-side,
  body.battle-mode .player-side{display:contents}
  body.battle-mode .opponent-section{grid-area:opp}
  body.battle-mode .own-section{grid-area:own}
  body.battle-mode .battle-center{grid-area:arena;display:flex;min-height:0}
  body.battle-mode .cards-panel{grid-area:cards}
  body.battle-mode .fight-zone{grid-area:fight}
  body.battle-mode .team-section{padding:7px 8px;overflow:hidden}
  body.battle-mode .side-title{font-size:13px;margin:0 0 4px}
  body.battle-mode .side-title small{font-size:7px}
  body.battle-mode .side-team{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px}
  body.battle-mode .axie-card{min-height:58px;padding:6px}
  body.battle-mode .axie-card .class-icon{font-size:17px;margin-right:3px}
  body.battle-mode .axie-name{font-size:10px}
  body.battle-mode .axie-meta{font-size:8px;margin-top:2px}
  body.battle-mode .vanguard-badge{font-size:6px;padding:2px 4px;right:4px;top:4px}
  body.battle-mode .battle-center .arena{height:100%;min-height:0;width:100%;padding:14px 4% 34px}
  body.battle-mode .fighter-token{width:74px;height:74px;font-size:34px}
  body.battle-mode .fighter-name{font-size:11px}
  body.battle-mode .fighter-card{font-size:9px}
  body.battle-mode .battle-message{font-size:10px;bottom:7px}
  body.battle-mode .cards-panel{padding:7px 9px}
  body.battle-mode .cards-head strong{font-size:12px}
  body.battle-mode .cards-head .hint{font-size:9px}
  body.battle-mode .hand{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:5px}
  body.battle-mode .card-btn{min-height:60px;padding:6px 8px}
  body.battle-mode .card-level{font-size:21px}
  body.battle-mode .card-kind{font-size:8px}
  body.battle-mode .card-part{font-size:8px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.battle-mode .fight-zone{display:grid;grid-template-columns:1fr minmax(210px,320px) 1fr;gap:6px}
  body.battle-mode .fight-btn{min-height:43px;font-size:14px}
  body.battle-mode .selection-summary,body.battle-mode .waiting-text{font-size:9px;min-height:0}
}

/* Tablet/phone en horizontal y muy poca altura: volver a tres columnas compactas. */
@media (min-width:700px) and (max-width:999px) and (max-height:600px){
  body.battle-mode .battle-landscape{
    grid-template-columns:190px minmax(300px,1fr) 285px;
    grid-template-rows:minmax(0,1fr);
    grid-template-areas:"opp arena own";
  }
  body.battle-mode .opponent-side{display:flex;grid-area:opp}
  body.battle-mode .player-side{display:grid;grid-area:own;grid-template-rows:minmax(0,1fr) auto auto;gap:4px}
  body.battle-mode .opponent-section{grid-area:auto;display:grid;grid-template-rows:auto minmax(0,1fr);height:100%}
  body.battle-mode .own-section{grid-area:auto;display:grid;grid-template-rows:auto minmax(0,1fr)}
  body.battle-mode .battle-center{grid-area:arena}
  body.battle-mode .cards-panel{grid-area:auto}
  body.battle-mode .fight-zone{grid-area:auto;grid-template-columns:1fr;gap:2px}
  body.battle-mode .side-team{grid-template-columns:1fr!important;grid-template-rows:repeat(3,minmax(0,1fr));height:100%}
  body.battle-mode .hand{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.battle-mode .card-part{display:none}
  body.battle-mode .selection-summary,body.battle-mode .waiting-text{display:none}
}

/* ---------- MÓVIL ---------- */
@media (max-width:599px){
  body.battle-mode{overflow:auto}
  body.battle-mode .app{height:auto;min-height:100vh;min-height:100dvh;padding:4px}
  body.battle-mode .battle-shell{min-height:calc(100vh - 8px);min-height:calc(100dvh - 8px);grid-template-rows:auto 1fr;gap:4px}
  body.battle-mode .battle-header{padding:5px 7px;border-radius:9px}
  body.battle-mode .room-small{font-size:7px}
  body.battle-mode .round-label{font-size:11px}
  body.battle-mode .timer-label{font-size:7px}
  body.battle-mode .timer{font-size:23px}
  body.battle-mode .ready-indicator{font-size:7px;padding:4px 5px;white-space:nowrap}
  body.battle-mode .battle-landscape{
    display:grid;height:auto;min-height:0;overflow:visible;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "arena arena"
      "opp own"
      "cards cards"
      "fight fight";
    gap:4px;
  }
  body.battle-mode .opponent-side,
  body.battle-mode .player-side{display:contents}
  body.battle-mode .opponent-section{grid-area:opp}
  body.battle-mode .own-section{grid-area:own}
  body.battle-mode .battle-center{grid-area:arena}
  body.battle-mode .cards-panel{grid-area:cards}
  body.battle-mode .fight-zone{grid-area:fight}
  body.battle-mode .team-section{padding:5px;border-radius:9px}
  body.battle-mode .side-title{font-size:10px;margin:0 0 3px}
  body.battle-mode .side-title small{font-size:5.5px}
  body.battle-mode .side-team{grid-template-columns:1fr!important;gap:3px}
  body.battle-mode .axie-card{min-height:42px;padding:4px 5px;border-radius:8px}
  body.battle-mode .axie-card .class-icon{font-size:15px;margin-right:2px}
  body.battle-mode .axie-name{font-size:9px}
  body.battle-mode .axie-meta{font-size:7px;margin-top:1px}
  body.battle-mode .own-section .axie-meta:last-of-type{display:none}
  body.battle-mode .vanguard-badge{font-size:5.5px;padding:1px 3px;right:3px;top:3px}
  body.battle-mode .arena{min-height:142px;padding:9px 2% 27px;border-radius:10px}
  body.battle-mode .arena-floor{bottom:22px;height:26px}
  body.battle-mode .fighter-token{width:54px;height:54px;font-size:25px;border-width:2px}
  body.battle-mode .fighter-name{font-size:9px;margin-top:4px}
  body.battle-mode .fighter-card{font-size:7px;margin-top:2px}
  body.battle-mode .vs{font-size:17px}
  body.battle-mode .battle-message{font-size:8px;bottom:5px}
  body.battle-mode .cards-panel{padding:5px 6px;border-radius:9px}
  body.battle-mode .cards-head{align-items:center;flex-direction:row}
  body.battle-mode .cards-head .section-label{font-size:7px;margin-bottom:1px}
  body.battle-mode .cards-head strong{font-size:10px}
  body.battle-mode .cards-head .hint{font-size:7px}
  body.battle-mode .hand{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-top:4px}
  body.battle-mode .card-btn{min-height:52px;padding:4px 5px;border-radius:8px}
  body.battle-mode .card-level{font-size:18px}
  body.battle-mode .card-kind{font-size:7px;letter-spacing:0}
  body.battle-mode .card-part{font-size:7px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.battle-mode .empty-hand{padding:7px;font-size:8px}
  body.battle-mode .fight-zone{display:grid;grid-template-columns:1fr;gap:2px}
  body.battle-mode .fight-btn{min-height:40px;border-radius:9px;font-size:13px}
  body.battle-mode .selection-summary,body.battle-mode .waiting-text{font-size:8px;min-height:10px;text-align:center}
  body.battle-mode .round-result{font-size:clamp(34px,14vw,58px)}
}

/* Móviles realmente estrechos: conservar legibilidad y cero overflow horizontal. */
@media (max-width:360px){
  body.battle-mode .side-title small{display:none}
  body.battle-mode .axie-meta{display:none}
  body.battle-mode .card-part{display:none}
  body.battle-mode .fighter-token{width:48px;height:48px;font-size:22px}
  body.battle-mode .arena{min-height:128px}
}

/* ==========================================================
   V0.4 — RONIN WALLET + AXIES REALES
   ========================================================== */
.wallet-box{max-width:420px;margin:18px auto 4px;padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:#0f1420;text-align:left;transition:.2s}
.wallet-box.connected{border-color:#2f82cc;box-shadow:inset 0 0 0 1px rgba(54,155,255,.13)}
.wallet-box.loading{opacity:.82}
.wallet-line{display:flex;align-items:center;gap:8px;font-size:13px}
.wallet-dot{width:9px;height:9px;border-radius:50%;background:#5e687c;box-shadow:0 0 0 3px rgba(94,104,124,.12)}
.wallet-box.connected .wallet-dot{background:#2c9fff;box-shadow:0 0 0 3px rgba(44,159,255,.16)}
.wallet-box.loading .wallet-dot{background:var(--gold);animation:pulse .55s infinite alternate}
.wallet-address,.wallet-count{color:var(--muted);font-size:11px;margin-top:4px;font-variant-numeric:tabular-nums}
.wallet-actions{flex-wrap:wrap}.btn-ronin{border-color:#238bd4;background:linear-gradient(180deg,#167ac4,#095d9f);color:#fff}

.real-axie-grid{grid-template-columns:repeat(5,minmax(135px,1fr));max-height:56vh;overflow:auto;padding:4px 5px 4px 1px;align-items:stretch}
.real-axie-pick{min-height:162px;padding:8px;display:grid;grid-template-rows:1fr auto auto;gap:3px;text-align:center;overflow:hidden}
.real-axie-pick:disabled{opacity:.42;cursor:not-allowed}
.real-pick-image{display:grid;place-items:center;min-height:92px;overflow:hidden}
.real-pick-image img{width:100%;height:102px;object-fit:contain;display:block;filter:drop-shadow(0 10px 12px rgba(0,0,0,.28))}
.real-axie-pick strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.real-axie-pick small{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picked-real{display:flex;align-items:center;gap:8px;min-width:0}.picked-real img{width:46px;height:46px;object-fit:contain;flex:0 0 auto}.picked-real span{min-width:0}.picked-real b,.picked-real small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.axie-image-wrap{display:inline-grid!important;place-items:center!important;width:34px;height:34px;margin-right:5px;vertical-align:middle;overflow:hidden;border-radius:50%;background:rgba(255,255,255,.04)}
.axie-image-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.fighter-token.has-image{background:radial-gradient(circle at 50% 62%,rgba(255,255,255,.08),rgba(15,20,31,.15));border-radius:50%;overflow:visible}
.fighter-image{width:132%;height:132%;object-fit:contain;display:block;filter:drop-shadow(0 14px 14px rgba(0,0,0,.42));pointer-events:none}

@media(max-width:1100px){.real-axie-grid{grid-template-columns:repeat(4,minmax(120px,1fr))}}
@media(max-width:820px){.real-axie-grid{grid-template-columns:repeat(3,minmax(110px,1fr));max-height:52vh}.real-axie-pick{min-height:145px}.real-pick-image img{height:86px}}
@media(max-width:520px){.wallet-actions{display:grid;grid-template-columns:1fr}.wallet-actions .btn{width:100%}.real-axie-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:50vh}.real-axie-pick{min-height:132px}.real-pick-image{min-height:72px}.real-pick-image img{height:76px}.picked-real img{width:34px;height:34px}}

/* En combate compacto, el Axie real reemplaza al emoji sin ganar altura. */
body.battle-mode .axie-image-wrap{width:clamp(24px,2.3vw,34px);height:clamp(24px,2.3vw,34px)}
body.battle-mode .fighter-token.has-image{font-size:0}


/* A009 · Mixer Preview Selector */
.wallet-picker-tools{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto minmax(250px,auto);
  align-items:end;
  gap:12px;
  margin:16px 0 2px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#101521;
}
.wallet-search{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.08em}
.wallet-search input{
  width:100%;height:40px;padding:0 12px;border:1px solid #35425b;border-radius:10px;
  background:#0d1422;color:var(--text);outline:none
}
.wallet-search input:focus{border-color:#5dafff;box-shadow:0 0 0 2px rgba(93,175,255,.12)}
.wallet-page-controls{display:flex;align-items:center;gap:8px;height:40px}
.wallet-page-controls strong{min-width:160px;text-align:center;font-size:12px;color:var(--muted)}
.mini-nav{width:38px;height:38px;border:1px solid #3c4962;border-radius:9px;background:#172033;color:#fff;font-weight:900;cursor:pointer}
.mini-nav:disabled{opacity:.35;cursor:not-allowed}
.wallet-preview-status{align-self:center;text-align:right;color:var(--muted);font-size:11px;line-height:1.3}

.real-axie-grid{grid-template-columns:repeat(5,minmax(145px,1fr));max-height:none;overflow:visible;padding:4px 1px;align-items:stretch}
.real-axie-pick{min-height:186px;position:relative}
.real-axie-pick:disabled{opacity:.52}
.real-pick-image{display:grid;place-items:center;min-height:112px;overflow:hidden}
.axie-preview-slot{
  position:relative;display:grid;place-items:center;width:100%;height:112px;overflow:hidden;
  border-radius:10px;background:radial-gradient(circle at 50% 62%,#26344b 0,#131c2e 55%,#0e1523 100%)
}
.axie-preview-slot img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 9px 10px rgba(0,0,0,.28))}
.preview-fallback{font-size:28px;opacity:.82}
.preview-spinner{
  position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.16);
  border-top-color:#69baff;animation:a009spin .8s linear infinite;opacity:0
}
.axie-preview-slot.is-loading .preview-spinner{opacity:1}
.axie-preview-slot.is-loading .preview-fallback{opacity:.3}
.axie-preview-slot.is-ready .preview-fallback,.axie-preview-slot.is-ready .preview-spinner{display:none}
.axie-preview-slot.is-error .preview-spinner{display:none}
@keyframes a009spin{to{transform:rotate(360deg)}}

.compact-preview{width:48px;height:48px;min-width:48px;border-radius:9px}
.compact-preview .preview-fallback{font-size:18px}
.picked-real{display:flex;align-items:center;gap:8px;min-width:0}
.picked-real .compact-preview img{width:100%;height:100%;object-fit:contain}
.wallet-empty{grid-column:1/-1;padding:32px;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}

@media(max-width:1100px){
  .wallet-picker-tools{grid-template-columns:1fr auto}.wallet-preview-status{grid-column:1/-1;text-align:left}
  .real-axie-grid{grid-template-columns:repeat(4,minmax(125px,1fr))}
}
@media(max-width:820px){
  .wallet-picker-tools{grid-template-columns:1fr}.wallet-page-controls{justify-content:space-between}
  .wallet-page-controls strong{flex:1}.real-axie-grid{grid-template-columns:repeat(3,minmax(110px,1fr))}
  .real-axie-pick{min-height:165px}.real-pick-image,.axie-preview-slot{min-height:94px;height:94px}
}
@media(max-width:520px){
  .real-axie-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .real-axie-pick{min-height:148px}.real-pick-image,.axie-preview-slot{min-height:80px;height:80px}
}


/* ==========================================================
   A009R1 · SELECTOR PRO + FILTROS + EQUIPO LATERAL
   ========================================================== */
.wallet-filters{
  margin:12px 0 14px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#0f1522;
}
.filter-section{display:grid;gap:8px}
.filter-caption,.part-filter-field>span{
  color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.09em
}
.wallet-class-tabs{
  display:flex;gap:6px;overflow-x:auto;padding:1px 1px 5px;scrollbar-width:thin
}
.wallet-class-tab{
  flex:0 0 auto;min-height:34px;padding:0 11px;border:1px solid #35445f;border-radius:9px;
  background:#151e30;color:#cbd5e6;font-size:11px;font-weight:800;cursor:pointer
}
.wallet-class-tab:hover{border-color:#58749b}
.wallet-class-tab.active{
  color:#07111d;background:#f0b63d;border-color:#f0b63d;box-shadow:0 0 0 2px rgba(240,182,61,.10)
}
.parts-filter-grid{
  display:grid;grid-template-columns:190px minmax(240px,1fr) auto;gap:10px;align-items:end;margin-top:11px
}
.part-filter-field{display:grid;gap:5px}
.part-filter-field input,.part-filter-field select{
  width:100%;height:38px;border:1px solid #35425b;border-radius:9px;background:#0c1422;color:#fff;padding:0 10px;outline:none
}
.part-filter-field input:focus,.part-filter-field select:focus{border-color:#5dafff;box-shadow:0 0 0 2px rgba(93,175,255,.10)}
.filter-reset{
  height:38px;padding:0 12px;border:1px solid #46536b;border-radius:9px;background:#1a2335;color:#dfe7f3;
  font-size:10px;font-weight:900;cursor:pointer
}
.filter-reset:hover{border-color:#697891}

.picker-layout{display:block}
.picker-layout.wallet-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start
}
.picker-main{min-width:0}
.team-sidebar{margin-top:22px}
.wallet-team-sidebar{
  position:sticky;top:14px;margin-top:4px;padding:14px;min-height:420px
}
.team-sidebar-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.team-sidebar-hint{margin:5px 0 0;color:var(--muted);font-size:11px}
.wallet-team-sidebar .picked-team{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
.team-slot{
  position:relative;min-height:86px;padding:9px 9px 9px 34px!important;border:1px solid #2f3f5a;border-radius:12px;background:#151d2d!important
}
.team-slot.empty{
  display:flex;align-items:center;color:#7788a4;border-style:dashed;background:#0d1421!important
}
.team-slot-number{
  position:absolute;left:9px;top:10px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:#26344b;color:#fff;font-size:10px;font-weight:900
}
.team-slot-empty{font-size:11px}
.wallet-team-sidebar .picked-real{padding-right:0;min-width:0}
.wallet-team-sidebar .compact-preview{width:58px;height:58px;min-width:58px;background:transparent}
.wallet-team-sidebar .pick-actions{
  width:100%;display:grid;grid-template-columns:34px 34px 1fr;gap:5px;margin-top:7px
}
.wallet-team-sidebar .pick-actions button{width:auto;height:30px}
.wallet-team-sidebar .remove-pick{
  padding:0 8px!important;color:#ffd1d1!important;border-color:#6b3840!important;background:#2b1820!important;font-size:10px;font-weight:900
}
.team-sidebar-actions{display:grid;gap:8px;margin-top:12px}
.team-clear-btn{width:100%;background:#172033;color:#cbd5e6;border:1px solid #3b4962}
.wallet-team-sidebar #readyBtn{margin:0}
.wallet-team-sidebar #lobbyError{margin-bottom:0}

.wallet-picker-tools{
  grid-template-columns:minmax(260px,1fr) auto minmax(230px,auto);
}
.real-axie-grid{
  grid-template-columns:repeat(4,minmax(145px,1fr));
  gap:9px;margin:4px 0 0;max-height:none;overflow:visible
}
.real-axie-pick{
  min-height:205px;padding:9px;grid-template-rows:132px auto auto;gap:4px
}
.real-pick-image{min-height:132px;height:132px;overflow:hidden}
.axie-preview-slot{
  height:132px;min-height:132px;padding:5px;background:radial-gradient(circle at 50% 56%,#26344b 0,#131c2e 58%,#0e1523 100%)
}
/* Important: override legacy descendant height rules. */
.real-pick-image .axie-preview-slot img,
.axie-preview-slot img{
  width:100%!important;height:100%!important;max-width:100%;max-height:100%;
  object-fit:contain!important;object-position:center center!important
}
.real-axie-pick strong{font-size:12px}
.real-axie-pick small{font-size:9px}
.real-axie-pick:disabled{opacity:.58}
.real-axie-pick:disabled::after{
  content:"EN EQUIPO";position:absolute;top:8px;right:8px;padding:4px 6px;border-radius:999px;
  background:#10273b;color:#72c7ff;border:1px solid #285477;font-size:8px;font-weight:900
}

@media(max-width:1250px){
  .picker-layout.wallet-layout{grid-template-columns:minmax(0,1fr) 300px}
  .real-axie-grid{grid-template-columns:repeat(3,minmax(135px,1fr))}
  .parts-filter-grid{grid-template-columns:170px 1fr auto}
}
@media(max-width:980px){
  .picker-layout.wallet-layout{grid-template-columns:1fr}
  .wallet-team-sidebar{position:static;order:2;min-height:0}
  .picker-main{order:1}
  .wallet-team-sidebar .picked-team{grid-template-columns:repeat(3,minmax(0,1fr))}
  .team-slot{min-height:112px}
  .wallet-picker-tools{grid-template-columns:1fr auto}
  .wallet-preview-status{grid-column:1/-1;text-align:left}
}
@media(max-width:760px){
  .parts-filter-grid{grid-template-columns:1fr 1fr}.filter-reset{grid-column:1/-1}
  .real-axie-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wallet-team-sidebar .picked-team{grid-template-columns:1fr}
  .real-axie-pick{min-height:186px;grid-template-rows:116px auto auto}
  .real-pick-image,.axie-preview-slot{height:116px!important;min-height:116px!important}
}
@media(max-width:520px){
  .wallet-picker-tools{grid-template-columns:1fr}
  .parts-filter-grid{grid-template-columns:1fr}
  .filter-reset{grid-column:auto}
  .wallet-class-tabs{margin-right:-4px}
  .real-axie-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .real-axie-pick{min-height:162px;grid-template-rows:92px auto auto}
  .real-pick-image,.axie-preview-slot{height:92px!important;min-height:92px!important}
  .wallet-team-sidebar{padding:12px}
}


/* ==========================================================
   A009R2 · COMPACT FULLSCREEN LOBBY + SIDEBAR FIX
   ========================================================== */

/* Aprovecha mejor el ancho disponible sin alterar el combate. */
body:not(.battle-mode) .app{
  width:min(1720px,calc(100% - 18px));
  padding-top:10px;
}

/* Cabecera del selector más baja/compacta. */
#lobby.panel{
  padding:18px 20px 20px;
}
#lobby .topline{
  min-height:0;
  align-items:center;
}
#lobby .topline h2{
  margin:1px 0 0;
  font-size:26px;
  line-height:1.02;
}
#lobby .eyebrow{
  margin:1px 0 5px;
  line-height:1;
}
#lobbyHint{
  margin:7px 0 9px;
  line-height:1.25;
}

/* Buscador y filtros más compactos para que el equipo lateral quepa en la primera pantalla. */
#lobby .wallet-picker-tools{
  margin:8px 0 0;
  padding:9px 11px;
  gap:9px;
}
#lobby .wallet-search input{
  height:36px;
}
#lobby .wallet-page-controls{
  height:36px;
}
#lobby .mini-nav{
  width:36px;
  height:36px;
}
#lobby .wallet-filters{
  margin:8px 0 10px;
  padding:9px 11px;
}
#lobby .wallet-class-tabs{
  gap:5px;
  padding-bottom:3px;
}
#lobby .wallet-class-tab{
  min-height:30px;
  padding:0 9px;
  font-size:10px;
}
#lobby .parts-filter-grid{
  margin-top:7px;
  gap:8px;
}
#lobby .part-filter-field input,
#lobby .part-filter-field select,
#lobby .filter-reset{
  height:34px;
}

/* Layout: columna derecha estable y sin desbordamiento. */
#lobby .picker-layout.wallet-layout{
  grid-template-columns:minmax(0,1fr) 304px;
  gap:12px;
}
#lobby .wallet-team-sidebar{
  position:sticky;
  top:8px;
  width:100%;
  min-width:0;
  min-height:0;
  margin-top:0;
  padding:11px;
  overflow:hidden;
}
#lobby .team-sidebar-head{
  margin-bottom:6px;
}
#lobby .team-sidebar-hint{
  margin:3px 0 0;
  line-height:1.2;
}
#lobby .wallet-team-sidebar .picked-team{
  gap:6px;
  margin-top:6px;
}

/* Corrige el problema principal: .picked heredaba display:flex y empujaba acciones fuera del panel. */
#lobby .wallet-team-sidebar .team-slot.picked{
  display:block !important;
  width:100%;
  min-width:0;
}
#lobby .team-slot{
  min-height:70px;
  padding:7px 7px 7px 30px!important;
  overflow:hidden;
}
#lobby .team-slot.empty{
  min-height:58px;
}
#lobby .team-slot-number{
  left:7px;
  top:8px;
  width:17px;
  height:17px;
}

/* Axie seleccionado: miniatura visible, nombre limpio y sin salirse. */
#lobby .wallet-team-sidebar .picked-real{
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
}
#lobby .wallet-team-sidebar .compact-preview{
  width:62px;
  height:52px;
  min-width:62px;
  border-radius:8px;
  background:radial-gradient(circle at 50% 56%,#26344b 0,#131c2e 62%,#0e1523 100%);
}
#lobby .wallet-team-sidebar .compact-preview img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
#lobby .picked-real-copy{
  display:block;
  min-width:0;
}
#lobby .picked-real-copy b{
  display:block;
  max-width:100%;
  margin:0 0 2px;
  font-size:11px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#lobby .picked-real-copy small{
  display:block;
  max-width:100%;
  font-size:9px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#lobby .sidebar-vanguard{
  display:inline-block;
  margin-top:4px;
  padding:2px 5px;
  border-radius:999px;
  border:1px solid #6e5a27;
  background:#2b2415;
  color:#f3c75e;
  font-size:8px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.06em;
}

/* Acciones siempre dentro de la tarjeta. */
#lobby .wallet-team-sidebar .pick-actions{
  width:100%;
  display:grid;
  grid-template-columns:30px 30px minmax(0,1fr);
  gap:5px;
  margin-top:5px;
}
#lobby .wallet-team-sidebar .pick-actions button{
  width:100%;
  min-width:0;
  height:27px;
  padding:0;
}
#lobby .wallet-team-sidebar .remove-pick{
  padding:0 7px!important;
  white-space:nowrap;
}
#lobby .team-sidebar-actions{
  gap:6px;
  margin-top:8px;
}
#lobby .team-sidebar-actions .btn{
  min-height:34px;
  padding:8px 10px;
}
#lobby .wallet-team-sidebar #lobbyError{
  margin:6px 0 0;
  font-size:10px;
}

/* Ajuste moderado de cards para ganar altura útil sin empeorar previews. */
#lobby .real-axie-grid{
  gap:8px;
}
#lobby .real-axie-pick{
  min-height:190px;
  grid-template-rows:120px auto auto;
  padding:8px;
}
#lobby .real-pick-image,
#lobby .real-pick-image .axie-preview-slot{
  height:120px!important;
  min-height:120px!important;
}

/* Monitores grandes: sidebar un poco más ancho, pero siempre compacta. */
@media(min-width:1500px){
  #lobby .picker-layout.wallet-layout{
    grid-template-columns:minmax(0,1fr) 318px;
  }
}

/* Portátil / ventana más baja: la columna sigue completa y compacta. */
@media(min-width:981px) and (max-height:820px){
  #lobby.panel{padding-top:14px}
  #lobby .topline h2{font-size:24px}
  #lobbyHint{margin:5px 0 7px}
  #lobby .wallet-picker-tools{margin-top:6px;padding:7px 9px}
  #lobby .wallet-filters{margin:6px 0 8px;padding:7px 9px}
  #lobby .wallet-class-tab{min-height:28px}
  #lobby .part-filter-field input,
  #lobby .part-filter-field select,
  #lobby .filter-reset{height:32px}
  #lobby .team-slot{min-height:65px}
  #lobby .team-slot.empty{min-height:52px}
  #lobby .wallet-team-sidebar .compact-preview{width:56px;height:46px;min-width:56px}
  #lobby .wallet-team-sidebar .picked-real{grid-template-columns:56px minmax(0,1fr)}
}

/* Responsive existente: debajo de 980 px el equipo vuelve debajo del grid. */
@media(max-width:980px){
  body:not(.battle-mode) .app{width:min(100% - 12px,1500px)}
  #lobby .picker-layout.wallet-layout{grid-template-columns:1fr}
  #lobby .wallet-team-sidebar{
    position:static;
    overflow:visible;
  }
  #lobby .wallet-team-sidebar .picked-team{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:760px){
  #lobby .wallet-team-sidebar .picked-team{grid-template-columns:1fr}
  #lobby .real-axie-pick{
    min-height:176px;
    grid-template-rows:108px auto auto;
  }
  #lobby .real-pick-image,
  #lobby .real-pick-image .axie-preview-slot{
    height:108px!important;
    min-height:108px!important;
  }
}


/* ==========================================================
   A009R3 · RESTAURA ESCALA DE AXIES DEL GRID
   Mantiene cabecera compacta + sidebar A009R2.
   Solo recupera el encuadre/tamaño visual de A009R1.
   ========================================================== */

#lobby .real-axie-pick{
  min-height:205px;
  grid-template-rows:132px auto auto;
  padding:9px;
}

#lobby .real-pick-image,
#lobby .real-pick-image .axie-preview-slot{
  height:132px!important;
  min-height:132px!important;
}

#lobby .real-pick-image .axie-preview-slot img,
#lobby .axie-preview-slot img{
  width:100%!important;
  height:100%!important;
  max-width:100%;
  max-height:100%;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Responsive vuelve a la escala aprobada en A009R1. */
@media(max-width:760px){
  #lobby .real-axie-pick{
    min-height:186px;
    grid-template-rows:116px auto auto;
  }
  #lobby .real-pick-image,
  #lobby .real-pick-image .axie-preview-slot{
    height:116px!important;
    min-height:116px!important;
  }
}

@media(max-width:520px){
  #lobby .real-axie-pick{
    min-height:162px;
    grid-template-rows:92px auto auto;
  }
  #lobby .real-pick-image,
  #lobby .real-pick-image .axie-preview-slot{
    height:92px!important;
    min-height:92px!important;
  }
}


/* ==========================================================
   A009R4 · BARRA ÚNICA DE BÚSQUEDA + FILTROS + PAGINACIÓN
   ========================================================== */
#walletUnifiedBar.wallet-unified-bar{
  display:grid;
  grid-template-columns:
    minmax(260px,1.25fr)
    minmax(520px,2.3fr)
    128px
    minmax(190px,.9fr)
    72px
    auto
    minmax(120px,.6fr);
  gap:8px;
  align-items:end;
  margin:8px 0 10px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#0f1522;
}

#walletUnifiedBar.hidden{display:none!important}

#walletUnifiedBar .wallet-search,
#walletUnifiedBar .part-filter-field,
#walletUnifiedBar .unified-class-filter{
  min-width:0;
}

#walletUnifiedBar .wallet-search,
#walletUnifiedBar .part-filter-field{
  display:grid;
  gap:4px;
}

#walletUnifiedBar .wallet-search>span,
#walletUnifiedBar .part-filter-field>span,
#walletUnifiedBar .unified-label{
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  white-space:nowrap;
}

#walletUnifiedBar .unified-class-filter{
  display:grid;
  gap:4px;
}

#walletUnifiedBar .wallet-class-tabs{
  display:flex;
  gap:4px;
  overflow-x:auto;
  overflow-y:hidden;
  min-width:0;
  padding:0 0 2px;
  scrollbar-width:thin;
}

#walletUnifiedBar .wallet-class-tab{
  min-height:34px;
  height:34px;
  padding:0 8px;
  font-size:9px;
  border-radius:8px;
}

#walletUnifiedBar .wallet-search input,
#walletUnifiedBar .part-filter-field input,
#walletUnifiedBar .part-filter-field select{
  width:100%;
  height:34px;
  min-width:0;
  padding:0 9px;
  border:1px solid #35425b;
  border-radius:8px;
  background:#0c1422;
  color:#fff;
  outline:none;
}

#walletUnifiedBar .filter-reset{
  height:34px;
  padding:0 9px;
  border-radius:8px;
  align-self:end;
}

#walletUnifiedBar .wallet-page-controls{
  height:34px;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

#walletUnifiedBar .wallet-page-controls strong{
  min-width:100px;
  text-align:center;
  font-size:10px;
}

#walletUnifiedBar .mini-nav{
  width:34px;
  height:34px;
  border-radius:8px;
}

#walletUnifiedBar .wallet-preview-status{
  align-self:center;
  min-width:0;
  text-align:right;
  font-size:9px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Oculta definitivamente las superficies antiguas; se conservan solo por compatibilidad JS. */
#walletPickerTools,
#walletFilters{
  display:none!important;
}

/* 1600-1799: sigue siendo una sola fila, más comprimida. */
@media(min-width:1400px) and (max-width:1799px){
  #walletUnifiedBar.wallet-unified-bar{
    grid-template-columns:
      minmax(230px,1fr)
      minmax(440px,2fr)
      112px
      minmax(155px,.8fr)
      64px
      auto
      110px;
    gap:6px;
  }
  #walletUnifiedBar .wallet-class-tab{
    padding:0 7px;
    font-size:8.5px;
  }
  #walletUnifiedBar .wallet-page-controls strong{min-width:90px}
}

/* Debajo de 1400 px se permite envolver, para no romper responsive. */
@media(max-width:1399px){
  #walletUnifiedBar.wallet-unified-bar{
    grid-template-columns:minmax(220px,1fr) minmax(360px,1.8fr) 120px auto;
  }
  #walletUnifiedBar .unified-part-search{
    grid-column:1/3;
  }
  #walletUnifiedBar .unified-pagination{
    grid-column:3/4;
  }
  #walletUnifiedBar .unified-status{
    grid-column:4/5;
  }
}

@media(max-width:900px){
  #walletUnifiedBar.wallet-unified-bar{
    grid-template-columns:1fr 1fr;
  }
  #walletUnifiedBar .unified-search,
  #walletUnifiedBar .unified-class-filter{
    grid-column:1/-1;
  }
  #walletUnifiedBar .unified-part-search{
    grid-column:auto;
  }
  #walletUnifiedBar .unified-pagination,
  #walletUnifiedBar .unified-status{
    grid-column:1/-1;
  }
  #walletUnifiedBar .wallet-preview-status{
    text-align:left;
  }
}

@media(max-width:560px){
  #walletUnifiedBar.wallet-unified-bar{
    grid-template-columns:1fr;
  }
  #walletUnifiedBar .unified-search,
  #walletUnifiedBar .unified-class-filter,
  #walletUnifiedBar .unified-part-search,
  #walletUnifiedBar .unified-pagination,
  #walletUnifiedBar .unified-status{
    grid-column:auto;
  }
}


/* ==========================================================
   A009R5 · ORDEN FINAL DE BARRA
   Buscar Axie → Tipo parte → Buscar parte → Clase → Paginación
   Sin botón LIMPIAR. Búsqueda 100% dinámica.
   Mixer se muestra encima de paginación sin aumentar altura.
   ========================================================== */

#walletUnifiedBar.wallet-unified-bar{
  position:relative;
  display:grid;
  grid-template-columns:
    minmax(280px,1.15fr)
    118px
    minmax(220px,.90fr)
    minmax(560px,2.25fr)
    225px;
  gap:8px;
  align-items:end;
  margin:8px 0 10px;
  padding:8px 10px;
}

/* Orden físico exacto solicitado. */
#walletUnifiedBar .unified-search{grid-column:1}
#walletUnifiedBar .unified-part-type{grid-column:2}
#walletUnifiedBar .unified-part-search{grid-column:3}
#walletUnifiedBar .unified-class-filter{grid-column:4}
#walletUnifiedBar .unified-pagination-shell{grid-column:5}

/* Campos de la misma altura y etiquetas pequeñas arriba. */
#walletUnifiedBar .wallet-search,
#walletUnifiedBar .part-filter-field,
#walletUnifiedBar .unified-class-filter{
  min-width:0;
  display:grid;
  gap:4px;
}

#walletUnifiedBar .wallet-search>span,
#walletUnifiedBar .part-filter-field>span,
#walletUnifiedBar .unified-label{
  height:9px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:9px;
  white-space:nowrap;
}

#walletUnifiedBar .wallet-search input,
#walletUnifiedBar .part-filter-field input,
#walletUnifiedBar .part-filter-field select{
  height:34px;
  min-width:0;
}

/* Clases: todas visibles en desktop, sin la barra horizontal fea. */
#walletUnifiedBar .wallet-class-tabs{
  display:flex;
  gap:4px;
  min-width:0;
  height:34px;
  padding:0;
  overflow:hidden;
  scrollbar-width:none;
}
#walletUnifiedBar .wallet-class-tabs::-webkit-scrollbar{display:none}

#walletUnifiedBar .wallet-class-tab{
  flex:1 1 auto;
  min-width:0;
  height:34px;
  min-height:34px;
  padding:0 6px;
  font-size:8.5px;
  line-height:1;
  border-radius:8px;
  white-space:nowrap;
}

/* Paginación ocupa el mismo alto que el resto.
   Estado Mixer se superpone arriba como una micro-etiqueta. */
#walletUnifiedBar .unified-pagination-shell{
  position:relative;
  height:47px;
  min-width:0;
  align-self:end;
}

#walletUnifiedBar .unified-pagination-shell .wallet-preview-status{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:9px;
  margin:0;
  padding:0 2px;
  color:#8fa4c2;
  font-size:8px;
  line-height:9px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

#walletUnifiedBar .unified-pagination-shell .wallet-page-controls{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:34px;
  display:grid;
  grid-template-columns:34px minmax(120px,1fr) 34px;
  align-items:center;
  gap:5px;
}

#walletUnifiedBar .unified-pagination-shell .wallet-page-controls strong{
  min-width:0;
  width:100%;
  text-align:center;
  font-size:9.5px;
  white-space:nowrap;
}

#walletUnifiedBar .unified-pagination-shell .mini-nav{
  width:34px;
  height:34px;
}

/* El botón LIMPIAR ya no existe. */
#walletUnifiedBar .unified-clear,
#walletUnifiedBar .filter-reset{
  display:none!important;
}

/* Full desktop / laptop ancho: una sola fila. */
@media(min-width:1450px){
  #walletUnifiedBar.wallet-unified-bar{
    grid-template-columns:
      minmax(260px,1.10fr)
      112px
      minmax(190px,.82fr)
      minmax(520px,2.35fr)
      215px;
    gap:7px;
  }
}

/* A partir de 1750 damos más aire al buscador de parte y clases. */
@media(min-width:1750px){
  #walletUnifiedBar.wallet-unified-bar{
    grid-template-columns:
      minmax(300px,1.20fr)
      120px
      minmax(230px,.95fr)
      minmax(620px,2.55fr)
      225px;
  }
  #walletUnifiedBar .wallet-class-tab{
    padding:0 7px;
    font-size:9px;
  }
}

/* Por debajo de 1450 sí se reorganiza para no romper el responsive. */
@media(max-width:1449px){
  #walletUnifiedBar.wallet-unified-bar{
    grid-template-columns:minmax(240px,1fr) 120px minmax(220px,1fr) minmax(0,1.6fr);
  }
  #walletUnifiedBar .unified-search{grid-column:1}
  #walletUnifiedBar .unified-part-type{grid-column:2}
  #walletUnifiedBar .unified-part-search{grid-column:3}
  #walletUnifiedBar .unified-class-filter{grid-column:4}
  #walletUnifiedBar .unified-pagination-shell{
    grid-column:1/-1;
    width:230px;
    justify-self:end;
    margin-top:2px;
  }
}

@media(max-width:950px){
  /* Mobile/tablet: una sola barra compacta. El buscador general ya encuentra
     nombre, ID, clase Y partes; los dos filtros de parte duplicados no ocupan
     altura en móvil. */
  #walletUnifiedBar.wallet-unified-bar{
    grid-template-columns:minmax(92px,.9fr) minmax(0,1.35fr) 94px;
    gap:4px;
    align-items:center;
    margin:3px 0 5px;
    padding:4px 5px;
    border-radius:9px;
  }
  #walletUnifiedBar .unified-search{grid-column:1}
  #walletUnifiedBar .unified-part-type,
  #walletUnifiedBar .unified-part-search{display:none!important}
  #walletUnifiedBar .unified-class-filter{grid-column:2;gap:0}
  #walletUnifiedBar .unified-pagination-shell{grid-column:3;width:94px;height:28px;margin:0}
  #walletUnifiedBar .wallet-search>span,
  #walletUnifiedBar .unified-label,
  #walletUnifiedBar .wallet-preview-status{display:none!important}
  #walletUnifiedBar .wallet-search{gap:0}
  #walletUnifiedBar .wallet-search input{height:28px;padding:0 7px;font-size:8px;border-radius:7px}
  #walletUnifiedBar .wallet-class-tabs{height:28px;gap:3px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  #walletUnifiedBar .wallet-class-tab{flex:0 0 auto;height:28px;min-height:28px;padding:0 6px;font-size:7px;border-radius:7px}
  #walletUnifiedBar .unified-pagination-shell .wallet-page-controls{
    position:static;height:28px;grid-template-columns:24px minmax(38px,1fr) 24px;gap:3px;
  }
  #walletUnifiedBar .unified-pagination-shell .wallet-page-controls strong{font-size:6.5px;line-height:1;overflow:hidden;text-overflow:ellipsis}
  #walletUnifiedBar .unified-pagination-shell .mini-nav{width:24px;height:28px;border-radius:6px;font-size:8px}
}

@media(max-width:380px){
  #walletUnifiedBar.wallet-unified-bar{grid-template-columns:88px minmax(0,1fr) 88px;padding:4px;gap:3px}
  #walletUnifiedBar .unified-pagination-shell{width:88px}
  #walletUnifiedBar .wallet-class-tab{padding:0 5px;font-size:6.5px}
}


/* ==========================================================
   A009R6 · TU EQUIPO COMPACTO
   Corrige previews heredando min-height 132px del grid general.
   ========================================================== */

/* Columna derecha más compacta. */
#lobby .wallet-team-sidebar{
  padding:9px;
}

#lobby .team-sidebar-head{
  margin-bottom:4px;
}

#lobby .team-sidebar-hint{
  margin:2px 0 0;
  font-size:10px;
}

#lobby .wallet-team-sidebar .picked-team{
  gap:5px;
  margin-top:5px;
}

/* Cada Axie seleccionado pasa a ser una fila compacta. */
#lobby .wallet-team-sidebar .team-slot.picked{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 86px;
  align-items:center;
  gap:7px;
  width:100%;
  min-width:0;
  min-height:76px;
  padding:6px 7px 6px 28px!important;
}

#lobby .team-slot.empty{
  min-height:48px;
  padding-top:5px!important;
  padding-bottom:5px!important;
}

#lobby .team-slot-number{
  left:6px;
  top:7px;
  width:17px;
  height:17px;
}

/* Preview real: resetea explícitamente el min-height 132px del grid. */
#lobby .wallet-team-sidebar .compact-preview,
#lobby .wallet-team-sidebar .axie-preview-slot.compact-preview{
  width:66px!important;
  height:56px!important;
  min-width:66px!important;
  min-height:0!important;
  max-height:56px!important;
  padding:1px!important;
  border-radius:8px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 58%,#26344b 0,#131c2e 62%,#0e1523 100%);
}

#lobby .wallet-team-sidebar .compact-preview img,
#lobby .wallet-team-sidebar .axie-preview-slot.compact-preview img{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:56px!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Imagen + datos en una sola zona limpia. */
#lobby .wallet-team-sidebar .picked-real{
  display:grid;
  grid-template-columns:66px minmax(0,1fr);
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
}

#lobby .picked-real-copy{
  min-width:0;
}

#lobby .picked-real-copy b{
  margin:0 0 2px;
  font-size:10.5px;
  line-height:1.1;
}

#lobby .picked-real-copy small{
  font-size:8.5px;
  line-height:1.1;
}

#lobby .sidebar-vanguard{
  margin-top:3px;
  padding:2px 5px;
  font-size:7.5px;
}

/* Acciones ocupan solo 86px y no hacen crecer la tarjeta. */
#lobby .wallet-team-sidebar .pick-actions{
  display:grid;
  grid-template-columns:40px 40px;
  grid-template-rows:25px 27px;
  gap:4px;
  width:86px;
  margin:0;
  align-self:center;
}

#lobby .wallet-team-sidebar .pick-actions button{
  width:40px;
  height:25px;
  min-width:0;
  padding:0;
  border-radius:7px;
  font-size:11px;
}

#lobby .wallet-team-sidebar .remove-pick{
  grid-column:1 / -1;
  width:84px!important;
  height:27px!important;
  padding:0 6px!important;
  font-size:9px!important;
}

/* Acciones generales compactas; con 3 Axies deben quedar visibles. */
#lobby .team-sidebar-actions{
  gap:5px;
  margin-top:7px;
}

#lobby .team-sidebar-actions .btn{
  min-height:31px;
  padding:6px 9px;
  font-size:10px;
}

/* En pantallas bajas compactamos un poco más sin perder legibilidad. */
@media(min-width:981px) and (max-height:800px){
  #lobby .wallet-team-sidebar .team-slot.picked{
    min-height:70px;
    padding-top:5px!important;
    padding-bottom:5px!important;
  }

  #lobby .wallet-team-sidebar .compact-preview,
  #lobby .wallet-team-sidebar .axie-preview-slot.compact-preview{
    width:60px!important;
    height:50px!important;
    min-width:60px!important;
    max-height:50px!important;
  }

  #lobby .wallet-team-sidebar .compact-preview img,
  #lobby .wallet-team-sidebar .axie-preview-slot.compact-preview img{
    max-height:50px!important;
  }

  #lobby .wallet-team-sidebar .picked-real{
    grid-template-columns:60px minmax(0,1fr);
  }
}

/* Responsive: cuando la columna baja debajo, conserva tarjetas compactas. */
@media(max-width:980px){
  #lobby .wallet-team-sidebar .team-slot.picked{
    min-height:74px;
  }
}


/* ==========================================================
   A009R7 · ESTADO "EN EQUIPO" CORRECTO
   Solo los 3 Axies seleccionados muestran el badge.
   Los demás quedan bloqueados al llegar a 3/3, pero no se
   presentan como si estuvieran seleccionados.
   ========================================================== */

/* Neutraliza la regla antigua basada únicamente en :disabled. */
#lobby .real-axie-pick:disabled::after{
  content:none!important;
}

/* Solo un Axie realmente elegido lleva el badge. */
#lobby .real-axie-pick.in-team::after{
  content:"EN EQUIPO";
  position:absolute;
  top:8px;
  right:8px;
  padding:4px 6px;
  border-radius:999px;
  background:#10273b;
  color:#72c7ff;
  border:1px solid #285477;
  font-size:8px;
  font-weight:900;
}

/* El seleccionado sí puede verse discretamente marcado. */
#lobby .real-axie-pick.in-team:disabled{
  opacity:.62;
}

/* Equipo lleno: los Axies no seleccionados conservan su aspecto normal. */
#lobby .real-axie-pick.team-full:disabled{
  opacity:1!important;
  cursor:not-allowed;
  filter:none!important;
}

/* Al pasar sobre una tarjeta bloqueada por 3/3 no fingimos interacción. */
#lobby .real-axie-pick.team-full:disabled:hover{
  transform:none!important;
  box-shadow:none!important;
}


/* ==========================================================
   A010 · ARENA REAL
   A009R7 selector queda congelado. Todo lo siguiente está
   encapsulado en battle-mode.
   ========================================================== */

body.battle-mode .battle-header{
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}

body.battle-mode .opponent-section,
body.battle-mode .own-section,
body.battle-mode .cards-panel{
  background:linear-gradient(180deg,rgba(20,28,43,.96),rgba(12,18,29,.96));
}

/* Team cards: actual Mixer Axie instead of broken external PNG. */
body.battle-mode .side-team .axie-card{
  display:grid;
  grid-template-columns:clamp(58px,5.8vw,86px) minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:clamp(7px,.7vw,10px);
  align-content:center;
}

body.battle-mode .side-team .battle-team-preview,
body.battle-mode .side-team .battle-team-fallback,
body.battle-mode .side-team .battle-team-icon{
  grid-column:1;
  grid-row:1 / 4;
  width:clamp(58px,5.8vw,86px)!important;
  height:clamp(52px,5vw,76px)!important;
  min-width:0!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  align-self:center;
  border-radius:10px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 58%,#26344b 0,#131c2e 64%,#0e1523 100%);
}

body.battle-mode .side-team .battle-team-preview img,
body.battle-mode .side-team .battle-team-fallback img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:drop-shadow(0 8px 7px rgba(0,0,0,.30));
}

body.battle-mode .side-team .battle-team-icon{
  display:grid;
  place-items:center;
  font-size:28px;
}

body.battle-mode .side-team .axie-name,
body.battle-mode .side-team .axie-meta{
  grid-column:2;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.battle-mode .side-team .axie-name{
  grid-row:1;
  align-self:end;
}

body.battle-mode .side-team .axie-meta{
  grid-row:auto;
}

body.battle-mode .battle-card-count{
  color:#8fb5dd;
}

body.battle-mode .own-section .axie-card.selected{
  background:linear-gradient(180deg,#293145,#182235);
  box-shadow:inset 0 3px 0 var(--family),0 0 0 2px rgba(242,196,91,.16);
}

/* Arena fighter: large real Mixer Axies. */
body.battle-mode .fighter-token.mixer-fighter-token{
  width:clamp(150px,18vw,270px)!important;
  height:clamp(130px,16vw,235px)!important;
  max-width:42vw;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

body.battle-mode .battle-fighter-preview{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
}

body.battle-mode .battle-fighter-preview img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.46));
}

/* Axies originales miran hacia la derecha; el jugador a la derecha mira al centro. */
body.battle-mode .fighter-right .battle-fighter-preview img{
  transform:scaleX(-1);
}

body.battle-mode .battle-fighter-fallback{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
}
body.battle-mode .battle-fighter-fallback img{
  width:100%;
  height:100%;
  object-fit:contain;
}
body.battle-mode .battle-fighter-icon{
  font-size:clamp(48px,6vw,84px);
}

/* Cards = 3 visible real-part cards; one use, then burned. */
body.battle-mode .card-btn{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto auto;
  align-content:center;
}

body.battle-mode .card-kind{grid-column:1;grid-row:1}
body.battle-mode .card-level{grid-column:2;grid-row:1 / 3}
body.battle-mode .card-part{
  grid-column:1;
  grid-row:2;
  min-width:0;
}
body.battle-mode .card-part strong{
  color:var(--text);
}
body.battle-mode .card-burn{
  grid-column:1 / -1;
  grid-row:3;
  display:block;
  margin-top:4px;
  color:#7f8da6;
  font-size:8px;
  font-weight:800;
  letter-spacing:.04em;
}

body.battle-mode .card-btn.selected .card-burn{
  color:#d6b75f;
}

/* Selection has more presence, button remains final action. */
body.battle-mode .fight-btn:not(:disabled){
  box-shadow:0 12px 30px rgba(214,154,44,.24),inset 0 1px 0 rgba(255,255,255,.32);
}

body.battle-mode .waiting-text{
  color:#78dca3;
}

/* Laptop-height tuning with real Axies. */
@media(min-width:1000px) and (max-height:780px){
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon{
    width:58px!important;
    height:48px!important;
  }

  body.battle-mode .side-team .axie-card{
    grid-template-columns:58px minmax(0,1fr);
  }

  body.battle-mode .fighter-token.mixer-fighter-token{
    width:clamp(130px,15vw,210px)!important;
    height:clamp(112px,13vw,180px)!important;
  }
}

/* Tablet: keep both 3-Axie teams legible. */
@media(min-width:600px) and (max-width:999px){
  body.battle-mode .side-team .axie-card{
    display:block;
    text-align:center;
  }
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon{
    width:54px!important;
    height:44px!important;
    margin:0 auto 3px;
  }
  body.battle-mode .side-team .axie-name,
  body.battle-mode .side-team .axie-meta{
    display:block;
  }
  body.battle-mode .fighter-token.mixer-fighter-token{
    width:128px!important;
    height:108px!important;
  }
}

/* Mobile: compact but keep real art. */
@media(max-width:599px){
  body.battle-mode .side-team .axie-card{
    grid-template-columns:40px minmax(0,1fr);
    column-gap:4px;
  }
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon{
    width:40px!important;
    height:34px!important;
    border-radius:6px;
  }
  body.battle-mode .fighter-token.mixer-fighter-token{
    width:92px!important;
    height:78px!important;
  }
  body.battle-mode .card-burn{display:none}
}


/* ==========================================================
   A010R1 · ARENA ANIMADA
   Solo modifica la arena. A009R7 sigue congelado.
   ========================================================== */

/* Más grandes en sus puestos laterales */
body.battle-mode .side-team .battle-team-preview,
body.battle-mode .side-team .battle-team-fallback,
body.battle-mode .side-team .battle-team-icon{
  width:clamp(72px,6.8vw,104px)!important;
  height:clamp(62px,5.9vw,90px)!important;
}
body.battle-mode .side-team .axie-card{
  grid-template-columns:clamp(72px,6.8vw,104px) minmax(0,1fr);
}

/* Más presencia en el centro */
body.battle-mode .fighter-token.mixer-fighter-token{
  width:clamp(190px,21vw,320px)!important;
  height:clamp(165px,18.5vw,275px)!important;
  transform-origin:50% 84%;
  will-change:transform,filter;
}

/* Idle: parece preparado para salir */
@keyframes axieBattleIdle{
  0%,100%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-4px) scale(1.025)}
  62%{transform:translateY(-1px) translateX(3px) scale(1.018)}
  80%{transform:translateY(-3px) scale(1.03)}
}
body.battle-mode .fighter-token.mixer-fighter-token:not(.fx-ready):not(.fx-hit):not(.fx-win):not(.fx-tie){
  animation:axieBattleIdle 1.45s ease-in-out infinite;
}

/* Seleccionado: nervio/agresividad antes de A PELEAR */
@keyframes axieReady{
  0%,100%{transform:translate(0,0) rotate(0) scale(1.03)}
  25%{transform:translate(-3px,-4px) rotate(-1deg) scale(1.06)}
  50%{transform:translate(-7px,-2px) rotate(1deg) scale(1.075)}
  75%{transform:translate(-2px,-5px) rotate(-.7deg) scale(1.055)}
}
body.battle-mode .fighter-right .fighter-token.fx-ready{
  animation:axieReady .88s ease-in-out infinite;
}

/* Recibe golpe: retroceso y sacudida */
@keyframes axieHit{
  0%{transform:translateX(0) scale(1.06);filter:brightness(1)}
  12%{transform:translateX(-16px) scale(.96);filter:brightness(1.5)}
  26%{transform:translateX(10px) scale(1.02);filter:brightness(.86)}
  42%{transform:translateX(-7px) rotate(-2deg)}
  62%{transform:translateX(4px) rotate(1deg)}
  82%{transform:translateX(-2px)}
  100%{transform:translateX(0) scale(1);filter:brightness(1)}
}
body.battle-mode .fighter-token.fx-hit{
  animation:axieHit .72s cubic-bezier(.18,.9,.2,1) 1;
}

/* Gana: pequeño salto de victoria */
@keyframes axieWin{
  0%{transform:translateY(0) scale(1)}
  32%{transform:translateY(-18px) scale(1.12)}
  52%{transform:translateY(-5px) scale(1.06)}
  70%{transform:translateY(-12px) scale(1.09)}
  100%{transform:translateY(0) scale(1.03)}
}
body.battle-mode .fighter-token.fx-win{
  animation:axieWin .95s cubic-bezier(.2,.82,.2,1) 1;
}

/* Empate: tiembla como si no quisiera volver a salir */
@keyframes axieTieFear{
  0%,100%{transform:translate(0,0) rotate(0) scale(1.01)}
  10%{transform:translate(-4px,1px) rotate(-1.4deg)}
  20%{transform:translate(4px,-1px) rotate(1.2deg)}
  30%{transform:translate(-5px,0) rotate(-1.1deg)}
  40%{transform:translate(5px,1px) rotate(1.4deg)}
  50%{transform:translate(-3px,-1px) rotate(-.8deg)}
  60%{transform:translate(3px,0) rotate(.9deg)}
  70%{transform:translate(-4px,1px) rotate(-1.1deg)}
  80%{transform:translate(4px,-1px) rotate(1.1deg)}
  90%{transform:translate(-2px,0) rotate(-.5deg)}
}
body.battle-mode .fighter-token.fx-tie{
  animation:axieTieFear .78s linear infinite;
}

/* Impacto ambiental */
body.battle-mode .arena-center{
  position:relative;
  overflow:hidden;
}
body.battle-mode .arena-center::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:150px;
  height:150px;
  transform:translate(-50%,-50%) scale(.3);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,220,118,.28) 0,rgba(255,220,118,.10) 38%,transparent 72%);
  opacity:0;
  pointer-events:none;
}
body.battle-mode .arena-center:has(.fx-hit)::after,
body.battle-mode .arena-center:has(.fx-win)::after,
body.battle-mode .arena-center:has(.fx-tie)::after{
  animation:arenaImpactGlow .75s ease-out 1;
}
@keyframes arenaImpactGlow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}
}

body.battle-mode .arena-center:has(.fx-hit) .vs-mark,
body.battle-mode .arena-center:has(.fx-win) .vs-mark,
body.battle-mode .arena-center:has(.fx-tie) .vs-mark{
  animation:vsPulse .55s ease-out 1;
}
@keyframes vsPulse{
  0%{transform:scale(1);opacity:.55}
  35%{transform:scale(1.28);opacity:1}
  100%{transform:scale(1);opacity:.55}
}

/* Laterales vivos con micro movimiento */
@keyframes sideAxieNudge{
  0%,100%{transform:translateX(0) translateY(0)}
  50%{transform:translateX(2px) translateY(-1px)}
}
body.battle-mode .side-team .axie-card.alive:not(:disabled) .battle-team-preview{
  animation:sideAxieNudge 1.6s ease-in-out infinite;
}

/* KO claramente apagado */
body.battle-mode .side-team .axie-card.ko .battle-team-preview,
body.battle-mode .side-team .axie-card.ko .battle-team-fallback{
  filter:grayscale(.9) brightness(.52);
}

/* Mantener control en portátiles bajos */
@media(min-width:1000px) and (max-height:780px){
  body.battle-mode .fighter-token.mixer-fighter-token{
    width:clamp(155px,17vw,235px)!important;
    height:clamp(132px,14vw,200px)!important;
  }
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon{
    width:64px!important;
    height:54px!important;
  }
  body.battle-mode .side-team .axie-card{
    grid-template-columns:64px minmax(0,1fr);
  }
}

@media(prefers-reduced-motion:reduce){
  body.battle-mode .fighter-token,
  body.battle-mode .battle-team-preview,
  body.battle-mode .arena-center::after,
  body.battle-mode .vs-mark{
    animation:none!important;
  }
}


/* ==========================================================
   A010R2 · SIDE AXIES BIGGER
   Mantiene los campos. Solo agranda los Axies en paneles laterales.
   ========================================================== */

/* Columna derecha e izquierda: más presencia visual del Axie sin crecer demasiado la tarjeta */
body.battle-mode .side-team .battle-team-preview,
body.battle-mode .side-team .battle-team-fallback,
body.battle-mode .side-team .battle-team-icon{
  width:clamp(92px,8.2vw,132px)!important;
  height:clamp(82px,7.2vw,118px)!important;
}

body.battle-mode .side-team .axie-card{
  grid-template-columns:clamp(92px,8.2vw,132px) minmax(0,1fr)!important;
  column-gap:14px!important;
  align-items:center!important;
}

/* Hacer que el contenido real del mixer llene mejor el cuadro */
body.battle-mode .side-team .battle-team-preview .mixer-stage,
body.battle-mode .side-team .battle-team-preview .mixer-slot,
body.battle-mode .side-team .battle-team-preview .mixer-wrap,
body.battle-mode .side-team .battle-team-preview .mixer-canvas-wrap{
  width:100%!important;
  height:100%!important;
}

body.battle-mode .side-team .battle-team-preview canvas{
  width:112%!important;
  height:112%!important;
  transform:translate(-6%,-4%) scale(1.16)!important;
  transform-origin:center center!important;
}

/* Si usan imagen oficial, que también se vea más grande */
body.battle-mode .side-team .battle-team-preview img,
body.battle-mode .side-team .battle-team-fallback img{
  width:118%!important;
  height:118%!important;
  object-fit:contain!important;
  transform:translate(-7%,-5%) scale(1.12)!important;
  transform-origin:center center!important;
}

/* Las tarjetas laterales compactas siguen iguales en altura, solo mejor reparto interno */
body.battle-mode .side-team .axie-card .meta,
body.battle-mode .side-team .axie-card .axie-meta,
body.battle-mode .side-team .axie-card .info{
  min-width:0;
}

/* Portátiles bajos: aun así más grande que antes */
@media(min-width:1000px) and (max-height:780px){
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon{
    width:82px!important;
    height:72px!important;
  }
  body.battle-mode .side-team .axie-card{
    grid-template-columns:82px minmax(0,1fr)!important;
  }
  body.battle-mode .side-team .battle-team-preview canvas{
    width:110%!important;
    height:110%!important;
    transform:translate(-5%,-3%) scale(1.12)!important;
  }
  body.battle-mode .side-team .battle-team-preview img,
  body.battle-mode .side-team .battle-team-fallback img{
    width:112%!important;
    height:112%!important;
    transform:translate(-6%,-4%) scale(1.08)!important;
  }
}


/* A010R4 · COLISEO ROMANO + VIDA POR EMPATE */
body.battle-mode .arena{background:radial-gradient(circle at 50% 28%,rgba(255,228,171,.14),transparent 26%),linear-gradient(180deg,rgba(34,45,66,.95) 0%,rgba(25,30,46,.96) 34%,rgba(74,58,39,.84) 68%,rgba(29,20,15,.98) 100%)!important;border-color:#6b5b45!important;box-shadow:inset 0 0 0 1px rgba(255,220,160,.06),0 24px 60px rgba(0,0,0,.35)}
body.battle-mode .arena::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 8%,rgba(255,236,197,.10),transparent 30%),repeating-linear-gradient(90deg,transparent 0 5.4%,rgba(223,192,143,.11) 5.4% 6.4%,transparent 6.4% 11.3%),linear-gradient(180deg,rgba(210,180,132,.10) 0%,rgba(210,180,132,.02) 28%,rgba(0,0,0,0) 46%);opacity:.85}
body.battle-mode .arena::after{content:"";position:absolute;left:5%;right:5%;top:14%;height:34%;pointer-events:none;background:radial-gradient(circle at 6% 55%,rgba(242,207,149,.15) 0 10%,transparent 11%),radial-gradient(circle at 16% 48%,rgba(242,207,149,.15) 0 10%,transparent 11%),radial-gradient(circle at 26% 44%,rgba(242,207,149,.15) 0 10%,transparent 11%),radial-gradient(circle at 36% 42%,rgba(242,207,149,.15) 0 10%,transparent 11%),radial-gradient(circle at 50% 41%,rgba(242,207,149,.15) 0 10%,transparent 11%),radial-gradient(circle at 64% 42%,rgba(242,207,149,.15) 0 10%,transparent 11%),radial-gradient(circle at 74% 44%,rgba(242,207,149,.15) 0 10%,transparent 11%),radial-gradient(circle at 84% 48%,rgba(242,207,149,.15) 0 10%,transparent 11%),radial-gradient(circle at 94% 55%,rgba(242,207,149,.15) 0 10%,transparent 11%);filter:blur(2px);opacity:.9}
body.battle-mode .arena-floor{left:8%!important;right:8%!important;bottom:34px!important;height:84px!important;border-radius:50%!important;background:radial-gradient(ellipse at center,rgba(151,106,52,.78) 0%,rgba(109,74,40,.56) 44%,rgba(0,0,0,0) 72%)!important;box-shadow:0 0 0 1px rgba(237,194,122,.06),inset 0 12px 26px rgba(255,233,194,.05)}
body.battle-mode .vs{color:rgba(255,236,198,.48)!important;text-shadow:0 10px 24px rgba(0,0,0,.42)}
body.battle-mode .axie-life,body.battle-mode .fighter-life{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:6px}body.battle-mode .axie-life{justify-content:flex-start}.life-label{font-size:10px;font-weight:900;letter-spacing:.12em;color:#cbb792}.life-pips{display:inline-flex;gap:4px;align-items:center}.life-pip{width:11px;height:11px;border-radius:999px;border:1px solid rgba(255,233,194,.24);background:linear-gradient(180deg,#172031,#0c111a);box-shadow:inset 0 2px 3px rgba(255,255,255,.04)}.life-pip.on{background:linear-gradient(180deg,#ffd978,#d79a2d);border-color:#f2c45b;box-shadow:0 0 10px rgba(242,196,91,.26),inset 0 1px 1px rgba(255,248,221,.5)}.life-count{font-size:11px;color:#f1e2be;font-weight:800}body.battle-mode .fighter-life .life-label,body.battle-mode .fighter-life .life-count{font-size:11px}body.battle-mode .fighter-life .life-pip{width:12px;height:12px}body.battle-mode .side-team .axie-card{position:relative;overflow:hidden}body.battle-mode .side-team .axie-card .axie-life{margin-top:8px}body.battle-mode .side-team .axie-card.ko .life-pip.on{background:linear-gradient(180deg,#5a6070,#2a3140);border-color:#485066;box-shadow:none}
@media(max-width:820px){body.battle-mode .arena::after{top:16%;height:26%}.life-label{font-size:9px}.life-count{font-size:10px}}


/* ==============================================================
   A010R5 · COLISEO REAL + PERSONALIDAD + KO + CARTAS REALES
   ============================================================ */

/* Coliseo romano ilustrado integrado en la zona central. */
body.battle-mode .arena{
  position:relative;
  background-image:
    linear-gradient(180deg,rgba(5,9,16,.08),rgba(7,9,12,.20)),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDcyMCI+CjxkZWZzPgogPGxpbmVhckdyYWRpZW50IGlkPSJza3kiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBzdG9wLWNvbG9yPSIjMTExODI3Ii8+PHN0b3Agb2Zmc2V0PSIuNTUiIHN0b3AtY29sb3I9IiMyNDMwNDQiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMyMDE3MGYiLz48L2xpbmVhckdyYWRpZW50PgogPGxpbmVhckdyYWRpZW50IGlkPSJzdG9uZSIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiNiOTlhNmIiIHN0b3Atb3BhY2l0eT0iLjU1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNTU0MjJmIiBzdG9wLW9wYWNpdHk9Ii43MiIvPjwvbGluZWFyR3JhZGllbnQ+CiA8cmFkaWFsR3JhZGllbnQgaWQ9InN1biI+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZDk4YSIgc3RvcC1vcGFjaXR5PSIuNDIiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZmQ5OGEiIHN0b3Atb3BhY2l0eT0iMCIvPjwvcmFkaWFsR3JhZGllbnQ+CiA8bGluZWFyR3JhZGllbnQgaWQ9InNhbmQiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBzdG9wLWNvbG9yPSIjOGI2MTM0Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjM2IyODE5Ii8+PC9saW5lYXJHcmFkaWVudD4KIDxmaWx0ZXIgaWQ9ImJsdXIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEwIi8+PC9maWx0ZXI+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNzIwIiBmaWxsPSJ1cmwoI3NreSkiLz4KPGVsbGlwc2UgY3g9IjYwMCIgY3k9IjEwMCIgcng9IjM4MCIgcnk9IjIyMCIgZmlsbD0idXJsKCNzdW4pIi8+CjwhLS0gdXBwZXIgc3RvbmUgY3Jvd24gLS0+CjxwYXRoIGQ9Ik0yNSAzNTAgUTYwMCA1NSAxMTc1IDM1MCBMMTE3NSA0NjUgUTYwMCAyNDUgMjUgNDY1WiIgZmlsbD0iIzZmNWI0NSIgb3BhY2l0eT0iLjYyIi8+CjxwYXRoIGQ9Ik00MCAzNTAgUTYwMCA4NSAxMTYwIDM1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDJiNzg5IiBzdHJva2Utd2lkdGg9IjgiIG9wYWNpdHk9Ii4zMiIvPgo8IS0tIGFyY2hlcyAtLT4KPGcgZmlsbD0iIzE1MTkyMyIgc3Ryb2tlPSJ1cmwoI3N0b25lKSIgc3Ryb2tlLXdpZHRoPSIxMyIgb3BhY2l0eT0iLjk1Ij4KIDxwYXRoIGQ9Ik04MCAzODUgVjMyMCBRODAgMjUwIDE0MCAyNTAgUTIwMCAyNTAgMjAwIDMyMCBWMzg1WiIvPgogPHBhdGggZD0iTTIyMCAzNDIgVjI4MiBRMjIwIDIyMCAyODAgMjIwIFEzNDAgMjIwIDM0MCAyODIgVjM0MloiLz4KIDxwYXRoIGQ9Ik0zNjAgMzEwIFYyNTIgUTM2MCAxOTAgNDIwIDE5MCBRNDgwIDE5MCA0ODAgMjUyIFYzMTBaIi8+CiA8cGF0aCBkPSJNNTAwIDI5MiBWMjMyIFE1MDAgMTY4IDU2MCAxNjggUTYyMCAxNjggNjIwIDIzMiBWMjkyWiIvPgogPHBhdGggZD0iTTY0MCAyOTIgVjIzMiBRNjQwIDE2OCA3MDAgMTY4IFE3NjAgMTY4IDc2MCAyMzIgVjI5MloiLz4KIDxwYXRoIGQ9Ik03ODAgMzEwIFYyNTIgUTc4MCAxOTAgODQwIDE5MCBROTAwIDE5MCA5MDAgMjUyIFYzMTBaIi8+CiA8cGF0aCBkPSJNOTIwIDM0MiBWMjgyIFE5MjAgMjIwIDk4MCAyMjAgUTEwNDAgMjIwIDEwNDAgMjgyIFYzNDJaIi8+CiA8cGF0aCBkPSJNMTA2MCAzODUgVjMyMCBRMTA2MCAyNTAgMTEyMCAyNTAgUTExODAgMjUwIDExODAgMzIwIFYzODVaIi8+CjwvZz4KPCEtLSBzZWF0aW5nIGJhbmRzIC0tPgo8cGF0aCBkPSJNNDAgNDMyIFE2MDAgMjQwIDExNjAgNDMyIiBmaWxsPSJub25lIiBzdHJva2U9IiNkOGJkOGYiIHN0cm9rZS13aWR0aD0iMjIiIG9wYWNpdHk9Ii4xNyIvPgo8cGF0aCBkPSJNNTUgNDY3IFE2MDAgMzA1IDExNDUgNDY3IiBmaWxsPSJub25lIiBzdHJva2U9IiNiYjk4NzAiIHN0cm9rZS13aWR0aD0iMTgiIG9wYWNpdHk9Ii4xOCIvPgo8cGF0aCBkPSJNNzAgNTAwIFE2MDAgMzc1IDExMzAgNTAwIiBmaWxsPSJub25lIiBzdHJva2U9IiM4MTY0NDciIHN0cm9rZS13aWR0aD0iMjQiIG9wYWNpdHk9Ii4yNiIvPgo8IS0tIGNyb3dkIC0tPgo8ZyBmaWxsPSIjZTJjNzhlIiBvcGFjaXR5PSIuMjIiPgogPGNpcmNsZSBjeD0iMTY1IiBjeT0iNDA1IiByPSI0Ii8+PGNpcmNsZSBjeD0iMjA1IiBjeT0iNDAwIiByPSIzIi8+PGNpcmNsZSBjeD0iMjUwIiBjeT0iMzkwIiByPSI0Ii8+PGNpcmNsZSBjeD0iMzA1IiBjeT0iMzgwIiByPSIzIi8+PGNpcmNsZSBjeD0iMzY1IiBjeT0iMzcwIiByPSI0Ii8+PGNpcmNsZSBjeD0iNDMwIiBjeT0iMzYwIiByPSIzIi8+PGNpcmNsZSBjeD0iNDk1IiBjeT0iMzUzIiByPSI0Ii8+PGNpcmNsZSBjeD0iNTY1IiBjeT0iMzUwIiByPSIzIi8+PGNpcmNsZSBjeD0iNjM1IiBjeT0iMzUwIiByPSI0Ii8+PGNpcmNsZSBjeD0iNzA1IiBjeT0iMzUzIiByPSIzIi8+PGNpcmNsZSBjeD0iNzcwIiBjeT0iMzYwIiByPSI0Ii8+PGNpcmNsZSBjeD0iODM1IiBjeT0iMzcwIiByPSIzIi8+PGNpcmNsZSBjeD0iODk1IiBjeT0iMzgwIiByPSI0Ii8+PGNpcmNsZSBjeD0iOTUwIiBjeT0iMzkwIiByPSIzIi8+PGNpcmNsZSBjeD0iMTAwMCIgY3k9IjQwMCIgcj0iNCIvPjxjaXJjbGUgY3g9IjEwNDUiIGN5PSI0MDUiIHI9IjMiLz4KPC9nPgo8IS0tIHRvcmNoZXMgLS0+CjxnIG9wYWNpdHk9Ii43NSI+PGNpcmNsZSBjeD0iMTUwIiBjeT0iNDcwIiByPSI0OCIgZmlsbD0iI2ZmYjQ0YSIgb3BhY2l0eT0iLjE4IiBmaWx0ZXI9InVybCgjYmx1cikiLz48Y2lyY2xlIGN4PSIxMDUwIiBjeT0iNDcwIiByPSI0OCIgZmlsbD0iI2ZmYjQ0YSIgb3BhY2l0eT0iLjE4IiBmaWx0ZXI9InVybCgjYmx1cikiLz48cGF0aCBkPSJNMTQyIDQ5MCBsOC0zNCA4IDM0IiBmaWxsPSIjZmZiNDRhIi8+PHBhdGggZD0iTTEwNDIgNDkwIGw4LTM0IDggMzQiIGZpbGw9IiNmZmI0NGEiLz48L2c+CjwhLS0gYXJlbmEgd2FsbCAmIHNhbmQgLS0+CjxwYXRoIGQ9Ik0wIDUxNSBRNjAwIDQwMCAxMjAwIDUxNSBMMTIwMCA3MjAgSDBaIiBmaWxsPSIjMzQyNTFhIiBvcGFjaXR5PSIuODIiLz4KPGVsbGlwc2UgY3g9IjYwMCIgY3k9IjY1NSIgcng9IjUyMCIgcnk9IjEwMCIgZmlsbD0idXJsKCNzYW5kKSIgb3BhY2l0eT0iLjg4Ii8+CjxlbGxpcHNlIGN4PSI2MDAiIGN5PSI2NTAiIHJ4PSI0MzAiIHJ5PSI1OCIgZmlsbD0iI2Q5OWI0YSIgb3BhY2l0eT0iLjEyIi8+Cjwvc3ZnPg==") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border-color:#7d694b !important;
  box-shadow:inset 0 0 70px rgba(0,0,0,.38),0 24px 60px rgba(0,0,0,.35) !important;
  isolation:isolate;
}
body.battle-mode .arena::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:radial-gradient(ellipse at 50% 58%,transparent 0 35%,rgba(2,5,9,.20) 72%,rgba(2,5,9,.46) 100%) !important;
  opacity:1 !important;
}
body.battle-mode .arena::after{
  content:"" !important;
  position:absolute !important;
  left:12% !important; right:12% !important; bottom:5.5% !important; top:auto !important;
  height:18% !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:radial-gradient(ellipse at center,rgba(255,191,96,.18),rgba(143,88,39,.08) 45%,transparent 72%) !important;
  filter:blur(2px) !important;
  opacity:1 !important;
}
body.battle-mode .arena > *{position:relative;z-index:2}
body.battle-mode .arena-floor{
  left:11% !important;right:11% !important;bottom:26px !important;height:72px !important;
  background:radial-gradient(ellipse at center,rgba(220,152,72,.34),rgba(95,60,31,.22) 48%,transparent 74%) !important;
  box-shadow:none !important;
}
body.battle-mode .arena-center::before{
  content:"II VITAE · EMPATE = −I";
  position:absolute;
  top:12px;left:50%;transform:translateX(-50%);
  z-index:5;
  padding:5px 12px;
  border:1px solid rgba(236,205,150,.26);
  border-radius:999px;
  background:rgba(31,23,17,.54);
  color:#e6c88f;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-shadow:0 1px 3px #000;
  pointer-events:none;
}

/* Los 3 Axies vivos están eufóricos en SUS BLOQUES, incluso el rival. */
@keyframes sideAxieEuphoricR5{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  15%{transform:translate(2px,-5px) rotate(1.4deg) scale(1.045)}
  30%{transform:translate(-2px,-1px) rotate(-1deg) scale(1.02)}
  48%{transform:translate(3px,-7px) rotate(1.2deg) scale(1.065)}
  66%{transform:translate(-1px,-2px) rotate(-.7deg) scale(1.025)}
  84%{transform:translate(2px,-4px) rotate(.6deg) scale(1.045)}
}
body.battle-mode .side-team .axie-card.alive .battle-team-preview,
body.battle-mode .side-team .axie-card.alive .battle-team-fallback{
  animation:sideAxieEuphoricR5 1.08s ease-in-out infinite !important;
  transform-origin:50% 82% !important;
  will-change:transform,filter;
}
body.battle-mode .side-team .axie-card:nth-child(2) .battle-team-preview,
body.battle-mode .side-team .axie-card:nth-child(2) .battle-team-fallback{animation-delay:-.31s !important}
body.battle-mode .side-team .axie-card:nth-child(3) .battle-team-preview,
body.battle-mode .side-team .axie-card:nth-child(3) .battle-team-fallback{animation-delay:-.62s !important}
body.battle-mode .side-team .axie-card.selected .battle-team-preview{
  filter:drop-shadow(0 0 10px rgba(242,196,91,.38));
}

/* Orientación canónica: rival izquierda mira a la derecha; jugador derecha mira a la izquierda. */
body.battle-mode .fighter-left .battle-fighter-preview img,
body.battle-mode .fighter-left .battle-fighter-fallback img{transform:scaleX(1) !important}
body.battle-mode .fighter-right .battle-fighter-preview img,
body.battle-mode .fighter-right .battle-fighter-fallback img{transform:scaleX(-1) !important}

/* Muerte: impacto, caída y giro boca abajo. */
@keyframes axieDeathFlipR5{
  0%{transform:translateY(0) rotate(0deg) scale(1.05);filter:grayscale(0) brightness(1)}
  18%{transform:translateY(-12px) rotate(14deg) scale(1.02);filter:brightness(1.3)}
  48%{transform:translateY(10px) rotate(92deg) scale(.98);filter:grayscale(.45) brightness(.78)}
  78%{transform:translateY(22px) rotate(164deg) scale(.94);filter:grayscale(.82) brightness(.58)}
  100%{transform:translateY(26px) rotate(180deg) scale(.90);filter:grayscale(1) brightness(.46)}
}
body.battle-mode .fighter-token.fx-dead{
  animation:axieDeathFlipR5 1.10s cubic-bezier(.18,.78,.18,1) 1 forwards !important;
}
body.battle-mode .side-team .axie-card.ko .battle-team-preview,
body.battle-mode .side-team .axie-card.ko .battle-team-fallback{
  animation:none !important;
  transform:rotate(180deg) scale(.9) !important;
  transform-origin:50% 50% !important;
  filter:grayscale(1) brightness(.47) !important;
  opacity:.72 !important;
}

/* Cartas: figura REAL de la parte + nombre + tipo. */
body.battle-mode .card-btn{
  grid-template-columns:58px minmax(0,1fr) auto !important;
  grid-template-rows:auto auto auto !important;
  min-height:82px !important;
  column-gap:8px !important;
  padding:7px !important;
}
body.battle-mode .card-real-figure{
  grid-column:1;grid-row:1 / 4;
  width:54px;height:62px;
  display:grid;place-items:center;align-self:center;
  overflow:hidden;border-radius:9px;
  border:1px solid rgba(255,255,255,.10);
  background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.12),rgba(4,8,14,.38));
}
body.battle-mode .card-real-figure img{
  width:94%;height:94%;object-fit:contain;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.42));
}
body.battle-mode .card-part-fallback,
body.battle-mode .card-demo-figure{font-size:25px}
body.battle-mode .card-kind{grid-column:2 !important;grid-row:1 !important;align-self:end}
body.battle-mode .card-level{grid-column:3 !important;grid-row:1 / 3 !important;align-self:center}
body.battle-mode .card-part{
  grid-column:2 !important;grid-row:2 !important;
  display:flex !important;flex-direction:column;gap:2px;min-width:0;
}
body.battle-mode .card-part strong{
  font-size:11px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;
}
body.battle-mode .card-part small{
  color:#90a7c7;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
}
body.battle-mode .card-burn{grid-column:2 / 4 !important;grid-row:3 !important}
body.battle-mode .card-btn.selected .card-real-figure{
  border-color:#f2c45b;box-shadow:0 0 0 1px rgba(242,196,91,.25),0 0 16px rgba(242,196,91,.16);
}

@media(max-width:760px){
  body.battle-mode .arena-center::before{font-size:7px;top:7px;padding:4px 8px}
  body.battle-mode .card-btn{grid-template-columns:46px minmax(0,1fr) auto !important;min-height:72px !important}
  body.battle-mode .card-real-figure{width:43px;height:50px}
}
@media(prefers-reduced-motion:reduce){
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .fighter-token{animation:none !important}
}


/* ==============================================================
   A010R6 · SIDE PREVIEW / ORIENTATION / CARD LAYOUT FIX
   ============================================================ */

/* 1) El cuadro NO se mueve. Solo se anima el Axie dentro. */
body.battle-mode .side-team .battle-team-preview,
body.battle-mode .side-team .battle-team-fallback{
  animation:none !important;
  transform:none !important;
}

@keyframes axieEuphoricTowardRight{
  0%,100%{transform:scaleX(1) translate(0,0) rotate(0deg) scale(1)}
  18%{transform:scaleX(1) translate(2px,-5px) rotate(1.4deg) scale(1.045)}
  38%{transform:scaleX(1) translate(-1px,-1px) rotate(-1deg) scale(1.02)}
  58%{transform:scaleX(1) translate(3px,-7px) rotate(1deg) scale(1.055)}
  78%{transform:scaleX(1) translate(0,-2px) rotate(-.7deg) scale(1.025)}
}
@keyframes axieEuphoricTowardLeft{
  0%,100%{transform:scaleX(-1) translate(0,0) rotate(0deg) scale(1)}
  18%{transform:scaleX(-1) translate(2px,-5px) rotate(1.4deg) scale(1.045)}
  38%{transform:scaleX(-1) translate(-1px,-1px) rotate(-1deg) scale(1.02)}
  58%{transform:scaleX(-1) translate(3px,-7px) rotate(1deg) scale(1.055)}
  78%{transform:scaleX(-1) translate(0,-2px) rotate(-.7deg) scale(1.025)}
}

/* Rival (izquierda) mira al coliseo, hacia la derecha. */
body.battle-mode .opponent-side .axie-card.alive .battle-team-preview img,
body.battle-mode .opponent-side .axie-card.alive .battle-team-fallback img{
  animation:axieEuphoricTowardRight 1.08s ease-in-out infinite !important;
  transform-origin:50% 76% !important;
}

/* Jugador (derecha) mira al coliseo, hacia la izquierda. */
body.battle-mode .player-side .axie-card.alive .battle-team-preview img,
body.battle-mode .player-side .axie-card.alive .battle-team-fallback img{
  animation:axieEuphoricTowardLeft 1.08s ease-in-out infinite !important;
  transform-origin:50% 76% !important;
}
body.battle-mode .side-team .axie-card:nth-child(2) .battle-team-preview img,
body.battle-mode .side-team .axie-card:nth-child(2) .battle-team-fallback img{animation-delay:-.27s !important}
body.battle-mode .side-team .axie-card:nth-child(3) .battle-team-preview img,
body.battle-mode .side-team .axie-card:nth-child(3) .battle-team-fallback img{animation-delay:-.54s !important}

/* KO: cuadro quieto; solo el Axie queda girado/muerto. */
body.battle-mode .side-team .axie-card.ko .battle-team-preview,
body.battle-mode .side-team .axie-card.ko .battle-team-fallback{
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
}
body.battle-mode .opponent-side .axie-card.ko .battle-team-preview img,
body.battle-mode .opponent-side .axie-card.ko .battle-team-fallback img,
body.battle-mode .player-side .axie-card.ko .battle-team-preview img,
body.battle-mode .player-side .axie-card.ko .battle-team-fallback img{
  animation:none !important;
  transform:rotate(180deg) scale(.90) !important;
  transform-origin:50% 50% !important;
  filter:grayscale(1) brightness(.47) !important;
  opacity:.72 !important;
}

/* 2) Posiciones inequívocas en arena: rival izquierda, jugador derecha. */
body.battle-mode #arenaA{
  grid-column:1 !important;
  justify-self:start !important;
  align-self:center !important;
}
body.battle-mode .arena > .vs{
  grid-column:2 !important;
  justify-self:center !important;
  align-self:center !important;
}
body.battle-mode #arenaB{
  grid-column:3 !important;
  justify-self:end !important;
  align-self:center !important;
}

/* Ambos gladiadores miran al centro. */
body.battle-mode #arenaA .battle-fighter-preview img,
body.battle-mode #arenaA .battle-fighter-fallback img{
  transform:scaleX(1) !important;
  transform-origin:center center !important;
}
body.battle-mode #arenaB .battle-fighter-preview img,
body.battle-mode #arenaB .battle-fighter-fallback img{
  transform:scaleX(-1) !important;
  transform-origin:center center !important;
}

/* 3) Cartas: grid real para que no se monten letras/números. */
body.battle-mode .card-btn{
  display:grid !important;
  grid-template-columns:56px minmax(0,1fr) 28px !important;
  grid-template-rows:18px minmax(24px,1fr) 14px !important;
  column-gap:7px !important;
  row-gap:2px !important;
  align-items:center !important;
  min-width:0 !important;
  min-height:84px !important;
  padding:7px !important;
  overflow:hidden !important;
}
body.battle-mode .card-real-figure{
  grid-column:1 !important;
  grid-row:1 / 4 !important;
  width:52px !important;
  height:62px !important;
  align-self:center !important;
}
body.battle-mode .card-kind{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:end !important;
  min-width:0 !important;
  margin:0 !important;
  font-size:8.5px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.battle-mode .card-level{
  grid-column:3 !important;
  grid-row:1 / 3 !important;
  align-self:center !important;
  justify-self:end !important;
  float:none !important;
  margin:0 !important;
  font-size:23px !important;
  line-height:1 !important;
}
body.battle-mode .card-part{
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:start !important;
  min-width:0 !important;
  margin:0 !important;
  gap:2px !important;
  overflow:hidden !important;
}
body.battle-mode .card-part strong{
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
  font-size:9.5px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.battle-mode .card-part small{
  display:block !important;
  font-size:7.5px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.battle-mode .card-burn{
  grid-column:2 / 4 !important;
  grid-row:3 !important;
  align-self:end !important;
  min-width:0 !important;
  margin:0 !important;
  font-size:7.5px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

@media (min-width:1000px) and (max-height:780px){
  body.battle-mode .card-btn{
    grid-template-columns:50px minmax(0,1fr) 25px !important;
    grid-template-rows:16px minmax(20px,1fr) 12px !important;
    min-height:72px !important;
    padding:6px !important;
    column-gap:6px !important;
  }
  body.battle-mode .card-real-figure{width:46px !important;height:54px !important}
  body.battle-mode .card-level{font-size:20px !important}
  body.battle-mode .card-kind{font-size:7.5px !important}
  body.battle-mode .card-part strong{font-size:8.5px !important}
  body.battle-mode .card-part small,
  body.battle-mode .card-burn{font-size:7px !important}
}

@media(prefers-reduced-motion:reduce){
  body.battle-mode .side-team .battle-team-preview img,
  body.battle-mode .side-team .battle-team-fallback img{animation:none !important}
}


/* ==============================================================
   A010R7 · ORIENTACIÓN ÚNICA HACIA EL CENTRO
   Rival/izquierda -> mira a la derecha
   Jugador/derecha -> mira a la izquierda
   Solo gira el Axie, nunca el bloque.
   ============================================================ */

/*
  La orientación base real del render del Mixer es la contraria
  a la asumida en R6. Se normaliza aquí de forma única.
*/

/* RIVAL · COLUMNA IZQUIERDA -> MIRAR HACIA EL CENTRO/DERECHA */
body.battle-mode .opponent-side .axie-card.alive .battle-team-preview img,
body.battle-mode .opponent-side .axie-card.alive .battle-team-fallback img{
  animation:axieEuphoricTowardLeft 1.08s ease-in-out infinite !important;
  transform-origin:50% 76% !important;
}

/* TÚ · COLUMNA DERECHA -> MIRAR HACIA EL CENTRO/IZQUIERDA */
body.battle-mode .player-side .axie-card.alive .battle-team-preview img,
body.battle-mode .player-side .axie-card.alive .battle-team-fallback img{
  animation:axieEuphoricTowardRight 1.08s ease-in-out infinite !important;
  transform-origin:50% 76% !important;
}

/* CENTRO: rival siempre a la izquierda mirando a la derecha */
body.battle-mode #arenaA .battle-fighter-preview img,
body.battle-mode #arenaA .battle-fighter-fallback img{
  transform:scaleX(-1) !important;
  transform-origin:center center !important;
}

/* CENTRO: jugador siempre a la derecha mirando a la izquierda */
body.battle-mode #arenaB .battle-fighter-preview img,
body.battle-mode #arenaB .battle-fighter-fallback img{
  transform:scaleX(1) !important;
  transform-origin:center center !important;
}

/* KO conserva el lado lógico y después cae/gira.
   No se gira el contenedor. */
body.battle-mode .opponent-side .axie-card.ko .battle-team-preview,
body.battle-mode .opponent-side .axie-card.ko .battle-team-fallback,
body.battle-mode .player-side .axie-card.ko .battle-team-preview,
body.battle-mode .player-side .axie-card.ko .battle-team-fallback{
  transform:none !important;
  animation:none !important;
}

body.battle-mode .opponent-side .axie-card.ko .battle-team-preview img,
body.battle-mode .opponent-side .axie-card.ko .battle-team-fallback img{
  animation:none !important;
  transform:scaleX(-1) rotate(180deg) scale(.90) !important;
  transform-origin:50% 50% !important;
  filter:grayscale(1) brightness(.47) !important;
  opacity:.72 !important;
}

body.battle-mode .player-side .axie-card.ko .battle-team-preview img,
body.battle-mode .player-side .axie-card.ko .battle-team-fallback img{
  animation:none !important;
  transform:scaleX(1) rotate(180deg) scale(.90) !important;
  transform-origin:50% 50% !important;
  filter:grayscale(1) brightness(.47) !important;
  opacity:.72 !important;
}


/* ==============================================================
   A010R8 · FIX SOLO COLUMNA IZQUIERDA DEL RIVAL
   Rival en columna izquierda debe mirar hacia el coliseo/centro.
   La columna derecha ya estaba correcta y no se toca.
   ============================================================ */

@keyframes axieRivalTowardColiseumA010R8{
  0%,100%{transform:scaleX(1) translate(0,0) rotate(0deg) scale(1)}
  18%{transform:scaleX(1) translate(2px,-5px) rotate(1.4deg) scale(1.045)}
  38%{transform:scaleX(1) translate(-1px,-1px) rotate(-1deg) scale(1.02)}
  58%{transform:scaleX(1) translate(3px,-7px) rotate(1deg) scale(1.055)}
  78%{transform:scaleX(1) translate(0,-2px) rotate(-.7deg) scale(1.025)}
}

/* Rival/izquierda: solo se mueve el Axie y mira hacia el centro. */
body.battle-mode .opponent-side .axie-card.alive .battle-team-preview img,
body.battle-mode .opponent-side .axie-card.alive .battle-team-fallback img{
  animation:axieRivalTowardColiseumA010R8 1.08s ease-in-out infinite !important;
  transform-origin:50% 76% !important;
}

/* KO rival conserva la misma orientación corregida antes de caer. */
body.battle-mode .opponent-side .axie-card.ko .battle-team-preview img,
body.battle-mode .opponent-side .axie-card.ko .battle-team-fallback img{
  animation:none !important;
  transform:scaleX(1) rotate(180deg) scale(.90) !important;
  transform-origin:50% 50% !important;
  filter:grayscale(1) brightness(.47) !important;
  opacity:.72 !important;
}


/* ==============================================================
   A010R9 · CORRECCIÓN DEFINITIVA ORIENTACIÓN COLUMNA IZQUIERDA
   Los Axies del rival en la columna izquierda deben mirar hacia el centro,
   por tanto se invierten horizontalmente SOLO en esa columna.
   ============================================================ */

@keyframes axieRivalTowardCenterA010R9 {
  0%,100% { transform: scaleX(-1) translate(0,0) rotate(0deg) scale(1); }
  18% { transform: scaleX(-1) translate(2px,-5px) rotate(1.4deg) scale(1.045); }
  38% { transform: scaleX(-1) translate(-1px,-1px) rotate(-1deg) scale(1.02); }
  58% { transform: scaleX(-1) translate(3px,-7px) rotate(1deg) scale(1.055); }
  78% { transform: scaleX(-1) translate(0,-2px) rotate(-0.7deg) scale(1.025); }
}

body.battle-mode .opponent-side .axie-card.alive .battle-team-preview img,
body.battle-mode .opponent-side .axie-card.alive .battle-team-fallback img {
  animation: axieRivalTowardCenterA010R9 1.08s ease-in-out infinite !important;
  transform-origin: 50% 76% !important;
}

body.battle-mode .opponent-side .axie-card.ko .battle-team-preview img,
body.battle-mode .opponent-side .axie-card.ko .battle-team-fallback img {
  animation: none !important;
  transform: scaleX(-1) rotate(180deg) scale(.90) !important;
  transform-origin: 50% 50% !important;
  filter: grayscale(1) brightness(.47) !important;
  opacity: .72 !important;
}


/* ==============================================================
   A010R10 · RIVAL LEFT COLUMN DEFINITIVE ORIENTATION
   La columna izquierda del rival debe mirar SIEMPRE hacia el centro.
   Si la miniatura base sale mirando a la izquierda, aquí se invierte.
   ============================================================ */

/* Estado base: rival en la columna izquierda mirando hacia el centro (derecha). */
body.battle-mode .opponent-section .side-team .axie-card .battle-team-preview img,
body.battle-mode .opponent-section .side-team .axie-card .battle-team-fallback img,
body.battle-mode .opponent-section .side-team .axie-card .axie-image-wrap img {
  transform: scaleX(-1) !important;
  transform-origin: 50% 76% !important;
}

@keyframes rivalLeftColumnFaceCenterA010R10 {
  0%,100% { transform: scaleX(-1) translate3d(0,0,0) rotate(0deg) scale(1); }
  18% { transform: scaleX(-1) translate3d(2px,-5px,0) rotate(1.3deg) scale(1.045); }
  38% { transform: scaleX(-1) translate3d(-1px,-1px,0) rotate(-.9deg) scale(1.02); }
  58% { transform: scaleX(-1) translate3d(3px,-7px,0) rotate(.9deg) scale(1.055); }
  78% { transform: scaleX(-1) translate3d(0,-2px,0) rotate(-.7deg) scale(1.025); }
}

body.battle-mode .opponent-section .side-team .axie-card.alive .battle-team-preview img,
body.battle-mode .opponent-section .side-team .axie-card.alive .battle-team-fallback img,
body.battle-mode .opponent-section .side-team .axie-card.alive .axie-image-wrap img {
  animation: rivalLeftColumnFaceCenterA010R10 1.08s ease-in-out infinite !important;
  transform-origin: 50% 76% !important;
  will-change: transform, filter !important;
}

body.battle-mode .opponent-section .side-team .axie-card:nth-child(2) .battle-team-preview img,
body.battle-mode .opponent-section .side-team .axie-card:nth-child(2) .battle-team-fallback img,
body.battle-mode .opponent-section .side-team .axie-card:nth-child(2) .axie-image-wrap img { animation-delay: -.27s !important; }
body.battle-mode .opponent-section .side-team .axie-card:nth-child(3) .battle-team-preview img,
body.battle-mode .opponent-section .side-team .axie-card:nth-child(3) .battle-team-fallback img,
body.battle-mode .opponent-section .side-team .axie-card:nth-child(3) .axie-image-wrap img { animation-delay: -.54s !important; }

/* KO: sigue respetando el espejo del rival. */
body.battle-mode .opponent-section .side-team .axie-card.ko .battle-team-preview img,
body.battle-mode .opponent-section .side-team .axie-card.ko .battle-team-fallback img,
body.battle-mode .opponent-section .side-team .axie-card.ko .axie-image-wrap img {
  animation: none !important;
  transform: scaleX(-1) rotate(180deg) scale(.90) !important;
  transform-origin: 50% 50% !important;
  filter: grayscale(1) brightness(.47) !important;
  opacity: .72 !important;
}


/* ==============================================================
   A010R11 · RIVAL LEFT COLUMN LAYOUT MIRRORED
   El rival debe mostrar el Axie del lado del coliseo (a la derecha de su card)
   y la información detrás / al lado contrario, como espejo de la columna del jugador.
   ============================================================== */
body.battle-mode .opponent-section .side-team .axie-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) clamp(74px,6.6vw,102px) !important;
  grid-template-rows:auto auto auto !important;
  column-gap:clamp(8px,.85vw,12px) !important;
  align-items:center !important;
  padding-right:clamp(9px,.8vw,12px) !important;
}

body.battle-mode .opponent-section .side-team .battle-team-preview,
body.battle-mode .opponent-section .side-team .battle-team-fallback,
body.battle-mode .opponent-section .side-team .battle-team-icon{
  grid-column:2 !important;
  grid-row:1 / 4 !important;
  justify-self:end !important;
  align-self:center !important;
  width:clamp(70px,6.4vw,98px) !important;
  height:clamp(64px,5.8vw,88px) !important;
  z-index:2 !important;
  margin-right:-2px !important;
  box-shadow:none !important;
}

body.battle-mode .opponent-section .side-team .axie-name,
body.battle-mode .opponent-section .side-team .axie-meta{
  grid-column:1 !important;
  min-width:0 !important;
  padding-right:clamp(4px,.45vw,8px) !important;
  position:relative !important;
  z-index:1 !important;
  text-align:left !important;
}

body.battle-mode .opponent-section .side-team .axie-name{
  grid-row:1 !important;
  align-self:end !important;
}

body.battle-mode .opponent-section .side-team .axie-meta{
  grid-row:2 / 4 !important;
  align-self:start !important;
}

body.battle-mode .opponent-section .side-team .vanguard-badge{
  right:10px !important;
  top:8px !important;
  z-index:3 !important;
}

/* Orientación definitiva del rival: imagen situada junto al coliseo y mirando hacia él. */
body.battle-mode .opponent-section .side-team .battle-team-preview img,
body.battle-mode .opponent-section .side-team .battle-team-fallback img,
body.battle-mode .opponent-section .side-team .axie-image-wrap img{
  transform:scaleX(-1) !important;
  transform-origin:50% 76% !important;
}

@keyframes rivalFaceArenaA010R11{
  0%,100% { transform:scaleX(-1) translate3d(0,0,0) rotate(0deg) scale(1); }
  20% { transform:scaleX(-1) translate3d(2px,-5px,0) rotate(1.2deg) scale(1.045); }
  45% { transform:scaleX(-1) translate3d(-1px,-1px,0) rotate(-0.8deg) scale(1.02); }
  70% { transform:scaleX(-1) translate3d(3px,-7px,0) rotate(0.9deg) scale(1.055); }
}

body.battle-mode .opponent-section .side-team .axie-card.alive .battle-team-preview img,
body.battle-mode .opponent-section .side-team .axie-card.alive .battle-team-fallback img,
body.battle-mode .opponent-section .side-team .axie-card.alive .axie-image-wrap img{
  animation:rivalFaceArenaA010R11 1.08s ease-in-out infinite !important;
  will-change:transform, filter !important;
}

body.battle-mode .opponent-section .side-team .axie-card:nth-child(2) .battle-team-preview img,
body.battle-mode .opponent-section .side-team .axie-card:nth-child(2) .battle-team-fallback img,
body.battle-mode .opponent-section .side-team .axie-card:nth-child(2) .axie-image-wrap img{animation-delay:-.27s !important;}
body.battle-mode .opponent-section .side-team .axie-card:nth-child(3) .battle-team-preview img,
body.battle-mode .opponent-section .side-team .axie-card:nth-child(3) .battle-team-fallback img,
body.battle-mode .opponent-section .side-team .axie-card:nth-child(3) .axie-image-wrap img{animation-delay:-.54s !important;}

body.battle-mode .opponent-section .side-team .axie-card.ko .battle-team-preview img,
body.battle-mode .opponent-section .side-team .axie-card.ko .battle-team-fallback img,
body.battle-mode .opponent-section .side-team .axie-card.ko .axie-image-wrap img{
  animation:none !important;
  transform:scaleX(-1) rotate(180deg) scale(.90) !important;
  transform-origin:50% 50% !important;
  filter:grayscale(1) brightness(.47) !important;
  opacity:.72 !important;
}


/* ==============================================================
   A010R12 · CARTAS MÁS CLARAS Y LEGIBLES
   Mantiene tamaño general, pero ordena el interior para que
   se entienda mejor: figura real grande, tipo claro, poder limpio,
   nombre de parte protagonista y sin textos montados.
   ============================================================== */
body.battle-mode .hand{
  gap:8px !important;
}
body.battle-mode .card-btn{
  display:grid !important;
  grid-template-columns:58px minmax(0,1fr) 34px !important;
  grid-template-rows:18px minmax(34px,1fr) !important;
  column-gap:8px !important;
  row-gap:4px !important;
  align-items:start !important;
  min-width:0 !important;
  min-height:90px !important;
  padding:8px 9px !important;
  overflow:hidden !important;
}
body.battle-mode .card-real-figure{
  grid-column:1 !important;
  grid-row:1 / 3 !important;
  width:54px !important;
  height:66px !important;
  align-self:center !important;
}
body.battle-mode .card-real-figure img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.35)) !important;
}
body.battle-mode .card-kind{
  grid-column:2 !important;
  grid-row:1 !important;
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  min-width:0 !important;
  margin:0 !important;
  font-size:8.5px !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:.05em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.battle-mode .card-kind-icon{flex:0 0 auto}
body.battle-mode .card-kind-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
body.battle-mode .card-btn.attack .card-kind{color:#ffb2a8 !important}
body.battle-mode .card-btn.defense .card-kind{color:#a9d8ff !important}
body.battle-mode .card-level{
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:start !important;
  display:grid !important;
  place-items:center !important;
  width:30px !important;
  min-width:30px !important;
  height:30px !important;
  border-radius:999px !important;
  float:none !important;
  margin:0 !important;
  font-size:17px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-shadow:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.22) !important;
}
body.battle-mode .card-btn.attack .card-level{
  background:linear-gradient(180deg,rgba(160,56,49,.45),rgba(95,30,26,.55)) !important;
  border:1px solid rgba(244,132,117,.58) !important;
  color:#ffe5df !important;
}
body.battle-mode .card-btn.defense .card-level{
  background:linear-gradient(180deg,rgba(55,108,160,.45),rgba(24,58,96,.58)) !important;
  border:1px solid rgba(116,178,235,.58) !important;
  color:#e4f4ff !important;
}
body.battle-mode .card-part{
  grid-column:2 / 4 !important;
  grid-row:2 !important;
  align-self:start !important;
  min-width:0 !important;
  margin:0 !important;
  color:var(--text) !important;
}
body.battle-mode .card-part strong{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  min-width:0 !important;
  max-width:100% !important;
  font-size:11.5px !important;
  line-height:1.12 !important;
  font-weight:900 !important;
  white-space:normal !important;
  text-overflow:clip !important;
}
body.battle-mode .card-part small{
  display:block !important;
  margin-top:5px !important;
  font-size:8px !important;
  line-height:1.1 !important;
  color:#8fb5dd !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.battle-mode .card-burn{display:none !important}
body.battle-mode .card-btn.selected{
  box-shadow:inset 0 0 0 1px rgba(242,196,91,.38),0 0 0 2px rgba(242,196,91,.18) !important;
}
@media (min-width:1000px) and (max-height:780px){
  body.battle-mode .card-btn{
    grid-template-columns:52px minmax(0,1fr) 28px !important;
    min-height:80px !important;
    padding:7px 8px !important;
    column-gap:7px !important;
  }
  body.battle-mode .card-real-figure{width:48px !important;height:58px !important}
  body.battle-mode .card-level{width:27px !important;min-width:27px !important;height:27px !important;font-size:15px !important}
  body.battle-mode .card-kind{font-size:8px !important}
  body.battle-mode .card-part strong{font-size:10.5px !important}
  body.battle-mode .card-part small{font-size:7.5px !important}
}


/* ==============================================================
   A010R13 · CARTAS REORGANIZADAS
   Figura + nombre + poder + icono de ataque/defensa claramente separados.
   ============================================================== */
body.battle-mode .card-btn{
  grid-template-columns:56px minmax(0,1fr) 52px !important;
  grid-template-rows:1fr !important;
  min-height:92px !important;
  align-items:center !important;
  column-gap:8px !important;
}
body.battle-mode .card-real-figure{
  grid-column:1 !important;
  grid-row:1 !important;
  width:54px !important;
  height:66px !important;
}
body.battle-mode .card-main{
  grid-column:2 !important;
  grid-row:1 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:6px !important;
  min-width:0 !important;
}
body.battle-mode .card-name{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  font-size:14px !important;
  line-height:1.04 !important;
  font-weight:950 !important;
  color:#f6fbff !important;
  text-align:left !important;
  text-wrap:balance !important;
}
body.battle-mode .card-slot{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  padding:2px 7px !important;
  border-radius:999px !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  color:#d9eaff !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.battle-mode .card-side{
  grid-column:3 !important;
  grid-row:1 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:6px !important;
  align-self:stretch !important;
  min-width:0 !important;
}
body.battle-mode .card-role{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  min-height:32px !important;
  padding:3px 2px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  width:100% !important;
}
body.battle-mode .card-role-icon{
  font-size:14px !important;
  line-height:1 !important;
}
body.battle-mode .card-role-label{
  font-size:8px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.08em !important;
}
body.battle-mode .card-btn.attack .card-role{color:#ffb8ae !important}
body.battle-mode .card-btn.defense .card-role{color:#acd7ff !important}
body.battle-mode .card-power{
  display:grid !important;
  place-items:center !important;
  width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.22) !important;
}
body.battle-mode .card-btn.attack .card-power{
  background:linear-gradient(180deg,rgba(160,56,49,.45),rgba(95,30,26,.55)) !important;
  border:1px solid rgba(244,132,117,.58) !important;
  color:#ffe5df !important;
}
body.battle-mode .card-btn.defense .card-power{
  background:linear-gradient(180deg,rgba(55,108,160,.45),rgba(24,58,96,.58)) !important;
  border:1px solid rgba(116,178,235,.58) !important;
  color:#e4f4ff !important;
}
body.battle-mode .card-kind,
body.battle-mode .card-level,
body.battle-mode .card-part,
body.battle-mode .card-burn{display:none !important}
@media (min-width:1000px) and (max-height:780px){
  body.battle-mode .card-btn{
    grid-template-columns:50px minmax(0,1fr) 46px !important;
    min-height:82px !important;
    padding:7px 8px !important;
  }
  body.battle-mode .card-real-figure{width:48px !important;height:58px !important}
  body.battle-mode .card-name{font-size:12px !important}
  body.battle-mode .card-slot{font-size:8px !important}
  body.battle-mode .card-role-label{font-size:7px !important}
  body.battle-mode .card-role-icon{font-size:12px !important}
  body.battle-mode .card-power{width:30px !important;height:30px !important;font-size:16px !important}
}


/* ==============================================================
   A010R14 · Cartas compactas y claras
   Orden: Nombre · Ataque/Defensa · Nº · Icono de parte
   Debajo: figura real de la carta.
   ============================================================== */
body.battle-mode .cards-grid{
  gap:10px !important;
}
body.battle-mode .card-btn{
  grid-template-columns:1fr !important;
  grid-template-rows:auto 1fr !important;
  min-height:108px !important;
  padding:8px 10px 10px !important;
  row-gap:8px !important;
  align-items:stretch !important;
}
body.battle-mode .card-head{
  grid-column:1 !important;
  grid-row:1 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:8px !important;
  min-width:0 !important;
}
body.battle-mode .card-title{
  min-width:0 !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  font-size:12px !important;
  line-height:1.06 !important;
  font-weight:950 !important;
  color:#f6fbff !important;
  text-align:left !important;
  flex:1 1 auto !important;
}
body.battle-mode .card-meta{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
}
body.battle-mode .card-role-mini,
body.battle-mode .card-part-mini{
  display:grid !important;
  place-items:center !important;
  width:24px !important;
  height:24px !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  font-size:13px !important;
  line-height:1 !important;
}
body.battle-mode .card-btn.attack .card-role-mini{
  color:#ffb8ae !important;
  border-color:rgba(244,132,117,.45) !important;
  background:rgba(119,36,31,.28) !important;
}
body.battle-mode .card-btn.defense .card-role-mini{
  color:#acd7ff !important;
  border-color:rgba(116,178,235,.45) !important;
  background:rgba(24,58,96,.28) !important;
}
body.battle-mode .card-power-mini{
  display:grid !important;
  place-items:center !important;
  width:28px !important;
  height:28px !important;
  border-radius:999px !important;
  font-size:17px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.22) !important;
}
body.battle-mode .card-btn.attack .card-power-mini{
  background:linear-gradient(180deg,rgba(160,56,49,.45),rgba(95,30,26,.55)) !important;
  border:1px solid rgba(244,132,117,.58) !important;
  color:#ffe5df !important;
}
body.battle-mode .card-btn.defense .card-power-mini{
  background:linear-gradient(180deg,rgba(55,108,160,.45),rgba(24,58,96,.58)) !important;
  border:1px solid rgba(116,178,235,.58) !important;
  color:#e4f4ff !important;
}
body.battle-mode .card-real-figure{
  grid-column:1 !important;
  grid-row:2 !important;
  width:78px !important;
  height:54px !important;
  justify-self:flex-start !important;
  align-self:end !important;
}
body.battle-mode .card-real-figure img{
  object-fit:contain !important;
  object-position:left center !important;
}
body.battle-mode .card-main,
body.battle-mode .card-side,
body.battle-mode .card-kind,
body.battle-mode .card-level,
body.battle-mode .card-part,
body.battle-mode .card-burn,
body.battle-mode .card-name,
body.battle-mode .card-slot,
body.battle-mode .card-role,
body.battle-mode .card-power{display:none !important}
@media (min-width:1000px) and (max-height:780px){
  body.battle-mode .card-btn{
    min-height:96px !important;
    padding:7px 8px 8px !important;
  }
  body.battle-mode .card-title{font-size:11px !important}
  body.battle-mode .card-role-mini,
  body.battle-mode .card-part-mini{width:22px !important;height:22px !important;font-size:12px !important}
  body.battle-mode .card-power-mini{width:26px !important;height:26px !important;font-size:15px !important}
  body.battle-mode .card-real-figure{width:72px !important;height:48px !important}
}


/* ==============================================================
   A010R15 · CARTA SIMPLE Y LEGIBLE
   ARRIBA: NOMBRE + ATAQUE/DEFENSA + Nº
   DEBAJO: FOTO REAL CENTRADA
   ============================================================== */
body.battle-mode .card-btn{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto 1fr !important;
  min-height:112px !important;
  padding:9px 10px 10px !important;
  row-gap:8px !important;
  overflow:hidden !important;
}
body.battle-mode .card-head{
  grid-column:1 !important;
  grid-row:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  min-width:0 !important;
}
body.battle-mode .card-title{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:950 !important;
  color:#f6fbff !important;
  text-align:left !important;
}
body.battle-mode .card-combat{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  min-width:0 !important;
}
body.battle-mode .card-role-icon{
  display:grid !important;
  place-items:center !important;
  width:25px !important;
  height:25px !important;
  border-radius:8px !important;
  font-size:14px !important;
  line-height:1 !important;
}
body.battle-mode .card-role-label{
  font-size:8px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.06em !important;
}
body.battle-mode .card-btn.attack .card-role-icon,
body.battle-mode .card-btn.attack .card-role-label{
  color:#ffb4aa !important;
}
body.battle-mode .card-btn.attack .card-role-icon{
  background:rgba(128,38,33,.34) !important;
  border:1px solid rgba(244,132,117,.48) !important;
}
body.battle-mode .card-btn.defense .card-role-icon,
body.battle-mode .card-btn.defense .card-role-label{
  color:#acd8ff !important;
}
body.battle-mode .card-btn.defense .card-role-icon{
  background:rgba(25,61,101,.34) !important;
  border:1px solid rgba(116,178,235,.48) !important;
}
body.battle-mode .card-power{
  display:grid !important;
  place-items:center !important;
  width:28px !important;
  min-width:28px !important;
  height:28px !important;
  border-radius:999px !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 4px 10px rgba(0,0,0,.22) !important;
}
body.battle-mode .card-btn.attack .card-power{
  background:linear-gradient(180deg,#a64f45,#6d2b27) !important;
  border:1px solid rgba(255,153,139,.64) !important;
}
body.battle-mode .card-btn.defense .card-power{
  background:linear-gradient(180deg,#3479ad,#214b73) !important;
  border:1px solid rgba(139,201,255,.64) !important;
}
body.battle-mode .card-real-figure{
  grid-column:1 !important;
  grid-row:2 !important;
  width:100% !important;
  height:68px !important;
  display:grid !important;
  place-items:center !important;
  justify-self:stretch !important;
  align-self:stretch !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,rgba(7,13,22,.18),rgba(4,9,16,.38)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.battle-mode .card-real-figure img{
  width:88% !important;
  height:88% !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:auto !important;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.38)) !important;
}
/* Anula restos de diseños anteriores. */
body.battle-mode .card-meta,
body.battle-mode .card-main,
body.battle-mode .card-side,
body.battle-mode .card-kind,
body.battle-mode .card-level,
body.battle-mode .card-part,
body.battle-mode .card-burn,
body.battle-mode .card-slot,
body.battle-mode .card-role,
body.battle-mode .card-power-mini,
body.battle-mode .card-role-mini,
body.battle-mode .card-part-mini{display:none !important}
@media (min-width:1000px) and (max-height:780px){
  body.battle-mode .card-btn{min-height:102px !important;padding:8px 9px !important;row-gap:7px !important}
  body.battle-mode .card-title{font-size:11px !important}
  body.battle-mode .card-role-icon{width:23px !important;height:23px !important;font-size:13px !important}
  body.battle-mode .card-role-label{font-size:7px !important}
  body.battle-mode .card-power{width:26px !important;min-width:26px !important;height:26px !important;font-size:15px !important}
  body.battle-mode .card-real-figure{height:60px !important}
}


/* ==============================================================
   A010R15R4 · CARTA SIMPLE FINAL
   ARRIBA: icono ataque/defensa + nombre de carta
   DEBAJO: foto de la parte + número
   ============================================================ */
body.battle-mode .card-btn{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto 1fr !important;
  row-gap:8px !important;
  min-height:112px !important;
  padding:9px 10px 10px !important;
  overflow:hidden !important;
}
body.battle-mode .card-head-r15r4{
  grid-column:1 !important;
  grid-row:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  min-width:0 !important;
  width:100% !important;
}
body.battle-mode .card-head-r15r4 .card-role-icon{
  flex:0 0 auto !important;
  display:grid !important;
  place-items:center !important;
  width:26px !important;
  height:26px !important;
  border-radius:8px !important;
  font-size:14px !important;
  line-height:1 !important;
}
body.battle-mode .card-btn.attack .card-head-r15r4 .card-role-icon{
  color:#ffb4aa !important;
  background:rgba(128,38,33,.34) !important;
  border:1px solid rgba(244,132,117,.48) !important;
}
body.battle-mode .card-btn.defense .card-head-r15r4 .card-role-icon{
  color:#acd8ff !important;
  background:rgba(25,61,101,.34) !important;
  border:1px solid rgba(116,178,235,.48) !important;
}
body.battle-mode .card-head-r15r4 .card-role-label{
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:950 !important;
  color:#f6fbff !important;
  text-align:left !important;
}
body.battle-mode .card-body-r15r4{
  grid-column:1 !important;
  grid-row:2 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 36px !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}
body.battle-mode .card-body-r15r4 .card-real-figure{
  width:100% !important;
  height:68px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  border-radius:14px !important;
}
body.battle-mode .card-body-r15r4 .card-real-figure img{
  width:92% !important;
  height:92% !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:auto !important;
}
body.battle-mode .card-body-r15r4 .card-power{
  display:grid !important;
  place-items:center !important;
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  color:#fff !important;
  margin:0 !important;
  float:none !important;
  align-self:center !important;
}
body.battle-mode .card-btn.attack .card-body-r15r4 .card-power{
  background:linear-gradient(180deg,#a64f45,#6d2b27) !important;
  border:1px solid rgba(255,153,139,.68) !important;
}
body.battle-mode .card-btn.defense .card-body-r15r4 .card-power{
  background:linear-gradient(180deg,#3479ad,#214b73) !important;
  border:1px solid rgba(139,201,255,.68) !important;
}
/* Oculta restos de layouts previos, sin tocar la foto real ni el número nuevo. */
body.battle-mode .card-title,
body.battle-mode .card-combat,
body.battle-mode .card-main,
body.battle-mode .card-side,
body.battle-mode .card-kind,
body.battle-mode .card-level,
body.battle-mode .card-part,
body.battle-mode .card-burn,
body.battle-mode .card-slot,
body.battle-mode .card-role,
body.battle-mode .card-power-mini,
body.battle-mode .card-role-mini,
body.battle-mode .card-part-mini,
body.battle-mode .card-meta{display:none !important}
body.battle-mode .card-head-r15r4 .card-role-icon,
body.battle-mode .card-head-r15r4 .card-role-label,
body.battle-mode .card-body-r15r4 .card-power{display:grid !important}
body.battle-mode .card-head-r15r4 .card-role-label{display:block !important}
@media (min-width:1000px) and (max-height:780px){
  body.battle-mode .card-btn{min-height:102px !important;padding:8px 9px !important;row-gap:7px !important}
  body.battle-mode .card-head-r15r4 .card-role-icon{width:23px !important;height:23px !important;font-size:13px !important}
  body.battle-mode .card-head-r15r4 .card-role-label{font-size:11px !important}
  body.battle-mode .card-body-r15r4 .card-real-figure{height:60px !important}
  body.battle-mode .card-body-r15r4{grid-template-columns:minmax(0,1fr) 32px !important;gap:7px !important}
  body.battle-mode .card-body-r15r4 .card-power{width:30px !important;min-width:30px !important;height:30px !important;font-size:16px !important}
}


/* ==============================================================
   A010R15R5 · NÚMERO A LA DERECHA DE LA FOTO
   Solo cambia la posición del número. El resto de la carta queda igual.
   ============================================================ */
body.battle-mode .card-body-r15r4{
  position:relative !important;
  display:block !important;
  min-width:0 !important;
  width:100% !important;
}
body.battle-mode .card-body-r15r4 .card-real-figure{
  width:calc(100% - 44px) !important;
  height:68px !important;
  margin:0 44px 0 0 !important;
  display:grid !important;
  place-items:center !important;
}
body.battle-mode .card-body-r15r4 .card-power{
  position:absolute !important;
  right:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  z-index:3 !important;
}
@media (min-width:1000px) and (max-height:780px){
  body.battle-mode .card-body-r15r4 .card-real-figure{
    width:calc(100% - 40px) !important;
    height:60px !important;
    margin-right:40px !important;
  }
}


/* ==============================================================
   A011 · INICIO + WALLET + DEMO REAL
   A010R15R5 permanece congelado como base de arena/cartas.
   ============================================================ */
.home-actions.wallet-actions{
  max-width:760px !important;
  width:100% !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:10px !important;
}
.home-actions.wallet-actions .btn{
  flex:1 1 0 !important;
  min-width:0 !important;
  white-space:nowrap !important;
  padding-left:14px !important;
  padding-right:14px !important;
}
.home-actions.wallet-actions #walletPlayBtn{flex:1.18 1 0 !important}
.home-actions.wallet-actions #botBtn{flex:.78 1 0 !important}
.btn-ronin.disconnect-mode{
  border-color:#8b4850 !important;
  background:linear-gradient(180deg,#64313a,#3a1d24) !important;
  color:#fff !important;
}

/* Demo A016R1: nueve gladiadores, uno por cada clase, en un roster 3x3 estable. */
.demo-real-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
}
.demo-axie-pick{
  min-height:180px !important;
  padding:10px 12px 12px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  overflow:hidden !important;
}
.demo-pick-image{
  width:100% !important;
  height:118px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-bottom:3px !important;
}
.demo-pick-image img{
  display:block !important;
  width:92% !important;
  height:112px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.28)) !important;
}
.demo-axie-pick strong{
  font-size:14px !important;
  line-height:1.1 !important;
}
.demo-axie-pick small{
  font-size:10px !important;
  color:var(--muted) !important;
}
.demo-axie-pick.in-team{
  opacity:.60 !important;
  box-shadow:inset 0 0 0 2px rgba(83,183,239,.35) !important;
}
.picked-demo-image{
  width:54px !important;
  height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 54px !important;
}
.picked-demo-image img{
  max-width:54px !important;
  max-height:46px !important;
  object-fit:contain !important;
}
.picked-demo{display:flex !important;align-items:center !important;gap:9px !important}

@media(max-width:720px){
  .home-actions.wallet-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  .demo-real-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}


/* ==============================================================
   A011R1 · INICIO COMPACTO + SESIÓN WALLET PERSISTENTE
   Solo pantalla de inicio. Arena A010R15R5 permanece congelada.
   ============================================================ */
/* A016R40R143 · HOME SESSION VISUAL CONTRACT
   The legacy walletBox is only a transient connecting status. The generic
   .hidden utility must win over the older A011R1 display:flex rule. */
.home-panel .wallet-box.hidden{display:none !important}
.wallet-account.detached .wallet-dot{background:#d2a84a;box-shadow:0 0 0 3px rgba(210,168,74,.15)}
.wallet-account.detached .wallet-account-btn{border-color:#6f5a32}

.home-panel .wallet-box{
  max-width:520px !important;
  min-height:40px !important;
  margin:14px auto 8px !important;
  padding:8px 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  text-align:center !important;
  white-space:nowrap !important;
}
.home-panel .wallet-line{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:12px !important;
}
.home-panel .wallet-address,
.home-panel .wallet-count{
  margin:0 !important;
  font-size:11px !important;
  line-height:1 !important;
}
.home-panel .wallet-address{color:#a7c4e7 !important}
.home-panel .wallet-count{color:#8fa8c7 !important}
.home-panel .wallet-actions{
  max-width:560px !important;
  gap:8px !important;
  margin-top:9px !important;
}
.home-panel .wallet-actions .btn{
  min-height:40px !important;
  padding:8px 12px !important;
  border-radius:11px !important;
  font-size:13px !important;
  line-height:1 !important;
  letter-spacing:.01em !important;
}
.home-panel .wallet-actions #connectWalletBtn{flex:1.08 1 0 !important}
.home-panel .wallet-actions #walletPlayBtn{flex:.72 1 0 !important}
.home-panel .wallet-actions #botBtn{flex:.58 1 0 !important}
.home-panel .hint{
  margin-top:9px !important;
  font-size:12px !important;
}
@media(max-width:620px){
  .home-panel .wallet-box{white-space:normal !important;flex-wrap:wrap !important}
  .home-panel .wallet-actions{display:flex !important;flex-wrap:wrap !important}
  .home-panel .wallet-actions .btn{min-width:120px !important}
}

/* ==============================================================
   A011R1R1 · HOME PRIMARY CTA + VERIFIED RONIN SESSION
   Solo HOME / sesión. Arena y cartas A010R15R5 permanecen intactas.
   ============================================================ */
.home-panel{
  position:relative !important;
  max-width:620px !important;
}
.home-wallet-status{
  max-width:430px !important;
  margin:14px auto 4px !important;
}
.wallet-account{
  position:absolute;
  top:18px;
  right:18px;
  z-index:30;
  text-align:left;
}
.wallet-account-btn{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  max-width:300px;
  padding:7px 10px;
  border:1px solid #315f8d;
  border-radius:999px;
  background:#101a2b;
  color:#eaf2ff;
  font:inherit;
  font-size:11px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.wallet-account-btn:hover{border-color:#439eea;background:#13223a}
.wallet-account-btn .wallet-dot{background:#2c9fff;box-shadow:0 0 0 3px rgba(44,159,255,.15);flex:0 0 auto}
.wallet-account-address{color:#b5d2f2;font-variant-numeric:tabular-nums}
.wallet-account-count{color:#8ea9c8;white-space:nowrap}
.wallet-account-chevron{color:#8ea9c8;font-size:14px;margin-left:1px;transform:translateY(-1px)}
.wallet-menu{
  position:absolute;
  top:43px;
  right:0;
  width:290px;
  padding:8px;
  border:1px solid #334763;
  border-radius:13px;
  background:#121a29;
  box-shadow:0 18px 45px rgba(0,0,0,.42);
}
.wallet-menu-summary{
  display:grid;
  gap:3px;
  padding:7px 8px 10px;
  border-bottom:1px solid #26354d;
  margin-bottom:5px;
}
.wallet-menu-summary strong{font-size:12px;color:#f4f7fb}
.wallet-menu-summary span{font-size:10px;color:#91a7c3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.wallet-menu-action{
  width:100%;
  min-height:35px;
  padding:8px 9px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#dce8f8;
  text-align:left;
  font-weight:800;
  font-size:11px;
  cursor:pointer;
}
.wallet-menu-action:hover{background:#1b2940}
.wallet-menu-action.danger{color:#ff9b9b}
.wallet-menu-action.danger:hover{background:#351e26}
.wallet-menu-action:disabled{opacity:.45;cursor:wait}
.wallet-manage-help{
  margin:4px 6px 7px;
  padding:8px 9px;
  border:1px solid #2c4567;
  border-radius:9px;
  background:#0d1726;
  color:#9db5d3;
  font-size:10px;
  line-height:1.45;
}
.home-panel .wallet-actions{
  max-width:470px !important;
  min-height:44px;
  align-items:stretch !important;
}
.home-panel .wallet-actions #connectWalletBtn{
  flex:1.28 1 0 !important;
  border-color:#327fc3 !important;
  background:linear-gradient(180deg,#173e65,#112b48) !important;
  color:#eff8ff !important;
}
.home-panel .wallet-actions #walletPlayBtn{
  flex:1.55 1 0 !important;
  min-height:46px !important;
  font-size:14px !important;
  letter-spacing:.035em !important;
}
.home-panel .wallet-actions #botBtn{
  flex:.82 1 0 !important;
  background:#1b2435 !important;
}
.home-panel .field{margin-top:30px !important}
.home-panel .error{
  max-width:500px;
  margin:10px auto 0;
  font-size:11px;
  line-height:1.4;
}
@media(max-width:720px){
  .home-panel{padding-top:72px !important}
  .wallet-account{top:14px;left:14px;right:14px;display:flex;justify-content:center}
  .wallet-account-btn{max-width:100%;width:auto}
  .wallet-menu{left:0;right:0;margin:auto;width:min(300px,calc(100vw - 48px))}
}
@media(max-width:520px){
  .home-panel .wallet-actions{flex-direction:column !important;max-width:360px !important}
  .home-panel .wallet-actions .btn{width:100% !important;min-width:0 !important}
}


/* ==============================================================
   A011R1R2 · RONIN DISCONNECT UX
   El núcleo A010R15R5 permanece intacto.
   ============================================================ */
.wallet-manage-help{
  display:grid;
  gap:7px;
  margin:6px 4px 8px !important;
  padding:10px 11px !important;
  border-color:#35577f !important;
  background:#0d1727 !important;
  color:#a9bfd9 !important;
  font-size:10px !important;
  line-height:1.45 !important;
}
.wallet-manage-help strong{
  color:#eef5ff;
  font-size:11px;
}
.wallet-manage-help span{display:block}
.wallet-manage-help ol{
  margin:1px 0 1px 17px;
  padding:0;
  display:grid;
  gap:3px;
}
.wallet-manage-help b{color:#dcecff}
.wallet-menu-action.danger{
  margin-top:2px;
  border:1px solid rgba(255,105,105,.16);
}


/* ==============================================================
   A012R1 · SLP ACCOUNT FOUNDATION
   Lectura real de SLP en Ronin. Sin movimiento de fondos todavía.
   ============================================================ */
.slp-economy{
  margin:7px 0 6px;
  padding:9px;
  border:1px solid #2b3d58;
  border-radius:10px;
  background:linear-gradient(180deg,#0e1828,#0b1422);
}
.slp-economy-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}
.slp-economy-head strong{
  color:#eef5ff;
  font-size:11px;
  letter-spacing:.09em;
}
.slp-network-state{
  padding:2px 6px;
  border:1px solid #2f5279;
  border-radius:999px;
  color:#8fb8e3;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}
.slp-network-state.error{
  border-color:#764047;
  color:#ff9c9c;
}
.slp-balances{
  display:grid;
  gap:3px;
}
.slp-balance-row{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 25px;
  align-items:baseline;
  gap:6px;
  min-height:24px;
  padding:4px 6px;
  border-radius:7px;
  background:#111d30;
}
.slp-balance-row.game{background:#151f31}
.slp-balance-row>span{
  color:#8fa8c7;
  font-size:8px;
  font-weight:900;
  letter-spacing:.07em;
}
.slp-balance-row>strong{
  color:#f3f7fd;
  font-size:14px;
  line-height:1;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.slp-balance-row>small{
  color:#8fa8c7;
  font-size:8px;
  font-weight:900;
}
.slp-economy-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:7px;
}
.slp-economy-btn{
  min-height:30px;
  border:1px solid #315071;
  border-radius:7px;
  background:#16243a;
  color:#d9e8fa;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
}
.slp-economy-btn:disabled{
  opacity:.42;
  cursor:not-allowed;
}
.slp-economy-note{
  margin:7px 2px 1px;
  color:#7f96b3;
  font-size:8.5px;
  line-height:1.35;
}


/* ==========================================================
   A012R2 · PLAYER HUB TABS · PLACEMENT SHELL
   Las pestañas viven SOLO sobre la columna derecha y debajo
   de la barra de filtros. En esta fase solo EQUIPO está activo.
   ========================================================== */
.player-hub-rail{min-width:0}
.player-hub-tabs{display:none}

#lobby .picker-layout.wallet-layout .player-hub-rail{
  position:sticky;
  top:8px;
  align-self:start;
  min-width:0;
}

#lobby .picker-layout.wallet-layout .player-hub-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  width:100%;
  margin:0 0 6px;
}

#lobby .player-hub-tab{
  min-width:0;
  height:29px;
  padding:0 4px;
  border:1px solid #33425b;
  border-radius:8px;
  background:#111a2a;
  color:#8f9eb7;
  font-size:8.5px;
  line-height:1;
  font-weight:950;
  letter-spacing:.045em;
  cursor:pointer;
}

#lobby .player-hub-tab.active{
  border-color:#b88b32;
  background:linear-gradient(180deg,#2a2416,#1b1a16);
  color:#f0c861;
  box-shadow:inset 0 -2px 0 #c99a3b;
}

#lobby .player-hub-tab:disabled{
  opacity:1;
  cursor:default;
}

/* El sticky pertenece al rail completo para que pestañas + panel sean una unidad. */
#lobby .picker-layout.wallet-layout .wallet-team-sidebar{
  position:static;
  top:auto;
  margin-top:0;
}

@media(max-width:980px){
  #lobby .picker-layout.wallet-layout .player-hub-rail{
    position:static;
    order:2;
  }
  #lobby .picker-layout.wallet-layout .player-hub-tabs{
    margin-top:4px;
  }
}

/* ==========================================================
   A012R3 · TOKEN HUB
   TOKEN usa la misma arquitectura validada de EQUIPO:
   filtros arriba, campo grande a la izquierda, panel contextual
   a la derecha. No altera geometría de las pestañas.
   ========================================================== */
#tokenUnifiedBar.wallet-unified-bar{
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px,1.15fr) 118px minmax(220px,.90fr) minmax(560px,2.25fr) 225px;
  gap:8px;
  align-items:end;
  margin:8px 0 10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#0f1522;
}
#tokenUnifiedBar.hidden{display:none!important}
#tokenUnifiedBar .unified-search{grid-column:1}
#tokenUnifiedBar .unified-part-type{grid-column:2}
#tokenUnifiedBar .unified-part-search{grid-column:3}
#tokenUnifiedBar .unified-class-filter{grid-column:4}
#tokenUnifiedBar .unified-pagination-shell{grid-column:5}
#tokenUnifiedBar .wallet-search,
#tokenUnifiedBar .part-filter-field,
#tokenUnifiedBar .unified-class-filter{min-width:0;display:grid;gap:4px}
#tokenUnifiedBar .wallet-search>span,
#tokenUnifiedBar .part-filter-field>span,
#tokenUnifiedBar .unified-label{
  height:9px;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.08em;line-height:9px;white-space:nowrap
}
#tokenUnifiedBar .wallet-search input,
#tokenUnifiedBar .part-filter-field input,
#tokenUnifiedBar .part-filter-field select{
  width:100%;height:34px;min-width:0;border:1px solid #35425b;border-radius:9px;background:#0c1422;color:#fff;padding:0 10px;outline:none
}
#tokenUnifiedBar .wallet-search input:focus,
#tokenUnifiedBar .part-filter-field select:focus{border-color:#5dafff;box-shadow:0 0 0 2px rgba(93,175,255,.10)}
#tokenUnifiedBar .token-state-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;height:34px}
#tokenUnifiedBar .token-state-tab{
  min-width:0;height:34px;padding:0 6px;border:1px solid #35445f;border-radius:8px;background:#151e30;color:#a9b6cb;
  font-size:8.5px;line-height:1;font-weight:900;cursor:pointer;white-space:nowrap
}
#tokenUnifiedBar .token-state-tab.active{color:#07111d;background:#f0b63d;border-color:#f0b63d}
#tokenUnifiedBar .unified-pagination-shell{position:relative;height:47px;min-width:0;align-self:end}
#tokenUnifiedBar .unified-pagination-shell .wallet-preview-status{
  position:absolute;top:0;left:0;right:0;height:9px;margin:0;padding:0 2px;color:#8fa4c2;font-size:8px;line-height:9px;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none
}
#tokenUnifiedBar .unified-pagination-shell .wallet-page-controls{
  position:absolute;left:0;right:0;bottom:0;height:34px;display:grid;grid-template-columns:34px minmax(120px,1fr) 34px;align-items:center;gap:5px
}
#tokenUnifiedBar .unified-pagination-shell .wallet-page-controls strong{min-width:0;width:100%;text-align:center;font-size:9.5px;white-space:nowrap}
#tokenUnifiedBar .unified-pagination-shell .mini-nav{width:34px;height:34px}

#lobby .token-main{
  min-height:520px;
  border:1px solid #2f3f5a;
  border-radius:14px;
  background:#101827;
  overflow:hidden;
}
#lobby .token-main-head{
  min-height:62px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-bottom:1px solid #2a3850;background:linear-gradient(180deg,#152033,#111a2a)
}
#lobby .token-kicker{display:block;color:#e5b94d;font-size:8.5px;font-weight:950;letter-spacing:.11em}
#lobby .token-main-head h3{margin:4px 0 0;font-size:18px;line-height:1;color:#f2f5fa}
#lobby .token-main-count{padding:5px 8px;border:1px solid #34435d;border-radius:999px;color:#9fb0c8;font-size:9px;font-weight:900}
#lobby .token-ledger-head{
  display:grid;grid-template-columns:120px minmax(170px,1.1fr) minmax(180px,1.2fr) 120px 120px;gap:8px;
  padding:9px 14px;border-bottom:1px solid #26344b;color:#7f91ac;background:#0d1522;font-size:8px;font-weight:950;letter-spacing:.08em
}
#lobby .token-ledger{min-height:455px}
#lobby .token-empty-state{
  min-height:455px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:#9badc5
}
#lobby .token-empty-icon{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin-bottom:13px;border:1px solid #3d4f6c;
  background:radial-gradient(circle at 35% 30%,#2b3d5c,#141d2d 68%);color:#eac35f;font-size:13px;font-weight:950;letter-spacing:.06em
}
#lobby .token-empty-state strong{color:#e8edf5;font-size:14px}
#lobby .token-empty-state p{max-width:460px;margin:7px 0 0;font-size:10px;line-height:1.5}

#lobby .token-sidebar{
  width:100%;min-width:0;margin:0;padding:11px;overflow:hidden;
}
#lobby .token-sidebar-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
#lobby .token-chain-badge{
  display:inline-flex;align-items:center;justify-content:center;margin-left:5px;padding:2px 6px;border:1px solid #4a5d78;border-radius:999px;
  color:#a9b9cf;background:#172236;font-size:8px;font-weight:950;vertical-align:1px
}
#lobby .token-balance-stack{display:grid;gap:7px}
#lobby .token-balance-card{
  position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:2px 8px;
  min-height:68px;padding:10px;border:1px solid #31405a;border-radius:11px;background:#111a29
}
#lobby .token-balance-card.wallet{border-color:#2f5274;background:#101d2d}
#lobby .token-balance-card.game{border-color:#5a4927;background:#1d1b15}
#lobby .token-balance-card>span{grid-column:1;color:#8fa4c2;font-size:8.5px;font-weight:950;letter-spacing:.08em}
#lobby .token-balance-card>strong{grid-column:2;grid-row:1/3;color:#fff;font-size:18px;line-height:1;white-space:nowrap}
#lobby .token-balance-card>strong b{font:inherit}
#lobby .token-balance-card>strong small{font-size:8px;color:#9fb0c8}
#lobby .token-balance-card>em{grid-column:1;color:#71839d;font-size:8px;font-style:normal}
#lobby .token-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}
#lobby .token-mini-grid>div{padding:9px;border:1px solid #2f3d55;border-radius:9px;background:#101827}
#lobby .token-mini-grid span{display:block;color:#7f91ac;font-size:7.5px;font-weight:950;letter-spacing:.08em}
#lobby .token-mini-grid strong{display:block;margin-top:4px;color:#e9eef6;font-size:11px}
#lobby .token-sidebar-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
#lobby .token-sidebar-actions .btn{min-height:34px;padding:8px 6px;font-size:9px}
#lobby .token-sidebar-actions .btn:disabled{opacity:.42;cursor:not-allowed}
#lobby .token-vault-note{margin:8px 1px 0;color:#8295ae;font-size:8.5px;line-height:1.4}
#lobby .token-vault-note strong{color:#b7c4d6}

@media(min-width:1450px){
  #tokenUnifiedBar.wallet-unified-bar{grid-template-columns:minmax(260px,1.10fr) 112px minmax(190px,.82fr) minmax(520px,2.35fr) 215px;gap:7px}
}
@media(min-width:1750px){
  #tokenUnifiedBar.wallet-unified-bar{grid-template-columns:minmax(300px,1.20fr) 120px minmax(230px,.95fr) minmax(620px,2.55fr) 225px}
}
@media(max-width:1449px){
  #tokenUnifiedBar.wallet-unified-bar{grid-template-columns:minmax(240px,1fr) 120px minmax(220px,1fr) minmax(0,1.6fr)}
  #tokenUnifiedBar .unified-search{grid-column:1}
  #tokenUnifiedBar .unified-part-type{grid-column:2}
  #tokenUnifiedBar .unified-part-search{grid-column:3}
  #tokenUnifiedBar .unified-class-filter{grid-column:4}
  #tokenUnifiedBar .unified-pagination-shell{grid-column:1/-1;width:230px;justify-self:end;margin-top:2px}
}
@media(max-width:950px){
  #tokenUnifiedBar.wallet-unified-bar{grid-template-columns:1fr 120px}
  #tokenUnifiedBar .unified-search{grid-column:1}
  #tokenUnifiedBar .unified-part-type{grid-column:2}
  #tokenUnifiedBar .unified-part-search,#tokenUnifiedBar .unified-class-filter,#tokenUnifiedBar .unified-pagination-shell{grid-column:1/-1}
  #lobby .token-ledger-head{grid-template-columns:90px minmax(140px,1fr) minmax(140px,1fr) 95px 95px}
}
@media(max-width:560px){
  #tokenUnifiedBar.wallet-unified-bar{grid-template-columns:1fr}
  #tokenUnifiedBar .unified-search,#tokenUnifiedBar .unified-part-type,#tokenUnifiedBar .unified-part-search,#tokenUnifiedBar .unified-class-filter,#tokenUnifiedBar .unified-pagination-shell{grid-column:1;width:100%}
  #lobby .token-ledger-head{display:none}
  #lobby .token-main{min-height:360px}
  #lobby .token-ledger,#lobby .token-empty-state{min-height:300px}
}

/* ============================================================
   A013R1 · SLP VAULT ENGINE
   ============================================================ */
.vault-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(5,9,16,.78);
  backdrop-filter:blur(4px);
}
.vault-modal.hidden{display:none!important}
.vault-modal-card{
  width:min(460px,calc(100vw - 32px));
  border:1px solid #344763;
  border-radius:18px;
  background:#111a2a;
  box-shadow:0 28px 80px rgba(0,0,0,.48);
  padding:18px;
}
.vault-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.vault-modal-head h3{margin:4px 0 0;font-size:20px;letter-spacing:.01em}
.vault-modal-close{
  width:34px;height:34px;border-radius:10px;border:1px solid #364965;background:#182338;color:#c8d4e5;
  font-size:22px;line-height:1;cursor:pointer
}
.vault-modal-close:hover{background:#22324d}
.vault-modal-intro{margin:0 0 14px;color:#9db0c8;font-size:13px;line-height:1.45}
.vault-amount-field{display:block;color:#91a4bd;font-size:10px;font-weight:800;letter-spacing:.08em}
.vault-amount-input{
  margin-top:6px;display:flex;align-items:center;border:1px solid #3a4e6d;border-radius:12px;background:#0d1523;overflow:hidden
}
.vault-amount-input input{
  flex:1;min-width:0;border:0!important;background:transparent!important;color:#fff!important;padding:13px 14px!important;
  font:700 20px/1 system-ui,sans-serif;outline:none
}
.vault-amount-input b{padding:0 14px;color:#f1c458;font-size:12px}
.vault-quick-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.vault-quick-amounts button{
  border:1px solid #334863;border-radius:9px;background:#172236;color:#aebed1;padding:8px 5px;font-size:10px;font-weight:800;cursor:pointer
}
.vault-quick-amounts button:hover{border-color:#5a7295;color:#fff}
.vault-tx-steps{margin-top:14px;display:grid;gap:6px}
.vault-tx-step{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #293a54;border-radius:9px;background:#0e1726;color:#8fa1b9;font-size:11px
}
.vault-tx-step strong{margin-left:auto;color:#c7d4e6;font-size:9px;letter-spacing:.05em}
.vault-tx-step.active{border-color:#6a5423;background:#211d12;color:#f0c75d}
.vault-tx-step.done{border-color:#285543;background:#10241e;color:#7fd8ad}
.vault-tx-step.error{border-color:#70323b;background:#2a141a;color:#ff8894}
.vault-modal-error{min-height:18px;margin:10px 0 0;color:#ff7f8c;font-size:11px;line-height:1.4}
.vault-modal-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:8px;margin-top:10px}
.vault-modal-actions .btn{min-height:42px}
.vault-modal.busy .vault-modal-close,
.vault-modal.busy #vaultModalCancel{opacity:.35;pointer-events:none}
.vault-not-configured{opacity:.72}

#lobby .token-ledger-row{
  display:grid;
  grid-template-columns:140px minmax(160px,1fr) minmax(190px,1.25fr) 110px 110px;
  align-items:center;
  min-height:46px;
  border-bottom:1px solid #24344b;
  padding:0 16px;
  color:#a9bbd1;
  font-size:11px;
}
#lobby .token-ledger-row:last-child{border-bottom:0}
#lobby .token-ledger-row .movement-kind{font-weight:850;color:#e9eef7}
#lobby .token-ledger-row .movement-ref{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#7fa7d9;font-size:10px}
#lobby .token-ledger-row .movement-amount{font-weight:900;text-align:right}
#lobby .token-ledger-row .movement-amount.positive{color:#7fd8ad}
#lobby .token-ledger-row .movement-amount.negative{color:#ff8995}
#lobby .token-ledger-row .movement-balance{text-align:right;font-weight:800;color:#e4ebf5}
#lobby .token-ledger-row time{font-size:10px;color:#8194ad}

@media (max-width:1100px){
  #lobby .token-ledger-row{grid-template-columns:105px minmax(120px,1fr) minmax(140px,1fr) 90px 90px;padding:0 10px}
}
@media (max-width:760px){
  .vault-modal{padding:10px}
  .vault-modal-card{padding:14px}
  #lobby .token-ledger-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 12px}
  #lobby .token-ledger-row .movement-ref{grid-column:1/-1}
  #lobby .token-ledger-row .movement-amount,#lobby .token-ledger-row .movement-balance{text-align:left}
}


/* ==============================================================
   A014R1 · COMBAT EXPERIENCE · LIVE SPINE EN ARENA
   Primer bloque visual: el Axie central deja de ser una captura
   estática cuando existen newGenes. El PNG queda solo como fallback.
   ============================================================== */
body.battle-mode .battle-fighter-live{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:visible!important;
  isolation:isolate;
}
body.battle-mode .battle-fighter-live .battle-live-fallback,
body.battle-mode .battle-fighter-live .battle-live-icon{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:grid;place-items:center;font-size:clamp(48px,6vw,84px);
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.46));
  transition:opacity .18s ease;
}
body.battle-mode .battle-fighter-live.is-live .battle-live-fallback,
body.battle-mode .battle-fighter-live.is-live .battle-live-icon{opacity:0}
body.battle-mode .battle-fighter-live .preview-spinner{z-index:3}
body.battle-mode .battle-fighter-live.is-live .preview-spinner{display:none!important}
body.battle-mode .battle-spine-canvas{
  position:absolute;inset:0;z-index:2;display:block;width:100%!important;height:100%!important;
  pointer-events:none;filter:drop-shadow(0 20px 15px rgba(0,0,0,.52));
  transform-origin:50% 55%;
}
/* Orientación canónica del render Mixer: rival izquierda y jugador derecha miran al centro. */
body.battle-mode #arenaA .battle-spine-canvas{transform:scaleX(-1)!important}
body.battle-mode #arenaB .battle-spine-canvas{transform:scaleX(1)!important}

@keyframes a014DuelEnterLeft{
  0%{transform:translateX(-32px) scale(.86);opacity:.15;filter:blur(3px)}
  72%{transform:translateX(4px) scale(1.035);opacity:1;filter:blur(0)}
  100%{transform:translateX(0) scale(1);opacity:1}
}
@keyframes a014DuelEnterRight{
  0%{transform:translateX(32px) scale(.86);opacity:.15;filter:blur(3px)}
  72%{transform:translateX(-4px) scale(1.035);opacity:1;filter:blur(0)}
  100%{transform:translateX(0) scale(1);opacity:1}
}
body.battle-mode #arenaA.duel-enter{animation:a014DuelEnterLeft .42s cubic-bezier(.2,.85,.2,1) both}
body.battle-mode #arenaB.duel-enter{animation:a014DuelEnterRight .42s cubic-bezier(.2,.85,.2,1) both}

body.battle-mode .combat-impact-flash{
  position:absolute;z-index:8;left:50%;top:48%;width:96px;height:96px;transform:translate(-50%,-50%);
  pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,245,190,.92) 0,rgba(255,196,71,.58) 18%,rgba(255,122,45,.18) 44%,transparent 70%);
  animation:a014Impact .68s cubic-bezier(.16,.82,.2,1) both;
}
body.battle-mode .combat-impact-flash.impact-left{left:30%}
body.battle-mode .combat-impact-flash.impact-right{left:70%}
body.battle-mode .combat-impact-flash i{
  position:absolute;left:50%;top:50%;width:150%;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,232,155,.9),transparent);transform-origin:center;
}
body.battle-mode .combat-impact-flash i:nth-child(1){transform:translate(-50%,-50%) rotate(18deg)}
body.battle-mode .combat-impact-flash i:nth-child(2){transform:translate(-50%,-50%) rotate(78deg)}
body.battle-mode .combat-impact-flash i:nth-child(3){transform:translate(-50%,-50%) rotate(138deg)}
@keyframes a014Impact{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-12deg)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.24) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.75) rotate(8deg)}
}

/* El canvas vivo recibe el gesto Spine; evitamos el viejo "rebote de foto" en su token. */
body.battle-mode .fighter:not(.attack):not(.hit):not(.ko) .fighter-token.mixer-fighter-token:has(.battle-fighter-live){animation:none!important}

@media(prefers-reduced-motion:reduce){
  body.battle-mode #arenaA.duel-enter,body.battle-mode #arenaB.duel-enter,
  body.battle-mode .combat-impact-flash{animation:none!important}
}


/* ============================================================
   A014R2 · POST-BATTLE FLOW · NO SALIR DEL JUEGO
   ============================================================ */
.end-panel .end-actions{
  width:min(100%,520px);
  margin:20px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:12px;
}
.end-panel .end-actions .btn{
  min-height:54px;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  letter-spacing:.02em;
}
.end-panel .end-actions .btn-secondary{
  background:#182338;
  border:1px solid #52647f;
  color:#f8f3e8;
  box-shadow:none;
}
.end-panel .end-actions .btn-secondary:hover{
  border-color:#89a2c3;
  background:#202e47;
}
@media (max-width:560px){
  .end-panel .end-actions{grid-template-columns:1fr;}
}


/* ============================================================
   A014R3 · COMBAT CINEMATIC · INTRIGA + DEFENSA + ATAQUE + CELEBRACIÓN
   ============================================================ */
body.battle-mode .arena{overflow:hidden!important;isolation:isolate}
body.battle-mode .fighter{z-index:5}
body.battle-mode .vs{z-index:3}
body.battle-mode .battle-message,body.battle-mode .round-result{z-index:20}

body.battle-mode .combat-prop{
  --prop-accent:#e7bd5f;position:absolute;z-index:9;top:45%;left:50%;width:118px;height:118px;
  transform:translate(-50%,-50%) scale(.55);opacity:0;pointer-events:none;filter:drop-shadow(0 16px 14px rgba(0,0,0,.5));
  transition:opacity .18s ease,transform .32s cubic-bezier(.18,.9,.2,1),filter .24s ease;
}
body.battle-mode .combat-prop.family-rock{--prop-accent:#f1c45b;--prop-deep:#7d5c20}
body.battle-mode .combat-prop.family-paper{--prop-accent:#79d483;--prop-deep:#285e34}
body.battle-mode .combat-prop.family-scissors{--prop-accent:#73c9ef;--prop-deep:#27637c}
body.battle-mode .combat-prop.side-left{left:29%}
body.battle-mode .combat-prop.side-right{left:71%}
body.battle-mode .combat-prop.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.battle-mode .combat-prop-label{
  position:absolute;left:50%;top:104%;transform:translateX(-50%);padding:4px 8px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--prop-accent) 58%,transparent);background:rgba(5,10,18,.82);color:#fff2cf;
  font-size:9px;font-weight:950;letter-spacing:.11em;white-space:nowrap;text-shadow:0 1px 3px #000;
}

/* DEFENSA I · escudo */
body.battle-mode .guard-shield{position:absolute;inset:9px 14px 13px;display:block}
body.battle-mode .shield-face{position:absolute;inset:0;border:5px solid var(--prop-accent);background:linear-gradient(145deg,rgba(255,255,255,.32),rgba(40,54,72,.88));clip-path:polygon(50% 0,93% 17%,84% 68%,50% 100%,16% 68%,7% 17%);box-shadow:inset 0 0 22px rgba(255,255,255,.2)}
body.battle-mode .shield-boss{position:absolute;left:50%;top:46%;width:25px;height:25px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 38% 32%,#fff6c7,var(--prop-accent) 42%,var(--prop-deep));border:2px solid rgba(255,255,255,.45)}

/* DEFENSA II · árbol */
body.battle-mode .guard-tree{position:absolute;inset:0;display:block}
body.battle-mode .guard-tree .tree-trunk{position:absolute;left:47px;top:48px;width:25px;height:63px;border-radius:15px 13px 8px 8px;background:linear-gradient(90deg,#61401f,#a36a2d 48%,#513417);transform:rotate(2deg);box-shadow:inset -5px 0 7px rgba(0,0,0,.28)}
body.battle-mode .guard-tree .tree-crown{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c8f4a3,var(--prop-accent) 35%,var(--prop-deep) 78%);border:3px solid color-mix(in srgb,var(--prop-accent) 72%,#fff 28%)}
body.battle-mode .guard-tree .c1{width:78px;height:64px;left:18px;top:6px}
body.battle-mode .guard-tree .c2{width:62px;height:54px;left:53px;top:22px}
body.battle-mode .guard-tree .tree-root{position:absolute;top:98px;width:56px;height:10px;border-radius:50%;background:#70491f}
body.battle-mode .guard-tree .r1{left:11px;transform:rotate(-15deg)}
body.battle-mode .guard-tree .r2{left:54px;transform:rotate(16deg)}

/* DEFENSA III · fortaleza */
body.battle-mode .guard-fortress{position:absolute;inset:5px 0;display:block}
body.battle-mode .fortress-wall{position:absolute;left:19px;right:19px;top:48px;height:56px;background:linear-gradient(#737d89,#3d4652);border:4px solid var(--prop-accent);clip-path:polygon(0 13%,10% 13%,10% 0,24% 0,24% 13%,38% 13%,38% 0,52% 0,52% 13%,66% 13%,66% 0,80% 0,80% 13%,100% 13%,100% 100%,0 100%)}
body.battle-mode .fortress-tower{position:absolute;top:22px;width:31px;height:82px;background:linear-gradient(90deg,#4a535e,#87929f,#444d58);border:4px solid var(--prop-accent)}
body.battle-mode .fortress-tower.t1{left:5px}.guard-fortress .fortress-tower.t2{right:5px}
body.battle-mode .fortress-gate{position:absolute;left:47px;top:72px;width:25px;height:33px;border-radius:14px 14px 0 0;background:#151d28;border:3px solid var(--prop-deep)}

/* ATAQUE I · espada */
body.battle-mode .weapon-sword{position:absolute;left:46px;top:3px;width:30px;height:112px;transform:rotate(38deg);display:block}
body.battle-mode .sword-blade{position:absolute;left:10px;top:0;width:12px;height:76px;background:linear-gradient(90deg,#c8d5e4,#fff 45%,#91a1b7);clip-path:polygon(50% 0,100% 15%,84% 100%,16% 100%,0 15%);border-radius:6px 6px 2px 2px}
body.battle-mode .sword-guard{position:absolute;left:-4px;top:72px;width:40px;height:8px;border-radius:5px;background:linear-gradient(90deg,var(--prop-deep),var(--prop-accent),var(--prop-deep))}
body.battle-mode .sword-grip{position:absolute;left:8px;top:80px;width:15px;height:31px;border-radius:5px;background:repeating-linear-gradient(0deg,#2e211a 0 5px,#8d6240 5px 9px)}

/* ATAQUE II · maza */
body.battle-mode .weapon-mace{position:absolute;inset:0;display:block;transform:rotate(-26deg)}
body.battle-mode .mace-handle{position:absolute;left:55px;top:49px;width:13px;height:69px;border-radius:7px;background:linear-gradient(90deg,#3b2415,#99633a,#3b2415)}
body.battle-mode .mace-head{position:absolute;left:31px;top:9px;width:62px;height:62px;border-radius:42% 48% 43% 50%;background:radial-gradient(circle at 38% 30%,#f6e5b2,var(--prop-accent) 30%,#4b4f59 68%);border:4px solid #28303b}
body.battle-mode .mace-spike{position:absolute;left:58px;top:2px;width:10px;height:29px;background:linear-gradient(#f6e8c0,#8b939f);clip-path:polygon(50% 0,100% 100%,0 100%);transform-origin:50% 54px}
body.battle-mode .mace-spike.s2{transform:rotate(90deg)}body.battle-mode .mace-spike.s3{transform:rotate(180deg)}body.battle-mode .mace-spike.s4{transform:rotate(270deg)}

/* ATAQUE III · Piedra: edificio/coloso que aplasta */
body.battle-mode .finisher-crusher{position:absolute;left:5px;top:-18px;width:108px;height:145px;display:block}
body.battle-mode .crusher-roof{position:absolute;left:2px;top:2px;width:104px;height:38px;background:linear-gradient(#e6cf8a,#8e6c31);clip-path:polygon(50% 0,100% 90%,0 90%);border-bottom:5px solid #443317}
body.battle-mode .crusher-body{position:absolute;left:14px;top:36px;width:80px;height:75px;background:linear-gradient(90deg,#505866,#9aa4af 50%,#464e59);border:4px solid var(--prop-accent)}
body.battle-mode .crusher-column{position:absolute;top:48px;width:15px;height:79px;background:linear-gradient(90deg,#373f49,#aab3bd,#3a414b)}
body.battle-mode .crusher-column.c1{left:19px}.crusher-column.c2{left:52px}.crusher-column.c3{right:19px}

/* ATAQUE III · Papel: árbol/raíces gigantes */
body.battle-mode .finisher-roots{position:absolute;inset:-12px -10px -18px;display:block}
body.battle-mode .root-crown{position:absolute;left:8px;top:0;width:116px;height:76px;border-radius:50%;background:radial-gradient(circle at 45% 30%,#d9ffb1,var(--prop-accent) 32%,#1d572d 74%);border:4px solid #6fb56e}
body.battle-mode .root-trunk{position:absolute;left:54px;top:55px;width:30px;height:82px;border-radius:16px;background:linear-gradient(90deg,#4b2e16,#a8662b,#402714)}
body.battle-mode .root-arm{position:absolute;left:56px;top:89px;width:82px;height:17px;border-radius:999px;background:linear-gradient(#8c5a28,#492b13);transform-origin:0 50%}
body.battle-mode .root-arm.a1{transform:rotate(24deg)}body.battle-mode .root-arm.a2{transform:rotate(-26deg)}body.battle-mode .root-arm.a3{transform:rotate(82deg)}

/* ATAQUE III · Tijera: boca gigante / DEVORAR */
body.battle-mode .finisher-maw{position:absolute;left:-22px;top:-15px;width:162px;height:146px;display:block}
body.battle-mode .maw-upper,body.battle-mode .maw-lower{position:absolute;left:0;width:162px;height:68px;background:linear-gradient(180deg,#ff7a75,#b72e3a);border:5px solid #6d1823;box-shadow:inset 0 -10px 14px rgba(80,0,10,.28)}
body.battle-mode .maw-upper{top:0;border-radius:80px 80px 18px 18px;transform-origin:50% 100%}
body.battle-mode .maw-lower{bottom:0;border-radius:18px 18px 80px 80px;transform-origin:50% 0%;background:linear-gradient(0deg,#ff7a75,#b72e3a)}
body.battle-mode .finisher-maw .tooth{position:absolute;z-index:3;width:20px;height:31px;background:#fff7dc;clip-path:polygon(0 0,100% 0,50% 100%);top:53px}
body.battle-mode .finisher-maw .t1{left:15px}.finisher-maw .t2{left:48px}.finisher-maw .t3{left:81px}.finisher-maw .t4{left:114px}.finisher-maw .t5{left:35px;top:65px;transform:rotate(180deg)}.finisher-maw .t6{left:98px;top:65px;transform:rotate(180deg)}

/* Preparación, lanzamiento e impacto */
body.battle-mode .prop-defense.show{animation:a014r3GuardIn .48s cubic-bezier(.18,.92,.2,1) both}
body.battle-mode .prop-defense.break{animation:a014r3GuardBreak .58s ease-out both}
body.battle-mode .prop-defense.hold{animation:a014r3GuardHold .55s ease-out both}
body.battle-mode .prop-attack.level-1.launch.side-left,body.battle-mode .prop-attack.level-2.launch.side-left{animation:a014r3StrikeLeft .62s cubic-bezier(.2,.88,.18,1) both}
body.battle-mode .prop-attack.level-1.launch.side-right,body.battle-mode .prop-attack.level-2.launch.side-right{animation:a014r3StrikeRight .62s cubic-bezier(.2,.88,.18,1) both}
body.battle-mode .prop-attack.level-3{z-index:12}
body.battle-mode .prop-attack.level-3.launch.toward-left{left:29%;animation:a014r3Finisher .78s cubic-bezier(.15,.9,.2,1) both}
body.battle-mode .prop-attack.level-3.launch.toward-right{left:71%;animation:a014r3Finisher .78s cubic-bezier(.15,.9,.2,1) both}
body.battle-mode .prop-attack.level-3.family-rock.launch{animation-name:a014r3CrusherDrop}
body.battle-mode .prop-attack.level-3.family-paper.launch{animation-name:a014r3RootsCrush}
body.battle-mode .prop-attack.level-3.family-scissors.launch .maw-upper{animation:a014r3MawUpper .55s ease-in both}
body.battle-mode .prop-attack.level-3.family-scissors.launch .maw-lower{animation:a014r3MawLower .55s ease-in both}

@keyframes a014r3GuardIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(2deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes a014r3GuardBreak{0%{opacity:1;filter:brightness(1)}25%{transform:translate(-50%,-50%) scale(1.15) rotate(6deg);filter:brightness(1.7)}100%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-22deg);filter:blur(4px)}}
@keyframes a014r3GuardHold{0%,100%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(.9) rotate(-4deg);filter:brightness(1.65)}65%{transform:translate(-50%,-50%) scale(1.05) rotate(3deg)}}
@keyframes a014r3StrikeLeft{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}100%{opacity:.2;transform:translate(105%,-50%) scale(1.18) rotate(48deg)}}
@keyframes a014r3StrikeRight{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(8deg)}100%{opacity:.2;transform:translate(-205%,-50%) scale(1.18) rotate(-48deg)}}
@keyframes a014r3Finisher{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}100%{opacity:.2;transform:translate(-50%,-50%) scale(.7)}}
@keyframes a014r3CrusherDrop{0%{opacity:0;transform:translate(-50%,-170%) scale(1.25)}68%{opacity:1;transform:translate(-50%,-42%) scale(1.35)}100%{opacity:.28;transform:translate(-50%,-35%) scale(.92)}}
@keyframes a014r3RootsCrush{0%{opacity:0;transform:translate(-50%,45%) scale(.25) rotate(-8deg)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.45) rotate(3deg)}100%{opacity:.25;transform:translate(-50%,-50%) scale(.8)}}
@keyframes a014r3MawUpper{0%{transform:translateY(-45px) rotate(-8deg)}100%{transform:translateY(16px) rotate(3deg)}}
@keyframes a014r3MawLower{0%{transform:translateY(45px) rotate(8deg)}100%{transform:translateY(-16px) rotate(-3deg)}}

/* Dominio y celebración: el ganador ocupa la escena y luego mira a su equipo. */
body.battle-mode .fighter.dominant-winner{z-index:14!important;animation:a014r3Dominance .72s cubic-bezier(.18,.88,.22,1) both}
body.battle-mode .fighter.team-salute{animation:a014r3Salute .9s cubic-bezier(.18,.88,.22,1) both}
body.battle-mode #arenaA.team-salute .battle-spine-canvas{transform:scaleX(1)!important}
body.battle-mode #arenaB.team-salute .battle-spine-canvas{transform:scaleX(-1)!important}
body.battle-mode .fighter.a3-target .fighter-token{animation:a014r3TargetCrush .58s ease-out both!important}
@keyframes a014r3Dominance{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-8px) scale(1.09)}100%{transform:translateY(-4px) scale(1.045)}}
@keyframes a014r3Salute{0%{transform:translateY(-4px) scale(1.045)}45%{transform:translateY(-8px) scale(1.08)}100%{transform:translateY(-3px) scale(1.05)}}
@keyframes a014r3TargetCrush{0%{transform:scale(1)}50%{transform:scaleX(1.13) scaleY(.72) translateY(14px)}100%{transform:scale(.2) translateY(90px) rotate(18deg);opacity:0}}

@media(max-width:760px){
  body.battle-mode .combat-prop{width:88px;height:88px}
  body.battle-mode .combat-prop.side-left{left:26%}body.battle-mode .combat-prop.side-right{left:74%}
  body.battle-mode .combat-prop-label{font-size:7px;padding:3px 6px}
  body.battle-mode .guard-tree,body.battle-mode .guard-fortress,body.battle-mode .weapon-sword,body.battle-mode .weapon-mace,body.battle-mode .finisher-crusher,body.battle-mode .finisher-roots,body.battle-mode .finisher-maw{transform:scale(.78);transform-origin:50% 50%}
}
@media(prefers-reduced-motion:reduce){
  body.battle-mode .combat-prop,body.battle-mode .fighter.dominant-winner,body.battle-mode .fighter.team-salute,body.battle-mode .fighter.a3-target .fighter-token{animation:none!important;transition:none!important}
}


/* ============================================================
   A014R4 · COMBAT CINEMATIC VISIBLE · CACHE FIX + SVG PROPS
   Auditoría: A014R3 cargaba styles.css?v=A014R2, por lo que el navegador
   podía conservar el CSS anterior aunque game.js ya crease los props R3.
   ============================================================ */
body.battle-mode .arena.cinematic-running .battle-message{opacity:0!important;visibility:hidden!important}
body.battle-mode .selection-summary:empty{min-height:0!important;height:0!important;padding:0!important;margin:0!important;border:0!important;overflow:hidden!important}
body.battle-mode .combat-prop{
  --prop-accent:#e7bd5f;
  position:absolute!important;z-index:40!important;top:44%!important;
  width:clamp(150px,12vw,210px)!important;height:clamp(150px,12vw,210px)!important;
  opacity:0;pointer-events:none;overflow:visible!important;
  transform:translate(-50%,-50%) scale(.28);transform-origin:50% 50%;
  filter:drop-shadow(0 22px 16px rgba(0,0,0,.58));
  will-change:transform,opacity,filter,left,top;
}
body.battle-mode .combat-prop.side-left{left:31%!important}
body.battle-mode .combat-prop.side-right{left:69%!important}
body.battle-mode .combat-prop.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.battle-mode .combat-prop.level-3{width:clamp(220px,18vw,310px)!important;height:clamp(190px,16vw,270px)!important;z-index:45!important}
body.battle-mode .combat-prop-label{display:none!important}
body.battle-mode .combat-prop svg{display:block;width:100%;height:100%;overflow:visible}
body.battle-mode .guard-art,body.battle-mode .weapon-art,body.battle-mode .finisher-art{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;transform:none!important}

/* Defensa delante del gladiador, no enterrada detrás del sprite. */
body.battle-mode .prop-defense.side-left{left:34%!important}
body.battle-mode .prop-defense.side-right{left:66%!important}
body.battle-mode .prop-defense.show{animation:a014r4GuardMaterialize .58s cubic-bezier(.12,.92,.18,1) both!important}
body.battle-mode .prop-defense.break{animation:a014r4GuardShatter .55s ease-out both!important}
body.battle-mode .prop-defense.hold{animation:a014r4GuardHold .58s ease-out both!important}
@keyframes a014r4GuardMaterialize{0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-12deg);filter:brightness(2) blur(6px)}65%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(3deg);filter:brightness(1.35) blur(0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0);filter:drop-shadow(0 22px 16px rgba(0,0,0,.58))}}
@keyframes a014r4GuardShatter{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,-50%) scale(1.18) rotate(7deg);filter:brightness(2)}100%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-28deg);filter:blur(8px) brightness(1.6)}}
@keyframes a014r4GuardHold{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(.82) rotate(-5deg);filter:brightness(1.9)}65%{transform:translate(-50%,-50%) scale(1.09) rotate(3deg)}}

/* Armas aparecen grandes junto al atacante antes de viajar al objetivo. */
body.battle-mode .prop-attack.show{animation:a014r4WeaponSummon .52s cubic-bezier(.14,.9,.2,1) both!important}
@keyframes a014r4WeaponSummon{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-22deg);filter:brightness(2.2) blur(5px)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(4deg);filter:brightness(1.25) blur(0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
body.battle-mode .prop-attack.level-1.launch.side-left,body.battle-mode .prop-attack.level-2.launch.side-left{animation:a014r4StrikeL .72s cubic-bezier(.12,.82,.2,1) both!important}
body.battle-mode .prop-attack.level-1.launch.side-right,body.battle-mode .prop-attack.level-2.launch.side-right{animation:a014r4StrikeR .72s cubic-bezier(.12,.82,.2,1) both!important}
@keyframes a014r4StrikeL{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}68%{opacity:1;transform:translate(150%,-50%) scale(1.25) rotate(54deg)}100%{opacity:.12;transform:translate(175%,-50%) scale(.82) rotate(70deg)}}
@keyframes a014r4StrikeR{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(8deg)}68%{opacity:1;transform:translate(-250%,-50%) scale(1.25) rotate(-54deg)}100%{opacity:.12;transform:translate(-275%,-50%) scale(.82) rotate(-70deg)}}

/* Nivel 3: espectáculo deliberadamente imposible. */
body.battle-mode .prop-attack.level-3.family-rock.launch{left:50%!important;top:42%!important;animation:a014r4TempleDrop .95s cubic-bezier(.14,.9,.2,1) both!important}
@keyframes a014r4TempleDrop{0%{opacity:0;transform:translate(-50%,-230%) scale(1.12) rotate(-5deg)}55%{opacity:1;transform:translate(-50%,-52%) scale(1.48) rotate(1deg)}78%{opacity:1;transform:translate(-50%,-36%) scale(1.55)}100%{opacity:.08;transform:translate(-50%,-25%) scale(1.75);filter:blur(3px)}}
body.battle-mode .prop-attack.level-3.family-paper.launch{left:50%!important;top:48%!important;animation:a014r4RootsRise .9s cubic-bezier(.12,.92,.18,1) both!important}
@keyframes a014r4RootsRise{0%{opacity:0;transform:translate(-50%,70%) scale(.18)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}78%{transform:translate(-50%,-54%) scale(1.6)}100%{opacity:.12;transform:translate(-50%,-46%) scale(1.8);filter:blur(2px)}}
body.battle-mode .prop-attack.level-3.family-scissors.launch{left:50%!important;top:44%!important;animation:a014r4MawLunge .9s cubic-bezier(.12,.9,.2,1) both!important}
body.battle-mode .prop-attack.level-3.family-scissors.launch .maw-top{transform-origin:50% 100%;animation:a014r4JawTop .55s ease-in both!important}
body.battle-mode .prop-attack.level-3.family-scissors.launch .maw-bottom{transform-origin:50% 0;animation:a014r4JawBottom .55s ease-in both!important}
@keyframes a014r4MawLunge{0%{opacity:0;transform:translate(-50%,-50%) scale(.22)}38%{opacity:1;transform:translate(-50%,-50%) scale(1.42)}72%{opacity:1;transform:translate(-50%,-50%) scale(1.75)}100%{opacity:.06;transform:translate(-50%,-50%) scale(2.05);filter:blur(3px)}}
@keyframes a014r4JawTop{0%{transform:translateY(-55px) rotate(-7deg)}100%{transform:translateY(20px) rotate(2deg)}}
@keyframes a014r4JawBottom{0%{transform:translateY(55px) rotate(7deg)}100%{transform:translateY(-20px) rotate(-2deg)}}

/* El vencedor manda visualmente: sube, avanza y celebra. */
body.battle-mode .fighter.dominant-winner{z-index:50!important;animation:a014r4WinnerDominates .9s cubic-bezier(.14,.9,.18,1) both!important}
body.battle-mode .fighter.team-salute{z-index:50!important;animation:a014r4WinnerSalute 1.25s cubic-bezier(.14,.9,.18,1) both!important}
@keyframes a014r4WinnerDominates{0%{transform:translateY(0) scale(1)}42%{transform:translateY(-18px) scale(1.14)}70%{transform:translateY(-10px) scale(1.09)}100%{transform:translateY(-12px) scale(1.1)}}
@keyframes a014r4WinnerSalute{0%{transform:translateY(-12px) scale(1.1)}32%{transform:translateY(-20px) scale(1.16) rotate(-3deg)}58%{transform:translateY(-13px) scale(1.12) rotate(3deg)}100%{transform:translateY(-12px) scale(1.11) rotate(0)}}

/* Impacto más grande para que el desenlace sea inequívoco. */
body.battle-mode .combat-impact-flash{z-index:60!important;width:clamp(130px,12vw,200px)!important;height:clamp(130px,12vw,200px)!important}

@media(max-width:760px){
  body.battle-mode .combat-prop{width:118px!important;height:118px!important}
  body.battle-mode .combat-prop.level-3{width:168px!important;height:150px!important}
  body.battle-mode .prop-defense.side-left{left:31%!important}body.battle-mode .prop-defense.side-right{left:69%!important}
}
@media(prefers-reduced-motion:reduce){
  body.battle-mode .combat-prop.show{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
}


/* ============================================================
   A014R5 · SPINE COMBAT REBUILD
   La pelea deja de depender de props DOM gigantes. Armas/defensas
   viven dentro del mismo canvas PIXI que el Axie y siguen su cuerpo.
   ============================================================ */
body.battle-mode .arena.r5-cinematic{overflow:hidden!important}
body.battle-mode .arena.r5-cinematic .battle-message{display:none!important}
body.battle-mode .arena.r5-cinematic .combat-prop{display:none!important}
body.battle-mode .arena.r5-cinematic .fighter{z-index:8!important}
body.battle-mode .arena.r5-cinematic .fighter-token.mixer-fighter-token{
  overflow:visible!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;
}
body.battle-mode .arena.r5-cinematic .battle-spine-canvas{
  filter:drop-shadow(0 19px 12px rgba(0,0,0,.48))!important;
  image-rendering:auto!important;
}
body.battle-mode .arena.r5-cinematic .fighter.attack .fighter-token,
body.battle-mode .arena.r5-cinematic .fighter.hit .fighter-token,
body.battle-mode .arena.r5-cinematic .fighter.ko .fighter-token{
  animation:none!important;
}
body.battle-mode .arena.r5-cinematic .round-result{
  left:50%!important;right:auto!important;bottom:9%!important;transform:translateX(-50%)!important;
  width:auto!important;min-width:180px;max-width:70%;padding:9px 18px!important;border-radius:999px!important;
  background:rgba(5,10,18,.82)!important;backdrop-filter:blur(8px);font-size:clamp(14px,1.5vw,22px)!important;
  letter-spacing:.12em!important;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:55!important;
}
body.battle-mode .arena.r5-cinematic .fighter-card{opacity:.72}
@media(max-width:760px){body.battle-mode .arena.r5-cinematic .round-result{bottom:7%!important;min-width:140px;padding:7px 12px!important}}


/* A014R6R2 · CLEAN AXIE COMBAT
   Regression fix: restore R5 actor rendering and suppress every experimental weapon/shield overlay. */
body.battle-mode .combat-prop,
body.battle-mode .guard-art,
body.battle-mode .weapon-art,
body.battle-mode .finisher-art{display:none!important;}
body.battle-mode .round-result{
  z-index:40!important;
  font-size:clamp(54px,7vw,110px)!important;
  display:grid!important;
  place-items:center!important;
}
body.battle-mode .round-result.hidden{display:none!important;}

/* ============================================================
   A014R6R3 · SINGLE ARENA SPINE · TWO ACTORS / ONE CANVAS
   The only render surface in combat is the arena itself. Fighter DOM nodes
   keep labels and fallbacks; live Axies move inside one transparent PIXI stage.
   ============================================================ */
body.battle-mode .arena{position:relative!important;isolation:isolate;overflow:hidden!important}
body.battle-mode .battle-arena-spine-canvas{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  display:block!important;z-index:7!important;pointer-events:none!important;
  background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;
  filter:drop-shadow(0 17px 11px rgba(0,0,0,.38));image-rendering:auto!important;
}
body.battle-mode .arena .fighter{position:relative;z-index:8!important;overflow:visible!important}
body.battle-mode .arena .fighter-token.mixer-fighter-token{
  position:relative!important;overflow:visible!important;background:transparent!important;
  border-color:transparent!important;box-shadow:none!important;filter:none!important;
}
body.battle-mode .battle-arena-actor-proxy{
  position:absolute;inset:0;display:block;overflow:visible!important;pointer-events:none;
  background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;
}
body.battle-mode .battle-arena-fallback,
body.battle-mode .battle-arena-icon{
  position:absolute;left:50%;top:50%;width:132%;height:132%;object-fit:contain;
  transform:translate(-50%,-50%);filter:drop-shadow(0 14px 14px rgba(0,0,0,.42));
  opacity:1;transition:opacity .12s linear;pointer-events:none;
}
body.battle-mode .battle-arena-icon{display:grid;place-items:center;font-size:52px;width:100%;height:100%}
body.battle-mode #arenaB .battle-arena-fallback{transform:translate(-50%,-50%) scaleX(-1)}
body.battle-mode .battle-arena-actor-proxy.is-live .battle-arena-fallback,
body.battle-mode .battle-arena-actor-proxy.is-live .battle-arena-icon{opacity:0!important}
body.battle-mode .battle-arena-actor-proxy.is-live .preview-spinner{display:none!important}
body.battle-mode .battle-arena-actor-proxy.is-error .preview-spinner{display:none!important}

/* No individual live-canvas is allowed in combat after R6R3. */
body.battle-mode .arena .battle-spine-canvas{display:none!important}

/* Restore the original large, central outcome presentation. */
body.battle-mode .arena.r5-cinematic .round-result,
body.battle-mode .arena .round-result{
  position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;
  width:100%!important;max-width:none!important;min-width:0!important;height:100%!important;
  padding:0!important;border-radius:0!important;transform:none!important;backdrop-filter:none!important;
  display:grid!important;place-items:center!important;font-size:clamp(54px,7vw,110px)!important;
  letter-spacing:.08em!important;background:transparent!important;box-shadow:none!important;z-index:30!important;
  text-shadow:0 8px 34px #000,0 2px 3px #000!important;
}
body.battle-mode .arena .round-result.victory{color:#f8d56d!important;background:radial-gradient(circle,rgba(114,224,165,.20),transparent 47%)!important}
body.battle-mode .arena .round-result.defeat{color:#ff6b6b!important;background:radial-gradient(circle,rgba(255,72,72,.18),transparent 48%)!important}
body.battle-mode .arena .round-result.draw{color:#d7e0ef!important;background:radial-gradient(circle,rgba(120,148,190,.18),transparent 47%)!important}
body.battle-mode .arena .round-result.hidden{display:none!important}

@media(max-width:760px){
  body.battle-mode .battle-arena-icon{font-size:38px}
  body.battle-mode .arena.r5-cinematic .round-result,body.battle-mode .arena .round-result{font-size:clamp(36px,13vw,62px)!important}
}


/* ==========================================================
   A015R1 · PLAYER LEARNING HUB
   Segunda fila: CÓMO JUGAR + REGLAS.
   ========================================================== */
#lobby .picker-layout.wallet-layout .player-learn-tabs,
#lobby .player-learn-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  width:100%;
  margin:0 0 8px;
}
#lobby .player-learn-tab{
  min-width:0;
  min-height:36px;
  padding:0 8px;
  border:1px solid #40516d;
  border-radius:9px;
  background:linear-gradient(180deg,#142034,#0f1726);
  color:#c5d2e6;
  font-size:9px;
  font-weight:950;
  letter-spacing:.055em;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
#lobby .player-learn-tab:hover{border-color:#7188a8;color:#fff}
#lobby .player-learn-tab.active{
  border-color:#d2a33d;
  background:linear-gradient(180deg,#352c19,#1d1b16);
  color:#ffd76e;
  box-shadow:inset 0 -2px 0 #c99a3b;
}
#lobby .learn-main{
  min-width:0;
  border:1px solid #33425b;
  border-radius:16px;
  background:linear-gradient(180deg,#111a2a,#0d1421);
  padding:18px;
}
#lobby .learn-main-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid #2f3d55;
}
#lobby .learn-kicker{
  display:block;
  margin-bottom:4px;
  color:#f0bd4e;
  font-size:9px;
  font-weight:950;
  letter-spacing:.13em;
}
#lobby .learn-main-head h3{margin:0;color:#f8f3e8;font-size:24px;line-height:1}
#lobby .learn-main-head p{margin:7px 0 0;color:#8fa5c3;font-size:12px}
#lobby .learn-badge{
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid #435776;
  border-radius:999px;
  color:#cbd9ec;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
#lobby .guide-steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
#lobby .guide-step{
  position:relative;
  min-width:0;
  min-height:185px;
  padding:16px 16px 14px 56px;
  border:1px solid #2d3d56;
  border-radius:14px;
  background:linear-gradient(145deg,#172338,#101827);
  overflow:hidden;
}
#lobby .guide-step-wide{grid-column:1/-1;min-height:150px}
#lobby .guide-step-num{
  position:absolute;
  left:15px;
  top:15px;
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#f0ba43;
  color:#16130b;
  font-size:12px;
  font-weight:1000;
}
#lobby .guide-step-copy strong{font-size:13px;color:#f7f3e8;letter-spacing:.045em}
#lobby .guide-step-copy p{margin:6px 0 12px;color:#9db0ca;font-size:11px;line-height:1.45}
#lobby .guide-axie-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#lobby .guide-real-axie,
#lobby .guide-axie-fallback{
  min-width:0;
  height:88px;
  border:1px solid #33455f;
  border-radius:11px;
  background:radial-gradient(circle at 50% 55%,#26364f,#111a2a 70%);
  display:grid;
  place-items:center;
  overflow:hidden;
}
#lobby .guide-real-axie{grid-template-rows:1fr auto;padding:4px}
#lobby .guide-real-axie .compact-preview{width:100%;height:62px;min-width:0;background:transparent}
#lobby .guide-real-axie .compact-preview img{width:100%!important;height:100%!important;object-fit:contain!important}
#lobby .guide-real-axie small{font-size:7px;color:#8fa6c5;text-transform:uppercase;font-weight:900}
#lobby .guide-axie-fallback{font-size:9px;font-weight:950;color:#dbe7f7}
#lobby .guide-versus{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:8px;
  align-items:center;
  padding:17px;
  border:1px solid #34435c;
  border-radius:12px;
  background:#0d1523;
}
#lobby .guide-versus span{text-align:center;color:#dce7f7;font-size:12px;font-weight:950}
#lobby .guide-versus b{color:#f1c55d;font-size:21px}
#lobby .guide-card-hand{display:flex;gap:7px;align-items:flex-end}
#lobby .guide-card-hand span{
  flex:1;
  min-width:0;
  height:68px;
  padding:9px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size:8px;
  font-weight:950;
  border:1px solid #43536b;
}
#lobby .guide-card-hand span b{font-size:25px;line-height:1}
#lobby .guide-card-hand .atk{background:linear-gradient(160deg,#3a1d24,#20131a);color:#ffb5b5;border-color:#6d3440}
#lobby .guide-card-hand .def{background:linear-gradient(160deg,#173246,#101c28);color:#a9dfff;border-color:#315d7a}
#lobby .guide-lock-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  padding:15px 12px;
  border-radius:12px;
  background:#0c1421;
  border:1px solid #3b4a62;
  color:#a9bdd7;
  text-align:center;
  font-size:9px;
  font-weight:900;
}
#lobby .guide-lock-row b{font-size:22px}
#lobby .supremacy-orbit{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto;
  gap:7px;
  align-items:center;
}
#lobby .sup-node{
  min-width:0;
  padding:13px 10px;
  border:1px solid #41516b;
  border-radius:12px;
  background:#0e1725;
  text-align:center;
}
#lobby .sup-node b{display:block;font-size:12px}
#lobby .sup-node small{display:block;margin-top:4px;color:#9db0c8;font-size:8px}
#lobby .sup-node.rock b{color:#e1b85d}
#lobby .sup-node.paper b{color:#81d68e}
#lobby .sup-node.scissors b{color:#77c9ef}
#lobby .sup-arrow{color:#f0c45c;font-weight:1000;font-size:18px}
#lobby .sup-arrow.c{font-size:9px;white-space:nowrap}
#lobby .guide-life-demo{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
  padding:14px;
  border:1px solid #33445e;
  border-radius:12px;
  background:#0d1522;
  font-size:11px;
  color:#d7e2f1;
}
#lobby .guide-life-demo em{font-style:normal;color:#9db2cf}
#lobby .guide-ko{color:#ff9393;font-weight:950}
#lobby .guide-win{padding:8px 10px;border-radius:9px;background:#2b2415;color:#f1ca67;text-align:center;font-weight:1000}
#lobby .learn-sidebar{
  margin-top:0;
  padding:14px;
  min-height:0;
}
#lobby .learn-side-kicker{color:#f0bd4e;font-size:8px;font-weight:950;letter-spacing:.12em}
#lobby .learn-sidebar h4{margin:6px 0 12px;font-size:16px}
#lobby .learn-side-rule{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:8px;
  padding:10px 0;
  border-bottom:1px solid #2e3c52;
}
#lobby .learn-side-rule b{color:#f2cb68;font-size:10px;letter-spacing:.05em}
#lobby .learn-side-rule span{color:#a1b3ca;font-size:10px}
#lobby .learn-side-warning{
  margin-top:12px;
  padding:11px;
  border:1px solid #76582b;
  border-radius:11px;
  background:#2b2112;
}
#lobby .learn-side-warning strong{color:#ffd56d;font-size:9px}
#lobby .learn-side-warning p{margin:5px 0 0;color:#d5c39b;font-size:10px;line-height:1.4}
#lobby .learn-side-cta{
  margin-top:12px;
  padding:12px;
  border-radius:10px;
  background:linear-gradient(180deg,#f4c44d,#d69a27);
  color:#15120a;
  text-align:center;
  font-size:12px;
  font-weight:1000;
}
#lobby .rule-principle{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
#lobby .rule-principle strong{
  padding:10px 8px;
  border:1px solid #3b4a62;
  border-radius:10px;
  background:#0e1724;
  text-align:center;
  color:#f2d27c;
  font-size:9px;
  letter-spacing:.04em;
}
#lobby .rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#lobby .rule-card{
  position:relative;
  min-width:0;
  padding:16px;
  border:1px solid #2e3e57;
  border-radius:14px;
  background:#121c2d;
  scroll-margin-top:12px;
}
#lobby .rule-number{
  position:absolute;
  right:13px;
  top:12px;
  color:#455976;
  font-size:20px;
  font-weight:1000;
}
#lobby .rule-card h4{margin:0 0 9px;color:#f4c963;font-size:13px;letter-spacing:.06em}
#lobby .rule-card p{margin:7px 0;color:#a5b6cd;font-size:10.5px;line-height:1.55}
#lobby .rule-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
#lobby .rule-facts span{padding:8px 5px;border:1px solid #36475f;border-radius:9px;background:#0c1420;text-align:center;color:#a9bdd6;font-size:8px}
#lobby .rule-facts b{display:block;color:#fff;font-size:13px}
#lobby .rule-cycle{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:9px}
#lobby .rule-cycle b{padding:5px 7px;border-radius:999px;background:#0d1522}
#lobby .rule-cycle .rock{color:#e0b75c}.rule-cycle .paper{color:#80d58d}.rule-cycle .scissors{color:#76c8ee}
#lobby .rule-example,
#lobby .rule-pending{margin-top:9px;padding:9px;border-radius:9px;background:#0d1522;border:1px solid #34445c;color:#a8bad2;font-size:9px;line-height:1.45}
#lobby .rule-pending{border-color:#66512a;background:#261f13;color:#d5c294}
#lobby .internal-cycles{display:grid;gap:5px;margin:8px 0}
#lobby .internal-cycles span{padding:7px 8px;border-radius:8px;background:#0c1421;border:1px solid #324159;color:#c8d6e9;font-size:9px}
#lobby .part-rule-columns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#lobby .part-rule-columns>div{display:grid;gap:4px;padding:9px;border-radius:9px;background:#0d1522;border:1px solid #33445d}
#lobby .part-rule-columns strong{color:#f1ca66;font-size:9px}
#lobby .part-rule-columns span{color:#a8b8ce;font-size:9px}
#lobby .economy-flow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:9px 0}
#lobby .economy-flow span{padding:6px 7px;border-radius:999px;background:#0c1421;border:1px solid #34445d;color:#d6e2f1;font-size:8px;font-weight:900}
#lobby .economy-flow b{color:#f0bd4e}
#lobby .rules-sidebar button{
  width:100%;
  min-height:33px;
  margin:0 0 5px;
  padding:0 9px;
  border:1px solid #34445c;
  border-radius:8px;
  background:#0f1827;
  color:#b9c8dc;
  text-align:left;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}
#lobby .rules-sidebar button:hover{border-color:#7189a9;color:#fff}
#lobby .rules-side-note{margin:10px 0 0;color:#7f93af;font-size:8.5px;line-height:1.5}

@media(max-width:1120px){
  #lobby .guide-steps,#lobby .rules-grid{grid-template-columns:1fr}
  #lobby .guide-step-wide{grid-column:auto}
}
@media(max-width:760px){
  #lobby .learn-main{padding:12px}
  #lobby .learn-main-head{display:block}
  #lobby .guide-real-cards{grid-template-columns:repeat(2,minmax(132px,1fr));justify-content:stretch}
  #lobby .guide-real-card{max-width:none}
  #lobby .guide-fight-choice{grid-template-columns:1fr;justify-items:center}
  #lobby .guide-fight-card{justify-self:center}
  #lobby .learn-badge{display:inline-block;margin-top:10px}
  #lobby .supremacy-orbit{grid-template-columns:1fr;gap:5px}
  #lobby .sup-arrow{transform:rotate(90deg);justify-self:center}
  #lobby .sup-arrow.c{transform:none}
  #lobby .rule-principle{grid-template-columns:1fr}
  #lobby .guide-life-demo{grid-template-columns:1fr;text-align:center}
}

/* =========================================================
   A015R2 · LEARNING HUB REAL AXIES + FAMILY NAMES
   Refinamiento visual del centro de aprendizaje.
   ========================================================= */
#lobby .guide-roster-six{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
#lobby .guide-real-axie{display:grid;grid-template-rows:1fr auto auto;gap:3px;align-items:center;justify-items:center;padding:6px 5px;border:1px solid #30425c;border-radius:12px;background:linear-gradient(180deg,#111a28,#0b121c)}
#lobby .guide-real-axie small{font-size:8px;color:#f5efe0;font-weight:900;line-height:1;text-align:center}
#lobby .guide-real-axie em{font-style:normal;font-size:7px;color:#8ea4c4;font-weight:800;text-transform:uppercase;line-height:1;text-align:center}
#lobby .guide-real-axie .compact-preview{width:100%;height:68px;min-width:0;background:transparent}
#lobby .guide-real-axie .compact-preview img{width:100%!important;height:100%!important;object-fit:contain!important}
#lobby .guide-versus-real{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
#lobby .guide-team-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#lobby .guide-versus-center{display:grid;gap:4px;justify-items:center;padding:6px 10px}
#lobby .guide-versus-center b{font-size:26px;color:#f2c760;line-height:1}
#lobby .guide-versus-center span{font-size:10px;color:#93a6c4;font-weight:900;letter-spacing:.05em;text-align:center}
#lobby .guide-real-cards{display:grid;grid-template-columns:repeat(3,minmax(148px,188px));gap:12px;align-items:start;justify-content:flex-start}
#lobby .guide-real-card{width:100%;max-width:188px}
#lobby .guide-real-card .card-lab-preview{width:100%;max-width:none!important;justify-self:stretch;cursor:default}
#lobby .guide-real-card .card-lab-hover{display:none!important}
#lobby .guide-real-card.is-selected .card-lab-preview{transform:translateY(-3px);filter:saturate(1.03) contrast(1.02);box-shadow:0 20px 34px rgba(0,0,0,.42),0 0 0 2px rgba(243,203,97,.30)}
#lobby .guide-fight-choice{display:grid;grid-template-columns:minmax(0,180px) auto minmax(148px,188px);gap:12px;align-items:center}
#lobby .guide-fight-plus{font-size:26px;font-weight:1000;color:#f2c75e;text-align:center}
#lobby .guide-fight-card{display:grid;justify-self:end;width:100%;max-width:188px}
#lobby .guide-fight-lock{grid-column:1/-1;padding:9px 10px;border-radius:10px;background:#0d1522;border:1px solid #34455f;color:#d6e3f4;font-size:11px;font-weight:900;text-align:center}
#lobby .guide-family-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#lobby .family-card{display:grid;gap:9px;padding:12px;border-radius:14px;border:1px solid #34455e;background:linear-gradient(180deg,#111926,#0c121b)}
#lobby .family-card header{display:grid;gap:4px}
#lobby .family-card header b{font-size:15px;letter-spacing:.07em}
#lobby .family-card header span{font-size:10px;color:#95a7c2;font-weight:800}
#lobby .family-card p{margin:0;color:#cdd8e7!important;font-size:10px!important;line-height:1.4}
#lobby .family-card.thork{box-shadow:inset 0 3px 0 #e1b95c}
#lobby .family-card.krox{box-shadow:inset 0 3px 0 #71c6ee}
#lobby .family-card.vyra{box-shadow:inset 0 3px 0 #79d483}
#lobby .family-card.thork header b{color:#e9c56d}
#lobby .family-card.krox header b{color:#88d2f2}
#lobby .family-card.vyra header b{color:#8dd79a}
#lobby .family-axies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#lobby .guide-class-chip{display:grid;place-items:center;min-height:100px;padding:8px;border-radius:12px;border:1px dashed #42526b;background:linear-gradient(180deg,#101823,#0a1018);text-align:center}
#lobby .guide-class-chip b{font-size:11px;color:#dbe8f7;letter-spacing:.06em}
#lobby .guide-class-chip.thork{border-color:#765718;color:#e6c166}
#lobby .guide-class-chip.krox{border-color:#29617b;color:#7fd0ee}
#lobby .guide-class-chip.vyra{border-color:#285c34;color:#8fd79b}
#lobby .guide-hierarchy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#lobby .hierarchy-card{display:grid;gap:8px;padding:12px;border-radius:12px;border:1px solid #33445c;background:#0d1521}
#lobby .hierarchy-card b{font-size:13px;letter-spacing:.06em}
#lobby .hierarchy-card span{font-size:10px;color:#b7c6d8;line-height:1.45}
#lobby .hierarchy-card.thork b{color:#e6c369}
#lobby .hierarchy-card.krox b{color:#85d0ef}
#lobby .hierarchy-card.vyra b{color:#8fd99b}
#lobby .guide-health-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:center}
#lobby .health-card{display:grid;gap:5px;padding:10px;border-radius:12px;border:1px solid #34455f;background:#0d1521;text-align:center}
#lobby .health-card b{font-size:18px;color:#fff}
#lobby .health-card span{font-size:10px;color:#9db1cd}
#lobby .health-card.warn{box-shadow:inset 0 3px 0 #c58d4c}
#lobby .health-card.ko{box-shadow:inset 0 3px 0 #a74349}
#lobby .health-arrow{font-size:18px;font-weight:1000;color:#f2c75d;text-align:center}
#lobby .guide-health-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
#lobby .guide-health-notes span{padding:9px 10px;border-radius:10px;border:1px solid #34465f;background:#0d1522;color:#d6e1ef;font-size:10px;line-height:1.45}
#lobby .rule-family-list{display:grid;gap:6px;margin:8px 0}
#lobby .rule-family-list div{display:flex;justify-content:space-between;gap:12px;padding:8px 9px;border-radius:8px;background:#0c1421;border:1px solid #31415a}
#lobby .rule-family-list b{font-size:10px;letter-spacing:.06em;color:#f2c861}
#lobby .rule-family-list span{font-size:9px;color:#b5c6d9;text-align:right}
#lobby .examples-list span{line-height:1.5}
#lobby .life-facts span{font-size:8.5px}

@media (max-width: 1100px){
  #lobby .guide-roster-six{grid-template-columns:repeat(3,minmax(0,1fr))}
  #lobby .guide-family-grid,
  #lobby .guide-hierarchy-grid,
  #lobby .guide-health-notes{grid-template-columns:1fr}
  #lobby .guide-fight-choice{grid-template-columns:1fr}
  #lobby .guide-fight-plus{display:none}
}
@media (max-width: 820px){
  #lobby .guide-team-mini{grid-template-columns:repeat(3,minmax(0,1fr))}
  #lobby .guide-versus-real{grid-template-columns:1fr;gap:12px}
  #lobby .guide-real-cards{grid-template-columns:1fr}
  #lobby .guide-health-flow{grid-template-columns:1fr;gap:6px}
  #lobby .health-arrow{transform:rotate(90deg)}
}

/* A015R2R1 · cache-visible guide visuals + reliable Axie/card art */
#lobby .guide-static-axie{display:grid;place-items:center;width:100%;height:72px;min-width:0;background:transparent;overflow:visible}
#lobby .guide-static-axie img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 8px rgba(0,0,0,.28))}
#lobby .guide-card-mini{grid-template-columns:58px 1fr;grid-template-areas:"art role" "art title" "art meta";align-items:center;column-gap:10px;min-height:92px}
#lobby .guide-card-art{grid-area:art;display:grid;place-items:center;width:56px;height:66px;border-radius:10px;background:linear-gradient(180deg,#172234,#0d1521);border:1px solid #3a4c66;overflow:hidden}
#lobby .guide-card-art img{width:100%;height:100%;object-fit:contain;display:block}
#lobby .guide-card-art-fallback{font-size:24px;color:#d7e5f5}
#lobby .guide-card-role{grid-area:role;align-self:end}
#lobby .guide-card-mini strong{grid-area:title}
#lobby .guide-card-mini small{grid-area:meta;align-self:start}
#lobby .guide-fight-card .guide-card-mini{width:100%}
#lobby .family-axies .guide-real-axie .guide-static-axie{height:64px}
#lobby .guide-roster-six .guide-real-axie{min-height:106px}
#lobby .guide-team-mini .guide-real-axie{min-height:103px}

/* =========================================================
   A015R2R2 · GUIDE AXIE VISIBILITY + HIERARCHY AXIES
   ========================================================= */
#lobby .guide-static-axie{position:relative;overflow:hidden}
#lobby .guide-static-axie .guide-image-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;color:#5f7694;opacity:.65;z-index:0}
#lobby .guide-static-axie .guide-axie-img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 8px rgba(0,0,0,.28))}
#lobby .family-axies .guide-real-axie{min-height:118px}
#lobby .family-axies .guide-real-axie .guide-static-axie{height:76px}
#lobby .hierarchy-axies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:2px 0 4px}
#lobby .hierarchy-axies .guide-real-axie{min-height:108px}
#lobby .hierarchy-axies .guide-real-axie .guide-static-axie{height:68px}
#lobby .hierarchy-card{align-content:start}
#lobby .hierarchy-card>span{margin-top:2px}
@media (max-width:820px){
  #lobby .hierarchy-axies{grid-template-columns:repeat(3,minmax(74px,1fr))}
}


/* =========================================================
   A015R2R3 · GUIDE TOP AXIE CLIPPING FIX
   SOLO puntos 1–4. NO toca familias/jerarquía (5–6).
   ========================================================= */
#lobby .guide-roster-six .guide-real-axie{
  height:124px;
  min-height:124px;
  grid-template-rows:86px auto auto;
  padding:7px 6px 8px;
}
#lobby .guide-roster-six .guide-real-axie .guide-static-axie{
  height:86px;
  min-height:86px;
  overflow:visible;
}
#lobby .guide-team-mini .guide-real-axie{
  height:118px;
  min-height:118px;
  grid-template-rows:80px auto auto;
  padding:7px 6px 8px;
}
#lobby .guide-team-mini .guide-real-axie .guide-static-axie{
  height:80px;
  min-height:80px;
  overflow:visible;
}
#lobby .guide-fight-axie .guide-real-axie{
  height:132px;
  min-height:132px;
  grid-template-rows:92px auto auto;
  padding:7px 6px 9px;
}
#lobby .guide-fight-axie .guide-real-axie .guide-static-axie{
  height:92px;
  min-height:92px;
  overflow:visible;
}
#lobby .guide-roster-six .guide-axie-img,
#lobby .guide-team-mini .guide-axie-img,
#lobby .guide-fight-axie .guide-axie-img{
  object-fit:contain;
  object-position:center center;
  max-height:100%;
}

/* ==============================================================
   A016R2 · DEMO STARTER UX
   Dashboard coherente + rail derecho + identidad STARTER.
   No modifica tutorial 5/6 ni combate.
   ============================================================ */
#lobby .lobby-topline{
  align-items:flex-start;
}
#lobby .lobby-head-right{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
#lobby .lobby-quick-actions{
  display:flex;
  gap:6px;
  align-items:center;
}
#lobby .lobby-quick-btn{
  min-height:32px;
  padding:0 12px;
  border:1px solid #33445e;
  border-radius:9px;
  background:#101827;
  color:#c9d7e8;
  font-size:9px;
  font-weight:950;
  letter-spacing:.045em;
  cursor:pointer;
}
#lobby .lobby-quick-btn:hover{border-color:#7089aa;color:#fff}
#lobby .lobby-quick-btn.ronin{
  border-color:#236b9c;
  background:linear-gradient(180deg,#153a58,#10283c);
  color:#9ed7ff;
}
#lobby .lobby-quick-btn.ronin.connected{
  border-color:#357a5d;
  background:linear-gradient(180deg,#173629,#10251d);
  color:#9fe0bd;
}
#lobby .lobby-quick-btn:disabled{opacity:.72;cursor:default}

/* En DEMO usamos exactamente la arquitectura de columna derecha del dashboard. */
#lobby .picker-layout.demo-dashboard-layout{
  grid-template-columns:minmax(0,1fr) 340px !important;
  gap:14px !important;
  align-items:start !important;
}
#lobby .picker-layout.demo-dashboard-layout .player-hub-rail{
  position:sticky !important;
  top:8px !important;
  align-self:start !important;
}
#lobby .picker-layout.demo-dashboard-layout .player-hub-tabs{
  display:grid !important;
}
#lobby .picker-layout.demo-dashboard-layout .player-learn-tabs{
  display:grid !important;
}
#lobby .demo-team-sidebar{
  margin-top:0 !important;
}
#lobby .demo-team-sidebar .picked-team{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  margin-top:8px !important;
}
#lobby .demo-team-sidebar .team-slot{
  min-height:74px !important;
}
#lobby .demo-team-sidebar .picked-demo-image{
  width:58px !important;
  height:54px !important;
  flex-basis:58px !important;
}
#lobby .demo-team-sidebar .picked-demo-image img{
  width:58px !important;
  height:54px !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:scaleX(1.06) scaleY(1.02);
  transform-origin:50% 60%;
}
#lobby .picked-starter-tag{
  display:inline-flex;
  width:max-content;
  margin-top:3px;
  padding:2px 6px;
  border:1px solid #66531f;
  border-radius:999px;
  background:#2a2415;
  color:#f1c55e;
  font-size:7px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.08em;
}

/* Identidad inequívoca de gladiador STARTER. */
#lobby .demo-axie-pick.starter-gladiator{
  position:relative !important;
  min-height:206px !important;
  padding:24px 12px 12px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 50% 34%,rgba(242,197,92,.055),transparent 38%),
    linear-gradient(180deg,#121b2b,#0e1522) !important;
}
#lobby .demo-axie-pick.starter-gladiator::before{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:38px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(141,161,190,.18),transparent);
  pointer-events:none;
}
#lobby .starter-badge,
#lobby .starter-family{
  position:absolute;
  top:8px;
  z-index:2;
  min-height:18px;
  display:inline-flex;
  align-items:center;
  padding:0 7px;
  border-radius:999px;
  font-size:7px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.085em;
}
#lobby .starter-badge{
  left:9px;
  border:1px solid #7a5e1b;
  background:#2c2513;
  color:#f3c95f;
}
#lobby .starter-family{
  right:9px;
  border:1px solid #34465f;
  background:#0b1420;
  color:#a9bbd2;
}
#lobby .starter-visual{
  height:132px !important;
  margin-bottom:2px !important;
  overflow:visible !important;
}
#lobby .starter-visual img{
  width:84% !important;
  height:124px !important;
  max-width:260px !important;
  object-fit:contain !important;
  transform:scaleX(1.10) scaleY(1.04) !important;
  transform-origin:50% 58% !important;
  filter:
    saturate(1.08)
    contrast(1.035)
    drop-shadow(0 11px 11px rgba(0,0,0,.34)) !important;
}
#lobby .starter-foot{
  display:block;
  margin-top:4px;
  color:#70849f;
  font-size:7px;
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
}
#lobby .starter-gladiator.in-team{
  opacity:.68 !important;
  box-shadow:inset 0 0 0 2px rgba(242,197,92,.42) !important;
}
#lobby .starter-gladiator.in-team .starter-badge{
  background:#413416;
  color:#ffe18a;
}
#lobby .starter-team-slot{
  box-shadow:inset 3px 0 0 rgba(242,197,92,.35) !important;
}

/* La grilla sigue siendo 3 x 3, pero ahora cabe junto al rail como dashboard. */
#lobby .picker-layout.demo-dashboard-layout .demo-real-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:0 !important;
}
#lobby .picker-layout.demo-dashboard-layout .demo-axie-pick strong{
  font-size:13px !important;
}
#lobby .picker-layout.demo-dashboard-layout .demo-axie-pick small{
  font-size:9px !important;
}

@media(max-width:1180px){
  #lobby .picker-layout.demo-dashboard-layout{
    grid-template-columns:minmax(0,1fr) 300px !important;
  }
  #lobby .picker-layout.demo-dashboard-layout .demo-real-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:900px){
  #lobby .lobby-head-right{width:100%;justify-content:space-between;align-items:center}
  #lobby .picker-layout.demo-dashboard-layout{
    grid-template-columns:1fr !important;
  }
  #lobby .picker-layout.demo-dashboard-layout .player-hub-rail{
    position:static !important;
    order:2 !important;
  }
  #lobby .picker-layout.demo-dashboard-layout .demo-real-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:580px){
  #lobby .lobby-quick-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  #lobby .lobby-quick-btn{padding:0 7px}
  #lobby .picker-layout.demo-dashboard-layout .demo-real-grid{
    grid-template-columns:1fr !important;
  }
}

/* ==============================================================
   A016R3 · STARTER DISTINCT IDENTITY
   Diferenciación visual fuerte de los 9 gladiadores demo.
   Mantiene layout/rail/IA; solo mejora identidad visual STARTER.
   ============================================================ */
#lobby .demo-axie-pick.starter-gladiator{
  min-height:218px !important;
  padding:28px 12px 12px !important;
  border-width:2px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 28px rgba(3,8,16,.34) !important;
}
#lobby .demo-axie-pick.starter-gladiator::after{
  content:"STARTER";
  position:absolute;
  right:14px;
  bottom:36px;
  font-size:22px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.18em;
  color:rgba(154,178,208,.06);
  pointer-events:none;
}
#lobby .starter-code{
  position:absolute;
  right:9px;
  top:30px;
  z-index:2;
  min-height:16px;
  display:inline-flex;
  align-items:center;
  padding:0 6px;
  border:1px solid #425a79;
  border-radius:999px;
  background:rgba(10,18,28,.88);
  color:#d4e5f7;
  font-size:7px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.08em;
}
#lobby .starter-mark{
  position:absolute;
  inset:36px auto auto 14px;
  z-index:0;
  font-size:40px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.06em;
  color:rgba(207,228,252,.07);
  pointer-events:none;
  user-select:none;
}
#lobby .starter-visual{
  position:relative !important;
  z-index:1 !important;
  height:136px !important;
}
#lobby .starter-pedestal{
  position:absolute;
  left:50%;
  bottom:8px;
  width:64%;
  height:18px;
  border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(242,197,92,.30),rgba(89,139,203,.16) 48%,transparent 76%);
  filter:blur(1px);
  pointer-events:none;
}
#lobby .starter-visual::before{
  content:"";
  position:absolute;
  left:50%;
  top:9px;
  width:128px;
  height:96px;
  transform:translateX(-50%);
  border-radius:26px;
  background:radial-gradient(circle at 50% 45%,rgba(117,163,225,.18),transparent 68%);
  pointer-events:none;
}
#lobby .starter-visual img{
  position:relative;
  z-index:1;
  width:86% !important;
  height:126px !important;
  max-width:266px !important;
  transform-origin:50% 58% !important;
  filter:
    saturate(1.10)
    contrast(1.05)
    drop-shadow(0 12px 12px rgba(0,0,0,.36)) !important;
}
#lobby .demo-team-sidebar .picked-demo-image{
  position:relative;
  overflow:visible;
}
#lobby .demo-team-sidebar .picked-demo-aura{
  position:absolute;
  inset:6px 4px 6px 4px;
  border-radius:14px;
  background:radial-gradient(circle at 50% 45%,rgba(116,170,236,.16),transparent 72%);
  pointer-events:none;
}
#lobby .demo-team-sidebar .picked-demo-image img{
  position:relative;
  z-index:1;
}
#lobby .starter-foot{
  color:#8ba2c2;
  font-size:7px;
  letter-spacing:.12em;
}

/* Variantes STARTER: cada uno se reconoce sin leer el nombre. */
#lobby .starter-bulwark{background:radial-gradient(circle at 50% 32%,rgba(200,210,236,.08),transparent 34%),linear-gradient(180deg,#141c2d,#0d1422) !important}
#lobby .starter-brute{background:radial-gradient(circle at 50% 30%,rgba(56,205,233,.12),transparent 34%),linear-gradient(180deg,#102032,#0c1422) !important}
#lobby .starter-crest{background:radial-gradient(circle at 50% 30%,rgba(247,184,101,.11),transparent 34%),linear-gradient(180deg,#1a1c30,#101526) !important}
#lobby .starter-thorn{background:radial-gradient(circle at 50% 30%,rgba(132,235,108,.11),transparent 34%),linear-gradient(180deg,#112326,#0d1522) !important}
#lobby .starter-coil{background:radial-gradient(circle at 50% 30%,rgba(214,173,255,.11),transparent 34%),linear-gradient(180deg,#171b30,#0f1525) !important}
#lobby .starter-sting{background:radial-gradient(circle at 50% 30%,rgba(255,88,122,.10),transparent 34%),linear-gradient(180deg,#23182a,#111523) !important}
#lobby .starter-surge{background:radial-gradient(circle at 50% 30%,rgba(67,210,255,.10),transparent 34%),linear-gradient(180deg,#112538,#0c1524) !important}
#lobby .starter-swift{background:radial-gradient(circle at 50% 30%,rgba(255,130,193,.10),transparent 34%),linear-gradient(180deg,#21172a,#101424) !important}
#lobby .starter-tusk{background:radial-gradient(circle at 50% 30%,rgba(255,236,182,.12),transparent 34%),linear-gradient(180deg,#1f1b24,#111420) !important}

#lobby .starter-bulwark .starter-mark{color:rgba(206,215,236,.09)}
#lobby .starter-brute .starter-mark{color:rgba(77,212,238,.12)}
#lobby .starter-crest .starter-mark{color:rgba(255,188,106,.12)}
#lobby .starter-thorn .starter-mark{color:rgba(125,235,111,.12)}
#lobby .starter-coil .starter-mark{color:rgba(229,187,255,.11)}
#lobby .starter-sting .starter-mark{color:rgba(255,109,142,.11)}
#lobby .starter-surge .starter-mark{color:rgba(93,215,255,.12)}
#lobby .starter-swift .starter-mark{color:rgba(255,141,205,.11)}
#lobby .starter-tusk .starter-mark{color:rgba(255,236,182,.12)}

#lobby .starter-bulwark .starter-visual img{transform:translateY(4px) scaleX(1.17) scaleY(1.12) !important}
#lobby .starter-brute .starter-visual img{transform:translateY(6px) scaleX(1.22) scaleY(1.10) !important}
#lobby .starter-crest .starter-visual img{transform:translateY(5px) scaleX(1.13) scaleY(1.08) !important}
#lobby .starter-thorn .starter-visual img{transform:translateY(4px) scaleX(1.16) scaleY(1.08) !important}
#lobby .starter-coil .starter-visual img{transform:translateY(4px) scaleX(1.14) scaleY(1.08) !important}
#lobby .starter-sting .starter-visual img{transform:translateY(6px) scaleX(1.18) scaleY(1.08) !important}
#lobby .starter-surge .starter-visual img{transform:translateY(4px) scaleX(1.16) scaleY(1.08) !important}
#lobby .starter-swift .starter-visual img{transform:translateY(5px) scaleX(1.12) scaleY(1.06) !important}
#lobby .starter-tusk .starter-visual img{transform:translateY(3px) scaleX(1.18) scaleY(1.10) !important}

#lobby .starter-bulwark .starter-pedestal,
#lobby .picked-demo-image.starter-bulwark .picked-demo-aura{background:radial-gradient(ellipse at center,rgba(194,206,236,.30),rgba(111,126,156,.16) 48%,transparent 76%)}
#lobby .starter-brute .starter-pedestal,
#lobby .picked-demo-image.starter-brute .picked-demo-aura{background:radial-gradient(ellipse at center,rgba(63,214,243,.28),rgba(53,105,170,.16) 48%,transparent 76%)}
#lobby .starter-crest .starter-pedestal,
#lobby .picked-demo-image.starter-crest .picked-demo-aura{background:radial-gradient(ellipse at center,rgba(255,189,99,.30),rgba(162,102,58,.14) 48%,transparent 76%)}
#lobby .starter-thorn .starter-pedestal,
#lobby .picked-demo-image.starter-thorn .picked-demo-aura{background:radial-gradient(ellipse at center,rgba(125,233,106,.28),rgba(66,125,67,.14) 48%,transparent 76%)}
#lobby .starter-coil .starter-pedestal,
#lobby .picked-demo-image.starter-coil .picked-demo-aura{background:radial-gradient(ellipse at center,rgba(226,189,255,.28),rgba(110,86,156,.14) 48%,transparent 76%)}
#lobby .starter-sting .starter-pedestal,
#lobby .picked-demo-image.starter-sting .picked-demo-aura{background:radial-gradient(ellipse at center,rgba(255,101,139,.28),rgba(148,60,95,.14) 48%,transparent 76%)}
#lobby .starter-surge .starter-pedestal,
#lobby .picked-demo-image.starter-surge .picked-demo-aura{background:radial-gradient(ellipse at center,rgba(81,216,255,.28),rgba(53,122,170,.16) 48%,transparent 76%)}
#lobby .starter-swift .starter-pedestal,
#lobby .picked-demo-image.starter-swift .picked-demo-aura{background:radial-gradient(ellipse at center,rgba(255,141,205,.28),rgba(161,83,131,.14) 48%,transparent 76%)}
#lobby .starter-tusk .starter-pedestal,
#lobby .picked-demo-image.starter-tusk .picked-demo-aura{background:radial-gradient(ellipse at center,rgba(255,236,182,.28),rgba(154,127,76,.15) 48%,transparent 76%)}

#lobby .starter-gladiator.in-team{box-shadow:inset 0 0 0 2px rgba(242,197,92,.42),0 10px 18px rgba(0,0,0,.24) !important}
#lobby .picker-layout.demo-dashboard-layout .demo-axie-pick strong{font-size:13px !important;letter-spacing:.01em}
#lobby .picker-layout.demo-dashboard-layout .demo-axie-pick small{font-size:9px !important;color:#9eb3cd !important}

/* ==============================================================
   A016R3R1 · STARTER SKIN VISIBLE ON THE AXIE
   El cambio ya no vive solo en la tarjeta: afecta al sprite/preview y al actor Spine.
   ============================================================ */
#lobby .starter-gladiator .starter-visual img{
  filter:saturate(1.34) contrast(1.09) brightness(1.03) drop-shadow(0 0 2px rgba(242,197,92,.9)) drop-shadow(0 12px 12px rgba(0,0,0,.40)) !important;
}
#lobby .starter-bulwark .starter-visual img{filter:saturate(.82) contrast(1.18) brightness(.98) hue-rotate(188deg) drop-shadow(0 0 3px rgba(168,188,255,.95)) drop-shadow(0 12px 12px rgba(0,0,0,.42)) !important}
#lobby .starter-brute .starter-visual img{filter:saturate(1.48) contrast(1.12) brightness(1.02) hue-rotate(8deg) drop-shadow(0 0 4px rgba(112,239,232,.95)) drop-shadow(0 12px 12px rgba(0,0,0,.42)) !important}
#lobby .starter-crest .starter-visual img{filter:saturate(1.24) contrast(1.10) brightness(1.06) sepia(.12) hue-rotate(342deg) drop-shadow(0 0 4px rgba(255,208,138,.95)) drop-shadow(0 12px 12px rgba(0,0,0,.42)) !important}
#lobby .starter-thorn .starter-visual img{filter:saturate(1.50) contrast(1.12) brightness(1.01) hue-rotate(22deg) drop-shadow(0 0 4px rgba(156,255,127,.95)) drop-shadow(0 12px 12px rgba(0,0,0,.42)) !important}
#lobby .starter-coil .starter-visual img{filter:saturate(1.25) contrast(1.08) brightness(1.04) hue-rotate(258deg) drop-shadow(0 0 4px rgba(219,167,255,.95)) drop-shadow(0 12px 12px rgba(0,0,0,.42)) !important}
#lobby .starter-sting .starter-visual img{filter:saturate(1.45) contrast(1.12) brightness(.99) hue-rotate(330deg) drop-shadow(0 0 4px rgba(255,135,151,.95)) drop-shadow(0 12px 12px rgba(0,0,0,.42)) !important}
#lobby .starter-surge .starter-visual img{filter:saturate(1.52) contrast(1.10) brightness(1.03) hue-rotate(18deg) drop-shadow(0 0 4px rgba(111,220,255,.95)) drop-shadow(0 12px 12px rgba(0,0,0,.42)) !important}
#lobby .starter-swift .starter-visual img{filter:saturate(1.42) contrast(1.08) brightness(1.04) hue-rotate(315deg) drop-shadow(0 0 4px rgba(255,157,212,.95)) drop-shadow(0 12px 12px rgba(0,0,0,.42)) !important}
#lobby .starter-tusk .starter-visual img{filter:saturate(.88) contrast(1.14) brightness(1.08) sepia(.18) drop-shadow(0 0 4px rgba(255,224,160,.95)) drop-shadow(0 12px 12px rgba(0,0,0,.42)) !important}

body.battle-mode .starter-live{
  position:relative !important;
}
body.battle-mode .starter-live.battle-team-preview,
body.battle-mode .starter-live.axie-image-wrap{
  filter:drop-shadow(0 0 4px rgba(242,197,92,.78)) !important;
}
body.battle-mode .starter-live.starter-bulwark{filter:saturate(.82) contrast(1.16) hue-rotate(188deg) drop-shadow(0 0 4px rgba(168,188,255,.9)) !important}
body.battle-mode .starter-live.starter-brute{filter:saturate(1.40) contrast(1.10) hue-rotate(8deg) drop-shadow(0 0 4px rgba(112,239,232,.9)) !important}
body.battle-mode .starter-live.starter-crest{filter:saturate(1.22) contrast(1.08) sepia(.10) hue-rotate(342deg) drop-shadow(0 0 4px rgba(255,208,138,.9)) !important}
body.battle-mode .starter-live.starter-thorn{filter:saturate(1.46) contrast(1.10) hue-rotate(22deg) drop-shadow(0 0 4px rgba(156,255,127,.9)) !important}
body.battle-mode .starter-live.starter-coil{filter:saturate(1.24) contrast(1.08) hue-rotate(258deg) drop-shadow(0 0 4px rgba(219,167,255,.9)) !important}
body.battle-mode .starter-live.starter-sting{filter:saturate(1.42) contrast(1.10) hue-rotate(330deg) drop-shadow(0 0 4px rgba(255,135,151,.9)) !important}
body.battle-mode .starter-live.starter-surge{filter:saturate(1.48) contrast(1.08) hue-rotate(18deg) drop-shadow(0 0 4px rgba(111,220,255,.9)) !important}
body.battle-mode .starter-live.starter-swift{filter:saturate(1.38) contrast(1.08) hue-rotate(315deg) drop-shadow(0 0 4px rgba(255,157,212,.9)) !important}
body.battle-mode .starter-live.starter-tusk{filter:saturate(.88) contrast(1.12) sepia(.16) drop-shadow(0 0 4px rgba(255,224,160,.9)) !important}

body.battle-mode .side-team .axie-card.starter-live-card::after{
  content:attr(data-starter-code);
  position:absolute;
  left:8px;
  bottom:7px;
  z-index:8;
  padding:2px 5px;
  border:1px solid rgba(242,197,92,.55);
  border-radius:999px;
  background:rgba(18,17,13,.82);
  color:#f4ce6c;
  font-size:7px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.08em;
  pointer-events:none;
}
body.battle-mode .fighter-token.starter-live-fighter::after{
  content:"STARTER";
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  z-index:10;
  padding:2px 6px;
  border:1px solid rgba(242,197,92,.52);
  border-radius:999px;
  background:rgba(15,16,20,.82);
  color:#f3cf72;
  font-size:7px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.09em;
  pointer-events:none;
}


/* A016R6 · Rigged Original Body Prototype */
#lobby .starter-visual img[src*='demo-starters'],
#lobby .picked-demo-image img[src*='demo-starters'],
.battle-fighter-fallback img[src*='demo-starters'],
.battle-team-fallback img[src*='demo-starters'],
.fighter-image[src*='demo-starters']{object-fit:contain !important; image-rendering:auto;}


/* A016R6 · UMBRA rigged custom body prototype */
#lobby .starter-rig-prototype{overflow:visible !important;}
#lobby .starter-rig-prototype .axie-preview-slot{width:210px !important;height:132px !important;max-width:92%;margin:0 auto;}
#lobby .starter-rig-prototype .axie-preview-slot canvas{filter:drop-shadow(0 12px 14px rgba(0,0,0,.36));}
#lobby .rig-prototype-badge{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);z-index:6;padding:3px 7px;border:1px solid rgba(112,239,232,.55);border-radius:999px;background:rgba(4,34,43,.86);color:#9ff9f4;font-size:7px;font-weight:1000;letter-spacing:.08em;white-space:nowrap;}
#lobby .rig-prototype-thumb .axie-preview-slot{width:72px !important;height:56px !important;}
#lobby .rig-prototype-thumb .axie-preview-slot canvas{max-width:72px !important;max-height:56px !important;}

/* A016R16 · Approved Starter Art Integration */
#lobby .starter-approved-portrait{
  height:150px !important;
  overflow:visible !important;
}
#lobby .starter-approved-portrait img{
  width:100% !important;
  height:146px !important;
  max-width:330px !important;
  object-fit:contain !important;
  transform:none !important;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.34)) !important;
  image-rendering:auto !important;
}
#lobby .starter-approved-portrait .starter-pedestal{bottom:2px !important;opacity:.7}
#lobby .approved-portrait-thumb img,
.starter-approved-team img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  image-rendering:auto !important;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.28)) !important;
}
#lobby .approved-portrait-thumb{overflow:visible !important}
.starter-approved-team{overflow:visible !important}

/* ==============================================================
   A016R23 · FORGE = MIXER CORE HYBRID · UMBRA BODY + FORGE PARTS
   The raster is already framed by renderPreview(). Do not recolor, stretch or
   offset FORGE after the Mixer has synthesized the hybrid skeleton.
   ============================================================ */
#lobby .starter-visual.starter-rig-prototype.starter-bulwark img{
  transform:none !important;
  transform-origin:50% 50% !important;
  filter:drop-shadow(0 0 3px rgba(112,239,232,.72)) drop-shadow(0 12px 12px rgba(0,0,0,.42)) !important;
}
body.battle-mode .starter-live.starter-bulwark{
  filter:drop-shadow(0 0 4px rgba(112,239,232,.78)) !important;
}




/* ================================================================
   A016R26 · 9 FULL MIXER STARTERS · NORMAL AXIE APPEARANCE
   Preserve the natural Mixer render. Starter identity lives in the card/badge,
   never in hue-rotate, body stretching or runtime skeleton tint.
   ================================================================ */
#lobby .starter-gladiator .starter-rig-prototype img,
#lobby .starter-gladiator .starter-rig-prototype canvas,
#lobby .rig-prototype-thumb img,
#lobby .rig-prototype-thumb canvas{
  transform:none !important;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.36)) !important;
}
body.battle-mode .starter-live,
body.battle-mode .starter-live.starter-bulwark,
body.battle-mode .starter-live.starter-brute,
body.battle-mode .starter-live.starter-crest,
body.battle-mode .starter-live.starter-thorn,
body.battle-mode .starter-live.starter-coil,
body.battle-mode .starter-live.starter-sting,
body.battle-mode .starter-live.starter-surge,
body.battle-mode .starter-live.starter-swift,
body.battle-mode .starter-live.starter-tusk{
  filter:none !important;
}

/* A016R33 · SPELLS · central combat feedback */
.card-btn.spell{border-color:rgba(205,132,255,.75);box-shadow:inset 0 0 0 1px rgba(205,132,255,.18),0 10px 24px rgba(66,22,96,.16)}
.card-btn.spell.selected{border-color:#e4b8ff;box-shadow:0 0 0 2px rgba(228,184,255,.28),0 14px 30px rgba(87,37,126,.25)}
.card-btn.spell .card-role-icon{filter:drop-shadow(0 0 6px rgba(228,184,255,.75))}
.card-btn.spell .card-power{font-size:11px;line-height:1.05;max-width:76px;text-align:center;white-space:normal}
.guide-card-mini.spell{border-color:rgba(205,132,255,.55);background:linear-gradient(180deg,rgba(105,53,144,.25),rgba(23,18,35,.9))}
.last-breath-state{margin-top:4px;color:#ffd16a!important;font-weight:900;letter-spacing:.02em}
.fighter.spell-ghost .fighter-token{animation:r33GhostPulse .72s ease-in-out 2}
.fighter.spell-reflex .fighter-token{animation:r33ReflexPulse .55s ease-in-out 2}
.fighter.spell-last-breath .fighter-token{filter:drop-shadow(0 0 16px rgba(255,194,73,.65))}
.fighter.spell-death-pact .fighter-token{filter:drop-shadow(0 0 18px rgba(255,69,78,.78))}
.fighter.spell-disarm .fighter-token{filter:drop-shadow(0 0 13px rgba(194,143,255,.7))}
.fighter.spell-deception .fighter-token{filter:drop-shadow(0 0 13px rgba(255,122,221,.72))}
@keyframes r33GhostPulse{0%,100%{opacity:1}50%{opacity:.28;filter:saturate(.25) brightness(1.35)}}
@keyframes r33ReflexPulse{0%,100%{filter:none}50%{filter:brightness(1.35) drop-shadow(0 0 18px rgba(210,242,255,.95))}}

/* =====================================================================
   A016R35 · MOBILE FIRST BATTLE POLISH · PORTRAIT + LANDSCAPE
   Safe-area aware, touch-first, no combat/gameplay changes.
   ===================================================================== */

/* Mobile browser chrome / notches / tap ergonomics */
@media (max-width:999px){
  body.battle-mode{
    overscroll-behavior:none;
    -webkit-text-size-adjust:100%;
  }
  body.battle-mode .app{
    padding-top:max(4px,env(safe-area-inset-top));
    padding-right:max(4px,env(safe-area-inset-right));
    padding-bottom:max(4px,env(safe-area-inset-bottom));
    padding-left:max(4px,env(safe-area-inset-left));
  }
  body.battle-mode .fight-btn,
  body.battle-mode .own-section .axie-card,
  body.battle-mode .card-btn{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  body.battle-mode .own-section .axie-card.alive:not(:disabled):active,
  body.battle-mode .card-btn:not(:disabled):active,
  body.battle-mode .fight-btn:not(:disabled):active{transform:scale(.985)}
}

/* -------------------- PHONE · PORTRAIT -------------------- */
@media (orientation:portrait) and (max-width:599px){
  body.battle-mode{overflow:hidden!important}
  body.battle-mode .app{
    width:100%!important;
    height:100vh!important;height:100dvh!important;
    min-height:0!important;
  }
  body.battle-mode .battle-shell{
    height:100%!important;min-height:0!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:4px!important;
  }
  body.battle-mode .battle-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    min-height:46px!important;
    padding:4px 7px!important;
    border-radius:10px!important;
    gap:6px!important;
  }
  body.battle-mode .battle-header>div:first-child{min-width:0}
  body.battle-mode .room-small{font-size:7px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.battle-mode .round-label{font-size:11px!important;line-height:1.05!important}
  body.battle-mode .timer-wrap{align-self:center}
  body.battle-mode .timer-label{font-size:6.5px!important;letter-spacing:.14em!important}
  body.battle-mode .timer{font-size:25px!important;line-height:.92!important}
  body.battle-mode .ready-indicator{
    grid-column:auto!important;
    justify-self:end!important;align-self:center!important;
    max-width:100%!important;
    margin:0!important;padding:4px 5px!important;
    font-size:6.5px!important;line-height:1.1!important;
    text-align:center!important;white-space:normal!important;
  }

  body.battle-mode .battle-landscape{
    display:grid!important;
    height:100%!important;min-height:0!important;overflow:hidden!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(138px,1fr) auto auto auto!important;
    grid-template-areas:
      "opp"
      "arena"
      "own"
      "cards"
      "fight"!important;
    gap:4px!important;
  }
  body.battle-mode .opponent-side,
  body.battle-mode .player-side{display:contents!important}
  body.battle-mode .opponent-section{grid-area:opp!important}
  body.battle-mode .battle-center{grid-area:arena!important;display:flex!important;min-height:0!important}
  body.battle-mode .own-section{grid-area:own!important}
  body.battle-mode .cards-panel{grid-area:cards!important}
  body.battle-mode .fight-zone{grid-area:fight!important}

  /* Teams become a readable 3-up strip instead of two tiny vertical columns. */
  body.battle-mode .team-section{
    min-height:0!important;
    padding:4px 5px!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  body.battle-mode .side-title{
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;
    margin:0 0 3px!important;
    font-size:9px!important;line-height:1!important;
    white-space:nowrap!important;
  }
  body.battle-mode .side-title small{font-size:5.5px!important;letter-spacing:.05em!important;opacity:.78}
  body.battle-mode .side-team{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    gap:4px!important;height:auto!important;
  }
  body.battle-mode .side-team .axie-card,
  body.battle-mode .opponent-section .side-team .axie-card{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    column-gap:4px!important;row-gap:0!important;
    min-width:0!important;min-height:60px!important;height:60px!important;
    padding:4px!important;padding-right:4px!important;
    border-radius:8px!important;
    overflow:hidden!important;
    align-items:center!important;
  }
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon,
  body.battle-mode .opponent-section .side-team .battle-team-preview,
  body.battle-mode .opponent-section .side-team .battle-team-fallback,
  body.battle-mode .opponent-section .side-team .battle-team-icon,
  body.battle-mode .side-team .axie-image-wrap{
    grid-column:1!important;grid-row:1 / 4!important;
    justify-self:center!important;align-self:center!important;
    width:34px!important;height:34px!important;
    min-width:34px!important;
    margin:0!important;
  }
  body.battle-mode .side-team .axie-name,
  body.battle-mode .opponent-section .side-team .axie-name{
    grid-column:2!important;grid-row:1!important;
    align-self:end!important;
    min-width:0!important;padding:0!important;
    font-size:8.5px!important;line-height:1.05!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  body.battle-mode .side-team .axie-meta,
  body.battle-mode .opponent-section .side-team .axie-meta{
    grid-column:2!important;
    min-width:0!important;padding:0!important;
    font-size:6.5px!important;line-height:1.05!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  body.battle-mode .side-team .axie-card>.axie-meta:not(.last-breath-state){display:none!important}
  body.battle-mode .side-team .axie-life,
  body.battle-mode .opponent-section .side-team .axie-life{
    grid-column:2!important;grid-row:2 / 4!important;
    justify-content:flex-start!important;align-self:center!important;
    gap:3px!important;margin:1px 0 0!important;
  }
  body.battle-mode .side-team .life-label{display:none!important}
  body.battle-mode .side-team .life-pips{gap:2px!important}
  body.battle-mode .side-team .life-pip{width:7px!important;height:7px!important}
  body.battle-mode .side-team .life-count{font-size:6.5px!important}
  body.battle-mode .side-team .last-breath-state{
    grid-column:1 / -1!important;grid-row:3!important;
    align-self:end!important;margin:0!important;
    font-size:5.5px!important;line-height:1!important;
    background:rgba(48,28,8,.9);padding:2px!important;border-radius:4px!important;
  }
  body.battle-mode .side-team .vanguard-badge,
  body.battle-mode .opponent-section .side-team .vanguard-badge{
    right:2px!important;top:2px!important;
    padding:2px 3px!important;min-width:14px!important;
    font-size:0!important;line-height:1!important;
  }
  body.battle-mode .side-team .vanguard-badge::after{content:"1º";font-size:6.5px!important}
  body.battle-mode .side-team .axie-card.starter-live-card::after{display:none!important}

  /* Arena gets the largest flexible area. */
  body.battle-mode .battle-center .arena{
    width:100%!important;height:100%!important;min-height:138px!important;
    grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;
    padding:8px 4% 27px!important;
    border-radius:11px!important;
  }
  body.battle-mode .arena-floor{left:8%!important;right:8%!important;bottom:21px!important;height:24px!important}
  body.battle-mode .fighter-token{
    width:clamp(62px,20vw,82px)!important;height:clamp(62px,20vw,82px)!important;
    font-size:29px!important;border-width:2px!important;
  }
  body.battle-mode .fighter-name{font-size:9px!important;margin-top:2px!important;line-height:1!important}
  body.battle-mode .fighter-life{gap:3px!important;margin-top:2px!important}
  body.battle-mode .fighter-life .life-label{display:none!important}
  body.battle-mode .fighter-life .life-pips{gap:2px!important}
  body.battle-mode .fighter-life .life-pip{width:8px!important;height:8px!important}
  body.battle-mode .fighter-life .life-count{font-size:7px!important}
  body.battle-mode .fighter-card{font-size:6.5px!important;margin-top:1px!important;max-width:120px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.battle-mode .vs{font-size:16px!important}
  body.battle-mode .battle-message{font-size:7px!important;bottom:4px!important;letter-spacing:.055em!important}
  body.battle-mode .fighter-token.starter-live-fighter::after{font-size:5px!important;bottom:-4px!important;padding:1px 3px!important}

  /* Three cards always remain side by side and touchable. */
  body.battle-mode .cards-panel{padding:4px 5px!important;border-radius:10px!important;overflow:hidden!important}
  body.battle-mode .cards-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;flex-direction:row!important}
  body.battle-mode .cards-head>div{min-width:0!important}
  body.battle-mode .cards-head .section-label{font-size:6px!important;margin:0!important;line-height:1!important}
  body.battle-mode .cards-head strong{display:block!important;font-size:8px!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.battle-mode .cards-head .hint{font-size:5.5px!important;line-height:1.05!important;max-width:42%!important;text-align:right!important}
  body.battle-mode .hand{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;margin-top:3px!important}
  body.battle-mode .card-btn{
    min-width:0!important;min-height:70px!important;height:70px!important;
    padding:4px!important;border-radius:9px!important;
    grid-template-rows:20px minmax(0,1fr)!important;
  }
  body.battle-mode .card-head-r15r4{min-width:0!important;height:20px!important;gap:3px!important}
  body.battle-mode .card-head-r15r4 .card-role-icon{width:18px!important;height:18px!important;font-size:10px!important;min-width:18px!important}
  body.battle-mode .card-head-r15r4 .card-role-label{font-size:7px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.battle-mode .card-body-r15r4{min-height:0!important;grid-template-columns:minmax(0,1fr) 28px!important;gap:3px!important}
  body.battle-mode .card-body-r15r4 .card-real-figure{height:40px!important;min-height:40px!important;border-radius:6px!important}
  body.battle-mode .card-body-r15r4 .card-power{
    width:26px!important;min-width:26px!important;height:26px!important;
    padding:1px!important;font-size:13px!important;line-height:.92!important;
    overflow:hidden!important;
  }
  body.battle-mode .card-btn.spell .card-body-r15r4 .card-power{font-size:6.5px!important;max-width:26px!important;word-break:break-word!important}
  body.battle-mode .empty-hand{min-height:46px!important;padding:8px!important;font-size:7px!important}

  /* Primary action is always visible at the bottom and thumb-sized. */
  body.battle-mode .fight-zone{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:2px!important;
    min-height:44px!important;
  }
  body.battle-mode .fight-btn{
    order:-1!important;min-height:42px!important;height:42px!important;
    border-radius:10px!important;font-size:13px!important;letter-spacing:.04em!important;
  }
  body.battle-mode .selection-summary,
  body.battle-mode .waiting-text{
    display:none!important;
  }
  body.battle-mode .round-result{font-size:clamp(34px,15vw,60px)!important}
}

/* Very short portrait devices: shave non-essential text, keep all controls. */
@media (orientation:portrait) and (max-width:599px) and (max-height:650px){
  body.battle-mode .battle-header{min-height:42px!important}
  body.battle-mode .battle-landscape{grid-template-rows:auto minmax(118px,1fr) auto auto auto!important}
  body.battle-mode .side-title small{display:none!important}
  body.battle-mode .side-team .axie-card,
  body.battle-mode .opponent-section .side-team .axie-card{height:54px!important;min-height:54px!important}
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon,
  body.battle-mode .opponent-section .side-team .battle-team-preview,
  body.battle-mode .opponent-section .side-team .battle-team-fallback,
  body.battle-mode .opponent-section .side-team .battle-team-icon{width:30px!important;height:30px!important}
  body.battle-mode .card-btn{height:64px!important;min-height:64px!important}
  body.battle-mode .card-body-r15r4 .card-real-figure{height:34px!important;min-height:34px!important}
  body.battle-mode .cards-head .hint{display:none!important}
}

/* -------------------- PHONE · LANDSCAPE -------------------- */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body.battle-mode{overflow:hidden!important}
  body.battle-mode .app{
    width:100%!important;height:100vh!important;height:100dvh!important;min-height:0!important;
  }
  body.battle-mode .battle-shell{
    height:100%!important;min-height:0!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:3px!important;
  }
  body.battle-mode .battle-header{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    min-height:38px!important;padding:3px 7px!important;border-radius:8px!important;gap:6px!important;
  }
  body.battle-mode .room-small{font-size:6.5px!important}
  body.battle-mode .round-label{font-size:10px!important;line-height:1!important}
  body.battle-mode .timer-label{font-size:6px!important}
  body.battle-mode .timer{font-size:22px!important;line-height:.9!important}
  body.battle-mode .ready-indicator{
    grid-column:auto!important;justify-self:end!important;align-self:center!important;
    margin:0!important;padding:3px 5px!important;font-size:6px!important;line-height:1!important;white-space:nowrap!important;
  }

  body.battle-mode .battle-landscape{
    display:grid!important;height:100%!important;min-height:0!important;overflow:hidden!important;
    grid-template-columns:minmax(118px,21vw) minmax(230px,1fr) minmax(218px,34vw)!important;
    grid-template-rows:minmax(0,1fr)!important;
    grid-template-areas:"opp arena own"!important;
    gap:4px!important;
  }
  body.battle-mode .opponent-side{grid-area:opp!important;display:flex!important;min-height:0!important}
  body.battle-mode .battle-center{grid-area:arena!important;display:flex!important;min-height:0!important}
  body.battle-mode .player-side{
    grid-area:own!important;display:grid!important;min-height:0!important;
    grid-template-rows:minmax(0,1fr) auto auto!important;gap:3px!important;
  }
  body.battle-mode .opponent-section,
  body.battle-mode .own-section{
    display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;
    width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;
  }
  body.battle-mode .team-section{padding:4px!important;border-radius:8px!important}
  body.battle-mode .side-title{font-size:8px!important;line-height:1!important;margin:0 0 3px!important}
  body.battle-mode .side-title small{font-size:5px!important;letter-spacing:.04em!important}
  body.battle-mode .side-team{
    display:grid!important;grid-template-columns:1fr!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;
    height:100%!important;min-height:0!important;gap:3px!important;
  }
  body.battle-mode .side-team .axie-card,
  body.battle-mode .opponent-section .side-team .axie-card{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    min-height:0!important;height:100%!important;min-width:0!important;
    padding:3px 4px!important;padding-right:4px!important;column-gap:4px!important;row-gap:0!important;
    border-radius:7px!important;overflow:hidden!important;align-items:center!important;
  }
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon,
  body.battle-mode .opponent-section .side-team .battle-team-preview,
  body.battle-mode .opponent-section .side-team .battle-team-fallback,
  body.battle-mode .opponent-section .side-team .battle-team-icon,
  body.battle-mode .side-team .axie-image-wrap{
    grid-column:1!important;grid-row:1 / 4!important;
    justify-self:center!important;align-self:center!important;
    width:36px!important;height:36px!important;min-width:36px!important;margin:0!important;
  }
  body.battle-mode .side-team .axie-name,
  body.battle-mode .opponent-section .side-team .axie-name{
    grid-column:2!important;grid-row:1!important;align-self:end!important;
    min-width:0!important;padding:0!important;font-size:8px!important;line-height:1!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  body.battle-mode .side-team .axie-meta,
  body.battle-mode .opponent-section .side-team .axie-meta{
    grid-column:2!important;min-width:0!important;padding:0!important;
    font-size:5.5px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  body.battle-mode .side-team .axie-card>.axie-meta:not(.last-breath-state){display:none!important}
  body.battle-mode .side-team .axie-life,
  body.battle-mode .opponent-section .side-team .axie-life{
    grid-column:2!important;grid-row:2 / 4!important;
    justify-content:flex-start!important;align-self:center!important;gap:2px!important;margin:0!important;
  }
  body.battle-mode .side-team .life-label{display:none!important}
  body.battle-mode .side-team .life-pips{gap:2px!important}
  body.battle-mode .side-team .life-pip{width:6px!important;height:6px!important}
  body.battle-mode .side-team .life-count{font-size:5.5px!important}
  body.battle-mode .side-team .last-breath-state{font-size:5px!important;line-height:1!important;margin:0!important}
  body.battle-mode .side-team .vanguard-badge,
  body.battle-mode .opponent-section .side-team .vanguard-badge{
    right:2px!important;top:2px!important;padding:1px 2px!important;font-size:0!important;line-height:1!important;
  }
  body.battle-mode .side-team .vanguard-badge::after{content:"1º";font-size:5.5px!important}
  body.battle-mode .side-team .axie-card.starter-live-card::after{display:none!important}

  body.battle-mode .battle-center .arena{
    width:100%!important;height:100%!important;min-height:0!important;
    grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;
    padding:6px 3% 22px!important;border-radius:9px!important;
  }
  body.battle-mode .arena-floor{left:7%!important;right:7%!important;bottom:17px!important;height:20px!important}
  body.battle-mode .fighter-token{
    width:clamp(62px,14vw,96px)!important;height:clamp(62px,14vw,96px)!important;
    font-size:31px!important;border-width:2px!important;
  }
  body.battle-mode .fighter-name{font-size:8px!important;margin-top:2px!important;line-height:1!important}
  body.battle-mode .fighter-life{gap:2px!important;margin-top:2px!important}
  body.battle-mode .fighter-life .life-label{display:none!important}
  body.battle-mode .fighter-life .life-pips{gap:2px!important}
  body.battle-mode .fighter-life .life-pip{width:7px!important;height:7px!important}
  body.battle-mode .fighter-life .life-count{font-size:6px!important}
  body.battle-mode .fighter-card{font-size:6px!important;margin-top:1px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:110px!important}
  body.battle-mode .vs{font-size:14px!important}
  body.battle-mode .battle-message{font-size:6.5px!important;bottom:3px!important;letter-spacing:.04em!important}
  body.battle-mode .fighter-token.starter-live-fighter::after{font-size:4.5px!important;bottom:-3px!important;padding:1px 3px!important}

  body.battle-mode .cards-panel{padding:3px 4px!important;border-radius:8px!important;overflow:hidden!important}
  body.battle-mode .cards-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:4px!important;flex-direction:row!important}
  body.battle-mode .cards-head>div{min-width:0!important}
  body.battle-mode .cards-head .section-label{display:none!important}
  body.battle-mode .cards-head strong{font-size:7px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.battle-mode .cards-head .hint{display:none!important}
  body.battle-mode .hand{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important;margin-top:2px!important}
  body.battle-mode .card-btn{
    min-width:0!important;min-height:58px!important;height:58px!important;
    padding:3px!important;border-radius:7px!important;
    grid-template-rows:17px minmax(0,1fr)!important;
  }
  body.battle-mode .card-head-r15r4{height:17px!important;gap:2px!important;min-width:0!important}
  body.battle-mode .card-head-r15r4 .card-role-icon{width:15px!important;height:15px!important;min-width:15px!important;font-size:8px!important}
  body.battle-mode .card-head-r15r4 .card-role-label{font-size:5.5px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.battle-mode .card-body-r15r4{grid-template-columns:minmax(0,1fr) 22px!important;gap:2px!important;min-height:0!important}
  body.battle-mode .card-body-r15r4 .card-real-figure{height:34px!important;min-height:34px!important;border-radius:5px!important}
  body.battle-mode .card-body-r15r4 .card-power{width:21px!important;min-width:21px!important;height:21px!important;font-size:11px!important;padding:0!important}
  body.battle-mode .card-btn.spell .card-body-r15r4 .card-power{font-size:5px!important;max-width:21px!important;word-break:break-word!important}
  body.battle-mode .empty-hand{min-height:38px!important;padding:6px!important;font-size:6px!important}

  body.battle-mode .fight-zone{display:grid!important;grid-template-columns:1fr!important;gap:2px!important;min-height:38px!important}
  body.battle-mode .fight-btn{min-height:38px!important;height:38px!important;border-radius:8px!important;font-size:11px!important;letter-spacing:.035em!important}
  body.battle-mode .selection-summary,
  body.battle-mode .waiting-text{display:none!important}
  body.battle-mode .round-result{font-size:clamp(28px,10vw,52px)!important}
}

/* Narrow landscape phones (e.g. 667×375): preserve arena by trimming side rails. */
@media (orientation:landscape) and (max-width:720px) and (max-height:600px){
  body.battle-mode .battle-landscape{
    grid-template-columns:minmax(112px,19vw) minmax(218px,1fr) minmax(205px,32vw)!important;
  }
  body.battle-mode .side-title small{display:none!important}
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon,
  body.battle-mode .opponent-section .side-team .battle-team-preview,
  body.battle-mode .opponent-section .side-team .battle-team-fallback,
  body.battle-mode .opponent-section .side-team .battle-team-icon{width:31px!important;height:31px!important}
  body.battle-mode .side-team .axie-card,
  body.battle-mode .opponent-section .side-team .axie-card{grid-template-columns:32px minmax(0,1fr)!important;column-gap:2px!important}
  body.battle-mode .fighter-token{width:clamp(58px,13vw,82px)!important;height:clamp(58px,13vw,82px)!important}
}


/* Legacy / very narrow landscape phones: fit three combat columns without horizontal scroll. */
@media (orientation:landscape) and (max-width:580px) and (max-height:600px){
  body.battle-mode .battle-landscape{
    grid-template-columns:minmax(92px,19vw) minmax(178px,1fr) minmax(184px,34vw)!important;
    gap:3px!important;
  }
  body.battle-mode .side-team .axie-card,
  body.battle-mode .opponent-section .side-team .axie-card{
    grid-template-columns:28px minmax(0,1fr)!important;
    padding:2px 3px!important;column-gap:2px!important;
  }
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon,
  body.battle-mode .opponent-section .side-team .battle-team-preview,
  body.battle-mode .opponent-section .side-team .battle-team-fallback,
  body.battle-mode .opponent-section .side-team .battle-team-icon{width:27px!important;height:27px!important}
  body.battle-mode .side-team .axie-name,
  body.battle-mode .opponent-section .side-team .axie-name{font-size:6.5px!important}
  body.battle-mode .fighter-token{width:56px!important;height:56px!important}
  body.battle-mode .card-head-r15r4 .card-role-label{font-size:5px!important}
}

/* -------------------- MOBILE LOBBY / SELECTOR -------------------- */
@media (max-width:599px){
  body:not(.battle-mode) .app{
    width:100%!important;
    padding:max(8px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))!important;
  }
  #lobby.panel{padding:12px!important;border-radius:14px!important}
  #lobby .lobby-topline{gap:8px!important}
  #lobby .lobby-topline h2{font-size:21px!important}
  #lobby .lobby-head-right{gap:6px!important}
  #lobby .picker-layout.demo-dashboard-layout .demo-real-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  #lobby .demo-axie-pick.starter-gladiator{
    min-height:178px!important;padding:24px 7px 8px!important;
  }
  #lobby .starter-visual{height:106px!important}
  #lobby .starter-visual .axie-preview-slot{height:106px!important;min-height:106px!important}
  #lobby .picker-layout.demo-dashboard-layout .demo-axie-pick strong{font-size:11px!important}
  #lobby .picker-layout.demo-dashboard-layout .demo-axie-pick small{font-size:8px!important}
  #lobby .starter-code{top:27px!important;font-size:6px!important}
  #lobby .starter-badge,#lobby .starter-family{font-size:6px!important}
}
@media (max-width:340px){
  #lobby .picker-layout.demo-dashboard-layout .demo-real-grid{grid-template-columns:1fr!important}
}

@media (orientation:landscape) and (max-height:600px) and (max-width:999px){
  body:not(.battle-mode) .app{
    width:100%!important;
    padding:max(5px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))!important;
  }
  #lobby.panel{padding:10px!important}
  #lobby .picker-layout.demo-dashboard-layout .demo-real-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  #lobby .demo-axie-pick.starter-gladiator{min-height:168px!important;padding:23px 7px 7px!important}
  #lobby .starter-visual{height:98px!important}
  #lobby .starter-visual .axie-preview-slot{height:98px!important;min-height:98px!important}
}

/* Mobile end screen: never hide actions below browser chrome. */
@media (max-width:599px), (orientation:landscape) and (max-height:600px) and (max-width:999px){
  body:not(.battle-mode) .end-panel{
    max-width:560px!important;
    margin:max(6px,env(safe-area-inset-top)) auto max(8px,env(safe-area-inset-bottom))!important;
    padding:18px!important;
  }
  .end-panel h2{font-size:clamp(30px,10vw,44px)!important}
  .end-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .end-actions .btn{width:100%!important;min-height:44px!important}
}

/* =====================================================================
   A016R36 · SPELL-AWARE CINEMATIC + MOBILE DASHBOARD COMPACTION
   - Combat portrait stays exactly as R35.
   - Landscape gives the coliseum more visual weight.
   - Demo dashboard keeps roster + selection rail on the same row.
   ===================================================================== */
body.battle-mode .arena .round-result.spell{
  color:#e7c2ff!important;
  background:radial-gradient(circle,rgba(177,103,235,.20),transparent 48%)!important;
}

/* PHONE DASHBOARD · PORTRAIT: 2 Axies per row + selection rail alongside. */
@media (orientation:portrait) and (max-width:599px){
  #lobby .picker-layout.demo-dashboard-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(108px,30vw,126px)!important;
    gap:6px!important;
    align-items:start!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .player-hub-rail{
    position:sticky!important;
    top:max(5px,env(safe-area-inset-top))!important;
    order:initial!important;
    min-width:0!important;
    align-self:start!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .demo-real-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }
  #lobby .demo-axie-pick.starter-gladiator{
    min-height:112px!important;
    padding:19px 4px 5px!important;
    border-radius:9px!important;
  }
  #lobby .starter-visual{height:64px!important;margin:0!important}
  #lobby .starter-visual .axie-preview-slot{height:64px!important;min-height:64px!important}
  #lobby .starter-visual img{height:64px!important;max-width:118px!important}
  #lobby .starter-badge,#lobby .starter-family{top:5px!important;min-height:13px!important;padding:0 4px!important;font-size:4.8px!important}
  #lobby .starter-code{top:19px!important;font-size:4.7px!important}
  #lobby .starter-mark{font-size:22px!important;bottom:13px!important}
  #lobby .picker-layout.demo-dashboard-layout .demo-axie-pick strong{font-size:8px!important;line-height:1!important}
  #lobby .picker-layout.demo-dashboard-layout .demo-axie-pick small{font-size:5.5px!important;line-height:1!important}
  #lobby .starter-foot{font-size:4.8px!important;margin-top:2px!important}

  #lobby .player-hub-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3px!important}
  #lobby .player-learn-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3px!important;margin-top:3px!important}
  #lobby .player-hub-tab,#lobby .player-learn-tab{min-height:25px!important;padding:3px 1px!important;font-size:5.2px!important;letter-spacing:.02em!important}
  #lobby .demo-team-sidebar{padding:6px!important;border-radius:9px!important}
  #lobby .team-sidebar-head .selection-title{font-size:7px!important;letter-spacing:.03em!important}
  #lobby .team-sidebar-hint{font-size:5.4px!important;line-height:1.15!important;margin:3px 0 0!important}
  #lobby .demo-team-sidebar .picked-team{gap:4px!important;margin-top:5px!important}
  #lobby .demo-team-sidebar .team-slot{min-height:48px!important;padding:3px!important;border-radius:7px!important}
  #lobby .demo-team-sidebar .team-slot.empty{min-height:44px!important}
  #lobby .team-slot-number{width:15px!important;height:15px!important;font-size:6px!important}
  #lobby .team-slot-empty{font-size:5.5px!important;line-height:1.1!important}
  #lobby .demo-team-sidebar .picked-demo-image{width:31px!important;height:29px!important;flex-basis:31px!important}
  #lobby .demo-team-sidebar .picked-demo-image img{width:31px!important;height:29px!important}
  #lobby .picked-demo-copy b{font-size:6px!important;line-height:1!important}
  #lobby .picked-demo-copy small{font-size:4.7px!important;line-height:1!important}
  #lobby .picked-starter-tag{display:none!important}
  #lobby .pick-actions{gap:1px!important}
  #lobby .pick-actions button{width:18px!important;height:18px!important;border-radius:5px!important;font-size:7px!important;padding:0!important}
  #lobby .team-sidebar-actions{gap:4px!important;margin-top:5px!important}
  #lobby .team-sidebar-actions .btn{min-height:29px!important;padding:4px 2px!important;font-size:6px!important;border-radius:7px!important}
  #lobby #lobbyError{font-size:5.5px!important;margin-top:3px!important}
}

/* PHONE DASHBOARD · LANDSCAPE: 3 Axies per row + selection rail on the right. */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  #lobby .picker-layout.demo-dashboard-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(166px,25vw,218px)!important;
    gap:6px!important;
    align-items:start!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .player-hub-rail{
    position:sticky!important;
    top:max(4px,env(safe-area-inset-top))!important;
    order:initial!important;
    min-width:0!important;
    align-self:start!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .demo-real-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  #lobby .demo-axie-pick.starter-gladiator{
    min-height:102px!important;
    padding:18px 4px 5px!important;
    border-radius:8px!important;
  }
  #lobby .starter-visual{height:57px!important;margin:0!important}
  #lobby .starter-visual .axie-preview-slot{height:57px!important;min-height:57px!important}
  #lobby .starter-visual img{height:57px!important;max-width:132px!important}
  #lobby .starter-badge,#lobby .starter-family{top:5px!important;min-height:12px!important;padding:0 4px!important;font-size:4.7px!important}
  #lobby .starter-code{top:18px!important;font-size:4.7px!important}
  #lobby .starter-mark{font-size:21px!important;bottom:12px!important}
  #lobby .picker-layout.demo-dashboard-layout .demo-axie-pick strong{font-size:7.5px!important;line-height:1!important}
  #lobby .picker-layout.demo-dashboard-layout .demo-axie-pick small{font-size:5.2px!important;line-height:1!important}
  #lobby .starter-foot{font-size:4.7px!important;margin-top:1px!important}
  #lobby .player-hub-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important}
  #lobby .player-learn-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3px!important;margin-top:3px!important}
  #lobby .player-hub-tab,#lobby .player-learn-tab{min-height:25px!important;padding:3px 1px!important;font-size:5.2px!important}
  #lobby .demo-team-sidebar{padding:6px!important;border-radius:8px!important}
  #lobby .team-sidebar-hint{font-size:5.2px!important;line-height:1.1!important;margin:3px 0 0!important}
  #lobby .demo-team-sidebar .picked-team{gap:3px!important;margin-top:4px!important}
  #lobby .demo-team-sidebar .team-slot{min-height:44px!important;padding:3px!important;border-radius:6px!important}
  #lobby .demo-team-sidebar .team-slot.empty{min-height:40px!important}
  #lobby .demo-team-sidebar .picked-demo-image{width:29px!important;height:27px!important;flex-basis:29px!important}
  #lobby .demo-team-sidebar .picked-demo-image img{width:29px!important;height:27px!important}
  #lobby .picked-demo-copy b{font-size:6px!important;line-height:1!important}
  #lobby .picked-demo-copy small{font-size:4.7px!important;line-height:1!important}
  #lobby .picked-starter-tag{display:none!important}
  #lobby .team-sidebar-actions{gap:3px!important;margin-top:4px!important}
  #lobby .team-sidebar-actions .btn{min-height:27px!important;padding:3px 2px!important;font-size:5.7px!important;border-radius:6px!important}
}

/* BATTLE · LANDSCAPE ONLY: more coliseum, slimmer player rails. Portrait untouched. */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body.battle-mode .battle-landscape{
    grid-template-columns:clamp(94px,16vw,128px) minmax(280px,1fr) clamp(182px,27vw,246px)!important;
    gap:3px!important;
  }
  body.battle-mode .team-section{padding:3px!important}
  body.battle-mode .side-title{font-size:7px!important;margin-bottom:2px!important}
  body.battle-mode .side-title small{font-size:4.6px!important}
  body.battle-mode .side-team{gap:2px!important}
  body.battle-mode .side-team .axie-card,
  body.battle-mode .opponent-section .side-team .axie-card{
    grid-template-columns:30px minmax(0,1fr)!important;
    padding:2px 3px!important;
    column-gap:2px!important;
  }
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon,
  body.battle-mode .opponent-section .side-team .battle-team-preview,
  body.battle-mode .opponent-section .side-team .battle-team-fallback,
  body.battle-mode .opponent-section .side-team .battle-team-icon,
  body.battle-mode .side-team .axie-image-wrap{
    width:29px!important;height:29px!important;min-width:29px!important;
  }
  body.battle-mode .side-team .axie-name,
  body.battle-mode .opponent-section .side-team .axie-name{font-size:6.8px!important}
  body.battle-mode .side-team .life-pip{width:5px!important;height:5px!important}
  body.battle-mode .side-team .life-count{font-size:4.8px!important}
  body.battle-mode .battle-center .arena{
    padding:7px 3.5% 22px!important;
    border-radius:10px!important;
  }
  body.battle-mode .fighter-token{
    width:clamp(72px,15vw,108px)!important;
    height:clamp(72px,15vw,108px)!important;
  }
  body.battle-mode .fighter-name{font-size:8.5px!important}
  body.battle-mode .cards-panel{padding:3px!important}
  body.battle-mode .card-btn{height:54px!important;min-height:54px!important;padding:2px!important}
  body.battle-mode .card-body-r15r4 .card-real-figure{height:31px!important;min-height:31px!important}
  body.battle-mode .fight-btn{height:35px!important;min-height:35px!important}
}

@media (orientation:landscape) and (max-width:720px) and (max-height:600px){
  body.battle-mode .battle-landscape{
    grid-template-columns:94px minmax(278px,1fr) 178px!important;
  }
}

/* R6R2 · Wallet cards consume the same validated mobile footprint as the Demo roster.
   Only card internals differ because real NFTs also show LV/AXP. */
@media (orientation:portrait) and (max-width:599px){
  #lobby .picker-layout.demo-dashboard-layout .real-axie-pick{
    min-height:124px!important;
    grid-template-rows:58px auto auto auto!important;
    gap:2px!important;
    padding:5px 4px!important;
    border-radius:9px!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .real-pick-image,
  #lobby .picker-layout.demo-dashboard-layout .real-pick-image .axie-preview-slot{
    height:58px!important;min-height:58px!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .real-axie-pick strong{font-size:8px!important;line-height:1!important;margin-top:1px!important}
  #lobby .picker-layout.demo-dashboard-layout .real-axie-pick small{font-size:5.5px!important;line-height:1!important}
  #lobby .picker-layout.demo-dashboard-layout .real-axie-pick .axp-target{display:none!important}
}
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  #lobby .picker-layout.demo-dashboard-layout .real-axie-pick{
    min-height:108px!important;
    grid-template-rows:50px auto auto auto!important;
    gap:1px!important;
    padding:4px!important;
    border-radius:8px!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .real-pick-image,
  #lobby .picker-layout.demo-dashboard-layout .real-pick-image .axie-preview-slot{
    height:50px!important;min-height:50px!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .real-axie-pick strong{font-size:7.5px!important;line-height:1!important;margin-top:1px!important}
  #lobby .picker-layout.demo-dashboard-layout .real-axie-pick small{font-size:5.2px!important;line-height:1!important}
  #lobby .picker-layout.demo-dashboard-layout .real-axie-pick .axp-target{display:none!important}
}

/* R36 rail internals: selected Axies must also remain inside the narrow inline rail. */
@media (orientation:portrait) and (max-width:599px){
  #lobby .demo-team-sidebar.wallet-team-sidebar .team-slot.picked{
    grid-template-columns:minmax(0,1fr) 22px!important;
    gap:2px!important;
    min-height:50px!important;
    padding:3px 2px 3px 18px!important;
  }
  #lobby .demo-team-sidebar.wallet-team-sidebar .picked-real{
    grid-template-columns:29px minmax(0,1fr)!important;
    gap:2px!important;
  }
  #lobby .demo-team-sidebar .picked-real-copy b{font-size:5.8px!important;line-height:1!important}
  #lobby .demo-team-sidebar .picked-real-copy small{font-size:4.5px!important;line-height:1!important}
  #lobby .demo-team-sidebar .sidebar-vanguard{display:none!important}
  #lobby .demo-team-sidebar.wallet-team-sidebar .pick-actions{
    display:grid!important;
    grid-template-columns:20px!important;
    grid-template-rows:15px 15px 17px!important;
    gap:1px!important;
    width:20px!important;
  }
  #lobby .demo-team-sidebar.wallet-team-sidebar .pick-actions button,
  #lobby .demo-team-sidebar.wallet-team-sidebar .remove-pick{
    grid-column:1!important;
    width:20px!important;height:15px!important;min-width:20px!important;
    padding:0!important;border-radius:4px!important;font-size:6px!important;
  }
  #lobby .demo-team-sidebar.wallet-team-sidebar .remove-pick{height:17px!important}
}
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  #lobby .demo-team-sidebar.wallet-team-sidebar .team-slot.picked{
    grid-template-columns:minmax(0,1fr) 38px!important;
    gap:3px!important;
    min-height:46px!important;
    padding:3px 3px 3px 18px!important;
  }
  #lobby .demo-team-sidebar.wallet-team-sidebar .picked-real{
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:3px!important;
  }
  #lobby .demo-team-sidebar .picked-real-copy b{font-size:5.8px!important;line-height:1!important}
  #lobby .demo-team-sidebar .picked-real-copy small{font-size:4.5px!important;line-height:1!important}
  #lobby .demo-team-sidebar .sidebar-vanguard{font-size:4.5px!important;padding:1px 2px!important;margin-top:1px!important}
  #lobby .demo-team-sidebar.wallet-team-sidebar .pick-actions{
    display:grid!important;
    grid-template-columns:18px 18px!important;
    grid-template-rows:16px 17px!important;
    gap:2px!important;
    width:38px!important;
  }
  #lobby .demo-team-sidebar.wallet-team-sidebar .pick-actions button{
    width:18px!important;height:16px!important;min-width:18px!important;padding:0!important;border-radius:4px!important;font-size:6px!important;
  }
  #lobby .demo-team-sidebar.wallet-team-sidebar .remove-pick{
    grid-column:1 / -1!important;width:38px!important;height:17px!important;padding:0!important;font-size:6px!important;
  }
}


/* =====================================================================
   A016R37 · MOBILE LOBBY TRUE ORDER + NINE STARTERS COMPACTION
   Screenshot correction: roster must stay LEFT, selection/hub rail RIGHT.
   Portrait = 2 Axies per row + right selection rail.
   Landscape = 3 Axies per row + right selection rail.
   R36 BATTLE PRESERVED · Battle layout is intentionally untouched from R36.
   ===================================================================== */
@media (orientation:portrait) and (max-width:599px){
  #lobby{padding:9px!important}
  #lobby .lobby-topline{
    display:grid!important;
    grid-template-columns:minmax(0,.86fr) minmax(168px,1.14fr)!important;
    gap:6px!important;
    align-items:start!important;
  }
  #lobby .lobby-topline h2{font-size:20px!important;line-height:1.02!important;margin:2px 0 0!important}
  #lobby .lobby-topline .eyebrow{font-size:8px!important;margin:0!important}
  #lobby .lobby-head-right{width:auto!important;gap:3px!important;align-items:stretch!important;justify-content:stretch!important}
  #lobby .lobby-quick-actions{width:100%!important;grid-template-columns:1fr 1.18fr!important;gap:3px!important}
  #lobby .lobby-quick-btn{min-height:29px!important;padding:2px 4px!important;font-size:6.5px!important;border-radius:7px!important}
  #lobby #lobbyStatus{min-height:24px!important;padding:3px 6px!important;font-size:7px!important;line-height:1.1!important}
  #lobby #lobbyHint{font-size:8.5px!important;line-height:1.25!important;margin:5px 0 7px!important}

  #lobby .picker-layout.demo-dashboard-layout{
    grid-template-columns:minmax(0,1fr) clamp(112px,31vw,128px)!important;
    gap:6px!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .picker-main{
    order:0!important;
    min-width:0!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .player-hub-rail{
    order:1!important;
    position:sticky!important;
    top:max(5px,env(safe-area-inset-top))!important;
    min-width:0!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .demo-real-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }
}

@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  #lobby{padding:7px 8px!important}
  #lobby .lobby-topline{
    display:grid!important;
    grid-template-columns:minmax(180px,.72fr) minmax(280px,1.28fr)!important;
    gap:6px!important;
    align-items:center!important;
  }
  #lobby .lobby-topline h2{font-size:17px!important;line-height:1!important;margin:1px 0 0!important}
  #lobby .lobby-topline .eyebrow{font-size:6.8px!important;margin:0!important}
  #lobby .lobby-head-right{width:auto!important;display:grid!important;grid-template-columns:1fr auto!important;gap:4px!important;align-items:center!important}
  #lobby .lobby-quick-actions{display:grid!important;grid-template-columns:1fr 1.22fr!important;gap:3px!important}
  #lobby .lobby-quick-btn{min-height:25px!important;padding:2px 5px!important;font-size:5.8px!important;border-radius:6px!important}
  #lobby #lobbyStatus{min-height:25px!important;padding:3px 7px!important;font-size:6.2px!important;white-space:nowrap!important}
  #lobby #lobbyHint{font-size:7px!important;line-height:1.15!important;margin:3px 0 5px!important}

  #lobby .picker-layout.demo-dashboard-layout{
    grid-template-columns:minmax(0,1fr) clamp(150px,22vw,190px)!important;
    gap:6px!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .picker-main{
    order:0!important;
    min-width:0!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .player-hub-rail{
    order:1!important;
    position:sticky!important;
    top:max(4px,env(safe-area-inset-top))!important;
    min-width:0!important;
  }
  #lobby .picker-layout.demo-dashboard-layout .demo-real-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
}

/* =====================================================================
   A016R38 · AXIE CORE AXP · OFFICIAL READ + LEVEL + ASCENSION PROGRESS
   Pure progression UI. Combat engine / AI / spell resolution untouched.
   ===================================================================== */
.real-axie-pick{grid-template-rows:1fr auto auto auto}
.axp-mini{
  display:grid;gap:3px;width:100%;min-width:0;margin-top:2px;padding:5px 6px 4px;
  border:1px solid rgba(116,184,255,.24);border-radius:8px;background:rgba(8,20,35,.72);
  color:#ddecff;text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.axp-mini-line{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;line-height:1}
.axp-mini-line b{font-size:8.5px;letter-spacing:.05em;color:#8ed0ff;white-space:nowrap}
.axp-mini-line em{font-style:normal;font-size:7.5px;font-weight:850;color:#e8f5ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.axp-track{display:block;height:3px;border-radius:999px;overflow:hidden;background:#26354a}
.axp-track i{display:block;height:100%;min-width:0;border-radius:inherit;background:linear-gradient(90deg,#5daeff,#a47dff)}
.axp-target{font-size:6.4px;font-weight:850;letter-spacing:.07em;color:#7f91a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.axp-mini.compact{margin-top:2px;padding:3px 4px;gap:2px;border-radius:6px}
.axp-mini.compact .axp-mini-line b{font-size:6.8px}
.axp-mini.compact .axp-mini-line em{font-size:6.2px}
.axp-mini.compact .axp-track{height:2px}
.axp-mini.unavailable{opacity:.64;border-style:dashed}
.picked-real-copy .axp-mini{max-width:112px}

.axp-end-panel{
  width:min(620px,100%);margin:14px auto 4px;padding:12px;border:1px solid rgba(100,177,255,.28);
  border-radius:14px;background:linear-gradient(180deg,rgba(17,34,56,.94),rgba(9,20,35,.94));text-align:left;
}
.axp-end-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.axp-end-head span{font-size:9px;font-weight:900;letter-spacing:.13em;color:#7f92ac}
.axp-end-head strong{font-size:11px;letter-spacing:.06em;color:#a8d8ff}
.axp-end-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.axp-end-axie{display:grid;gap:2px;min-width:0;padding:7px 8px;border-radius:9px;background:rgba(255,255,255,.045)}
.axp-end-axie b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.axp-end-axie em{font-size:8px;font-style:normal;color:#93a7c0;white-space:nowrap}
.axp-end-status{margin:8px 1px 0;font-size:9px;line-height:1.35;color:#92a7bf}

@media (orientation:portrait) and (max-width:599px){
  #lobby .real-axie-pick .axp-mini{padding:3px 4px;gap:2px;margin-top:1px}
  #lobby .real-axie-pick .axp-mini-line b{font-size:6.8px}
  #lobby .real-axie-pick .axp-mini-line em{font-size:6.2px}
  #lobby .real-axie-pick .axp-target{font-size:5.4px}
  #lobby .real-axie-pick .axp-track{height:2px}
  .axp-end-panel{padding:9px;margin-top:9px}
  .axp-end-team{gap:4px}
  .axp-end-axie{padding:5px}
}
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  #lobby .real-axie-pick .axp-mini{padding:2px 4px;gap:1px;margin-top:0}
  #lobby .real-axie-pick .axp-mini-line b{font-size:6.2px}
  #lobby .real-axie-pick .axp-mini-line em{font-size:5.8px}
  #lobby .real-axie-pick .axp-target{display:none}
  #lobby .real-axie-pick .axp-track{height:2px}
  .axp-end-panel{padding:7px 9px;margin:7px auto 2px}
  .axp-end-head{margin-bottom:5px}
  .axp-end-axie{padding:4px 6px}
  .axp-end-status{margin-top:5px}
}

@media(max-width:560px){
  #lobby .guide-real-cards{grid-template-columns:1fr}
}

/* ================================================================
   A016R40 · DUEL COMPETITION / RANKING / AXP POLICY UI
   Scope-only. Combat geometry, R35/R36 mobile battle and engine remain untouched.
   ================================================================ */
.duel-rank-card{display:grid;gap:4px;margin:6px 0 7px;padding:7px 8px;border:1px solid rgba(238,190,80,.24);border-radius:9px;background:linear-gradient(180deg,rgba(238,190,80,.075),rgba(255,255,255,.025));min-width:0}
.duel-rank-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:5px;min-width:0;line-height:1}
.duel-rank-line span{font-size:7px;letter-spacing:.11em;color:#8c9aab;font-weight:950}
.duel-rank-line strong{font-size:9px;letter-spacing:.045em;color:#f4cf75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duel-rank-line em{font-size:7px;font-style:normal;color:#f6f0df;font-weight:900;white-space:nowrap}
.duel-rank-track,.ranking-side-track{display:block;height:3px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.duel-rank-track i,.ranking-side-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#bf842a,#ffe18d)}
.duel-rank-card small{font-size:6.5px;line-height:1.2;color:#8494a8;white-space:normal}

.ranking-main{display:grid;gap:14px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(10,15,24,.72)}
.ranking-main-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ranking-main-head h3{margin:2px 0 4px;font-size:28px;letter-spacing:.04em}
.ranking-main-head p{margin:0;max-width:780px;color:var(--muted);font-size:14px;line-height:1.45}
.ranking-kicker{font-size:10px;letter-spacing:.16em;color:var(--gold);font-weight:950}
.ranking-badge{flex:0 0 auto;padding:7px 10px;border-radius:999px;border:1px solid rgba(238,190,80,.28);font-size:10px;font-weight:950;color:#f5cd6c;background:rgba(238,190,80,.07)}
.ranking-current-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.ranking-current-card>div{display:grid;gap:5px;padding:11px 12px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055)}
.ranking-current-card span{font-size:9px;color:#8292a7;font-weight:900;letter-spacing:.08em}
.ranking-current-card strong{font-size:18px;color:#f6f0e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.ranking-tier-card{display:grid;gap:9px;padding:12px;border:1px solid rgba(255,255,255,.075);border-radius:11px;background:rgba(255,255,255,.025);min-width:0}
.ranking-tier-card.active{border-color:rgba(244,194,73,.55);box-shadow:inset 0 0 0 1px rgba(244,194,73,.08);background:rgba(244,194,73,.055)}
.ranking-tier-card header{display:grid;gap:2px}
.ranking-tier-card header span{font-size:9px;color:#7f91a8;letter-spacing:.08em}
.ranking-tier-card header strong{font-size:16px;letter-spacing:.035em;color:#f3d27c}
.ranking-tier-rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.ranking-tier-rewards span{display:flex;align-items:center;justify-content:center;gap:3px;padding:6px 4px;border-radius:6px;background:rgba(255,255,255,.035);font-size:9px;color:#8192a5}
.ranking-tier-rewards b{font-size:11px;color:#f0f4fa}
.ranking-tier-axp{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:10px;color:#98cfff}
.ranking-tier-axp small{font-size:8px;color:#74879d;font-weight:900;letter-spacing:.06em}
.ranking-matchmaking-note{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;background:rgba(77,147,215,.06);border:1px solid rgba(98,166,230,.14)}
.ranking-matchmaking-note strong{font-size:10px;color:#9bcfff;letter-spacing:.07em}
.ranking-matchmaking-note span{font-size:12px;font-weight:950;color:#eef7ff;white-space:nowrap}
.ranking-matchmaking-note small{font-size:9px;color:#8298ae;line-height:1.35}
.ranking-policy-loading{grid-column:1/-1;padding:18px;text-align:center;color:#7f91a8;font-size:13px}

.ranking-sidebar{display:grid;align-content:start;gap:7px}
.ranking-side-kicker{font-size:9px;letter-spacing:.13em;color:#8294ab;font-weight:950}
.ranking-sidebar h4{margin:0;font-size:18px;color:#f3d27c;letter-spacing:.05em}
.ranking-side-points{font-size:30px;line-height:1;color:#f8f3e8}
.ranking-sidebar p{margin:0;font-size:9px;color:#91a1b4;line-height:1.35}
.ranking-side-record{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:5px;align-items:center;padding:8px;border-radius:7px;background:rgba(255,255,255,.035)}
.ranking-side-record span{font-size:8px;color:#76889d;font-weight:950}
.ranking-side-record b{font-size:11px;color:#f2f5fa;text-align:center}
.ranking-sidebar>small{font-size:8px;line-height:1.4;color:#74869a}

.duel-end-panel{max-width:520px;margin:10px auto 0;padding:10px 12px;border:1px solid rgba(239,190,74,.21);border-radius:12px;background:rgba(239,190,74,.045);text-align:left}
.duel-end-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.duel-end-head span{font-size:8px;font-weight:950;letter-spacing:.12em;color:#8b96a6}
.duel-end-head strong{font-size:10px;color:#f3ce73;letter-spacing:.05em}
.duel-end-score{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.duel-end-score b{font-size:17px;color:#fff8e8}.duel-end-score em{font-size:7px;font-style:normal;color:#8fa0b4;font-weight:900}
.duel-end-panel p{margin:5px 0 0;font-size:7.5px;line-height:1.3;color:#8294a9}

@media (max-width:760px){
  .ranking-main{padding:9px;gap:8px;border-radius:12px}
  .ranking-main-head{gap:8px}.ranking-main-head h3{font-size:20px}.ranking-main-head p{font-size:11px}.ranking-badge{font-size:8px;padding:5px 7px}
  .ranking-current-card{gap:4px}.ranking-current-card>div{padding:8px}.ranking-current-card strong{font-size:13px}.ranking-current-card span{font-size:8px}
  .ranking-tier-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.ranking-tier-card{padding:8px;gap:6px}.ranking-tier-card header strong{font-size:12px}
  .ranking-matchmaking-note{grid-template-columns:1fr auto;gap:5px;padding:8px}.ranking-matchmaking-note small{grid-column:1/-1}
  .duel-end-panel{padding:7px 9px;margin-top:7px}
}
@media (orientation:landscape) and (max-height:480px){
  #lobby .duel-rank-card{margin:3px 0 4px;padding:4px 5px;gap:2px;border-radius:6px}
  #lobby .duel-rank-line span{font-size:5.5px}#lobby .duel-rank-line strong{font-size:7px}#lobby .duel-rank-line em{font-size:5.8px}
  #lobby .duel-rank-track{height:2px}#lobby .duel-rank-card small{font-size:5.2px;line-height:1.05}
  .ranking-main{padding:6px;gap:5px}.ranking-main-head p{display:none}.ranking-main-head h3{font-size:13px}
  .ranking-current-card>div{padding:4px 5px}.ranking-tier-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.ranking-tier-card{padding:4px;gap:3px}
  .ranking-matchmaking-note{padding:4px 5px}.ranking-matchmaking-note small{font-size:5.8px}
}


/* A016R40R4 · Wallet mobile Reown + colección vacía
   Una sola acción de conexión. 0 Axies es un estado válido del dashboard. */
.wallet-market-empty{
  grid-column:1/-1;
  min-height:clamp(260px,46vh,470px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:28px 20px;
  border:1px solid rgba(112,151,198,.30);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(20,31,50,.82),rgba(10,17,29,.88));
  text-align:center;
}
.wallet-market-icon{font-size:34px;line-height:1;color:#55b9ff;text-shadow:0 0 24px rgba(55,158,255,.35)}
.wallet-market-empty>small{font-size:11px;font-weight:800;letter-spacing:.14em;color:#7ed0ff}
.wallet-market-empty>strong{font-size:clamp(22px,4vw,36px);letter-spacing:.02em;color:#f7f3e9}
.wallet-market-empty>p{max-width:560px;margin:0;color:#aab6c9;font-size:14px;line-height:1.45}
.wallet-market-btn{display:inline-flex;align-items:center;justify-content:center;min-width:min(320px,100%);margin-top:6px;text-decoration:none}
.wallet-market-note{font-size:11px;color:#7e8ca2}
@media (max-width:760px){
  .wallet-market-empty{min-height:42dvh;padding:20px 14px;border-radius:14px;gap:8px}
  .wallet-market-empty>p{font-size:12px}
  .wallet-market-btn{min-width:min(280px,100%);min-height:44px}
}
@media (orientation:landscape) and (max-height:480px){
  .wallet-market-empty{min-height:210px;padding:12px;gap:5px}
  .wallet-market-icon{font-size:22px}.wallet-market-empty>strong{font-size:18px}.wallet-market-empty>p{font-size:10px;line-height:1.25}
  .wallet-market-btn{min-height:34px;font-size:11px;margin-top:2px}.wallet-market-note{font-size:8px}
}

/* =====================================================================
   A016R40R7R2 · WALLET RESPONSIVE ISOLATION + SAFE AXIE FRAMING
   R6R2 reused Demo classes for Wallet to obtain the validated MOBILE
   footprint. Desktop must NOT inherit the Demo 3-column / 340px rail.
   Combat, Demo geometry, Mixer/Spine and JS remain untouched.
   ===================================================================== */

/* Real NFT preview contract: the rendered Mixer image must always remain
   completely inside its preview slot. No stretching, no CSS crop. */
#lobby .real-axie-grid.demo-real-grid .real-pick-image,
#lobby .real-axie-grid.demo-real-grid .real-pick-image .axie-preview-slot{
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
#lobby .real-axie-grid.demo-real-grid .real-pick-image .axie-preview-slot img{
  width:auto!important;
  height:auto!important;
  max-width:94%!important;
  max-height:94%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  transform:none!important;
  transform-origin:50% 50%!important;
}

/* Desktop / laptop: restore the Wallet geometry that existed before R6R2.
   The Demo dashboard is not affected because it does not have real-axie-grid. */
@media (min-width:1251px){
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout{
    grid-template-columns:minmax(0,1fr) 304px!important;
    gap:12px!important;
  }
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout .real-axie-grid.demo-real-grid{
    grid-template-columns:repeat(4,minmax(145px,1fr))!important;
    gap:8px!important;
    margin-top:4px!important;
  }
}
@media (min-width:1500px){
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout{
    grid-template-columns:minmax(0,1fr) 318px!important;
  }
}
@media (min-width:1000px) and (max-width:1250px){
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout{
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:12px!important;
  }
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout .real-axie-grid.demo-real-grid{
    grid-template-columns:repeat(3,minmax(135px,1fr))!important;
    gap:8px!important;
    margin-top:4px!important;
  }
}
/* Narrow desktop/tablet windows above the mobile-landscape contract. */
@media (min-width:981px) and (max-width:999px) and (min-height:601px){
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout{
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:10px!important;
  }
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout .real-axie-grid.demo-real-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
}

/* Mobile keeps the validated R6R2/Demo footprint. Only the image itself gets
   a small safety inset so no part touches the clipping edge. */
@media (orientation:portrait) and (max-width:599px){
  #lobby .real-axie-grid.demo-real-grid .real-pick-image .axie-preview-slot img{
    max-width:92%!important;
    max-height:92%!important;
  }
}
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  #lobby .real-axie-grid.demo-real-grid .real-pick-image .axie-preview-slot img{
    max-width:92%!important;
    max-height:92%!important;
  }
}


/* ======================================================================
   A016R40R9 · ARENA CARD DOCK
   The shared hand is visually integrated INSIDE the Coliseum. No external
   tactical strip: the overlay floats over the lower sand and disappears
   before combat cinematics. Engine/deck math remains R40R8 unchanged.
   ====================================================================== */
body.battle-mode .arena-card-dock{
  position:absolute!important;
  z-index:14!important;
  left:4.5%!important;
  right:2.8%!important;
  bottom:8px!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) 54px 76px!important;
  align-items:end!important;
  gap:8px!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  transition:opacity .16s ease,transform .16s ease!important;
}
body.battle-mode .arena-card-dock.is-resolving{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(12px)!important;
}
body.battle-mode .arena-hand-stage{min-width:0!important;position:relative!important;transform:translateX(8px)!important}
body.battle-mode .arena-cards-head{
  min-height:15px!important;
  margin:0 0 3px!important;
  padding:0 3px!important;
  display:flex!important;
  align-items:end!important;
  justify-content:space-between!important;
  gap:8px!important;
  background:transparent!important;
}
body.battle-mode .arena-cards-head>div{min-width:0!important}
body.battle-mode .arena-cards-head .section-label{
  display:inline!important;margin:0 5px 0 0!important;
  font-size:7px!important;line-height:1!important;letter-spacing:.10em!important;
  color:#f3ca66!important;text-shadow:0 2px 8px rgba(0,0,0,.8)!important;
}
body.battle-mode .arena-cards-head strong{
  font-size:9px!important;line-height:1!important;color:#f7f2e7!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  text-shadow:0 2px 8px rgba(0,0,0,.9)!important;
}
body.battle-mode .arena-cards-head .hint{
  max-width:46%!important;font-size:7px!important;line-height:1!important;text-align:right!important;
  color:#aebbd0!important;text-shadow:0 2px 8px #000!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
body.battle-mode .arena-card-dock .hand{
  --hand-count:3;
  display:grid!important;
  grid-template-columns:repeat(var(--hand-count),minmax(0,1fr))!important;
  gap:7px!important;
  width:min(100%,620px)!important;
  max-width:620px!important;
  margin:0 auto!important;
  align-items:end!important;
}
body.battle-mode .arena-card-item{
  position:relative!important;
  min-width:0!important;
  height:100px!important;
  transition:opacity .14s ease,filter .14s ease,transform .14s ease!important;
}
body.battle-mode .arena-card-item.owner-locked{opacity:.42!important;filter:saturate(.55) brightness(.84)!important}
body.battle-mode .arena-card-item.owner-unselected{opacity:.88!important}
body.battle-mode .arena-card-item.owner-active{opacity:1!important;filter:none!important}
body.battle-mode .arena-card-item.owner-active:hover{transform:translateY(-4px)!important;z-index:30!important}
body.battle-mode .arena-card-dock .card-btn{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;min-height:0!important;
  display:grid!important;
  grid-template-rows:22px minmax(0,1fr) 14px!important;
  grid-template-columns:1fr!important;
  gap:2px!important;
  padding:6px 7px 5px!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(31,40,57,.96),rgba(12,18,29,.97))!important;
  box-shadow:0 8px 18px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body.battle-mode .arena-card-dock .card-btn:disabled{cursor:default!important}
body.battle-mode .arena-card-dock .card-btn.attack{border-color:rgba(226,108,93,.72)!important;box-shadow:0 8px 18px rgba(0,0,0,.42),inset 0 3px 0 #e26c5d!important}
body.battle-mode .arena-card-dock .card-btn.defense{border-color:rgba(98,167,221,.72)!important;box-shadow:0 8px 18px rgba(0,0,0,.42),inset 0 3px 0 #62a7dd!important}
body.battle-mode .arena-card-dock .card-btn.spell{border-color:rgba(186,126,231,.78)!important;box-shadow:0 8px 18px rgba(0,0,0,.42),inset 0 3px 0 #b56fe0!important}
body.battle-mode .arena-card-dock .card-btn.selected{border-color:#f3cb61!important;outline:2px solid rgba(243,203,97,.26)!important;transform:translateY(-3px)!important}
body.battle-mode .arena-card-dock .card-head-r15r4{
  grid-row:1!important;display:grid!important;grid-template-columns:19px minmax(0,1fr)!important;
  gap:4px!important;align-items:center!important;min-width:0!important;height:22px!important;
}
body.battle-mode .arena-card-dock .card-role-icon{
  width:19px!important;height:19px!important;display:grid!important;place-items:center!important;
  font-size:11px!important;line-height:1!important;border-radius:6px!important;
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.10)!important;
}
body.battle-mode .arena-card-dock .card-role-label{
  min-width:0!important;font-size:9px!important;line-height:1!important;font-weight:950!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
body.battle-mode .arena-card-dock .card-body-r15r4{
  grid-row:2!important;position:relative!important;display:grid!important;place-items:center!important;
  min-width:0!important;min-height:0!important;overflow:hidden!important;
}
body.battle-mode .arena-card-dock .card-real-figure{
  width:100%!important;height:52px!important;min-height:52px!important;display:grid!important;place-items:center!important;
  overflow:hidden!important;border-radius:8px!important;background:rgba(255,255,255,.035)!important;
}
body.battle-mode .arena-card-dock .card-real-figure img{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;object-position:center!important;
}
body.battle-mode .arena-card-dock .card-power{
  position:absolute!important;right:2px!important;bottom:2px!important;
  width:29px!important;height:29px!important;display:grid!important;place-items:center!important;
  padding:2px!important;border-radius:999px!important;font-size:14px!important;line-height:1!important;font-weight:1000!important;
  color:#fff!important;background:rgba(10,15,24,.88)!important;border:1px solid rgba(255,255,255,.23)!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
body.battle-mode .arena-card-dock .spell .card-power{width:auto!important;max-width:56px!important;padding:0 6px!important;font-size:7px!important}
body.battle-mode .arena-card-dock .card-owner-tag{
  grid-row:3!important;align-self:center!important;min-width:0!important;
  font-size:7px!important;line-height:1!important;font-weight:950!important;letter-spacing:.04em!important;
  color:#dce7f6!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  text-align:center!important;text-shadow:0 1px 4px #000!important;
}
body.battle-mode .arena-card-dock .card-kind,
body.battle-mode .arena-card-dock .card-level,
body.battle-mode .arena-card-dock .card-part,
body.battle-mode .arena-card-dock .card-burn{display:none!important}
body.battle-mode .card-info-trigger{
  position:absolute!important;z-index:35!important;right:-3px!important;top:-4px!important;
  width:18px!important;height:18px!important;padding:0!important;border-radius:999px!important;
  display:grid!important;place-items:center!important;
  border:1px solid rgba(255,255,255,.28)!important;background:#101827!important;color:#dce9fb!important;
  font-size:10px!important;line-height:1!important;font-weight:1000!important;cursor:help!important;
  box-shadow:0 3px 9px rgba(0,0,0,.45)!important;
}
body.battle-mode .card-help-popover{
  position:absolute!important;z-index:60!important;
  left:50%!important;bottom:calc(100% + 9px)!important;transform:translateX(-50%) translateY(4px)!important;
  width:clamp(180px,20vw,250px)!important;max-width:72vw!important;
  display:grid!important;gap:4px!important;padding:9px 10px!important;
  border-radius:10px!important;border:1px solid #526681!important;
  background:rgba(9,14,23,.98)!important;color:#edf5ff!important;
  box-shadow:0 14px 30px rgba(0,0,0,.58)!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transition:opacity .12s ease,transform .12s ease!important;
}
body.battle-mode .card-help-popover b{font-size:10px!important;color:#f4d276!important}
body.battle-mode .card-help-popover span{font-size:10px!important;line-height:1.28!important;color:#eef5ff!important}
body.battle-mode .card-help-popover small{font-size:8px!important;color:#9fb0c8!important}
body.battle-mode .arena-card-item:hover .card-help-popover,
body.battle-mode .arena-card-item:focus-within .card-help-popover,
body.battle-mode .arena-card-item.info-open .card-help-popover{
  opacity:1!important;visibility:visible!important;transform:translateX(-50%) translateY(0)!important;
}
body.battle-mode .arena-card-counter,
body.battle-mode .arena-rival-cards{
  align-self:end!important;justify-self:center!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  min-width:0!important;color:#f4e5b2!important;text-shadow:0 2px 8px #000!important;
}
body.battle-mode .arena-card-counter{
  width:52px!important;height:52px!important;border-radius:999px!important;
  border:1px solid rgba(235,198,116,.48)!important;
  background:radial-gradient(circle at 36% 28%,rgba(255,230,165,.16),rgba(10,14,23,.88) 64%)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body.battle-mode .arena-card-counter-symbol{font-size:9px!important;line-height:1!important;opacity:.72!important}
body.battle-mode .arena-card-counter strong{font-size:17px!important;line-height:.95!important;font-variant-numeric:tabular-nums!important}
body.battle-mode .arena-card-counter small,
body.battle-mode .arena-rival-cards small{font-size:6px!important;line-height:1!important;font-weight:950!important;letter-spacing:.08em!important;margin-top:2px!important}
body.battle-mode .arena-rival-cards{width:74px!important;height:58px!important;position:relative!important;padding-top:1px!important}
body.battle-mode .opp-hand-backs{position:relative!important;width:52px!important;height:32px!important;margin-bottom:0!important}
body.battle-mode .opp-hand-backs i{
  position:absolute!important;left:50%!important;top:50%!important;
  width:19px!important;height:28px!important;border-radius:4px!important;
  border:1px solid rgba(157,190,229,.58)!important;
  background:linear-gradient(135deg,#263b5b,#101a2b 58%,#273f63)!important;
  box-shadow:0 3px 7px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.035)!important;
  transform:translate(calc(-50% + var(--back-shift)),-50%) rotate(var(--back-rot))!important;
}
body.battle-mode .arena-rival-cards strong{
  position:absolute!important;right:4px!important;top:21px!important;
  display:grid!important;place-items:center!important;width:21px!important;height:21px!important;border-radius:999px!important;
  background:#111a29!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important;
  font-size:10px!important;line-height:1!important;
}
body.battle-mode .arena-empty-hand{
  min-height:74px!important;display:grid!important;place-items:center!important;
  padding:8px!important;background:rgba(8,13,22,.72)!important;border-color:rgba(141,161,191,.38)!important;
  font-size:9px!important;line-height:1.2!important;
}
/* The overlay occupies the lower sand; message sits just above it during decision. */
body.battle-mode .arena:not(.r5-cinematic) .battle-message{bottom:126px!important}
/* Right rail no longer reserves a third row for the former external cards panel. */
@media (min-width:1000px){
  body.battle-mode .player-side{grid-template-rows:minmax(0,1fr) auto!important}
}
/* Tablet: remove the empty external-card grid row and give that height to the Coliseum. */
@media (min-width:600px) and (max-width:999px){
  body.battle-mode .battle-landscape{
    grid-template-rows:auto minmax(230px,1fr) auto!important;
    grid-template-areas:"opp own" "arena arena" "fight fight"!important;
  }
}
/* Phone portrait: same principle; cards live inside arena, so Coliseum gains the old card-row height. */
@media (orientation:portrait) and (max-width:599px){
  body.battle-mode .battle-landscape{
    grid-template-rows:auto minmax(190px,1fr) auto auto!important;
    grid-template-areas:"opp" "arena" "own" "fight"!important;
  }
  body.battle-mode .arena-card-dock{
    left:2.5%!important;right:1.5%!important;bottom:4px!important;
    grid-template-columns:30px minmax(0,1fr) 30px 39px!important;
    gap:3px!important;
  }
  body.battle-mode .arena-hand-stage{transform:translateX(2px)!important}
  body.battle-mode .arena-cards-head{min-height:9px!important;margin-bottom:2px!important;padding:0 1px!important}
  body.battle-mode .arena-cards-head .section-label{font-size:4.8px!important;margin-right:2px!important}
  body.battle-mode .arena-cards-head strong{font-size:5.8px!important}
  body.battle-mode .arena-cards-head .hint{display:none!important}
  body.battle-mode .arena-card-dock .hand{gap:2px!important;width:100%!important;max-width:none!important}
  body.battle-mode .arena-card-item{height:54px!important}
  body.battle-mode .arena-card-dock .card-btn{
    grid-template-rows:14px minmax(0,1fr) 9px!important;
    padding:3px 2px 2px!important;border-radius:7px!important;gap:1px!important;
  }
  body.battle-mode .arena-card-dock .card-head-r15r4{height:14px!important;grid-template-columns:12px minmax(0,1fr)!important;gap:2px!important}
  body.battle-mode .arena-card-dock .card-role-icon{width:12px!important;height:12px!important;font-size:7px!important;border-radius:4px!important}
  body.battle-mode .arena-card-dock .card-role-label{font-size:5.4px!important}
  body.battle-mode .arena-card-dock .card-real-figure{height:28px!important;min-height:28px!important;border-radius:5px!important}
  body.battle-mode .arena-card-dock .card-power{width:18px!important;height:18px!important;right:0!important;bottom:0!important;font-size:9px!important}
  body.battle-mode .arena-card-dock .spell .card-power{max-width:32px!important;padding:0 3px!important;font-size:4.8px!important}
  body.battle-mode .arena-card-dock .card-owner-tag{font-size:4.8px!important}
  body.battle-mode .card-info-trigger{right:-2px!important;top:-3px!important;width:13px!important;height:13px!important;font-size:7px!important}
  body.battle-mode .card-help-popover{width:190px!important;max-width:88vw!important;padding:7px 8px!important;bottom:calc(100% + 5px)!important}
  body.battle-mode .card-help-popover b,body.battle-mode .card-help-popover span{font-size:8px!important}
  body.battle-mode .card-help-popover small{font-size:6.5px!important}
  body.battle-mode .arena-card-counter{width:29px!important;height:29px!important}
  body.battle-mode .arena-card-counter-symbol{font-size:5px!important}
  body.battle-mode .arena-card-counter strong{font-size:10px!important}
  body.battle-mode .arena-card-counter small,body.battle-mode .arena-rival-cards small{font-size:3.9px!important;letter-spacing:.03em!important}
  body.battle-mode .arena-rival-cards{width:38px!important;height:32px!important}
  body.battle-mode .opp-hand-backs{width:31px!important;height:20px!important}
  body.battle-mode .opp-hand-backs i{width:11px!important;height:17px!important;border-radius:2px!important;transform:translate(calc(-50% + var(--back-shift-small)),-50%) rotate(var(--back-rot))!important}
  body.battle-mode .arena-rival-cards strong{right:0!important;top:10px!important;width:14px!important;height:14px!important;font-size:6px!important}
  body.battle-mode .arena:not(.r5-cinematic) .battle-message{bottom:70px!important}
  body.battle-mode .arena-empty-hand{min-height:47px!important;font-size:6px!important;padding:4px!important}
}
/* Low landscape: compact overlay, still inside arena and never in the side rail. */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body.battle-mode .player-side{grid-template-rows:minmax(0,1fr) auto!important}
  body.battle-mode .arena-card-dock{
    left:3%!important;right:2%!important;bottom:4px!important;
    grid-template-columns:32px minmax(0,1fr) 32px 43px!important;gap:3px!important;
  }
  body.battle-mode .arena-cards-head{min-height:8px!important;margin-bottom:1px!important}
  body.battle-mode .arena-cards-head .section-label{font-size:4.7px!important}
  body.battle-mode .arena-cards-head strong{font-size:5.7px!important}
  body.battle-mode .arena-cards-head .hint{display:none!important}
  body.battle-mode .arena-card-dock .hand{gap:2px!important;max-width:420px!important}
  body.battle-mode .arena-card-item{height:49px!important}
  body.battle-mode .arena-card-dock .card-btn{grid-template-rows:13px minmax(0,1fr) 8px!important;padding:2px!important;border-radius:6px!important}
  body.battle-mode .arena-card-dock .card-head-r15r4{height:13px!important;grid-template-columns:11px minmax(0,1fr)!important;gap:2px!important}
  body.battle-mode .arena-card-dock .card-role-icon{width:11px!important;height:11px!important;font-size:6px!important;border-radius:3px!important}
  body.battle-mode .arena-card-dock .card-role-label{font-size:5px!important}
  body.battle-mode .arena-card-dock .card-real-figure{height:25px!important;min-height:25px!important;border-radius:4px!important}
  body.battle-mode .arena-card-dock .card-power{width:17px!important;height:17px!important;font-size:8px!important}
  body.battle-mode .arena-card-dock .spell .card-power{max-width:29px!important;font-size:4.5px!important;padding:0 2px!important}
  body.battle-mode .arena-card-dock .card-owner-tag{font-size:4.5px!important}
  body.battle-mode .card-info-trigger{width:12px!important;height:12px!important;font-size:6px!important;right:-2px!important;top:-3px!important}
  body.battle-mode .arena-card-counter{width:30px!important;height:30px!important}
  body.battle-mode .arena-card-counter strong{font-size:10px!important}
  body.battle-mode .arena-card-counter small,body.battle-mode .arena-rival-cards small{font-size:3.8px!important}
  body.battle-mode .arena-rival-cards{width:42px!important;height:31px!important}
  body.battle-mode .opp-hand-backs{width:31px!important;height:19px!important}
  body.battle-mode .opp-hand-backs i{width:11px!important;height:16px!important;border-radius:2px!important;transform:translate(calc(-50% + var(--back-shift-small)),-50%) rotate(var(--back-rot))!important}
  body.battle-mode .arena-rival-cards strong{right:0!important;top:9px!important;width:14px!important;height:14px!important;font-size:6px!important}
  body.battle-mode .arena:not(.r5-cinematic) .battle-message{bottom:64px!important}
}

/* ==========================================================
   A016R40R11 · DASHBOARD LABS · CSS REPAIR + VISUAL PASS
   Scope: lobby HECHIZOS + CARTAS only. Battle selectors are forbidden.
   Replaces malformed R40R10 literal-\\n tail with valid CSS.
   ========================================================== */
#lobby .player-learn-tabs{grid-template-columns:repeat(4,minmax(0,1fr));}
#lobby .spells-main,#lobby .cards-main{min-height:560px;}

/* HECHIZOS */
#lobby .spell-principle{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin:0 0 18px;padding:13px 16px;border:1px solid #3b4f6c;border-radius:12px;
  background:linear-gradient(180deg,#16253b,#101a2b);color:#dce7f5;font-size:12px;letter-spacing:.035em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)
}
#lobby .spell-principle strong{color:#ffd35f;font-size:13px;letter-spacing:.075em}
#lobby .spell-principle b{color:#7086a4}
#lobby .spell-principle span{color:#9db0c8}
#lobby .spell-catalog-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:0 0 12px}
#lobby .spell-catalog-head div span{display:block;color:#7d93b0;font-size:9px;font-weight:900;letter-spacing:.12em}
#lobby .spell-catalog-head div strong{display:block;margin-top:4px;color:#f2f6fb;font-size:15px}
#lobby .spell-catalog-head small{max-width:520px;color:#8fa2bc;font-size:10px;line-height:1.45;text-align:right}
#lobby .spell-catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
#lobby .spell-catalog-item{
  position:relative;min-width:0;display:grid;grid-template-columns:32px 34px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:9px;row-gap:2px;align-items:center;min-height:94px;padding:12px 12px 11px;
  border:1px solid #324761;border-radius:12px;background:linear-gradient(155deg,#16263d 0%,#101b2c 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 6px 16px rgba(0,0,0,.10);
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;outline:none
}
#lobby .spell-catalog-item:hover,#lobby .spell-catalog-item:focus-visible{
  transform:translateY(-2px);border-color:#5a7395;box-shadow:0 12px 24px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)
}
#lobby .spell-index{
  grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border:1px solid #415877;border-radius:8px;
  color:#e8bc51;background:#0c1726;font-size:9px;font-weight:950;letter-spacing:.04em
}
#lobby .spell-icon{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;font-size:22px;filter:drop-shadow(0 3px 7px rgba(0,0,0,.35))}
#lobby .spell-copy{min-width:0;align-self:end}
#lobby .spell-copy strong{display:block;overflow:hidden;color:#edf4fc;font-size:12px;line-height:1.12;letter-spacing:.025em;white-space:nowrap;text-overflow:ellipsis}
#lobby .spell-copy small{display:-webkit-box;overflow:hidden;margin-top:5px;color:#9aadc5;font-size:9px;line-height:1.28;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#lobby .spell-catalog-item em{
  position:absolute;top:8px;right:8px;padding:3px 6px;border:1px solid #395372;border-radius:999px;
  color:#8fa6c1;background:#0b1523;font-size:7px;font-style:normal;font-weight:950;letter-spacing:.085em
}
#lobby .spell-catalog-item.motor{border-color:#416685;background:linear-gradient(155deg,#162c43,#101b2c 72%)}
#lobby .spell-catalog-item.motor em{border-color:#2f7259;color:#75d9a4;background:#0d2c23}
#lobby .spell-catalog-item.design em{color:#d8b65f;border-color:#6d5a2e;background:#2a2210}
#lobby .spell-catalog-item.pending{border-style:dashed;opacity:.64;background:#0e1725}
#lobby .spell-catalog-item.pending .spell-icon{color:#6f829d;filter:none}
#lobby .spell-catalog-item.pending strong{color:#93a5ba}
#lobby .spell-catalog-item.pending em{color:#8495ab;border-color:#405069;background:#111a28}

/* CARTAS */
#lobby .card-lab-rulebar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 14px}
#lobby .card-lab-rulebar span{
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 9px;
  border:1px solid #344b67;border-radius:10px;background:#111e30;color:#a5b7ce;font-size:9px;font-weight:850;text-align:center
}
#lobby .card-lab-rulebar b{color:#f3c75e;font-size:12px}
#lobby .card-lab-layout{display:grid;grid-template-columns:minmax(0,1fr) 224px;gap:14px;align-items:stretch}
#lobby .card-lab-stage{min-width:0;border:1px solid #344b69;border-radius:14px;background:linear-gradient(180deg,#101d2f,#0b1422);padding:14px;overflow:visible}
#lobby .card-lab-stage-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #2d425d}
#lobby .card-lab-stage-head div span{display:block;color:#7f96b4;font-size:8px;font-weight:900;letter-spacing:.12em}
#lobby .card-lab-stage-head div strong{display:block;margin-top:3px;color:#eef4fb;font-size:13px}
#lobby .card-lab-stage-head small{max-width:440px;color:#8499b4;font-size:9px;line-height:1.4;text-align:right}
#lobby .card-lab-preview-row{display:grid;grid-template-columns:repeat(6,minmax(108px,1fr));gap:10px;align-items:end;min-height:332px;padding:18px 2px 10px}
#lobby .card-lab-loading{grid-column:1/-1;display:grid;place-items:center;min-height:260px;color:#8497b1;font-size:11px}
#lobby .card-lab-preview{
  --lab-accent:#7ea7ce;position:relative;isolation:isolate;min-width:0;width:100%;aspect-ratio:.64;overflow:visible;
  border:1px solid color-mix(in srgb,var(--lab-accent) 58%,#314661);border-radius:13px;background:#122138;
  box-shadow:0 16px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);
  transform:translateY(0);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;outline:none
}
#lobby .card-lab-preview:hover,#lobby .card-lab-preview:focus-visible{z-index:20;transform:translateY(-8px) scale(1.015);border-color:var(--lab-accent);box-shadow:0 24px 40px rgba(0,0,0,.44),0 0 0 2px color-mix(in srgb,var(--lab-accent) 22%,transparent)}
#lobby .card-lab-preview.attack{--lab-accent:#f07158}
#lobby .card-lab-preview.defense{--lab-accent:#55b7ee}
#lobby .card-lab-preview.spell{--lab-accent:#b78aef}
#lobby .card-lab-art{
  position:absolute;inset:0 0 20% 0;display:grid;place-items:center;overflow:hidden;border-radius:12px 12px 0 0;
  background:radial-gradient(circle at 50% 39%,color-mix(in srgb,var(--lab-accent) 31%,transparent),transparent 48%),linear-gradient(155deg,#253b59,#0d1726 76%)
}
#lobby .card-lab-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 24%,transparent 75%,rgba(5,10,18,.38));pointer-events:none}
#lobby .card-lab-art img{position:relative;z-index:1;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.38));transform:scale(1.08)}
#lobby .card-lab-art-fallback{position:relative;z-index:1;display:grid;place-items:center;width:70px;height:70px;border:1px dashed color-mix(in srgb,var(--lab-accent) 70%,#566b86);border-radius:50%;color:#d8e4f1;font-size:28px;background:rgba(8,15,26,.32)}
#lobby .card-lab-hover{
  position:absolute;z-index:30;left:50%;bottom:calc(100% + 10px);display:grid;gap:5px;width:220px;padding:10px 11px;
  border:1px solid #536b8b;border-radius:10px;background:#081321;color:#dce7f4;font-size:9px;line-height:1.36;
  opacity:0;visibility:hidden;transform:translate(-50%,7px);pointer-events:none;transition:.15s ease;box-shadow:0 14px 32px rgba(0,0,0,.5)
}
#lobby .card-lab-hover b{color:#fff;font-size:10px}
#lobby .card-lab-hover span{color:#b3c2d5}
#lobby .card-lab-hover small{color:#7188a5;font-size:8px}
#lobby .card-lab-preview:hover .card-lab-hover,#lobby .card-lab-preview:focus-visible .card-lab-hover{opacity:1;visibility:visible;transform:translate(-50%,0)}
#lobby .card-lab-spec{border:1px solid #3b506c;border-radius:14px;background:linear-gradient(180deg,#142238,#0d1725);padding:14px}
#lobby .card-lab-spec h4{margin:0 0 12px;color:#f4f6fa;font-size:13px}
#lobby .card-lab-spec>div{display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;padding:10px 0;border-top:1px solid #2b3e57}
#lobby .card-lab-spec>div b{color:#f1c557;font-size:12px}
#lobby .card-lab-spec>div span{color:#98abc3;font-size:9px;line-height:1.35}
#lobby .card-lab-spec p{margin:13px 0 0;color:#8195ae;font-size:9px;line-height:1.5}
#lobby .content-lab-sidebar .lab-side-stat{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid #30445e}
#lobby .content-lab-sidebar .lab-side-stat b{color:#f2c45a;font-size:18px}
#lobby .content-lab-sidebar .lab-side-stat span{color:#94a8c0;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-align:right}
#lobby .content-lab-sidebar .lab-side-stat.muted b{color:#8395ab}

@media (max-width:1280px){
  #lobby .spell-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #lobby .card-lab-preview-row{grid-template-columns:repeat(3,minmax(128px,1fr));min-height:auto}
}
@media (max-width:980px){
  #lobby .spell-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #lobby .card-lab-layout{grid-template-columns:1fr}
  #lobby .card-lab-spec{display:none}
  #lobby .card-lab-stage-head{align-items:start}
}
@media (max-width:720px){
  #lobby .player-learn-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #lobby .spell-catalog-grid{grid-template-columns:1fr}
  #lobby .spell-catalog-item{min-height:84px}
  #lobby .card-lab-rulebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  #lobby .card-lab-stage-head{display:block}
  #lobby .card-lab-stage-head small{display:block;margin-top:7px;text-align:left}
  #lobby .card-lab-preview-row{grid-template-columns:repeat(2,minmax(118px,1fr));gap:10px;padding-top:10px}
  #lobby .card-lab-preview{max-width:180px;justify-self:center}
  #lobby .card-lab-hover{display:none}
}


/* ==========================================================
   A016R40R12 · CARD ART LAB · ILLUSTRATED CANONICAL PASS
   Scope: Dashboard > CARTAS only. Arena/engine untouched.
   ========================================================== */
#lobby .card-lab-preview-row{gap:9px;min-height:354px;padding:18px 0 10px}
#lobby .card-lab-preview{
  aspect-ratio:.60;border-width:1px;background:#0d1727;
  box-shadow:0 16px 28px rgba(0,0,0,.32),0 0 0 1px color-mix(in srgb,var(--lab-accent) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.04)
}
#lobby .card-lab-preview.attack{--lab-accent:#ff564d}
#lobby .card-lab-preview.defense{--lab-accent:#31b8ff}
#lobby .card-lab-preview.spell{--lab-accent:#c45cff}
#lobby .card-lab-preview:hover,#lobby .card-lab-preview:focus-visible{
  transform:translateY(-9px) scale(1.018);border-color:var(--lab-accent);
  box-shadow:0 25px 42px rgba(0,0,0,.48),0 0 0 2px color-mix(in srgb,var(--lab-accent) 36%,transparent),0 0 22px color-mix(in srgb,var(--lab-accent) 24%,transparent)
}
#lobby .card-lab-art{inset:0 0 20% 0;background:#0b1523}
#lobby .card-lab-art.is-illustrated{display:block}
#lobby .card-lab-art.is-illustrated:after{
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 22%,transparent 72%,rgba(4,9,16,.22));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)
}
#lobby .card-lab-art .card-lab-illustration{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center;
  transform:none;filter:saturate(1.04) contrast(1.02);transition:transform .22s ease,filter .22s ease
}
#lobby .card-lab-preview:hover .card-lab-illustration,#lobby .card-lab-preview:focus-visible .card-lab-illustration{transform:scale(1.035);filter:saturate(1.08) contrast(1.035)}
#lobby .card-lab-stage-head small::before{content:'ARTE ILUSTRADO · ';color:#d8ad4c;font-weight:900;letter-spacing:.05em}
html[data-axie-lang="en"] #lobby .card-lab-stage-head small::before{content:'ILLUSTRATED ART · '}
@media (max-width:1280px){#lobby .card-lab-preview-row{min-height:auto}}
@media (max-width:720px){
  #lobby .card-lab-preview{max-width:190px}
}


/* ======================================================================
   A016R40R13 · ARENA CANONICAL CARD RENDERER
   Scope: CURRENT battle screen only. Reuses the approved Dashboard card
   language: vertical · 80% art · 20% info · number top-left · hover/press.
   Engine/deck math remains R40R8 frozen. No new battle screen is created.
   ====================================================================== */
body.battle-mode .arena-card-dock{
  left:10px!important;right:10px!important;bottom:8px!important;
  grid-template-columns:98px 62px 54px minmax(0,1fr) 54px!important;
  gap:7px!important;align-items:end!important;
}
body.battle-mode .arena-hand-stage{transform:none!important;min-width:0!important}
body.battle-mode .arena-cards-head{
  min-height:18px!important;margin:0 0 5px!important;padding:0!important;
  display:flex!important;justify-content:center!important;align-items:center!important;
}
body.battle-mode .arena-cards-head>div{display:flex!important;justify-content:center!important;align-items:center!important}
body.battle-mode .arena-cards-head .section-label{
  display:block!important;margin:0!important;color:#f4cf70!important;font-size:8px!important;
  font-weight:1000!important;letter-spacing:.12em!important;text-align:center!important;
}
body.battle-mode .arena-cards-head strong,
body.battle-mode .arena-cards-head .hint{display:none!important}
body.battle-mode .arena-card-dock .hand{
  display:grid!important;grid-template-columns:repeat(var(--hand-count),minmax(0,112px))!important;
  justify-content:center!important;align-items:end!important;gap:6px!important;
  width:100%!important;max-width:620px!important;margin:0 auto!important;
}
body.battle-mode .arena-card-item{
  --arena-card-accent:#7ea7ce;position:relative!important;isolation:isolate!important;
  width:100%!important;min-width:0!important;height:auto!important;aspect-ratio:.64!important;
  overflow:visible!important;transition:opacity .14s ease,filter .14s ease,transform .14s ease!important;
}
body.battle-mode .arena-card-item.attack{--arena-card-accent:#ff5b50}
body.battle-mode .arena-card-item.defense{--arena-card-accent:#34b9ff}
body.battle-mode .arena-card-item.spell{--arena-card-accent:#c05cff}
body.battle-mode .arena-card-item.owner-active:hover{transform:translateY(-7px) scale(1.015)!important;z-index:35!important}
body.battle-mode .arena-card-item.owner-locked{opacity:.34!important;filter:saturate(.45) brightness(.72)!important}
body.battle-mode .arena-card-item.owner-unselected{opacity:.91!important}
body.battle-mode .arena-card-dock .card-btn{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;
  display:block!important;padding:0!important;overflow:hidden!important;border-radius:11px!important;
  border:1px solid color-mix(in srgb,var(--arena-card-accent) 72%,#2f4159)!important;
  background:#0c1625!important;box-shadow:0 10px 22px rgba(0,0,0,.44),0 0 0 1px color-mix(in srgb,var(--arena-card-accent) 12%,transparent)!important;
  transform:none!important;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease!important;
}
body.battle-mode .arena-card-dock .card-btn.attack,
body.battle-mode .arena-card-dock .card-btn.defense,
body.battle-mode .arena-card-dock .card-btn.spell{box-shadow:0 10px 22px rgba(0,0,0,.44),0 0 0 1px color-mix(in srgb,var(--arena-card-accent) 16%,transparent)!important}
body.battle-mode .arena-card-dock .card-btn.selected{
  border-color:#ffd866!important;outline:2px solid rgba(255,216,102,.30)!important;
  box-shadow:0 12px 26px rgba(0,0,0,.48),0 0 18px rgba(255,209,88,.34)!important;transform:translateY(-3px)!important;
}
body.battle-mode .arena-card-art-zone{
  position:absolute!important;inset:0 0 20% 0!important;display:block!important;overflow:hidden!important;
  border-radius:10px 10px 0 0!important;background:#0a1422!important;
}
body.battle-mode .arena-card-art-zone:after{
  content:''!important;position:absolute!important;z-index:4!important;inset:0!important;pointer-events:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 22%,transparent 73%,rgba(3,8,15,.30))!important;
}
body.battle-mode .arena-card-art-media{
  position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;overflow:hidden!important;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--arena-card-accent) 24%,transparent),transparent 51%),linear-gradient(155deg,#213754,#0b1523 76%)!important;
}
body.battle-mode .arena-card-art-media.is-illustrated{display:block!important;background:#0a1422!important}
body.battle-mode .arena-card-art-media.is-illustrated>img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;object-position:center!important;filter:saturate(1.05) contrast(1.025)!important;transform:scale(1.002)!important;
}
body.battle-mode .arena-card-art-media .card-real-figure{
  width:100%!important;height:100%!important;min-height:0!important;display:grid!important;place-items:center!important;
  overflow:hidden!important;border-radius:0!important;background:transparent!important;
}
body.battle-mode .arena-card-art-media .card-real-figure img{
  width:90%!important;height:90%!important;max-width:90%!important;max-height:90%!important;object-fit:contain!important;object-position:center!important;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.38))!important;transform:scale(1.06)!important;
}
body.battle-mode .arena-card-art-media .card-demo-figure,
body.battle-mode .arena-card-art-media .card-part-fallback{font-size:28px!important}
body.battle-mode .arena-card-number{
  position:absolute!important;z-index:8!important;top:6px!important;left:6px!important;display:grid!important;place-items:center!important;
  width:31px!important;height:31px!important;border-radius:999px!important;border:2px solid rgba(255,255,255,.90)!important;
  background:color-mix(in srgb,var(--arena-card-accent) 76%,#111a28)!important;color:#fff!important;
  font-size:15px!important;font-weight:1000!important;line-height:1!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--arena-card-accent) 34%,rgba(9,15,25,.88)),0 4px 10px rgba(0,0,0,.55)!important;
}
body.battle-mode .arena-card-owner-chip{
  position:absolute!important;z-index:7!important;right:5px!important;bottom:5px!important;max-width:68%!important;
  padding:2px 4px!important;border-radius:4px!important;background:rgba(4,9,17,.68)!important;border:1px solid rgba(255,255,255,.08)!important;
  color:#dfe9f6!important;font-size:5.5px!important;font-weight:900!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  text-shadow:0 1px 3px #000!important;
}
body.battle-mode .arena-card-info-zone{
  position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:20%!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;gap:2px!important;padding:4px 6px!important;
  border-top:2px solid var(--arena-card-accent)!important;border-radius:0 0 10px 10px!important;
  background:linear-gradient(180deg,rgba(18,31,49,.99),rgba(7,14,24,.99))!important;text-align:left!important;
}
body.battle-mode .arena-card-info-zone small{
  color:var(--arena-card-accent)!important;font-size:5.8px!important;font-weight:1000!important;line-height:1!important;letter-spacing:.07em!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
body.battle-mode .arena-card-info-zone strong{
  color:#f4f7fb!important;font-size:8px!important;font-weight:1000!important;line-height:1!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
/* Hover is the explanation on pointer devices. The explicit i control is retained only for touch/press. */
body.battle-mode .card-info-trigger{display:none!important}
@media (hover:none),(pointer:coarse){
  body.battle-mode .card-info-trigger{
    display:grid!important;right:4px!important;top:4px!important;width:16px!important;height:16px!important;font-size:8px!important;
    background:rgba(7,13,22,.82)!important;border-color:rgba(255,255,255,.24)!important;
  }
}
body.battle-mode .card-help-popover{bottom:calc(100% + 8px)!important;width:220px!important;max-width:62vw!important}

/* Left side: LAST REVEALED rival card -> rival hand -> player's used cards. */
body.battle-mode .arena-rival-reveal{
  align-self:end!important;justify-self:start!important;width:96px!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:3px!important;
}
body.battle-mode .arena-rival-reveal-label{
  padding-left:2px!important;color:#f2d27b!important;font-size:6px!important;font-weight:1000!important;line-height:1!important;letter-spacing:.08em!important;text-shadow:0 2px 7px #000!important;
}
body.battle-mode .arena-rival-reveal-card{
  --reveal-accent:#768da9;position:relative!important;width:92px!important;aspect-ratio:.64!important;overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--reveal-accent) 74%,#32465f)!important;border-radius:10px!important;background:#0b1523!important;
  box-shadow:0 9px 20px rgba(0,0,0,.46),0 0 0 1px color-mix(in srgb,var(--reveal-accent) 12%,transparent)!important;
}
body.battle-mode .arena-rival-reveal-card.attack{--reveal-accent:#ff5b50}
body.battle-mode .arena-rival-reveal-card.defense{--reveal-accent:#34b9ff}
body.battle-mode .arena-rival-reveal-card.spell{--reveal-accent:#c05cff}
body.battle-mode .arena-rival-reveal-card.is-empty{display:grid!important;place-items:center!important;align-content:center!important;gap:4px!important;border-style:dashed!important;background:rgba(8,14,24,.64)!important;color:#8294aa!important}
body.battle-mode .arena-rival-empty-mark{font-size:19px!important;font-weight:800!important;line-height:1!important}
body.battle-mode .arena-rival-reveal-card.is-empty small{font-size:5px!important;font-weight:900!important;letter-spacing:.06em!important}
body.battle-mode .arena-rival-art{position:absolute!important;inset:0 0 20% 0!important;display:block!important;overflow:hidden!important;background:#0a1422!important}
body.battle-mode .arena-rival-art>img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
body.battle-mode .arena-rival-art-fallback{display:grid!important;place-items:center!important;font-size:30px!important;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--reveal-accent) 26%,transparent),transparent 52%),#0b1625!important}
body.battle-mode .arena-rival-number{
  position:absolute!important;z-index:5!important;top:5px!important;left:5px!important;width:27px!important;height:27px!important;display:grid!important;place-items:center!important;
  border-radius:999px!important;border:2px solid rgba(255,255,255,.9)!important;background:color-mix(in srgb,var(--reveal-accent) 76%,#111a28)!important;
  color:#fff!important;font-size:13px!important;font-weight:1000!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--reveal-accent) 34%,rgba(8,14,22,.9)),0 4px 9px rgba(0,0,0,.5)!important;
}
body.battle-mode .arena-rival-footer{
  position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:20%!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:1px!important;
  padding:3px 5px!important;border-top:2px solid var(--reveal-accent)!important;background:linear-gradient(180deg,#17263b,#09131f)!important;
}
body.battle-mode .arena-rival-footer strong{color:#f4f7fb!important;font-size:7px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.battle-mode .arena-rival-footer small{color:var(--reveal-accent)!important;font-size:5px!important;font-weight:950!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

body.battle-mode .arena-rival-cards,
body.battle-mode .arena-own-deck{
  align-self:end!important;justify-self:center!important;position:relative!important;width:58px!important;height:52px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;color:#f4e5b2!important;text-shadow:0 2px 8px #000!important;
}
body.battle-mode .opp-hand-backs,
body.battle-mode .own-deck-backs{position:relative!important;width:48px!important;height:32px!important;margin:0 auto 2px!important}
body.battle-mode .own-deck-backs i,
body.battle-mode .opp-hand-backs i{
  position:absolute!important;left:50%!important;top:50%!important;width:19px!important;height:28px!important;border-radius:4px!important;
  border:1px solid rgba(137,183,239,.64)!important;background:linear-gradient(135deg,#2a466d,#101b2d 58%,#2b4a74)!important;
  box-shadow:0 3px 7px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.035)!important;
}
body.battle-mode .own-deck-backs i:nth-child(1){transform:translate(-69%,-50%) rotate(-9deg)!important}
body.battle-mode .own-deck-backs i:nth-child(2){transform:translate(-58%,-52%) rotate(-4deg)!important}
body.battle-mode .own-deck-backs i:nth-child(3){transform:translate(-46%,-51%) rotate(2deg)!important}
body.battle-mode .own-deck-backs i:nth-child(4){transform:translate(-34%,-49%) rotate(8deg)!important}
body.battle-mode .arena-rival-cards strong,
body.battle-mode .arena-own-deck strong{
  position:absolute!important;right:1px!important;top:17px!important;width:21px!important;height:21px!important;display:grid!important;place-items:center!important;
  border-radius:999px!important;background:#101b2d!important;border:2px solid #69b9ff!important;color:#fff!important;font-size:10px!important;line-height:1!important;
  box-shadow:0 3px 8px rgba(0,0,0,.45)!important;
}
body.battle-mode .arena-rival-cards small,
body.battle-mode .arena-own-deck small{font-size:5.5px!important;line-height:1!important;font-weight:1000!important;letter-spacing:.08em!important;margin-top:1px!important}
body.battle-mode .arena-card-counter.arena-card-used{width:52px!important;height:52px!important}
body.battle-mode .arena-card-counter.arena-card-used strong{font-size:17px!important}

/* The larger vertical cards live over the lower sand; keep battle messaging above them. */
body.battle-mode .arena:not(.r5-cinematic) .battle-message{bottom:184px!important}

/* Desktop widths where five full vertical cards fit without shrinking the Coliseum. */
@media (min-width:1200px){
  body.battle-mode .arena-card-dock .hand{grid-template-columns:repeat(var(--hand-count),minmax(0,110px))!important;gap:6px!important}
}
/* Compact desktop/tablet: preserve 3–5 cards by reducing card width, not by turning them horizontal. */
@media (min-width:760px) and (max-width:1199px){
  body.battle-mode .arena-card-dock{left:6px!important;right:6px!important;grid-template-columns:78px 46px 44px minmax(0,1fr) 46px!important;gap:4px!important}
  body.battle-mode .arena-rival-reveal{width:76px!important}
  body.battle-mode .arena-rival-reveal-card{width:74px!important}
  body.battle-mode .arena-rival-cards,body.battle-mode .arena-own-deck{width:44px!important;height:43px!important}
  body.battle-mode .opp-hand-backs,body.battle-mode .own-deck-backs{transform:scale(.82)!important;transform-origin:center bottom!important}
  body.battle-mode .arena-rival-cards strong,body.battle-mode .arena-own-deck strong{right:-1px!important;top:13px!important;width:18px!important;height:18px!important;font-size:8px!important}
  body.battle-mode .arena-card-counter.arena-card-used{width:42px!important;height:42px!important}
  body.battle-mode .arena-card-counter.arena-card-used strong{font-size:14px!important}
  body.battle-mode .arena-card-dock .hand{grid-template-columns:repeat(var(--hand-count),minmax(0,86px))!important;gap:4px!important;max-width:470px!important}
  body.battle-mode .arena-card-number{width:27px!important;height:27px!important;font-size:12px!important}
  body.battle-mode .arena-card-info-zone strong{font-size:6.8px!important}
  body.battle-mode .arena-card-info-zone small{font-size:5px!important}
  body.battle-mode .arena-card-owner-chip{font-size:4.7px!important}
  body.battle-mode .arena:not(.r5-cinematic) .battle-message{bottom:150px!important}
}
/* Phone portrait: keep the exact semantic order but collapse the last-rival preview to a compact mini-card. */
@media (orientation:portrait) and (max-width:759px){
  body.battle-mode .arena-card-dock{
    left:3px!important;right:3px!important;bottom:3px!important;
    grid-template-columns:42px 31px 29px minmax(0,1fr) 31px!important;gap:2px!important;
  }
  body.battle-mode .arena-rival-reveal{width:40px!important;gap:1px!important}
  body.battle-mode .arena-rival-reveal-label{display:none!important}
  body.battle-mode .arena-rival-reveal-card{width:40px!important;border-radius:5px!important}
  body.battle-mode .arena-rival-number{top:2px!important;left:2px!important;width:14px!important;height:14px!important;border-width:1px!important;font-size:6px!important;box-shadow:none!important}
  body.battle-mode .arena-rival-footer{padding:2px!important;border-top-width:1px!important}
  body.battle-mode .arena-rival-footer strong{font-size:3.8px!important}
  body.battle-mode .arena-rival-footer small{display:none!important}
  body.battle-mode .arena-rival-cards,body.battle-mode .arena-own-deck{width:30px!important;height:28px!important}
  body.battle-mode .opp-hand-backs,body.battle-mode .own-deck-backs{width:29px!important;height:18px!important;transform:scale(.62)!important;transform-origin:center bottom!important}
  body.battle-mode .arena-rival-cards strong,body.battle-mode .arena-own-deck strong{right:-1px!important;top:7px!important;width:13px!important;height:13px!important;border-width:1px!important;font-size:5.5px!important}
  body.battle-mode .arena-rival-cards small,body.battle-mode .arena-own-deck small{font-size:3.5px!important}
  body.battle-mode .arena-card-counter.arena-card-used{width:27px!important;height:27px!important}
  body.battle-mode .arena-card-counter.arena-card-used .arena-card-counter-symbol{display:none!important}
  body.battle-mode .arena-card-counter.arena-card-used strong{font-size:9px!important}
  body.battle-mode .arena-card-counter.arena-card-used small{font-size:3.4px!important}
  body.battle-mode .arena-cards-head{min-height:7px!important;margin-bottom:1px!important}
  body.battle-mode .arena-cards-head .section-label{font-size:4px!important}
  body.battle-mode .arena-card-dock .hand{grid-template-columns:repeat(var(--hand-count),minmax(0,1fr))!important;gap:2px!important;max-width:none!important}
  body.battle-mode .arena-card-number{top:2px!important;left:2px!important;width:15px!important;height:15px!important;border-width:1px!important;font-size:6px!important;box-shadow:none!important}
  body.battle-mode .arena-card-owner-chip{display:none!important}
  body.battle-mode .arena-card-info-zone{padding:2px!important;border-top-width:1px!important;gap:1px!important}
  body.battle-mode .arena-card-info-zone small{font-size:3.2px!important;letter-spacing:.02em!important}
  body.battle-mode .arena-card-info-zone strong{font-size:4.2px!important}
  body.battle-mode .arena-card-art-media .card-demo-figure,body.battle-mode .arena-card-art-media .card-part-fallback{font-size:13px!important}
  body.battle-mode .card-info-trigger{right:1px!important;top:1px!important;width:11px!important;height:11px!important;font-size:5px!important}
  body.battle-mode .card-help-popover{width:185px!important;max-width:88vw!important;padding:7px 8px!important}
  body.battle-mode .arena:not(.r5-cinematic) .battle-message{bottom:72px!important}
}
/* Low landscape: keep five vertical cards, scaled down as a unit. */
@media (orientation:landscape) and (max-height:600px){
  body.battle-mode .arena-card-dock{left:5px!important;right:5px!important;bottom:3px!important;grid-template-columns:58px 36px 32px minmax(0,1fr) 36px!important;gap:3px!important}
  body.battle-mode .arena-rival-reveal{width:56px!important}
  body.battle-mode .arena-rival-reveal-label{font-size:4px!important}
  body.battle-mode .arena-rival-reveal-card{width:54px!important}
  body.battle-mode .arena-rival-number{width:18px!important;height:18px!important;font-size:8px!important;top:3px!important;left:3px!important}
  body.battle-mode .arena-rival-footer strong{font-size:4.8px!important}
  body.battle-mode .arena-rival-footer small{font-size:3.5px!important}
  body.battle-mode .arena-rival-cards,body.battle-mode .arena-own-deck{width:34px!important;height:31px!important}
  body.battle-mode .opp-hand-backs,body.battle-mode .own-deck-backs{transform:scale(.68)!important;transform-origin:center bottom!important}
  body.battle-mode .arena-rival-cards strong,body.battle-mode .arena-own-deck strong{right:-1px!important;top:8px!important;width:14px!important;height:14px!important;border-width:1px!important;font-size:6px!important}
  body.battle-mode .arena-card-counter.arena-card-used{width:31px!important;height:31px!important}
  body.battle-mode .arena-card-counter.arena-card-used strong{font-size:10px!important}
  body.battle-mode .arena-card-dock .hand{grid-template-columns:repeat(var(--hand-count),minmax(0,65px))!important;gap:3px!important;max-width:350px!important}
  body.battle-mode .arena-cards-head{min-height:7px!important;margin-bottom:1px!important}
  body.battle-mode .arena-cards-head .section-label{font-size:4.2px!important}
  body.battle-mode .arena-card-number{width:19px!important;height:19px!important;font-size:8px!important;top:3px!important;left:3px!important;box-shadow:none!important}
  body.battle-mode .arena-card-owner-chip{font-size:3.6px!important;padding:1px 2px!important;right:2px!important;bottom:2px!important}
  body.battle-mode .arena-card-info-zone{padding:2px 3px!important;gap:1px!important}
  body.battle-mode .arena-card-info-zone small{font-size:3.8px!important}
  body.battle-mode .arena-card-info-zone strong{font-size:5px!important}
  body.battle-mode .arena:not(.r5-cinematic) .battle-message{bottom:92px!important}
}


/* ==========================================================================
   A016R40R14 · RIVAL REVEAL POSITION
   Visual-only refinement: lift ONLY the last revealed rival card block.
   Rival hand, used counter, player hand, deck, and combat logic stay untouched.
   ========================================================================== */
body.battle-mode .arena-rival-reveal{
  transform:translateY(-22px)!important;
}
@media (min-width:760px) and (max-width:1199px){
  body.battle-mode .arena-rival-reveal{transform:translateY(-16px)!important}
}
@media (max-width:759px){
  body.battle-mode .arena-rival-reveal{transform:translateY(-8px)!important}
}


/* ==========================================================================
   A016R40R15 · PERSISTENT HAND + SECRET RIVAL CARD
   - The tactical dock NEVER disappears during RESOLVING.
   - Rival card stays face-down throughout ROUND and reveals only in RESOLVING.
   - Rival card is smaller and lifted further so it does not crowd the hand.
   Engine/deck math remains R40R8 frozen.
   ========================================================================== */
body.battle-mode .arena-card-dock.is-resolving{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  transform:none!important;
}

/* Give the smaller rival reveal only the width it needs and return space to the hand. */
body.battle-mode .arena-card-dock{
  grid-template-columns:82px 62px 54px minmax(0,1fr) 54px!important;
}
body.battle-mode .arena-rival-reveal{
  width:80px!important;
  transform:translateY(-48px)!important;
}
body.battle-mode .arena-rival-reveal-card{
  width:76px!important;
  border-radius:9px!important;
}

/* Secret back: no current rival choice is exposed while the round is reversible. */
body.battle-mode .arena-rival-reveal-card.is-facedown{
  --reveal-accent:#668dbb;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:5px!important;
  overflow:hidden!important;
  border:1px solid rgba(112,162,220,.72)!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(83,139,204,.24),transparent 42%),
    linear-gradient(145deg,#193252,#0b1728 58%,#1d3c62)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.46),inset 0 0 0 3px rgba(255,255,255,.035),0 0 0 1px rgba(64,123,190,.16)!important;
}
body.battle-mode .arena-rival-reveal-card.is-facedown::before,
body.battle-mode .arena-rival-reveal-card.is-facedown::after{
  content:""!important;
  position:absolute!important;
  inset:7px!important;
  border:1px solid rgba(118,174,236,.20)!important;
  border-radius:6px!important;
  pointer-events:none!important;
}
body.battle-mode .arena-rival-reveal-card.is-facedown::after{
  inset:12px!important;
  border-color:rgba(244,207,112,.18)!important;
  transform:rotate(45deg) scale(.66)!important;
  border-radius:4px!important;
}
body.battle-mode .arena-rival-card-back{
  position:relative!important;
  z-index:2!important;
  width:46px!important;
  height:58px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  border:1px solid rgba(137,188,244,.46)!important;
  background:linear-gradient(145deg,rgba(42,76,119,.94),rgba(11,25,43,.96))!important;
  box-shadow:0 5px 12px rgba(0,0,0,.38),inset 0 0 0 2px rgba(255,255,255,.025)!important;
  color:#f4d579!important;
  text-align:center!important;
}
body.battle-mode .arena-rival-card-back i{
  position:absolute!important;
  width:24px!important;
  height:24px!important;
  border:2px solid rgba(244,207,112,.58)!important;
  transform:rotate(45deg)!important;
  border-radius:5px!important;
}
body.battle-mode .arena-rival-card-back b{
  position:relative!important;
  z-index:2!important;
  font-size:6px!important;
  line-height:.95!important;
  letter-spacing:.10em!important;
  text-shadow:0 2px 5px #000!important;
}
body.battle-mode .arena-rival-reveal-card.is-facedown>small{
  position:absolute!important;
  z-index:3!important;
  left:0!important;
  right:0!important;
  bottom:6px!important;
  color:#91add0!important;
  font-size:4.6px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.10em!important;
  text-align:center!important;
}

@media (min-width:760px) and (max-width:1199px){
  body.battle-mode .arena-card-dock{grid-template-columns:66px 46px 44px minmax(0,1fr) 46px!important}
  body.battle-mode .arena-rival-reveal{width:64px!important;transform:translateY(-36px)!important}
  body.battle-mode .arena-rival-reveal-card{width:60px!important}
  body.battle-mode .arena-rival-card-back{width:36px!important;height:46px!important}
  body.battle-mode .arena-rival-card-back b{font-size:4.8px!important}
}

@media (orientation:portrait) and (max-width:759px){
  body.battle-mode .arena-card-dock{grid-template-columns:38px 31px 29px minmax(0,1fr) 31px!important}
  body.battle-mode .arena-rival-reveal{width:36px!important;transform:translateY(-14px)!important}
  body.battle-mode .arena-rival-reveal-card{width:36px!important}
  body.battle-mode .arena-rival-card-back{width:24px!important;height:31px!important;border-radius:4px!important}
  body.battle-mode .arena-rival-card-back i{width:12px!important;height:12px!important;border-width:1px!important}
  body.battle-mode .arena-rival-card-back b{font-size:3px!important}
  body.battle-mode .arena-rival-reveal-card.is-facedown>small{display:none!important}
}

@media (orientation:landscape) and (max-height:600px){
  body.battle-mode .arena-card-dock{grid-template-columns:50px 36px 32px minmax(0,1fr) 36px!important}
  body.battle-mode .arena-rival-reveal{width:48px!important;transform:translateY(-26px)!important}
  body.battle-mode .arena-rival-reveal-card{width:46px!important}
  body.battle-mode .arena-rival-card-back{width:29px!important;height:37px!important}
  body.battle-mode .arena-rival-card-back b{font-size:3.8px!important}
  body.battle-mode .arena-rival-reveal-card.is-facedown>small{font-size:3.4px!important;bottom:3px!important}
}


/* ==========================================================================
   A016R40R16 · ARENA VERTICAL SPACING REFINEMENT
   Visual-only refinement on the CURRENT arena:
   - rival reveal smaller + clearly lifted above rival deck / used counter
   - both combat Axies lifted slightly to clear the tactical dock
   - normal hand cards reduced in footprint while preserving vertical 80/20
   No combat/deck/gameplay logic changes.
   ========================================================================== */

/* Rival reveal: make it a compact upper-left tactical preview.
   The rival deck and USED counter stay on the lower baseline beneath it. */
body.battle-mode .arena-card-dock{
  grid-template-columns:70px 62px 54px minmax(0,1fr) 54px!important;
}
body.battle-mode .arena-rival-reveal{
  width:68px!important;
  transform:translateY(-88px)!important;
}
body.battle-mode .arena-rival-reveal-card{
  width:64px!important;
  border-radius:8px!important;
}
body.battle-mode .arena-rival-number{
  width:23px!important;height:23px!important;top:4px!important;left:4px!important;
  font-size:10px!important;border-width:1.5px!important;
}
body.battle-mode .arena-rival-footer{padding:3px 4px!important}
body.battle-mode .arena-rival-footer strong{font-size:5.8px!important}
body.battle-mode .arena-rival-footer small{font-size:4.2px!important}
body.battle-mode .arena-rival-card-back{width:39px!important;height:49px!important}
body.battle-mode .arena-rival-card-back i{width:20px!important;height:20px!important}
body.battle-mode .arena-rival-card-back b{font-size:5px!important}
body.battle-mode .arena-rival-reveal-card.is-facedown>small{font-size:4px!important;bottom:4px!important}

/* Combat actors: only a small vertical lift; animation transforms remain untouched. */
body.battle-mode #arenaA,
body.battle-mode #arenaB{
  top:-18px!important;
}

/* Player hand: same canonical vertical card, less unnecessary height. */
body.battle-mode .arena-card-dock .hand{
  grid-template-columns:repeat(var(--hand-count),minmax(0,96px))!important;
  gap:5px!important;
  max-width:520px!important;
}
body.battle-mode .arena-card-number{
  width:27px!important;height:27px!important;font-size:12px!important;
  top:5px!important;left:5px!important;
}
body.battle-mode .arena-card-info-zone strong{font-size:7.2px!important}
body.battle-mode .arena-card-info-zone small{font-size:5.2px!important}
body.battle-mode .arena:not(.r5-cinematic) .battle-message{bottom:160px!important}

@media (min-width:760px) and (max-width:1199px){
  body.battle-mode .arena-card-dock{grid-template-columns:58px 46px 44px minmax(0,1fr) 46px!important}
  body.battle-mode .arena-rival-reveal{width:56px!important;transform:translateY(-66px)!important}
  body.battle-mode .arena-rival-reveal-card{width:52px!important}
  body.battle-mode .arena-rival-card-back{width:31px!important;height:40px!important}
  body.battle-mode .arena-rival-card-back i{width:16px!important;height:16px!important}
  body.battle-mode .arena-rival-card-back b{font-size:4px!important}
  body.battle-mode #arenaA,body.battle-mode #arenaB{top:-14px!important}
  body.battle-mode .arena-card-dock .hand{grid-template-columns:repeat(var(--hand-count),minmax(0,76px))!important;gap:4px!important;max-width:410px!important}
  body.battle-mode .arena-card-number{width:23px!important;height:23px!important;font-size:10px!important;top:4px!important;left:4px!important}
  body.battle-mode .arena-card-info-zone strong{font-size:6.1px!important}
  body.battle-mode .arena-card-info-zone small{font-size:4.5px!important}
  body.battle-mode .arena:not(.r5-cinematic) .battle-message{bottom:132px!important}
}

@media (orientation:portrait) and (max-width:759px){
  body.battle-mode .arena-card-dock{grid-template-columns:34px 31px 29px minmax(0,1fr) 31px!important}
  body.battle-mode .arena-rival-reveal{width:32px!important;transform:translateY(-24px)!important}
  body.battle-mode .arena-rival-reveal-card{width:32px!important}
  body.battle-mode #arenaA,body.battle-mode #arenaB{top:-7px!important}
  body.battle-mode .arena-card-dock .hand{grid-template-columns:repeat(var(--hand-count),minmax(0,1fr))!important;gap:2px!important;max-width:none!important}
  body.battle-mode .arena-card-number{width:14px!important;height:14px!important;font-size:5.8px!important;top:2px!important;left:2px!important}
  body.battle-mode .arena:not(.r5-cinematic) .battle-message{bottom:64px!important}
}

@media (orientation:landscape) and (max-height:600px){
  body.battle-mode .arena-card-dock{grid-template-columns:44px 36px 32px minmax(0,1fr) 36px!important}
  body.battle-mode .arena-rival-reveal{width:42px!important;transform:translateY(-48px)!important}
  body.battle-mode .arena-rival-reveal-card{width:40px!important}
  body.battle-mode .arena-rival-card-back{width:25px!important;height:32px!important}
  body.battle-mode .arena-rival-card-back i{width:12px!important;height:12px!important;border-width:1px!important}
  body.battle-mode .arena-rival-card-back b{font-size:3.2px!important}
  body.battle-mode #arenaA,body.battle-mode #arenaB{top:-10px!important}
  body.battle-mode .arena-card-dock .hand{grid-template-columns:repeat(var(--hand-count),minmax(0,58px))!important;gap:3px!important;max-width:315px!important}
  body.battle-mode .arena-card-number{width:17px!important;height:17px!important;font-size:7px!important;top:3px!important;left:3px!important}
  body.battle-mode .arena-card-info-zone strong{font-size:4.5px!important}
  body.battle-mode .arena-card-info-zone small{font-size:3.4px!important}
  body.battle-mode .arena:not(.r5-cinematic) .battle-message{bottom:82px!important}
}


/* ==========================================================================
   A016R40R18 · SLOT LABELS + CARD ART SYNC
   Current arena only. Chosen cards live at the upper corners:
   - rival upper-left: face-down during ROUND, face-up only in RESOLVING
   - player upper-right: face-up immediately; click it to return it to hand
     while the choice is still reversible
   Lower dock now contains only rival hand backs, USED, current hand and own deck.
   ========================================================================== */
body.battle-mode .arena-choice-slot{
  position:absolute!important;
  z-index:26!important;
  top:14px!important;
  width:auto!important;
  max-width:138px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-start!important;
  gap:7px!important;
  pointer-events:auto!important;
}
body.battle-mode .arena-choice-rival{left:16px!important;justify-content:flex-start!important}
body.battle-mode .arena-choice-player{right:16px!important;justify-content:flex-end!important}
body.battle-mode .arena-choice-rival .arena-choice-card{order:1!important}
body.battle-mode .arena-choice-rival .arena-choice-label{order:2!important;text-align:left!important}
body.battle-mode .arena-choice-player .arena-choice-label{order:1!important;text-align:right!important}
body.battle-mode .arena-choice-player .arena-choice-card{order:2!important}
body.battle-mode .arena-choice-label{
  width:auto!important;
  align-self:flex-start!important;
  margin-top:3px!important;
  color:#f3d47d!important;
  font-size:6px!important;
  font-weight:1000!important;
  line-height:1.08!important;
  letter-spacing:.10em!important;
  text-shadow:0 2px 7px #000!important;
  white-space:nowrap!important;
}
body.battle-mode .arena-choice-card{
  --reveal-accent:#768da9;
  position:relative!important;
  width:82px!important;
  aspect-ratio:.64!important;
  min-height:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--reveal-accent) 74%,#32465f)!important;
  border-radius:9px!important;
  background:#0b1523!important;
  box-shadow:0 10px 22px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--reveal-accent) 12%,transparent)!important;
  color:#fff!important;
}
body.battle-mode button.arena-choice-card{appearance:none!important;-webkit-appearance:none!important;text-align:inherit!important}
body.battle-mode .arena-choice-card.attack{--reveal-accent:#ff5b50}
body.battle-mode .arena-choice-card.defense{--reveal-accent:#34b9ff}
body.battle-mode .arena-choice-card.spell{--reveal-accent:#c05cff}
body.battle-mode .arena-choice-card.is-empty{
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:5px!important;
  border-style:dashed!important;
  background:rgba(8,14,24,.68)!important;
  color:#8497ae!important;
}
body.battle-mode .arena-choice-card.is-empty small{font-size:5px!important;font-weight:1000!important;letter-spacing:.07em!important}
body.battle-mode .arena-player-reveal-card.can-return{
  cursor:pointer!important;
  outline:1px solid rgba(255,216,102,.24)!important;
  box-shadow:0 12px 24px rgba(0,0,0,.48),0 0 18px rgba(255,211,92,.20)!important;
}
body.battle-mode .arena-player-reveal-card.can-return:hover{
  transform:translateY(2px) scale(.985)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.45),0 0 12px rgba(255,211,92,.15)!important;
}
body.battle-mode .arena-player-reveal-card.is-locked{cursor:default!important}
body.battle-mode .arena-choice-card .arena-rival-art{inset:0 0 20% 0!important}
body.battle-mode .arena-choice-card .arena-rival-art.arena-rival-art-preview{display:grid!important;place-items:center!important;padding:9px 8px 6px!important}
body.battle-mode .arena-choice-card .arena-rival-art.arena-rival-art-preview .card-real-figure{width:100%!important;height:100%!important;display:grid!important;place-items:center!important}
body.battle-mode .arena-choice-card .arena-rival-art.arena-rival-art-preview .card-real-figure img{max-width:100%!important;max-height:100%!important;object-fit:contain!important;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))!important}
body.battle-mode .arena-choice-card .arena-rival-art.arena-rival-art-preview .card-part-fallback{font-size:44px!important}
body.battle-mode .arena-choice-card .arena-rival-number{width:25px!important;height:25px!important;font-size:11px!important;top:5px!important;left:5px!important}
body.battle-mode .arena-choice-card .arena-rival-footer{height:20%!important;padding:3px 5px!important}
body.battle-mode .arena-choice-card .arena-rival-footer strong{font-size:6.4px!important}
body.battle-mode .arena-choice-card .arena-rival-footer small{font-size:4.6px!important}
body.battle-mode .arena-choice-card .arena-rival-card-back{width:48px!important;height:61px!important}
body.battle-mode .arena-choice-card .arena-rival-card-back i{width:24px!important;height:24px!important}
body.battle-mode .arena-choice-card .arena-rival-card-back b{font-size:5.8px!important}
body.battle-mode .arena-choice-card.is-facedown>small{font-size:4.2px!important;bottom:5px!important}

/* Four columns only: rival hand backs | used | player hand | player deck. */
body.battle-mode .arena-card-dock{
  grid-template-columns:62px 54px minmax(0,1fr) 54px!important;
  gap:7px!important;
}
/* The old lower rival reveal is gone; neutralize any legacy transform by ID/class ancestry. */
body.battle-mode #rivalReveal.arena-choice-slot{transform:none!important}

/* A selected player card is no longer duplicated in the hand; remaining cards
   stay centered and keep the canonical vertical proportions. */
body.battle-mode .arena-card-dock .hand{justify-content:center!important}

@media (min-width:760px) and (max-width:1199px){
  body.battle-mode .arena-choice-slot{top:12px!important;max-width:112px!important;gap:5px!important}
  body.battle-mode .arena-choice-rival{left:12px!important}
  body.battle-mode .arena-choice-player{right:12px!important}
  body.battle-mode .arena-choice-label{font-size:5px!important}
  body.battle-mode .arena-choice-card{width:64px!important}
  body.battle-mode .arena-choice-card .arena-rival-number{width:21px!important;height:21px!important;font-size:9px!important;top:4px!important;left:4px!important}
  body.battle-mode .arena-choice-card .arena-rival-card-back{width:38px!important;height:48px!important}
  body.battle-mode .arena-choice-card .arena-rival-card-back i{width:18px!important;height:18px!important}
  body.battle-mode .arena-choice-card .arena-rival-card-back b{font-size:4.6px!important}
  body.battle-mode .arena-card-dock{grid-template-columns:46px 44px minmax(0,1fr) 46px!important;gap:4px!important}
}

@media (orientation:portrait) and (max-width:759px){
  body.battle-mode .arena-choice-slot{top:5px!important;max-width:58px!important;gap:2px!important}
  body.battle-mode .arena-choice-rival{left:5px!important}
  body.battle-mode .arena-choice-player{right:5px!important}
  body.battle-mode .arena-choice-label{font-size:3.2px!important;max-width:18px!important;white-space:normal!important}
  body.battle-mode .arena-choice-card{width:36px!important;border-radius:5px!important}
  body.battle-mode .arena-choice-card .arena-rival-number{width:13px!important;height:13px!important;font-size:5px!important;top:2px!important;left:2px!important;border-width:1px!important}
  body.battle-mode .arena-choice-card .arena-rival-footer{padding:1px 2px!important;border-top-width:1px!important}
  body.battle-mode .arena-choice-card .arena-rival-footer strong{font-size:3px!important}
  body.battle-mode .arena-choice-card .arena-rival-footer small{display:none!important}
  body.battle-mode .arena-choice-card .arena-rival-card-back{width:22px!important;height:28px!important;border-radius:4px!important}
  body.battle-mode .arena-choice-card .arena-rival-card-back i{width:10px!important;height:10px!important;border-width:1px!important}
  body.battle-mode .arena-choice-card .arena-rival-card-back b{font-size:2.6px!important}
  body.battle-mode .arena-choice-card.is-facedown>small{display:none!important}
  body.battle-mode .arena-card-dock{grid-template-columns:31px 29px minmax(0,1fr) 31px!important;gap:2px!important}
}

@media (orientation:landscape) and (max-height:600px){
  body.battle-mode .arena-choice-slot{top:5px!important;max-width:70px!important;gap:2px!important}
  body.battle-mode .arena-choice-rival{left:6px!important}
  body.battle-mode .arena-choice-player{right:6px!important}
  body.battle-mode .arena-choice-label{font-size:3.7px!important;max-width:22px!important;white-space:normal!important}
  body.battle-mode .arena-choice-card{width:44px!important;border-radius:6px!important}
  body.battle-mode .arena-choice-card .arena-rival-number{width:16px!important;height:16px!important;font-size:6.5px!important;top:3px!important;left:3px!important;border-width:1px!important}
  body.battle-mode .arena-choice-card .arena-rival-footer{padding:2px 3px!important;border-top-width:1px!important}
  body.battle-mode .arena-choice-card .arena-rival-footer strong{font-size:3.6px!important}
  body.battle-mode .arena-choice-card .arena-rival-footer small{font-size:2.8px!important}
  body.battle-mode .arena-choice-card .arena-rival-card-back{width:27px!important;height:34px!important}
  body.battle-mode .arena-choice-card .arena-rival-card-back i{width:12px!important;height:12px!important;border-width:1px!important}
  body.battle-mode .arena-choice-card .arena-rival-card-back b{font-size:3.1px!important}
  body.battle-mode .arena-choice-card.is-facedown>small{font-size:2.7px!important;bottom:2px!important}
  body.battle-mode .arena-card-dock{grid-template-columns:36px 32px minmax(0,1fr) 36px!important;gap:3px!important}
}


/* ==========================================================================
   A016R40R19 · TOP SLOT LABEL ALIGNMENT
   Labels stay BESIDE the chosen cards and align with each card's TOP edge:
   [RIVAL CARD] RIVAL                         TU CARTA [PLAYER CARD]
   No battle logic or card renderer changes.
   ========================================================================== */
body.battle-mode .arena-choice-rival .arena-choice-label,
body.battle-mode .arena-choice-player .arena-choice-label{
  align-self:flex-start!important;
  margin-top:3px!important;
}
@media (min-width:760px) and (max-width:1199px){
  body.battle-mode .arena-choice-rival .arena-choice-label,
  body.battle-mode .arena-choice-player .arena-choice-label{margin-top:2px!important}
}
@media (orientation:portrait) and (max-width:759px),
       (orientation:landscape) and (max-height:600px){
  body.battle-mode .arena-choice-rival .arena-choice-label,
  body.battle-mode .arena-choice-player .arena-choice-label{margin-top:1px!important}
}


/* ==========================================================
   A016R40R21 · CARDS SIDEBAR PART FILTER
   Existing Dashboard only. No new page, no new dashboard.
   ========================================================== */
#lobby .cards-filter-sidebar{padding:14px!important}
#lobby .cards-filter-sidebar h4{margin:6px 0 11px!important}
#lobby .card-part-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:4px}
#lobby .card-part-filter-btn{
  appearance:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;padding:8px 9px;
  border:1px solid #344a65;border-radius:9px;background:#101b2c;color:#c5d2e2;cursor:pointer;font:inherit;text-align:left;
  transition:border-color .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease
}
#lobby .card-part-filter-btn:first-child{grid-column:1/-1}
#lobby .card-part-filter-btn span{font-size:8px;font-weight:950;letter-spacing:.055em}
#lobby .card-part-filter-btn b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border:1px solid #405a78;border-radius:999px;background:#0b1523;color:#9fb3cb;font-size:8px}
#lobby .card-part-filter-btn:hover{border-color:#6f87a6;color:#fff}
#lobby .card-part-filter-btn.active{border-color:#f0c75e;background:linear-gradient(180deg,#332811,#1b160c);color:#ffd96e;box-shadow:inset 0 -2px 0 #c78f19}
#lobby .card-part-filter-btn.active b{border-color:#8a6a24;background:#241b0a;color:#ffd96e}
#lobby .cards-filter-summary{margin-top:12px;padding:11px 10px;border:1px solid #31465f;border-radius:10px;background:#0c1624;display:grid;gap:4px}
#lobby .cards-filter-summary span{color:#6f86a2;font-size:7px;font-weight:900;letter-spacing:.11em}
#lobby .cards-filter-summary strong{color:#f3f6fa;font-size:11px;letter-spacing:.02em}
#lobby .cards-filter-summary small{color:#8ca0b8;font-size:8px;line-height:1.35}
#lobby .cards-filter-sidebar .rules-side-note{margin-top:12px!important}
@media (max-width:720px){
  #lobby .card-part-filter{grid-template-columns:1fr!important}
  #lobby .card-part-filter-btn:first-child{grid-column:auto!important}
  #lobby .card-part-filter-btn{min-height:34px!important;padding:6px 8px!important}
}


/* =========================================================
   A016R40R21 · CARDS MASTER TAIL CATALOG
   Existing CARTAS dashboard only. Remove user-facing anatomy block,
   give the stage the full width and register the 36 real tail slots.
   No art is fabricated here; 35 tails are explicitly PENDIENTE.
   ========================================================= */
#lobby .card-lab-layout{grid-template-columns:minmax(0,1fr)!important}
#lobby .card-lab-stage{width:100%!important}
#lobby .card-lab-preview-row.is-catalog{
  grid-template-columns:repeat(6,minmax(118px,1fr))!important;
  align-items:stretch!important;
  min-height:0!important;
  padding:14px 0 8px!important;
}
#lobby .card-lab-preview-row.is-catalog .card-lab-preview{max-width:none!important;min-width:0!important}
#lobby .card-lab-preview.art-pending{--lab-accent:#956fe0;border-style:solid;opacity:.96}
#lobby .card-lab-preview.art-done{box-shadow:0 0 0 1px rgba(84,222,145,.45),0 14px 28px rgba(0,0,0,.28)}
#lobby .card-lab-art-status{
  position:absolute;z-index:5;top:7px;right:7px;display:inline-flex;align-items:center;justify-content:center;
  min-height:19px;padding:0 7px;border-radius:999px;font-size:6.5px;font-weight:1000;letter-spacing:.06em;
  border:1px solid #4f6580;background:#111c2a;color:#aabbd0;
}
#lobby .card-lab-art-status.done{border-color:#2f875c;background:#0d3425;color:#74eab2}
#lobby .card-lab-art-status.pending{border-color:#6d587f;background:#21182d;color:#d1b6ef}
#lobby .card-lab-art-pending{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(circle at 50% 42%,rgba(176,116,239,.16),transparent 45%),linear-gradient(180deg,#17243a,#0e1726)!important;
}
#lobby .card-lab-pending-glyph{font-size:34px;line-height:1;color:#a980df;filter:drop-shadow(0 0 12px rgba(180,113,241,.28))}
#lobby .card-lab-art-pending b{font-size:8px;letter-spacing:.09em;color:#c6b3df;text-transform:uppercase}
#lobby .card-lab-art-pending small{font-size:6px;letter-spacing:.08em;color:#768ba8;font-weight:900}
#lobby .card-lab-preview.spell footer small{font-size:8.6px!important;font-weight:1000!important}
#lobby .card-lab-preview.spell footer strong{font-size:11.5px!important;font-weight:1000!important}
@media (max-width:1280px){#lobby .card-lab-preview-row.is-catalog{grid-template-columns:repeat(4,minmax(118px,1fr))!important}}
@media (max-width:820px){#lobby .card-lab-preview-row.is-catalog{grid-template-columns:repeat(2,minmax(118px,1fr))!important}}
@media (max-width:480px){#lobby .card-lab-preview-row.is-catalog{grid-template-columns:1fr!important}}

/* ==========================================================================
   A016R40R28 · CANONICAL CARD CLEANUP
   One shared anatomy. Old R40R22-R40R27 override layers removed.
   Dashboard, Arena hand and top choice cards share the same chrome DOM.
   ========================================================================== */
.card-role-vector{display:grid;place-items:center;width:100%;height:100%;color:currentColor}
.card-role-vector svg{display:block;width:76%;height:76%}

/* Canonical zones */
.duel-card-art-zone{position:absolute!important;inset:0 0 20% 0!important;overflow:hidden!important}
.duel-card-topbar{position:absolute;z-index:12;top:6px;left:7px;right:7px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:7px;align-items:start;pointer-events:none}
.duel-card-type-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--card-ui-accent,#f1d28e);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.18),transparent 34%),linear-gradient(180deg,#18212b,#080d14);border:2px solid color-mix(in srgb,var(--card-ui-accent,#f1d28e) 62%,#f3ddb0 38%);box-shadow:0 7px 14px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -9px 11px rgba(0,0,0,.38),0 0 0 2px rgba(255,255,255,.045)}
.duel-card-type-label{height:24px;display:flex;align-items:center;justify-content:center;min-width:0;padding:0 12px;margin:0;color:#f8f1df;background:linear-gradient(180deg,rgba(22,29,38,.96),rgba(8,12,18,.98));border:1px solid color-mix(in srgb,var(--card-ui-accent,#f1d28e) 34%,#ccb77f 66%);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);box-shadow:0 6px 12px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -6px 8px rgba(0,0,0,.28);font-size:9px;font-weight:1000;line-height:1;letter-spacing:.14em;white-space:nowrap;text-shadow:0 1px 2px #000}

.duel-card-footer{position:absolute;z-index:10;left:0;right:0;bottom:0;height:20%;display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;align-items:center;padding:6px 10px 7px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 18%),linear-gradient(180deg,#111d2b 0%,#080e16 100%);border-top:1px solid color-mix(in srgb,var(--card-ui-accent,#7188a5) 68%,#fff 8%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -12px 16px rgba(0,0,0,.28);overflow:hidden}
.duel-card-value-shell{position:relative;width:56px;height:46px;display:grid;place-items:center;justify-self:start;isolation:isolate}
.duel-card-value{position:relative;z-index:3;width:44px;height:44px;display:grid;place-items:center;clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%);color:#fff6d8;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.24),transparent 34%),linear-gradient(180deg,color-mix(in srgb,var(--card-ui-accent,#d4b06a) 28%,#f1d793 72%) 0%,color-mix(in srgb,var(--card-ui-accent,#d4b06a) 15%,#665030 85%) 46%,#090d13 100%);border:2px solid color-mix(in srgb,var(--card-ui-accent,#d4b06a) 40%,#e0c57f 60%);box-shadow:0 7px 12px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.20),inset 0 -10px 12px rgba(0,0,0,.36),0 0 0 2px rgba(6,10,16,.60);font-size:34px;font-weight:1000;line-height:.84;letter-spacing:-.07em;text-shadow:0 2px 3px rgba(0,0,0,.58)}
.duel-card-grip{position:absolute;z-index:2;top:50%;width:14px;height:20px;transform:translateY(-50%);background:linear-gradient(180deg,color-mix(in srgb,var(--card-ui-accent,#d4b06a) 20%,#d5bd7f 80%),#4f412a 58%,#15120e);border:1px solid rgba(238,213,151,.56);box-shadow:0 3px 6px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.18)}
.duel-card-grip.grip-left{left:0;clip-path:polygon(0 25%,58% 0,100% 26%,78% 50%,100% 74%,58% 100%,0 75%,28% 50%)}
.duel-card-grip.grip-right{right:0;clip-path:polygon(100% 25%,42% 0,0 26%,22% 50%,0 74%,42% 100%,100% 75%,72% 50%)}
.duel-card-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff8ee;font-size:14px;font-weight:1000;line-height:1.03;letter-spacing:-.01em;text-shadow:0 1px 3px rgba(0,0,0,.48)}

/* Type accents */
#lobby .card-lab-preview.attack,body.battle-mode .card-btn.attack,body.battle-mode .arena-choice-card.attack{--card-ui-accent:#ff6258}
#lobby .card-lab-preview.defense,body.battle-mode .card-btn.defense,body.battle-mode .arena-choice-card.defense{--card-ui-accent:#36baff}
#lobby .card-lab-preview.spell,body.battle-mode .card-btn.spell,body.battle-mode .arena-choice-card.spell{--card-ui-accent:#c361ff}

/* Dashboard cards */
#lobby .card-lab-preview{overflow:hidden!important}
#lobby .card-lab-preview .duel-card-topbar{top:7px;left:8px;right:8px;grid-template-columns:44px minmax(0,1fr);gap:7px}
#lobby .card-lab-preview .duel-card-type-label{height:24px;font-size:9px}
#lobby .card-lab-preview .duel-card-footer{grid-template-columns:64px minmax(0,1fr);gap:8px;padding:6px 10px 7px}
#lobby .card-lab-preview.art-pending .duel-card-value{color:#efe6ff;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.20),transparent 34%),linear-gradient(180deg,#b89cff,#6f4eba 50%,#140c24)}

/* Arena hand: same anatomy scaled down. */
body.battle-mode .card-btn{overflow:hidden!important}
body.battle-mode .card-btn .duel-card-topbar{top:4px;left:4px;right:4px;grid-template-columns:28px minmax(0,1fr);gap:4px}
body.battle-mode .card-btn .duel-card-type-icon{width:28px;height:28px;border-width:1.4px}
body.battle-mode .card-btn .duel-card-type-label{height:15px;padding:0 5px;font-size:5.1px;letter-spacing:.10em;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,5px 100%,0 50%)}
body.battle-mode .card-btn .duel-card-footer{grid-template-columns:28px minmax(0,1fr);gap:3px;padding:2px 4px 3px}
body.battle-mode .card-btn .duel-card-value-shell{width:25px;height:22px}
body.battle-mode .card-btn .duel-card-value{width:20px;height:20px;border-width:1px;font-size:13px;box-shadow:0 3px 6px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -5px 6px rgba(0,0,0,.34),0 0 0 1px rgba(6,10,16,.58)}
body.battle-mode .card-btn .duel-card-grip{width:7px;height:10px;border-width:1px}
body.battle-mode .card-btn .duel-card-name{font-size:7px}

/* Top chosen/revealed cards: same anatomy scaled to slot. */
body.battle-mode .arena-choice-card{overflow:hidden!important}
body.battle-mode .arena-choice-card .duel-card-topbar{top:4px;left:4px;right:4px;grid-template-columns:24px minmax(0,1fr);gap:4px}
body.battle-mode .arena-choice-card .duel-card-type-icon{width:24px;height:24px;border-width:1.2px}
body.battle-mode .arena-choice-card .duel-card-type-label{height:13px;padding:0 4px;font-size:4.4px;letter-spacing:.09em;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 50%,calc(100% - 4px) 100%,4px 100%,0 50%)}
body.battle-mode .arena-choice-card .duel-card-footer{grid-template-columns:23px minmax(0,1fr);gap:3px;padding:2px 4px 3px}
body.battle-mode .arena-choice-card .duel-card-value-shell{width:20px;height:18px}
body.battle-mode .arena-choice-card .duel-card-value{width:17px;height:17px;border-width:1px;font-size:11px;box-shadow:0 3px 5px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -4px 5px rgba(0,0,0,.34),0 0 0 1px rgba(6,10,16,.58)}
body.battle-mode .arena-choice-card .duel-card-grip{width:6px;height:8px;border-width:1px}
body.battle-mode .arena-choice-card .duel-card-name{font-size:5.8px}

@media (max-width:1280px){
  #lobby .card-lab-preview .duel-card-topbar{grid-template-columns:40px minmax(0,1fr);gap:6px}
  #lobby .card-lab-preview .duel-card-type-icon{width:40px;height:40px}
  #lobby .card-lab-preview .duel-card-type-label{height:22px;font-size:8px}
  #lobby .card-lab-preview .duel-card-footer{grid-template-columns:58px minmax(0,1fr);gap:7px;padding:5px 8px 6px}
  #lobby .card-lab-preview .duel-card-value-shell{width:50px;height:42px}
  #lobby .card-lab-preview .duel-card-value{width:40px;height:40px;font-size:30px}
  #lobby .card-lab-preview .duel-card-grip{width:12px;height:18px}
  #lobby .card-lab-preview .duel-card-name{font-size:12px}
}
@media (orientation:portrait) and (max-width:759px){
  #lobby .card-lab-preview .duel-card-topbar{top:6px;left:7px;right:7px;grid-template-columns:36px minmax(0,1fr);gap:5px}
  #lobby .card-lab-preview .duel-card-type-icon{width:36px;height:36px}
  #lobby .card-lab-preview .duel-card-type-label{height:20px;padding:0 7px;font-size:7px}
  #lobby .card-lab-preview .duel-card-footer{grid-template-columns:52px minmax(0,1fr);gap:5px;padding:5px 7px}
  #lobby .card-lab-preview .duel-card-value-shell{width:46px;height:38px}
  #lobby .card-lab-preview .duel-card-value{width:36px;height:36px;font-size:27px}
  #lobby .card-lab-preview .duel-card-grip{width:11px;height:16px}
  #lobby .card-lab-preview .duel-card-name{font-size:11px}

  body.battle-mode .card-btn .duel-card-topbar{top:2px;left:2px;right:2px;grid-template-columns:14px minmax(0,1fr);gap:2px}
  body.battle-mode .card-btn .duel-card-type-icon{width:14px;height:14px;border-width:1px}
  body.battle-mode .card-btn .duel-card-type-label{height:7px;padding:0 2px;font-size:2.7px}
  body.battle-mode .card-btn .duel-card-footer{grid-template-columns:12px minmax(0,1fr);gap:1px;padding:1px 2px}
  body.battle-mode .card-btn .duel-card-value-shell{width:11px;height:10px}
  body.battle-mode .card-btn .duel-card-value{width:9px;height:9px;font-size:6px;border-width:1px}
  body.battle-mode .card-btn .duel-card-grip{width:3px;height:5px;border-width:0}
  body.battle-mode .card-btn .duel-card-name{font-size:3.7px}

  body.battle-mode .arena-choice-card .duel-card-topbar{top:2px;left:2px;right:2px;grid-template-columns:12px minmax(0,1fr);gap:2px}
  body.battle-mode .arena-choice-card .duel-card-type-icon{width:12px;height:12px;border-width:1px}
  body.battle-mode .arena-choice-card .duel-card-type-label{height:6px;padding:0 2px;font-size:2.4px}
  body.battle-mode .arena-choice-card .duel-card-footer{grid-template-columns:10px minmax(0,1fr);gap:1px;padding:1px 2px}
  body.battle-mode .arena-choice-card .duel-card-value-shell{width:9px;height:8px}
  body.battle-mode .arena-choice-card .duel-card-value{width:8px;height:8px;font-size:5px;border-width:1px}
  body.battle-mode .arena-choice-card .duel-card-grip{width:3px;height:4px;border-width:0}
  body.battle-mode .arena-choice-card .duel-card-name{font-size:3.2px}
}
@media (orientation:landscape) and (max-height:600px){
  body.battle-mode .card-btn .duel-card-topbar{top:3px;left:3px;right:3px;grid-template-columns:17px minmax(0,1fr);gap:2px}
  body.battle-mode .card-btn .duel-card-type-icon{width:17px;height:17px;border-width:1px}
  body.battle-mode .card-btn .duel-card-type-label{height:8px;padding:0 2px;font-size:3px}
  body.battle-mode .card-btn .duel-card-footer{grid-template-columns:14px minmax(0,1fr);gap:1px;padding:1px 2px}
  body.battle-mode .card-btn .duel-card-value-shell{width:12px;height:11px}
  body.battle-mode .card-btn .duel-card-value{width:10px;height:10px;font-size:7px}
  body.battle-mode .card-btn .duel-card-grip{width:4px;height:6px;border-width:0}
  body.battle-mode .card-btn .duel-card-name{font-size:4.2px}

  body.battle-mode .arena-choice-card .duel-card-topbar{top:3px;left:3px;right:3px;grid-template-columns:15px minmax(0,1fr);gap:2px}
  body.battle-mode .arena-choice-card .duel-card-type-icon{width:15px;height:15px;border-width:1px}
  body.battle-mode .arena-choice-card .duel-card-type-label{height:7px;padding:0 2px;font-size:2.7px}
  body.battle-mode .arena-choice-card .duel-card-footer{grid-template-columns:12px minmax(0,1fr);gap:1px;padding:1px 2px}
  body.battle-mode .arena-choice-card .duel-card-value-shell{width:10px;height:9px}
  body.battle-mode .arena-choice-card .duel-card-value{width:9px;height:9px;font-size:5.8px}
  body.battle-mode .arena-choice-card .duel-card-grip{width:3px;height:5px;border-width:0}
  body.battle-mode .arena-choice-card .duel-card-name{font-size:3.7px}
}

/* ========================================================================
   A016R40R35 · REPTILE SVG CHROME FOUNDATION
   Canonical card contract: artwork WebP + header SVG + footer SVG.
   SVG owns all ornamental geometry. CSS only aligns the three image layers
   and places the live role label / value / name in their reserved cavities.
   ======================================================================== */
.duel-card-chrome.has-species-overlays{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.duel-card-chrome.has-species-overlays .duel-card-overlay{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;pointer-events:none;user-select:none}
.duel-card-chrome.has-species-overlays .duel-card-header-overlay{z-index:12}
.duel-card-chrome.has-species-overlays .duel-card-footer-overlay{z-index:13}
.duel-card-chrome.has-species-overlays .duel-card-type-icon,
.duel-card-chrome.has-species-overlays .duel-card-grip{display:none!important}
.duel-card-chrome.has-species-overlays .duel-card-topbar,
.duel-card-chrome.has-species-overlays .duel-card-footer{background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important}

/* Header label sits only inside the blank central plaque built into the SVG. */
.duel-card-chrome.has-species-overlays .duel-card-topbar--overlay{position:absolute;z-index:15;top:4.2%;left:31%;right:6.2%;height:5.9%;display:block;padding:0;margin:0}
.duel-card-chrome.has-species-overlays .duel-card-topbar--overlay .duel-card-type-label{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0;margin:0;background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important;color:#fff2c8;font-family:Georgia,"Times New Roman",serif;font-size:12px;font-weight:800;line-height:1;letter-spacing:.13em;text-shadow:0 2px 4px #000,0 0 8px rgba(214,245,131,.14)}

/* Footer SVG contains the medallion socket and name plaque; HTML supplies only data. */
.duel-card-chrome.has-species-overlays .duel-card-footer--overlay{position:absolute;z-index:15;inset:0;width:100%;height:100%;display:block;padding:0;margin:0;overflow:visible}
.duel-card-chrome.has-species-overlays .duel-card-value-shell--overlay{position:absolute;left:4.5%;bottom:1.6%;width:33%;height:18.7%;display:grid;place-items:center;padding:0;margin:0}
.duel-card-chrome.has-species-overlays .duel-card-value-shell--overlay .duel-card-value{width:auto;height:auto;display:block;padding:0;margin:0;background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important;color:#fff1b7;font-family:Georgia,"Times New Roman",serif;font-size:42px;font-weight:900;line-height:.9;letter-spacing:-.06em;text-shadow:0 3px 5px #000,0 0 10px rgba(255,229,157,.22)}
.duel-card-chrome.has-species-overlays .duel-card-name{position:absolute;left:34.8%;right:5.8%;bottom:5.4%;height:8.4%;display:flex;align-items:center;justify-content:flex-start;min-width:0;margin:0;padding:0 1.4%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff7df;font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:800;line-height:1;letter-spacing:-.01em;text-transform:none;text-shadow:0 2px 4px #000,0 0 7px rgba(255,245,211,.08)}

/* REPTILE keeps one green DNA; role distinction comes from the SVG silhouette/icon. */
.duel-card-chrome.species-reptile.role-attack{--card-ui-accent:#93db35}
.duel-card-chrome.species-reptile.role-defense{--card-ui-accent:#73c85d}
.duel-card-chrome.species-reptile.role-spell{--card-ui-accent:#70d19a}

/* Dashboard showcase typography only; geometry remains the exact SVG geometry. */
#lobby .card-lab-preview .duel-card-chrome.has-species-overlays .duel-card-topbar--overlay .duel-card-type-label{font-size:10.4px}
#lobby .card-lab-preview .duel-card-chrome.has-species-overlays .duel-card-value-shell--overlay .duel-card-value{font-size:33px}
#lobby .card-lab-preview .duel-card-chrome.has-species-overlays .duel-card-name{font-size:12.5px}

/* Arena: same SVGs, only live typography scales down. */
body.battle-mode .card-btn .duel-card-chrome.has-species-overlays .duel-card-topbar--overlay .duel-card-type-label{font-size:5.1px;letter-spacing:.08em}
body.battle-mode .card-btn .duel-card-chrome.has-species-overlays .duel-card-value-shell--overlay .duel-card-value{font-size:12.5px;text-shadow:0 1px 2px #000}
body.battle-mode .card-btn .duel-card-chrome.has-species-overlays .duel-card-name{font-size:5px;padding-left:1%}
body.battle-mode .arena-choice-card .duel-card-chrome.has-species-overlays .duel-card-topbar--overlay .duel-card-type-label{font-size:4.6px;letter-spacing:.07em}
body.battle-mode .arena-choice-card .duel-card-chrome.has-species-overlays .duel-card-value-shell--overlay .duel-card-value{font-size:10.5px;text-shadow:0 1px 2px #000}
body.battle-mode .arena-choice-card .duel-card-chrome.has-species-overlays .duel-card-name{font-size:4px;padding-left:1%}

@media (max-width:1280px){
  #lobby .card-lab-preview .duel-card-chrome.has-species-overlays .duel-card-topbar--overlay .duel-card-type-label{font-size:9.2px}
  #lobby .card-lab-preview .duel-card-chrome.has-species-overlays .duel-card-value-shell--overlay .duel-card-value{font-size:29px}
  #lobby .card-lab-preview .duel-card-chrome.has-species-overlays .duel-card-name{font-size:11.5px}
}


/* ========================================================================
   A016R40R36 · CARDS LAB LAYOUT REPAIR
   Structural layout for the master card catalog.
   No card renderer, artwork or combat logic changes.
   ======================================================================== */
#lobby #cardLabPreviewRow.card-lab-preview-row{
  display:block!important;
  min-height:0!important;
  padding:14px 0 8px!important;
}

#lobby .card-catalog-section{width:100%;min-width:0;margin-top:0;padding-top:0;border-top:0}
#lobby .card-catalog-head{
  display:flex;align-items:end;justify-content:space-between;gap:14px;margin:0 0 12px;padding:0 2px
}
#lobby .card-catalog-head span{display:block;color:#7f96b4;font-size:7px;font-weight:950;letter-spacing:.12em}
#lobby .card-catalog-head strong{display:block;margin-top:2px;color:#eef4fb;font-size:12px;line-height:1}
#lobby .card-catalog-head small{max-width:500px;color:#7f93ad;font-size:8px;line-height:1.35;text-align:right}
#lobby .card-catalog-grid{
  display:grid;grid-template-columns:repeat(6,minmax(118px,1fr));gap:9px;
  align-items:start;width:100%;min-width:0
}
#lobby .card-catalog-grid .card-lab-preview{
  width:100%!important;max-width:none!important;min-width:0!important;align-self:start!important;justify-self:stretch!important
}
#lobby .card-catalog-grid:not(.is-catalog){grid-template-columns:repeat(auto-fit,minmax(150px,190px));justify-content:start}

@media (max-width:1280px){
  #lobby .card-catalog-grid{grid-template-columns:repeat(4,minmax(118px,1fr))}
}
@media (max-width:820px){
  #lobby .card-catalog-grid{grid-template-columns:repeat(2,minmax(118px,1fr))}
}
@media (max-width:480px){
  #lobby .card-catalog-grid{grid-template-columns:1fr}
  #lobby .card-catalog-grid .card-lab-preview{max-width:190px!important;justify-self:center!important}
  #lobby .card-catalog-head{display:block}
  #lobby .card-catalog-head small{display:block;margin-top:6px;text-align:left}
}

/* ========================================================================
   A016R40R38 · PREMIUM GENERIC CARD POLISH
   Preserve the proven card architecture and artwork. Refine only the generic
   attack / defense / spell chrome: header integration, icons, footer, value
   socket, typography and micro-ornament. Species overlays remain untouched.
   ======================================================================== */

/* Active generic role accents. Chrome geometry moved canonically to R40R42. */
#lobby .card-lab-preview.attack:not(.reptile-design-card),body.battle-mode .card-btn.attack,body.battle-mode .arena-choice-card.attack{--card-ui-accent:#ff5d52}
#lobby .card-lab-preview.defense:not(.reptile-design-card),body.battle-mode .card-btn.defense,body.battle-mode .arena-choice-card.defense{--card-ui-accent:#39b9ff}
#lobby .card-lab-preview.spell:not(.reptile-design-card),body.battle-mode .card-btn.spell,body.battle-mode .arena-choice-card.spell{--card-ui-accent:#bd67f3}

/* subtle card-edge polish without changing dimensions */
#lobby .card-lab-preview:not(.reptile-design-card){box-shadow:0 12px 26px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.025)}
#lobby .card-lab-preview.attack:not(.reptile-design-card){border-color:color-mix(in srgb,#ff5d52 72%,#59201d 28%)}
#lobby .card-lab-preview.defense:not(.reptile-design-card){border-color:color-mix(in srgb,#39b9ff 72%,#173849 28%)}
#lobby .card-lab-preview.spell:not(.reptile-design-card){border-color:color-mix(in srgb,#bd67f3 65%,#342047 35%)}
@media (hover:hover) and (pointer:fine){
  #lobby .card-lab-preview:not(.reptile-design-card):hover{transform:translateY(-2px);filter:saturate(1.035) contrast(1.015);box-shadow:0 16px 32px rgba(0,0,0,.34),0 0 0 1px color-mix(in srgb,var(--card-ui-accent) 24%,transparent)}
}

/* ========================================================================
   A016R40R45 · CARD CSS DEAD-LAYER CLEANUP
   Removes only selectors proven unreachable/superseded after the canonical
   R40R42/R43 card chrome. No visual geometry, artwork or gameplay changes.
   ======================================================================== */
/* A016R40R47 supersedes the former R40R42/R40R43 generic geometry.
   Those blocks were removed instead of being layered underneath the new base. */

/* ========================================================================
   A016R40R46 · RETIRE OBSOLETE REPTILE SHOWCASE
   Removed the old three-card REPTILE design showcase and its dedicated CSS.
   Canonical approved card chrome R40R42/R43/R44 remains unchanged.
   Live Reptile class/game data and species overlay assets are not deleted here.
   ======================================================================== */

/* ========================================================================
   A016R40R47 · ARTFRAME V3 — ORNATE CODE CARD BASE
   User-selected composition from the approved Caterpillars reference:
   TOP-LEFT = value / number medallion
   TOP-CENTER = role plaque (ATAQUE / DEFENSA / HECHIZO)
   CENTER = artwork remains a separate live image layer
   BOTTOM-LEFT = role icon medallion
   BOTTOM = wide name signature
   One canonical DOM is shared by catalog + battle. Color is tokenized so
   future cards can change palette without changing header/footer geometry.
   ======================================================================== */

/* R40R48 semantic color contract:
   ROLE owns the TOP header + number + role seal.
   AXIE CLASS owns the outer frame + BOTTOM signature.
   This makes function and provenance readable at a glance. */
.duel-card-chrome.card-artframe-v3.role-attack{
  --card-role-accent:#f05b43;--card-role-hot:#ffbe69;--card-role-deep:#4b140d
}
.duel-card-chrome.card-artframe-v3.role-defense{
  --card-role-accent:#3aaef3;--card-role-hot:#a7ebff;--card-role-deep:#082b43
}
.duel-card-chrome.card-artframe-v3.role-spell{
  --card-role-accent:#b768f1;--card-role-hot:#efc0ff;--card-role-deep:#321245
}
.duel-card-chrome.card-artframe-v3.species-plant{--card-frame-accent:#68d36f;--card-frame-hot:#c8ff8a;--card-frame-deep:#173b1c;--card-frame-metal:#93aa79}
.duel-card-chrome.card-artframe-v3.species-reptile{--card-frame-accent:#a2cf4d;--card-frame-hot:#e2ff8a;--card-frame-deep:#31410f;--card-frame-metal:#a5aa75}
.duel-card-chrome.card-artframe-v3.species-bug{--card-frame-accent:#e2a23d;--card-frame-hot:#ffd37a;--card-frame-deep:#4b2b0a;--card-frame-metal:#b49a71}
.duel-card-chrome.card-artframe-v3.species-aquatic{--card-frame-accent:#35c5de;--card-frame-hot:#9af4ff;--card-frame-deep:#083742;--card-frame-metal:#81aeb5}
.duel-card-chrome.card-artframe-v3.species-bird{--card-frame-accent:#ed72b5;--card-frame-hot:#ffb8dd;--card-frame-deep:#4a1734;--card-frame-metal:#b69aaa}
.duel-card-chrome.card-artframe-v3.species-beast{--card-frame-accent:#e58a3e;--card-frame-hot:#ffc27e;--card-frame-deep:#4b2208;--card-frame-metal:#b49b77}
.duel-card-chrome.card-artframe-v3.species-mech{--card-frame-accent:#8fa7b8;--card-frame-hot:#d9edf7;--card-frame-deep:#233642;--card-frame-metal:#abb7bd}
.duel-card-chrome.card-artframe-v3.species-dusk{--card-frame-accent:#7466c9;--card-frame-hot:#bcb3ff;--card-frame-deep:#21194f;--card-frame-metal:#9792b2}
.duel-card-chrome.card-artframe-v3.species-dawn{--card-frame-accent:#e4bf58;--card-frame-hot:#fff0a0;--card-frame-deep:#47370a;--card-frame-metal:#b7aa7a}
.duel-card-chrome.card-artframe-v3.species-generic{--card-frame-accent:#8694a3;--card-frame-hot:#d1dbe3;--card-frame-deep:#26313a;--card-frame-metal:#9da7ae}

/* Full-card ornamental skeleton. It does not own the artwork. */
.duel-card-chrome.card-artframe-v3{
  position:absolute!important;inset:0!important;z-index:10!important;display:block!important;overflow:visible!important;
  pointer-events:none!important;isolation:isolate!important;
  --card-frame-accent:var(--card-ui-accent,#8694a3);
  --card-frame-hot:#d1dbe3;--card-frame-deep:#26313a;--card-frame-metal:#9da7ae;
  --card-role-accent:#f05b43;--card-role-hot:#ffbe69;--card-role-deep:#4b140d
}
.duel-card-chrome.card-artframe-v3::before{
  content:"";position:absolute;z-index:2;inset:1.2%;border-radius:6.3%;pointer-events:none;
  border:clamp(1px,.85cqw,3px) solid color-mix(in srgb,var(--card-frame-accent) 72%,#d8ddb8 28%);
  box-shadow:
    0 0 0 clamp(1px,.48cqw,2px) rgba(4,8,8,.88),
    inset 0 0 0 clamp(1px,.38cqw,2px) color-mix(in srgb,var(--card-frame-hot) 30%,transparent),
    inset 0 0 18px color-mix(in srgb,var(--card-frame-accent) 12%,transparent),
    0 0 12px color-mix(in srgb,var(--card-frame-accent) 20%,transparent)
}
.duel-card-chrome.card-artframe-v3::after{
  content:"";position:absolute;z-index:3;inset:2.2%;border-radius:5.5%;pointer-events:none;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--card-frame-hot) 70%,#fff 30%) 0 1.1%,transparent 1.2% 98.8%,color-mix(in srgb,var(--card-frame-hot) 68%,#fff 32%) 98.9% 100%),
    linear-gradient(45deg,color-mix(in srgb,var(--card-frame-accent) 65%,#35402d 35%) 0 1%,transparent 1.1% 98.9%,color-mix(in srgb,var(--card-frame-accent) 65%,#35402d 35%) 99% 100%);
  opacity:.86
}
.duel-card-chrome.card-artframe-v3 .duel-card-frame-detail{
  position:absolute;z-index:4;inset:1.5%;border-radius:6%;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)
}
.duel-card-chrome.card-artframe-v3 .duel-card-frame-detail::before,
.duel-card-chrome.card-artframe-v3 .duel-card-frame-detail::after{
  content:"";position:absolute;top:-.6%;width:18%;height:5.5%;
  background:linear-gradient(135deg,transparent 0 22%,color-mix(in srgb,var(--card-frame-accent) 78%,#253118 22%) 23% 44%,color-mix(in srgb,var(--card-frame-hot) 66%,#a79d6c 34%) 45% 52%,color-mix(in srgb,var(--card-frame-accent) 62%,#111 38%) 53% 74%,transparent 75%);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.52));opacity:.95
}
.duel-card-chrome.card-artframe-v3 .duel-card-frame-detail::before{left:1.8%;transform:rotate(-3deg)}
.duel-card-chrome.card-artframe-v3 .duel-card-frame-detail::after{right:1.8%;transform:scaleX(-1) rotate(-3deg)}

/* Keep the center artwork independent but visually seated under the frame. */
.card-lab-preview:has(.card-artframe-v3) .duel-card-art-zone,
body.battle-mode .card-btn:has(.card-artframe-v3) .duel-card-art-zone,
body.battle-mode .arena-choice-card:has(.card-artframe-v3) .duel-card-art-zone{
  inset:1.9% 1.9% 20.2% 1.9%!important;border-radius:5.2% 5.2% 0 0!important
}

/* TOP: large live value medallion + centered role plaque. */
.duel-card-chrome.card-artframe-v3 .duel-card-topbar{
  position:absolute!important;z-index:12!important;top:0!important;left:0!important;right:0!important;height:19%!important;
  display:block!important;padding:0!important;margin:0!important;pointer-events:none!important
}
.duel-card-chrome.card-artframe-v3 .duel-card-value-shell{
  position:absolute!important;z-index:4!important;left:-1.2%!important;top:-2.3%!important;
  width:30.5%!important;height:auto!important;aspect-ratio:1!important;display:grid!important;place-items:center!important;
  padding:0!important;margin:0!important;overflow:visible!important;transform:none!important
}
.duel-card-chrome.card-artframe-v3 .duel-card-value-shell::before{
  content:""!important;display:block!important;position:absolute!important;z-index:0!important;inset:0!important;border-radius:50%!important;
  background:
    conic-gradient(from 8deg,#2a211d 0 5%,var(--card-role-hot) 5.5% 8.5%,#6c5546 9% 15%,#17100e 15.5% 22%,var(--card-role-accent) 22.5% 29%,#c2a67d 29.5% 34%,#211714 34.5% 43%,var(--card-role-hot) 43.5% 48%,#564136 48.5% 56%,#100b0a 56.5% 65%,var(--card-role-accent) 65.5% 73%,#ad916e 73.5% 78%,#211815 78.5% 88%,var(--card-role-hot) 88.5% 93%,#3d2b25 93.5% 100%)!important;
  border:clamp(1px,.62cqw,3px) solid #080b09!important;
  box-shadow:0 5px 10px rgba(0,0,0,.54),0 0 10px color-mix(in srgb,var(--card-role-accent) 30%,transparent),inset 0 0 0 1px rgba(255,255,255,.15)!important
}
.duel-card-chrome.card-artframe-v3 .duel-card-value-shell::after{
  content:""!important;display:block!important;position:absolute!important;z-index:1!important;inset:10%!important;border-radius:50%!important;
  background:radial-gradient(circle at 36% 28%,color-mix(in srgb,var(--card-role-accent) 18%,#2c2522 82%),#080b09 58%,#020303 100%)!important;
  border:clamp(1px,.52cqw,2px) solid color-mix(in srgb,var(--card-role-accent) 48%,#e0c27c 52%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -8px 12px rgba(0,0,0,.58)!important
}
.duel-card-chrome.card-artframe-v3 .duel-card-value{
  position:relative!important;z-index:3!important;width:auto!important;height:auto!important;display:block!important;
  padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important;
  color:#fff3c8!important;font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(20px,12.5cqw,54px)!important;
  font-weight:900!important;line-height:.82!important;letter-spacing:-.08em!important;
  text-shadow:0 2px 1px #4f2d00,0 4px 7px rgba(0,0,0,.72),0 0 10px rgba(255,220,120,.28)!important
}
.duel-card-chrome.card-artframe-v3 .duel-card-topbar .duel-card-type-label{
  position:absolute!important;z-index:2!important;top:3.2%!important;left:30.7%!important;right:9.2%!important;height:28%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;padding:0 9%!important;margin:0!important;min-width:0!important;
  color:#fff3d0!important;background:
    linear-gradient(180deg,color-mix(in srgb,var(--card-role-accent) 24%,#202020 76%),color-mix(in srgb,var(--card-role-deep) 28%,#050606 72%) 62%,#050606)!important;
  border:clamp(1px,.45cqw,2px) solid color-mix(in srgb,var(--card-role-accent) 62%,#c8b38b 38%)!important;
  clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,56% 100%,50% 128%,44% 100%,6% 100%,0 50%)!important;
  box-shadow:0 3px 8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -5px 8px rgba(0,0,0,.44)!important;
  font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(6px,4.8cqw,18px)!important;font-weight:800!important;line-height:1!important;
  letter-spacing:.14em!important;white-space:nowrap!important;text-shadow:0 2px 3px #000!important
}
.duel-card-chrome.card-artframe-v3 .duel-card-topbar .duel-card-type-label::before,
.duel-card-chrome.card-artframe-v3 .duel-card-topbar .duel-card-type-label::after{
  content:"◆";font-size:.46em;color:var(--card-role-hot);margin:0 1.1em;opacity:.72
}

/* BOTTOM: role medallion becomes the mounted seal; name stays live HTML. */
.duel-card-chrome.card-artframe-v3 .duel-card-footer{
  position:absolute!important;z-index:12!important;left:1.7%!important;right:1.7%!important;bottom:1.8%!important;height:20.5%!important;
  display:block!important;padding:0!important;margin:0!important;overflow:visible!important;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--card-frame-accent) 8%,#1c251b 92%),#070a08 44%,#020303 100%)!important;
  border:clamp(1px,.55cqw,2px) solid color-mix(in srgb,var(--card-frame-accent) 50%,#aaa67c 50%)!important;
  border-radius:7% 7% 5% 5%!important;clip-path:polygon(4% 0,44% 0,50% 9%,56% 0,96% 0,100% 14%,100% 86%,96% 100%,56% 100%,50% 91%,44% 100%,4% 100%,0 86%,0 14%)!important;
  box-shadow:0 5px 12px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -9px 14px rgba(0,0,0,.38)!important
}
.duel-card-chrome.card-artframe-v3 .duel-card-footer::before{
  content:""!important;position:absolute!important;display:block!important;z-index:0!important;left:2%!important;right:2%!important;top:7%!important;height:11%!important;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card-frame-hot) 38%,transparent) 15%,rgba(255,255,255,.08) 50%,color-mix(in srgb,var(--card-frame-hot) 32%,transparent) 85%,transparent)!important;
  border-radius:999px!important;opacity:.8!important
}
.duel-card-chrome.card-artframe-v3 .duel-card-footer::after{content:none!important;display:none!important}

.duel-card-chrome.card-artframe-v3 .duel-card-type-icon{
  position:absolute!important;z-index:5!important;left:-2.6%!important;top:-12%!important;width:31%!important;height:auto!important;aspect-ratio:1!important;
  display:grid!important;place-items:center!important;border-radius:50%!important;transform:none!important;padding:0!important;margin:0!important;
  color:#fff1bd!important;background:
    radial-gradient(circle at 38% 30%,color-mix(in srgb,var(--card-role-accent) 18%,#292323 82%),#080b09 58%,#020303 100%)!important;
  border:clamp(1px,.8cqw,3px) solid color-mix(in srgb,var(--card-role-accent) 56%,#d6bd7b 44%)!important;
  box-shadow:0 0 0 clamp(2px,1.1cqw,5px) rgba(8,11,8,.94),0 0 0 clamp(3px,1.55cqw,7px) color-mix(in srgb,var(--card-role-accent) 62%,#3a302a 38%),0 6px 10px rgba(0,0,0,.58),0 0 11px color-mix(in srgb,var(--card-role-accent) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -8px 10px rgba(0,0,0,.48)!important
}
.duel-card-chrome.card-artframe-v3 .duel-card-type-icon::before,
.duel-card-chrome.card-artframe-v3 .duel-card-type-icon::after{content:none!important;display:none!important}
.duel-card-chrome.card-artframe-v3 .duel-card-type-icon .card-role-vector{width:72%!important;height:72%!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.duel-card-chrome.card-artframe-v3 .duel-card-type-icon .card-role-vector svg{width:100%!important;height:100%!important}
.duel-card-chrome.card-artframe-v3 .duel-card-name{
  position:absolute!important;z-index:4!important;left:30%!important;right:4%!important;top:0!important;bottom:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;padding:3% 2% 0!important;margin:0!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  color:#fff9e9!important;font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(8px,7.8cqw,31px)!important;font-weight:800!important;
  line-height:1!important;letter-spacing:-.025em!important;text-transform:none!important;text-align:center!important;
  text-shadow:0 2px 3px #000,0 0 8px rgba(255,245,211,.10)!important
}
.duel-card-chrome.card-artframe-v3 .duel-card-name.is-long-name{font-size:clamp(7px,6.4cqw,27px)!important;letter-spacing:-.035em!important}
.duel-card-chrome.card-artframe-v3 .duel-card-grip{display:none!important}

/* Catalog cards: preserve room for the ornament outside the physical rectangle. */
#lobby .card-lab-preview:has(.card-artframe-v3){overflow:visible!important;border-color:transparent!important;background:#081009!important;box-shadow:none!important}
#lobby .card-lab-preview:has(.card-artframe-v3):hover{box-shadow:none!important;filter:saturate(1.04) contrast(1.015)}
#lobby .card-lab-preview:has(.card-artframe-v3) .card-lab-art{background:#081009!important}

/* Battle hand: same geometry, automatically scaled by percentages/cqw. */
body.battle-mode .card-btn:has(.card-artframe-v3),
body.battle-mode .arena-choice-card:has(.card-artframe-v3){overflow:visible!important;border-color:transparent!important;background:#081009!important;box-shadow:none!important}
body.battle-mode .card-btn .duel-card-chrome.card-artframe-v3 .duel-card-topbar .duel-card-type-label,
body.battle-mode .arena-choice-card .duel-card-chrome.card-artframe-v3 .duel-card-topbar .duel-card-type-label{letter-spacing:.08em!important}
body.battle-mode .card-btn .duel-card-chrome.card-artframe-v3 .duel-card-name,
body.battle-mode .arena-choice-card .duel-card-chrome.card-artframe-v3 .duel-card-name{font-weight:800!important}

/* Small-card simplification: keep silhouette readable rather than over-detailing. */
@media (max-width:820px){
  .duel-card-chrome.card-artframe-v3 .duel-card-topbar .duel-card-type-label::before,
  .duel-card-chrome.card-artframe-v3 .duel-card-topbar .duel-card-type-label::after{margin:0 .55em}
}
/* R40R47 sizing context for card-relative typography. */
#lobby .card-lab-preview:has(.card-artframe-v3),
body.battle-mode .card-btn:has(.card-artframe-v3),
body.battle-mode .arena-choice-card:has(.card-artframe-v3){container-type:inline-size}

/* ========================================================================
   A016R40R48 · SEMANTIC CARD COLOR SPLIT
   Header/value/role seal = card function. Footer/frame = Axie class.
   The obsolete central footer diamond is removed so battle names stay clear.
   ======================================================================== */

/* ========================================================================
   A016R40R49 · CARD TEXT SCALE TUNE
   Approved R40R48 geometry preserved. Only legibility is increased:
   slightly larger role plaque and card name, including battle scale.
   ======================================================================== */
.duel-card-chrome.card-artframe-v3 .duel-card-topbar .duel-card-type-label{
  height:30%!important;
  font-size:clamp(6.5px,5.25cqw,19px)!important;
}
.duel-card-chrome.card-artframe-v3 .duel-card-name{
  font-size:clamp(8.5px,8.4cqw,33px)!important;
}
.duel-card-chrome.card-artframe-v3 .duel-card-name.is-long-name{
  font-size:clamp(7.4px,6.8cqw,28px)!important;
}


/* A016R40R63 · FINAL SIX SPELL ENGINE · scoped visual states */
.axie-card.imprisoned{opacity:.58;filter:saturate(.45);cursor:not-allowed;position:relative}
.axie-card.imprisoned::after{content:'⛓';position:absolute;inset:8px 8px auto auto;font-size:24px;filter:none}
.axie-meta.prison-state{font-weight:800;letter-spacing:.04em;color:#d7c0ff}
.axie-card.darkness-hidden{background:linear-gradient(180deg,rgba(25,20,40,.96),rgba(6,8,18,.98));border-color:#5b4c75;min-height:148px}
.darkness-orb{display:grid!important;place-items:center;font-size:44px!important;filter:drop-shadow(0 0 18px rgba(111,75,170,.65))}
.darkness-fighter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:180px;font-weight:900;letter-spacing:.08em;color:#e4d8ff}
.darkness-fighter>span{font-size:72px;filter:drop-shadow(0 0 22px rgba(112,73,181,.7))}
.blind-card-btn{overflow:hidden!important;background:linear-gradient(155deg,#171426,#080b13)!important;border-color:#6d5793!important}
.blind-card-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 50% 35%,rgba(123,84,181,.28),transparent 42%),linear-gradient(145deg,#241b37,#090b15 70%);color:#f0e7ff}
.blind-card-back::before,.blind-card-back::after{content:'';position:absolute;inset:10%;border:1px solid rgba(201,178,240,.35);border-radius:16px;transform:rotate(4deg)}
.blind-card-back::after{transform:rotate(-4deg)}
.blind-card-back>b{font-size:46px;line-height:1;z-index:1}.blind-card-back>small{font-size:10px;letter-spacing:.14em;z-index:1}.blind-card-back>i{position:absolute;width:54px;height:54px;border:1px solid rgba(221,204,255,.35);border-radius:50%;box-shadow:0 0 28px rgba(123,84,181,.22)}
.arena-player-reveal-card.blind-choice .arena-rival-card-back b{font-size:28px}

/* ========================================================================
   A016R40R65 · ARENA SIDE RAILS · PREMIUM AXIE OVERLAY CARDS
   Scope: battle side rails only.
   Canon: left rail width is preserved; right rail mirrors that exact width.
   Card language: Axie-first composition with overlaid information.
   Gameplay, arena, card renderer and combat engine are untouched.
   ======================================================================== */

/* Desktop: the LEFT rail is the immutable width reference. */
@media (min-width:1000px){
  body.battle-mode .battle-landscape{
    grid-template-columns:clamp(205px,18vw,285px) minmax(360px,1fr) clamp(205px,18vw,285px)!important;
  }

  /* Both team rails consume the same card geometry. */
  body.battle-mode .opponent-section,
  body.battle-mode .own-section{
    overflow:hidden!important;
  }
  body.battle-mode .side-team{
    gap:clamp(6px,.58vw,9px)!important;
  }
  body.battle-mode .side-team .axie-card,
  body.battle-mode .opponent-section .side-team .axie-card{
    position:relative!important;
    isolation:isolate!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:clamp(12px,1vw,16px)!important;
    border:1px solid rgba(99,139,186,.50)!important;
    background:
      radial-gradient(ellipse at 50% 116%,color-mix(in srgb,var(--family,#6eb8ff) 18%,transparent),transparent 56%),
      linear-gradient(145deg,rgba(20,42,68,.98) 0%,rgba(10,24,42,.98) 54%,rgba(6,15,28,.99) 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 2px 0 color-mix(in srgb,var(--family,#6eb8ff) 68%,#ffffff 8%),
      0 8px 20px rgba(0,0,0,.22)!important;
    opacity:1!important;
    filter:none!important;
    text-align:left!important;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
  }

  body.battle-mode .side-team .axie-card::before,
  body.battle-mode .opponent-section .side-team .axie-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
  }
  body.battle-mode .opponent-section .side-team .axie-card::before{
    background:
      linear-gradient(90deg,rgba(4,13,25,.88) 0%,rgba(5,15,28,.64) 34%,rgba(5,15,28,.18) 54%,transparent 70%),
      linear-gradient(180deg,rgba(255,255,255,.018) 0%,transparent 25%,transparent 54%,rgba(3,9,18,.82) 100%);
  }
  body.battle-mode .own-section .side-team .axie-card::before{
    background:
      linear-gradient(270deg,rgba(4,13,25,.88) 0%,rgba(5,15,28,.64) 34%,rgba(5,15,28,.18) 54%,transparent 70%),
      linear-gradient(180deg,rgba(255,255,255,.018) 0%,transparent 25%,transparent 54%,rgba(3,9,18,.82) 100%);
  }

  /* Axie artwork owns the card. The information floats over it. */
  body.battle-mode .side-team .battle-team-preview,
  body.battle-mode .side-team .battle-team-fallback,
  body.battle-mode .side-team .battle-team-icon,
  body.battle-mode .side-team .axie-image-wrap,
  body.battle-mode .opponent-section .side-team .battle-team-preview,
  body.battle-mode .opponent-section .side-team .battle-team-fallback,
  body.battle-mode .opponent-section .side-team .battle-team-icon,
  body.battle-mode .opponent-section .side-team .axie-image-wrap{
    position:absolute!important;
    top:5%!important;
    bottom:auto!important;
    width:73%!important;
    height:88%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    z-index:2!important;
    border:0!important;
    border-radius:0!important;
    overflow:visible!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
  body.battle-mode .opponent-section .side-team .battle-team-preview,
  body.battle-mode .opponent-section .side-team .battle-team-fallback,
  body.battle-mode .opponent-section .side-team .battle-team-icon,
  body.battle-mode .opponent-section .side-team .axie-image-wrap{
    right:-4%!important;
    left:auto!important;
    justify-self:auto!important;
  }
  body.battle-mode .own-section .side-team .battle-team-preview,
  body.battle-mode .own-section .side-team .battle-team-fallback,
  body.battle-mode .own-section .side-team .battle-team-icon,
  body.battle-mode .own-section .side-team .axie-image-wrap{
    left:-4%!important;
    right:auto!important;
  }
  body.battle-mode .side-team .battle-team-preview img,
  body.battle-mode .side-team .battle-team-fallback img,
  body.battle-mode .side-team .axie-image-wrap img,
  body.battle-mode .opponent-section .side-team .battle-team-preview img,
  body.battle-mode .opponent-section .side-team .battle-team-fallback img,
  body.battle-mode .opponent-section .side-team .axie-image-wrap img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    filter:drop-shadow(0 12px 10px rgba(0,0,0,.44));
  }

  /* Base text layer. */
  body.battle-mode .side-team .axie-name,
  body.battle-mode .side-team .axie-meta,
  body.battle-mode .side-team .axie-life,
  body.battle-mode .opponent-section .side-team .axie-name,
  body.battle-mode .opponent-section .side-team .axie-meta,
  body.battle-mode .opponent-section .side-team .axie-life{
    position:absolute!important;
    z-index:4!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    line-height:1.08!important;
    text-shadow:0 2px 5px rgba(0,0,0,.92),0 1px 1px #000!important;
  }

  body.battle-mode .side-team .axie-name,
  body.battle-mode .opponent-section .side-team .axie-name{
    top:clamp(12px,1vw,16px)!important;
    width:56%!important;
    font-size:clamp(14px,1.18vw,18px)!important;
    font-weight:950!important;
    letter-spacing:.015em!important;
    color:#f7f5ef!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* First metadata line: class + family + KO. */
  body.battle-mode .side-team .axie-card>.axie-meta:not(.battle-card-count):not(.last-breath-state):not(.prison-state),
  body.battle-mode .opponent-section .side-team .axie-card>.axie-meta:not(.battle-card-count):not(.last-breath-state):not(.prison-state){
    top:clamp(34px,2.65vw,43px)!important;
    width:57%!important;
    font-size:clamp(9px,.77vw,11px)!important;
    font-weight:650!important;
    color:#a9bdd4!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Mirrored information placement. */
  body.battle-mode .opponent-section .side-team .axie-name,
  body.battle-mode .opponent-section .side-team .axie-card>.axie-meta:not(.battle-card-count):not(.last-breath-state):not(.prison-state),
  body.battle-mode .opponent-section .side-team .axie-life,
  body.battle-mode .opponent-section .side-team .last-breath-state,
  body.battle-mode .opponent-section .side-team .prison-state{
    left:clamp(10px,.9vw,14px)!important;
    right:auto!important;
    text-align:left!important;
  }
  body.battle-mode .own-section .side-team .axie-name,
  body.battle-mode .own-section .side-team .axie-card>.axie-meta:not(.battle-card-count):not(.last-breath-state):not(.prison-state),
  body.battle-mode .own-section .side-team .axie-life,
  body.battle-mode .own-section .side-team .battle-card-count,
  body.battle-mode .own-section .side-team .last-breath-state,
  body.battle-mode .own-section .side-team .prison-state{
    right:clamp(10px,.9vw,14px)!important;
    left:auto!important;
    text-align:right!important;
  }

  /* Life becomes a compact HUD strip over the artwork. */
  body.battle-mode .side-team .axie-life,
  body.battle-mode .opponent-section .side-team .axie-life{
    bottom:clamp(11px,.85vw,14px)!important;
    width:62%!important;
    display:flex!important;
    align-items:center!important;
    gap:clamp(4px,.35vw,6px)!important;
    flex-wrap:nowrap!important;
  }
  body.battle-mode .own-section .side-team .axie-life{
    bottom:clamp(27px,1.75vw,32px)!important;
    justify-content:flex-end!important;
  }
  body.battle-mode .opponent-section .side-team .axie-life{
    justify-content:flex-start!important;
  }
  body.battle-mode .side-team .life-label{
    display:inline!important;
    font-size:clamp(8px,.66vw,10px)!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:.07em!important;
    color:#f2c45b!important;
  }
  body.battle-mode .side-team .life-pips{
    display:inline-flex!important;
    align-items:center!important;
    gap:clamp(3px,.25vw,4px)!important;
  }
  body.battle-mode .side-team .life-pip{
    width:clamp(9px,.7vw,11px)!important;
    height:clamp(9px,.7vw,11px)!important;
    flex:0 0 auto!important;
  }
  body.battle-mode .side-team .life-count{
    font-size:clamp(9px,.72vw,11px)!important;
    line-height:1!important;
    font-weight:900!important;
    color:#f6eee0!important;
  }

  /* Own-side hand state is the quiet second HUD line. */
  body.battle-mode .own-section .side-team .battle-card-count{
    position:absolute!important;
    z-index:4!important;
    bottom:clamp(9px,.65vw,11px)!important;
    width:64%!important;
    margin:0!important;
    padding:0!important;
    font-size:clamp(7px,.6vw,9px)!important;
    font-weight:650!important;
    line-height:1!important;
    color:#91a8c0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-shadow:0 2px 4px rgba(0,0,0,.9)!important;
  }

  /* Vanguard: small command badge, not a second title. */
  body.battle-mode .side-team .vanguard-badge,
  body.battle-mode .opponent-section .side-team .vanguard-badge{
    position:absolute!important;
    top:clamp(8px,.7vw,11px)!important;
    right:clamp(8px,.7vw,11px)!important;
    left:auto!important;
    z-index:6!important;
    padding:clamp(3px,.28vw,4px) clamp(7px,.55vw,9px)!important;
    border:1px solid rgba(255,226,132,.55)!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#ffd86c,#e6ad38)!important;
    color:#1a1305!important;
    box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.58)!important;
    font-size:clamp(7px,.58vw,9px)!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:.02em!important;
    text-shadow:none!important;
  }
  body.battle-mode .side-team .vanguard-badge::after{content:none!important}

  /* On the player's vanguard, title/meta move under the badge instead of colliding. */
  body.battle-mode .own-section .side-team .axie-card:has(.vanguard-badge) .axie-name{
    top:clamp(35px,2.45vw,40px)!important;
  }
  body.battle-mode .own-section .side-team .axie-card:has(.vanguard-badge)>.axie-meta:not(.battle-card-count):not(.last-breath-state):not(.prison-state){
    top:clamp(56px,3.95vw,64px)!important;
  }

  /* Darkness remains a gameplay state, not a generic premium card. */
  body.battle-mode .own-section .side-team .axie-card.darkness-hidden{
    background:linear-gradient(180deg,rgba(25,20,40,.98),rgba(6,8,18,.99))!important;
    border-color:#5b4c75!important;
  }
  body.battle-mode .own-section .side-team .axie-card.darkness-hidden::before{
    background:radial-gradient(circle at 34% 46%,rgba(111,75,170,.24),transparent 42%),linear-gradient(270deg,rgba(9,7,18,.90),rgba(9,7,18,.30) 58%,transparent 78%)!important;
  }
  body.battle-mode .own-section .side-team .axie-card.darkness-hidden .darkness-orb{
    position:absolute!important;left:7%!important;top:18%!important;width:58%!important;height:64%!important;z-index:2!important;
    display:grid!important;place-items:center!important;margin:0!important;font-size:clamp(38px,4.2vw,64px)!important;
  }
  body.battle-mode .own-section .side-team .axie-card.darkness-hidden .axie-name{right:clamp(10px,.9vw,14px)!important;left:auto!important;text-align:right!important}
  body.battle-mode .own-section .side-team .axie-card.darkness-hidden>.axie-meta{right:clamp(10px,.9vw,14px)!important;left:auto!important;text-align:right!important}
  body.battle-mode .own-section .side-team .axie-card.darkness-hidden .axie-life{right:clamp(10px,.9vw,14px)!important;left:auto!important;justify-content:flex-end!important}

  /* Selection state = deliberate gold focus; no geometry jump. */
  body.battle-mode .own-section .axie-card.selected{
    border-color:#f3cb62!important;
    outline:0!important;
    background:
      radial-gradient(ellipse at 50% 116%,rgba(242,196,91,.22),transparent 58%),
      linear-gradient(145deg,rgba(25,52,82,.99) 0%,rgba(11,29,49,.99) 56%,rgba(7,17,30,.99) 100%)!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,224,135,.62),
      inset 0 2px 0 #f2c45b,
      0 0 0 1px rgba(242,196,91,.20),
      0 8px 23px rgba(0,0,0,.30),
      0 0 20px rgba(242,196,91,.13)!important;
  }

  /* KO keeps the panel readable; only the defeated creature visually retires. */
  body.battle-mode .side-team .axie-card.ko,
  body.battle-mode .opponent-section .side-team .axie-card.ko{
    opacity:1!important;
    filter:none!important;
    border-color:rgba(79,101,128,.42)!important;
    background:linear-gradient(145deg,rgba(18,29,44,.96),rgba(8,16,28,.98))!important;
  }
  body.battle-mode .side-team .axie-card.ko::before,
  body.battle-mode .opponent-section .side-team .axie-card.ko::before{
    opacity:.32!important;
  }
  body.battle-mode .side-team .axie-card.ko .axie-name,
  body.battle-mode .opponent-section .side-team .axie-card.ko .axie-name{
    color:#c6d0dc!important;
  }
  body.battle-mode .side-team .axie-card.ko>.axie-meta:not(.battle-card-count):not(.last-breath-state):not(.prison-state),
  body.battle-mode .opponent-section .side-team .axie-card.ko>.axie-meta:not(.battle-card-count):not(.last-breath-state):not(.prison-state){
    color:#77899e!important;
  }
  body.battle-mode .side-team .axie-card.ko .battle-team-preview,
  body.battle-mode .side-team .axie-card.ko .battle-team-fallback,
  body.battle-mode .side-team .axie-card.ko .axie-image-wrap,
  body.battle-mode .opponent-section .side-team .axie-card.ko .battle-team-preview,
  body.battle-mode .opponent-section .side-team .axie-card.ko .battle-team-fallback,
  body.battle-mode .opponent-section .side-team .axie-card.ko .axie-image-wrap{
    opacity:.42!important;
    filter:grayscale(.68) saturate(.32)!important;
  }

  /* Spell-state text stays visible but compact at the lower edge. */
  body.battle-mode .side-team .last-breath-state,
  body.battle-mode .side-team .prison-state,
  body.battle-mode .opponent-section .side-team .last-breath-state,
  body.battle-mode .opponent-section .side-team .prison-state{
    bottom:clamp(46px,3.1vw,52px)!important;
    width:70%!important;
    max-width:70%!important;
    font-size:clamp(7px,.58vw,9px)!important;
    line-height:1.08!important;
    white-space:normal!important;
  }

  /* Preserve prison semantics while keeping the HUD legible. */
  body.battle-mode .side-team .axie-card.imprisoned,
  body.battle-mode .opponent-section .side-team .axie-card.imprisoned{
    opacity:.78!important;
    filter:saturate(.55)!important;
  }
}

/* Horizontal mobile/tablet rails: preserve the current LEFT width and mirror it. */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body.battle-mode .battle-landscape{
    grid-template-columns:clamp(94px,16vw,128px) minmax(280px,1fr) clamp(94px,16vw,128px)!important;
  }
}
@media (orientation:landscape) and (max-width:720px) and (max-height:600px){
  body.battle-mode .battle-landscape{
    grid-template-columns:94px minmax(278px,1fr) 94px!important;
  }
}
@media (orientation:landscape) and (max-width:580px) and (max-height:600px){
  body.battle-mode .battle-landscape{
    grid-template-columns:minmax(92px,19vw) minmax(178px,1fr) minmax(92px,19vw)!important;
  }
}

/* ========================================================================== */
/* A016R40R66 · ARENA RIVAL STARTER CODE CLEANUP                              */
/* Rival side cards no longer expose internal starter codes (S-01, S-02...). */
/* Player-side rendering, Axie identity, battle logic and card UI untouched. */
/* ========================================================================== */
body.battle-mode #oppTeam .axie-card.starter-live-card::after,
body.battle-mode .opponent-section .side-team .axie-card.starter-live-card::after{
  content:none!important;
  display:none!important;
}

/* ==========================================================
   A016R40R79 · SAFE DYNAMIC BATTLE INFO BAR · UI ONLY
   ========================================================== */
body.battle-mode .battle-header.r79-battle-info{
  display:grid!important;
  grid-template-columns:minmax(0,1.75fr) minmax(190px,.52fr) minmax(180px,.55fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-height:62px!important;
  padding:6px 10px!important;
  overflow:hidden!important;
}
body.battle-mode .r79-compat-hidden{display:none!important}
body.battle-mode .r79-battle-announcement{min-width:0!important;overflow:hidden!important}
body.battle-mode .r79-announcement-stage{position:relative!important;height:44px!important;min-width:0!important;overflow:hidden!important}
body.battle-mode .r79-slide{
  position:absolute!important;inset:0!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:4px!important;white-space:nowrap!important;min-width:max-content!important;
  opacity:0!important;visibility:hidden!important;transform:translateY(3px)!important;
  transition:opacity .26s ease,transform .26s ease,visibility 0s linear .26s!important;
  pointer-events:none!important;
}
body.battle-mode .r79-slide.is-active{
  opacity:1!important;visibility:visible!important;transform:none!important;
  transition:opacity .26s ease,transform .26s ease!important;
}
body.battle-mode .r79-kicker{
  flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;height:20px!important;
  padding:0 6px!important;border:1px solid rgba(242,196,91,.26)!important;border-radius:999px!important;
  color:#e8c66d!important;font-size:7px!important;font-weight:950!important;letter-spacing:.12em!important;
}
body.battle-mode .r79-trio,
body.battle-mode .r79-cycle{
  display:inline-flex!important;align-items:center!important;gap:1px!important;
  padding:1px 3px!important;border:1px solid rgba(121,149,185,.14)!important;border-radius:9px!important;
  background:rgba(255,255,255,.018)!important;
}
body.battle-mode .r79-mini.axie-preview-slot{
  display:grid!important;place-items:center!important;flex:0 0 28px!important;
  width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:7px!important;overflow:hidden!important;
  background:radial-gradient(circle at 50% 62%,rgba(80,109,147,.28),rgba(15,23,36,.08) 72%,transparent)!important;
  box-shadow:none!important;
}
body.battle-mode .r79-mini.axie-preview-slot img{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.34))!important;
}
body.battle-mode .r79-mini-fallback{
  display:grid;place-items:center;width:100%;height:100%;font-size:7px;font-weight:950;color:#9db4ce;
}
body.battle-mode .r79-mini.is-ready .r79-mini-fallback{display:none!important}
body.battle-mode .r79-mini .preview-spinner{width:9px!important;height:9px!important;border-width:1px!important}
body.battle-mode .r79-beats{color:#edcd72!important;font-size:7px!important;font-weight:1000!important;letter-spacing:.05em!important}
body.battle-mode .r79-arrow{color:#93aeca!important;font-size:12px!important;font-weight:1000!important;line-height:1!important}
body.battle-mode .r79-paren{color:#667b95!important;font-size:13px!important;line-height:1!important}
body.battle-mode .r79-battle-center{
  min-width:0!important;display:grid!important;justify-items:center!important;align-content:center!important;gap:3px!important;
  padding:0 10px!important;border-left:1px solid rgba(120,146,180,.16)!important;border-right:1px solid rgba(120,146,180,.16)!important;
}
body.battle-mode .r79-clock-line{display:flex!important;align-items:baseline!important;justify-content:center!important;gap:6px!important;white-space:nowrap!important}
body.battle-mode .r79-battle-center .round-label{font-size:11px!important;line-height:1!important;color:#aebbd0!important;letter-spacing:.08em!important}
body.battle-mode .r79-battle-center .round-label strong{font-size:16px!important;color:#fff2c8!important}
body.battle-mode .r79-clock-divider{color:#576b85!important;font-size:15px!important}
body.battle-mode .r79-battle-center .timer{font-size:29px!important;line-height:.92!important;color:#f2c45b!important}
body.battle-mode .r79-battle-center .timer.danger{color:var(--danger)!important}
body.battle-mode .r79-timer-unit{margin-left:-4px!important;color:#8da0b8!important;font-size:9px!important;font-weight:900!important}
body.battle-mode .r79-ready-indicator.ready-indicator{
  justify-self:center!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:none!important;color:#8395ad!important;font-size:6.5px!important;line-height:1!important;font-weight:950!important;letter-spacing:.11em!important;
}
body.battle-mode .r79-ready-indicator.ready{color:var(--good)!important;background:none!important;border:0!important}
body.battle-mode .r79-battle-right{
  min-width:0!important;justify-self:stretch!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;
  height:36px!important;padding:0 8px!important;border:1px solid rgba(124,148,184,.12)!important;border-radius:10px!important;background:rgba(6,13,22,.18)!important;
}
body.battle-mode .r79-slp-mark{
  display:grid!important;place-items:center!important;width:24px!important;height:24px!important;border-radius:50%!important;
  border:1px solid rgba(111,205,255,.28)!important;background:rgba(53,137,184,.10)!important;color:#90d9fb!important;
  font-size:6.5px!important;font-weight:1000!important;letter-spacing:.03em!important;
}
body.battle-mode .r79-battle-right small{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#6f829b!important;font-size:7px!important;font-weight:900!important;letter-spacing:.09em!important}
@media (prefers-reduced-motion:reduce){body.battle-mode .r79-slide{transition:none!important}}
@media (max-width:1100px){
  body.battle-mode .battle-header.r79-battle-info{grid-template-columns:minmax(0,1.5fr) minmax(150px,.48fr) minmax(105px,.40fr)!important;gap:5px!important;min-height:48px!important;padding:4px 6px!important}
  body.battle-mode .r79-announcement-stage{height:36px!important}
  body.battle-mode .r79-mini.axie-preview-slot{flex-basis:22px!important;width:22px!important;min-width:22px!important;height:22px!important;min-height:22px!important}
  body.battle-mode .r79-kicker{display:none!important}
  body.battle-mode .r79-trio,body.battle-mode .r79-cycle{padding:1px 2px!important}
  body.battle-mode .r79-beats{font-size:6px!important}
  body.battle-mode .r79-arrow{font-size:9px!important}
  body.battle-mode .r79-battle-center{padding:0 5px!important}
  body.battle-mode .r79-battle-center .round-label{font-size:9px!important}
  body.battle-mode .r79-battle-center .round-label strong{font-size:13px!important}
  body.battle-mode .r79-battle-center .timer{font-size:23px!important}
  body.battle-mode .r79-battle-right small{display:none!important}
}
@media (orientation:portrait) and (max-width:599px){
  body.battle-mode .battle-header.r79-battle-info{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"announce center"!important;min-height:44px!important}
  body.battle-mode .r79-battle-announcement{grid-area:announce!important}
  body.battle-mode .r79-battle-center{grid-area:center!important;border-right:0!important}
  body.battle-mode .r79-battle-right{display:none!important}
  body.battle-mode .r79-announcement-stage{height:32px!important}
  body.battle-mode .r79-mini.axie-preview-slot{flex-basis:18px!important;width:18px!important;min-width:18px!important;height:18px!important;min-height:18px!important}
  body.battle-mode .r79-beats{font-size:5px!important}
  body.battle-mode .r79-arrow{font-size:7px!important}
  body.battle-mode .r79-paren{font-size:9px!important}
  body.battle-mode .r79-cycle{gap:0!important;padding:0 1px!important}
  body.battle-mode .r79-battle-center .round-label{font-size:8px!important}
  body.battle-mode .r79-battle-center .round-label strong{font-size:11px!important}
  body.battle-mode .r79-battle-center .timer{font-size:20px!important}
  body.battle-mode .r79-ready-indicator.ready-indicator{font-size:5.5px!important}
}

/* ========================================================================== */
/* A016R40R80 · BATTLE INFO BAR ALIGNMENT REFINEMENT                          */
/* UI-only: mini STARTERS face right; round + timer sit on true header center. */
/* ========================================================================== */
@media (min-width:600px){
  body.battle-mode .battle-header.r79-battle-info{
    grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr)!important;
  }
  body.battle-mode .r79-battle-announcement{
    grid-column:1!important;
  }
  body.battle-mode .r79-battle-center{
    grid-column:2!important;
    width:100%!important;
    justify-self:center!important;
    text-align:center!important;
  }
  body.battle-mode .r79-battle-right{
    grid-column:3!important;
  }
}
body.battle-mode .r79-mini.axie-preview-slot img{
  transform:scaleX(-1)!important;
  transform-origin:50% 50%!important;
}

/* ========================================================================== */
/* A016R40R81 · STAMINA + RANKED PROGRESSION UI                               */
/* Dashboard Ranking + battle economy rail. Combat/arena geometry untouched.  */
/* ========================================================================== */
.ranking-current-card{grid-template-columns:repeat(4,minmax(0,1fr))}
.ranking-current-stamina{border-color:rgba(242,196,91,.22)!important;background:rgba(242,196,91,.055)!important}
.ranking-current-stamina strong{color:#f3d27c!important}
.ranking-stamina-policy{display:grid;gap:9px;padding:12px;border:1px solid rgba(242,196,91,.17);border-radius:11px;background:linear-gradient(180deg,rgba(242,196,91,.045),rgba(255,255,255,.018))}
.ranking-stamina-policy>header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ranking-stamina-policy>header>div{display:grid;gap:2px}
.ranking-stamina-policy>header strong{font-size:13px;letter-spacing:.045em;color:#f4f0e6}
.ranking-stamina-policy>header em{font-size:9px;font-style:normal;font-weight:950;letter-spacing:.08em;color:#91a4bb;white-space:nowrap}
.ranking-stamina-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ranking-stamina-rules article{display:grid;gap:4px;min-width:0;padding:10px 11px;border:1px solid rgba(255,255,255,.055);border-radius:8px;background:rgba(255,255,255,.025)}
.ranking-stamina-rules article.with-stamina{border-color:rgba(242,196,91,.17)}
.ranking-stamina-rules article.without-stamina{border-color:rgba(133,161,196,.13)}
.ranking-stamina-rules article.slp-rule{border-color:rgba(105,199,244,.13)}
.ranking-stamina-rules b{font-size:10px;color:#e9c968;letter-spacing:.06em}
.ranking-stamina-rules span{font-size:12px;color:#edf2f8;font-weight:850}
.ranking-stamina-rules small{font-size:8.5px;line-height:1.35;color:#7f91a7}
.ranking-tier-mode{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px;padding:6px 7px;border-radius:6px;background:rgba(255,255,255,.025)}
.ranking-tier-mode small{font-size:8px;font-weight:950;letter-spacing:.055em;color:#8294aa;white-space:nowrap}
.ranking-tier-mode span{font-size:9px;color:#9aacbf;text-align:right;white-space:nowrap}
.ranking-tier-mode b{font-size:10px;color:#f1f4f8}
.ranking-tier-mode.with{background:rgba(242,196,91,.045)}
.ranking-tier-mode.with small{color:#ddb95e}
.ranking-tier-mode.without{background:rgba(113,137,168,.04)}
.ranking-tier-axp{padding:0 2px}
.ranking-side-stamina{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;padding:9px;border-radius:7px;border:1px solid rgba(242,196,91,.15);background:rgba(242,196,91,.04)}
.ranking-side-stamina span{font-size:8px;font-weight:950;letter-spacing:.08em;color:#9b8b60}
.ranking-side-stamina b{font-size:12px;color:#f0d17c;text-align:center}
.ranking-side-stamina em{font-size:8px;font-style:normal;color:#8295aa;white-space:nowrap}

body.battle-mode .r79-battle-right.r81-battle-economy{
  display:grid!important;
  grid-template-columns:.78fr 1fr 1.25fr 1.25fr!important;
  align-items:stretch!important;
  gap:3px!important;
  height:44px!important;
  padding:3px!important;
  border-color:rgba(124,148,184,.14)!important;
  background:rgba(6,13,22,.24)!important;
}
body.battle-mode .r81-economy-cell{
  min-width:0!important;
  display:grid!important;
  grid-template-rows:auto 1fr auto!important;
  align-items:center!important;
  justify-items:center!important;
  gap:0!important;
  padding:2px 3px!important;
  border-right:1px solid rgba(126,151,183,.10)!important;
  border-radius:6px!important;
  background:rgba(255,255,255,.018)!important;
  overflow:hidden!important;
}
body.battle-mode .r81-economy-cell:last-child{border-right:0!important}
body.battle-mode .r81-economy-cell>span{font-size:5.8px!important;line-height:1!important;font-weight:1000!important;letter-spacing:.05em!important;color:#758aa3!important}
body.battle-mode .r81-economy-cell>strong{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:8.2px!important;line-height:1.05!important;font-weight:1000!important;color:#edf3fa!important;font-variant-numeric:tabular-nums!important}
body.battle-mode .r81-economy-cell>small{display:block!important;font-size:4.7px!important;line-height:1!important;font-weight:900!important;letter-spacing:.05em!important;color:#61758e!important;white-space:nowrap!important}
body.battle-mode .r81-economy-cell.stamina>strong{color:#f0cf73!important}
body.battle-mode .r81-economy-cell.axp>strong{color:#9fcfff!important}
body.battle-mode .r81-economy-cell.slp>strong{color:#93d8f6!important}
body.battle-mode .r81-battle-economy.no-stamina .r81-economy-cell.stamina>strong{color:#a8b3c2!important}

@media (max-width:1100px){
  .ranking-current-card{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ranking-stamina-policy{padding:6px;gap:5px}.ranking-stamina-rules{gap:4px}.ranking-stamina-rules article{padding:5px 6px}
  body.battle-mode .r79-battle-right.r81-battle-economy{height:38px!important;grid-template-columns:.72fr .96fr 1.16fr 1.16fr!important;gap:1px!important;padding:2px!important}
  body.battle-mode .r81-economy-cell{padding:1px 2px!important}
  body.battle-mode .r81-economy-cell>strong{font-size:6.8px!important}
  body.battle-mode .r81-economy-cell>span{font-size:4.8px!important}
  body.battle-mode .r81-economy-cell>small{display:none!important}
}
@media (max-width:760px){
  .ranking-current-card{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ranking-stamina-policy>header{align-items:flex-start}.ranking-stamina-policy>header strong{font-size:8px}
  .ranking-stamina-rules{grid-template-columns:1fr}.ranking-stamina-rules small{font-size:6px}
  .ranking-tier-mode{grid-template-columns:1fr;gap:2px}.ranking-tier-mode span{text-align:left}
}
@media (orientation:portrait) and (max-width:599px){
  body.battle-mode .battle-header.r79-battle-info{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"announce center" "economy economy"!important;
    grid-template-rows:auto auto!important;
    height:auto!important;
  }
  body.battle-mode .r79-battle-right.r81-battle-economy{
    grid-area:economy!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:100%!important;
    height:28px!important;
    min-height:28px!important;
    padding:2px!important;
  }
  body.battle-mode .r81-economy-cell{grid-template-rows:auto 1fr!important;padding:1px 3px!important}
  body.battle-mode .r81-economy-cell>strong{font-size:6.6px!important}
  body.battle-mode .r81-economy-cell>span{font-size:4.6px!important}
  body.battle-mode .r81-economy-cell>small{display:none!important}
}


/* ========================================================================== */
/* A016R40R82 · ROUND / TIMER ROTATING CENTER CARD                            */
/* UI-only center card. RONDA/TIEMPO alternate every 5 s; <=15 s locks time.  */
/* ========================================================================== */
body.battle-mode .r82-battle-center{
  gap:2px!important;
}
body.battle-mode .r82-clock-card{
  position:relative!important;
  width:150px!important;
  height:30px!important;
  min-width:150px!important;
  min-height:30px!important;
  perspective:600px!important;
  overflow:visible!important;
}
body.battle-mode .r82-clock-inner{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  transform-style:preserve-3d!important;
  transition:transform .30s cubic-bezier(.2,.72,.24,1)!important;
}
body.battle-mode .r82-clock-card[data-r82-face="time"] .r82-clock-inner{
  transform:rotateY(180deg)!important;
}
body.battle-mode .r82-clock-face{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  border:1px solid rgba(126,151,183,.16)!important;
  border-radius:9px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012)),
    rgba(8,16,28,.42)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 3px 10px rgba(0,0,0,.10)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  overflow:hidden!important;
}
body.battle-mode .r82-round-face{
  transform:rotateY(0deg)!important;
}
body.battle-mode .r82-time-face{
  transform:rotateY(180deg)!important;
}
body.battle-mode .r82-round-face .round-label{
  display:flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:6px!important;
  margin:0!important;
  color:#9fb0c4!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.12em!important;
  white-space:nowrap!important;
}
body.battle-mode .r82-round-face .round-label strong{
  color:#f2c45b!important;
  font-size:25px!important;
  line-height:.9!important;
  font-weight:1000!important;
  letter-spacing:-.035em!important;
  font-variant-numeric:tabular-nums!important;
}
body.battle-mode .r82-time-face .timer{
  color:#f2c45b!important;
  font-size:29px!important;
  line-height:.9!important;
  font-weight:1000!important;
  letter-spacing:-.035em!important;
  font-variant-numeric:tabular-nums!important;
}
body.battle-mode .r82-time-face .timer.danger{
  color:var(--danger)!important;
}
body.battle-mode .r82-time-face .r79-timer-unit{
  align-self:center!important;
  margin:2px 0 0 0!important;
  color:#91a3b9!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:950!important;
}
body.battle-mode .r82-battle-center .r79-ready-indicator.ready-indicator{
  min-height:7px!important;
}
@media (prefers-reduced-motion:reduce){
  body.battle-mode .r82-clock-inner{transition:none!important}
}
@media (max-width:1100px){
  body.battle-mode .r82-clock-card{
    width:126px!important;
    min-width:126px!important;
    height:27px!important;
    min-height:27px!important;
  }
  body.battle-mode .r82-round-face .round-label{font-size:8px!important;gap:5px!important}
  body.battle-mode .r82-round-face .round-label strong{font-size:21px!important}
  body.battle-mode .r82-time-face .timer{font-size:24px!important}
  body.battle-mode .r82-time-face .r79-timer-unit{font-size:7px!important}
}
@media (orientation:portrait) and (max-width:599px){
  body.battle-mode .r82-clock-card{
    width:104px!important;
    min-width:104px!important;
    height:24px!important;
    min-height:24px!important;
  }
  body.battle-mode .r82-round-face,
  body.battle-mode .r82-time-face{border-radius:7px!important}
  body.battle-mode .r82-round-face .round-label{font-size:7px!important;gap:4px!important}
  body.battle-mode .r82-round-face .round-label strong{font-size:18px!important}
  body.battle-mode .r82-time-face .timer{font-size:20px!important}
  body.battle-mode .r82-time-face .r79-timer-unit{font-size:6px!important}
}


/* ========================================================================== */
/* A016R40R83 · ROUND FACE TYPOGRAPHY EMPHASIS                                */
/* UI-only: gives RONDA equal scoreboard presence without changing card size. */
/* ========================================================================== */
body.battle-mode .r82-round-face{
  border-color:rgba(242,196,91,.24)!important;
  background:
    radial-gradient(circle at 50% 52%,rgba(242,196,91,.085),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.012)),
    rgba(8,16,28,.48)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,246,218,.04),
    inset 0 -1px 0 rgba(242,196,91,.035),
    0 3px 10px rgba(0,0,0,.10)!important;
}
body.battle-mode .r82-round-face .round-label{
  gap:7px!important;
  color:#f4eddc!important;
  font-family:"Arial Black","Segoe UI Black",Inter,ui-sans-serif,system-ui,sans-serif!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.95),
    0 0 8px rgba(242,196,91,.10)!important;
}
body.battle-mode .r82-round-face .round-label strong{
  color:#f5c653!important;
  font-family:"Arial Black","Segoe UI Black",Inter,ui-sans-serif,system-ui,sans-serif!important;
  font-size:27px!important;
  line-height:.88!important;
  font-weight:1000!important;
  letter-spacing:-.045em!important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.98),
    0 0 10px rgba(242,196,91,.20)!important;
}
@media (max-width:1100px){
  body.battle-mode .r82-round-face .round-label{font-size:11px!important;gap:6px!important;letter-spacing:.065em!important}
  body.battle-mode .r82-round-face .round-label strong{font-size:23px!important}
}
@media (orientation:portrait) and (max-width:599px){
  body.battle-mode .r82-round-face .round-label{font-size:9px!important;gap:5px!important;letter-spacing:.055em!important}
  body.battle-mode .r82-round-face .round-label strong{font-size:20px!important}
}

/* ========================================================================== */
/* A016R40R84 · ROUND LABEL EQUAL SCALE                                       */
/* UI-only: RONDA uses the same typographic size as the round number.          */
/* ========================================================================== */
body.battle-mode .r82-round-face .round-label{
  gap:7px!important;
  font-size:27px!important;
  line-height:.88!important;
  letter-spacing:.015em!important;
  font-weight:1000!important;
}
body.battle-mode .r82-round-face .round-label strong{
  font-size:27px!important;
  line-height:.88!important;
}
@media (max-width:1100px){
  body.battle-mode .r82-round-face .round-label{font-size:23px!important;gap:6px!important;letter-spacing:.012em!important}
  body.battle-mode .r82-round-face .round-label strong{font-size:23px!important}
}
@media (orientation:portrait) and (max-width:599px){
  body.battle-mode .r82-round-face .round-label{font-size:20px!important;gap:5px!important;letter-spacing:.01em!important}
  body.battle-mode .r82-round-face .round-label strong{font-size:20px!important}
}

/* =========================================================
   A016R40R85 · LIVE MATCHMAKING 30S GATE
   Real server queue UI only. Does not modify battle engine.
   ========================================================= */
.matchmaking-panel{
  min-height:clamp(520px,72vh,760px);
  display:grid;
  place-items:center;
  padding:clamp(18px,2.5vw,34px);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(232,171,65,.12),transparent 34%),
    linear-gradient(180deg,#111827 0%,#0b1220 58%,#090e18 100%);
  border:1px solid rgba(124,153,196,.26);
}
.matchmaking-panel.hidden{display:none!important}
.matchmaking-stage{
  width:min(1180px,100%);
  min-width:0;
  display:grid;
  gap:clamp(16px,2vw,24px);
}
.matchmaking-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.matchmaking-kicker,.matchmaking-network{
  font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#9fb0c9;
}
.matchmaking-network{padding:7px 10px;border:1px solid rgba(120,151,195,.22);border-radius:999px;color:#80d7ff;background:rgba(18,33,54,.55)}
.matchmaking-copy{text-align:center;display:grid;gap:7px}
.matchmaking-copy h2{margin:0;font-size:clamp(28px,4vw,52px);line-height:1;font-weight:1000;letter-spacing:.035em;color:#f4f7fb;text-shadow:0 5px 26px rgba(0,0,0,.35)}
.matchmaking-copy p{margin:0;color:#9fb0c9;font-size:clamp(13px,1.45vw,17px);font-weight:700}
.matchmaking-versus{
  display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,28px);
  min-height:260px;padding:clamp(10px,1.5vw,18px) 0;
}
.matchmaking-squad{min-width:0;display:grid;gap:12px}
.matchmaking-squad-label{text-align:center;font-size:11px;font-weight:950;letter-spacing:.17em;color:#d3dcec}
.matchmaking-axies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,14px);min-width:0}
.matchmaking-axie{
  min-width:0;height:220px;display:grid;grid-template-rows:minmax(0,1fr) auto auto;align-items:center;justify-items:center;
  padding:12px 8px 10px;border:1px solid rgba(105,144,196,.28);border-radius:20px;
  background:linear-gradient(180deg,rgba(20,35,58,.88),rgba(7,15,27,.94));box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.matchmaking-axie-visual{width:100%;height:158px;display:grid;place-items:center;min-width:0;overflow:visible}
.matchmaking-axie-visual .mixer-preview-slot,.matchmaking-axie-visual .mixer-preview,.matchmaking-axie-visual canvas,.matchmaking-axie-visual img{max-width:100%;max-height:100%}
.matchmaking-axie-visual img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(0,0,0,.32))}
.matchmaking-axie strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#f7f9fc}
.matchmaking-axie small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:850;letter-spacing:.08em;color:#9fb0c9}
.matchmaking-stage[data-state="searching"] .matchmaking-squad.own .matchmaking-axie{animation:mm85Ready 1.65s ease-in-out infinite}
.matchmaking-stage[data-state="searching"] .matchmaking-squad.own .matchmaking-axie:nth-child(2){animation-delay:-.42s}
.matchmaking-stage[data-state="searching"] .matchmaking-squad.own .matchmaking-axie:nth-child(3){animation-delay:-.84s}
@keyframes mm85Ready{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.matchmaking-core{position:relative;width:112px;height:112px;display:grid;place-items:center}
.matchmaking-core strong{position:relative;z-index:2;font-size:28px;font-weight:1000;color:#ffca58;letter-spacing:.04em}
.matchmaking-radar-ring{position:absolute;inset:50%;width:22px;height:22px;margin:-11px;border:1px solid rgba(97,202,255,.45);border-radius:50%;opacity:0}
.matchmaking-stage[data-state="searching"] .matchmaking-radar-ring{animation:mm85Radar 2.35s ease-out infinite}
.matchmaking-stage[data-state="searching"] .matchmaking-radar-ring.r2{animation-delay:.78s}
.matchmaking-stage[data-state="searching"] .matchmaking-radar-ring.r3{animation-delay:1.56s}
@keyframes mm85Radar{0%{transform:scale(.5);opacity:.7}100%{transform:scale(5);opacity:0}}
.matchmaking-opponent-placeholder{height:220px}
.matchmaking-opponent-placeholder span{height:100%;border:1px dashed rgba(118,149,191,.22);border-radius:20px;background:linear-gradient(180deg,rgba(15,28,47,.32),rgba(7,14,25,.2));position:relative;overflow:hidden}
.matchmaking-opponent-placeholder span:after{content:'?';position:absolute;inset:0;display:grid;place-items:center;font-size:42px;font-weight:1000;color:rgba(154,176,209,.18)}
.matchmaking-stage[data-state="searching"] .matchmaking-opponent-placeholder span:before{content:'';position:absolute;inset:-40% -90%;background:linear-gradient(105deg,transparent 42%,rgba(91,191,255,.08) 50%,transparent 58%);animation:mm85Sweep 2.2s linear infinite}
.matchmaking-opponent-placeholder span:nth-child(2):before{animation-delay:.35s}.matchmaking-opponent-placeholder span:nth-child(3):before{animation-delay:.7s}
@keyframes mm85Sweep{from{transform:translateX(-42%)}to{transform:translateX(42%)}}
.matchmaking-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid rgba(113,145,188,.22);border-radius:16px;overflow:hidden;background:rgba(8,16,29,.72)}
.matchmaking-metrics>div{min-width:0;padding:12px 14px;text-align:center;display:grid;grid-template-columns:1fr;gap:3px;position:relative}
.matchmaking-metrics>div+div:before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(116,147,188,.18)}
.matchmaking-metrics span{font-size:9px;letter-spacing:.14em;font-weight:900;color:#8294af}.matchmaking-metrics strong{font-size:17px;color:#f2f6fb}.matchmaking-metrics em{font-style:normal;font-size:10px;color:#9fb0c9;margin-left:3px}
.matchmaking-clock{grid-template-columns:1fr!important;justify-items:center}.matchmaking-clock strong{font-size:24px;color:#ffca58}
.matchmaking-searchline{height:4px;border-radius:999px;background:rgba(87,118,160,.18);overflow:hidden}.matchmaking-searchline i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#55bff5,#ffca58);transition:width .12s linear}
.matchmaking-status{margin:0;text-align:center;min-height:20px;font-size:12px;font-weight:780;color:#9fb0c9;letter-spacing:.02em}
.matchmaking-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.matchmaking-actions .btn{min-width:170px}
.matchmaking-stage[data-state="matched"] .matchmaking-copy h2{color:#9af6c2}.matchmaking-stage[data-state="matched"] .matchmaking-axie{border-color:rgba(111,229,164,.44);box-shadow:inset 0 0 0 1px rgba(111,229,164,.08),0 12px 32px rgba(0,0,0,.18)}
.matchmaking-stage[data-state="matched"] .matchmaking-core strong{color:#9af6c2}.matchmaking-stage[data-state="matched"] .matchmaking-radar-ring{display:none}
.matchmaking-stage[data-state="failed"] .matchmaking-copy h2{font-size:clamp(24px,3vw,42px);color:#f0f3f8}.matchmaking-stage[data-state="failed"] .matchmaking-opponent-placeholder{opacity:.58}
.matchmaking-unknown{font-size:46px;color:#71839f}

@media (max-width:900px){
  .matchmaking-versus{grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);gap:8px;min-height:220px}
  .matchmaking-core{width:70px;height:70px}.matchmaking-core strong{font-size:22px}
  .matchmaking-axie{height:176px;border-radius:15px;padding:8px 5px}.matchmaking-axie-visual{height:120px}.matchmaking-axie strong{font-size:11px}.matchmaking-axie small{font-size:7px}
  .matchmaking-opponent-placeholder{height:176px}.matchmaking-opponent-placeholder span{border-radius:15px}
}
@media (max-width:640px){
  .matchmaking-panel{padding:15px 10px;min-height:0}
  .matchmaking-topline{align-items:flex-start}.matchmaking-network{font-size:8px}.matchmaking-kicker{font-size:9px}
  .matchmaking-versus{grid-template-columns:1fr;gap:8px;padding:0}.matchmaking-core{height:38px;width:100%}.matchmaking-radar-ring{display:none}.matchmaking-core strong{font-size:18px}
  .matchmaking-axie{height:145px}.matchmaking-axie-visual{height:96px}.matchmaking-opponent-placeholder{height:145px}
  .matchmaking-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.matchmaking-metrics>div:nth-child(3):before{display:none}.matchmaking-metrics>div:nth-child(n+3){border-top:1px solid rgba(116,147,188,.18)}
  .matchmaking-actions .btn{width:100%;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .matchmaking-stage[data-state="searching"] .matchmaking-squad.own .matchmaking-axie,.matchmaking-stage[data-state="searching"] .matchmaking-radar-ring,.matchmaking-stage[data-state="searching"] .matchmaking-opponent-placeholder span:before{animation:none!important}
}
.matchmaking-axie-visual .axie-preview-slot,
.matchmaking-axie-visual .axie-preview-slot.compact-preview{
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;padding:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important;
}
.matchmaking-axie-visual .axie-preview-slot img,
.matchmaking-axie-visual .axie-preview-slot.compact-preview img{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;
}


/* ================================================================
   A016R40R92 · DASHBOARD GAME MODES + LIVE PROFILE
   Dashboard-only composition. PvP/matchmaking/engine geometry untouched.
   ================================================================ */
#lobby .duel-rank-line{grid-template-columns:auto 1fr}
#lobby .duel-rank-live{display:grid;grid-template-columns:1fr 1fr;gap:5px;min-width:0}
#lobby .duel-rank-live>span{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;padding:5px 7px;border:1px solid rgba(255,255,255,.055);border-radius:7px;background:rgba(255,255,255,.025)}
#lobby .duel-rank-live>span.stamina{border-color:rgba(242,196,91,.15);background:rgba(242,196,91,.04)}
#lobby .duel-rank-live small{font-size:6.2px;line-height:1;color:#8292a7;font-weight:950;letter-spacing:.08em;white-space:nowrap}
#lobby .duel-rank-live b{font-size:9px;line-height:1;color:#f7f2e7;white-space:nowrap}
#lobby .duel-rank-live .stamina b{color:#f3d27c}
#lobby .team-mode-actions{display:grid;grid-template-columns:1fr;gap:6px;min-width:0}
#lobby .team-mode-actions.wallet-modes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#lobby .team-mode-actions .btn{width:100%;margin:0;min-width:0;white-space:nowrap}
#lobby .duel-supremacy-btn{border-color:#d6aa49;background:linear-gradient(180deg,#f1ca69,#c8942f);color:#17120a}
#lobby .training-btn{border-color:rgba(105,199,244,.45);background:linear-gradient(180deg,rgba(31,75,111,.92),rgba(20,46,71,.96));color:#eaf7ff}
#lobby .training-btn:hover{border-color:rgba(133,216,255,.72)}
@media (orientation:landscape) and (max-height:480px){
  #lobby .duel-rank-live{gap:3px}
  #lobby .duel-rank-live>span{padding:3px 4px;border-radius:5px}
  #lobby .duel-rank-live small{font-size:4.8px}
  #lobby .duel-rank-live b{font-size:6.5px}
  #lobby .team-mode-actions{gap:3px}
  #lobby .team-mode-actions .btn{font-size:5.2px!important;padding-left:2px!important;padding-right:2px!important}
}
@media (max-width:520px){
  #lobby .team-mode-actions{grid-template-columns:1fr;gap:5px}
  #lobby .team-mode-actions.wallet-modes{grid-template-columns:1fr 1fr}
  #lobby .team-mode-actions .btn{font-size:8px;padding-left:5px;padding-right:5px}
}

/* ================================================================
   A016R40R95 · PELEAS / FIGHT HISTORY LEDGER
   Read-only ranked ledger + local training history. No combat changes.
   ================================================================ */
#lobby .fights-main{
  display:grid;gap:10px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(10,15,24,.72)
}
#lobby .fights-main.hidden{display:none!important}
#lobby .fights-main-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0}
#lobby .fights-main-head>div{min-width:0}
#lobby .fights-kicker{font-size:8px;letter-spacing:.16em;color:var(--gold);font-weight:950}
#lobby .fights-main-head h3{margin:2px 0 3px;font-size:21px;letter-spacing:.04em}
#lobby .fights-main-head p{margin:0;max-width:760px;color:var(--muted);font-size:11px;line-height:1.4}
#lobby .fights-main-count{flex:0 0 auto;padding:5px 8px;border:1px solid rgba(238,190,80,.28);border-radius:999px;font-size:8px;font-weight:950;color:#f5cd6c;background:rgba(238,190,80,.07)}
#lobby .fights-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px;border:1px solid rgba(255,255,255,.065);border-radius:10px;background:rgba(255,255,255,.02)}
#lobby .fights-mode-tabs{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap}
#lobby .fights-mode-tab,#lobby .fights-refresh-btn,#lobby .fights-pagination button{
  min-height:28px;border:1px solid #34435d;border-radius:7px;background:#111a2a;color:#9fb0c8;font-size:7.5px;font-weight:950;letter-spacing:.045em;cursor:pointer
}
#lobby .fights-mode-tab{padding:0 9px}
#lobby .fights-mode-tab.active{border-color:#b88b32;background:linear-gradient(180deg,#2a2416,#1b1a16);color:#f0c861;box-shadow:inset 0 -2px 0 #c99a3b}
#lobby .fights-refresh-btn{padding:0 10px;white-space:nowrap}
#lobby .fights-refresh-btn:disabled,#lobby .fights-pagination button:disabled{opacity:.38;cursor:default}
#lobby .fights-ledger-head{
  display:grid;grid-template-columns:124px minmax(165px,.9fr) minmax(260px,1.45fr) 58px 90px 100px;gap:8px;align-items:center;
  padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.07);color:#73849a;font-size:6.5px;font-weight:950;letter-spacing:.09em
}
#lobby .fights-history-list{display:grid;gap:6px;min-height:390px;align-content:start}
#lobby .fight-history-row{
  display:grid;grid-template-columns:124px minmax(165px,.9fr) minmax(260px,1.45fr) 58px 90px 100px;gap:8px;align-items:center;min-width:0;
  padding:8px 10px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012))
}
#lobby .fight-history-row.win{border-left:3px solid rgba(102,218,157,.72)}
#lobby .fight-history-row.loss{border-left:3px solid rgba(231,100,111,.72)}
#lobby .fight-history-row.draw{border-left:3px solid rgba(143,157,181,.72)}
#lobby .fight-result-cell,#lobby .fight-rival-cell,#lobby .fight-round-cell,#lobby .fight-points-cell,#lobby .fight-stamina-cell{display:grid;gap:3px;min-width:0}
#lobby .fight-result-cell .fight-mode{font-size:6px;line-height:1;color:#7f91aa;font-weight:950;letter-spacing:.075em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lobby .fight-result-cell strong{font-size:11px;line-height:1;color:#f0f4f9;letter-spacing:.035em}
#lobby .fight-history-row.win .fight-result-cell strong{color:#8de7b5}
#lobby .fight-history-row.loss .fight-result-cell strong{color:#f0959d}
#lobby .fight-result-cell small,#lobby .fight-rival-cell small,#lobby .fight-round-cell small,#lobby .fight-points-cell small,#lobby .fight-stamina-cell small{font-size:6.2px;line-height:1.15;color:#71839b;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lobby .fight-rival-cell strong{font-size:8.5px;color:#edf2f8;white-space:nowrap}
#lobby .fight-rival-cell span{font-size:7.5px;color:#9fb0c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lobby .fight-teams-cell{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);align-items:center;gap:5px;min-width:0}
#lobby .fight-versus-cell{display:grid;place-items:center;align-content:center;gap:4px;min-width:0}
#lobby .fight-versus-cell>b{text-align:center;font-size:7px;color:#f2c45b;letter-spacing:.04em}
#lobby .fight-team-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;min-width:0}
#lobby .fight-axie-mini{
  position:relative;display:grid;place-items:center;height:44px;min-width:0;border:1px solid rgba(107,145,194,.16);border-radius:8px;background:rgba(9,18,31,.74);overflow:hidden
}
#lobby .fight-axie-mini img{width:100%;height:35px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.24))}
#lobby .fight-axie-mini em{position:absolute;left:2px;right:2px;bottom:1px;font-size:4.8px;line-height:1;font-style:normal;font-weight:950;color:#8496ae;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
#lobby .fight-axie-mini>b{font-size:16px;line-height:1}
#lobby .fight-axie-mini.empty{font-size:12px;color:#43536a}
#lobby .fight-axie-mini .axie-preview-slot,#lobby .fight-axie-mini .axie-preview-slot.compact-preview{width:100%!important;height:37px!important;min-width:0!important;min-height:0!important;padding:0!important;background:transparent!important;overflow:visible!important}
#lobby .fight-axie-mini .axie-preview-slot img,#lobby .fight-axie-mini .axie-preview-slot.compact-preview img{width:100%!important;height:37px!important;object-fit:contain!important}
#lobby .fight-round-cell,#lobby .fight-points-cell,#lobby .fight-stamina-cell{text-align:center;justify-items:center}
#lobby .fight-round-cell strong{font-size:13px;color:#f0f4fa}
#lobby .fight-points-cell strong{font-size:12px;color:#f3d27c}
#lobby .fight-stamina-cell strong{font-size:10px;color:#f0f4fa;white-space:nowrap}
#lobby .fights-empty-state{min-height:300px;display:grid;place-items:center;align-content:center;gap:5px;text-align:center;color:#8698b0}
#lobby .fights-empty-state strong{font-size:14px;color:#edf2f8}
#lobby .fights-empty-state span{font-size:9px;color:#8293aa}
#lobby .fights-empty-state.error strong{color:#f0959d}
#lobby .fights-pagination{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding-top:2px}
#lobby .fights-pagination button{width:30px;padding:0}
#lobby .fights-pagination strong{min-width:82px;text-align:center;font-size:7px;color:#899ab1}

#lobby .fights-sidebar{display:grid;align-content:start;gap:8px}
#lobby .fights-side-kicker{font-size:7px;letter-spacing:.13em;color:#8294ab;font-weight:950}
#lobby .fights-sidebar h4{margin:0;font-size:15px;color:#f3d27c;letter-spacing:.035em}
#lobby .fights-side-record{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:3px;align-items:center;padding:7px;border-radius:8px;background:rgba(255,255,255,.035)}
#lobby .fights-side-record span{font-size:6px;color:#76889d;font-weight:950}
#lobby .fights-side-record b{font-size:9px;color:#f2f5fa;text-align:center}
#lobby .fights-side-modes{display:grid;grid-template-columns:1fr 1fr;gap:5px}
#lobby .fights-side-modes>div{display:grid;gap:2px;padding:7px;border:1px solid rgba(255,255,255,.06);border-radius:8px;background:rgba(255,255,255,.022)}
#lobby .fights-side-modes span{font-size:5.8px;color:#778aa2;font-weight:950;letter-spacing:.06em}
#lobby .fights-side-modes strong{font-size:11px;color:#f0f4fa}
#lobby .fights-side-live{display:grid;grid-template-columns:1fr 1fr;gap:5px}
#lobby .fights-side-live>span{display:grid;gap:3px;padding:7px;border:1px solid rgba(238,190,80,.13);border-radius:8px;background:rgba(238,190,80,.035)}
#lobby .fights-side-live small{font-size:5.8px;color:#7f91a8;font-weight:950;letter-spacing:.06em}
#lobby .fights-side-live b{font-size:10px;color:#f3d27c}
#lobby .fights-side-note{font-size:6.5px;line-height:1.35;color:#74869a}

@media (max-width:1050px){
  #lobby .fights-ledger-head{display:none}
  #lobby .fight-history-row{grid-template-columns:110px minmax(140px,.8fr) minmax(210px,1.4fr) 52px 75px 86px;padding:7px 8px;gap:5px}
}
@media (max-width:760px){
  #lobby .fights-main{padding:9px;gap:8px;border-radius:12px}
  #lobby .fights-main-head{gap:8px}#lobby .fights-main-head h3{font-size:16px}#lobby .fights-main-head p{font-size:8px}#lobby .fights-main-count{font-size:6.5px;padding:4px 6px}
  #lobby .fights-toolbar{align-items:stretch;flex-direction:column}#lobby .fights-mode-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}#lobby .fights-mode-tab{padding:0 3px;font-size:6.5px}
  #lobby .fight-history-row{grid-template-columns:92px 1fr 58px;grid-template-areas:'result rival round' 'teams teams teams' 'points stamina stamina';gap:6px}
  #lobby .fight-result-cell{grid-area:result}#lobby .fight-rival-cell{grid-area:rival}#lobby .fight-teams-cell{grid-area:teams}#lobby .fight-round-cell{grid-area:round}#lobby .fight-points-cell{grid-area:points}#lobby .fight-stamina-cell{grid-area:stamina}
  #lobby .fight-teams-cell{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)}#lobby .fight-replay-btn{width:46px;min-height:26px}
  #lobby .fight-axie-mini{height:40px}#lobby .fight-axie-mini img{height:32px}
  #lobby .fights-history-list{min-height:300px}
}
@media (orientation:landscape) and (max-height:480px){
  #lobby .fights-main{padding:6px;gap:5px}#lobby .fights-main-head p{display:none}#lobby .fights-main-head h3{font-size:13px}
  #lobby .fights-toolbar{padding:4px}#lobby .fights-mode-tab,#lobby .fights-refresh-btn{min-height:22px;font-size:5.8px}
  #lobby .fight-history-row{padding:4px 6px;gap:4px;border-radius:7px}#lobby .fight-axie-mini{height:30px;border-radius:5px}#lobby .fight-axie-mini img{height:25px}#lobby .fight-axie-mini em{font-size:3.8px}#lobby .fight-teams-cell{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)}#lobby .fight-replay-btn{width:42px;min-height:22px;padding:2px 3px}#lobby .fight-replay-btn span{width:11px;height:11px;font-size:5.5px}#lobby .fight-replay-btn em{font-size:4.8px}
  #lobby .fight-history-row .fight-result-cell strong{font-size:8px}#lobby .fight-rival-cell strong{font-size:6.5px}#lobby .fight-rival-cell span{font-size:5.8px}
  #lobby .fights-history-list{min-height:240px}
}

/* ================================================================
   A016R40R96 · DURABLE FIGHT REPLAY
   Read-only replay viewer. It never mutates combat, PT, Stamina, AXP or SLP.
   ================================================================ */
#lobby .fight-replay-btn{
  width:50px;min-height:28px;padding:3px 4px;border:1px solid rgba(238,190,80,.40);border-radius:8px;
  display:grid;grid-template-columns:14px 1fr;align-items:center;justify-items:center;gap:2px;
  background:linear-gradient(180deg,rgba(238,190,80,.12),rgba(238,190,80,.05));color:#f2cb69;cursor:pointer;white-space:nowrap
}
#lobby .fight-replay-btn span{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#e6b944;color:#10141c;font-size:7px;line-height:1;font-weight:1000;padding-left:1px}
#lobby .fight-replay-btn em{font-style:normal;font-size:5.7px;line-height:1;font-weight:1000;letter-spacing:.045em;color:#f3cc6d}
#lobby .fight-replay-btn:hover{background:linear-gradient(180deg,rgba(238,190,80,.18),rgba(238,190,80,.08));border-color:rgba(238,190,80,.62)}
#lobby .fight-replay-btn:focus-visible{outline:2px solid rgba(238,190,80,.85);outline-offset:2px}
.fight-replay-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;background:rgba(2,7,15,.82);backdrop-filter:blur(6px)}
.fight-replay-modal.hidden{display:none!important}
.fight-replay-card{width:min(940px,96vw);max-height:92vh;overflow:auto;display:grid;gap:12px;padding:16px;border:1px solid #34445f;border-radius:18px;background:linear-gradient(180deg,#111a2b,#09111d);box-shadow:0 26px 70px rgba(0,0,0,.48)}
.fight-replay-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.07)}
.fight-replay-head h3{margin:2px 0 2px;font-size:22px;letter-spacing:.045em;color:#f3f5f8}
.fight-replay-head p{margin:0;color:#8799b2;font-size:10px}
.fight-replay-close{flex:0 0 34px;width:34px;height:34px;border:1px solid #3a4b66;border-radius:9px;background:#101a2a;color:#d8e0ec;font-size:20px;font-weight:900;cursor:pointer}
.fight-replay-status{min-height:24px;display:flex;align-items:center;justify-content:center;padding:5px 9px;border:1px solid rgba(238,190,80,.12);border-radius:8px;background:rgba(238,190,80,.035);color:#aebbd0;font-size:9px;font-weight:850;text-align:center}
.fight-replay-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);align-items:center;gap:14px;min-height:270px;padding:20px;border:1px solid rgba(122,151,193,.18);border-radius:15px;overflow:hidden;background:radial-gradient(ellipse at 50% 85%,rgba(158,101,39,.30),transparent 52%),linear-gradient(180deg,#111b2b 0%,#111725 55%,#201610 100%)}
.fight-replay-stage::after{content:"";position:absolute;left:8%;right:8%;bottom:34px;height:38px;border-radius:50%;background:rgba(217,145,59,.16);filter:blur(2px);pointer-events:none}
.fight-replay-vs{position:relative;z-index:2;text-align:center;font-size:28px;font-weight:1000;color:#d8c9aa;letter-spacing:.03em}
.fight-replay-fighter{position:relative;z-index:2;min-width:0;display:grid;grid-template-rows:auto 150px auto auto;align-items:center;justify-items:center;gap:5px;padding:11px;border:1px solid rgba(93,129,180,.20);border-radius:13px;background:rgba(6,14,25,.50);transition:transform .28s ease,filter .28s ease,border-color .28s ease}
.fight-replay-fighter.opponent{transform-origin:left center}.fight-replay-fighter.you{transform-origin:right center}
.fight-replay-fighter.is-attacking.you{transform:translateX(28px) scale(1.025)}
.fight-replay-fighter.is-attacking.opponent{transform:translateX(-28px) scale(1.025)}
.fight-replay-fighter.is-hit{animation:fightReplayHit .34s ease}
.fight-replay-fighter.is-ko{filter:grayscale(.82) brightness(.48);border-color:rgba(216,87,98,.35)}
@keyframes fightReplayHit{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
.fight-replay-side-label{font-size:7px;font-weight:950;letter-spacing:.13em;color:#7f93af}
.fight-replay-axie-img{width:100%;height:150px;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(0,0,0,.34))}
.fight-replay-fighter.opponent .fight-replay-axie-img{transform:scaleX(-1)}
.fight-replay-axie-name{max-width:100%;font-size:15px;font-weight:1000;color:#f2f4f8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fight-replay-card-line{min-height:27px;display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;padding:4px 8px;border:1px solid rgba(255,255,255,.07);border-radius:7px;background:rgba(255,255,255,.025);font-size:8px;color:#9fb0c7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fight-replay-card-line strong{color:#f1ca68;font-size:8px}
.fight-replay-life{display:flex;align-items:center;gap:5px;font-size:7px;color:#8497b1;font-weight:900}
.fight-replay-life-pips{display:flex;gap:3px}.fight-replay-life-pips i{width:8px;height:8px;border-radius:50%;border:1px solid #66758a;background:#172131}.fight-replay-life-pips i.on{border-color:#efbd4d;background:#f2c457;box-shadow:0 0 7px rgba(242,196,87,.28)}
.fight-replay-teams{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fight-replay-teams>div{display:grid;gap:5px;min-width:0}.fight-replay-teams>div>span{font-size:7px;color:#7f92aa;font-weight:950;letter-spacing:.1em}.fight-replay-team-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.fight-replay-team-member{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:5px;min-width:0;padding:4px 6px;border:1px solid rgba(255,255,255,.06);border-radius:8px;background:rgba(255,255,255,.018)}
.fight-replay-team-member img{width:42px;height:36px;object-fit:contain}.fight-replay-team-member b{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#dbe2ec}.fight-replay-team-member small{display:block;font-size:5.8px;color:#788ba4}
.fight-replay-team-member.ko{opacity:.38;filter:grayscale(.7)}
.fight-replay-timeline{display:flex;align-items:center;gap:5px;min-height:34px;padding:5px 7px;overflow-x:auto;border-top:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055)}
.fight-replay-round-dot{flex:0 0 auto;min-width:32px;height:24px;padding:0 7px;border:1px solid #34445f;border-radius:7px;background:#101929;color:#8799b1;font-size:7px;font-weight:950;cursor:pointer}.fight-replay-round-dot.active{border-color:#c49638;background:#2a2416;color:#f4ce6f}.fight-replay-round-dot.win{box-shadow:inset 0 -2px 0 rgba(91,211,148,.62)}.fight-replay-round-dot.loss{box-shadow:inset 0 -2px 0 rgba(226,96,108,.62)}
.fight-replay-controls{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}.fight-replay-controls button{min-height:34px;padding:0 13px;border:1px solid #3a4b66;border-radius:8px;background:#111b2c;color:#c8d2df;font-size:8px;font-weight:950;cursor:pointer}.fight-replay-controls button.primary{min-width:132px;border-color:#b88b32;background:linear-gradient(180deg,#eec65c,#c79732);color:#10131a}.fight-replay-controls button:disabled{opacity:.36;cursor:default}
@media (max-width:760px){.fight-replay-modal{padding:7px}.fight-replay-card{width:100%;max-height:96vh;padding:10px;gap:8px;border-radius:12px}.fight-replay-head h3{font-size:16px}.fight-replay-head p{font-size:7px}.fight-replay-stage{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:5px;min-height:205px;padding:10px}.fight-replay-vs{font-size:18px}.fight-replay-fighter{grid-template-rows:auto 105px auto auto;padding:6px}.fight-replay-axie-img{height:105px}.fight-replay-axie-name{font-size:10px}.fight-replay-teams{grid-template-columns:1fr}.fight-replay-team-member{grid-template-columns:34px minmax(0,1fr)}.fight-replay-team-member img{width:34px;height:29px}.fight-replay-controls button{min-height:32px;padding:0 8px;font-size:7px}}
@media (prefers-reduced-motion:reduce){.fight-replay-fighter{transition:none!important}.fight-replay-fighter.is-hit{animation:none!important}}
.fight-replay-head .fights-kicker{font-size:8px;letter-spacing:.16em;color:var(--gold);font-weight:950}

/* ================================================================
   A016R40R98 · REPLAY ENTRY 5A
   UI-only: replay CTA centered between both teams in fight history.
   ================================================================ */

/* ================================================================
   A016R40R99 · REPLAY ENTRY 5A · POSITION FIX
   UI-only: replay sits at the right edge of FECHA/RIVAL, immediately
   before the teams. Team/VS/round/PT/Stamina geometry is unchanged.
   ================================================================ */
#lobby .fight-rival-cell{
  grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:6px
}
#lobby .fight-rival-copy{display:grid;gap:3px;min-width:0}
#lobby .fight-rival-cell>.fight-replay-btn{justify-self:end;align-self:center}
@media (max-width:1050px){
  #lobby .fight-rival-cell{column-gap:4px}
  #lobby .fight-rival-cell>.fight-replay-btn{width:46px}
}
@media (max-width:760px){
  #lobby .fight-rival-cell{column-gap:4px}
  #lobby .fight-rival-cell>.fight-replay-btn{width:44px;min-height:24px;padding:2px 3px}
}


/* ========================================================================
   A016R40R100 · REPLAY 5B · COLISEO READ-ONLY
   Vista de archivo basada en la misma gramática visual del combate.
   No añade controles de ronda, no altera combate, ranking, Stamina ni ledger.
   ======================================================================== */
body.fight-replay-open{overflow:hidden!important}
body.fight-replay-open .fight-replay-modal{
  position:fixed!important;inset:0!important;z-index:1400!important;display:block!important;
  padding:clamp(5px,.7vw,10px)!important;background:#070b12!important;backdrop-filter:none!important;overflow:hidden!important;
}
body.fight-replay-open .fight-replay-modal.hidden{display:none!important}
body.fight-replay-open .fight-replay-coliseum{
  position:relative!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;
  margin:0!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
}
body.fight-replay-open .fight-replay-coliseum-head{position:relative!important;padding-right:48px!important}
body.fight-replay-open .fight-replay-coliseum-close{
  position:absolute!important;right:7px!important;top:50%!important;transform:translateY(-50%)!important;z-index:30!important;
  width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;
  display:grid!important;place-items:center!important;border-radius:8px!important;font-size:18px!important;line-height:1!important;
  background:#0c1524!important;border:1px solid #40516c!important;color:#e7edf7!important;
}
body.fight-replay-open .fight-replay-archive{display:flex!important;align-items:center!important;min-width:0!important;overflow:hidden!important}
body.fight-replay-open .fight-replay-archive-copy{display:grid!important;gap:2px!important;min-width:0!important}
body.fight-replay-open .fight-replay-archive-copy .fights-kicker{font-size:7px!important;letter-spacing:.15em!important;color:#e7bd57!important;font-weight:950!important}
body.fight-replay-open .fight-replay-archive-copy>strong{font-size:clamp(12px,1vw,15px)!important;line-height:1.05!important;color:#f3f5f8!important;letter-spacing:.045em!important}
body.fight-replay-open .fight-replay-archive-copy>small{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:7px!important;color:#8093ad!important}
body.fight-replay-open .fight-replay-round-head .fight-replay-status{
  border:0!important;background:none!important;padding:0!important;color:#91a5bf!important;font-size:6px!important;letter-spacing:.08em!important;font-weight:950!important;
}
body.fight-replay-open .fight-replay-round-head .fight-replay-status.ready{color:#e7c86e!important;background:none!important}
body.fight-replay-open .fight-replay-summary{grid-template-columns:1.15fr .72fr 1.25fr .88fr!important}
body.fight-replay-open .fight-replay-summary .result>strong.win{color:#62d7a0!important}
body.fight-replay-open .fight-replay-summary .result>strong.loss{color:#f27d8a!important}
body.fight-replay-open .fight-replay-summary .result>strong.draw{color:#e8c96f!important}
body.fight-replay-open .fight-replay-summary .read-only>strong{color:#9cc7ef!important}
body.fight-replay-open .fight-replay-landscape{min-height:0!important}
body.fight-replay-open .fight-replay-side .team-section{height:100%!important}
body.fight-replay-open .fight-replay-side-team .axie-card{cursor:default!important;pointer-events:none!important}
body.fight-replay-open .fight-replay-side-team .axie-card::after{content:none!important}
body.fight-replay-open .fight-replay-arena{isolation:isolate!important}
body.fight-replay-open .fight-replay-arena-fighter{z-index:5!important}
body.fight-replay-open .fight-replay-arena-fighter .fighter-token.has-image{width:clamp(116px,13vw,205px)!important;height:clamp(116px,13vw,205px)!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
body.fight-replay-open .fight-replay-arena-fighter .fighter-token.has-image .fighter-image{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 18px 16px rgba(0,0,0,.48))!important}
body.fight-replay-open .fight-replay-arena-fighter .fighter-token.fx-dead{opacity:.42!important;filter:grayscale(.72) saturate(.35)!important}
body.fight-replay-open .fight-replay-arena-fighter .fighter-name{font-size:clamp(12px,1vw,16px)!important;font-weight:950!important;color:#f3f5f8!important}
body.fight-replay-open .fight-replay-arena-fighter .fighter-card{max-width:220px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body.fight-replay-open .fight-replay-choice{top:clamp(10px,2vh,20px)!important;bottom:auto!important;z-index:8!important;pointer-events:none!important}
body.fight-replay-open .fight-replay-choice.arena-choice-rival{left:clamp(8px,2vw,28px)!important;right:auto!important}
body.fight-replay-open .fight-replay-choice.arena-choice-player{right:clamp(8px,2vw,28px)!important;left:auto!important}
body.fight-replay-open .fight-replay-choice-card{
  width:clamp(82px,8vw,112px)!important;height:clamp(70px,8vh,98px)!important;padding:7px!important;
  display:grid!important;grid-template-rows:auto 1fr auto!important;place-items:center!important;gap:2px!important;
  border:1px solid #44536a!important;border-radius:10px!important;background:linear-gradient(180deg,#111b2b,#0a111d)!important;
  box-shadow:0 10px 25px rgba(0,0,0,.25)!important;color:#e9eff7!important;text-align:center!important;
}
body.fight-replay-open .fight-replay-choice-card.attack{border-color:rgba(219,105,91,.7)!important;background:linear-gradient(180deg,rgba(83,31,27,.94),#11131b)!important}
body.fight-replay-open .fight-replay-choice-card.defense{border-color:rgba(83,152,216,.72)!important;background:linear-gradient(180deg,rgba(23,55,86,.94),#0e1420)!important}
body.fight-replay-open .fight-replay-choice-card.spell{border-color:rgba(156,108,213,.72)!important;background:linear-gradient(180deg,rgba(59,35,83,.94),#11101b)!important}
body.fight-replay-open .fight-replay-choice-card.empty{opacity:.62!important}
body.fight-replay-open .fight-replay-choice-card>strong{font-size:20px!important;line-height:1!important}
body.fight-replay-open .fight-replay-choice-card>b{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:8px!important;line-height:1!important;color:#f2f4f8!important}
body.fight-replay-open .fight-replay-choice-card>small{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:5.5px!important;line-height:1!important;color:#92a6bf!important;letter-spacing:.04em!important}
body.fight-replay-open .fight-replay-choice .arena-choice-label{font-size:6px!important;color:#8397b0!important;font-weight:950!important;letter-spacing:.1em!important}
body.fight-replay-open .fight-replay-readonly-ribbon{
  position:absolute!important;left:50%!important;bottom:8px!important;transform:translateX(-50%)!important;z-index:9!important;
  width:min(72%,640px)!important;padding:5px 9px!important;border:1px solid rgba(119,151,191,.18)!important;border-radius:7px!important;
  background:rgba(7,14,24,.76)!important;color:#8194ad!important;text-align:center!important;font-size:6px!important;font-weight:900!important;letter-spacing:.08em!important;
}
body.fight-replay-open .fight-replay-arena .battle-message{bottom:30px!important;z-index:9!important;font-size:clamp(11px,1vw,15px)!important;font-weight:1000!important;letter-spacing:.06em!important;color:#ead084!important}
body.fight-replay-open .fight-replay-arena .battle-message[data-result="win"]{color:#70dbaa!important}
body.fight-replay-open .fight-replay-arena .battle-message[data-result="loss"]{color:#f08a96!important}
body.fight-replay-open .fight-replay-exit-zone{align-self:end!important}
body.fight-replay-open .fight-replay-exit-zone .fight-btn{border-color:#9f7a31!important;background:linear-gradient(180deg,#d9b04f,#ad7e29)!important;color:#11151d!important}
body.fight-replay-open .fight-replay-panel-effect{display:grid!important;place-items:center!important;gap:6px!important;min-height:150px!important;text-align:center!important;color:#d9c7ef!important}
body.fight-replay-open .fight-replay-panel-effect>span{font-size:36px!important}.fight-replay-panel-effect>strong{font-size:12px!important}.fight-replay-panel-effect>small{font-size:7px!important;color:#8496ad!important}

@media (min-width:1000px){
  body.fight-replay-open .fight-replay-landscape{grid-template-columns:clamp(205px,18vw,285px) minmax(420px,1fr) clamp(205px,18vw,285px)!important}
  body.fight-replay-open .fight-replay-side.player-side{grid-template-rows:minmax(0,1fr) auto!important}
  body.fight-replay-open .fight-replay-side .side-team{grid-template-rows:repeat(3,minmax(0,1fr))!important}
}
@media (min-width:600px) and (max-width:999px){
  body.fight-replay-open .fight-replay-landscape{
    grid-template-columns:1fr 1fr!important;grid-template-rows:auto minmax(220px,1fr) auto!important;
    grid-template-areas:"opp own" "arena arena" "exit exit"!important;overflow:auto!important;
  }
  body.fight-replay-open .fight-replay-side.opponent-side,body.fight-replay-open .fight-replay-side.player-side{display:contents!important}
  body.fight-replay-open .fight-replay-side.opponent-side .team-section{grid-area:opp!important}
  body.fight-replay-open .fight-replay-side.player-side .team-section{grid-area:own!important}
  body.fight-replay-open .fight-replay-center{grid-area:arena!important}
  body.fight-replay-open .fight-replay-exit-zone{grid-area:exit!important;display:grid!important;grid-template-columns:1fr minmax(210px,320px) 1fr!important}
}
@media (max-width:599px){
  body.fight-replay-open{overflow:hidden!important}
  body.fight-replay-open .app{height:100vh!important;height:100dvh!important;min-height:0!important;overflow:hidden!important}
  body.fight-replay-open .fight-replay-modal{padding:3px!important;overflow:auto!important}
  body.fight-replay-open .fight-replay-coliseum{height:auto!important;min-height:calc(100dvh - 6px)!important;overflow:visible!important}
  body.fight-replay-open .fight-replay-coliseum-head{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"archive round"!important;padding-right:38px!important}
  body.fight-replay-open .fight-replay-archive{grid-area:archive!important}
  body.fight-replay-open .fight-replay-round-head{grid-area:round!important;border-right:0!important}
  body.fight-replay-open .fight-replay-summary{display:none!important}
  body.fight-replay-open .fight-replay-archive-copy>small{display:none!important}
  body.fight-replay-open .fight-replay-landscape{
    display:grid!important;height:auto!important;overflow:visible!important;
    grid-template-columns:1fr 1fr!important;grid-template-areas:"arena arena" "opp own" "exit exit"!important;gap:4px!important;
  }
  body.fight-replay-open .fight-replay-side.opponent-side,body.fight-replay-open .fight-replay-side.player-side{display:contents!important}
  body.fight-replay-open .fight-replay-side.opponent-side .team-section{grid-area:opp!important}
  body.fight-replay-open .fight-replay-side.player-side .team-section{grid-area:own!important}
  body.fight-replay-open .fight-replay-center{grid-area:arena!important}
  body.fight-replay-open .fight-replay-exit-zone{grid-area:exit!important}
  body.fight-replay-open .fight-replay-side-team{grid-template-columns:1fr!important;grid-template-rows:repeat(3,70px)!important}
  body.fight-replay-open .fight-replay-side-team .axie-card{height:70px!important;min-height:70px!important}
  body.fight-replay-open .fight-replay-arena{min-height:250px!important;padding-bottom:48px!important}
  body.fight-replay-open .fight-replay-arena-fighter .fighter-token.has-image{width:92px!important;height:92px!important}
  body.fight-replay-open .fight-replay-choice-card{width:70px!important;height:62px!important;padding:4px!important}
  body.fight-replay-open .fight-replay-choice-card>strong{font-size:16px!important}
  body.fight-replay-open .fight-replay-choice-card>b{font-size:6.5px!important}
  body.fight-replay-open .fight-replay-choice-card>small{font-size:4.6px!important}
  body.fight-replay-open .fight-replay-readonly-ribbon{width:90%!important;font-size:5px!important;padding:4px!important}
  body.fight-replay-open .fight-replay-arena .battle-message{bottom:29px!important;font-size:9px!important}
}


/* ========================================================================
   A016R40R101 · REPLAY 5C · ROUND-BY-ROUND PLAYER
   Presentation-only playback over the existing durable replay snapshot.
   It never writes combat, matchmaking, ranking, Stamina, AXP, SLP or ledger.
   ======================================================================== */
body.fight-replay-open .fight-replay-control-zone{
  display:grid!important;gap:7px!important;align-content:end!important;padding-top:8px!important;
}
body.fight-replay-open .fight-replay-transport{
  display:grid!important;grid-template-columns:minmax(62px,.72fr) minmax(108px,1.45fr) minmax(62px,.72fr)!important;gap:5px!important;
}
body.fight-replay-open .fight-replay-transport button{
  min-height:33px!important;padding:0 7px!important;border-radius:8px!important;border:1px solid #40516b!important;
  background:linear-gradient(180deg,#111c2d,#0b1422)!important;color:#cdd7e5!important;font-size:7px!important;font-weight:1000!important;
  letter-spacing:.035em!important;cursor:pointer!important;white-space:nowrap!important;
}
body.fight-replay-open .fight-replay-transport button:hover:not(:disabled){border-color:#7890b1!important;background:linear-gradient(180deg,#17253a,#0e1929)!important}
body.fight-replay-open .fight-replay-transport button:disabled{opacity:.33!important;cursor:default!important}
body.fight-replay-open .fight-replay-transport .fight-replay-play{
  border-color:#a98232!important;background:linear-gradient(180deg,#e1b64f,#b8842b)!important;color:#11151c!important;font-size:7.5px!important;
}
body.fight-replay-open .fight-replay-coliseum-timeline{
  display:flex!important;align-items:center!important;gap:4px!important;min-height:28px!important;overflow-x:auto!important;padding:3px!important;
  scrollbar-width:thin!important;border-top:1px solid rgba(255,255,255,.055)!important;border-bottom:1px solid rgba(255,255,255,.055)!important;
}
body.fight-replay-open .fight-replay-coliseum-timeline .fight-replay-round-dot{
  flex:0 0 auto!important;min-width:30px!important;height:22px!important;padding:0 6px!important;border-radius:6px!important;
  border:1px solid #34445f!important;background:#0f1828!important;color:#8497b0!important;font-size:6.4px!important;font-weight:1000!important;cursor:pointer!important;
}
body.fight-replay-open .fight-replay-coliseum-timeline .fight-replay-round-dot.active{border-color:#c99b3c!important;background:#2a2315!important;color:#f0cb6c!important;box-shadow:0 0 0 1px rgba(229,185,76,.14)!important}
body.fight-replay-open .fight-replay-coliseum-timeline .fight-replay-round-dot.win{box-shadow:inset 0 -2px 0 rgba(91,211,148,.65)!important}
body.fight-replay-open .fight-replay-coliseum-timeline .fight-replay-round-dot.loss{box-shadow:inset 0 -2px 0 rgba(226,96,108,.66)!important}
body.fight-replay-open .fight-replay-coliseum-timeline .fight-replay-round-dot.draw{box-shadow:inset 0 -2px 0 rgba(231,194,91,.62)!important}
body.fight-replay-open .fight-replay-arena-fighter{position:relative!important;transition:transform .26s ease,filter .26s ease!important}
body.fight-replay-open .fight-replay-arena-fighter.is-attacking#fightReplayYou{transform:translateX(-clamp(18px,3vw,48px)) scale(1.035)!important}
body.fight-replay-open .fight-replay-arena-fighter.is-attacking#fightReplayOpponent{transform:translateX(clamp(18px,3vw,48px)) scale(1.035)!important}
body.fight-replay-open .fight-replay-arena-fighter.is-hit{animation:fightReplay5cHit .36s ease!important}
body.fight-replay-open .fight-replay-arena-fighter.is-hit::after{
  content:attr(data-replay-damage)!important;position:absolute!important;left:50%!important;top:32%!important;z-index:40!important;transform:translate(-50%,-50%)!important;
  min-width:30px!important;padding:3px 7px!important;border-radius:999px!important;background:rgba(97,19,27,.92)!important;border:1px solid rgba(238,105,117,.75)!important;
  color:#ffd7db!important;font-size:13px!important;font-weight:1000!important;line-height:1!important;text-align:center!important;box-shadow:0 5px 16px rgba(0,0,0,.34)!important;
}
@keyframes fightReplay5cHit{0%,100%{filter:none}28%{filter:brightness(1.55)}52%{filter:brightness(.72)}74%{filter:brightness(1.18)}}
body.fight-replay-open .fight-replay-choice:empty{display:none!important}
body.fight-replay-open .fight-replay-readonly-ribbon{color:#93b9dc!important;border-color:rgba(100,157,207,.20)!important}
@media (max-width:920px){
  body.fight-replay-open .fight-replay-transport{grid-template-columns:48px 1fr 48px!important}
  body.fight-replay-open .fight-replay-transport .fight-replay-step span{display:none!important}
}
@media (max-width:599px){
  body.fight-replay-open .fight-replay-control-zone{gap:5px!important}
  body.fight-replay-open .fight-replay-transport button{min-height:30px!important;font-size:6.2px!important;padding:0 4px!important}
  body.fight-replay-open .fight-replay-coliseum-timeline{min-height:25px!important}
  body.fight-replay-open .fight-replay-coliseum-timeline .fight-replay-round-dot{min-width:27px!important;height:20px!important;font-size:5.8px!important}
  body.fight-replay-open .fight-replay-arena-fighter.is-hit::after{top:27%!important;font-size:10px!important;padding:2px 5px!important}
}
@media (prefers-reduced-motion:reduce){
  body.fight-replay-open .fight-replay-arena-fighter{transition:none!important}
  body.fight-replay-open .fight-replay-arena-fighter.is-hit{animation:none!important}
}


/* ========================================================================
   A016R40R102 · REPLAY 5C-R1 · ACTOR BASELINE + READABLE PACING
   Replay-only correction. Both arena actors share the same combat baseline.
   No live-combat geometry or competitive logic is changed.
   ======================================================================== */
body.fight-replay-open .fight-replay-arena{
  position:relative!important;
}
body.fight-replay-open #fightReplayOpponent,
body.fight-replay-open #fightReplayYou{
  position:absolute!important;
  top:auto!important;
  bottom:11.5%!important;
  width:38%!important;
  max-width:430px!important;
  margin:0!important;
  align-self:auto!important;
  justify-self:auto!important;
  z-index:6!important;
}
body.fight-replay-open #fightReplayOpponent{
  left:5.5%!important;
  right:auto!important;
}
body.fight-replay-open #fightReplayYou{
  right:5.5%!important;
  left:auto!important;
}
body.fight-replay-open .fight-replay-arena>.vs{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:27%!important;
  transform:translateX(-50%)!important;
  z-index:5!important;
}
body.fight-replay-open .fight-replay-arena-fighter{
  transition:transform .62s cubic-bezier(.22,.72,.2,1),filter .54s ease!important;
}
body.fight-replay-open .fight-replay-arena-fighter.is-hit{
  animation:fightReplay5cR1Hit .72s ease!important;
}
@keyframes fightReplay5cR1Hit{
  0%,100%{filter:none}
  20%{filter:brightness(1.55)}
  45%{filter:brightness(.72)}
  70%{filter:brightness(1.2)}
}
@media (max-width:599px){
  body.fight-replay-open #fightReplayOpponent,
  body.fight-replay-open #fightReplayYou{
    bottom:12%!important;
    width:42%!important;
  }
  body.fight-replay-open #fightReplayOpponent{left:1.5%!important}
  body.fight-replay-open #fightReplayYou{right:1.5%!important}
  body.fight-replay-open .fight-replay-arena>.vs{bottom:28%!important}
}
@media (prefers-reduced-motion:reduce){
  body.fight-replay-open .fight-replay-arena-fighter{transition:none!important}
  body.fight-replay-open .fight-replay-arena-fighter.is-hit{animation:none!important}
}

/* ========================================================================
   A016R40R103 · REPLAY 5C-R2 · REAL BATTLE + CANONICAL HAND TELEMETRY
   The replay reuses the live fighter renderer/Mixer actions and the canonical
   card renderer. Detailed telemetry is read-only and retained server-side 15d.
   ======================================================================== */
/* Canonical facing: original Axie art faces right. Rival on the left faces
   center; local player on the right is mirrored toward center. */
body.fight-replay-open #fightReplayOpponent .battle-fighter-preview img,
body.fight-replay-open #fightReplayOpponent .battle-fighter-fallback img,
body.fight-replay-open #fightReplayOpponent .fighter-image{
  transform:scaleX(1)!important;transform-origin:center center!important;
}
body.fight-replay-open #fightReplayYou .battle-fighter-preview img,
body.fight-replay-open #fightReplayYou .battle-fighter-fallback img,
body.fight-replay-open #fightReplayYou .fighter-image{
  transform:scaleX(-1)!important;transform-origin:center center!important;
}
/* The actor itself no longer carries a duplicate invented card label. */
body.fight-replay-open .fight-replay-arena-fighter .fighter-card{display:none!important}

/* Transport CTA: preserve the gold button, but hover text must stay readable. */
body.fight-replay-open .fight-replay-transport .fight-replay-play:hover:not(:disabled){
  color:#fff!important;border-color:#f0cf78!important;
  background:linear-gradient(180deg,#b98d31,#775a20)!important;
}

/* Per-round hands occupy the same upper-left / upper-right arena card zones.
   Every card keeps the exact live .arena-card-item + .card-btn canonical DOM. */
body.fight-replay-open .fight-replay-choice{
  top:clamp(18px,2.4vh,28px)!important;max-width:none!important;width:min(43%,520px)!important;
  gap:5px!important;align-items:flex-start!important;pointer-events:none!important;z-index:28!important;
}
body.fight-replay-open .fight-replay-choice.arena-choice-rival{left:clamp(6px,1.1vw,16px)!important}
body.fight-replay-open .fight-replay-choice.arena-choice-player{right:clamp(6px,1.1vw,16px)!important}
body.fight-replay-open .fight-replay-choice .arena-choice-label{
  flex:0 0 auto!important;margin-top:2px!important;font-size:5.8px!important;line-height:1.05!important;
  color:#8fa5be!important;text-shadow:0 2px 7px #000!important;white-space:nowrap!important;
}
body.fight-replay-open .fight-replay-hand-fan{
  display:flex!important;align-items:flex-start!important;gap:4px!important;min-width:0!important;max-width:100%!important;
  overflow:visible!important;isolation:isolate!important;
}
body.fight-replay-open .arena-choice-rival .fight-replay-hand-fan{order:1!important;justify-content:flex-start!important}
body.fight-replay-open .arena-choice-rival .arena-choice-label{order:2!important;text-align:left!important}
body.fight-replay-open .arena-choice-player .arena-choice-label{order:1!important;text-align:right!important}
body.fight-replay-open .arena-choice-player .fight-replay-hand-fan{order:2!important;justify-content:flex-end!important}
body.fight-replay-open .fight-replay-hand-card{
  position:relative!important;flex:0 1 clamp(54px,5.4vw,86px)!important;width:clamp(54px,5.4vw,86px)!important;
  min-width:42px!important;height:clamp(72px,8.8vh,100px)!important;transform-origin:50% 100%!important;
  transition:transform .38s cubic-bezier(.22,.72,.2,1),filter .28s ease,opacity .28s ease!important;
}
body.fight-replay-open .fight-replay-hand-card .arena-card-item{height:100%!important;width:100%!important;min-width:0!important}
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-btn{
  pointer-events:none!important;cursor:default!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;
  padding:4px 5px 4px!important;border-radius:9px!important;grid-template-rows:17px minmax(0,1fr) 11px!important;gap:1px!important;
}
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-head-r15r4{min-height:16px!important}
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-role-icon{width:14px!important;height:14px!important;font-size:8px!important;border-radius:4px!important}
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-role-label{font-size:6.2px!important}
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-real-figure{height:44px!important;min-height:0!important;border-radius:6px!important}
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-power{width:21px!important;height:21px!important;font-size:10px!important}
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-foot-r15r4,
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-signature{font-size:5.8px!important;line-height:1!important}
/* Played card rises above its hand, exactly where the user expects to read it. */
body.fight-replay-open .fight-replay-hand-card.played{
  transform:translateY(-15px) scale(1.08)!important;z-index:35!important;filter:brightness(1.12)!important;
}
body.fight-replay-open .fight-replay-hand-card.played .card-btn{box-shadow:0 12px 26px rgba(0,0,0,.55),0 0 0 2px rgba(243,203,97,.34)!important}
body.fight-replay-open .fight-replay-hand-card.rotated-in:not(.played){animation:fightReplayCardRotationR103 .82s cubic-bezier(.18,.78,.2,1) both!important}
@keyframes fightReplayCardRotationR103{
  0%{opacity:0;transform:translateY(-13px) scale(.82)}
  62%{opacity:1;transform:translateY(3px) scale(1.025)}
  100%{opacity:1;transform:none}
}
body.fight-replay-open .fight-replay-hand-empty{
  min-width:78px!important;min-height:52px!important;padding:7px!important;display:grid!important;place-items:center!important;gap:3px!important;
  border:1px solid rgba(93,119,153,.42)!important;border-radius:9px!important;background:rgba(9,17,29,.82)!important;color:#93a5ba!important;text-align:center!important;
}
body.fight-replay-open .fight-replay-hand-empty strong{font-size:16px!important;line-height:1!important}
body.fight-replay-open .fight-replay-hand-empty small{font-size:5.5px!important;font-weight:900!important;letter-spacing:.06em!important}
body.fight-replay-open .fight-replay-hand-empty.spell{color:#cfb4eb!important;border-color:rgba(180,124,229,.44)!important}

/* Existing live impact flash is reused inside the replay arena, never the hidden live arena. */
body.fight-replay-open #fightReplayStage .combat-impact-flash{z-index:45!important}

@media (max-width:920px){
  body.fight-replay-open .fight-replay-choice{width:47%!important}
  body.fight-replay-open .fight-replay-hand-card{flex-basis:54px!important;width:54px!important;height:72px!important;min-width:37px!important}
  body.fight-replay-open .fight-replay-hand-fan{gap:2px!important}
  body.fight-replay-open .fight-replay-choice .arena-choice-label{font-size:5px!important}
}
@media (max-width:599px){
  body.fight-replay-open .fight-replay-choice{width:49%!important;top:15px!important}
  body.fight-replay-open .fight-replay-hand-card{flex-basis:43px!important;width:43px!important;min-width:31px!important;height:58px!important}
  body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-btn{padding:2px!important;grid-template-rows:13px minmax(0,1fr) 8px!important}
  body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-real-figure{height:30px!important}
  body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-role-label{font-size:4.7px!important}
  body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-role-icon{width:11px!important;height:11px!important;font-size:6px!important}
  body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-power{width:16px!important;height:16px!important;font-size:7px!important}
  body.fight-replay-open .fight-replay-hand-card.played{transform:translateY(-10px) scale(1.06)!important}
  body.fight-replay-open .fight-replay-choice .arena-choice-label{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  body.fight-replay-open .fight-replay-hand-card.rotated-in:not(.played){animation:none!important}
}


/* ========================================================================
   A016R40R105 · REPLAY 5C-R4 · FACING FIX + VISIBLE HANDS LAYOUT
   Scope: replay-only presentation repair.
   - Fix rival/player facing so both Axies look toward the arena center.
   - Keep the canonical gold replay CTA hover text readable.
   - Keep per-round hands inside the arena, fully visible, using the real card DOM.
   No combat, settlement, ranking, stamina, ledger or telemetry logic changes.
   ======================================================================== */
/* Rival at the left must look toward the arena center; local player at the right
   must also look toward the center. Replay still reuses the same Axie artwork. */
body.fight-replay-open #fightReplayOpponent .battle-fighter-preview img,
body.fight-replay-open #fightReplayOpponent .battle-fighter-fallback img,
body.fight-replay-open #fightReplayOpponent .fighter-image{
  transform:scaleX(-1)!important;transform-origin:center center!important;
}
body.fight-replay-open #fightReplayYou .battle-fighter-preview img,
body.fight-replay-open #fightReplayYou .battle-fighter-fallback img,
body.fight-replay-open #fightReplayYou .fighter-image{
  transform:scaleX(1)!important;transform-origin:center center!important;
}
/* REPRODUCIR must remain readable on hover. */
body.fight-replay-open .fight-replay-transport .fight-replay-play:hover:not(:disabled){
  color:#fff!important;border-color:#f0cf78!important;
  background:linear-gradient(180deg,#b98d31,#775a20)!important;
}
/* The replay hands reuse .arena-card-dock card DOM, but must not inherit the live
   absolute dock positioning that pushes them upward and clips them. */
body.fight-replay-open .fight-replay-choice{
  top:clamp(24px,3.3vh,38px)!important;
  width:min(44%,540px)!important;
  max-width:none!important;
  overflow:visible!important;
  align-items:flex-start!important;
  gap:6px!important;
  z-index:28!important;
}
body.fight-replay-open .fight-replay-choice.arena-choice-rival{left:clamp(10px,1.4vw,22px)!important;right:auto!important}
body.fight-replay-open .fight-replay-choice.arena-choice-player{right:clamp(10px,1.4vw,22px)!important;left:auto!important}
body.fight-replay-open .fight-replay-choice .arena-choice-label{
  position:relative!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  margin-top:4px!important;
  color:#8fa5be!important;
  white-space:nowrap!important;
}
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock{
  position:relative!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  display:flex!important;
  grid-template-columns:none!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:4px!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  isolation:isolate!important;
  transform:none!important;
  pointer-events:none!important;
  z-index:1!important;
}
body.fight-replay-open .arena-choice-rival .fight-replay-hand-fan.arena-card-dock{justify-content:flex-start!important}
body.fight-replay-open .arena-choice-player .fight-replay-hand-fan.arena-card-dock{justify-content:flex-end!important}
body.fight-replay-open .fight-replay-hand-card{
  flex:0 1 clamp(54px,5.2vw,84px)!important;
  width:clamp(54px,5.2vw,84px)!important;
  min-width:42px!important;
  height:clamp(72px,8.8vh,100px)!important;
}
body.fight-replay-open .fight-replay-hand-card.played{
  transform:translateY(-14px) scale(1.08)!important;
  z-index:35!important;
}
@media (max-width:920px){
  body.fight-replay-open .fight-replay-choice{width:48%!important;top:20px!important}
  body.fight-replay-open .fight-replay-hand-fan.arena-card-dock{gap:2px!important}
  body.fight-replay-open .fight-replay-hand-card{flex-basis:54px!important;width:54px!important;height:72px!important;min-width:37px!important}
}
@media (max-width:599px){
  body.fight-replay-open .fight-replay-choice{width:49%!important;top:15px!important}
  body.fight-replay-open .fight-replay-hand-card{flex-basis:43px!important;width:43px!important;min-width:31px!important;height:58px!important}
  body.fight-replay-open .fight-replay-hand-card.played{transform:translateY(-10px) scale(1.06)!important}
  body.fight-replay-open .fight-replay-choice .arena-choice-label{display:none!important}
}


/* ========================================================================
   A016R40R106 · REPLAY 5C-R5 · REAL ARENA ACTORS + SIDE HANDS
   Replay-only rendering correction.
   1) The replay arena is now hydrated by the SAME shared Pixi/Spine arena
      actor system used by live combat, so facing/strike/impact are not faked.
   2) Full certified hands move from the top edge into left/right arena zones.
      The played card rises from its hand; next round renders the rotated hand.
   ======================================================================== */
/* Fallback orientation mirrors the LIVE battle contract. When Pixi/Spine is
   ready the fallback disappears and the shared arena actor owns orientation. */
body.fight-replay-open #fightReplayOpponent .battle-arena-fallback,
body.fight-replay-open #fightReplayOpponent .battle-fighter-fallback img,
body.fight-replay-open #fightReplayOpponent .fighter-image{
  transform:translate(-50%,-50%) scaleX(1)!important;
  transform-origin:center center!important;
}
body.fight-replay-open #fightReplayYou .battle-arena-fallback,
body.fight-replay-open #fightReplayYou .battle-fighter-fallback img,
body.fight-replay-open #fightReplayYou .fighter-image{
  transform:translate(-50%,-50%) scaleX(-1)!important;
  transform-origin:center center!important;
}
/* Non-absolute image fallbacks must not receive the translate component. */
body.fight-replay-open #fightReplayOpponent .battle-fighter-fallback img,
body.fight-replay-open #fightReplayOpponent .fighter-image{
  transform:scaleX(1)!important;
}
body.fight-replay-open #fightReplayYou .battle-fighter-fallback img,
body.fight-replay-open #fightReplayYou .fighter-image{
  transform:scaleX(-1)!important;
}
/* Certified hands: no longer attached to the upper edge. They sit in the
   left/right tactical zones of the arena, clear of the round header. */
body.fight-replay-open .fight-replay-choice{
  top:35%!important;
  bottom:auto!important;
  width:min(35%,360px)!important;
  max-width:360px!important;
  overflow:visible!important;
  align-items:flex-start!important;
  gap:5px!important;
  z-index:28!important;
  transform:none!important;
}
body.fight-replay-open .fight-replay-choice.arena-choice-rival{
  left:clamp(12px,1.4vw,24px)!important;
  right:auto!important;
  justify-content:flex-start!important;
}
body.fight-replay-open .fight-replay-choice.arena-choice-player{
  right:clamp(12px,1.4vw,24px)!important;
  left:auto!important;
  justify-content:flex-end!important;
}
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  grid-template-columns:none!important;
  align-items:flex-start!important;
  gap:4px!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
}
body.fight-replay-open .fight-replay-hand-card{
  flex:0 0 clamp(58px,4.8vw,78px)!important;
  width:clamp(58px,4.8vw,78px)!important;
  min-width:58px!important;
  height:clamp(78px,8.4vh,96px)!important;
}
body.fight-replay-open .fight-replay-hand-card.played{
  transform:translateY(-20px) scale(1.08)!important;
  z-index:35!important;
}
body.fight-replay-open .fight-replay-choice .arena-choice-label{
  margin-top:3px!important;
  color:#9db0c8!important;
  font-size:5.8px!important;
  white-space:nowrap!important;
}
/* Keep CTA readable. */
body.fight-replay-open .fight-replay-transport .fight-replay-play:hover:not(:disabled){
  color:#fff!important;
  border-color:#f0cf78!important;
  background:linear-gradient(180deg,#b98d31,#775a20)!important;
}
@media (max-width:920px){
  body.fight-replay-open .fight-replay-choice{top:31%!important;width:41%!important;max-width:none!important}
  body.fight-replay-open .fight-replay-hand-card{flex-basis:52px!important;width:52px!important;min-width:44px!important;height:70px!important}
  body.fight-replay-open .fight-replay-hand-card.played{transform:translateY(-15px) scale(1.07)!important}
}
@media (max-width:599px){
  body.fight-replay-open .fight-replay-choice{top:26%!important;width:48%!important}
  body.fight-replay-open .fight-replay-hand-card{flex-basis:42px!important;width:42px!important;min-width:34px!important;height:57px!important}
  body.fight-replay-open .fight-replay-hand-card.played{transform:translateY(-10px) scale(1.06)!important}
}


/* ========================================================================
   A016R40R107 · REPLAY 5C-R6 · PORTRAIT CARDS + LOWER ARENA HANDS
   Replay-only visual correction requested after R106.
   - Keep the already-correct Axie facing/arena actors from R106 untouched.
   - Restore the canonical tall/portrait card silhouette (approx. 0.60 ratio).
   - Move both certified hands to the LOWER left/right arena zones, matching
     the live battle card area instead of floating around arena mid-height.
   - The played card still rises from the hand; rotation data is unchanged.
   ======================================================================== */
body.fight-replay-open .fight-replay-choice{
  top:auto!important;
  bottom:clamp(46px,6.2vh,66px)!important;
  width:min(31%,330px)!important;
  max-width:330px!important;
  min-width:0!important;
  overflow:visible!important;
  align-items:flex-end!important;
  gap:4px!important;
  z-index:28!important;
  transform:none!important;
}
body.fight-replay-open .fight-replay-choice.arena-choice-rival{
  left:clamp(14px,1.6vw,26px)!important;
  right:auto!important;
  justify-content:flex-start!important;
}
body.fight-replay-open .fight-replay-choice.arena-choice-player{
  right:clamp(14px,1.6vw,26px)!important;
  left:auto!important;
  justify-content:flex-end!important;
}
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  align-items:flex-end!important;
  gap:4px!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  transform:none!important;
}
body.fight-replay-open .arena-choice-rival .fight-replay-hand-fan.arena-card-dock{justify-content:flex-start!important}
body.fight-replay-open .arena-choice-player .fight-replay-hand-fan.arena-card-dock{justify-content:flex-end!important}
/* Canonical card silhouette: tall card, never square. */
body.fight-replay-open .fight-replay-hand-card{
  flex:0 0 clamp(54px,4.15vw,70px)!important;
  width:clamp(54px,4.15vw,70px)!important;
  min-width:54px!important;
  height:auto!important;
  aspect-ratio:.60!important;
}
body.fight-replay-open .fight-replay-hand-card .arena-card-item,
body.fight-replay-open .fight-replay-hand-fan.arena-card-dock .card-btn{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}
body.fight-replay-open .fight-replay-hand-card.played{
  transform:translateY(-18px) scale(1.07)!important;
  z-index:35!important;
}
/* Labels belong to the lower card dock, not to the middle of the arena. */
body.fight-replay-open .fight-replay-choice .arena-choice-label{
  position:absolute!important;
  top:-13px!important;
  bottom:auto!important;
  margin:0!important;
  font-size:5.6px!important;
  line-height:1!important;
  color:#9db0c8!important;
  white-space:nowrap!important;
}
body.fight-replay-open .fight-replay-choice.arena-choice-rival .arena-choice-label{left:0!important;right:auto!important;text-align:left!important}
body.fight-replay-open .fight-replay-choice.arena-choice-player .arena-choice-label{right:0!important;left:auto!important;text-align:right!important}
@media (max-width:920px){
  body.fight-replay-open .fight-replay-choice{top:auto!important;bottom:43px!important;width:36%!important;max-width:280px!important}
  body.fight-replay-open .fight-replay-hand-card{flex-basis:48px!important;width:48px!important;min-width:40px!important;height:auto!important;aspect-ratio:.60!important}
  body.fight-replay-open .fight-replay-hand-card.played{transform:translateY(-14px) scale(1.06)!important}
}
@media (max-width:599px){
  body.fight-replay-open .fight-replay-choice{top:auto!important;bottom:39px!important;width:45%!important;max-width:none!important}
  body.fight-replay-open .fight-replay-hand-card{flex-basis:38px!important;width:38px!important;min-width:32px!important;height:auto!important;aspect-ratio:.60!important}
  body.fight-replay-open .fight-replay-hand-card.played{transform:translateY(-9px) scale(1.05)!important}
  body.fight-replay-open .fight-replay-choice .arena-choice-label{display:none!important}
}


/* ========================================================================
   A016R40R108 · REPLAY 5C-R7 · ACTORS LIFTED ABOVE LOWER HANDS
   Replay-only geometry refinement after R107.
   The Axies keep the validated orientation and animations, but move slightly
   upward so the lower certified card hands never compete with their bodies.
   ======================================================================== */
body.fight-replay-open #fightReplayOpponent,
body.fight-replay-open #fightReplayYou{
  bottom:18%!important;
}
body.fight-replay-open .fight-replay-arena>.vs{
  bottom:31%!important;
}
@media (max-width:920px){
  body.fight-replay-open #fightReplayOpponent,
  body.fight-replay-open #fightReplayYou{bottom:17%!important}
  body.fight-replay-open .fight-replay-arena>.vs{bottom:30%!important}
}
@media (max-width:599px){
  body.fight-replay-open #fightReplayOpponent,
  body.fight-replay-open #fightReplayYou{bottom:16.5%!important}
  body.fight-replay-open .fight-replay-arena>.vs{bottom:30%!important}
}


/* ========================================================================
   A016R40R109 · COMBAT 6A-R1 · 3-2-1 START + VISUAL HP ON IMPACT
   Presentation-only staging. The engine may resolve immediately, but the UI
   keeps pre-combat life visible until the actual cinematic impact occurs.
   ======================================================================== */
body.battle-mode .battle-fight-countdown{
  position:absolute!important;inset:0!important;z-index:72!important;
  display:grid!important;place-items:center!important;pointer-events:none!important;
  background:radial-gradient(circle at 50% 53%,rgba(8,12,20,.12) 0,rgba(8,12,20,.04) 28%,transparent 58%)!important;
}
body.battle-mode .battle-fight-countdown.hidden{display:none!important}
body.battle-mode .battle-fight-countdown strong{
  width:clamp(92px,9vw,150px)!important;height:clamp(92px,9vw,150px)!important;
  display:grid!important;place-items:center!important;border-radius:50%!important;
  border:3px solid rgba(242,199,91,.84)!important;
  background:radial-gradient(circle,#2b2416 0,#171714 58%,rgba(7,12,19,.96) 100%)!important;
  color:#fff2bd!important;font-size:clamp(58px,6.8vw,108px)!important;font-weight:1000!important;line-height:1!important;
  text-shadow:0 4px 0 #5c4215,0 0 28px rgba(242,199,91,.42)!important;
  box-shadow:0 0 0 8px rgba(226,177,63,.08),0 18px 60px rgba(0,0,0,.55),inset 0 0 25px rgba(237,192,73,.13)!important;
}
body.battle-mode .battle-fight-countdown.pulse strong{animation:battleFightCountdownR109 .68s cubic-bezier(.16,.82,.22,1) both!important}
@keyframes battleFightCountdownR109{
  0%{opacity:0;transform:scale(.58)}
  18%{opacity:1;transform:scale(1.1)}
  62%{opacity:1;transform:scale(1)}
  100%{opacity:.18;transform:scale(.9)}
}
@media (max-width:599px){
  body.battle-mode .battle-fight-countdown strong{width:82px!important;height:82px!important;font-size:54px!important;border-width:2px!important}
}
@media (prefers-reduced-motion:reduce){
  body.battle-mode .battle-fight-countdown.pulse strong{animation:none!important;opacity:1!important;transform:none!important}
}


/* ========================================================================
   A016R40R110 · COMBAT 6A-R2 · COUNTDOWN NUMBERS ONLY
   Visual-only refinement: keep 3-2-1 timing/animation, remove circular plate.
   ======================================================================== */
body.battle-mode .battle-fight-countdown{
  background:transparent!important;
}
body.battle-mode .battle-fight-countdown strong{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  color:#fff2bd!important;
  font-size:clamp(68px,8vw,126px)!important;
  font-weight:1000!important;
  line-height:1!important;
  text-shadow:0 4px 0 #5c4215,0 0 28px rgba(242,199,91,.42),0 14px 34px rgba(0,0,0,.58)!important;
}
@media (max-width:599px){
  body.battle-mode .battle-fight-countdown strong{
    width:auto!important;height:auto!important;border:0!important;font-size:60px!important;
  }
}


/* ========================================================================
   A016R40R111 · COMBAT 6A-R3 · IMPACT / RECOIL / KO STAGING
   Live-combat presentation only. Replay geometry/renderer remains untouched.
   ======================================================================== */
body.battle-mode:not(.fight-replay-open) .arena.r111-impact-shake{
  animation:r111ArenaImpact .24s cubic-bezier(.18,.78,.2,1) both!important;
}
@keyframes r111ArenaImpact{
  0%,100%{transform:translate3d(0,0,0)}
  22%{transform:translate3d(-3px,1px,0)}
  45%{transform:translate3d(3px,-1px,0)}
  68%{transform:translate3d(-1px,0,0)}
}
body.battle-mode:not(.fight-replay-open) .fighter-life.r111-life-impact{
  animation:r111LifeImpact .48s cubic-bezier(.16,.82,.22,1) both!important;
}
@keyframes r111LifeImpact{
  0%{transform:scale(1);filter:none}
  28%{transform:scale(1.18);filter:brightness(1.6)}
  100%{transform:scale(1);filter:none}
}
/* The contact flash is brief and bright; HP/KO are still driven by game.js at
   the authoritative impact callback, never before contact. */
body.battle-mode:not(.fight-replay-open) .arena.r5-cinematic .combat-impact-flash{
  filter:brightness(1.18) saturate(1.12)!important;
}
@media (prefers-reduced-motion:reduce){
  body.battle-mode:not(.fight-replay-open) .arena.r111-impact-shake,
  body.battle-mode:not(.fight-replay-open) .fighter-life.r111-life-impact{animation:none!important}
}


/* ========================================================================
   A016R40R112 · COMBAT 6A-R4 · ROUND WINNER CELEBRATION + PANEL AXIE FALLBACK
   Live-combat presentation only. Replay R108+ remains visually untouched.
   ======================================================================== */
/* If Mixer preview is temporarily unavailable, keep the real Axie portrait in
   the side panel instead of exposing class emoji/icons. */
body.battle-mode .side-team .r112-panel-axie-fallback{
  position:relative!important;display:grid!important;place-items:center!important;
  width:100%!important;height:100%!important;overflow:hidden!important;font-size:0!important;
}
body.battle-mode .side-team .r112-panel-axie-fallback .r112-panel-icon{
  position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;
  font-size:24px!important;opacity:.22!important;
}
body.battle-mode .side-team .r112-panel-axie-fallback img{
  position:relative!important;z-index:2!important;width:100%!important;height:100%!important;
  object-fit:contain!important;display:block!important;filter:drop-shadow(0 6px 8px rgba(0,0,0,.32))!important;
}
/* Round resolution: loser leaves first; winner stays alone for a readable beat. */
body.battle-mode:not(.fight-replay-open) .fighter.r112-round-vanish{
  pointer-events:none!important;
}
body.battle-mode:not(.fight-replay-open) .fighter.r112-round-winner{z-index:80!important}
/* Fallback celebration for non-Spine/static Axies: one controlled full turn,
   never applied to the replay. */
body.battle-mode:not(.fight-replay-open) .fighter.r112-round-winner-css .fighter-token{
  animation:r112WinnerTurn 1.65s cubic-bezier(.16,.78,.2,1) both!important;
}
@keyframes r112WinnerTurn{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  18%{transform:translateY(-12px) rotate(28deg) scale(1.08)}
  55%{transform:translateY(-18px) rotate(205deg) scale(1.12)}
  84%{transform:translateY(-9px) rotate(338deg) scale(1.08)}
  100%{transform:translateY(-4px) rotate(360deg) scale(1.06)}
}
@media(prefers-reduced-motion:reduce){
  body.battle-mode:not(.fight-replay-open) .fighter.r112-round-winner-css .fighter-token{animation:none!important}
}


/* ========================================================================
   A016R40R113 · COMBAT 6A-R5 · GUARANTEED ROUND-WINNER CELEBRATION
   Loser exits every decided round (KO or surviving retreat). Winner remains
   alone, performs one readable full turn, then returns to the panel.
   ======================================================================== */
body.battle-mode:not(.fight-replay-open) .fighter.r112-round-winner{
  z-index:84!important;
  filter:drop-shadow(0 0 14px rgba(242,199,91,.34))!important;
}
body.battle-mode:not(.fight-replay-open) .fighter.r112-round-winner-css .fighter-token{
  animation-duration:1.95s!important;
}
body.battle-mode:not(.fight-replay-open) .fighter.r113-final-celebration.r112-round-winner-css .fighter-token{
  animation-duration:3.10s!important;
}
@keyframes r113WinnerSoloPulse{
  0%,100%{filter:drop-shadow(0 0 10px rgba(242,199,91,.20))}
  50%{filter:drop-shadow(0 0 24px rgba(242,199,91,.52))}
}
body.battle-mode:not(.fight-replay-open) .fighter.r112-round-winner{
  animation:r113WinnerSoloPulse .9s ease-in-out infinite!important;
}
@media(prefers-reduced-motion:reduce){
  body.battle-mode:not(.fight-replay-open) .fighter.r112-round-winner{animation:none!important}
}


/* ========================================================================
   A016R40R114 · COMBAT 6A-R6 · SPELL CINEMATICS + ROUND-START EFFECTS
   Live-combat presentation only. Engine spell math remains frozen.
   ======================================================================== */
body.battle-mode:not(.fight-replay-open) .arena.r5-cinematic{isolation:isolate!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue{
  position:absolute!important;z-index:82!important;top:18%!important;
  display:flex!important;align-items:center!important;gap:8px!important;
  max-width:min(46%,430px)!important;padding:7px 10px!important;border-radius:10px!important;
  border:1px solid rgba(190,151,236,.5)!important;background:linear-gradient(180deg,rgba(36,24,54,.96),rgba(15,13,27,.96))!important;
  color:#f6efff!important;box-shadow:0 12px 30px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08)!important;
  opacity:0!important;transform:translateY(-8px) scale(.94)!important;transition:opacity .18s ease,transform .22s cubic-bezier(.18,.86,.22,1)!important;
  pointer-events:none!important;text-align:left!important;
}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.show{opacity:1!important;transform:translateY(0) scale(1)!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.leave{opacity:0!important;transform:translateY(-6px) scale(.96)!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.side-left{left:5%!important;right:auto!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.side-right{right:5%!important;left:auto!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.side-center{left:50%!important;right:auto!important;transform:translate(-50%,-8px) scale(.94)!important;text-align:center!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.side-center.show{transform:translate(-50%,0) scale(1)!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.side-center.leave{transform:translate(-50%,-6px) scale(.96)!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-icon{font-size:22px!important;line-height:1!important;filter:drop-shadow(0 4px 8px rgba(0,0,0,.38))!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-copy{display:grid!important;gap:1px!important;min-width:0!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-copy b{font-size:8px!important;letter-spacing:.09em!important;font-weight:1000!important;color:#fff!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-copy small{font-size:5.6px!important;letter-spacing:.045em!important;font-weight:850!important;color:#b9abc9!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.tone-ghost{border-color:rgba(150,226,255,.58)!important;background:linear-gradient(180deg,rgba(24,59,73,.95),rgba(10,22,31,.96))!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.tone-reflex{border-color:rgba(122,218,255,.62)!important;background:linear-gradient(180deg,rgba(26,62,82,.96),rgba(10,25,37,.96))!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.tone-last-breath{border-color:rgba(244,202,91,.72)!important;background:linear-gradient(180deg,rgba(76,57,22,.96),rgba(28,22,13,.96))!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.tone-death-pact{border-color:rgba(244,74,89,.72)!important;background:linear-gradient(180deg,rgba(76,22,31,.96),rgba(29,10,16,.97))!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.tone-disarm{border-color:rgba(194,143,255,.7)!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.tone-deception{border-color:rgba(255,123,220,.72)!important;background:linear-gradient(180deg,rgba(74,29,68,.96),rgba(27,11,28,.97))!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.tone-inverse{border-color:rgba(96,218,233,.66)!important;background:linear-gradient(180deg,rgba(21,64,71,.96),rgba(9,24,30,.97))!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.tone-resurrection{border-color:rgba(226,231,157,.74)!important;background:linear-gradient(180deg,rgba(56,65,31,.96),rgba(20,25,12,.97))!important}
body.battle-mode:not(.fight-replay-open) .r114-spell-cue.tone-prison{border-color:rgba(132,154,185,.68)!important;background:linear-gradient(180deg,rgba(40,48,62,.97),rgba(15,19,27,.98))!important}

/* Canonical card itself is used for Disarm/Deception feedback. */
body.battle-mode:not(.fight-replay-open) .r114-card-fx{
  position:absolute!important;z-index:80!important;top:28%!important;width:clamp(62px,6vw,92px)!important;aspect-ratio:.60!important;
  opacity:0!important;pointer-events:none!important;transform-origin:center center!important;
}
body.battle-mode:not(.fight-replay-open) .r114-card-fx.from-left{left:16%!important}
body.battle-mode:not(.fight-replay-open) .r114-card-fx.from-right{right:16%!important}
body.battle-mode:not(.fight-replay-open) .r114-card-fx .arena-card-item,body.battle-mode:not(.fight-replay-open) .r114-card-fx .card-btn{width:100%!important;height:100%!important;min-height:0!important;pointer-events:none!important}
body.battle-mode:not(.fight-replay-open) .r114-card-fx.mode-cancel.go{animation:r114DisarmCard .68s cubic-bezier(.18,.8,.2,1) both!important}
@keyframes r114DisarmCard{0%{opacity:0;transform:translateY(10px) scale(.72) rotate(0)}24%{opacity:1;transform:translateY(0) scale(1.05) rotate(0)}62%{opacity:1;filter:brightness(1.25) saturate(.45);transform:scale(.98) rotate(-7deg)}100%{opacity:0;filter:brightness(.55) grayscale(1);transform:scale(.18) rotate(24deg)}}
body.battle-mode:not(.fight-replay-open) .r114-card-fx.mode-steal{transition:left .72s cubic-bezier(.16,.86,.2,1),right .72s cubic-bezier(.16,.86,.2,1),transform .72s cubic-bezier(.16,.86,.2,1),opacity .16s ease!important}
body.battle-mode:not(.fight-replay-open) .r114-card-fx.mode-steal.go{opacity:1!important}
body.battle-mode:not(.fight-replay-open) .r114-card-fx.mode-steal.from-left.to-right.go{left:calc(84% - clamp(62px,6vw,92px))!important;transform:translateY(-14px) rotate(8deg) scale(1.06)!important}
body.battle-mode:not(.fight-replay-open) .r114-card-fx.mode-steal.from-right.to-left.go{right:calc(84% - clamp(62px,6vw,92px))!important;transform:translateY(-14px) rotate(-8deg) scale(1.06)!important}
body.battle-mode:not(.fight-replay-open) .r114-card-fx.done{opacity:0!important}

/* Immediate spell body language. */
body.battle-mode:not(.fight-replay-open) .fighter.r114-ghost-phase .fighter-token{animation:r114GhostPhase .72s ease-in-out both!important}
@keyframes r114GhostPhase{0%{opacity:1;filter:none}28%{opacity:.22;filter:brightness(1.45) saturate(.45) hue-rotate(155deg);transform:translateY(-5px) scale(1.035)}62%{opacity:.12;filter:brightness(1.7) blur(1px);transform:translateY(-9px) scale(1.055)}100%{opacity:1;filter:none;transform:none}}
body.battle-mode:not(.fight-replay-open) .fighter.r114-reflex-flash .fighter-token{animation:r114ReflexFlash .66s ease both!important}
@keyframes r114ReflexFlash{0%,100%{filter:none}34%{filter:brightness(1.9) drop-shadow(0 0 24px rgba(135,224,255,.9));transform:scale(1.08)}58%{filter:brightness(1.25) drop-shadow(0 0 14px rgba(135,224,255,.65));transform:scale(.98)}}
body.battle-mode:not(.fight-replay-open) .fighter.r114-last-breath-pulse .fighter-token{animation:r114LastBreath .88s cubic-bezier(.16,.85,.2,1) both!important}
@keyframes r114LastBreath{0%{filter:brightness(.58) saturate(.5);transform:scale(.92)}28%{filter:brightness(1.9) drop-shadow(0 0 28px rgba(247,207,83,.92));transform:scale(1.12)}62%{filter:brightness(1.2) drop-shadow(0 0 16px rgba(247,207,83,.58));transform:scale(1.03)}100%{filter:none;transform:none}}
body.battle-mode:not(.fight-replay-open) .arena.r114-death-pact-active::after{
  content:'☠';position:absolute!important;z-index:69!important;left:50%!important;top:52%!important;transform:translate(-50%,-50%)!important;
  font-size:44px!important;color:#ff6c79!important;text-shadow:0 0 26px rgba(255,56,73,.82)!important;animation:r114PactPulse .72s ease-in-out infinite alternate!important;pointer-events:none!important;
}
@keyframes r114PactPulse{from{opacity:.48;transform:translate(-50%,-50%) scale(.86)}to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
body.battle-mode:not(.fight-replay-open) .arena.r114-inverse-active>.vs{animation:r114InverseVs .82s cubic-bezier(.18,.82,.2,1) both!important}
@keyframes r114InverseVs{0%{transform:rotate(0) scale(1)}45%{transform:rotate(180deg) scale(1.22);filter:brightness(1.8) hue-rotate(120deg)}100%{transform:rotate(360deg) scale(1);filter:none}}

/* Round-start spell consequences on the actual team cards. */
body.battle-mode:not(.fight-replay-open) .axie-card.r114-panel-resurrect{animation:r114PanelResurrect 1.35s cubic-bezier(.16,.86,.2,1) both!important;z-index:8!important}
@keyframes r114PanelResurrect{0%{filter:brightness(.55);transform:scale(.94)}28%{filter:brightness(1.65) drop-shadow(0 0 16px rgba(213,239,133,.86));transform:scale(1.045)}100%{filter:none;transform:none}}
body.battle-mode:not(.fight-replay-open) .axie-card.r114-panel-prison{animation:r114PanelPrison 1.35s ease both!important}
@keyframes r114PanelPrison{0%,100%{filter:none}25%,65%{filter:grayscale(.55) brightness(.78) drop-shadow(0 0 10px rgba(142,164,196,.6));transform:translateX(-2px)}45%,85%{transform:translateX(2px)}}

@media(max-width:760px){
  body.battle-mode:not(.fight-replay-open) .r114-spell-cue{top:15%!important;max-width:72%!important;padding:6px 8px!important}
  body.battle-mode:not(.fight-replay-open) .r114-spell-icon{font-size:18px!important}
  body.battle-mode:not(.fight-replay-open) .r114-spell-copy b{font-size:7px!important}
  body.battle-mode:not(.fight-replay-open) .r114-spell-copy small{font-size:5px!important}
  body.battle-mode:not(.fight-replay-open) .r114-card-fx{top:25%!important;width:54px!important}
}
@media(prefers-reduced-motion:reduce){
  body.battle-mode:not(.fight-replay-open) .r114-spell-cue,body.battle-mode:not(.fight-replay-open) .r114-card-fx,body.battle-mode:not(.fight-replay-open) .fighter.r114-ghost-phase .fighter-token,body.battle-mode:not(.fight-replay-open) .fighter.r114-reflex-flash .fighter-token,body.battle-mode:not(.fight-replay-open) .fighter.r114-last-breath-pulse .fighter-token,body.battle-mode:not(.fight-replay-open) .axie-card.r114-panel-resurrect,body.battle-mode:not(.fight-replay-open) .axie-card.r114-panel-prison{animation:none!important;transition:none!important}
}


/* ========================================================================
   A016R40R116 · STARTER PANEL MIXER FALLBACK STABILITY
   Side-panel visual repair only. Old demo-starter SVG prototypes are never
   rendered as battle-panel fallbacks; the panel waits for the authoritative
   Mixer image generated from newGenes and retries transient failures.
   ======================================================================== */
body.battle-mode .side-team [data-starter-panel="1"] .r116-starter-panel-wait{
  position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;
  width:100%!important;height:100%!important;background:transparent!important;overflow:hidden!important;
}
body.battle-mode .side-team [data-starter-panel="1"] .r116-starter-panel-silhouette{
  width:58%!important;height:48%!important;border-radius:52% 48% 46% 54%!important;
  background:radial-gradient(circle at 43% 34%,rgba(255,255,255,.10),rgba(132,157,190,.09) 38%,rgba(54,72,96,.18) 72%,rgba(12,20,32,.04) 100%)!important;
  border:1px solid rgba(129,157,192,.12)!important;
  filter:blur(.2px)!important;opacity:.52!important;
}
body.battle-mode .side-team [data-starter-panel="1"].is-loading .r116-starter-panel-silhouette{
  animation:r116StarterPanelWait 1.15s ease-in-out infinite alternate!important;
}
body.battle-mode .side-team [data-starter-panel="1"].is-ready .r116-starter-panel-wait,
body.battle-mode .side-team [data-starter-panel="1"].is-live .r116-starter-panel-wait{display:none!important}
body.battle-mode .side-team [data-starter-panel="1"]>img{
  position:relative!important;z-index:3!important;width:100%!important;height:100%!important;
  object-fit:contain!important;display:block!important;filter:drop-shadow(0 6px 8px rgba(0,0,0,.32))!important;
}
@keyframes r116StarterPanelWait{from{opacity:.38;transform:scale(.96)}to{opacity:.72;transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){body.battle-mode .side-team [data-starter-panel="1"].is-loading .r116-starter-panel-silhouette{animation:none!important}}


/* ========================================================================
   A016R40R118 · COMBAT 6B · CARD LOCK / REVEAL / SPEND / ROTATION
   Live battle presentation only. engine.js remains authoritative and frozen.
   ======================================================================== */
/* Choosing a card visually lifts it into the existing upper player slot. */
body.battle-mode:not(.fight-replay-open) #playerReveal.r118-choice-lift .arena-player-reveal-card{
  animation:r118ChoiceLift .48s cubic-bezier(.16,.84,.2,1) both!important;
}
@keyframes r118ChoiceLift{
  0%{opacity:.25;transform:translateY(22px) scale(.82)}
  58%{opacity:1;transform:translateY(-5px) scale(1.045)}
  100%{opacity:1;transform:none}
}
body.battle-mode:not(.fight-replay-open) #playerReveal.r118-choice-locked .arena-player-reveal-card{
  outline:1px solid rgba(242,199,91,.42)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.4),0 0 0 2px rgba(242,199,91,.12)!important;
}
/* Both real cards are revealed only after 3·2·1, just before the Axies move. */
body.battle-mode:not(.fight-replay-open) #rivalReveal.r118-reveal-pop .arena-choice-card,
body.battle-mode:not(.fight-replay-open) #playerReveal.r118-reveal-pop .arena-choice-card{
  animation:r118CardReveal .58s cubic-bezier(.18,.86,.22,1) both!important;
}
@keyframes r118CardReveal{
  0%{opacity:.08;transform:rotateY(78deg) scale(.82);filter:brightness(.7)}
  64%{opacity:1;transform:rotateY(-7deg) scale(1.045);filter:brightness(1.2)}
  100%{opacity:1;transform:none;filter:none}
}
/* At physical impact the committed cards leave the arena: they are already
   spent in the authoritative deck, this only makes that fact readable. */
body.battle-mode:not(.fight-replay-open) #rivalReveal.r118-card-spent .arena-choice-card,
body.battle-mode:not(.fight-replay-open) #playerReveal.r118-card-spent .arena-choice-card{
  animation:r118CardSpent .52s cubic-bezier(.32,.02,.62,1) forwards!important;
  pointer-events:none!important;
}
@keyframes r118CardSpent{
  0%{opacity:1;transform:none;filter:none}
  38%{opacity:.9;transform:translateY(-8px) scale(.96);filter:brightness(1.15)}
  100%{opacity:0;transform:translateY(-32px) scale(.72) rotate(-4deg);filter:blur(1.2px)}
}
/* A card that enters the shared hand at the next round is visibly the NEW
   rotation card. It uses the canonical card itself; no alternate card skin. */
body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.r118-rotated-in{
  animation:r118RotationIn .9s cubic-bezier(.16,.86,.22,1) both!important;
  z-index:34!important;
}
body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.r118-rotated-in .card-btn{
  box-shadow:0 12px 28px rgba(0,0,0,.46),0 0 0 2px rgba(91,207,255,.20),0 0 24px rgba(91,207,255,.18)!important;
}
@keyframes r118RotationIn{
  0%{opacity:0;transform:translate(26px,18px) scale(.78)}
  58%{opacity:1;transform:translate(-3px,-5px) scale(1.035)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  body.battle-mode:not(.fight-replay-open) #playerReveal.r118-choice-lift .arena-player-reveal-card,
  body.battle-mode:not(.fight-replay-open) #rivalReveal.r118-reveal-pop .arena-choice-card,
  body.battle-mode:not(.fight-replay-open) #playerReveal.r118-reveal-pop .arena-choice-card,
  body.battle-mode:not(.fight-replay-open) #rivalReveal.r118-card-spent .arena-choice-card,
  body.battle-mode:not(.fight-replay-open) #playerReveal.r118-card-spent .arena-choice-card,
  body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.r118-rotated-in{animation:none!important}
}


/* ========================================================================
   A016R40R122 · COMBAT 6B-R4 · SPELL HOVER HELP
   UX-only. Every Cuerno=HECHIZO card exposes its real approved effect on
   pointer hover; touch keeps the existing explicit i/press explanation.
   No combat, deck, spell math, replay, ranking or economy changes.
   ======================================================================== */
/* Keep help layers outside the card chrome. The live arena still clips its
   global canvas, but the lower hand has enough vertical room for this bubble. */
body.battle-mode:not(.fight-replay-open) #cardsPanel,
body.battle-mode:not(.fight-replay-open) #hand,
body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.spell{
  overflow:visible!important;
}
body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.spell[data-r122-spell-help]{
  cursor:help!important;
}
body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.spell[data-r122-spell-help]::after{
  content:attr(data-r122-spell-title) "\A" attr(data-r122-spell-help);
  position:absolute!important;left:50%!important;bottom:calc(100% + 12px)!important;
  transform:translate(-50%,6px)!important;z-index:120!important;
  width:clamp(210px,22vw,300px)!important;max-width:min(74vw,320px)!important;
  padding:10px 12px!important;border:1px solid rgba(193,97,255,.72)!important;border-radius:10px!important;
  background:rgba(8,12,21,.985)!important;color:#f2f6fc!important;
  box-shadow:0 16px 34px rgba(0,0,0,.62),0 0 0 1px rgba(193,97,255,.12)!important;
  font-size:10px!important;font-weight:800!important;line-height:1.35!important;letter-spacing:.01em!important;
  white-space:pre-line!important;text-align:left!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transition:opacity .12s ease,transform .12s ease!important;
}
body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.spell[data-r122-spell-help]:hover::after,
body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.spell[data-r122-spell-help]:focus-within::after{
  opacity:1!important;visibility:visible!important;transform:translate(-50%,0)!important;
}
/* Selected spell in the upper TU CARTA slot also explains itself on hover. */
body.battle-mode:not(.fight-replay-open) #playerReveal.r122-spell-help-host{
  overflow:visible!important;cursor:help!important;
}
body.battle-mode:not(.fight-replay-open) #playerReveal.r122-spell-help-host::after{
  content:attr(data-r122-spell-title) "\A" attr(data-r122-spell-help);
  position:absolute!important;right:0!important;top:calc(100% + 9px)!important;z-index:120!important;
  width:clamp(210px,22vw,300px)!important;max-width:min(74vw,320px)!important;
  padding:10px 12px!important;border:1px solid rgba(193,97,255,.72)!important;border-radius:10px!important;
  background:rgba(8,12,21,.985)!important;color:#f2f6fc!important;
  box-shadow:0 16px 34px rgba(0,0,0,.62),0 0 0 1px rgba(193,97,255,.12)!important;
  font-size:10px!important;font-weight:800!important;line-height:1.35!important;white-space:pre-line!important;text-align:left!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-5px)!important;
  transition:opacity .12s ease,transform .12s ease!important;
}
body.battle-mode:not(.fight-replay-open) #playerReveal.r122-spell-help-host:hover::after,
body.battle-mode:not(.fight-replay-open) #playerReveal.r122-spell-help-host:focus-within::after{
  opacity:1!important;visibility:visible!important;transform:none!important;
}
/* On coarse/touch devices the existing i control remains the source of truth;
   do not create a hover-only pseudo bubble that could stick on tap. */
@media (hover:none),(pointer:coarse){
  body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.spell[data-r122-spell-help]::after,
  body.battle-mode:not(.fight-replay-open) #playerReveal.r122-spell-help-host::after{display:none!important}
}


/* ========================================================================
   A016R40R125 · MOBILE UI RECOVERY · CARDS + TOUCH CONTROLS
   CSS-only responsive repair after the canonical card renderer grew in R40.
   Desktop >=760px is untouched. Combat/deck/replay/economy logic untouched.
   ======================================================================== */

/* PHONE PORTRAIT · live battle: restore readable vertical cards and thumb UI. */
@media (orientation:portrait) and (max-width:759px){
  body.battle-mode:not(.fight-replay-open) .arena-card-dock{
    left:4px!important;right:4px!important;bottom:4px!important;
    grid-template-columns:34px 30px minmax(0,1fr) 34px!important;
    gap:3px!important;align-items:end!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena-hand-stage{transform:none!important;min-width:0!important}
  body.battle-mode:not(.fight-replay-open) .arena-cards-head{
    min-height:12px!important;margin:0 0 3px!important;padding:0 2px!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena-cards-head .section-label{font-size:6px!important}
  body.battle-mode:not(.fight-replay-open) .arena-cards-head strong{font-size:7.5px!important}
  body.battle-mode:not(.fight-replay-open) .arena-cards-head .hint{display:none!important}
  body.battle-mode:not(.fight-replay-open) .arena-card-dock .hand{
    display:grid!important;
    grid-template-columns:repeat(var(--hand-count),minmax(0,62px))!important;
    justify-content:center!important;align-items:end!important;
    gap:4px!important;width:100%!important;max-width:none!important;margin:0 auto!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena-card-item{
    width:100%!important;height:96px!important;min-height:96px!important;
    aspect-ratio:auto!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena-card-dock .card-btn{
    inset:0!important;width:100%!important;height:100%!important;min-height:0!important;
    padding:3px!important;border-radius:8px!important;grid-template-rows:none!important;gap:0!important;
  }
  /* Canonical chrome: readable on a 320–430 px phone; no 2–3 px typography. */
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-topbar{
    top:3px!important;left:3px!important;right:3px!important;
    grid-template-columns:21px minmax(0,1fr)!important;gap:3px!important;
  }
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-type-icon{
    width:21px!important;height:21px!important;border-width:1px!important;
  }
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-type-label{
    height:11px!important;padding:0 3px!important;font-size:4.5px!important;letter-spacing:.055em!important;
    clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 50%,calc(100% - 4px) 100%,4px 100%,0 50%)!important;
  }
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-footer{
    height:22%!important;grid-template-columns:22px minmax(0,1fr)!important;gap:2px!important;padding:2px 3px!important;
  }
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-value-shell{width:20px!important;height:18px!important}
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-value{
    width:17px!important;height:17px!important;border-width:1px!important;font-size:10px!important;letter-spacing:-.03em!important;
  }
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-grip{width:5px!important;height:7px!important;border-width:0!important}
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-name{font-size:6px!important;line-height:1!important}
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-art-zone{inset:0 0 22% 0!important}
  body.battle-mode:not(.fight-replay-open) .card-info-trigger{
    width:22px!important;height:22px!important;right:-5px!important;top:-6px!important;
    font-size:11px!important;border-radius:50%!important;touch-action:manipulation!important;
  }
  body.battle-mode:not(.fight-replay-open) .card-help-popover{
    width:min(250px,86vw)!important;max-width:86vw!important;padding:9px 10px!important;
  }
  body.battle-mode:not(.fight-replay-open) .card-help-popover b,
  body.battle-mode:not(.fight-replay-open) .card-help-popover span{font-size:10px!important}
  body.battle-mode:not(.fight-replay-open) .card-help-popover small{font-size:8px!important}

  /* Selected / rival reveal cards must remain readable too. */
  body.battle-mode:not(.fight-replay-open) .arena-choice-slot{
    top:7px!important;max-width:78px!important;gap:3px!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena-choice-rival{left:7px!important}
  body.battle-mode:not(.fight-replay-open) .arena-choice-player{right:7px!important}
  body.battle-mode:not(.fight-replay-open) .arena-choice-label{display:none!important}
  body.battle-mode:not(.fight-replay-open) .arena-choice-card{
    width:56px!important;height:auto!important;aspect-ratio:.60!important;border-radius:7px!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena-choice-card .duel-card-topbar{
    top:3px!important;left:3px!important;right:3px!important;grid-template-columns:18px minmax(0,1fr)!important;gap:2px!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena-choice-card .duel-card-type-icon{width:18px!important;height:18px!important;border-width:1px!important}
  body.battle-mode:not(.fight-replay-open) .arena-choice-card .duel-card-type-label{height:9px!important;padding:0 2px!important;font-size:3.8px!important}
  body.battle-mode:not(.fight-replay-open) .arena-choice-card .duel-card-footer{height:22%!important;grid-template-columns:18px minmax(0,1fr)!important;gap:2px!important;padding:1px 3px!important}
  body.battle-mode:not(.fight-replay-open) .arena-choice-card .duel-card-value-shell{width:16px!important;height:15px!important}
  body.battle-mode:not(.fight-replay-open) .arena-choice-card .duel-card-value{width:14px!important;height:14px!important;font-size:8px!important;border-width:1px!important}
  body.battle-mode:not(.fight-replay-open) .arena-choice-card .duel-card-name{font-size:5.2px!important}

  body.battle-mode:not(.fight-replay-open) .arena-card-counter{width:32px!important;height:32px!important}
  body.battle-mode:not(.fight-replay-open) .arena-rival-cards{width:34px!important;height:34px!important}
  body.battle-mode:not(.fight-replay-open) .arena:not(.r5-cinematic) .battle-message{bottom:116px!important}

  /* Primary action: 44 px minimum touch target, larger text. */
  body.battle-mode:not(.fight-replay-open) .fight-zone{min-height:50px!important;gap:3px!important}
  body.battle-mode:not(.fight-replay-open) .fight-btn{
    min-height:48px!important;height:48px!important;border-radius:11px!important;
    padding:0 12px!important;font-size:15px!important;letter-spacing:.045em!important;
    touch-action:manipulation!important;
  }
}

/* PHONE LANDSCAPE · maintain compact arena without shrinking controls to 5 px. */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body.battle-mode:not(.fight-replay-open) .arena-card-dock{
    left:5px!important;right:5px!important;bottom:4px!important;
    grid-template-columns:32px 30px minmax(0,1fr) 34px!important;gap:3px!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena-card-dock .hand{
    grid-template-columns:repeat(var(--hand-count),minmax(0,48px))!important;
    justify-content:center!important;gap:3px!important;max-width:none!important;width:100%!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena-card-item{height:78px!important;min-height:78px!important}
  body.battle-mode:not(.fight-replay-open) .arena-card-dock .card-btn{height:100%!important;min-height:0!important;padding:2px!important}
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-topbar{top:2px!important;left:2px!important;right:2px!important;grid-template-columns:18px minmax(0,1fr)!important;gap:2px!important}
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-type-icon{width:18px!important;height:18px!important}
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-type-label{height:9px!important;font-size:3.8px!important;padding:0 2px!important}
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-footer{height:22%!important;grid-template-columns:18px minmax(0,1fr)!important;gap:1px!important;padding:1px 2px!important}
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-value-shell{width:16px!important;height:15px!important}
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-value{width:14px!important;height:14px!important;font-size:8px!important}
  body.battle-mode:not(.fight-replay-open) .card-btn .duel-card-name{font-size:5px!important}
  body.battle-mode:not(.fight-replay-open) .card-info-trigger{width:20px!important;height:20px!important;font-size:10px!important;right:-4px!important;top:-5px!important}
  body.battle-mode:not(.fight-replay-open) .arena-choice-card{width:48px!important;height:auto!important;aspect-ratio:.60!important}
  body.battle-mode:not(.fight-replay-open) .arena-choice-label{display:none!important}
  body.battle-mode:not(.fight-replay-open) .fight-btn{
    min-height:42px!important;height:42px!important;border-radius:9px!important;font-size:13px!important;padding:0 9px!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena:not(.r5-cinematic) .battle-message{bottom:96px!important}
}

/* MOBILE DASHBOARD · undo the old ultra-compact 5–6 px button typography. */
@media (max-width:599px){
  #lobby .player-hub-tab,#lobby .player-learn-tab{
    min-height:38px!important;padding:7px 5px!important;border-radius:8px!important;
    font-size:9px!important;line-height:1.05!important;letter-spacing:.025em!important;
    touch-action:manipulation!important;
  }
  #lobby .team-sidebar-actions .btn,
  #lobby .team-mode-actions .btn,
  #lobby .wallet-actions .btn,
  #lobby .matchmaking-actions .btn{
    min-height:42px!important;height:auto!important;padding:8px 7px!important;
    border-radius:9px!important;font-size:9px!important;line-height:1.1!important;
  }
  #lobby .pick-actions{gap:4px!important}
  #lobby .pick-actions button{
    width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;
    padding:0!important;border-radius:7px!important;font-size:11px!important;touch-action:manipulation!important;
  }
  #lobby .card-part-filter{gap:6px!important}
  #lobby .card-part-filter-btn{
    min-height:44px!important;padding:9px 10px!important;border-radius:9px!important;touch-action:manipulation!important;
  }
  #lobby .card-part-filter-btn span{font-size:9px!important}
  #lobby .card-part-filter-btn b{min-width:26px!important;height:26px!important;font-size:9px!important}
  #lobby .card-lab-rulebar span{min-height:42px!important;padding:8px 6px!important;font-size:8px!important}
  #lobby .card-lab-rulebar b{font-size:11px!important}
  #lobby .card-lab-preview-row{
    grid-template-columns:repeat(2,minmax(118px,1fr))!important;gap:10px!important;padding:10px 0 12px!important;
  }
  #lobby .card-lab-preview{width:100%!important;max-width:190px!important;aspect-ratio:.60!important}
}

/* Very narrow phones: keep controls usable rather than microscopic. */
@media (max-width:360px){
  #lobby .player-hub-tab,#lobby .player-learn-tab{font-size:8px!important;padding-inline:3px!important}
  body.battle-mode:not(.fight-replay-open) .arena-card-dock .hand{grid-template-columns:repeat(var(--hand-count),minmax(0,56px))!important;gap:3px!important}
  body.battle-mode:not(.fight-replay-open) .arena-card-item{height:90px!important;min-height:90px!important}
  body.battle-mode:not(.fight-replay-open) .fight-btn{font-size:14px!important}
}


/* ========================================================================
   A016R40R126 · DASHBOARD HEADER + MOBILE FIT + ARENA BOTTOM DOCK
   Visual/responsive only.
   - Competitive state moves from the narrow team rail to the dashboard header.
   - The long dashboard description is removed from the visible layout.
   - Buttons/text are constrained so labels never escape their controls.
   - The live battle hand is anchored to the TRUE lower edge of the arena.
   Engine/deck/PvP/replay/ranking/Stamina/AXP/SLP rules remain untouched.
   ======================================================================== */

/* ---------- DASHBOARD HEADER: RANK + PT + STAMINA ---------- */
#lobby #lobbyHint{display:none!important}
#lobby .lobby-topline{min-width:0!important}
#lobby .lobby-topline>div,
#lobby .lobby-head-right,
#lobby .lobby-quick-actions,
#lobby #lobbyStatus{min-width:0!important;box-sizing:border-box!important}

#lobby .lobby-head-right{
  display:grid!important;
  grid-template-columns:minmax(285px,auto) auto minmax(150px,auto)!important;
  grid-template-areas:"competitive quick status"!important;
  align-items:center!important;
  justify-content:end!important;
  gap:7px!important;
  width:auto!important;
  max-width:100%!important;
}
#lobby .lobby-header-rank{
  grid-area:competitive!important;
  display:grid!important;
  grid-template-columns:minmax(86px,.82fr) minmax(160px,1.35fr)!important;
  align-items:stretch!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:4px!important;
  border-radius:9px!important;
  background:rgba(10,16,27,.72)!important;
}
#lobby .lobby-header-rank .duel-rank-line{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  min-width:0!important;
  padding:4px 6px!important;
  border:1px solid rgba(238,190,80,.16)!important;
  border-radius:7px!important;
  background:rgba(238,190,80,.04)!important;
  text-align:center!important;
}
#lobby .lobby-header-rank .duel-rank-line span{
  font-size:6px!important;line-height:1!important;letter-spacing:.08em!important;white-space:nowrap!important;
}
#lobby .lobby-header-rank .duel-rank-line strong{
  min-width:0!important;max-width:100%!important;font-size:9px!important;line-height:1!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
#lobby .lobby-header-rank .duel-rank-live{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;min-width:0!important;
}
#lobby .lobby-header-rank .duel-rank-live>span{
  min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:2px!important;padding:4px 5px!important;overflow:hidden!important;text-align:center!important;
}
#lobby .lobby-header-rank .duel-rank-live small{
  max-width:100%!important;font-size:6px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
#lobby .lobby-header-rank .duel-rank-live b{
  max-width:100%!important;font-size:10px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
#lobby .lobby-header-rank .duel-rank-track,
#lobby .lobby-header-rank>#duelRankNext{display:none!important}
#lobby .lobby-quick-actions{grid-area:quick!important;display:grid!important;grid-template-columns:auto auto!important;gap:5px!important}
#lobby #lobbyStatus{
  grid-area:status!important;max-width:220px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}

/* ---------- NEVER LET DASHBOARD LABELS ESCAPE THEIR CONTROLS ---------- */
#lobby button,
#lobby .btn,
#lobby .lobby-quick-btn,
#lobby .player-hub-tab,
#lobby .player-learn-tab,
#lobby .wallet-class-tab,
#lobby .card-part-filter-btn{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
}
#lobby .lobby-quick-btn{
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
#lobby .player-hub-tab,
#lobby .player-learn-tab,
#lobby .team-sidebar-actions .btn,
#lobby .team-mode-actions .btn{
  overflow:hidden!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-align:center!important;
  line-height:1.08!important;
}
#lobby .team-sidebar,
#lobby .player-hub-rail,
#lobby .team-sidebar-actions,
#lobby .team-mode-actions,
#lobby .picked-team,
#lobby .team-slot{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
#lobby .team-slot *{min-width:0!important}

/* ---------- PHONE PORTRAIT DASHBOARD ---------- */
@media (orientation:portrait) and (max-width:599px){
  #lobby .lobby-topline{
    grid-template-columns:minmax(0,.84fr) minmax(190px,1.16fr)!important;
    gap:7px!important;
  }
  #lobby .lobby-head-right{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"competitive" "quick" "status"!important;
    gap:4px!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  #lobby .lobby-header-rank{
    grid-template-columns:minmax(58px,.72fr) minmax(0,1.55fr)!important;
    gap:3px!important;padding:3px!important;border-radius:7px!important;
  }
  #lobby .lobby-header-rank .duel-rank-line{padding:3px!important;border-radius:6px!important}
  #lobby .lobby-header-rank .duel-rank-line span{display:none!important}
  #lobby .lobby-header-rank .duel-rank-line strong{font-size:8px!important}
  #lobby .lobby-header-rank .duel-rank-live{gap:3px!important}
  #lobby .lobby-header-rank .duel-rank-live>span{padding:3px 2px!important;border-radius:6px!important}
  #lobby .lobby-header-rank .duel-rank-live small{font-size:5.7px!important;letter-spacing:.045em!important}
  #lobby .lobby-header-rank .duel-rank-live b{font-size:9px!important}
  #lobby .lobby-quick-actions{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;gap:4px!important;width:100%!important}
  #lobby .lobby-quick-btn{
    width:100%!important;min-height:38px!important;height:auto!important;padding:6px 5px!important;
    font-size:7.5px!important;line-height:1.05!important;border-radius:8px!important;
  }
  #lobby #lobbyStatus{
    width:100%!important;max-width:none!important;min-height:30px!important;padding:5px 7px!important;
    font-size:7.5px!important;line-height:1!important;border-radius:8px!important;
  }
  #lobby .lobby-topline h2{font-size:20px!important;line-height:1.04!important;overflow-wrap:anywhere!important}

  /* Search + pagination on first row, full class strip below: no half-cut button labels. */
  #walletUnifiedBar.wallet-unified-bar{
    grid-template-columns:minmax(0,1fr) 92px!important;
    grid-template-areas:"search pagination" "classes classes"!important;
    gap:5px!important;padding:5px!important;
  }
  #walletUnifiedBar .unified-search{grid-area:search!important}
  #walletUnifiedBar .unified-class-filter{grid-area:classes!important;min-width:0!important}
  #walletUnifiedBar .unified-pagination-shell{grid-area:pagination!important;width:92px!important;height:38px!important}
  #walletUnifiedBar .wallet-search input{height:38px!important;font-size:9px!important;padding:0 9px!important}
  #walletUnifiedBar .wallet-class-tabs{height:38px!important;gap:4px!important;overflow-x:auto!important;scroll-snap-type:x proximity!important}
  #walletUnifiedBar .wallet-class-tab{
    flex:0 0 auto!important;height:38px!important;min-height:38px!important;padding:0 9px!important;
    font-size:8.5px!important;border-radius:8px!important;scroll-snap-align:start!important;
  }
  #walletUnifiedBar .unified-pagination-shell .wallet-page-controls{
    height:38px!important;grid-template-columns:27px minmax(34px,1fr) 27px!important;gap:3px!important;
  }
  #walletUnifiedBar .unified-pagination-shell .wallet-page-controls strong{font-size:6.8px!important;min-width:0!important}
  #walletUnifiedBar .unified-pagination-shell .mini-nav{width:27px!important;height:38px!important;font-size:9px!important}

  /* Wallet mode no longer forces the two long battle-mode labels side by side. */
  #lobby .team-mode-actions,
  #lobby .team-mode-actions.wallet-modes{grid-template-columns:1fr!important;gap:5px!important}
  #lobby .team-sidebar-actions .btn,
  #lobby .team-mode-actions .btn{
    min-height:40px!important;padding:7px 4px!important;font-size:8px!important;
  }
  #lobby .player-hub-tab,#lobby .player-learn-tab{font-size:8.5px!important;padding:6px 3px!important}
}

/* ---------- PHONE LANDSCAPE DASHBOARD ---------- */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  #lobby .lobby-topline{
    grid-template-columns:minmax(150px,.62fr) minmax(360px,1.38fr)!important;gap:6px!important;
  }
  #lobby .lobby-head-right{
    grid-template-columns:minmax(210px,.95fr) minmax(190px,.9fr) minmax(100px,.55fr)!important;
    grid-template-areas:"competitive quick status"!important;gap:4px!important;
  }
  #lobby .lobby-header-rank{grid-template-columns:minmax(64px,.68fr) minmax(0,1.45fr)!important;gap:3px!important;padding:3px!important}
  #lobby .lobby-header-rank .duel-rank-line span{display:none!important}
  #lobby .lobby-header-rank .duel-rank-line strong{font-size:7px!important}
  #lobby .lobby-header-rank .duel-rank-live{gap:3px!important}
  #lobby .lobby-header-rank .duel-rank-live>span{padding:2px 3px!important}
  #lobby .lobby-header-rank .duel-rank-live small{font-size:5px!important}
  #lobby .lobby-header-rank .duel-rank-live b{font-size:7px!important}
  #lobby .lobby-quick-btn{min-height:31px!important;padding:4px 5px!important;font-size:6.8px!important}
  #lobby #lobbyStatus{max-width:120px!important;min-height:31px!important;padding:4px 5px!important;font-size:6.5px!important}
  #lobby .team-mode-actions.wallet-modes{grid-template-columns:1fr!important}
  #lobby .team-mode-actions .btn{white-space:normal!important;min-height:31px!important;font-size:6.8px!important}
}

/* ---------- DESKTOP / TABLET SAFETY ---------- */
@media (min-width:600px){
  #lobby .lobby-quick-btn{min-height:36px!important;padding:0 10px!important}
  #lobby .player-hub-tab,#lobby .player-learn-tab{overflow:hidden!important;text-overflow:ellipsis!important}
  #lobby .team-mode-actions .btn{min-height:38px!important;padding-inline:7px!important}
}
@media (min-width:600px) and (max-width:1180px){
  #lobby .lobby-head-right{
    grid-template-columns:minmax(245px,1fr) minmax(210px,auto)!important;
    grid-template-areas:"competitive quick" "competitive status"!important;
  }
  #lobby #lobbyStatus{justify-self:stretch!important;max-width:none!important}
}

/* ---------- LIVE BATTLE: TRUE BOTTOM ANCHOR ----------
   Old pre-R40 portrait CSS still assigned .cards-panel to a named grid area.
   Once the hand became an absolute child of .arena, that legacy grid placement
   could lift the dock. Neutralize every grid placement and pin to y=0. */
body.battle-mode:not(.fight-replay-open) .arena>.arena-card-dock{
  position:absolute!important;
  grid-area:auto!important;
  grid-row:auto!important;
  grid-column:auto!important;
  top:auto!important;
  bottom:0!important;
  margin-bottom:0!important;
  align-self:auto!important;
  justify-self:auto!important;
}
body.battle-mode:not(.fight-replay-open) .arena>.arena-card-dock:not(.is-resolving){transform:none!important}
body.battle-mode:not(.fight-replay-open) .arena>.arena-card-dock .arena-hand-stage,
body.battle-mode:not(.fight-replay-open) .arena>.arena-card-dock .hand,
body.battle-mode:not(.fight-replay-open) .arena>.arena-card-dock .arena-card-item{margin-bottom:0!important}

@media (orientation:portrait) and (max-width:759px){
  body.battle-mode:not(.fight-replay-open) .arena>.arena-card-dock{
    left:4px!important;right:4px!important;bottom:0!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena:not(.r5-cinematic) .battle-message{bottom:112px!important}
}
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body.battle-mode:not(.fight-replay-open) .arena>.arena-card-dock{
    left:4px!important;right:4px!important;bottom:0!important;
  }
  body.battle-mode:not(.fight-replay-open) .arena:not(.r5-cinematic) .battle-message{bottom:92px!important}
}

/* ========================================================================
   A016R40R127 · MOBILE LAYOUT RESTORE + SINGLE-LINE DASHBOARD HEADER
   Scope: visual/responsive + battle viewport positioning only.
   - Dashboard top controls are one ordered row: RANGO · PT · STAMINA · AXIES · VOLVER · WALLET.
   - The large "Elige 3 de tus Axies" heading is removed from the visible dashboard header.
   - Live battle is locked to the visual viewport so browser scroll cannot crop the header.
   - Portrait restores the validated full vertical stack with the hand inside the arena.
   - Landscape explicitly restores rival rail + arena + player rail + A PELEAR.
   No engine/deck/PvP/replay/ranking/economy rules change.
   ======================================================================== */

/* ---------- DASHBOARD · EXACT HEADER ORDER ---------- */
#lobby .lobby-brand-mini h2{display:none!important}
#lobby .lobby-topline{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:8px!important}
#lobby .lobby-brand-mini{min-width:0!important}
#lobby .lobby-brand-mini .eyebrow{margin:0!important;white-space:nowrap!important}
#lobby .lobby-head-right{
  display:grid!important;
  grid-template-columns:minmax(84px,.85fr) minmax(74px,.72fr) minmax(74px,.72fr) minmax(58px,.55fr) minmax(76px,.68fr) minmax(156px,1.42fr)!important;
  grid-template-areas:"rank points stamina axies back wallet"!important;
  align-items:stretch!important;justify-content:stretch!important;gap:5px!important;width:100%!important;max-width:none!important;
}
#lobby .lobby-header-rank{display:contents!important}
#lobby .lobby-header-rank .duel-rank-line{
  grid-area:rank!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  min-width:0!important;margin:0!important;padding:5px 7px!important;border:1px solid rgba(238,190,80,.24)!important;border-radius:9px!important;
  background:linear-gradient(180deg,rgba(238,190,80,.075),rgba(255,255,255,.025))!important;text-align:center!important;
}
#lobby .lobby-header-rank .duel-rank-line span{display:block!important;font-size:6px!important;line-height:1!important;letter-spacing:.08em!important;color:#8d99aa!important}
#lobby .lobby-header-rank .duel-rank-line strong{font-size:10px!important;line-height:1.05!important;color:#f1d17a!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
#lobby .lobby-header-rank .duel-rank-live{display:contents!important}
#lobby .lobby-header-rank .duel-rank-live>span,
#lobby .lobby-axie-stat{
  min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;
  margin:0!important;padding:5px 6px!important;border:1px solid #33445e!important;border-radius:9px!important;background:#101827!important;text-align:center!important;overflow:hidden!important;
}
#lobby .lobby-header-rank .duel-rank-live>span:first-child{grid-area:points!important}
#lobby .lobby-header-rank .duel-rank-live>span.stamina{grid-area:stamina!important}
#lobby .lobby-axie-stat{grid-area:axies!important}
#lobby .lobby-header-rank .duel-rank-live small,
#lobby .lobby-axie-stat small{font-size:6px!important;line-height:1!important;letter-spacing:.06em!important;color:#8494a8!important;white-space:nowrap!important}
#lobby .lobby-header-rank .duel-rank-live b,
#lobby .lobby-axie-stat b{font-size:10px!important;line-height:1!important;color:#eef3f8!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
#lobby .lobby-header-rank .duel-rank-live .stamina b{color:#f0cf73!important}
#lobby .lobby-header-rank .duel-rank-track,
#lobby .lobby-header-rank>#duelRankNext{display:none!important}
#lobby .lobby-quick-actions{display:contents!important}
#lobby #lobbyBackBtn{grid-area:back!important}
#lobby #lobbyConnectWalletBtn{grid-area:wallet!important}
#lobby .lobby-quick-btn{
  width:100%!important;height:auto!important;min-height:42px!important;padding:5px 8px!important;border-radius:9px!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:8px!important;line-height:1!important;
}
#lobby .lobby-status-compat{display:none!important}

@media (max-width:599px){
  #lobby .lobby-topline{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  #lobby .lobby-brand-mini{display:none!important}
  #lobby .lobby-head-right{
    grid-template-columns:minmax(64px,.95fr) minmax(46px,.72fr) minmax(50px,.76fr) minmax(42px,.60fr) minmax(48px,.67fr) minmax(92px,1.38fr)!important;
    gap:3px!important;
  }
  #lobby .lobby-header-rank .duel-rank-line,
  #lobby .lobby-header-rank .duel-rank-live>span,
  #lobby .lobby-axie-stat{min-height:42px!important;padding:4px 2px!important;border-radius:8px!important}
  #lobby .lobby-header-rank .duel-rank-line span,
  #lobby .lobby-header-rank .duel-rank-live small,
  #lobby .lobby-axie-stat small{font-size:5.1px!important;letter-spacing:.035em!important}
  #lobby .lobby-header-rank .duel-rank-line strong{font-size:7.6px!important}
  #lobby .lobby-header-rank .duel-rank-live b,
  #lobby .lobby-axie-stat b{font-size:8px!important}
  #lobby .lobby-quick-btn{min-height:42px!important;padding:3px!important;font-size:6.8px!important;border-radius:8px!important}
  #lobby #lobbyConnectWalletBtn{font-size:6.3px!important}
}
@media (max-width:360px){
  #lobby .lobby-head-right{grid-template-columns:minmax(58px,.95fr) 43px 46px 38px 44px minmax(84px,1.35fr)!important;gap:2px!important}
  #lobby .lobby-header-rank .duel-rank-line strong{font-size:7px!important}
  #lobby .lobby-header-rank .duel-rank-live b,#lobby .lobby-axie-stat b{font-size:7.4px!important}
  #lobby .lobby-quick-btn{font-size:6.1px!important}
  #lobby #lobbyConnectWalletBtn{font-size:5.7px!important}
}

/* ---------- LIVE BATTLE · NEVER ALLOW DOCUMENT SCROLL TO CROP THE HEADER ---------- */
@media (max-width:999px){
  html:has(body.battle-mode:not(.fight-replay-open)),
  body.battle-mode:not(.fight-replay-open){height:100%!important;overflow:hidden!important}
  body.battle-mode:not(.fight-replay-open) .app{
    position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100dvh!important;min-height:0!important;
    margin:0!important;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important;
    overflow:hidden!important;
  }
  body.battle-mode:not(.fight-replay-open) #battle.battle-shell{
    width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;
    grid-template-rows:auto minmax(0,1fr)!important;gap:4px!important;
  }
}

/* ---------- PORTRAIT · HEADER + RIVAL + FULL ARENA + YOU + FIGHT ---------- */
@media (orientation:portrait) and (max-width:759px){
  body.battle-mode:not(.fight-replay-open) .battle-landscape{
    display:grid!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr) auto auto!important;
    grid-template-areas:"opp" "arena" "own" "fight"!important;
    gap:4px!important;
  }
  body.battle-mode:not(.fight-replay-open) .opponent-side,
  body.battle-mode:not(.fight-replay-open) .player-side{display:contents!important}
  body.battle-mode:not(.fight-replay-open) .opponent-section{grid-area:opp!important}
  body.battle-mode:not(.fight-replay-open) .battle-center{grid-area:arena!important;display:flex!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
  body.battle-mode:not(.fight-replay-open) .own-section{grid-area:own!important}
  body.battle-mode:not(.fight-replay-open) .fight-zone{grid-area:fight!important}
  body.battle-mode:not(.fight-replay-open) .team-section{min-height:0!important;padding:4px 5px!important;border-radius:10px!important;overflow:hidden!important}
  body.battle-mode:not(.fight-replay-open) .side-team{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:1fr!important;height:auto!important;gap:4px!important}
  body.battle-mode:not(.fight-replay-open) .side-team .axie-card,
  body.battle-mode:not(.fight-replay-open) .opponent-section .side-team .axie-card{height:62px!important;min-height:62px!important}
  body.battle-mode:not(.fight-replay-open) .battle-center .arena{width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;border-radius:11px!important}
  body.battle-mode:not(.fight-replay-open) .fight-zone{display:grid!important;grid-template-columns:1fr!important;min-height:50px!important;gap:0!important}
  body.battle-mode:not(.fight-replay-open) .fight-btn{width:100%!important;min-height:50px!important;height:50px!important;margin:0!important}
  body.battle-mode:not(.fight-replay-open) .selection-summary,
  body.battle-mode:not(.fight-replay-open) .waiting-text{display:none!important}
  body.battle-mode:not(.fight-replay-open) .arena>.arena-card-dock{bottom:0!important;left:4px!important;right:4px!important}
}

/* ---------- LANDSCAPE · RESTORE THE VALIDATED THREE-COLUMN COMBAT ---------- */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body.battle-mode:not(.fight-replay-open) #battle.battle-shell{gap:3px!important}
  body.battle-mode:not(.fight-replay-open) .battle-header.r79-battle-info{
    flex:none!important;min-height:44px!important;max-height:52px!important;height:48px!important;padding:3px 6px!important;overflow:hidden!important;
  }
  body.battle-mode:not(.fight-replay-open) .battle-landscape{
    display:grid!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;
    grid-template-columns:minmax(104px,16vw) minmax(0,1fr) minmax(148px,23vw)!important;
    grid-template-rows:minmax(0,1fr)!important;grid-template-areas:"opp arena own"!important;
    gap:4px!important;align-items:stretch!important;
  }
  body.battle-mode:not(.fight-replay-open) .opponent-side{
    grid-area:opp!important;display:flex!important;visibility:visible!important;min-width:0!important;min-height:0!important;overflow:hidden!important;position:relative!important;transform:none!important;
  }
  body.battle-mode:not(.fight-replay-open) .battle-center{
    grid-area:arena!important;display:flex!important;visibility:visible!important;min-width:0!important;min-height:0!important;overflow:hidden!important;position:relative!important;transform:none!important;
  }
  body.battle-mode:not(.fight-replay-open) .player-side{
    grid-area:own!important;display:grid!important;visibility:visible!important;min-width:0!important;min-height:0!important;overflow:hidden!important;
    grid-template-rows:minmax(0,1fr) auto!important;gap:3px!important;position:relative!important;transform:none!important;
  }
  body.battle-mode:not(.fight-replay-open) .opponent-section,
  body.battle-mode:not(.fight-replay-open) .own-section{
    display:grid!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
    grid-template-rows:auto minmax(0,1fr)!important;overflow:hidden!important;
  }
  body.battle-mode:not(.fight-replay-open) .side-team{
    display:grid!important;grid-template-columns:1fr!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;
    min-height:0!important;height:100%!important;gap:3px!important;
  }
  body.battle-mode:not(.fight-replay-open) .team-section{padding:3px 4px!important;border-radius:8px!important;overflow:hidden!important}
  body.battle-mode:not(.fight-replay-open) .side-team .axie-card,
  body.battle-mode:not(.fight-replay-open) .opponent-section .side-team .axie-card{height:100%!important;min-height:0!important;overflow:hidden!important}
  body.battle-mode:not(.fight-replay-open) .battle-center .arena{
    display:grid!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-height:none!important;border-radius:9px!important;overflow:hidden!important;
  }
  body.battle-mode:not(.fight-replay-open) .player-side .fight-zone{display:grid!important;grid-template-columns:1fr!important;min-height:42px!important;gap:0!important}
  body.battle-mode:not(.fight-replay-open) .player-side .fight-btn{width:100%!important;min-height:42px!important;height:42px!important;margin:0!important;font-size:11px!important}
  body.battle-mode:not(.fight-replay-open) .selection-summary,
  body.battle-mode:not(.fight-replay-open) .waiting-text{display:none!important}
  body.battle-mode:not(.fight-replay-open) .arena>.arena-card-dock{bottom:0!important;left:4px!important;right:4px!important}
}

@media (orientation:landscape) and (max-width:720px) and (max-height:600px){
  body.battle-mode:not(.fight-replay-open) .battle-landscape{grid-template-columns:96px minmax(0,1fr) 138px!important;gap:3px!important}
}
@media (orientation:landscape) and (max-width:580px) and (max-height:600px){
  body.battle-mode:not(.fight-replay-open) .battle-landscape{grid-template-columns:88px minmax(0,1fr) 126px!important;gap:3px!important}
  body.battle-mode:not(.fight-replay-open) .battle-header.r79-battle-info{height:44px!important;min-height:44px!important;max-height:44px!important}
}

/* ========================================================================
   A016R40R129 · MOBILE TEAM CONTROLS + STARTER BADGE CLEANUP + WALLET LANDSCAPE FULL AXIES
   Exact repair over uploaded R128 ZIP.
   - R128 stylesheet tail was written with literal "\\n" tokens and never applied.
   - Portrait uses one professional 3-action toolbar under HECHIZOS/CARTAS.
   - Legacy per-slot arrows/delete remain available on desktop/landscape, never portrait.
   - Wallet landscape restores full Mixer previews; Starter landscape geometry stays frozen.
   ======================================================================== */

/* Starter: remove the visible STARTER pill requested by the user. Keep family/name identity. */
#lobby .demo-axie-pick.starter-gladiator .starter-badge{display:none!important}

/* Selection toolbar is a portrait-only segmented control. */
#lobby .mobile-picked-controls{display:none!important}
@media (orientation:portrait) and (max-width:599px){
  #lobby .player-hub-rail .mobile-picked-controls:not(.hidden){
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:3px!important;
    margin:5px 0 5px!important;
    padding:3px!important;
    min-height:0!important;
    border:1px solid #2c3c54!important;
    border-radius:8px!important;
    background:#0d1522!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  #lobby .player-hub-rail .mobile-picked-controls button{
    display:grid!important;place-items:center!important;
    min-width:0!important;width:100%!important;height:30px!important;min-height:30px!important;
    margin:0!important;padding:0!important;
    border:1px solid #34465f!important;border-radius:6px!important;
    background:linear-gradient(180deg,#172237,#111a2a)!important;
    color:#dbe6f4!important;
    box-shadow:none!important;
    font-size:14px!important;font-weight:900!important;line-height:1!important;
    cursor:pointer!important;touch-action:manipulation!important;
  }
  #lobby .player-hub-rail .mobile-picked-controls button:not(:disabled):active{
    transform:translateY(1px)!important;background:#1b2940!important;
  }
  #lobby .player-hub-rail .mobile-picked-controls button.danger{
    border-color:#573642!important;background:linear-gradient(180deg,#241923,#1a131b)!important;color:#eaa0ad!important;
  }
  #lobby .player-hub-rail .mobile-picked-controls button:disabled{
    opacity:.28!important;filter:saturate(.55)!important;cursor:default!important;
  }

  /* R36's tiny per-slot controls were the buttons seen behind the Axie artwork.
     They are completely removed from the portrait layout, not merely squeezed. */
  #lobby .player-hub-rail #teamSidebar .picked-team .team-slot .pick-actions,
  #lobby .demo-team-sidebar.wallet-team-sidebar .team-slot.picked .pick-actions{
    display:none!important;width:0!important;height:0!important;overflow:hidden!important;
  }
  #lobby .player-hub-rail #teamSidebar .team-slot.picked,
  #lobby .demo-team-sidebar.wallet-team-sidebar .team-slot.picked{
    display:block!important;
    min-height:64px!important;
    padding:5px 5px 5px 20px!important;
    cursor:pointer!important;
    overflow:hidden!important;
  }
  #lobby #teamSidebar .team-slot.picked .picked-real{
    display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;align-items:center!important;
    gap:5px!important;width:100%!important;min-width:0!important;padding:0!important;
  }
  #lobby #teamSidebar .team-slot.picked .compact-preview,
  #lobby #teamSidebar .team-slot.picked .picked-demo-image{
    width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;
  }
  #lobby #teamSidebar .team-slot.picked .picked-real-copy{min-width:0!important;overflow:hidden!important}
  #lobby #teamSidebar .team-slot.picked .picked-real-copy b,
  #lobby #teamSidebar .team-slot.picked .picked-real-copy small{
    display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  #lobby #teamSidebar .team-slot.picked.mobile-picked-active{
    border-color:#c89d43!important;
    box-shadow:inset 0 0 0 1px rgba(230,184,78,.22)!important;
    background:linear-gradient(180deg,rgba(211,163,62,.07),#151d2d)!important;
  }
}

/* Wallet only · landscape. The current R6R2 rule clamps the preview to 50 px,
   clipping the lower half of the 480×320 Mixer snapshot. Give the NFT preview
   its own full-height row and make the generated image fit inside it. */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout .real-axie-grid.demo-real-grid .real-axie-pick{
    min-height:140px!important;
    grid-template-rows:86px auto auto auto!important;
    gap:2px!important;padding:5px!important;
    overflow:hidden!important;
  }
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout .real-axie-grid.demo-real-grid .real-pick-image{
    height:86px!important;min-height:86px!important;overflow:hidden!important;
    display:grid!important;place-items:center!important;
  }
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout .real-axie-grid.demo-real-grid .real-pick-image .axie-preview-slot{
    width:100%!important;height:86px!important;min-height:86px!important;
    padding:2px!important;overflow:hidden!important;display:grid!important;place-items:center!important;
  }
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout .real-axie-grid.demo-real-grid .real-pick-image .axie-preview-slot>img{
    display:block!important;
    width:auto!important;height:auto!important;
    max-width:94%!important;max-height:82px!important;
    object-fit:contain!important;object-position:center center!important;
    margin:auto!important;transform:none!important;
  }
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout .real-axie-grid.demo-real-grid .real-axie-pick strong{
    font-size:8px!important;line-height:1.05!important;margin:0!important;
  }
  #lobby .picker-layout.wallet-layout.demo-dashboard-layout .real-axie-grid.demo-real-grid .real-axie-pick small{
    font-size:5.5px!important;line-height:1.05!important;margin:0!important;
  }
  /* Starter landscape stays exactly on the previously validated compact geometry. */
}

/* ========================================================================
   A016R40R130 · LANDSCAPE TEAM TOOLBAR + CLEAN PICKED AXIE SLOTS
   Mobile landscape only. Mirrors the validated portrait interaction:
   select a team slot, then use one shared ↑ ↓ × toolbar under HECHIZOS/CARTAS.
   Removes legacy per-slot buttons and hidden copy clutter from the picked slots.
   ======================================================================== */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  /* Shared team actions live directly below HECHIZOS/CARTAS, exactly as portrait. */
  #lobby .player-hub-rail .mobile-picked-controls:not(.hidden){
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
    margin:5px 0!important;
    padding:3px!important;
    min-height:0!important;
    border:1px solid #2c3c54!important;
    border-radius:8px!important;
    background:#0d1522!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  #lobby .player-hub-rail .mobile-picked-controls button{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:30px!important;
    min-height:30px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #34465f!important;
    border-radius:6px!important;
    background:linear-gradient(180deg,#172237,#111a2a)!important;
    color:#dbe6f4!important;
    box-shadow:none!important;
    font-size:14px!important;
    font-weight:900!important;
    line-height:1!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
  }
  #lobby .player-hub-rail .mobile-picked-controls button.danger{
    border-color:#573642!important;
    background:linear-gradient(180deg,#241923,#1a131b)!important;
    color:#eaa0ad!important;
  }
  #lobby .player-hub-rail .mobile-picked-controls button:disabled{
    opacity:.28!important;
    filter:saturate(.55)!important;
    cursor:default!important;
  }

  /* Remove the old ↑ ↓ × from every Axie slot. They must not remain behind artwork. */
  #lobby .player-hub-rail #teamSidebar .picked-team .team-slot .pick-actions,
  #lobby .demo-team-sidebar.wallet-team-sidebar .team-slot.picked .pick-actions{
    display:none!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  /* Clean selected-Axie field: portrait interaction, landscape proportions. */
  #lobby .player-hub-rail #teamSidebar .team-slot.picked,
  #lobby .demo-team-sidebar.wallet-team-sidebar .team-slot.picked{
    display:block!important;
    position:relative!important;
    min-height:62px!important;
    padding:5px 6px 5px 22px!important;
    cursor:pointer!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  #lobby #teamSidebar .team-slot.picked .picked-real{
    display:grid!important;
    grid-template-columns:50px minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    padding:0!important;
  }
  #lobby #teamSidebar .team-slot.picked .compact-preview,
  #lobby #teamSidebar .team-slot.picked .picked-demo-image{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    overflow:hidden!important;
  }
  #lobby #teamSidebar .team-slot.picked .compact-preview .axie-preview-slot,
  #lobby #teamSidebar .team-slot.picked .picked-demo-image .axie-preview-slot{
    width:50px!important;
    height:50px!important;
    min-height:50px!important;
    overflow:hidden!important;
  }
  #lobby #teamSidebar .team-slot.picked .picked-real-copy{
    min-width:0!important;
    width:100%!important;
    overflow:hidden!important;
  }
  #lobby #teamSidebar .team-slot.picked .picked-real-copy b{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:8px!important;
    line-height:1.1!important;
  }
  /* Landscape rail is narrow: metadata/AXP duplicated elsewhere only creates dirt behind the Axie. */
  #lobby #teamSidebar .team-slot.picked .picked-real-copy small,
  #lobby #teamSidebar .team-slot.picked .picked-real-copy .axp-target,
  #lobby #teamSidebar .team-slot.picked .picked-real-copy .picked-starter-tag,
  #lobby #teamSidebar .team-slot.picked .picked-real-copy .sidebar-vanguard{
    display:none!important;
  }
  #lobby #teamSidebar .team-slot.picked.mobile-picked-active{
    border-color:#c89d43!important;
    box-shadow:inset 0 0 0 1px rgba(230,184,78,.22)!important;
    background:linear-gradient(180deg,rgba(211,163,62,.07),#151d2d)!important;
  }
}

/* ============================================================
   A016R40R156 · MOBILE LANDSCAPE · BATTLE RESULT FIT
   Scope: end-of-battle screen only on short phone landscape viewports.
   Portrait and desktop remain untouched.
   ============================================================ */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body:not(.battle-mode) .end-panel{
    width:min(940px,calc(100% - 8px))!important;
    max-width:940px!important;
    margin:max(4px,env(safe-area-inset-top)) auto max(4px,env(safe-area-inset-bottom))!important;
    padding:8px 10px!important;
    display:grid!important;
    grid-template-columns:minmax(150px,.68fr) minmax(0,1.32fr)!important;
    grid-template-areas:
      "mark duel"
      "eyebrow duel"
      "title axp"
      "reason axp"
      "actions actions"!important;
    column-gap:10px!important;
    row-gap:3px!important;
    align-items:center!important;
    align-content:center!important;
    min-height:0!important;
  }
  body:not(.battle-mode) .end-panel>.brand-mark{
    grid-area:mark!important;
    font-size:28px!important;
    line-height:1!important;
    margin:0!important;
    align-self:end!important;
  }
  body:not(.battle-mode) .end-panel>.eyebrow{
    grid-area:eyebrow!important;
    margin:0!important;
    font-size:9px!important;
    line-height:1.05!important;
    letter-spacing:.15em!important;
    align-self:start!important;
  }
  body:not(.battle-mode) .end-panel>#endTitle{
    grid-area:title!important;
    margin:0!important;
    font-size:clamp(28px,6.2vw,44px)!important;
    line-height:.95!important;
    font-weight:500!important;
  }
  body:not(.battle-mode) .end-panel>#endReason{
    grid-area:reason!important;
    margin:0!important;
    font-size:clamp(9px,1.7vw,13px)!important;
    line-height:1.15!important;
  }
  body:not(.battle-mode) .end-panel>.duel-end-panel{
    grid-area:duel!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:6px 8px!important;
    border-radius:10px!important;
    align-self:stretch!important;
  }
  body:not(.battle-mode) .end-panel .duel-end-head span{font-size:7px!important}
  body:not(.battle-mode) .end-panel .duel-end-head strong{font-size:8.5px!important}
  body:not(.battle-mode) .end-panel .duel-end-score{margin-top:2px!important}
  body:not(.battle-mode) .end-panel .duel-end-score b{font-size:15px!important;line-height:1!important}
  body:not(.battle-mode) .end-panel .duel-end-score em{font-size:6.5px!important}
  body:not(.battle-mode) .end-panel .duel-end-panel p{margin:3px 0 0!important;font-size:6.5px!important;line-height:1.15!important}
  body:not(.battle-mode) .end-panel>.axp-end-panel{
    grid-area:axp!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:6px 8px!important;
    border-radius:10px!important;
    align-self:stretch!important;
  }
  body:not(.battle-mode) .end-panel .axp-end-head{margin-bottom:3px!important}
  body:not(.battle-mode) .end-panel .axp-end-head span{font-size:7px!important}
  body:not(.battle-mode) .end-panel .axp-end-head strong{font-size:8.5px!important}
  body:not(.battle-mode) .end-panel .axp-end-team{gap:4px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie{padding:4px 6px!important;gap:1px!important;border-radius:7px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie b{font-size:8.5px!important;line-height:1.05!important}
  body:not(.battle-mode) .end-panel .axp-end-axie em{font-size:6.8px!important;line-height:1.05!important}
  body:not(.battle-mode) .end-panel .axp-end-status{margin:3px 1px 0!important;font-size:6.7px!important;line-height:1.15!important}
  body:not(.battle-mode) .end-panel>.end-actions{
    grid-area:actions!important;
    width:100%!important;
    max-width:none!important;
    margin:3px 0 0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
  }
  body:not(.battle-mode) .end-panel>.end-actions .btn{
    width:100%!important;
    min-height:40px!important;
    padding:7px 10px!important;
    font-size:clamp(10px,1.65vw,13px)!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
}
@media (orientation:landscape) and (max-width:999px) and (max-height:390px){
  body:not(.battle-mode) .end-panel{
    padding:6px 8px!important;
    column-gap:8px!important;
    row-gap:2px!important;
  }
  body:not(.battle-mode) .end-panel>.brand-mark{font-size:23px!important}
  body:not(.battle-mode) .end-panel>.eyebrow{font-size:7.5px!important}
  body:not(.battle-mode) .end-panel>#endTitle{font-size:clamp(25px,5.6vw,36px)!important}
  body:not(.battle-mode) .end-panel>#endReason{font-size:9px!important}
  body:not(.battle-mode) .end-panel>.duel-end-panel,
  body:not(.battle-mode) .end-panel>.axp-end-panel{padding:5px 7px!important}
  body:not(.battle-mode) .end-panel .axp-end-status{font-size:6.2px!important;margin-top:2px!important}
  body:not(.battle-mode) .end-panel>.end-actions{margin-top:2px!important;gap:6px!important}
  body:not(.battle-mode) .end-panel>.end-actions .btn{min-height:36px!important;padding:5px 8px!important;font-size:10px!important}
}

/* ============================================================
   A016R40R157 · MOBILE LANDSCAPE · BATTLE RESULT BALANCE
   Scope: only the end-of-battle summary on short phone landscape viewports.
   Goal: avoid the flattened ultra-wide look from R156 and use viewport height
   more naturally while still keeping the full summary on-screen with no scroll.
   Portrait and desktop remain untouched.
   ============================================================ */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body:not(.battle-mode) .end-panel{
    width:min(860px,calc(100% - 20px))!important;
    max-width:860px!important;
    min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px)!important;
    margin:max(6px,env(safe-area-inset-top)) auto max(6px,env(safe-area-inset-bottom))!important;
    padding:16px 16px 14px!important;
    grid-template-columns:minmax(250px,.86fr) minmax(0,1.14fr)!important;
    grid-template-areas:
      "mark duel"
      "eyebrow duel"
      "title axp"
      "reason axp"
      "actions actions"!important;
    grid-template-rows:auto auto auto 1fr auto!important;
    column-gap:16px!important;
    row-gap:8px!important;
    align-items:stretch!important;
    align-content:stretch!important;
  }
  body:not(.battle-mode) .end-panel>.brand-mark{
    font-size:40px!important;
    margin:2px 0 0!important;
    align-self:end!important;
  }
  body:not(.battle-mode) .end-panel>.eyebrow{
    font-size:12px!important;
    line-height:1.1!important;
    margin:0!important;
    align-self:start!important;
  }
  body:not(.battle-mode) .end-panel>#endTitle{
    font-size:clamp(46px,8vw,72px)!important;
    line-height:.92!important;
    margin:2px 0 0!important;
    align-self:end!important;
  }
  body:not(.battle-mode) .end-panel>#endReason{
    font-size:clamp(17px,2vw,22px)!important;
    line-height:1.2!important;
    margin:2px 0 0!important;
    align-self:start!important;
  }
  body:not(.battle-mode) .end-panel>.duel-end-panel,
  body:not(.battle-mode) .end-panel>.axp-end-panel{
    border-radius:14px!important;
    padding:10px 12px!important;
  }
  body:not(.battle-mode) .end-panel>.duel-end-panel{align-self:end!important;}
  body:not(.battle-mode) .end-panel>.axp-end-panel{align-self:start!important;}
  body:not(.battle-mode) .end-panel .duel-end-head span,
  body:not(.battle-mode) .end-panel .axp-end-head span{font-size:10px!important;line-height:1.1!important}
  body:not(.battle-mode) .end-panel .duel-end-head strong,
  body:not(.battle-mode) .end-panel .axp-end-head strong{font-size:14px!important;line-height:1.1!important}
  body:not(.battle-mode) .end-panel .duel-end-score{margin-top:5px!important}
  body:not(.battle-mode) .end-panel .duel-end-score b{font-size:27px!important;line-height:1!important}
  body:not(.battle-mode) .end-panel .duel-end-score em{font-size:11px!important;line-height:1.15!important}
  body:not(.battle-mode) .end-panel .duel-end-panel p{margin:6px 0 0!important;font-size:10px!important;line-height:1.25!important}
  body:not(.battle-mode) .end-panel .axp-end-head{margin-bottom:6px!important}
  body:not(.battle-mode) .end-panel .axp-end-team{gap:6px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie{padding:8px 10px!important;gap:2px!important;border-radius:10px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie b{font-size:12px!important;line-height:1.1!important}
  body:not(.battle-mode) .end-panel .axp-end-axie em{font-size:9px!important;line-height:1.15!important}
  body:not(.battle-mode) .end-panel .axp-end-status{margin:6px 1px 0!important;font-size:9px!important;line-height:1.25!important}
  body:not(.battle-mode) .end-panel>.end-actions{
    margin-top:8px!important;
    align-self:end!important;
    gap:10px!important;
  }
  body:not(.battle-mode) .end-panel>.end-actions .btn{
    min-height:56px!important;
    padding:10px 14px!important;
    font-size:clamp(15px,2.2vw,22px)!important;
    line-height:1.1!important;
    border-radius:16px!important;
  }
}
@media (orientation:landscape) and (max-width:999px) and (max-height:430px){
  body:not(.battle-mode) .end-panel{
    width:min(900px,calc(100% - 12px))!important;
    min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 10px)!important;
    padding:10px 12px 10px!important;
    grid-template-columns:minmax(210px,.82fr) minmax(0,1.18fr)!important;
    column-gap:12px!important;
    row-gap:5px!important;
  }
  body:not(.battle-mode) .end-panel>.brand-mark{font-size:30px!important;margin-top:0!important}
  body:not(.battle-mode) .end-panel>.eyebrow{font-size:9px!important}
  body:not(.battle-mode) .end-panel>#endTitle{font-size:clamp(38px,7vw,58px)!important}
  body:not(.battle-mode) .end-panel>#endReason{font-size:clamp(12px,1.75vw,16px)!important}
  body:not(.battle-mode) .end-panel>.duel-end-panel,
  body:not(.battle-mode) .end-panel>.axp-end-panel{padding:8px 10px!important;border-radius:12px!important}
  body:not(.battle-mode) .end-panel .duel-end-head span,
  body:not(.battle-mode) .end-panel .axp-end-head span{font-size:8px!important}
  body:not(.battle-mode) .end-panel .duel-end-head strong,
  body:not(.battle-mode) .end-panel .axp-end-head strong{font-size:11px!important}
  body:not(.battle-mode) .end-panel .duel-end-score{margin-top:3px!important}
  body:not(.battle-mode) .end-panel .duel-end-score b{font-size:20px!important}
  body:not(.battle-mode) .end-panel .duel-end-score em{font-size:8px!important}
  body:not(.battle-mode) .end-panel .duel-end-panel p{margin-top:4px!important;font-size:8px!important}
  body:not(.battle-mode) .end-panel .axp-end-head{margin-bottom:4px!important}
  body:not(.battle-mode) .end-panel .axp-end-team{gap:5px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie{padding:6px 8px!important;border-radius:8px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie b{font-size:10px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie em{font-size:7.5px!important}
  body:not(.battle-mode) .end-panel .axp-end-status{margin-top:4px!important;font-size:7.5px!important}
  body:not(.battle-mode) .end-panel>.end-actions{margin-top:6px!important;gap:8px!important}
  body:not(.battle-mode) .end-panel>.end-actions .btn{min-height:46px!important;padding:8px 10px!important;font-size:clamp(12px,1.85vw,17px)!important;border-radius:14px!important}
}
@media (orientation:landscape) and (max-width:999px) and (max-height:390px){
  body:not(.battle-mode) .end-panel{
    width:min(940px,calc(100% - 8px))!important;
    min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 6px)!important;
    padding:8px 9px!important;
    grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr)!important;
    column-gap:8px!important;
    row-gap:3px!important;
  }
  body:not(.battle-mode) .end-panel>.brand-mark{font-size:24px!important}
  body:not(.battle-mode) .end-panel>.eyebrow{font-size:7.6px!important}
  body:not(.battle-mode) .end-panel>#endTitle{font-size:clamp(32px,6vw,46px)!important}
  body:not(.battle-mode) .end-panel>#endReason{font-size:10px!important}
  body:not(.battle-mode) .end-panel>.duel-end-panel,
  body:not(.battle-mode) .end-panel>.axp-end-panel{padding:6px 8px!important;border-radius:10px!important}
  body:not(.battle-mode) .end-panel .duel-end-head span,
  body:not(.battle-mode) .end-panel .axp-end-head span{font-size:7px!important}
  body:not(.battle-mode) .end-panel .duel-end-head strong,
  body:not(.battle-mode) .end-panel .axp-end-head strong{font-size:9px!important}
  body:not(.battle-mode) .end-panel .duel-end-score b{font-size:16px!important}
  body:not(.battle-mode) .end-panel .duel-end-score em{font-size:6.8px!important}
  body:not(.battle-mode) .end-panel .duel-end-panel p{font-size:6.7px!important;margin-top:3px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie{padding:4px 6px!important;border-radius:7px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie b{font-size:8.6px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie em{font-size:6.8px!important}
  body:not(.battle-mode) .end-panel .axp-end-status{font-size:6.7px!important;margin-top:3px!important}
  body:not(.battle-mode) .end-panel>.end-actions{margin-top:3px!important;gap:6px!important}
  body:not(.battle-mode) .end-panel>.end-actions .btn{min-height:38px!important;padding:6px 8px!important;font-size:10.5px!important;border-radius:12px!important}
}

/* ============================================================
   A016R40R158 · MOBILE LANDSCAPE · RESULT BALANCE CORRECTION
   Corrects R157 over-expansion: natural height, centered card, no dead zone.
   Scope remains mobile landscape end screen only. Portrait/desktop untouched.
   ============================================================ */
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body:not(.battle-mode) .end-panel{
    width:min(780px,calc(100% - 20px))!important;
    max-width:780px!important;
    min-height:0!important;
    height:auto!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 14px)!important;
    margin:max(7px,env(safe-area-inset-top)) auto max(7px,env(safe-area-inset-bottom))!important;
    padding:12px 14px!important;
    grid-template-columns:minmax(220px,.88fr) minmax(0,1.12fr)!important;
    grid-template-areas:
      "mark duel"
      "eyebrow duel"
      "title axp"
      "reason axp"
      "actions actions"!important;
    grid-template-rows:auto auto auto auto auto!important;
    column-gap:14px!important;
    row-gap:5px!important;
    align-items:center!important;
    align-content:center!important;
    overflow:hidden!important;
  }
  body:not(.battle-mode) .end-panel>.brand-mark{font-size:32px!important;margin:0!important;align-self:end!important}
  body:not(.battle-mode) .end-panel>.eyebrow{font-size:9.5px!important;line-height:1.05!important;margin:0!important;align-self:start!important}
  body:not(.battle-mode) .end-panel>#endTitle{font-size:clamp(36px,6.5vw,54px)!important;line-height:.94!important;margin:1px 0 0!important;align-self:end!important}
  body:not(.battle-mode) .end-panel>#endReason{font-size:clamp(11px,1.6vw,15px)!important;line-height:1.15!important;margin:1px 0 0!important;align-self:start!important}
  body:not(.battle-mode) .end-panel>.duel-end-panel,
  body:not(.battle-mode) .end-panel>.axp-end-panel{padding:7px 9px!important;border-radius:11px!important;align-self:stretch!important}
  body:not(.battle-mode) .end-panel .duel-end-head span,
  body:not(.battle-mode) .end-panel .axp-end-head span{font-size:7.5px!important;line-height:1.05!important}
  body:not(.battle-mode) .end-panel .duel-end-head strong,
  body:not(.battle-mode) .end-panel .axp-end-head strong{font-size:10px!important;line-height:1.05!important}
  body:not(.battle-mode) .end-panel .duel-end-score{margin-top:3px!important}
  body:not(.battle-mode) .end-panel .duel-end-score b{font-size:19px!important;line-height:1!important}
  body:not(.battle-mode) .end-panel .duel-end-score em{font-size:7px!important}
  body:not(.battle-mode) .end-panel .duel-end-panel p{margin:3px 0 0!important;font-size:7px!important;line-height:1.15!important}
  body:not(.battle-mode) .end-panel .axp-end-head{margin-bottom:3px!important}
  body:not(.battle-mode) .end-panel .axp-end-team{gap:4px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie{padding:5px 7px!important;gap:1px!important;border-radius:8px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie b{font-size:9px!important;line-height:1.05!important}
  body:not(.battle-mode) .end-panel .axp-end-axie em{font-size:7px!important;line-height:1.05!important}
  body:not(.battle-mode) .end-panel .axp-end-status{margin:3px 1px 0!important;font-size:6.8px!important;line-height:1.12!important}
  body:not(.battle-mode) .end-panel>.end-actions{margin:5px 0 0!important;gap:8px!important;align-self:auto!important}
  body:not(.battle-mode) .end-panel>.end-actions .btn{min-height:42px!important;padding:7px 10px!important;font-size:clamp(11px,1.6vw,14px)!important;line-height:1.05!important;border-radius:12px!important}
}
@media (orientation:landscape) and (max-width:999px) and (max-height:430px){
  body:not(.battle-mode) .end-panel{
    width:min(820px,calc(100% - 12px))!important;
    max-width:820px!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px)!important;
    margin:max(4px,env(safe-area-inset-top)) auto max(4px,env(safe-area-inset-bottom))!important;
    padding:8px 10px!important;
    grid-template-columns:minmax(200px,.84fr) minmax(0,1.16fr)!important;
    column-gap:10px!important;
    row-gap:3px!important;
  }
  body:not(.battle-mode) .end-panel>.brand-mark{font-size:26px!important}
  body:not(.battle-mode) .end-panel>.eyebrow{font-size:8px!important}
  body:not(.battle-mode) .end-panel>#endTitle{font-size:clamp(31px,5.8vw,44px)!important}
  body:not(.battle-mode) .end-panel>#endReason{font-size:10px!important}
  body:not(.battle-mode) .end-panel>.duel-end-panel,
  body:not(.battle-mode) .end-panel>.axp-end-panel{padding:6px 8px!important;border-radius:9px!important}
  body:not(.battle-mode) .end-panel .duel-end-score b{font-size:16px!important}
  body:not(.battle-mode) .end-panel .duel-end-panel p,
  body:not(.battle-mode) .end-panel .axp-end-status{font-size:6.2px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie{padding:4px 6px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie b{font-size:8px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie em{font-size:6.4px!important}
  body:not(.battle-mode) .end-panel>.end-actions{margin-top:3px!important;gap:6px!important}
  body:not(.battle-mode) .end-panel>.end-actions .btn{min-height:36px!important;padding:5px 8px!important;font-size:10px!important;border-radius:10px!important}
}

/* ============================================================
   A016R40R159 · UNIFIED POST-BATTLE LAYOUT
   Canonical rule: mobile uses the SAME post-battle composition as desktop.
   Same blocks, same order, same three-column AXIE CORE, same two-button row.
   Only scale/padding change by viewport. No alternative mobile composition.
   ============================================================ */
@media (max-width:599px){
  body:not(.battle-mode) .end-panel{
    display:block!important;
    width:min(620px,calc(100% - 14px))!important;
    max-width:620px!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:max(7px,env(safe-area-inset-top)) auto max(8px,env(safe-area-inset-bottom))!important;
    padding:16px!important;
    overflow:visible!important;
    text-align:center!important;
  }
  body:not(.battle-mode) .end-panel>.brand-mark{font-size:38px!important;line-height:1!important;margin:0!important}
  body:not(.battle-mode) .end-panel>.eyebrow{font-size:10px!important;line-height:1.1!important;margin:7px 0!important;letter-spacing:.16em!important}
  body:not(.battle-mode) .end-panel>#endTitle{font-size:clamp(38px,11vw,48px)!important;line-height:.98!important;margin:12px 0!important;font-weight:800!important}
  body:not(.battle-mode) .end-panel>#endReason{font-size:clamp(14px,4vw,17px)!important;line-height:1.25!important;margin:0 0 14px!important}
  body:not(.battle-mode) .end-panel>.duel-end-panel,
  body:not(.battle-mode) .end-panel>.axp-end-panel{
    display:block!important;
    width:min(100%,520px)!important;
    max-width:520px!important;
    margin:10px auto 0!important;
    padding:9px 10px!important;
    border-radius:12px!important;
    text-align:left!important;
  }
  body:not(.battle-mode) .end-panel .duel-end-head span,
  body:not(.battle-mode) .end-panel .axp-end-head span{font-size:8px!important;line-height:1.1!important}
  body:not(.battle-mode) .end-panel .duel-end-head strong,
  body:not(.battle-mode) .end-panel .axp-end-head strong{font-size:10px!important;line-height:1.1!important}
  body:not(.battle-mode) .end-panel .duel-end-score{margin-top:4px!important}
  body:not(.battle-mode) .end-panel .duel-end-score b{font-size:18px!important;line-height:1!important}
  body:not(.battle-mode) .end-panel .duel-end-score em{font-size:7px!important}
  body:not(.battle-mode) .end-panel .duel-end-panel p{margin:5px 0 0!important;font-size:7.5px!important;line-height:1.3!important}
  body:not(.battle-mode) .end-panel .axp-end-head{margin-bottom:6px!important}
  body:not(.battle-mode) .end-panel .axp-end-team{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie{padding:6px!important;gap:2px!important;border-radius:8px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie b{font-size:9px!important;line-height:1.05!important}
  body:not(.battle-mode) .end-panel .axp-end-axie em{font-size:7px!important;line-height:1.1!important}
  body:not(.battle-mode) .end-panel .axp-end-status{margin:6px 1px 0!important;font-size:7.5px!important;line-height:1.25!important}
  body:not(.battle-mode) .end-panel>.end-actions{
    width:min(100%,520px)!important;
    max-width:520px!important;
    margin:14px auto 0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;
    gap:8px!important;
  }
  body:not(.battle-mode) .end-panel>.end-actions .btn{
    width:100%!important;
    min-height:50px!important;
    padding:8px 9px!important;
    font-size:clamp(11px,3vw,14px)!important;
    line-height:1.15!important;
    white-space:normal!important;
    border-radius:13px!important;
  }
}

@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body:not(.battle-mode) .end-panel{
    display:block!important;
    width:min(520px,calc(100% - 18px))!important;
    max-width:520px!important;
    min-height:0!important;
    height:auto!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px)!important;
    margin:max(4px,env(safe-area-inset-top)) auto max(4px,env(safe-area-inset-bottom))!important;
    padding:9px 11px!important;
    overflow:hidden!important;
    text-align:center!important;
  }
  body:not(.battle-mode) .end-panel>.brand-mark{font-size:23px!important;line-height:1!important;margin:0!important}
  body:not(.battle-mode) .end-panel>.eyebrow{font-size:7px!important;line-height:1.05!important;margin:3px 0!important;letter-spacing:.15em!important}
  body:not(.battle-mode) .end-panel>#endTitle{font-size:32px!important;line-height:.96!important;margin:5px 0!important;font-weight:800!important}
  body:not(.battle-mode) .end-panel>#endReason{font-size:9px!important;line-height:1.15!important;margin:0 0 6px!important}
  body:not(.battle-mode) .end-panel>.duel-end-panel,
  body:not(.battle-mode) .end-panel>.axp-end-panel{
    display:block!important;
    width:100%!important;
    max-width:520px!important;
    margin:6px auto 0!important;
    padding:6px 8px!important;
    border-radius:9px!important;
    text-align:left!important;
  }
  body:not(.battle-mode) .end-panel .duel-end-head span,
  body:not(.battle-mode) .end-panel .axp-end-head span{font-size:6.5px!important;line-height:1!important}
  body:not(.battle-mode) .end-panel .duel-end-head strong,
  body:not(.battle-mode) .end-panel .axp-end-head strong{font-size:8px!important;line-height:1!important}
  body:not(.battle-mode) .end-panel .duel-end-score{margin-top:2px!important}
  body:not(.battle-mode) .end-panel .duel-end-score b{font-size:14px!important;line-height:1!important}
  body:not(.battle-mode) .end-panel .duel-end-score em{font-size:5.8px!important}
  body:not(.battle-mode) .end-panel .duel-end-panel p{margin:3px 0 0!important;font-size:5.8px!important;line-height:1.15!important}
  body:not(.battle-mode) .end-panel .axp-end-head{margin-bottom:3px!important}
  body:not(.battle-mode) .end-panel .axp-end-team{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie{padding:4px 5px!important;gap:1px!important;border-radius:7px!important}
  body:not(.battle-mode) .end-panel .axp-end-axie b{font-size:7px!important;line-height:1.05!important}
  body:not(.battle-mode) .end-panel .axp-end-axie em{font-size:5.8px!important;line-height:1.05!important}
  body:not(.battle-mode) .end-panel .axp-end-status{margin:3px 1px 0!important;font-size:5.8px!important;line-height:1.12!important}
  body:not(.battle-mode) .end-panel>.end-actions{
    width:100%!important;
    max-width:520px!important;
    margin:6px auto 0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;
    gap:6px!important;
  }
  body:not(.battle-mode) .end-panel>.end-actions .btn{
    width:100%!important;
    min-height:36px!important;
    padding:5px 7px!important;
    font-size:9px!important;
    line-height:1.05!important;
    white-space:normal!important;
    border-radius:9px!important;
  }
}

/* ============================================================
   A016R40R160 · SCREEN ISOLATION FIX
   HOME and END SCREEN are independent, mutually exclusive screens.
   Responsive result layout must NEVER override the global hidden state.
   ============================================================ */
#home.hidden,
#endScreen.hidden{
  display:none!important;
}
#endScreen #axpEndPanel.hidden,
#endScreen .duel-end-panel.hidden{
  display:none!important;
}


/* ========================================================================== */
/* A016R40R174 · DASHBOARD UX ACTIVATION                                      */
/* Equipo y Token ya incluyen una franja intermedia propia.                    */
/* Las demás pestañas reciben el mismo aire visual bajo la cabecera principal. */
/* ========================================================================== */
#lobby .picker-layout.hub-content-gap{
  margin-top:16px!important;
}

/* CÓMO JUGAR usa el mismo componente canónico de carta que CARTAS. */
#lobby #guideMain .guide-real-card .card-lab-preview{
  min-height:0!important;
  aspect-ratio:.60!important;
}
#lobby #guideMain .guide-real-card .card-lab-art{
  min-height:0!important;
}

/* RANKING · legibilidad de escritorio. No compactar texto de competición. */
@media (min-width:761px){
  #lobby #rankingMain{padding:20px!important;gap:16px!important}
  #lobby #rankingMain .ranking-kicker{font-size:11px!important}
  #lobby #rankingMain .ranking-main-head h3{font-size:30px!important;line-height:1.05!important}
  #lobby #rankingMain .ranking-main-head p{font-size:14px!important;line-height:1.5!important}
  #lobby #rankingMain .ranking-badge{font-size:10px!important;padding:7px 11px!important}
  #lobby #rankingMain .ranking-current-card span{font-size:10px!important}
  #lobby #rankingMain .ranking-current-card strong{font-size:18px!important}
  #lobby #rankingMain .ranking-stamina-policy>header strong{font-size:14px!important}
  #lobby #rankingMain .ranking-stamina-policy>header em{font-size:10px!important}
  #lobby #rankingMain .ranking-stamina-rules b{font-size:10.5px!important}
  #lobby #rankingMain .ranking-stamina-rules span{font-size:12px!important}
  #lobby #rankingMain .ranking-stamina-rules small{font-size:9px!important;line-height:1.4!important}
  #lobby #rankingMain .ranking-tier-card header span{font-size:10px!important}
  #lobby #rankingMain .ranking-tier-card header strong{font-size:17px!important}
  #lobby #rankingMain .ranking-tier-mode small{font-size:8.5px!important}
  #lobby #rankingMain .ranking-tier-mode span{font-size:10px!important}
  #lobby #rankingMain .ranking-tier-mode b{font-size:11px!important}
  #lobby #rankingMain .ranking-tier-axp{font-size:11px!important}
  #lobby #rankingMain .ranking-tier-axp small{font-size:8.5px!important}
  #lobby #rankingMain .ranking-matchmaking-note strong{font-size:10.5px!important}
  #lobby #rankingMain .ranking-matchmaking-note span{font-size:12px!important}
  #lobby #rankingMain .ranking-matchmaking-note small{font-size:9.5px!important;line-height:1.4!important}
  #lobby #rankingSidebar .ranking-side-kicker{font-size:9px!important}
  #lobby #rankingSidebar h4{font-size:18px!important}
  #lobby #rankingSidebar .ranking-side-points{font-size:26px!important}
  #lobby #rankingSidebar p{font-size:9.5px!important;line-height:1.4!important}
  #lobby #rankingSidebar .ranking-side-stamina span{font-size:8px!important}
  #lobby #rankingSidebar .ranking-side-stamina b{font-size:12px!important}
  #lobby #rankingSidebar .ranking-side-stamina em{font-size:8px!important}
  #lobby #rankingSidebar .ranking-side-record span{font-size:8px!important}
  #lobby #rankingSidebar .ranking-side-record b{font-size:11px!important}
  #lobby #rankingSidebar>small{font-size:8.5px!important;line-height:1.4!important}
}


/* ==========================================================================
   A016R40R183 · HOME LANGUAGE SELECTOR · 10 LOCALES
   Selector only on HOME. Translation engine is presentation-only.
   ========================================================================== */
#home.home-panel{position:relative}
#home .home-language-picker{
  position:absolute;
  top:16px;
  left:18px;
  right:auto;
  z-index:20;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px 6px 10px;
  border:1px solid rgba(135,158,193,.30);
  border-radius:10px;
  background:rgba(9,15,25,.76);
  box-shadow:0 8px 22px rgba(0,0,0,.20);
  backdrop-filter:blur(8px);
}
#home .home-language-picker label{
  display:flex;
  align-items:center;
  gap:5px;
  margin:0;
  color:#9fb0c7;
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
#home .home-language-picker select{
  min-width:128px;
  height:30px;
  padding:0 28px 0 9px;
  border:1px solid #3b4c66;
  border-radius:8px;
  background:#101827;
  color:#f4f7fb;
  font-size:10px;
  font-weight:900;
  outline:none;
  cursor:pointer;
}
#home .home-language-picker select:focus{
  border-color:#d6aa49;
  box-shadow:0 0 0 2px rgba(214,170,73,.12);
}
@media(max-width:720px){
  #home .home-language-picker{
    top:12px;
    left:10px;
    right:auto;
    padding:4px 5px;
    gap:0;
  }
  #home .home-language-picker label{display:none}
  #home .home-language-picker select{min-width:114px;width:114px;height:28px;padding:0 18px 0 7px;font-size:9px}
}
@media(max-width:360px){
  #home .home-language-picker{top:58px;left:10px}
}

/* A016R40R183 · locale-aware lobby brand order.
   ES/PT/VI/ID read naturally as “Arena Ronin”; EN/HI/FIL/TH/ZH/JA read
   naturally with the room/name before the arena noun. */
#lobby .lobby-arena-brand{display:flex;align-items:center;gap:.34em}
html[data-axie-lang="en"] #lobby .lobby-arena-brand #roomCode,
html[data-axie-lang="hi"] #lobby .lobby-arena-brand #roomCode,
html[data-axie-lang="fil"] #lobby .lobby-arena-brand #roomCode,
html[data-axie-lang="th"] #lobby .lobby-arena-brand #roomCode,
html[data-axie-lang="zh-CN"] #lobby .lobby-arena-brand #roomCode,
html[data-axie-lang="ja"] #lobby .lobby-arena-brand #roomCode{order:-1}

/* ========================================================================
   R191 · BATTLE CARD VALUE MEDALLION OPTICAL CENTERING
   Keep the canonical card frame and medallion geometry untouched. Responsive
   rules may resize the value node; this final rule makes the numeral fill the
   medallion and centers its glyph instead of leaving it at the block origin.
   ======================================================================== */
body.battle-mode .duel-card-chrome.card-artframe-v3 .duel-card-value-shell > .duel-card-value{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  padding:0!important;
  margin:0!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-align:center!important;
  font-variant-numeric:tabular-nums!important;
}


/* ============================================================
   A016R40R194 · MOBILE HOME WALLET / LANGUAGE SEPARATION
   HOME only. On narrow screens the language selector remains anchored left
   while the connected Ronin account is anchored right. The wallet can shrink
   without covering the language control; desktop layout is unchanged.
   ============================================================ */
@media (max-width:720px){
  #home .wallet-account{
    top:12px!important;
    left:auto!important;
    right:10px!important;
    width:auto!important;
    max-width:calc(100% - 146px)!important;
    display:flex!important;
    justify-content:flex-end!important;
  }
  #home .wallet-account-btn{
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  #home .wallet-account-address{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #home .wallet-account-count,
  #home .wallet-account-chevron,
  #home .wallet-account-btn>strong,
  #home .wallet-account-btn>.wallet-dot{flex:0 0 auto!important}
  #home .wallet-menu{
    left:auto!important;
    right:0!important;
    margin:0!important;
    width:min(300px,calc(100vw - 28px))!important;
  }
}
@media (max-width:360px){
  #home .home-language-picker{
    top:12px!important;
    left:10px!important;
    right:auto!important;
  }
  #home .wallet-account{
    top:12px!important;
    right:10px!important;
    max-width:calc(100% - 136px)!important;
  }
  #home .wallet-account-btn{
    padding:6px 8px!important;
    gap:4px!important;
    font-size:10px!important;
  }
}

/* ========================================================================
   A016R40R195 · REAL METRICS / PRIVATE-FIRST OBSERVABILITY
   - Dashboard icon is hidden unless metrics are public or this browser holds
     the private admin cookie.
   - Public flag defaults OFF. Admin can enable/disable public visibility later.
   - The icon occupies a compact dedicated slot; no gameplay surface changes.
   ======================================================================== */
#lobby .metrics-launch{grid-area:metrics!important;min-width:0!important;font-size:15px!important;padding:0!important}
#lobby .lobby-head-right.metrics-visible{
  grid-template-columns:minmax(84px,.85fr) minmax(74px,.72fr) minmax(74px,.72fr) minmax(58px,.55fr) minmax(76px,.68fr) 42px minmax(156px,1.42fr)!important;
  grid-template-areas:"rank points stamina axies back metrics wallet"!important;
}
.metrics-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px;background:rgba(3,7,14,.76);backdrop-filter:blur(8px)}
.metrics-modal.hidden{display:none!important}
.metrics-dialog{width:min(680px,calc(100vw - 28px));max-height:min(760px,calc(100dvh - 28px));overflow:auto;border:1px solid #35455f;border-radius:18px;background:linear-gradient(180deg,#111a2a,#0c1320);box-shadow:0 24px 80px rgba(0,0,0,.5);padding:16px;color:#edf3fb}
.metrics-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.metrics-head>div{display:flex;align-items:center;gap:8px;min-width:0}
.metrics-head strong{font-size:16px;letter-spacing:.08em}.metrics-head small{font-size:9px;color:#f0cf73;border:1px solid rgba(240,207,115,.35);border-radius:999px;padding:3px 7px;letter-spacing:.08em}
.metrics-live-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px rgba(74,222,128,.7)}
.metrics-close{width:34px;height:34px;border:1px solid #3c4c66;border-radius:9px;background:#121c2c;color:#eaf1f9;font-size:23px;line-height:1;cursor:pointer}
.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.metrics-grid article{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:96px;border:1px solid #2b3b55;border-radius:12px;background:#0f1827;padding:10px;text-align:center}
.metrics-grid small,.metrics-admin-row small{font-size:8px;letter-spacing:.12em;color:#8fa0b6}.metrics-grid strong{font-size:28px;line-height:1;color:#f6d267;margin:5px 0}.metrics-grid span{font-size:8px;color:#718199}
.metrics-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.metrics-modes span{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #2a3951;border-radius:10px;background:#101827;padding:10px 12px}.metrics-modes b{font-size:10px;color:#98a8ba}.metrics-modes strong{font-size:16px;color:#eaf1f9}
.metrics-admin-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}.metrics-admin-row.hidden{display:none!important}.metrics-admin-row span{display:flex;flex-direction:column;gap:3px;border:1px dashed #3c4c66;border-radius:10px;padding:9px;text-align:center}.metrics-admin-row b{font-size:13px;color:#dce7f4}
.metrics-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid #25344a}.metrics-foot>span{font-size:9px;color:#778aa2}.metrics-public-toggle{border:1px solid #7b5d20;border-radius:999px;background:#241b0d;color:#f2cf75;font-size:9px;font-weight:900;letter-spacing:.08em;padding:7px 10px;cursor:pointer}.metrics-public-toggle.on{border-color:#287149;background:#10291c;color:#7de3a6}.metrics-public-toggle.hidden{display:none!important}
.metrics-note{margin:10px 0 0;font-size:8px;line-height:1.4;color:#6f8198;text-align:center}
@media (max-width:599px){
  #lobby .lobby-head-right.metrics-visible{
    grid-template-columns:minmax(58px,.90fr) minmax(43px,.68fr) minmax(46px,.72fr) minmax(38px,.56fr) minmax(44px,.62fr) 32px minmax(84px,1.26fr)!important;
    grid-template-areas:"rank points stamina axies back metrics wallet"!important;gap:2px!important;
  }
  #lobby .metrics-launch{font-size:13px!important;min-height:42px!important}
  .metrics-modal{padding:8px}.metrics-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px;border-radius:14px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics-grid article{min-height:78px}.metrics-grid strong{font-size:24px}.metrics-admin-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:360px){
  #lobby .lobby-head-right.metrics-visible{grid-template-columns:minmax(53px,.9fr) 40px 43px 35px 40px 28px minmax(76px,1.22fr)!important}
  #lobby .metrics-launch{font-size:12px!important}
}


/* ========================================================================
   A016R40R196 · METRICS ANALYTICS DRILLDOWN
   - Admin-only daily/monthly real analytics; public summary remains compact.
   - History is derived only from the aggregate day files already captured by R195.
   ======================================================================== */
.metrics-analytics{margin-top:12px;padding-top:12px;border-top:1px solid #25344a}.metrics-analytics.hidden{display:none!important}
.metrics-analytics:not(.hidden)~.metrics-foot{}
.metrics-dialog:has(.metrics-analytics:not(.hidden)){width:min(980px,calc(100vw - 28px))}
.metrics-analytics-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:9px}.metrics-analytics-head>div:first-child{display:flex;flex-direction:column;gap:2px}.metrics-analytics-head strong{font-size:12px;letter-spacing:.08em;color:#e9f0f8}.metrics-analytics-head small{font-size:8px;color:#788ba3}
.metrics-range{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.metrics-range button{border:1px solid #31425c;border-radius:7px;background:#101827;color:#899ab0;font-size:9px;font-weight:800;padding:6px 9px;cursor:pointer}.metrics-range button.active{border-color:#b1842f;background:#2b2110;color:#f4d375}
.metrics-period-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:8px}.metrics-period-grid span{display:flex;flex-direction:column;gap:3px;padding:8px;border:1px solid #293950;border-radius:9px;background:#0e1725;text-align:center}.metrics-period-grid small{font-size:7px;letter-spacing:.1em;color:#7d8fa6}.metrics-period-grid b{font-size:14px;color:#eaf2fb}
.metrics-chart-card{border:1px solid #293950;border-radius:11px;background:#0d1522;padding:10px}.metrics-chart-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:9px;font-weight:900;letter-spacing:.08em;color:#8ea1b8}.metrics-chart-legend{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:700;letter-spacing:0;color:#73869f}.metrics-chart-legend i{width:8px;height:8px;border-radius:2px;margin-left:5px}.metrics-chart-legend i.pvp,.metrics-chart-stack i.pvp{background:#e6b84c}.metrics-chart-legend i.demo,.metrics-chart-stack i.demo{background:#55a8e7}.metrics-chart-legend i.training,.metrics-chart-stack i.training{background:#5fc98b}
.metrics-chart-scroll{overflow-x:auto;overflow-y:hidden;padding:3px 1px 1px}.metrics-history-chart{height:178px;display:flex;align-items:flex-end;gap:5px;border-bottom:1px solid #26364b;padding:20px 6px 22px}.metrics-chart-group{height:100%;min-width:24px;flex:1 0 24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative}.metrics-chart-group>b{font-size:8px;color:#8ea1b7;margin-bottom:3px}.metrics-chart-stack{width:min(20px,78%);min-height:2px;display:flex;flex-direction:column-reverse;border-radius:4px 4px 1px 1px;overflow:hidden;background:#172338}.metrics-chart-stack i{display:block;min-height:1px}.metrics-chart-stack i.zero{height:2px;background:#26374d;flex:1}.metrics-chart-group>small{position:absolute;bottom:-18px;font-size:7px;color:#72859c;white-space:nowrap}
.metrics-table-wrap{overflow:auto;max-height:260px;margin-top:8px;border:1px solid #293950;border-radius:10px}.metrics-history-table{width:100%;border-collapse:collapse;min-width:790px;font-size:9px}.metrics-history-table thead{position:sticky;top:0;z-index:1;background:#111c2c}.metrics-history-table th,.metrics-history-table td{padding:7px 8px;border-bottom:1px solid #223148;text-align:right;color:#aebccd;white-space:nowrap}.metrics-history-table th:first-child,.metrics-history-table tbody th{text-align:left}.metrics-history-table thead th{font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:#71859e}.metrics-history-table tbody th{color:#dce6f1;font-weight:700}.metrics-history-table tbody tr:last-child>*{border-bottom:0}
@media (max-width:699px){.metrics-dialog:has(.metrics-analytics:not(.hidden)){width:calc(100vw - 16px)}.metrics-analytics-head{align-items:flex-start;flex-direction:column}.metrics-range{justify-content:flex-start}.metrics-period-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.metrics-history-chart{height:150px}.metrics-table-wrap{max-height:220px}}


/* ========================================================================
   A016R40R197 · METRICS COMPACT COCKPIT
   - One-screen admin cockpit: no internal vertical/horizontal scroll on desktop.
   - Day / Month / Year real analytics by battle mode.
   - Mobile uses a compact one-screen composition instead of a long report.
   ======================================================================== */
.metrics-dialog.admin-view{width:min(1180px,calc(100vw - 18px));height:min(720px,calc(100dvh - 18px));max-height:none;overflow:hidden!important;padding:12px;display:flex;flex-direction:column;gap:8px}
.metrics-dialog.admin-view .metrics-head{margin:0;min-height:34px;flex:0 0 auto}.metrics-dialog.admin-view .metrics-close{width:32px;height:32px;font-size:21px}.metrics-dialog.admin-view .metrics-head strong{font-size:15px}
.metrics-kpi-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;flex:0 0 auto}.metrics-kpi-grid article{min-height:70px;padding:7px 6px;border-radius:10px}.metrics-kpi-grid strong{font-size:22px;margin:3px 0}.metrics-kpi-grid small{font-size:7px}.metrics-kpi-grid span{font-size:7px}.metrics-kpi-grid .mode-pvp{border-color:rgba(230,184,76,.38)}.metrics-kpi-grid .mode-demo{border-color:rgba(85,168,231,.38)}.metrics-kpi-grid .mode-train{border-color:rgba(95,201,139,.38)}
.metrics-dialog.admin-view .metrics-analytics{margin:0;padding:8px 0 0;border-top:1px solid #25344a;min-height:0;flex:1 1 auto;display:flex;flex-direction:column;gap:7px;overflow:hidden}.metrics-dialog.admin-view .metrics-analytics.hidden{display:none!important}
.metrics-dialog.admin-view .metrics-analytics-head{margin:0;align-items:center;min-height:31px;flex:0 0 auto}.metrics-dialog.admin-view .metrics-analytics-head strong{font-size:11px}.metrics-dialog.admin-view .metrics-analytics-head small{font-size:7px}.metrics-range{flex-wrap:nowrap}.metrics-range button{padding:5px 13px;font-size:9px;min-width:58px}
.metrics-cockpit-main{min-height:0;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(230px,.62fr);gap:8px;overflow:hidden}.metrics-dialog.admin-view .metrics-chart-card{padding:8px;min-height:0;display:flex;flex-direction:column;overflow:hidden}.metrics-dialog.admin-view .metrics-chart-title{margin-bottom:4px;min-height:20px;flex:0 0 auto}.metrics-dialog.admin-view .metrics-chart-scroll{overflow:hidden!important;min-height:0;flex:1 1 auto;padding:0}.metrics-dialog.admin-view .metrics-history-chart{height:100%;min-height:0;padding:16px 3px 20px;gap:2px}.metrics-dialog.admin-view .metrics-chart-group{min-width:0;flex:1 1 0}.metrics-dialog.admin-view .metrics-chart-group>b{font-size:7px;margin-bottom:2px}.metrics-dialog.admin-view .metrics-chart-stack{width:min(16px,72%)}.metrics-dialog.admin-view .metrics-chart-group>small{font-size:6px;bottom:-15px}
.metrics-side-panel{border:1px solid #293950;border-radius:11px;background:#0d1522;padding:9px;display:flex;flex-direction:column;gap:9px;min-height:0;overflow:hidden}.metrics-side-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.metrics-side-head strong{font-size:9px;letter-spacing:.08em;color:#93a7c0}.metrics-side-head small{font-size:8px;color:#73869e}.metrics-mode-bars{display:flex;flex-direction:column;gap:7px}.metrics-mode-bars>div{display:flex;flex-direction:column;gap:3px}.metrics-mode-bars span{display:flex;justify-content:space-between;align-items:center;font-size:9px}.metrics-mode-bars b{color:#cbd7e5}.metrics-mode-bars em{font-style:normal;color:#f3f6fa}.metrics-mode-bars i{display:block;height:7px;background:#172338;border-radius:99px;overflow:hidden}.metrics-mode-bars u{display:block;height:100%;width:0;border-radius:99px;transition:width .2s ease}.metrics-mode-bars>div:nth-child(1) u{background:#e6b84c}.metrics-mode-bars>div:nth-child(2) u{background:#55a8e7}.metrics-mode-bars>div:nth-child(3) u{background:#5fc98b}
.metrics-completion-card{margin-top:auto;display:grid;grid-template-columns:94px 1fr;align-items:center;gap:9px;padding-top:8px;border-top:1px solid #223148}.metrics-completion-ring{--completion:0deg;width:88px;height:88px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:conic-gradient(#5fc98b var(--completion),#1b2839 0)}.metrics-completion-ring:after{content:'';position:absolute;inset:9px;border-radius:50%;background:#0d1522}.metrics-completion-ring strong,.metrics-completion-ring small{position:relative;z-index:1}.metrics-completion-ring strong{font-size:17px;color:#edf4fb}.metrics-completion-ring small{font-size:7px;color:#8194aa}.metrics-completion-stats{display:grid;gap:6px}.metrics-completion-stats span{display:flex;align-items:center;justify-content:space-between;border:1px solid #26364c;border-radius:8px;padding:7px 8px}.metrics-completion-stats small{font-size:7px;color:#7f92aa}.metrics-completion-stats b{font-size:13px;color:#e8f0f9}
.metrics-dialog.admin-view .metrics-period-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;flex:0 0 auto}.metrics-dialog.admin-view .metrics-period-grid span{padding:6px 8px;min-height:42px;justify-content:center}.metrics-dialog.admin-view .metrics-period-grid small{font-size:6px}.metrics-dialog.admin-view .metrics-period-grid b{font-size:13px}.metrics-dialog.admin-view .metrics-admin-row{display:none!important}
.metrics-dialog.admin-view .metrics-foot{margin:0;padding-top:6px;min-height:27px;flex:0 0 auto}.metrics-dialog.admin-view .metrics-note{margin:0;font-size:7px;line-height:1.1;flex:0 0 auto}
@media (max-height:660px) and (min-width:700px){.metrics-dialog.admin-view{height:calc(100dvh - 10px);padding:8px;gap:5px}.metrics-kpi-grid article{min-height:58px}.metrics-kpi-grid strong{font-size:19px}.metrics-dialog.admin-view .metrics-history-chart{padding-top:10px}.metrics-completion-ring{width:72px;height:72px}.metrics-completion-card{grid-template-columns:78px 1fr}.metrics-dialog.admin-view .metrics-note{display:none}}
@media (max-width:699px){
  .metrics-modal{padding:4px}.metrics-dialog.admin-view{width:calc(100vw - 8px);height:calc(100dvh - 8px);padding:8px;gap:5px;border-radius:12px}
  .metrics-dialog.admin-view .metrics-head{min-height:30px}.metrics-dialog.admin-view .metrics-head strong{font-size:13px}.metrics-dialog.admin-view .metrics-close{width:29px;height:29px}
  .metrics-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.metrics-kpi-grid article{min-height:52px;padding:4px}.metrics-kpi-grid strong{font-size:17px}.metrics-kpi-grid span{display:none}
  .metrics-dialog.admin-view .metrics-analytics{padding-top:5px;gap:4px}.metrics-dialog.admin-view .metrics-analytics-head{min-height:28px}.metrics-dialog.admin-view .metrics-analytics-head>div:first-child small{display:none}.metrics-range button{padding:4px 8px;min-width:48px;font-size:8px}
  .metrics-cockpit-main{grid-template-columns:1fr;grid-template-rows:minmax(120px,1fr) 100px;gap:4px}.metrics-dialog.admin-view .metrics-chart-card{padding:5px}.metrics-dialog.admin-view .metrics-history-chart{padding:10px 1px 15px;gap:1px}.metrics-dialog.admin-view .metrics-chart-stack{width:min(10px,75%)}.metrics-dialog.admin-view .metrics-chart-group>small{font-size:5px;bottom:-12px}.metrics-dialog.admin-view .metrics-chart-group>b{font-size:6px}
  .metrics-side-panel{padding:5px;display:grid;grid-template-columns:1.3fr .8fr;grid-template-rows:auto 1fr;gap:4px 8px}.metrics-side-head{grid-column:1/-1}.metrics-mode-bars{gap:4px}.metrics-mode-bars span{font-size:8px}.metrics-mode-bars i{height:5px}.metrics-completion-card{margin:0;padding:0;border:0;grid-template-columns:58px 1fr;gap:4px}.metrics-completion-ring{width:54px;height:54px}.metrics-completion-ring:after{inset:6px}.metrics-completion-ring strong{font-size:11px}.metrics-completion-ring small{font-size:5px}.metrics-completion-stats{gap:3px}.metrics-completion-stats span{padding:3px 5px}.metrics-completion-stats b{font-size:10px}
  .metrics-dialog.admin-view .metrics-period-grid{gap:3px}.metrics-dialog.admin-view .metrics-period-grid span{min-height:32px;padding:3px}.metrics-dialog.admin-view .metrics-period-grid b{font-size:11px}.metrics-dialog.admin-view .metrics-foot{padding-top:3px;min-height:24px}.metrics-dialog.admin-view .metrics-note{display:none}
}
@media (max-width:390px){.metrics-kpi-grid strong{font-size:15px}.metrics-kpi-grid small{font-size:6px}.metrics-dialog.admin-view .metrics-chart-legend{font-size:6px}.metrics-dialog.admin-view .metrics-chart-legend i{width:6px;height:6px}.metrics-side-head small{display:none}}


/* ========================================================================
   A016R40R198 · METRICS DUAL ANALYTICS COCKPIT
   - Full-width private cockpit with two simultaneous charts.
   - Chart 1 preserves mixed PvP/Demo/Train composition.
   - Chart 2 can switch MIX/PvP/Demo/Train and compares Start/Done/Drop.
   - Public view stays intentionally small: six basic KPIs + 7-day battle trend.
   ======================================================================== */
.metrics-dialog.admin-view{width:calc(100vw - 10px)!important;height:calc(100dvh - 10px)!important;max-width:none!important;max-height:none!important;padding:10px!important;gap:6px!important}
.metrics-dialog.admin-view .metrics-public-only{display:none!important}.metrics-dialog.public-view .metrics-admin-only{display:none!important}.metrics-dialog.public-view .metrics-public-only{display:flex!important}
.metrics-dialog.public-view{width:min(760px,calc(100vw - 18px));max-height:min(620px,calc(100dvh - 18px));overflow:hidden}.metrics-dialog.public-view .metrics-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.metrics-dialog.public-view .metrics-kpi-grid article{min-height:70px;padding:7px 5px}.metrics-dialog.public-view .metrics-kpi-grid strong{font-size:21px}.metrics-dialog.public-view .metrics-note{margin-top:5px}
.metrics-kpi-grid .mode-cpu{border-color:rgba(124,155,220,.38)}
.metrics-public-panel{border-top:1px solid #25344a;padding-top:10px;min-height:160px}.metrics-public-panel.hidden{display:none!important}.metrics-public-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.metrics-public-head strong{font-size:10px;letter-spacing:.08em;color:#dce7f5}.metrics-public-head small{font-size:8px;color:#74879e}.metrics-public-chart{height:125px;display:flex;align-items:flex-end;gap:7px;border-bottom:1px solid #25344a;padding:14px 6px 19px}.metrics-public-col{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative}.metrics-public-col>b{font-size:8px;color:#94a6ba;margin-bottom:2px}.metrics-public-col>i{display:block;width:min(26px,65%);min-height:2px;border-radius:4px 4px 1px 1px;background:#55a8e7}.metrics-public-col>small{position:absolute;bottom:-15px;font-size:7px;color:#71849b}
.metrics-dialog.admin-view .metrics-analytics{gap:5px!important;padding-top:6px!important}.metrics-dialog.admin-view .metrics-analytics-head{min-height:28px!important}.metrics-dual-grid{min-height:0;flex:1 1 auto;display:grid;grid-template-columns:1fr 1fr;gap:7px;overflow:hidden}.metrics-dialog.admin-view .metrics-chart-card{padding:7px!important;min-height:0;display:flex;flex-direction:column;overflow:hidden}.metrics-dialog.admin-view .metrics-chart-scroll{overflow:hidden!important;min-height:0;flex:1 1 auto;padding:0}.metrics-dialog.admin-view .metrics-history-chart,.metrics-dialog.admin-view .metrics-detail-chart{height:100%;min-height:0;padding:13px 2px 18px;gap:2px}
.metrics-mode-totals,.metrics-detail-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;flex:0 0 auto;margin-top:4px}.metrics-mode-totals span,.metrics-detail-summary span{display:flex;align-items:center;justify-content:space-between;gap:5px;border:1px solid #26364c;border-radius:7px;padding:4px 6px;background:#0d1522}.metrics-mode-totals small,.metrics-detail-summary small{font-size:6px;color:#7e91a8}.metrics-mode-totals b,.metrics-detail-summary b{font-size:10px;color:#edf4fb}
.metrics-drill-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:25px}.metrics-drill-head .metrics-chart-title{flex:1;margin:0!important}.metrics-mode-switch{display:flex;gap:3px;flex:0 0 auto}.metrics-mode-switch button{border:1px solid #31425c;border-radius:6px;background:#101827;color:#8294aa;font-size:7px;font-weight:900;padding:4px 7px;cursor:pointer}.metrics-mode-switch button.active{border-color:#b1842f;background:#2b2110;color:#f4d375}.metrics-detail-legend{display:flex;align-items:center;gap:4px;font-size:7px;color:#73869f;letter-spacing:0}.metrics-detail-legend i{width:7px;height:7px;border-radius:2px;margin-left:4px}.metrics-detail-legend i.start,.metrics-detail-bars i.start{background:#55a8e7}.metrics-detail-legend i.done,.metrics-detail-bars i.done{background:#5fc98b}.metrics-detail-legend i.drop,.metrics-detail-bars i.drop{background:#f06a79}
.metrics-detail-chart{display:flex;align-items:flex-end;border-bottom:1px solid #26364b}.metrics-detail-group{height:100%;min-width:0;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative}.metrics-detail-group>b{font-size:7px;color:#8ea1b7;margin-bottom:2px}.metrics-detail-bars{height:100%;width:min(28px,85%);display:flex;align-items:flex-end;justify-content:center;gap:1px}.metrics-detail-bars i{display:block;flex:1;min-height:2px;border-radius:3px 3px 1px 1px}.metrics-detail-group>small{position:absolute;bottom:-14px;font-size:6px;color:#72859c;white-space:nowrap}
.metrics-dialog.admin-view .metrics-period-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}.metrics-dialog.admin-view .metrics-period-grid span{min-height:34px!important;padding:4px 6px!important}.metrics-dialog.admin-view .metrics-period-grid b{font-size:11px!important}
@media (max-height:700px) and (min-width:700px){.metrics-dialog.admin-view .metrics-kpi-grid article{min-height:52px!important}.metrics-dialog.admin-view .metrics-kpi-grid strong{font-size:18px!important}.metrics-dialog.admin-view .metrics-history-chart,.metrics-dialog.admin-view .metrics-detail-chart{padding-top:8px!important}.metrics-mode-totals span,.metrics-detail-summary span{padding:3px 5px}.metrics-dialog.admin-view .metrics-period-grid span{min-height:29px!important}.metrics-dialog.admin-view .metrics-note{display:none!important}}
@media (max-width:699px){.metrics-dialog.public-view{width:calc(100vw - 8px);max-height:calc(100dvh - 8px);padding:8px}.metrics-dialog.public-view .metrics-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.metrics-dialog.public-view .metrics-kpi-grid article{min-height:50px}.metrics-dialog.public-view .metrics-kpi-grid span{display:none}.metrics-public-panel{min-height:125px;padding-top:5px}.metrics-public-chart{height:95px}.metrics-dual-grid{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:4px}.metrics-dialog.admin-view .metrics-history-chart,.metrics-dialog.admin-view .metrics-detail-chart{padding:8px 1px 12px!important}.metrics-drill-head{min-height:21px}.metrics-drill-head .metrics-detail-legend{display:none}.metrics-mode-switch button{padding:3px 5px;font-size:6px}.metrics-mode-totals,.metrics-detail-summary{gap:2px;margin-top:2px}.metrics-mode-totals span,.metrics-detail-summary span{padding:2px 3px}.metrics-mode-totals small,.metrics-detail-summary small{font-size:5px}.metrics-mode-totals b,.metrics-detail-summary b{font-size:8px}.metrics-dialog.admin-view .metrics-period-grid span{min-height:26px!important}.metrics-dialog.admin-view .metrics-period-grid small{font-size:5px}.metrics-dialog.admin-view .metrics-period-grid b{font-size:9px!important}}


/* ========================================================================
   A016R40R199 · METRICS INDEPENDENT CHARTS UX
   - Fixes right-edge clipping: dialog sizes inside modal padding, never from 100vw.
   - Chart 1: TOTAL/PvP/DEMO/ENTRENO with its own DÍA/MES/AÑO.
   - Chart 2: JUGADORES/VISITAS/PICO ONLINE with its own DÍA/MES/AÑO.
   - Replaces DAU/UNIQUE/SESSIONS jargon with plain Spanish labels.
   - Public view remains six basic measures plus a simple 7-day battle graph.
   ======================================================================== */
.metrics-modal{box-sizing:border-box;padding:10px!important;overflow:hidden!important}
.metrics-dialog.admin-view{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;box-sizing:border-box!important;margin:0!important;overflow:hidden!important}
.metrics-dialog.admin-view .metrics-kpi-grid{grid-template-columns:repeat(8,minmax(0,1fr))!important}
.metrics-independent-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;overflow:hidden!important}
.metrics-independent-card{min-width:0!important}
.metrics-independent-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:52px;flex:0 0 auto}
.metrics-independent-head>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:110px;padding-top:3px}.metrics-independent-head strong{font-size:10px;letter-spacing:.08em;color:#e6eef8}.metrics-independent-head small{font-size:7px;color:#71849c;white-space:nowrap}
.metrics-control-stack{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}.metrics-choice,.metrics-battle-range,.metrics-player-range{display:flex;gap:3px;flex-wrap:nowrap}.metrics-choice button,.metrics-battle-range button,.metrics-player-range button{border:1px solid #31425c;border-radius:6px;background:#101827;color:#8294aa;font-size:7px;font-weight:900;padding:4px 7px;cursor:pointer;white-space:nowrap}.metrics-choice button.active,.metrics-battle-range button.active,.metrics-player-range button.active{border-color:#b1842f;background:#2b2110;color:#f4d375}
.metrics-dialog.admin-view .metrics-chart-scroll{overflow:hidden!important;flex:1 1 auto;min-height:0}.metrics-single-chart{height:100%;min-height:0;display:flex;align-items:flex-end;gap:2px;border-bottom:1px solid #26364b;padding:12px 2px 18px}.metrics-single-group{height:100%;min-width:0;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative}.metrics-single-group>b{font-size:7px;color:#8ea1b7;margin-bottom:2px}.metrics-single-group>i{display:block;width:min(18px,72%);min-height:2px;border-radius:4px 4px 1px 1px}.metrics-single-group>i.total{background:#8e9fb6}.metrics-single-group>i.pvp{background:#e6b84c}.metrics-single-group>i.demo{background:#55a8e7}.metrics-single-group>i.training{background:#5fc98b}.metrics-single-group>i.players{background:#65b5f2}.metrics-single-group>i.sessions{background:#9c7cf4}.metrics-single-group>i.peak{background:#f0c85f}.metrics-single-group>small{position:absolute;bottom:-14px;font-size:6px;color:#72859c;white-space:nowrap}
.metrics-chart-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;flex:0 0 auto;margin-top:4px}.metrics-chart-summary span{display:flex;align-items:center;justify-content:space-between;gap:5px;border:1px solid #26364c;border-radius:7px;padding:4px 6px;background:#0d1522;min-width:0}.metrics-chart-summary small{font-size:6px;color:#7e91a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metrics-chart-summary b{font-size:10px;color:#edf4fb}
.metrics-dialog.admin-view .metrics-analytics{padding-top:5px!important;gap:5px!important}.metrics-dialog.admin-view .metrics-analytics-head{display:none!important}
.metrics-dialog.admin-view .metrics-foot{margin-top:0!important}.metrics-dialog.admin-view .metrics-note{margin-top:0!important}
@media (max-width:1100px) and (min-width:700px){.metrics-independent-head{min-height:62px;flex-direction:column;gap:3px}.metrics-control-stack{align-items:flex-start;width:100%}.metrics-dialog.admin-view .metrics-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.metrics-kpi-grid article{min-height:52px!important}.metrics-kpi-grid strong{font-size:18px!important}.metrics-kpi-grid span{display:none!important}}
@media (max-width:699px){.metrics-modal{padding:4px!important}.metrics-dialog.admin-view{width:100%!important;height:100%!important}.metrics-independent-grid{grid-template-columns:1fr!important;grid-template-rows:1fr 1fr!important;gap:4px!important}.metrics-dialog.admin-view .metrics-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.metrics-kpi-grid article{min-height:44px!important}.metrics-kpi-grid strong{font-size:15px!important}.metrics-kpi-grid small{font-size:5.5px!important}.metrics-kpi-grid span{display:none!important}.metrics-independent-head{min-height:45px;gap:3px}.metrics-independent-head>div:first-child{min-width:88px}.metrics-independent-head strong{font-size:8px}.metrics-independent-head small{display:none}.metrics-choice button,.metrics-battle-range button,.metrics-player-range button{font-size:5.5px;padding:3px 4px}.metrics-single-chart{padding:7px 1px 11px}.metrics-single-group>i{width:min(10px,74%)}.metrics-single-group>b{font-size:5px}.metrics-single-group>small{font-size:4.5px;bottom:-9px}.metrics-chart-summary{gap:2px;margin-top:2px}.metrics-chart-summary span{padding:2px 3px}.metrics-chart-summary small{font-size:4.5px}.metrics-chart-summary b{font-size:7px}.metrics-dialog.admin-view .metrics-note{display:none!important}}


/* ========================================================================
   A016R40R200 · METRICS SINGLE-ROW CONTROLS + WEEK + MOBILE PUBLIC
   - Desktop/admin: KPI strip remains intact; charts sit below with deliberate spacing.
   - Every chart header is one horizontal line: title + real data date + data switch + period switch.
   - Data and period controls use visibly different treatments.
   - Adds independent SEMANA range to both charts.
   - Mobile: private cockpit is never shown; authorized admins see the same simplified surface as public users.
   ======================================================================== */
.metrics-dialog.admin-view .metrics-kpi-grid{margin-bottom:9px!important}
.metrics-chart-toolbar{display:grid;grid-template-columns:minmax(205px,1fr) auto auto;align-items:center;gap:10px;min-height:38px;flex:0 0 auto;margin-bottom:5px;padding-bottom:6px;border-bottom:1px solid #1f2c3e}
.metrics-toolbar-title{display:flex;align-items:center;gap:9px;min-width:0}.metrics-toolbar-title>strong{font-size:10px;letter-spacing:.09em;color:#eaf1f9;white-space:nowrap}.metrics-date-chip{display:inline-flex;align-items:center;min-height:22px;max-width:100%;padding:4px 8px;border:1px solid #2a3a50;border-radius:999px;background:#0a121e;color:#91a6bf;font-size:7px;font-weight:800;letter-spacing:.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metrics-data-switch{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid #2b3c54;border-radius:8px;background:#0a1320}.metrics-data-switch button{border:0!important;border-radius:6px!important;background:transparent!important;color:#8194ab!important;font-size:7px!important;font-weight:900!important;padding:5px 8px!important;white-space:nowrap}.metrics-data-switch button.active{background:#17304b!important;color:#d8ecff!important;box-shadow:inset 0 0 0 1px #32638e}
.metrics-period-switch{display:flex!important;align-items:center;gap:0!important;padding:2px;border:1px solid #5d4a25;border-radius:8px;background:#151107}.metrics-period-switch button{border:0!important;border-left:1px solid #493a20!important;border-radius:0!important;background:transparent!important;color:#9d8b69!important;font-size:7px!important;font-weight:900!important;padding:5px 8px!important;min-width:auto!important;white-space:nowrap}.metrics-period-switch button:first-child{border-left:0!important;border-radius:6px 0 0 6px!important}.metrics-period-switch button:last-child{border-radius:0 6px 6px 0!important}.metrics-period-switch button.active{background:#3a2a0d!important;color:#f5d77e!important;box-shadow:inset 0 0 0 1px #a77b24}
.metrics-dialog.admin-view .metrics-independent-grid{margin-top:0!important}
.metrics-dialog.admin-view .metrics-independent-card{padding-top:7px!important}
@media (max-width:1280px) and (min-width:700px){.metrics-chart-toolbar{grid-template-columns:minmax(165px,1fr) auto auto;gap:6px}.metrics-toolbar-title{gap:5px}.metrics-date-chip{padding:3px 6px;font-size:6px}.metrics-data-switch button,.metrics-period-switch button{padding:4px 6px!important;font-size:6px!important}}
@media (max-width:699px){
  .metrics-dialog.admin-view.mobile-public-view{width:calc(100vw - 8px)!important;height:auto!important;max-height:calc(100dvh - 8px)!important;padding:8px!important;overflow:hidden!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-admin-only{display:none!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-public-only{display:flex!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;margin-bottom:7px!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-kpi-grid article{min-height:50px!important;padding:5px 4px!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-kpi-grid strong{font-size:19px!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-kpi-grid small{font-size:6px!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-kpi-grid span{display:none!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-public-panel{display:block!important;min-height:135px!important;padding-top:6px!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-public-chart{height:102px!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-analytics{display:none!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-admin-row{display:none!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-note{display:block!important;margin-top:4px!important}
  .metrics-dialog.admin-view.mobile-public-view .metrics-foot{margin-top:5px!important}
}

/* ========================================================================
   A016R40R201 · DASHBOARD SPACING SYSTEM
   Visual-only rhythm pass for HOME/Dashboard surfaces.
   Goal: header -> breathing room -> content, with consistent module gaps on
   desktop and mobile. Battle geometry is intentionally untouched.
   ======================================================================== */

/* DESKTOP / TABLET · make dashboard controls read as separate blocks. */
@media (min-width:600px){
  #lobby .lobby-head-right,
  #lobby .lobby-head-right.metrics-visible{
    gap:8px!important;
  }

  /* Every first dashboard surface receives the same visual air below header. */
  #lobby .picker-layout[data-source-mode="demo"].demo-dashboard-layout{
    margin-top:12px!important;
  }
  #lobby .picker-layout.hub-content-gap{
    margin-top:12px!important;
  }
  #walletUnifiedBar.wallet-unified-bar,
  #tokenUnifiedBar.wallet-unified-bar{
    margin-top:12px!important;
    margin-bottom:12px!important;
  }

  /* Inside the right rail, tabs/actions are related but must not look glued. */
  #lobby .player-hub-tabs{
    gap:6px!important;
    margin-bottom:8px!important;
  }
  #lobby .player-learn-tabs{
    gap:6px!important;
    margin-top:6px!important;
    margin-bottom:8px!important;
  }
  #lobby .team-sidebar-actions,
  #lobby .team-mode-actions{
    gap:7px!important;
    margin-top:8px!important;
  }
}

/* MOBILE · same hierarchy with smaller, still visible, breathing space. */
@media (max-width:599px){
  #lobby .lobby-head-right,
  #lobby .lobby-head-right.metrics-visible{
    gap:4px!important;
  }
  #lobby .picker-layout[data-source-mode="demo"].demo-dashboard-layout{
    margin-top:8px!important;
    gap:8px!important;
  }
  #lobby .picker-layout.hub-content-gap{
    margin-top:8px!important;
  }
  #walletUnifiedBar.wallet-unified-bar,
  #tokenUnifiedBar.wallet-unified-bar{
    margin-top:8px!important;
    margin-bottom:8px!important;
  }
  #lobby .player-hub-tabs{
    gap:4px!important;
    margin-bottom:6px!important;
  }
  #lobby .player-learn-tabs{
    gap:4px!important;
    margin-top:5px!important;
    margin-bottom:6px!important;
  }
  #lobby .demo-team-sidebar .picked-team{
    gap:5px!important;
    margin-top:6px!important;
  }
  #lobby .team-sidebar-actions,
  #lobby .team-mode-actions{
    gap:5px!important;
    margin-top:7px!important;
  }
}

/* Very narrow phones keep the hierarchy without forcing horizontal overflow. */
@media (max-width:360px){
  #lobby .lobby-head-right,
  #lobby .lobby-head-right.metrics-visible{
    gap:3px!important;
  }
  #lobby .picker-layout[data-source-mode="demo"].demo-dashboard-layout{
    margin-top:7px!important;
    gap:6px!important;
  }
}

/* ========================================================================
   A016R40R202 · MOBILE DASHBOARD WALLET ICON + MATCHMAKING VIEWPORT FIT
   Mobile/PWA visual-only hardening.
   - Dashboard: Ronin action becomes a compact wallet icon on phones, keeping
     the validated RANGO · PT · STAMINA · AXIES · VOLVER · METRICS order.
   - Matchmaking: portrait and short landscape use the visual viewport without
     document scroll, preserving every important search element on-screen.
   - Desktop dashboard and live battle geometry are untouched.
   ======================================================================== */

/* Mobile dashboard: reserve a compact, fixed wallet slot instead of rendering
   the address/account copy inside the competitive header. */
@media (max-width:599px), (orientation:landscape) and (max-width:1000px) and (max-height:600px){
  #lobby .lobby-head-right{
    grid-template-columns:minmax(62px,.95fr) minmax(44px,.70fr) minmax(48px,.74fr) minmax(38px,.58fr) minmax(44px,.64fr) 44px!important;
    grid-template-areas:"rank points stamina axies back wallet"!important;
    gap:4px!important;
    min-width:0!important;
  }
  #lobby .lobby-head-right.metrics-visible{
    grid-template-columns:minmax(62px,.95fr) minmax(44px,.70fr) minmax(48px,.74fr) minmax(38px,.58fr) minmax(44px,.64fr) 34px 44px!important;
    grid-template-areas:"rank points stamina axies back metrics wallet"!important;
    gap:4px!important;
    min-width:0!important;
  }
  #lobby #lobbyConnectWalletBtn{
    position:relative!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    padding:0!important;
    font-size:0!important;
    line-height:0!important;
    overflow:visible!important;
    text-overflow:clip!important;
    color:#b9d7f4!important;
  }
  #lobby #lobbyConnectWalletBtn.connected{color:#8be0b0!important}
  #lobby #lobbyConnectWalletBtn::before{
    content:"";
    width:19px;height:14px;
    display:block;
    border:2px solid currentColor;
    border-radius:4px;
    box-sizing:border-box;
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
  }
  #lobby #lobbyConnectWalletBtn::after{
    content:"";
    width:7px;height:5px;
    display:block;
    border:1.5px solid currentColor;
    border-radius:2px;
    box-sizing:border-box;
    position:absolute;
    left:50%;top:50%;
    transform:translate(1px,-50%);
    background:#101827;
  }
}
@media (max-width:380px){
  #lobby .lobby-head-right{
    grid-template-columns:minmax(52px,.92fr) 39px 42px 34px 39px 38px!important;
    gap:3px!important;
  }
  #lobby .lobby-head-right.metrics-visible{
    grid-template-columns:minmax(52px,.92fr) 39px 42px 34px 39px 28px 38px!important;
    gap:3px!important;
  }
  #lobby #lobbyConnectWalletBtn{width:38px!important;min-width:38px!important;max-width:38px!important}
  #lobby #lobbyConnectWalletBtn::before{width:17px;height:13px}
  #lobby #lobbyConnectWalletBtn::after{width:6px;height:4px}
}

/* Matchmaking is a self-contained mobile surface. Chromium/PWA may expose very
   different portrait/landscape viewport heights; use the visual viewport and
   compress only unused spacing instead of removing information. */
@media (max-width:640px), (orientation:landscape) and (max-width:1000px) and (max-height:600px){
  html:has(#matchmaking:not(.hidden)),
  body:has(#matchmaking:not(.hidden)){
    height:100%!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  #matchmaking.matchmaking-panel:not(.hidden){
    position:fixed!important;
    z-index:9500!important;
    inset:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    border-radius:14px!important;
  }
  #matchmaking .matchmaking-stage{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto!important;
    align-content:stretch!important;
    overflow:hidden!important;
  }
  #matchmaking .matchmaking-topline,
  #matchmaking .matchmaking-copy,
  #matchmaking .matchmaking-versus,
  #matchmaking .matchmaking-metrics,
  #matchmaking .matchmaking-actions{min-width:0!important;min-height:0!important}
  #matchmaking .matchmaking-searchline{flex:0 0 auto!important}
  #matchmaking .matchmaking-actions{flex-wrap:nowrap!important}
  #matchmaking .matchmaking-actions .btn{margin:0!important}
}

/* Portrait phone: keep the validated vertical story, but fit the full search
   surface in one viewport. */
@media (max-width:640px) and (orientation:portrait){
  #matchmaking.matchmaking-panel:not(.hidden){padding:9px 8px!important}
  #matchmaking .matchmaking-stage{gap:5px!important}
  #matchmaking .matchmaking-topline{align-items:center!important;gap:8px!important}
  #matchmaking .matchmaking-kicker{font-size:7.5px!important;letter-spacing:.13em!important}
  #matchmaking .matchmaking-network{font-size:7px!important;padding:5px 8px!important}
  #matchmaking .matchmaking-copy{gap:3px!important}
  #matchmaking .matchmaking-copy h2{font-size:clamp(24px,7vw,34px)!important;line-height:.95!important}
  #matchmaking .matchmaking-copy p{font-size:10px!important;line-height:1.18!important}
  #matchmaking .matchmaking-versus{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) 24px minmax(0,1fr)!important;
    gap:4px!important;
    padding:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  #matchmaking .matchmaking-squad{gap:4px!important;min-height:0!important;align-content:center!important}
  #matchmaking .matchmaking-squad-label{font-size:8px!important;letter-spacing:.14em!important}
  #matchmaking .matchmaking-axies{gap:6px!important;min-height:0!important}
  #matchmaking .matchmaking-axie{
    height:clamp(92px,13.2dvh,122px)!important;
    min-height:0!important;
    padding:5px 4px 5px!important;
    border-radius:13px!important;
  }
  #matchmaking .matchmaking-axie-visual{height:auto!important;min-height:0!important}
  #matchmaking .matchmaking-axie strong{font-size:9px!important;line-height:1!important}
  #matchmaking .matchmaking-axie small{font-size:6px!important;line-height:1!important}
  #matchmaking .matchmaking-core{width:100%!important;height:24px!important}
  #matchmaking .matchmaking-core strong{font-size:17px!important}
  #matchmaking .matchmaking-radar-ring{display:none!important}
  #matchmaking .matchmaking-opponent-placeholder{height:clamp(92px,13.2dvh,122px)!important;min-height:0!important}
  #matchmaking .matchmaking-opponent-placeholder span{border-radius:13px!important}
  #matchmaking .matchmaking-opponent-placeholder span:after{font-size:30px!important}
  #matchmaking .matchmaking-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important;border-radius:11px!important}
  #matchmaking .matchmaking-metrics>div{padding:5px 3px!important;gap:1px!important}
  #matchmaking .matchmaking-metrics>div:nth-child(n+3){border-top:0!important}
  #matchmaking .matchmaking-metrics>div:nth-child(3):before{display:block!important}
  #matchmaking .matchmaking-metrics span{font-size:5.7px!important;letter-spacing:.08em!important}
  #matchmaking .matchmaking-metrics strong{font-size:12px!important;line-height:1!important}
  #matchmaking .matchmaking-metrics em{font-size:6px!important;margin-left:1px!important}
  #matchmaking .matchmaking-clock strong{font-size:16px!important}
  #matchmaking .matchmaking-searchline{height:3px!important}
  #matchmaking .matchmaking-status{min-height:12px!important;font-size:8px!important;line-height:1.15!important}
  #matchmaking .matchmaking-actions{gap:5px!important}
  #matchmaking .matchmaking-actions .btn{width:100%!important;min-width:0!important;min-height:36px!important;padding:6px 10px!important;font-size:11px!important}
}

/* Landscape phone: retain the side-by-side versus composition and collapse
   vertical whitespace so the entire queue UI fits without scrolling. */
@media (orientation:landscape) and (max-width:1000px) and (max-height:600px){
  #matchmaking.matchmaking-panel:not(.hidden){padding:6px 8px!important;border-radius:11px!important}
  #matchmaking .matchmaking-stage{gap:3px!important}
  #matchmaking .matchmaking-topline{align-items:center!important;gap:8px!important}
  #matchmaking .matchmaking-kicker{font-size:6px!important;letter-spacing:.12em!important}
  #matchmaking .matchmaking-network{font-size:5.8px!important;padding:3px 7px!important}
  #matchmaking .matchmaking-copy{gap:1px!important}
  #matchmaking .matchmaking-copy h2{font-size:clamp(22px,5.2dvh,29px)!important;line-height:.92!important}
  #matchmaking .matchmaking-copy p{font-size:8px!important;line-height:1.05!important}
  #matchmaking .matchmaking-versus{
    grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    padding:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  #matchmaking .matchmaking-squad{gap:3px!important;min-height:0!important}
  #matchmaking .matchmaking-squad-label{font-size:6px!important;letter-spacing:.12em!important}
  #matchmaking .matchmaking-axies{gap:5px!important;min-height:0!important}
  #matchmaking .matchmaking-axie{
    height:clamp(78px,24dvh,104px)!important;
    min-height:0!important;
    padding:4px 3px!important;
    border-radius:10px!important;
  }
  #matchmaking .matchmaking-axie-visual{height:auto!important;min-height:0!important}
  #matchmaking .matchmaking-axie strong{font-size:7px!important;line-height:1!important}
  #matchmaking .matchmaking-axie small{font-size:5px!important;line-height:1!important}
  #matchmaking .matchmaking-core{width:48px!important;height:48px!important}
  #matchmaking .matchmaking-core strong{font-size:16px!important}
  #matchmaking .matchmaking-radar-ring{display:none!important}
  #matchmaking .matchmaking-opponent-placeholder{height:clamp(78px,24dvh,104px)!important;min-height:0!important}
  #matchmaking .matchmaking-opponent-placeholder span{border-radius:10px!important}
  #matchmaking .matchmaking-opponent-placeholder span:after{font-size:24px!important}
  #matchmaking .matchmaking-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important;border-radius:9px!important}
  #matchmaking .matchmaking-metrics>div{padding:3px 4px!important;gap:0!important}
  #matchmaking .matchmaking-metrics>div:nth-child(n+3){border-top:0!important}
  #matchmaking .matchmaking-metrics>div:nth-child(3):before{display:block!important}
  #matchmaking .matchmaking-metrics span{font-size:4.8px!important;letter-spacing:.07em!important}
  #matchmaking .matchmaking-metrics strong{font-size:10px!important;line-height:1!important}
  #matchmaking .matchmaking-metrics em{font-size:5px!important;margin-left:1px!important}
  #matchmaking .matchmaking-clock strong{font-size:13px!important}
  #matchmaking .matchmaking-searchline{height:3px!important}
  #matchmaking .matchmaking-status{min-height:9px!important;font-size:6.5px!important;line-height:1!important}
  #matchmaking .matchmaking-actions{gap:4px!important}
  #matchmaking .matchmaking-actions .btn{width:min(220px,100%)!important;min-width:0!important;min-height:29px!important;padding:4px 9px!important;font-size:8px!important}
}


/* ========================================================================
   A016R40R203 · DASHBOARD DEMO / WALLET MODE SWITCH
   The R202 mobile wallet slot becomes a real mode switch without touching
   validated matchmaking geometry.
   ======================================================================== */
.dashboard-wallet-modal{z-index:1450}
.dashboard-wallet-card{width:min(460px,calc(100vw - 28px));text-align:left}
.dashboard-wallet-hero{height:92px;margin:4px 0 14px;border:1px solid #2f4664;border-radius:16px;background:radial-gradient(circle at 50% 35%,rgba(83,170,238,.20),transparent 48%),linear-gradient(180deg,#111d30,#0b1422);display:grid;place-items:center}
.dashboard-wallet-hero>span{position:relative;width:70px;height:48px;border:4px solid #62b6ee;border-radius:12px;box-shadow:0 0 26px rgba(64,169,238,.18)}
.dashboard-wallet-hero>span::before{content:"";position:absolute;right:-5px;top:14px;width:25px;height:15px;border:3px solid #62b6ee;border-radius:6px;background:#101827}
.dashboard-wallet-hero>span::after{content:"";position:absolute;right:5px;top:20px;width:5px;height:5px;border-radius:50%;background:#f1c24c}
.dashboard-wallet-copy{margin:0 0 10px;color:#8fa2ba;font-size:12px}
.dashboard-wallet-actions .btn-ronin{background:linear-gradient(180deg,#1f87c8,#126495);border-color:#39a9ea;color:#fff}
.dashboard-wallet-actions .btn-ronin:disabled{opacity:.55;cursor:wait}

/* Wallet-owned Axies -> this compact slot explicitly becomes DEMO.
   STARTERS -> it remains the wallet icon and opens owned Axies/connect flow. */
@media (max-width:599px), (orientation:landscape) and (max-width:1000px) and (max-height:600px){
  #lobby #lobbyConnectWalletBtn[data-dashboard-action="demo"]{
    font-size:7px!important;line-height:1!important;font-weight:900!important;letter-spacing:.08em!important;
    color:#f1c557!important;text-indent:0!important;overflow:hidden!important;
  }
  #lobby #lobbyConnectWalletBtn[data-dashboard-action="demo"]::before,
  #lobby #lobbyConnectWalletBtn[data-dashboard-action="demo"]::after{display:none!important}
  #lobby #lobbyConnectWalletBtn[data-dashboard-action="wallet"],
  #lobby #lobbyConnectWalletBtn[data-dashboard-action="connect"]{font-size:0!important;line-height:0!important}
  .dashboard-wallet-card{width:calc(100vw - 22px);padding:16px;border-radius:16px}
  .dashboard-wallet-hero{height:78px;margin-bottom:11px}
  .dashboard-wallet-hero>span{width:58px;height:40px}
}

/* ========================================================================== */
/* A016R40R205 · SAFE BATTLE MUSIC SLP-SIDE CONTROL                           */
/* Audio control is a fifth sibling inside the existing economy rail.          */
/* It is NOT inside the SLP cell and never becomes a child of #battle itself.   */
/* ========================================================================== */
body.battle-mode .r79-battle-right.r81-battle-economy{
  grid-template-columns:.78fr 1fr 1.25fr 1.25fr 34px!important;
}
body.battle-mode .battle-music-toggle{
  appearance:none!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  min-width:34px!important;
  width:34px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(126,151,183,.18)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.025)!important;
  color:#dce9f7!important;
  display:grid!important;
  place-items:center!important;
  font:inherit!important;
  font-size:14px!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
body.battle-mode .battle-music-toggle:hover{background:rgba(111,205,255,.08)!important;border-color:rgba(111,205,255,.28)!important}
body.battle-mode .battle-music-toggle[aria-pressed="true"]{color:#8997aa!important;background:rgba(255,255,255,.012)!important}
body.battle-mode .battle-music-toggle:focus-visible{outline:2px solid rgba(242,196,91,.62)!important;outline-offset:1px!important}
@media (max-width:1100px){
  body.battle-mode .r79-battle-right.r81-battle-economy{grid-template-columns:.72fr .96fr 1.16fr 1.16fr 28px!important}
  body.battle-mode .battle-music-toggle{min-width:28px!important;width:28px!important;font-size:12px!important}
}
@media (orientation:portrait) and (max-width:599px){
  body.battle-mode .r79-battle-right.r81-battle-economy{grid-template-columns:repeat(4,minmax(0,1fr)) 26px!important}
  body.battle-mode .battle-music-toggle{min-width:26px!important;width:26px!important;font-size:11px!important;border-radius:6px!important}
}


/* ========================================================================
   A016R40R210 · CARD HOVER SINGLE SOURCE
   One visual tooltip per card. The canonical card-help-popover remains the
   source of truth in the hand; the legacy R122 spell ::after bubble is
   disabled there so SPELL cards cannot render two help layers at once.
   ======================================================================== */
body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.spell[data-r122-spell-help]::after{
  display:none!important;
  content:none!important;
}


/* ========================================================================== */
/* A016R40R212 · GUIDE RESPONSIVE VISUAL REWORK                               */
/* Scope: Dashboard > CÓMO JUGAR only. Gameplay/battle geometry untouched.    */
/* Desktop: the hand-capacity example shows 5 real cards.                     */
/* Mobile: compact visual guide + 3 small cards on one row.                   */
/* ========================================================================== */
@media (min-width:761px){
  #lobby #guideMain .guide-real-cards{
    grid-template-columns:repeat(5,minmax(108px,1fr))!important;
    gap:9px!important;
    width:100%!important;
    max-width:820px!important;
    justify-content:start!important;
  }
  #lobby #guideMain .guide-real-card{max-width:154px!important;min-width:0!important}
}

@media (max-width:760px){
  #lobby #guideMain{
    padding:9px!important;
    border-radius:12px!important;
  }
  #lobby #guideMain .learn-main-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:start!important;
    margin-bottom:8px!important;
    padding-bottom:8px!important;
  }
  #lobby #guideMain .learn-kicker{font-size:7px!important;margin-bottom:2px!important}
  #lobby #guideMain .learn-main-head h3{font-size:19px!important;line-height:1!important}
  #lobby #guideMain .learn-main-head p{margin:4px 0 0!important;font-size:9px!important;line-height:1.25!important}
  #lobby #guideMain .learn-badge{
    display:inline-flex!important;
    align-items:center!important;
    margin:0!important;
    padding:5px 7px!important;
    font-size:7px!important;
    line-height:1!important;
  }
  #lobby #guideMain .guide-steps{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  #lobby #guideMain .guide-step,
  #lobby #guideMain .guide-step-wide{
    min-height:0!important;
    padding:9px 8px 9px 38px!important;
    border-radius:11px!important;
    overflow:hidden!important;
  }
  #lobby #guideMain .guide-step-num{
    left:8px!important;top:8px!important;
    width:23px!important;height:23px!important;
    font-size:9px!important;
  }
  #lobby #guideMain .guide-step-copy strong{font-size:10.5px!important;line-height:1.1!important}
  #lobby #guideMain .guide-step-copy p{margin:3px 0 7px!important;font-size:8.7px!important;line-height:1.28!important}

  /* Paso 1: roster 3x2 compacto. */
  #lobby #guideMain .guide-roster-six{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
  #lobby #guideMain .guide-roster-six .guide-real-axie{
    height:72px!important;min-height:72px!important;
    grid-template-rows:48px auto auto!important;
    padding:3px!important;gap:1px!important;border-radius:8px!important;
  }
  #lobby #guideMain .guide-roster-six .guide-real-axie .guide-static-axie{height:48px!important;min-height:48px!important}

  /* Paso 2: ambos equipos + VS permanecen en una sola línea. */
  #lobby #guideMain .guide-versus-real{
    grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)!important;
    gap:4px!important;align-items:center!important;
  }
  #lobby #guideMain .guide-team-mini{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important}
  #lobby #guideMain .guide-team-mini .guide-real-axie{
    height:66px!important;min-height:66px!important;
    grid-template-rows:44px auto auto!important;
    padding:3px 2px!important;gap:1px!important;border-radius:7px!important;
  }
  #lobby #guideMain .guide-team-mini .guide-real-axie .guide-static-axie{height:44px!important;min-height:44px!important}
  #lobby #guideMain .guide-versus-center{padding:2px!important;gap:2px!important}
  #lobby #guideMain .guide-versus-center b{font-size:16px!important}
  #lobby #guideMain .guide-versus-center span{font-size:5.5px!important;line-height:1.05!important}

  /* Texto de Axie en todas las miniaturas del tutorial. */
  #lobby #guideMain .guide-real-axie small{font-size:6.2px!important;line-height:1!important}
  #lobby #guideMain .guide-real-axie em{font-size:5.4px!important;line-height:1!important}

  /* Paso 3: exactamente 3 cartas pequeñas, misma fila, con forma real. */
  #lobby #guideMain .guide-real-cards{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    width:100%!important;
    max-width:320px!important;
    justify-content:start!important;
    align-items:start!important;
  }
  #lobby #guideMain .guide-real-cards>.guide-real-card:nth-child(n+4){display:none!important}
  #lobby #guideMain .guide-real-card{width:100%!important;max-width:none!important;min-width:0!important}
  #lobby #guideMain .guide-real-card .card-lab-preview{
    width:100%!important;max-width:none!important;min-width:0!important;
    aspect-ratio:.60!important;border-radius:8px!important;
    transform:none!important;box-shadow:0 7px 14px rgba(0,0,0,.30)!important;
  }
  #lobby #guideMain .guide-real-card .duel-card-topbar{
    top:4px!important;left:4px!important;right:4px!important;
    grid-template-columns:22px minmax(0,1fr)!important;gap:3px!important;
  }
  #lobby #guideMain .guide-real-card .duel-card-type-icon{width:22px!important;height:22px!important;border-width:1px!important}
  #lobby #guideMain .guide-real-card .duel-card-type-label{height:12px!important;padding:0 4px!important;font-size:4.2px!important;letter-spacing:.08em!important}
  #lobby #guideMain .guide-real-card .duel-card-footer{grid-template-columns:28px minmax(0,1fr)!important;gap:3px!important;padding:3px 4px!important}
  #lobby #guideMain .guide-real-card .duel-card-value-shell{width:26px!important;height:23px!important}
  #lobby #guideMain .guide-real-card .duel-card-value{width:22px!important;height:22px!important;font-size:15px!important;border-width:1px!important}
  #lobby #guideMain .guide-real-card .duel-card-grip{width:7px!important;height:10px!important;border-width:1px!important}
  #lobby #guideMain .guide-real-card .duel-card-name{font-size:6.2px!important}

  /* Paso 4: elección compacta Axie + carta; el bloqueo queda debajo. */
  #lobby #guideMain .guide-fight-choice{
    grid-template-columns:minmax(0,82px) 18px minmax(0,82px)!important;
    gap:5px!important;align-items:center!important;justify-content:start!important;justify-items:stretch!important;
  }
  #lobby #guideMain .guide-fight-plus{display:block!important;font-size:16px!important}
  #lobby #guideMain .guide-fight-axie .guide-real-axie{
    height:82px!important;min-height:82px!important;
    grid-template-rows:56px auto auto!important;padding:3px!important;gap:1px!important;
  }
  #lobby #guideMain .guide-fight-axie .guide-real-axie .guide-static-axie{height:56px!important;min-height:56px!important}
  #lobby #guideMain .guide-fight-card{width:82px!important;max-width:82px!important;justify-self:start!important}
  #lobby #guideMain .guide-fight-lock{grid-column:1/-1!important;padding:6px 7px!important;font-size:8px!important;border-radius:8px!important}

  /* Paso 5: familias en una sola fila compacta. */
  #lobby #guideMain .guide-family-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
  #lobby #guideMain .family-card{gap:4px!important;padding:6px 4px!important;border-radius:9px!important}
  #lobby #guideMain .family-card header{gap:1px!important}
  #lobby #guideMain .family-card header b{font-size:9px!important}
  #lobby #guideMain .family-card header span{font-size:5.4px!important;line-height:1.1!important}
  #lobby #guideMain .family-card p{font-size:6px!important;line-height:1.2!important}
  #lobby #guideMain .family-axies{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px!important}
  #lobby #guideMain .family-axies .guide-real-axie{
    height:54px!important;min-height:54px!important;
    grid-template-rows:38px auto auto!important;padding:2px!important;gap:0!important;border-radius:6px!important;
  }
  #lobby #guideMain .family-axies .guide-real-axie .guide-static-axie{height:38px!important;min-height:38px!important}
  #lobby #guideMain .family-axies .guide-real-axie small{font-size:4.8px!important}
  #lobby #guideMain .family-axies .guide-real-axie em{display:none!important}

  /* Paso 6: jerarquías en una fila, mismas miniaturas compactas. */
  #lobby #guideMain .guide-hierarchy-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
  #lobby #guideMain .hierarchy-card{gap:3px!important;padding:6px 4px!important;border-radius:8px!important}
  #lobby #guideMain .hierarchy-card>b{font-size:8.5px!important}
  #lobby #guideMain .hierarchy-card>span{font-size:5.4px!important;line-height:1.18!important}
  #lobby #guideMain .hierarchy-axies{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px!important;margin:0!important}
  #lobby #guideMain .hierarchy-axies .guide-real-axie{
    height:52px!important;min-height:52px!important;
    grid-template-rows:37px auto auto!important;padding:2px!important;gap:0!important;border-radius:6px!important;
  }
  #lobby #guideMain .hierarchy-axies .guide-real-axie .guide-static-axie{height:37px!important;min-height:37px!important}
  #lobby #guideMain .hierarchy-axies .guide-real-axie small{font-size:4.7px!important}
  #lobby #guideMain .hierarchy-axies .guide-real-axie em{display:none!important}

  /* Paso 7: vida 3/3 → 0/3 en horizontal; notas compactas. */
  #lobby #guideMain .guide-health-flow{
    grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr)!important;
    gap:3px!important;align-items:center!important;
  }
  #lobby #guideMain .health-card{gap:2px!important;padding:6px 3px!important;border-radius:8px!important}
  #lobby #guideMain .health-card b{font-size:12px!important}
  #lobby #guideMain .health-card span{font-size:5.8px!important;line-height:1.12!important}
  #lobby #guideMain .health-arrow{font-size:10px!important;transform:none!important}
  #lobby #guideMain .guide-health-notes{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important;margin-top:5px!important}
  #lobby #guideMain .guide-health-notes span{padding:5px 6px!important;border-radius:7px!important;font-size:6.6px!important;line-height:1.25!important}
}


/* ========================================================================== */
/* A016R40R213 · GUIDE MOBILE COMPOSITION HARDENING                            */
/* Scope: Dashboard > CÓMO JUGAR on phones. Desktop/gameplay remain intact.   */
/* Fixes preview visibility, card medallion geometry, fight-card edge safety, */
/* family/hierarchy readability and sidebar text containment.                  */
/* ========================================================================== */
@media (max-width:760px){
  /* Global containment for this tutorial only: no horizontal escape. */
  #lobby #guideMain,
  #lobby #guideSidebar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #lobby #guideMain .guide-step,
  #lobby #guideMain .guide-step-wide{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Mixer previews in the guide must be allowed to shrink below the legacy
     48px compact-preview minimum. This is the root cause of invisible/clipped
     Axies in the two-team/family/hierarchy examples. */
  #lobby #guideMain .guide-real-axie .axie-preview-slot.compact-preview{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    overflow:visible!important;
    border-radius:6px!important;
  }
  #lobby #guideMain .guide-real-axie .axie-preview-slot.compact-preview>img,
  #lobby #guideMain .guide-real-axie .axie-preview-slot.compact-preview>canvas,
  #lobby #guideMain .guide-real-axie .axie-preview-slot.compact-preview canvas{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    margin:auto!important;
  }

  /* STEP 1 · a little more visual weight without changing proportions. */
  #lobby #guideMain .guide-roster-six{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  #lobby #guideMain .guide-roster-six .guide-real-axie{
    height:88px!important;
    min-height:88px!important;
    grid-template-rows:62px auto auto!important;
    padding:4px!important;
    gap:1px!important;
  }
  #lobby #guideMain .guide-roster-six .axie-preview-slot.compact-preview,
  #lobby #guideMain .guide-roster-six .guide-static-axie{
    height:62px!important;
    min-height:62px!important;
  }
  #lobby #guideMain .guide-roster-six .guide-real-axie small{font-size:6.6px!important}
  #lobby #guideMain .guide-roster-six .guide-real-axie em{font-size:5.6px!important}

  /* STEP 2 · both three-Axie teams stay visible on one line. Labels are
     intentionally removed here so the artwork receives the available width. */
  #lobby #guideMain .guide-versus-real{
    grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)!important;
    gap:3px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
  }
  #lobby #guideMain .guide-team-mini{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:2px!important;
    min-width:0!important;
  }
  #lobby #guideMain .guide-team-mini .guide-real-axie{
    height:56px!important;
    min-height:56px!important;
    grid-template-rows:1fr!important;
    padding:2px!important;
    gap:0!important;
    overflow:visible!important;
  }
  #lobby #guideMain .guide-team-mini .guide-real-axie small,
  #lobby #guideMain .guide-team-mini .guide-real-axie em{display:none!important}
  #lobby #guideMain .guide-team-mini .axie-preview-slot.compact-preview,
  #lobby #guideMain .guide-team-mini .guide-static-axie{
    height:52px!important;
    min-height:52px!important;
  }
  #lobby #guideMain .guide-versus-center{padding:0!important;gap:1px!important;min-width:0!important}
  #lobby #guideMain .guide-versus-center b{font-size:14px!important;line-height:1!important}
  #lobby #guideMain .guide-versus-center span{font-size:5px!important;line-height:1!important;white-space:normal!important}

  /* STEP 3 · three compact cards in one row. Restore the canonical V3 card
     chrome geometry that R212 over-compressed, especially the value medallion. */
  #lobby #guideMain .guide-real-cards{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    max-width:292px!important;
    margin:0 auto!important;
    padding:2px 2px 4px!important;
    box-sizing:border-box!important;
  }
  #lobby #guideMain .guide-real-card .card-lab-preview{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    aspect-ratio:.60!important;
    overflow:visible!important;
  }
  #lobby #guideMain .guide-real-card .duel-card-chrome.card-artframe-v3 .duel-card-topbar{
    top:0!important;left:0!important;right:0!important;height:19%!important;
    display:block!important;padding:0!important;margin:0!important;
  }
  #lobby #guideMain .guide-real-card .duel-card-chrome.card-artframe-v3 .duel-card-value-shell{
    left:-1.2%!important;top:-2.3%!important;
    width:30.5%!important;height:auto!important;aspect-ratio:1!important;
    display:grid!important;place-items:center!important;
    padding:0!important;margin:0!important;
  }
  #lobby #guideMain .guide-real-card .duel-card-chrome.card-artframe-v3 .duel-card-value{
    width:auto!important;height:auto!important;display:block!important;
    padding:0!important;margin:0!important;
    background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important;
    font-size:clamp(14px,12.2cqw,22px)!important;
    line-height:.82!important;letter-spacing:-.07em!important;
  }
  #lobby #guideMain .guide-real-card .duel-card-chrome.card-artframe-v3 .duel-card-topbar .duel-card-type-label{
    top:3.2%!important;left:30.7%!important;right:9.2%!important;height:28%!important;
    padding:0 6%!important;font-size:clamp(4px,4.6cqw,8px)!important;
  }

  /* STEP 4 · keep the selected card away from the block edge. */
  #lobby #guideMain .guide-step-fight{padding-right:12px!important}
  #lobby #guideMain .guide-fight-choice{
    grid-template-columns:minmax(0,86px) 16px minmax(0,74px)!important;
    gap:6px!important;
    width:min(100%,236px)!important;
    max-width:236px!important;
    margin:0 auto!important;
    padding:3px 8px 2px 0!important;
    box-sizing:border-box!important;
    justify-content:center!important;
    justify-items:stretch!important;
    overflow:visible!important;
  }
  #lobby #guideMain .guide-fight-axie .guide-real-axie{
    height:86px!important;min-height:86px!important;
    grid-template-rows:60px auto auto!important;
  }
  #lobby #guideMain .guide-fight-axie .axie-preview-slot.compact-preview,
  #lobby #guideMain .guide-fight-axie .guide-static-axie{
    height:60px!important;min-height:60px!important;
  }
  #lobby #guideMain .guide-fight-card{
    width:74px!important;max-width:74px!important;min-width:0!important;
    justify-self:center!important;
  }
  #lobby #guideMain .guide-fight-lock{grid-column:1/-1!important;width:100%!important;box-sizing:border-box!important}

  /* STEP 5 · families become three readable horizontal cards, instead of
     three micro-columns. Same information, much cleaner on a phone. */
  #lobby #guideMain .guide-family-grid{
    grid-template-columns:1fr!important;
    gap:6px!important;
    width:100%!important;
  }
  #lobby #guideMain .family-card{
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:4px 7px!important;
    padding:7px!important;
    border-radius:9px!important;
    align-items:center!important;
    min-width:0!important;
  }
  #lobby #guideMain .family-card header{
    grid-column:1!important;grid-row:1!important;
    align-self:center!important;min-width:0!important;
  }
  #lobby #guideMain .family-card header b{font-size:10px!important}
  #lobby #guideMain .family-card header span{font-size:6px!important;line-height:1.15!important;white-space:normal!important}
  #lobby #guideMain .family-axies{
    grid-column:2!important;grid-row:1!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:3px!important;min-width:0!important;
  }
  #lobby #guideMain .family-axies .guide-real-axie{
    height:48px!important;min-height:48px!important;
    grid-template-rows:1fr!important;padding:1px!important;gap:0!important;
    overflow:visible!important;
  }
  #lobby #guideMain .family-axies .guide-real-axie small,
  #lobby #guideMain .family-axies .guide-real-axie em{display:none!important}
  #lobby #guideMain .family-axies .axie-preview-slot.compact-preview,
  #lobby #guideMain .family-axies .guide-static-axie{
    height:46px!important;min-height:46px!important;
  }
  #lobby #guideMain .family-card p{
    margin:0!important;padding:4px 5px!important;
    border-radius:6px!important;background:rgba(5,11,18,.38)!important;
    font-size:6.6px!important;line-height:1.22!important;
    min-width:0!important;overflow-wrap:anywhere!important;
  }
  #lobby #guideMain .family-card p:nth-of-type(1){grid-column:1!important;grid-row:2!important}
  #lobby #guideMain .family-card p:nth-of-type(2){grid-column:2!important;grid-row:2!important}

  /* STEP 6 · same approach for internal hierarchy: one family per row. */
  #lobby #guideMain .guide-hierarchy-grid{
    grid-template-columns:1fr!important;
    gap:6px!important;
    width:100%!important;
  }
  #lobby #guideMain .hierarchy-card{
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:4px 7px!important;
    padding:7px!important;
    border-radius:9px!important;
    align-items:center!important;
    min-width:0!important;
  }
  #lobby #guideMain .hierarchy-card>b{
    grid-column:1!important;grid-row:1!important;
    font-size:9.5px!important;align-self:center!important;
  }
  #lobby #guideMain .hierarchy-axies{
    grid-column:2!important;grid-row:1!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:3px!important;margin:0!important;min-width:0!important;
  }
  #lobby #guideMain .hierarchy-axies .guide-real-axie{
    height:46px!important;min-height:46px!important;
    grid-template-rows:1fr!important;padding:1px!important;gap:0!important;
    overflow:visible!important;
  }
  #lobby #guideMain .hierarchy-axies .guide-real-axie small,
  #lobby #guideMain .hierarchy-axies .guide-real-axie em{display:none!important}
  #lobby #guideMain .hierarchy-axies .axie-preview-slot.compact-preview,
  #lobby #guideMain .hierarchy-axies .guide-static-axie{
    height:44px!important;min-height:44px!important;
  }
  #lobby #guideMain .hierarchy-card>span{
    grid-column:1/-1!important;grid-row:2!important;
    margin:0!important;padding:4px 6px!important;
    border-radius:6px!important;background:rgba(5,11,18,.38)!important;
    font-size:6.8px!important;line-height:1.24!important;
    white-space:normal!important;overflow-wrap:anywhere!important;
  }

  /* Right guide rail · never allow AXIE / CARTA / TIEMPO descriptions to
     escape a narrow mobile column. */
  #lobby #guideSidebar{
    padding:10px!important;
    overflow:hidden!important;
  }
  #lobby #guideSidebar .learn-side-rule{
    grid-template-columns:54px minmax(0,1fr)!important;
    gap:6px!important;
    padding:7px 0!important;
    width:100%!important;
    min-width:0!important;
  }
  #lobby #guideSidebar .learn-side-rule b{
    min-width:0!important;font-size:8.5px!important;
  }
  #lobby #guideSidebar .learn-side-rule span{
    display:block!important;min-width:0!important;max-width:100%!important;
    font-size:8.5px!important;line-height:1.3!important;
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;
  }
  #lobby #guideSidebar .learn-side-warning,
  #lobby #guideSidebar .learn-side-cta{
    width:100%!important;max-width:100%!important;box-sizing:border-box!important;
  }
}

/* A016R40R216 · WILD ARENA ENTRY */
#lobby .team-mode-actions.wallet-modes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#lobby .wild-arena-btn{border-color:rgba(239,167,71,.62);background:linear-gradient(180deg,#7c4520,#3e2113);color:#fff1cf;box-shadow:inset 0 0 0 1px rgba(255,214,140,.08)}
#lobby .wild-arena-btn:hover{border-color:#f1bd68;background:linear-gradient(180deg,#955427,#4b2816)}
@media(max-width:820px){#lobby .team-mode-actions.wallet-modes{grid-template-columns:1fr!important}#lobby .wild-arena-btn{min-height:38px!important}}


/* ========================================================================
   A016R40R217 · WILD ARENA VISUAL FOUNDATION · STEP 1
   Dashboard entry is DEMO + desktop only. It leaves the team action rail and
   shares the top header with a deliberately narrower Wallet control.
   ======================================================================== */
#lobby #wildArenaBtn{grid-area:wild!important}
@media (min-width:700px){
  #lobby[data-source-mode="demo"] .lobby-head-right{
    grid-template-columns:minmax(84px,.85fr) minmax(74px,.72fr) minmax(74px,.72fr) minmax(58px,.55fr) minmax(76px,.68fr) minmax(112px,1fr) minmax(126px,1.08fr)!important;
    grid-template-areas:"rank points stamina axies back wallet wild"!important;
  }
  #lobby[data-source-mode="demo"] #lobbyConnectWalletBtn{font-size:7.2px!important;padding-inline:6px!important}
  #lobby[data-source-mode="demo"] #wildArenaBtn{
    display:block!important;min-height:42px!important;border-color:#b97a34!important;
    background:linear-gradient(180deg,#6a3d1b,#3f2211)!important;color:#ffe0a0!important;
    box-shadow:inset 0 0 0 1px rgba(255,214,125,.08),0 0 0 1px rgba(69,37,18,.35)!important;
    font-size:8px!important;font-weight:950!important;letter-spacing:.04em!important;
  }
  #lobby[data-source-mode="demo"] #wildArenaBtn:hover:not(:disabled){border-color:#e1a251!important;color:#fff1c5!important;background:linear-gradient(180deg,#7b481f,#4b2812)!important}
  #lobby[data-source-mode="demo"] #wildArenaBtn:disabled{opacity:.48!important;cursor:not-allowed!important}
}
@media (max-width:699px){#lobby #wildArenaBtn{display:none!important}}


/* ========================================================================
   A016R40R220 · WILD INPUT / ROSTER HARDENING
   Restore the validated metrics slot when DEMO also exposes WILD.
   Desktop order: RANGO · PT · STAMINA · AXIES · VOLVER · METRICS · WALLET · WILD.
   Mobile remains exactly on the R202/R203 contract and WILD remains hidden.
   ======================================================================== */
@media (min-width:700px){
  #lobby[data-source-mode="demo"] .lobby-head-right.metrics-visible{
    grid-template-columns:minmax(84px,.85fr) minmax(74px,.72fr) minmax(74px,.72fr) minmax(58px,.55fr) minmax(76px,.68fr) 42px minmax(108px,.96fr) minmax(126px,1.08fr)!important;
    grid-template-areas:"rank points stamina axies back metrics wallet wild"!important;
  }
}


/* ========================================================================
   A016R40R231 · SPELL ACTIVATION CINEMATIC
   Presentation only. Spell authority remains entirely in engine.js.
   ======================================================================== */
body.battle-mode:not(.fight-replay-open) .arena.r231-spell-announcing::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:86!important;pointer-events:none!important;
  background:radial-gradient(circle at 50% 44%,rgba(176,92,255,.18),rgba(58,18,78,.16) 28%,rgba(4,5,12,.46) 76%)!important;
  animation:r231SpellVeil .38s ease both!important;
}
body.battle-mode:not(.fight-replay-open) .r231-spell-activation{
  position:absolute!important;z-index:92!important;left:50%!important;top:34%!important;transform:translate(-50%,-50%) scale(.9)!important;
  width:min(620px,70%)!important;pointer-events:none!important;opacity:0!important;
  border:1px solid rgba(211,156,255,.62)!important;border-radius:16px!important;
  background:linear-gradient(180deg,rgba(52,24,72,.96),rgba(17,11,28,.97))!important;
  box-shadow:0 20px 54px rgba(0,0,0,.55),0 0 34px rgba(166,75,232,.24),inset 0 1px 0 rgba(255,255,255,.11)!important;
  padding:12px 14px!important;color:#f8efff!important;text-align:center!important;
  transition:opacity .16s ease,transform .22s cubic-bezier(.18,.88,.2,1)!important;
}
body.battle-mode:not(.fight-replay-open) .r231-spell-activation.show{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-activation.leave{opacity:0!important;transform:translate(-50%,-56%) scale(.96)!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-kicker{font-size:10px!important;line-height:1!important;font-weight:1000!important;letter-spacing:.18em!important;color:#e8baff!important;text-shadow:0 0 18px rgba(207,130,255,.45)!important;margin-bottom:8px!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-rows{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-activation.is-double .r231-spell-rows{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-row{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;min-width:0!important;padding:7px 9px!important;border-radius:10px!important;background:rgba(8,7,16,.42)!important;border:1px solid rgba(216,173,255,.14)!important;text-align:left!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-glyph{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;border-radius:50%!important;background:radial-gradient(circle,rgba(221,171,255,.28),rgba(99,43,141,.24) 55%,rgba(24,13,36,.72))!important;border:1px solid rgba(229,192,255,.36)!important;font-size:19px!important;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-row>span:last-child{display:grid!important;gap:2px!important;min-width:0!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-row b{font-size:10px!important;font-weight:1000!important;letter-spacing:.08em!important;color:#fff!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-row small{font-size:6.4px!important;line-height:1.25!important;font-weight:800!important;color:#cab7d8!important;white-space:normal!important}
body.battle-mode:not(.fight-replay-open) .fighter.r231-spell-caster{z-index:88!important}
body.battle-mode:not(.fight-replay-open) .fighter.r231-spell-caster .fighter-token{filter:brightness(1.16) drop-shadow(0 0 22px rgba(184,97,255,.65))!important;animation:r231CasterPulse .54s ease-in-out infinite alternate!important}
body.battle-mode:not(.fight-replay-open) .arena.r231-spell-announcing .fighter:not(.r231-spell-caster){filter:brightness(.64) saturate(.72)!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-card-live{position:relative!important;z-index:94!important;filter:brightness(1.22) drop-shadow(0 0 14px rgba(186,99,255,.68))!important;animation:r231CardPop .62s cubic-bezier(.18,.88,.2,1) both!important}
@keyframes r231SpellVeil{from{opacity:0}to{opacity:1}}
@keyframes r231CasterPulse{from{transform:translateY(0) scale(1)}to{transform:translateY(-2px) scale(1.025)}}
@keyframes r231CardPop{0%{transform:translateY(6px) scale(.92)}35%{transform:translateY(-5px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
@media(max-width:760px){
  body.battle-mode:not(.fight-replay-open) .r231-spell-activation{top:31%!important;width:min(86%,520px)!important;padding:9px 10px!important;border-radius:12px!important}
  body.battle-mode:not(.fight-replay-open) .r231-spell-kicker{font-size:8px!important;margin-bottom:6px!important}
  body.battle-mode:not(.fight-replay-open) .r231-spell-activation.is-double .r231-spell-rows{grid-template-columns:1fr!important}
  body.battle-mode:not(.fight-replay-open) .r231-spell-row{grid-template-columns:28px minmax(0,1fr)!important;padding:5px 7px!important;gap:6px!important}
  body.battle-mode:not(.fight-replay-open) .r231-spell-glyph{width:27px!important;height:27px!important;font-size:16px!important}
  body.battle-mode:not(.fight-replay-open) .r231-spell-row b{font-size:8px!important}
  body.battle-mode:not(.fight-replay-open) .r231-spell-row small{font-size:5.4px!important}
}
@media(prefers-reduced-motion:reduce){
  body.battle-mode:not(.fight-replay-open) .r231-spell-activation,body.battle-mode:not(.fight-replay-open) .fighter.r231-spell-caster .fighter-token,body.battle-mode:not(.fight-replay-open) .r231-spell-card-live{animation:none!important;transition:none!important}
}


/* ========================================================================
   A016R40R232 · SPELL CINEMATIC FEEDBACK PASS
   Presentation only. R230 engine remains the sole authority for spell effects.
   ======================================================================== */
body.battle-mode:not(.fight-replay-open) .arena.r232-spell-stage-active{isolation:isolate!important}
body.battle-mode:not(.fight-replay-open) .arena.r232-spell-stage-active::before{background:radial-gradient(circle at 50% 42%,rgba(113,50,171,.30),rgba(14,6,25,.76) 54%,rgba(2,5,10,.86))!important;backdrop-filter:blur(1.2px)!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-activation{top:43%!important;width:min(78%,620px)!important;padding:17px 18px 15px!important;border-radius:18px!important;border:1px solid rgba(226,187,255,.46)!important;background:linear-gradient(180deg,rgba(33,18,51,.96),rgba(10,8,19,.96))!important;box-shadow:0 18px 58px rgba(0,0,0,.58),0 0 44px rgba(171,93,236,.25),inset 0 0 0 1px rgba(255,255,255,.04)!important;overflow:visible!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-kicker{font-size:14px!important;letter-spacing:.22em!important;margin-bottom:12px!important;color:#f0ccff!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-row{grid-template-columns:48px minmax(0,1fr)!important;gap:12px!important;padding:10px 12px!important;background:rgba(5,5,12,.58)!important;border-color:rgba(229,193,255,.24)!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-glyph{width:46px!important;height:46px!important;font-size:27px!important;box-shadow:0 0 26px rgba(187,108,255,.34)!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-row b{font-size:14px!important;letter-spacing:.11em!important}
body.battle-mode:not(.fight-replay-open) .r231-spell-row small{font-size:9px!important;line-height:1.35!important;color:#dfd2e8!important}
body.battle-mode:not(.fight-replay-open) .r232-arcane-seal{position:absolute!important;left:50%!important;top:0!important;width:112px!important;height:112px!important;transform:translate(-50%,-64%)!important;border:1px solid rgba(220,178,255,.48)!important;border-radius:50%!important;box-shadow:0 0 28px rgba(185,101,255,.4),inset 0 0 24px rgba(143,72,210,.18)!important;animation:r232SealSpin 3.6s linear infinite!important;pointer-events:none!important}
body.battle-mode:not(.fight-replay-open) .r232-arcane-seal::before,body.battle-mode:not(.fight-replay-open) .r232-arcane-seal::after{content:"";position:absolute;inset:12px;border:1px dashed rgba(238,211,255,.55);border-radius:50%}
body.battle-mode:not(.fight-replay-open) .r232-arcane-seal::after{inset:28px;border-style:solid;transform:rotate(45deg)}
body.battle-mode:not(.fight-replay-open) .r232-arcane-seal i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#ead3ff;box-shadow:0 0 12px #c078ff}
body.battle-mode:not(.fight-replay-open) .r232-arcane-seal i:nth-child(1){transform:translate(0,-49px)}body.battle-mode:not(.fight-replay-open) .r232-arcane-seal i:nth-child(2){transform:translate(42px,25px)}body.battle-mode:not(.fight-replay-open) .r232-arcane-seal i:nth-child(3){transform:translate(-42px,25px)}
body.battle-mode:not(.fight-replay-open) .r232-spell-particles{position:absolute!important;inset:0!important;z-index:92!important;overflow:hidden!important;pointer-events:none!important;opacity:0!important;transition:opacity .18s ease!important}
body.battle-mode:not(.fight-replay-open) .r232-spell-particles.show{opacity:1!important}
body.battle-mode:not(.fight-replay-open) .r232-spell-particles i{position:absolute!important;left:calc(8% + (var(--i) * 6.4%))!important;top:78%!important;width:4px!important;height:4px!important;border-radius:50%!important;background:#dfb7ff!important;box-shadow:0 0 10px rgba(208,151,255,.85)!important;animation:r232ParticleRise calc(1s + (var(--i) * .025s)) ease-out both!important;animation-delay:calc(var(--i) * .025s)!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-rune-caster::before{content:"✦"!important;position:absolute!important;left:50%!important;top:52%!important;width:156px!important;height:156px!important;display:grid!important;place-items:center!important;transform:translate(-50%,-50%)!important;border:2px solid rgba(203,145,255,.42)!important;border-radius:50%!important;color:rgba(231,201,255,.78)!important;font-size:24px!important;z-index:0!important;box-shadow:0 0 32px rgba(181,96,246,.36),inset 0 0 32px rgba(142,61,209,.20)!important;animation:r232CasterRune 1.05s ease-in-out infinite alternate!important;pointer-events:none!important}
body.battle-mode:not(.fight-replay-open) .r232-spell-card-focus{transform-origin:center!important;animation:r232CardFocus 1.02s cubic-bezier(.16,.84,.22,1) both!important}
body.battle-mode:not(.fight-replay-open) .r232-spell-result{position:absolute!important;z-index:98!important;top:38%!important;left:50%!important;display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;width:min(360px,64%)!important;padding:10px 14px!important;border-radius:14px!important;border:1px solid rgba(223,190,255,.38)!important;background:rgba(9,8,17,.94)!important;box-shadow:0 14px 40px rgba(0,0,0,.48),0 0 30px rgba(160,91,220,.2)!important;opacity:0!important;transform:translate(-50%,-50%) scale(.88)!important;transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1)!important;pointer-events:none!important}
body.battle-mode:not(.fight-replay-open) .r232-spell-result.show{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}body.battle-mode:not(.fight-replay-open) .r232-spell-result.leave{opacity:0!important;transform:translate(-50%,-58%) scale(.95)!important}
body.battle-mode:not(.fight-replay-open) .r232-result-icon{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;border-radius:50%!important;background:radial-gradient(circle,rgba(205,149,255,.28),rgba(70,34,98,.44))!important;font-size:25px!important;box-shadow:0 0 20px rgba(182,103,241,.3)!important}
body.battle-mode:not(.fight-replay-open) .r232-result-copy{display:grid!important;gap:2px!important;min-width:0!important}body.battle-mode:not(.fight-replay-open) .r232-result-copy b{font-size:9px!important;letter-spacing:.12em!important;color:#cbb8d8!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}body.battle-mode:not(.fight-replay-open) .r232-result-copy strong{font-size:15px!important;line-height:1.05!important;letter-spacing:.06em!important;color:#fff!important}
body.battle-mode:not(.fight-replay-open) .r232-spell-result.side-A{left:68%!important}body.battle-mode:not(.fight-replay-open) .r232-spell-result.side-B{left:32%!important}body.battle-mode:not(.fight-replay-open) .r232-spell-result.side-both{left:50%!important}
body.battle-mode:not(.fight-replay-open) .fighter[class*="r232-fx-"]{z-index:90!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-heal .fighter-token{filter:brightness(1.25) drop-shadow(0 0 24px rgba(107,255,177,.72))!important;animation:r232HealPulse .42s ease-in-out infinite alternate!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-leech .fighter-token{filter:brightness(.8) saturate(1.3) drop-shadow(0 0 20px rgba(225,64,104,.62))!important;animation:r232Drain .45s ease-in-out 2!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-fire .fighter-token{filter:brightness(1.14) sepia(.4) drop-shadow(0 0 24px rgba(255,115,42,.76))!important;animation:r232FireShake .12s linear 4!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-death .fighter-token{filter:brightness(.64) contrast(1.28) drop-shadow(0 0 26px rgba(226,56,90,.68))!important;animation:r232DeathFlash .24s ease-in-out 3!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-reflex .fighter-token{filter:brightness(1.35) drop-shadow(0 0 30px rgba(142,208,255,.85))!important;animation:r232Reflex .3s ease-in-out 2!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-ghost .fighter-token{opacity:.48!important;filter:brightness(1.45) saturate(.4) drop-shadow(0 0 28px rgba(211,228,255,.75))!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-transform .fighter-token{animation:r232Transform .65s ease both!important;filter:drop-shadow(0 0 25px rgba(123,255,228,.56))!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-control .fighter-token,body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-curse .fighter-token{filter:brightness(.78) drop-shadow(0 0 22px rgba(183,112,244,.7))!important;animation:r232Control .26s ease-in-out 2!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-thorns .fighter-token{filter:drop-shadow(0 0 24px rgba(119,220,116,.72))!important;animation:r232Thorns .28s ease-in-out 2!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-poison .fighter-token{filter:hue-rotate(55deg) saturate(1.35) drop-shadow(0 0 22px rgba(117,221,87,.66))!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-void .fighter-token{filter:grayscale(1) brightness(.58)!important;opacity:.72!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-inverse .fighter-token{animation:r232Inverse .55s ease both!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-power .fighter-token,body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-rage .fighter-token{filter:brightness(1.25) saturate(1.4) drop-shadow(0 0 24px rgba(255,103,82,.7))!important;animation:r232Power .25s ease-in-out 2!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-steal .fighter-token{filter:brightness(1.18) drop-shadow(0 0 22px rgba(245,204,95,.58))!important;animation:r232Steal .42s ease both!important}
body.battle-mode:not(.fight-replay-open) .fighter.r232-fx-life .fighter-token{filter:brightness(1.22) drop-shadow(0 0 25px rgba(255,225,142,.72))!important;animation:r232Life .5s ease both!important}
@keyframes r232SealSpin{to{transform:translate(-50%,-64%) rotate(360deg)}}
@keyframes r232ParticleRise{0%{transform:translateY(0) scale(.5);opacity:0}20%{opacity:1}100%{transform:translateY(-190px) scale(1.2);opacity:0}}
@keyframes r232CasterRune{from{opacity:.48;transform:translate(-50%,-50%) scale(.9) rotate(-8deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(8deg)}}
@keyframes r232CardFocus{0%{transform:translateY(10px) scale(.88)}38%{transform:translateY(-12px) scale(1.18)}68%{transform:translateY(-5px) scale(1.1)}100%{transform:translateY(0) scale(1.04)}}
@keyframes r232HealPulse{to{transform:translateY(-3px) scale(1.035)}}@keyframes r232Drain{50%{transform:translateX(-5px) scale(.97)}}@keyframes r232FireShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes r232DeathFlash{50%{opacity:.45;transform:scale(.97)}}@keyframes r232Reflex{50%{transform:scale(1.045)}}@keyframes r232Transform{0%{transform:scale(.94);filter:hue-rotate(0deg)}50%{transform:scale(1.08);filter:hue-rotate(145deg)}100%{transform:scale(1);filter:hue-rotate(0deg)}}@keyframes r232Control{50%{transform:translateY(3px) scale(.98)}}@keyframes r232Thorns{50%{transform:scale(1.035)}}@keyframes r232Inverse{50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}@keyframes r232Power{50%{transform:scale(1.04)}}@keyframes r232Steal{50%{transform:translateY(-5px) rotate(-2deg)}}@keyframes r232Life{50%{transform:translateY(-4px) scale(1.04)}}
@media(max-width:700px){
  body.battle-mode:not(.fight-replay-open) .r231-spell-activation{top:38%!important;width:min(90%,520px)!important;padding:12px!important;border-radius:14px!important}
  body.battle-mode:not(.fight-replay-open) .r231-spell-kicker{font-size:10px!important;margin-bottom:8px!important}
  body.battle-mode:not(.fight-replay-open) .r231-spell-row{grid-template-columns:34px minmax(0,1fr)!important;padding:7px 8px!important;gap:7px!important}
  body.battle-mode:not(.fight-replay-open) .r231-spell-glyph{width:33px!important;height:33px!important;font-size:19px!important}
  body.battle-mode:not(.fight-replay-open) .r231-spell-row b{font-size:10px!important}body.battle-mode:not(.fight-replay-open) .r231-spell-row small{font-size:6.4px!important}
  body.battle-mode:not(.fight-replay-open) .r232-arcane-seal{width:82px!important;height:82px!important;transform:translate(-50%,-63%)!important}
  body.battle-mode:not(.fight-replay-open) .r232-spell-result{top:35%!important;width:min(72%,330px)!important;grid-template-columns:36px minmax(0,1fr)!important;padding:8px 10px!important}.r232-result-icon{width:34px!important;height:34px!important;font-size:20px!important}.r232-result-copy strong{font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){
  body.battle-mode:not(.fight-replay-open) .r232-arcane-seal,body.battle-mode:not(.fight-replay-open) .r232-spell-particles i,body.battle-mode:not(.fight-replay-open) .fighter.r232-rune-caster::before,body.battle-mode:not(.fight-replay-open) .r232-spell-card-focus,body.battle-mode:not(.fight-replay-open) .fighter[class*="r232-fx-"] .fighter-token{animation:none!important}
}


/* ========================================================================
   A016R40R233 · ARENA TRANSIENT EVENT RAIL
   Uses the existing unused top-center strip between RIVAL and TU CARTA.
   Absolute overlay only: no new row, no arena reflow, no card displacement.
   ======================================================================== */
body.battle-mode:not(.fight-replay-open) .arena-event-rail{
  position:absolute!important;z-index:34!important;top:10px!important;left:154px!important;right:154px!important;
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center!important;align-items:start!important;
  gap:7px!important;min-width:0!important;pointer-events:none!important;opacity:0!important;transform:translateY(-5px)!important;
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)!important;
}
body.battle-mode:not(.fight-replay-open) .arena-event-rail.hidden{display:none!important}
body.battle-mode:not(.fight-replay-open) .arena-event-rail.is-live{opacity:1!important;transform:translateY(0)!important}
body.battle-mode:not(.fight-replay-open) .arena-event-rail.count-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-items:stretch!important}
body.battle-mode:not(.fight-replay-open) .arena-event-rail.count-1{grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-items:stretch!important}
body.battle-mode:not(.fight-replay-open) .arena-event-rail.count-1.single-side-rival .arena-event-notice{grid-column:1!important;width:100%!important}
body.battle-mode:not(.fight-replay-open) .arena-event-rail.count-1.single-side-you .arena-event-notice{grid-column:2!important;width:100%!important}
body.battle-mode:not(.fight-replay-open) .arena-event-notice{
  width:min(520px,100%)!important;min-width:0!important;max-height:62px!important;overflow:hidden!important;
  display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;gap:2px!important;padding:6px 9px 7px!important;
  border:1px solid rgba(198,148,239,.48)!important;border-radius:10px!important;
  background:linear-gradient(180deg,rgba(23,15,34,.94),rgba(10,10,18,.91))!important;
  box-shadow:0 9px 24px rgba(0,0,0,.34),inset 0 0 20px rgba(158,83,211,.07)!important;
  backdrop-filter:blur(5px)!important;
}
body.battle-mode:not(.fight-replay-open) .arena-event-rail.count-2 .arena-event-notice{width:100%!important}
body.battle-mode:not(.fight-replay-open) .arena-event-meta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-width:0!important}
body.battle-mode:not(.fight-replay-open) .arena-event-source{font-size:6.5px!important;font-weight:1000!important;letter-spacing:.11em!important;color:#d9c8e7!important;white-space:nowrap!important}
body.battle-mode:not(.fight-replay-open) .arena-event-state{display:inline-flex!important;align-items:center!important;min-height:15px!important;padding:1px 5px!important;border-radius:999px!important;border:1px solid rgba(194,139,238,.34)!important;background:rgba(141,71,194,.16)!important;color:#e8cfff!important;font-size:6.6px!important;font-weight:1000!important;letter-spacing:.08em!important;white-space:nowrap!important}
body.battle-mode:not(.fight-replay-open) .arena-event-body{display:grid!important;grid-template-columns:18px auto minmax(0,1fr)!important;align-items:center!important;gap:6px!important;min-width:0!important}
body.battle-mode:not(.fight-replay-open) .arena-event-icon{display:grid!important;place-items:center!important;width:18px!important;height:18px!important;border-radius:50%!important;background:rgba(181,103,241,.16)!important;font-size:12px!important;line-height:1!important}
body.battle-mode:not(.fight-replay-open) .arena-event-body strong{min-width:0!important;color:#fff!important;font-size:9.4px!important;line-height:1!important;letter-spacing:.055em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.battle-mode:not(.fight-replay-open) .arena-event-body small{min-width:0!important;color:#b9b0c4!important;font-size:7.6px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.battle-mode:not(.fight-replay-open) .arena-event-notice.state-applied{border-color:rgba(91,208,151,.50)!important;box-shadow:0 9px 24px rgba(0,0,0,.34),inset 0 0 18px rgba(70,184,127,.07)!important}
body.battle-mode:not(.fight-replay-open) .arena-event-notice.state-applied .arena-event-state{border-color:rgba(82,207,143,.40)!important;background:rgba(42,154,99,.17)!important;color:#a9f2cd!important}
body.battle-mode:not(.fight-replay-open) .arena-event-notice.state-none{border-color:rgba(139,148,165,.38)!important;filter:saturate(.72)!important}
body.battle-mode:not(.fight-replay-open) .arena-event-notice.state-none .arena-event-state{border-color:rgba(150,158,172,.32)!important;background:rgba(111,119,132,.16)!important;color:#c3cad4!important}
body.battle-mode:not(.fight-replay-open) .arena-event-notice.state-next{border-color:rgba(229,184,79,.52)!important;box-shadow:0 9px 24px rgba(0,0,0,.34),inset 0 0 18px rgba(203,155,47,.07)!important}
body.battle-mode:not(.fight-replay-open) .arena-event-notice.state-next .arena-event-state{border-color:rgba(230,186,83,.42)!important;background:rgba(191,137,31,.16)!important;color:#f4d98d!important}
@media (max-width:1050px){
  body.battle-mode:not(.fight-replay-open) .arena-event-rail{left:132px!important;right:132px!important;top:8px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-body small{font-size:6.6px!important}
}
@media (orientation:landscape) and (max-width:999px) and (max-height:600px){
  body.battle-mode:not(.fight-replay-open) .arena-event-rail{left:60px!important;right:60px!important;top:5px!important;gap:4px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-notice{max-height:45px!important;padding:4px 6px 5px!important;border-radius:7px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-source{font-size:4.9px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-state{min-height:12px!important;padding:0 4px!important;font-size:4.7px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-body{grid-template-columns:14px auto minmax(0,1fr)!important;gap:4px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-icon{width:14px!important;height:14px!important;font-size:9px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-body strong{font-size:6.8px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-body small{font-size:5.3px!important}
}
@media (orientation:portrait) and (max-width:759px){
  body.battle-mode:not(.fight-replay-open) .arena-event-rail{left:58px!important;right:58px!important;top:5px!important;gap:4px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-notice{max-height:48px!important;padding:4px 6px 5px!important;border-radius:7px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-body small{display:none!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-source{font-size:5px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-state{min-height:12px!important;padding:0 4px!important;font-size:4.5px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-body{grid-template-columns:14px minmax(0,1fr)!important;gap:4px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-icon{width:14px!important;height:14px!important;font-size:9px!important}
  body.battle-mode:not(.fight-replay-open) .arena-event-body strong{font-size:6.6px!important}
}
@media (max-width:640px){body.battle-mode:not(.fight-replay-open) .arena-event-rail.count-2 .arena-event-body small{display:none!important}}
@media (prefers-reduced-motion:reduce){body.battle-mode:not(.fight-replay-open) .arena-event-rail{transition:none!important}}


/* ========================================================================
   A016R40R263 · STABLE CARD HOVER HITBOX
   Desktop/fine-pointer only. The card item itself is the hover hitbox and must
   never translate: moving the hitbox can make :hover oscillate at its edge,
   producing the visible flicker reported in live battle. Visual feedback stays
   on the inner card chrome (shadow/brightness), while tooltip anchoring remains
   fixed and pointer-events:none. No gameplay or card logic changes.
   ======================================================================== */
@media (hover:hover) and (pointer:fine){
  body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.owner-active:hover{
    transform:none!important;
    z-index:35!important;
  }
  body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.owner-active:hover .card-btn{
    filter:brightness(1.035) saturate(1.02)!important;
    box-shadow:0 12px 26px rgba(0,0,0,.48),0 0 0 1px color-mix(in srgb,var(--arena-card-accent) 28%,transparent)!important;
  }
  body.battle-mode:not(.fight-replay-open) #hand .arena-card-item.owner-active .card-help-popover{
    pointer-events:none!important;
  }
}


/* ========================================================================
   A016R40R264 · STABLE CARD DESCRIPTION TOOLTIP
   Desktop/fine-pointer: use one persistent fixed tooltip outside the hand DOM.
   This removes the remaining flicker caused by hand re-renders destroying the
   card-local :hover tooltip. Touch keeps the canonical explicit info control.
   ======================================================================== */
.r264-card-hover-tooltip{
  position:fixed!important;z-index:10020!important;
  width:clamp(180px,20vw,250px)!important;max-width:calc(100vw - 16px)!important;
  display:grid!important;gap:4px!important;padding:9px 10px!important;
  border-radius:10px!important;border:1px solid #526681!important;
  background:rgba(9,14,23,.985)!important;color:#edf5ff!important;
  box-shadow:0 14px 30px rgba(0,0,0,.58)!important;
  pointer-events:none!important;opacity:0!important;visibility:hidden!important;
  transform:none!important;transition:none!important;
}
.r264-card-hover-tooltip.is-visible{opacity:1!important;visibility:visible!important}
.r264-card-hover-tooltip b{font-size:10px!important;color:#f4d276!important}
.r264-card-hover-tooltip span{font-size:10px!important;line-height:1.28!important;color:#eef5ff!important}
.r264-card-hover-tooltip small{font-size:8px!important;color:#9fb0c8!important}
@media (hover:hover) and (pointer:fine){
  body.battle-mode:not(.fight-replay-open) #hand .card-help-popover{display:none!important}
}
@media (hover:none),(pointer:coarse){.r264-card-hover-tooltip{display:none!important}}