:root {
  --aura-bg: #081225;
  --aura-surface: #0d1a31;
  --aura-surface-2: #132543;
  --aura-line: #35527b;
  --aura-text-soft: #b8c8df;
  --aura-cyan: #42eaff;
  --aura-purple: #8a5cff;
  --aura-pink: #f03cdb;
  --aura-mint: #71f4c2;
}

body {
  background:
    radial-gradient(circle at 18% 6%, #27318b55 0, transparent 30%),
    radial-gradient(circle at 88% 22%, #a52b9b42 0, transparent 31%),
    linear-gradient(155deg, #08142a 0%, #090c1a 52%, #10152d 100%);
  background-attachment: fixed;
}

.shell,
main {
  background: transparent;
}

.side {
  background:
    radial-gradient(circle at 25% 9%, #6137c133 0, transparent 30%),
    linear-gradient(180deg, #0b1327f7, #07101ff7);
  border-color: #35527b;
  box-shadow: 16px 0 55px #02071270;
}

header {
  background: linear-gradient(100deg, #0d1930f4, #11122af4 62%, #1c1231f2);
  border-color: #39577f;
  box-shadow: 0 12px 38px #03081766, inset 0 -1px #8a5cff24;
  backdrop-filter: blur(18px);
}

.brand,
h1,
h2,
h3,
.fighter > b {
  text-shadow: 0 2px 24px #9580ff24;
}

.fighter-countdown {
  --timer-angle: 360deg;
  position: absolute;
  z-index: 12;
  top: 47%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(104px, 10vw, 142px);
  height: clamp(104px, 10vw, 142px);
  padding: 11px;
  transform: translate(-50%, -50%);
  border: 2px solid #79efff;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at center, #101a35 0 56%, transparent 58%),
    conic-gradient(#54edff var(--timer-angle), #263450 0);
  box-shadow: 0 0 44px #31ddffaa, 0 0 0 999px #06101c26, inset 0 0 24px #6c5cff65;
  font-style: normal;
  line-height: 1;
  pointer-events: none;
}

.fighter-countdown span {
  align-self: end;
  max-width: 110px;
  overflow: hidden;
  color: #a8f6ff;
  font-size: clamp(10px, .9vw, 14px);
  font-weight: 900;
  letter-spacing: .08em;
  text-overflow: ellipsis;
}

.fighter-countdown strong {
  align-self: start;
  color: #fff;
  font-size: clamp(42px, 4.3vw, 62px);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px #44eaff;
}

#fighter-b .fighter-countdown {
  border-color: #ff6ae1;
  background:
    radial-gradient(circle at center, #21122f 0 56%, transparent 58%),
    conic-gradient(#ff55da var(--timer-angle), #3c2949 0);
  box-shadow: 0 0 28px #ff40d670, inset 0 0 18px #a64fff4f;
}

.fighter-countdown.urgent {
  border-color: #ff7188;
  animation: battle-timer-pulse .45s ease-in-out infinite alternate;
}

.battle-matchmaking {
  position: absolute;
  z-index: 13;
  inset: 30px 8px 54px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  overflow: hidden;
  border: 1px solid #ff59dc88;
  border-radius: 18px;
  color: #fff;
  background: radial-gradient(circle, #53226ee8, #101d39f2 58%, #07101ef7);
  box-shadow: inset 0 0 60px #ff42d83b, 0 0 34px #7c54ff45;
  transition: opacity .38s ease, filter .38s ease;
}

.battle-matchmaking::before,
.battle-matchmaking::after {
  content: "";
  position: absolute;
  inset: -25%;
  background: repeating-linear-gradient(105deg, transparent 0 42px, #52e9ff18 44px 48px, transparent 50px 88px);
  animation: matchmaking-scan 1.15s linear infinite;
}

.battle-matchmaking::after {
  transform: scaleX(-1);
  filter: hue-rotate(95deg);
  animation-duration: 1.55s;
}

.roulette-window {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  padding: 8px 0;
  overflow: hidden;
  border: 1px solid #82edff66;
  border-radius: 15px;
  background: #071020d9;
  box-shadow: inset 0 0 26px #44dfff22;
}
.roulette-track { display: flex; gap: 8px; width: max-content; padding-inline: 8px; will-change: transform; }
.roulette-card {
  display: grid;
  flex: 0 0 84px;
  grid-template-rows: 64px auto;
  justify-items: center;
  gap: 4px;
  padding: 7px;
  border: 1px solid hsl(var(--roulette-hue) 80% 68% / .6);
  border-radius: 12px;
  background: linear-gradient(155deg, hsl(var(--roulette-hue) 65% 28% / .95), #11182e);
  box-shadow: inset 0 1px #fff2;
}
.roulette-card i {
  display: grid;
  width: 48px;
  height: 60px;
  place-items: start center;
  padding-top: 8px;
  border-radius: 45% 45% 32% 32%;
  color: #fff;
  background: radial-gradient(circle at 50% 24%, #ffe7d9 0 18%, transparent 19%), linear-gradient(90deg, transparent 22%, #7eeaff 23% 42%, transparent 43% 57%, #d764ff 58% 77%, transparent 78%);
  filter: drop-shadow(0 0 10px hsl(var(--roulette-hue) 90% 65%));
  font-style: normal;
  font-weight: 900;
}
.roulette-card small { max-width: 70px; overflow: hidden; color: #e9f5ff; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.roulette-card.chosen { border-color: #fff; transform: scale(1.05); box-shadow: 0 0 22px #7ef4ff; }
.battle-matchmaking span,
.battle-matchmaking strong { position: relative; z-index: 1; }
.battle-matchmaking span { color: #9cf6ff; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.battle-matchmaking strong { font-size: clamp(17px, 2vw, 26px); }
.battle-matchmaking.selected { opacity: 0; filter: brightness(1.8); }

@keyframes matchmaking-scan { to { transform: translateX(90px); } }

.side nav button,
.tools button,
.tabs button,
.ghost,
.secondary,
.vote,
.cards button,
.battle-modes button {
  color: #e5edfb;
  border-color: #3b5377;
  background: linear-gradient(145deg, #14233c, #0d182d);
  box-shadow: inset 0 1px #ffffff0d, 0 8px 20px #02071340;
  transition: transform .18s ease, border-color .18s ease, filter .18s ease, box-shadow .18s ease;
}

.side nav button:hover,
.tools button:hover,
.tabs button:hover,
.ghost:hover,
.secondary:hover,
.vote:hover:not(:disabled),
.cards button:hover,
.battle-modes button:hover {
  transform: translateY(-1px);
  border-color: #8a72dc;
  filter: brightness(1.12);
  box-shadow: 0 10px 28px #3f2d8a45, inset 0 1px #ffffff1a;
}

.side nav button.active,
.tabs button.active,
.battle-modes button.selected,
.cards button.selected {
  color: #fff;
  border-color: #b16cff;
  background: linear-gradient(110deg, #5f36e8, #a52fd0 55%, #e032cb);
  box-shadow: 0 0 0 1px #dba8ff38 inset, 0 10px 30px #8b32de55, 0 0 22px #d43cd333;
}

.primary,
.landing-primary {
  background: linear-gradient(105deg, #6550ff 0%, #9f3ff1 46%, #ed34d1 100%);
  box-shadow: 0 12px 34px #8f3de358, inset 0 1px #ffffff3d;
}

.primary:hover,
.landing-primary:hover {
  filter: brightness(1.13) saturate(1.08);
  box-shadow: 0 15px 42px #ad3fe16b, 0 0 22px #ed45d440;
}

.panel,
.move-panel {
  background:
    radial-gradient(circle at 95% 4%, #6533a42e, transparent 32%),
    linear-gradient(160deg, #101c34, #0a1326 70%);
  border-color: #365378;
}

.stage {
  background:
    radial-gradient(circle at 50% 34%, #315f88 0%, #17385d 31%, #0b1c35 61%, #080d1d 100%);
  box-shadow: inset 0 0 95px #1aa9d616, inset 0 -45px 70px #03081377;
}

.status,
.pill,
.badge {
  color: #9bffd8;
  border-color: #43c893;
  background: linear-gradient(135deg, #0c2a29ed, #0b1e2bed);
  box-shadow: 0 10px 28px #02091366, 0 0 21px #46eeb52b, inset 0 1px #b4ffe329;
  backdrop-filter: blur(12px);
}

.info,
.profile,
.home-steps article,
.community-card,
.community-item,
.rankrow,
.battle-lobby,
.battle-runtime,
.battle-history,
.capture-media,
.capture-preview,
.capture-progress,
.capture-advanced,
.movegrid {
  border-color: #385679;
  background:
    linear-gradient(145deg, #13233d, #0b172b 72%);
  box-shadow: inset 0 1px #ffffff0d, 0 15px 38px #02071342;
}

.rankrow:nth-child(1) {
  border-color: #d6b65c;
  background: linear-gradient(120deg, #3a2a1d, #17233a 58%, #39233c);
  box-shadow: 0 0 26px #e6ba4533, inset 0 1px #fff2b52b;
}

.panel select,
.panel input[type="text"],
#move-name,
.header-actions select,
.move-library select,
.battle-lobby select,
.battle-lobby input,
.fighter select,
.auth-dialog input {
  color: #f5f8ff;
  border-color: #456286;
  background: linear-gradient(145deg, #15253e, #0d192d);
  box-shadow: inset 0 1px 8px #01040d55;
}

.panel select:focus,
.panel input:focus,
.move-library select:focus,
.battle-lobby select:focus,
.battle-lobby input:focus,
.fighter select:focus {
  outline: 2px solid #9d5dff;
  outline-offset: 1px;
  border-color: transparent;
}

.arenas {
  border-color: #6b68a6;
  background: linear-gradient(155deg, #0d1b3b, #0c0b28 55%, #231038);
  box-shadow: inset 0 0 85px #287db329, 0 24px 60px #02040ca3, 0 0 38px #8539d72b;
}

.arenas::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 45%, #30dffc12 0, transparent 29%),
    radial-gradient(ellipse at 78% 45%, #ff3bd616 0, transparent 29%);
  mix-blend-mode: screen;
}

.arena-marquee {
  color: #f7fbff;
  border-color: #ae91ff;
  background: linear-gradient(100deg, #0b1731e8, #23103ce8);
  box-shadow: 0 0 34px #865cff7a, inset 0 0 22px #44e7ff24;
}

.fighter > b {
  color: #fff;
  border-color: #7a88b0;
  background: linear-gradient(120deg, #14203be8, #21153ce8);
  box-shadow: 0 8px 25px #02040d99, 0 0 18px #705cff38;
}

.opponent-private {
  position: relative;
  z-index: 6;
  grid-row: 3 / 5;
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #657799;
  border-radius: 12px;
  color: #c3cee0;
  background: linear-gradient(120deg, #121d32e8, #17162de8);
  box-shadow: inset 0 1px #ffffff10, 0 10px 28px #02071366;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
}

.battle-confetti {
  position: absolute;
  z-index: 14;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.battle-confetti i {
  position: absolute;
  top: var(--start-y, -24px);
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * .58);
  border-radius: 2px;
  background: var(--color);
  box-shadow: 0 0 8px var(--color);
  animation: battle-confetti-fall var(--duration) cubic-bezier(.18,.72,.33,1) var(--delay) forwards;
}

.battle-confetti i:nth-child(3n) { border-radius: 50%; }
.battle-confetti i:nth-child(4n) { height: var(--size); transform: rotate(45deg); }

@keyframes battle-confetti-fall {
  0% { opacity: .95; transform: translate3d(0,-20px,0) rotate(0); }
  8% { opacity: 1; }
  100% { opacity: .08; transform: translate3d(var(--drift),var(--fall),0) rotate(var(--spin)); }
}

.auth-dialog {
  border-color: #526d96;
  background: linear-gradient(145deg, #101c34, #091326);
  box-shadow: 0 30px 110px #000d, 0 0 90px #7d46ff3d;
}

.auth-form-panel {
  background: radial-gradient(circle at 100% 0, #343b9250, transparent 42%);
}

.hint,
.info,
.profile small,
.home-steps span,
.community-item small {
  color: var(--aura-text-soft);
}

@media (max-width: 760px) and (orientation: portrait) {
  .side {
    background: linear-gradient(180deg, #101a32f5, #091326fa);
    border-top-color: #49658d;
    box-shadow: 0 -14px 42px #0207138f;
  }
  #creator > .panel,
  .movegrid > .move-panel {
    background: linear-gradient(165deg, #111f38, #0a1428 72%);
  }
  #battle .opponent-private {
    min-height: 0;
    padding: 3px;
    border-radius: 7px;
    font-size: 7px;
    line-height: 1.15;
  }
  .fighter-countdown { top: 43%; width: 94px; height: 94px; padding: 8px; }
  .fighter-countdown span { font-size: 9px; }
  .fighter-countdown strong { font-size: 39px; }
  .battle-matchmaking { inset: 25px 3px 50px; border-radius: 12px; }
  .roulette-window { width: min(100%, 220px); }
  .roulette-card { flex-basis: 64px; grid-template-rows: 48px auto; padding: 5px; }
  .roulette-card i { width: 38px; height: 46px; }
}

@media (orientation: landscape) and (max-width: 1180px) and (max-height: 700px) {
  .side { background: linear-gradient(180deg, #111d36f5, #091326fa); }
  .opponent-private { min-height: 0; padding: 2px 4px; border-radius: 6px; font-size: 7px; line-height: 1.1; }
  .fighter { grid-template-rows: 16px minmax(0,1fr) 24px 24px; }
  .fighter-countdown { top: 45%; width: 72px; height: 72px; padding: 5px; }
  .fighter-countdown span { font-size: 7px; }
  .fighter-countdown strong { font-size: 29px; }
  .battle-matchmaking { inset: 17px 2px 49px; gap: 2px; border-radius: 8px; }
  .roulette-window { width: min(100%, 190px); padding: 3px 0; }
  .roulette-card { flex-basis: 48px; grid-template-rows: 32px auto; gap: 1px; padding: 3px; border-radius: 6px; }
  .roulette-card i { width: 27px; height: 31px; padding-top: 2px; font-size: 8px; }
  .roulette-card small { max-width: 42px; font-size: 5px; }
  .battle-matchmaking span { font-size: 7px; }
  .battle-matchmaking strong { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .battle-confetti { display: none; }
}

/* v3.6 · Arena cinematografica con HUD de videojuego. */
#battle .battle-arena-3d {
  grid-template-columns: minmax(0,1fr) clamp(86px,10vw,142px) minmax(0,1fr);
  min-height: 590px;
  padding: 82px 22px 20px;
  border: 1px solid #8b70ff;
  border-radius: 30px;
  background:
    linear-gradient(180deg,#07122638 0%,#09122a12 52%,#020817a8 100%),
    url("../assets/images/battle-arena-premium-v1.png") center / cover no-repeat;
  box-shadow: 0 28px 80px #000c,0 0 55px #8253ff55,inset 0 0 80px #0b183c66;
}
#battle .battle-arena-3d::before {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,#19d9ff14,transparent 38%,transparent 62%,#ff36d918),
    radial-gradient(ellipse at 50% 100%,transparent 35%,#0306148f 100%);
}
#battle .battle-environment { z-index:1; opacity:.16; mix-blend-mode:screen; }
#battle .arena-scanlines { z-index:3; opacity:.045; }

.battle-hud {
  position:absolute;
  z-index:15;
  top:14px;
  left:18px;
  right:18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(140px,20%,230px) minmax(0,1fr);
  align-items:start;
  gap:14px;
  pointer-events:none;
}
.battle-hud-player {
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  min-width:0;
  height:62px;
  padding:8px 15px 9px 9px;
  border:2px solid #45eaff;
  clip-path:polygon(0 0,96% 0,100% 50%,96% 100%,0 100%);
  color:#fff;
  background:linear-gradient(105deg,#071a38ed,#082c54df 70%,#075078c9);
  box-shadow:0 0 24px #24ddff72,inset 0 0 25px #2ae8ff20;
}
.battle-hud-right {
  grid-template-columns:auto minmax(0,1fr) 46px;
  padding:8px 9px 9px 15px;
  clip-path:polygon(4% 0,100% 0,100% 100%,4% 100%,0 50%);
  border-color:#ff52df;
  background:linear-gradient(255deg,#321044ed,#581058df 70%,#6c125fc9);
  box-shadow:0 0 24px #ff38da72,inset 0 0 25px #ff4cdd26;
  text-align:right;
}
.battle-hud-player > i {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:2px solid currentColor;
  border-radius:50%;
  color:#71f3ff;
  background:#07132ced;
  box-shadow:0 0 16px #35ddff;
  font-style:normal;
}
.battle-hud-right > i { color:#ff78e7; box-shadow:0 0 16px #ff43dc; }
.battle-hud-player div { display:grid; min-width:0; gap:5px; }
.battle-hud-player div b { overflow:hidden; font-size:clamp(13px,1.3vw,21px); letter-spacing:.035em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.battle-hud-player div span { display:block; height:8px; border:1px solid #66eeff77; border-radius:999px; background:linear-gradient(90deg,#4ef2ff 0 80%,#092442 80%); box-shadow:0 0 12px #2ee5ff88; }
.battle-hud-right div span { border-color:#ff76e477; background:linear-gradient(270deg,#ff51df 0 80%,#33103e 80%); box-shadow:0 0 12px #ff42dc88; }
.battle-hud-player > strong { font-size:clamp(22px,2.5vw,38px); font-variant-numeric:tabular-nums; text-shadow:0 0 18px currentColor; }
.battle-hud-brand {
  display:grid;
  justify-items:center;
  align-content:center;
  min-height:74px;
  margin-top:-3px;
  padding:8px 15px 10px;
  clip-path:polygon(8% 0,92% 0,100% 70%,82% 70%,74% 100%,26% 100%,18% 70%,0 70%);
  background:linear-gradient(180deg,#121b48f2,#0c1231f2);
  filter:drop-shadow(0 0 16px #795cff90);
}
.battle-hud-brand em { color:#bcadff; font-size:clamp(18px,2.1vw,30px); font-style:italic; font-weight:950; letter-spacing:.16em; line-height:.85; text-shadow:0 0 16px #55eaff; }
.battle-hud-brand > b { color:#fff; font-size:11px; letter-spacing:.36em; }
.battle-hud-brand small { margin-top:7px; color:#eae9ff; font-size:11px; font-weight:900; }

#battle .fighter {
  z-index:5;
  grid-template-rows:minmax(0,1fr) auto;
  gap:8px;
  padding-top:0;
}
#battle .battlecanvas { min-height:0; border:0; filter:drop-shadow(0 18px 12px #000a); }
#battle .battle-actions {
  position:relative;
  z-index:21;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(170px,.85fr);
  gap:8px;
  min-width:0;
}
#battle .fighter select,
#battle .fighter .vote,
#battle .opponent-private {
  min-height:50px;
  border-width:2px;
  border-radius:15px;
  font-size:14px;
  font-weight:800;
  backdrop-filter:blur(15px);
}
#battle #fighter-a select { border-color:#46e9ff; background:linear-gradient(120deg,#07182ff0,#073958de); box-shadow:0 0 22px #23dfff35; }
#battle #fighter-a .vote:not(:disabled) { color:#03121b; background:linear-gradient(100deg,#79f7ff,#25ccff); box-shadow:0 0 32px #23e5ff9c,inset 0 1px #fff; }
#battle #fighter-a .vote:disabled { color:#8195aa; background:#071326d9; }
#battle .opponent-private { color:#f6ddff; border-color:#e75bda; background:linear-gradient(120deg,#21102ff0,#431447de); box-shadow:0 0 22px #ff3cdc35; }

#battle .versus {
  width:clamp(92px,9vw,132px);
  min-height:clamp(92px,9vw,132px);
  border:0;
  border-radius:22px;
  color:#fff;
  background:linear-gradient(135deg,#17dffcdd 0 47%,#f33bdcdd 53% 100%);
  box-shadow:0 0 45px #a847f6aa,inset 0 0 0 2px #ffffff55;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  font-size:clamp(34px,4vw,55px);
  text-shadow:0 3px 18px #000;
}
#battle .versus small { width:78%; max-height:44px; margin:3px 0 0; overflow:hidden; color:#fff; font-size:9px; line-height:1.1; text-shadow:0 2px 5px #000; }
#battle .fighter-countdown { z-index:20; top:36%; }
#battle .battle-countdown-live {
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin:4px 0;
  border:3px solid #fff;
  border-radius:50%;
  color:#fff;
  background:#08142ee8;
  box-shadow:0 0 28px #50e8ff, inset 0 0 18px #a44cff;
  font-size:34px;
  font-weight:950;
  line-height:1;
  clip-path:none;
}
#battle .battle-countdown-live.urgent {
  color:#fff3ac;
  border-color:#ffd85e;
  animation:battle-timer-pulse .45s ease-in-out infinite alternate;
}

/* v3.6.2 · El vestíbulo conserva la arena y los luchadores, pero no simula
   una ronda. Los controles aparecen solo al crear o reanudar la batalla. */
#battle.battle-preview .battle-arena-3d {
  min-height:520px;
  filter:saturate(.92) brightness(.94);
}
#battle.battle-preview .fighter select,
#battle.battle-preview .fighter .vote,
#battle.battle-preview .opponent-private { visibility:visible; }
#battle.battle-preview .fighter .vote { pointer-events:none; }
#battle.battle-preview .versus {
  width:clamp(118px,12vw,170px);
  min-height:clamp(118px,12vw,170px);
}
#battle.battle-preview .versus small {
  max-height:none;
  font-size:clamp(9px,1vw,13px);
  line-height:1.18;
}
#battle.battle-preview .battle-hud-player div span {
  background:#122441;
  box-shadow:none;
}
#battle.battle-preview .battle-hud-right div span { background:#341338; }

@media (max-width:760px) and (orientation:portrait) {
  #battle.battle-live .battlewrap {
    height:calc(100svh - 140px - env(safe-area-inset-bottom));
    min-height:0;
    padding:5px;
    overflow:hidden;
  }
  #battle.battle-live .battlehead { display:none; }
  #battle.battle-live .battle-runtime {
    height:48px;
    margin:0 0 5px;
    padding:4px 7px;
    gap:6px;
    flex-wrap:nowrap;
    border-radius:11px;
    font-size:10px;
  }
  #battle.battle-live .battle-runtime strong { margin-left:auto; font-size:13px; }
  #battle.battle-live .battle-runtime button { min-height:34px; padding:4px 8px; font-size:9px; white-space:nowrap; }
  #battle.battle-live #new-battle,
  #battle.battle-live #battle-history,
  #battle.battle-live #rematch-battle { display:none!important; }
  #battle .battle-arena-3d {
    grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);
    height:61svh;
    min-height:500px;
    padding:66px 7px 8px;
    border-radius:18px;
    background-position:center;
  }
  #battle.battle-live .battle-arena-3d {
    height:calc(100% - 53px);
    min-height:0;
  }
  .battle-hud { top:7px; left:6px; right:6px; grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr); gap:4px; }
  .battle-hud-player { grid-template-columns:25px minmax(0,1fr) auto; height:48px; gap:5px; padding:5px 8px 5px 5px; border-width:1px; }
  .battle-hud-right { grid-template-columns:auto minmax(0,1fr) 25px; padding:5px 5px 5px 8px; }
  .battle-hud-player > i { width:24px; height:24px; border-width:1px; font-size:10px; }
  .battle-hud-player div { gap:3px; }
  .battle-hud-player div b { font-size:9px; }
  .battle-hud-player div span { height:5px; }
  .battle-hud-player > strong { font-size:15px; }
  .battle-hud-brand { min-height:56px; padding:5px 5px 8px; }
  .battle-hud-brand em { font-size:13px; }
  .battle-hud-brand > b,.battle-hud-brand small { font-size:7px; }
  .battle-hud-brand small { margin-top:3px; }
  #battle .fighter { grid-template-rows:minmax(0,1fr) 38px; gap:4px; }
  #battle .battle-actions { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:4px; }
  #battle .fighter select,#battle .fighter .vote,#battle .opponent-private { height:auto; min-height:34px; padding:4px 5px; border-width:1px; border-radius:8px; font-size:8px; }
  #battle .opponent-private { grid-row:2; }
  #battle .versus { width:60px; min-height:60px; margin-inline:1px; padding:5px; border-radius:13px; font-size:23px; }
  #battle .versus small { max-height:33px; font-size:6px; }
  #battle .fighter-countdown { top:37%; width:90px; height:90px; }
  #battle.battle-preview .battle-arena-3d { height:48svh; min-height:390px; }
  #battle.battle-preview .versus { width:76px; min-height:76px; }
  #battle.battle-preview .versus small { font-size:7px; }
}

@media (orientation:landscape) and (max-width:1180px) and (max-height:700px) {
  #battle .battle-arena-3d { grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr); min-height:0; height:100%; padding:50px 8px 5px; border-radius:12px; }
  .battle-hud { top:4px; left:6px; right:6px; grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr); gap:6px; }
  .battle-hud-player { height:38px; grid-template-columns:25px minmax(0,1fr) auto; gap:5px; padding:3px 8px 3px 4px; border-width:1px; }
  .battle-hud-right { grid-template-columns:auto minmax(0,1fr) 25px; padding:3px 4px 3px 8px; }
  .battle-hud-player > i { width:24px; height:24px; font-size:9px; }
  .battle-hud-player div b { font-size:9px; }
  .battle-hud-player div span { height:4px; }
  .battle-hud-player > strong { font-size:15px; }
  .battle-hud-brand { min-height:45px; padding:3px 8px 7px; }
  .battle-hud-brand em { font-size:14px; }
  .battle-hud-brand > b,.battle-hud-brand small { font-size:6px; }
  .battle-hud-brand small { margin-top:2px; }
  #battle .fighter { grid-template-rows:minmax(0,1fr) 29px; gap:2px; }
  #battle .battle-actions { grid-template-columns:minmax(0,1.1fr) minmax(110px,.9fr); gap:3px; }
  #battle .fighter select,#battle .fighter .vote,#battle .opponent-private { min-height:0; height:100%; padding:2px 5px; border-width:1px; border-radius:6px; font-size:7px; }
  #battle .versus { width:112px; min-height:112px; margin-inline:auto; padding:9px; border-radius:16px; font-size:40px; }
  #battle .versus small { width:82%; max-height:54px; font-size:9px; line-height:1.06; }
  #battle .fighter-countdown { width:92px; height:92px; }
}