/* ========================================================
   VS CASUAL — BATTLE ARENA
   This layer intentionally supersedes the legacy Vs panel
   rules in game.css while the mode remains in active design.
   ======================================================== */

#live-vs-panel {
  --pixel-font: 'Pixel Operator', ui-monospace, monospace;
  --pixel-display-font: 'Upheaval', 'Pixel Operator', ui-monospace, monospace;
  --vs-cyan: #25dcff;
  --vs-pink: #ff4878;
  --vs-gold: #ffe45b;
  --vs-green: #66ffb3;
  --vs-ink: #03050b;
  padding: max(env(safe-area-inset-top), 12px) 14px max(env(safe-area-inset-bottom), 16px);
  background:
    linear-gradient(rgba(37,220,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,72,120,.035) 1px, transparent 1px),
    radial-gradient(circle at 12% 28%, rgba(37,220,255,.18), transparent 34%),
    radial-gradient(circle at 88% 28%, rgba(255,72,120,.18), transparent 34%),
    #010208;
  background-size: 12px 12px, 12px 12px, auto, auto, auto;
}

#live-vs-panel [hidden] { display: none !important; }
#live-vs-panel :is(button,a,input,select,[role="button"],[tabindex]) { -webkit-tap-highlight-color: transparent; }
#live-vs-panel :is(button,a,input,select,[role="button"],[tabindex]):focus { outline: 0 !important; outline-offset: 0 !important; }

#live-vs-panel .live-vs-card {
  width: min(100%, 1080px);
  min-height: min(900px, calc(100dvh - 28px));
  margin: auto;
  padding: 0 24px 22px;
  border: 2px solid var(--vs-pink);
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.018) 3px 4px),
    linear-gradient(112deg, rgba(37,220,255,.045), transparent 38%, rgba(255,72,120,.045)),
    #04050a;
  box-shadow: 0 0 0 4px #000, 0 0 0 5px rgba(37,220,255,.48), 0 0 52px rgba(255,72,120,.24), 0 28px 80px #000;
}

@media (min-width: 721px) {
  #live-vs-panel .live-vs-card:has(#live-vs-setup:not([hidden])) {
    min-height: auto;
  }
}

#live-vs-panel .live-vs-marquee {
  margin: 0 -24px 14px;
  padding: 13px 24px 12px;
}

#live-vs-panel .live-vs-card h2 {
  margin: 6px 0 4px;
  font-size: clamp(1.55rem, 4vw, 2.25rem);
}

#live-vs-panel .live-vs-tagline {
  margin: 0;
  font-size: .72rem;
}

/* Room setup — one compact battle cartridge, not a form stack. */
#live-vs-setup {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, .82fr);
  grid-template-areas:
    "art settings-open"
    "art create"
    "art divider"
    "art join";
  align-items: center;
  gap: 11px 22px;
  width: min(100%, 820px);
  max-width: none;
  margin: 12px auto 6px;
}
.live-vs-challenge-target { margin: 0 0 14px; padding: 12px; border: 2px solid #ffcf40; background: linear-gradient(90deg,#251900,#090600); text-align: center; box-shadow: 0 0 16px rgba(255,207,64,.2); }
.live-vs-challenge-target span,.live-vs-challenge-target strong,.live-vs-challenge-target small { display:block; font-family:var(--pixel-font); text-transform:uppercase; }
.live-vs-challenge-target span,.live-vs-challenge-target small { color:#b8a36a; font-size:.48rem; line-height:1.5; }
.live-vs-challenge-target strong { margin:7px 0; color:#fff; font-size:.85rem; text-shadow:2px 2px #75233f; }

#live-vs-panel .live-vs-setup-art {
  grid-area: art;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 4px;
  margin: 0;
  min-height: 326px;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(circle, rgba(37,220,255,.09), transparent 58%);
  overflow: hidden;
}

#live-vs-panel .live-vs-setup-art img {
  width: min(118%, 430px);
  margin: -54px 0 -70px;
  image-rendering: pixelated;
  filter: saturate(1.08) contrast(1.05);
}

#live-vs-panel .live-vs-setup-art > span {
  position: relative;
  z-index: 1;
  padding: 5px 10px;
  color: #fff;
  background: #05070d;
  border: 1px solid rgba(255,255,255,.13);
  font-size: .66rem;
  letter-spacing: .18em;
}

#live-vs-panel .live-vs-room-settings {
  position: fixed;
  z-index: 110;
  top: 50%;
  left: 50%;
  grid-area: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(160px, .7fr);
  gap: 14px 18px;
  width: min(92vw, 650px);
  max-height: min(82dvh, 680px);
  margin: 0;
  padding: 20px;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  border: 2px solid var(--vs-cyan);
  background: linear-gradient(135deg, rgba(37,220,255,.1), rgba(255,72,120,.07)), #03060d;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.82), 0 0 34px rgba(37,220,255,.28);
}

#live-vs-panel .live-vs-settings-heading {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
}

#live-vs-panel .live-vs-settings-heading > span { display: grid; gap: 4px; }
#live-vs-panel #live-vs-settings-close { min-width: 88px; }

#live-vs-panel .live-vs-settings-open {
  grid-area: settings-open;
  display: grid;
  grid-template-columns: 58px minmax(108px, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 76px;
  padding: 7px 10px 7px 6px;
  border-color: rgba(255,228,91,.62);
  background: linear-gradient(90deg, rgba(255,228,91,.11), rgba(37,220,255,.06));
  text-align: left;
}

#live-vs-panel .live-vs-settings-copy {
  grid-column: 2;
  display: grid;
  align-self: center;
  min-width: 0;
}
#live-vs-panel .live-vs-settings-open b {
  color: #fff;
  font-size: .72rem;
  line-height: 1.2;
  white-space: nowrap;
}
#live-vs-panel .live-vs-settings-summary {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
#live-vs-panel .live-vs-settings-chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.42);
}
#live-vs-panel .live-vs-settings-chip .live-vs-rule-icon {
  width: 33px;
  height: 33px;
}
#live-vs-panel .live-vs-settings-chip small {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 19px;
  padding: 3px 4px;
  color: #051015;
  background: var(--vs-gold);
  font-size: .43rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
#live-vs-panel .live-vs-settings-chip.off {
  opacity: .42;
  filter: grayscale(1);
}
#live-vs-panel .live-vs-settings-chip.off small {
  color: #fff;
  background: #42494d;
}
#live-vs-panel .live-vs-settings-icon {
  grid-column: 1;
  align-self: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255,228,91,.42);
  background: #05070d;
  object-fit: cover;
  image-rendering: pixelated;
}

#live-vs-panel .live-vs-settings-heading strong,
#live-vs-panel .live-vs-label { font-size: .66rem; }

#live-vs-panel .live-vs-room-settings fieldset {
  margin: 0;
}

#live-vs-panel .live-vs-room-settings legend {
  margin-bottom: 8px;
  font-size: .62rem;
  color: #b3c8d3;
}

#live-vs-panel .live-vs-format-fieldset { grid-column: 1; }
#live-vs-panel .live-vs-speed-fieldset { grid-column: 2; }

#live-vs-panel .live-vs-setting-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

#live-vs-panel .live-vs-setting-options.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#live-vs-panel .live-vs-setting-options button {
  min-height: 42px;
  padding: 8px 7px;
  font-size: .64rem;
}

#live-vs-panel .live-vs-switch-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

#live-vs-panel .live-vs-rule-card {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 7px 10px 7px 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.32);
  cursor: pointer;
}

#live-vs-panel .live-vs-rule-card:has(input:checked) {
  border-color: rgba(37,220,255,.65);
  background: linear-gradient(90deg, rgba(37,220,255,.13), rgba(0,0,0,.25));
  box-shadow: inset 0 -2px rgba(37,220,255,.5);
}

.live-vs-rule-icon {
  width: 62px;
  height: 62px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}

.live-vs-rule-icon.trophy { background-image: url('../../assets/vs/vs-rule-trophy.webp'); }
.live-vs-rule-icon.speed { background-image: url('../../assets/vs/vs-rule-speed.webp'); }
.live-vs-rule-icon.keyboard { background-image: url('../../assets/vs/vs-rule-keyboard.webp'); }
.live-vs-rule-icon.ghost { background-image: url('../../assets/vs/vs-rule-ghost.webp'); }

#live-vs-panel .live-vs-rule-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#live-vs-panel .live-vs-rule-copy b {
  color: #f3fbff;
  font-size: .72rem;
  letter-spacing: .06em;
}

#live-vs-panel .live-vs-rule-copy small {
  color: #7f98a6;
  font-size: .58rem;
  letter-spacing: .1em;
}

#live-vs-panel .live-vs-rule-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#live-vs-panel .live-vs-rule-state {
  min-width: 36px;
  padding: 5px 4px;
  color: #001015;
  background: var(--vs-cyan);
  font-size: .62rem;
  text-align: center;
}

#live-vs-panel .live-vs-rule-card:not(:has(input:checked)) {
  opacity: .6;
  filter: grayscale(.65);
}

#live-vs-panel .live-vs-rule-card:not(:has(input:checked)) .live-vs-rule-state {
  font-size: 0;
  color: #d9e2e6;
  background: #30383d;
}

#live-vs-panel .live-vs-rule-card:not(:has(input:checked)) .live-vs-rule-state::after {
  content: 'OFF';
  font-size: .62rem;
}

#live-vs-create {
  grid-area: create;
  display: grid;
  gap: 5px;
  min-height: 64px;
  font-size: .8rem !important;
}

#live-vs-create small {
  font-size: .52rem;
  letter-spacing: .14em;
  opacity: .72;
}

#live-vs-setup .live-vs-divider {
  grid-area: divider;
  margin: 0;
  font-size: .54rem;
}

#live-vs-panel .live-vs-code-entry {
  grid-area: join;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

#live-vs-panel .live-vs-code-entry label {
  margin: 0;
  font-size: .58rem;
  white-space: nowrap;
}

#live-vs-code { min-width: 0; height: 42px; font-size: 1rem; }
#live-vs-join { min-width: 66px; height: 42px; }

/* Lobby — the arena artwork is the interface, not decoration behind another card layer. */
#live-vs-lobby {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#live-vs-panel .live-vs-room-bar {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(37,220,255,.55);
  background: linear-gradient(90deg, rgba(37,220,255,.16), #030711 48%, rgba(255,72,120,.12));
  box-shadow: inset 0 0 18px rgba(37,220,255,.06), 0 6px 18px rgba(0,0,0,.42);
}

#live-vs-panel #live-vs-room-code {
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-shadow: 0 0 10px var(--vs-cyan);
}

#live-vs-panel #live-vs-share {
  min-height: 40px;
  padding: 8px 14px;
  border: 2px solid var(--vs-pink);
  color: #fff;
  background: #5d1232;
  box-shadow: 0 0 14px rgba(255,72,120,.32), inset 0 -3px rgba(0,0,0,.3);
  font-size: .64rem;
}

#live-vs-panel .live-vs-room-actions { display: flex; gap: 7px; }
#live-vs-panel #live-vs-leave {
  min-height: 32px;
  padding: 6px 8px;
  border-color: transparent;
  color: #8d9aa1;
  background: transparent;
  font-size: .52rem;
  box-shadow: none;
}

#live-vs-panel #live-vs-leave:hover {
  border-color: rgba(255,255,255,.22);
  color: #fff;
  background: rgba(255,255,255,.04);
}

#live-vs-panel .live-vs-lobby-arena {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(1,3,9,.03), rgba(1,3,9,.12)),
    url('../../assets/vs/vs-lobby-arena.webp') center / 100% 100% no-repeat;
  box-shadow: inset 0 0 34px rgba(0,0,0,.42), 0 8px 22px rgba(0,0,0,.46);
}

#live-vs-panel .live-vs-lobby-arena::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(37,220,255,.04), transparent 44%, transparent 56%, rgba(255,72,120,.04));
}

#live-vs-panel .live-vs-session-strip,
#live-vs-panel .live-vs-fighters,
#live-vs-panel .live-vs-bolt {
  position: relative;
  z-index: 1;
}

#live-vs-panel .live-vs-session-strip {
  position: absolute;
  z-index: 3;
  top: 3.2%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 20%;
  width: 45%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

#live-vs-panel .live-vs-session-strip span {
  align-self: center;
  padding: 3px 6px;
  background: rgba(0,0,0,.66);
  font-size: clamp(.42rem, 1vw, .62rem);
}

#live-vs-panel .live-vs-arena-score {
  position: absolute;
  z-index: 2;
  top: 53%;
  left: 31%;
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 0;
  width: 38%;
  transform: translateY(-50%);
  pointer-events: none;
}

#live-vs-panel .live-vs-arena-score strong {
  grid-row: 2;
  color: var(--vs-cyan);
  font-size: clamp(2.25rem, 6.4vw, 4.3rem);
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 7px #000, 0 0 18px currentColor;
}

#live-vs-panel #live-vs-player-one-score { grid-column: 1; }
#live-vs-panel #live-vs-player-two-score { grid-column: 3; color: var(--vs-pink); }
#live-vs-panel .live-vs-score-meta {
  position: relative;
  display: grid;
  grid-row: 1;
  gap: 1px;
  justify-items: center;
  font-size: clamp(.34rem, .72vw, .52rem);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
#live-vs-panel .live-vs-score-meta b,
#live-vs-panel .live-vs-score-meta small { font: inherit; white-space: nowrap; }
#live-vs-panel .live-vs-score-meta small { opacity: .78; }
#live-vs-panel .live-vs-score-meta.player-one { grid-column: 1; color: var(--vs-cyan); }
#live-vs-panel .live-vs-score-meta.player-two { grid-column: 3; color: var(--vs-pink); }
#live-vs-panel .live-vs-arena-score i {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 2px;
  height: 118%;
  background: linear-gradient(var(--vs-cyan), #fff 48%, var(--vs-pink));
  box-shadow: 0 0 8px #fff;
}

#live-vs-panel .live-vs-fighters {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  margin: 0;
}

#live-vs-panel .live-vs-fighter {
  position: absolute;
  top: 14.5%;
  left: 2.1%;
  display: grid;
  grid-template-rows: 1fr;
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: clamp(2px, .55vw, 7px);
  width: 22.7%;
  height: 43.5%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: radial-gradient(circle at 50% 45%, rgba(37,220,255,.12), rgba(1,5,11,.26) 72%);
  box-shadow: none;
  clip-path: polygon(4% 2%, 92% 4%, 98% 18%, 98% 92%, 13% 98%, 2% 84%);
}

#live-vs-panel .live-vs-fighter:last-child {
  right: 2.1%;
  left: auto;
  padding: 0;
  border: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,72,120,.12), rgba(1,5,11,.26) 72%);
  clip-path: polygon(8% 4%, 96% 2%, 99% 84%, 87% 98%, 2% 92%, 2% 18%);
}

#live-vs-panel .live-vs-fighter strong {
  display: grid;
  place-items: center;
  width: 92%;
  max-width: 92%;
  color: #fff;
  font-family: var(--pixel-font);
  font-size: clamp(.78rem, 2.25vw, 1.35rem);
  font-weight: 800;
  text-align: center;
  line-height: 1.32;
  letter-spacing: .025em;
  text-shadow: 0 0 12px currentColor;
  text-wrap: balance;
  white-space: normal;
}

#live-vs-panel .live-vs-fighter-name {
  display: grid;
  place-items: center;
  width: 94%;
  min-width: 0;
}

#live-vs-panel .live-vs-fighter-name strong {
  width: auto;
  min-width: 0;
}

#live-vs-panel .live-vs-fighter-control {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .35vw, 5px);
  min-height: 0;
  margin: 0;
  padding: clamp(3px, .5vw, 6px);
  border: 1px solid currentColor;
  color: var(--vs-cyan);
  background: rgba(0,8,16,.78);
  box-shadow: 0 0 10px rgba(37,220,255,.22);
  font-size: clamp(.3rem, .7vw, .48rem);
  line-height: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

#live-vs-panel .live-vs-score-meta.player-two .live-vs-fighter-control {
  color: var(--vs-pink);
  box-shadow: 0 0 10px rgba(255,72,120,.22);
}

#live-vs-panel .live-vs-fighter-control svg { width: 13px; height: 13px; }
#live-vs-panel .live-vs-fighter-control:disabled { opacity: .42; cursor: default; }

#live-vs-panel .live-vs-control-picker {
  position: fixed;
  z-index: 113;
  top: 50%;
  left: 50%;
  width: min(92vw, 520px);
  padding: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--vs-cyan);
  background: radial-gradient(circle at 50% 0, rgba(37,220,255,.14), transparent 58%), #02060c;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.86), 0 0 30px rgba(37,220,255,.3);
}

#live-vs-panel .live-vs-control-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#live-vs-panel .live-vs-control-heading > span { display: grid; gap: 4px; }
#live-vs-panel .live-vs-control-heading strong { font-size: .82rem; }
#live-vs-panel #live-vs-control-close { min-width: 80px; }
#live-vs-panel .live-vs-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

#live-vs-panel .live-vs-control-option {
  display: grid;
  min-height: 88px;
  place-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.18);
  color: #cce5ed;
  background: rgba(2,9,15,.86);
}

#live-vs-panel .live-vs-control-option svg { width: 34px; height: 34px; }
#live-vs-panel .live-vs-control-option strong { font-size: .58rem; }
#live-vs-panel .live-vs-control-option.selected {
  border-color: var(--vs-gold);
  color: var(--vs-gold);
  box-shadow: inset 0 -3px var(--vs-gold), 0 0 15px rgba(255,228,91,.18);
}
#live-vs-panel .live-vs-control-picker > p {
  margin: 12px 0 0;
  color: #7893a0;
  font-size: .54rem;
  text-align: center;
}

#live-vs-panel .live-vs-fighter:first-child strong {
  color: #f4fdff;
  text-shadow: 0 0 4px #00151d, 0 0 13px var(--vs-cyan);
}

#live-vs-panel .live-vs-fighter:last-child strong {
  color: #fff5fa;
  text-shadow: 0 0 4px #1a000b, 0 0 13px var(--vs-pink);
}

#live-vs-panel .live-vs-fighter.long-name strong {
  font-size: clamp(.68rem, 1.85vw, 1.08rem);
}

#live-vs-panel .live-vs-fighter.very-long-name strong {
  font-size: clamp(.6rem, 1.55vw, .94rem);
}

#live-vs-panel .live-vs-bolt {
  display: none;
}

#live-vs-panel .live-vs-bolt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  filter: saturate(1.15) contrast(1.08);
}

#live-vs-panel .live-vs-lobby-status {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}

#live-vs-panel #live-vs-room-status {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 7px 10px;
  color: #fff;
  background: #050914;
  border: 1px solid rgba(37,220,255,.24);
  font-size: .68rem;
  text-align: left;
}

#live-vs-panel .live-vs-rule-strip {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 13px;
  margin: 0;
  padding: 2px 0 3px;
}

#live-vs-panel .live-vs-rule-badge {
  position: relative;
  display: grid;
  width: 40px;
  height: 35px;
  place-items: center;
  background: radial-gradient(circle, rgba(37,220,255,.09), transparent 68%);
  color: #dffaff;
}

#live-vs-panel .live-vs-rule-strip .live-vs-rule-icon {
  width: 34px;
  height: 34px;
}

#live-vs-panel .live-vs-rule-badge b {
  position: absolute;
  right: -5px;
  bottom: -2px;
  min-width: 19px;
  padding: 3px 4px;
  color: #071014;
  background: var(--vs-gold);
  font-size: .43rem;
  line-height: 1;
  text-align: center;
}

#live-vs-panel .live-vs-rule-badge.off {
  opacity: .4;
  filter: grayscale(1);
}

#live-vs-panel .live-vs-rule-badge.off b {
  color: #fff;
  background: #42494d;
}

#live-vs-panel .live-vs-stage-select,
#live-vs-panel .live-vs-stage-reveal {
  margin: 8px 0 0;
  padding: 0;
  border: 1px solid rgba(37,220,255,.38);
  background: radial-gradient(circle at 50% 0, rgba(37,220,255,.1), transparent 55%), #02060c;
}

#live-vs-panel .live-vs-stage-open {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 6px 14px 6px 7px;
  text-align: left;
}

#live-vs-panel .live-vs-stage-open > span:nth-child(2) { display: grid; gap: 5px; }
#live-vs-panel .live-vs-stage-open small { color: #7d9fad; font-size: .48rem; }
#live-vs-panel .live-vs-stage-open strong { color: #fff; font-size: .72rem; }
#live-vs-panel .live-vs-stage-open em { color: var(--vs-cyan); font-size: .56rem; font-style: normal; }
#live-vs-panel .live-vs-current-stage-art {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid var(--stage-color, rgba(37,220,255,.4));
  background: rgba(0,0,0,.48);
}
#live-vs-panel .live-vs-current-stage-art .live-vs-stage-art { width: 54px; height: 54px; }

#live-vs-panel .live-vs-stage-picker {
  position: fixed;
  z-index: 111;
  top: 50%;
  left: 50%;
  width: min(94vw, 820px);
  max-height: min(86dvh, 760px);
  padding: 16px;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  border: 2px solid var(--vs-cyan);
  background: radial-gradient(circle at 50% 0, rgba(37,220,255,.13), transparent 55%), #02060c;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.84), 0 0 34px rgba(37,220,255,.28);
}

#live-vs-panel .live-vs-stage-picker .live-vs-stage-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#live-vs-panel .live-vs-stage-picker .live-vs-stage-heading > span { display: grid; gap: 4px; }
#live-vs-panel #live-vs-stage-close { min-width: 86px; }

#live-vs-panel .live-vs-stage-heading strong {
  font-size: .86rem;
}

#live-vs-panel .live-vs-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  padding: 6px 2px 12px;
  overflow: visible;
}

#live-vs-panel .live-vs-stage-option {
  min-width: 0;
  min-height: 94px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.45));
}

#live-vs-panel .live-vs-stage-option.selected {
  transform: translateY(-3px);
  border-color: var(--vs-gold);
  background: linear-gradient(180deg, rgba(255,228,91,.12), rgba(0,0,0,.45));
  box-shadow: 0 0 18px rgba(255,228,91,.2), inset 0 -3px var(--vs-gold);
}

#live-vs-panel .live-vs-stage-art {
  width: 62px;
  height: 62px;
}

#live-vs-panel .live-vs-stage-option-name {
  min-height: 2.6em;
  font-size: .57rem;
  line-height: 1.3;
}

#live-vs-panel #live-vs-stage-lock-status {
  min-height: 1.4em;
  margin-top: 5px;
  font-size: .62rem;
}

#live-vs-panel .live-vs-command-deck {
  position: static;
  z-index: 6;
  margin: 7px 0 0;
  padding: 0;
  background: none;
}

#live-vs-panel #live-vs-ready {
  width: min(100%, 560px);
  min-height: 56px;
  margin: 0 auto;
  font-size: .82rem;
  box-shadow: 0 0 24px rgba(37,220,255,.22), inset 0 -4px rgba(0,0,0,.25);
}

#live-vs-panel #live-vs-ready.waiting:disabled {
  opacity: 1;
  border-color: rgba(37,220,255,.28);
  color: #82a5b4;
  background:
    repeating-linear-gradient(135deg, rgba(37,220,255,.035) 0 6px, transparent 6px 12px),
    #071019;
  box-shadow: inset 0 0 18px rgba(37,220,255,.05);
}

#live-vs-panel .live-vs-history {
  margin-top: 12px;
}

#live-vs-panel #live-vs-history-list {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
}

#live-vs-panel .live-vs-history-card {
  flex: 0 0 150px;
  scroll-snap-align: start;
}

#live-vs-panel .live-vs-arena-spec {
  display: none;
}

#live-vs-panel .live-vs-ghost-note {
  display: none;
}

/* Player Identity Showcase — approved fight-card direction. */
#live-vs-panel .live-vs-fighter {
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  align-content: stretch;
  padding: clamp(5px, .8vw, 10px);
  border: 2px solid var(--vs-cyan);
  background: #020a11;
  box-shadow: inset 0 0 0 3px #073246, inset 0 0 0 5px #02060c, 0 0 15px rgba(37,220,255,.44);
  clip-path: polygon(8% 0, 84% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
}

#live-vs-panel .live-vs-fighter:last-child {
  border-color: var(--vs-pink);
  background: #0d0510;
  box-shadow: inset 0 0 0 3px #4b102d, inset 0 0 0 5px #02060c, 0 0 15px rgba(255,72,120,.44);
  clip-path: polygon(16% 0, 92% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
}

#live-vs-panel .live-vs-fighter[data-frame="high-score"] {
  border-color: #1feaff;
  box-shadow: inset 0 0 0 3px #90ff25, inset 0 0 0 6px #032534, 0 0 0 2px #00779b, 0 0 22px rgba(31,234,255,.7);
}

#live-vs-panel .live-vs-identity-crest {
  z-index: 2;
  display: grid;
  width: clamp(26px, 4vw, 48px);
  aspect-ratio: 1;
  place-items: center;
  margin: calc(clamp(5px, .8vw, 10px) * -1) auto 1px;
  background: #02060c;
}

#live-vs-panel .live-vs-identity-crest img,
#live-vs-panel .live-vs-player-title img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

#live-vs-panel .live-vs-fighter:not([data-frame="high-score"]) .live-vs-identity-crest { opacity: .46; }

#live-vs-panel .live-vs-portrait {
  position: relative;
  display: grid;
  width: min(88%, 150px);
  min-height: 0;
  place-self: stretch center;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(37,220,255,.68);
  background: #03141d;
  box-shadow: inset 0 0 0 3px #010609;
}

#live-vs-panel .live-vs-fighter:last-child .live-vs-portrait {
  border-color: rgba(255,72,120,.72);
  background: #190817;
}

#live-vs-panel .live-vs-portrait img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  image-rendering: pixelated;
}

#live-vs-panel .live-vs-fighter-name {
  min-height: 1.6em;
  margin-top: 2px;
}

#live-vs-panel .live-vs-player-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 94%;
  min-height: clamp(15px, 2.4vw, 25px);
  padding: 2px 4px;
  border: 1px solid #f8c92f;
  color: #ffe35a;
  background: #151002;
  font-family: var(--pixel-font);
  font-size: clamp(.42rem, 1vw, .7rem);
  line-height: 1;
  white-space: nowrap;
}

#live-vs-panel .live-vs-player-title[hidden] { display: none; }
#live-vs-panel .live-vs-player-title img { width: 15px; height: 15px; }
#live-vs-panel .live-vs-arcade-id {
  display: grid;
  justify-items: center;
  color: #d9f8ff;
  font-family: var(--pixel-font);
  font-size: clamp(.34rem, .7vw, .55rem);
  line-height: 1.15;
  letter-spacing: .07em;
}
#live-vs-panel .live-vs-arcade-id i { color: var(--vs-cyan); font-size: .72em; font-style: normal; }
#live-vs-panel .live-vs-fighter:last-child .live-vs-arcade-id i { color: var(--vs-pink); }

#live-vs-panel .live-vs-battle-cartridge {
  position: relative;
  padding: 12px 8px 6px;
  border: 2px solid #30454f;
  background: #02070b;
  box-shadow: inset 0 0 0 2px #07171d, 4px 4px 0 #000;
}
#live-vs-panel .live-vs-battle-cartridge > strong {
  position: absolute;
  top: -8px;
  left: 50%;
  padding: 2px 12px;
  border: 1px solid #37604e;
  color: #78ff41;
  background: #02070b;
  font-family: var(--pixel-font);
  font-size: .54rem;
  letter-spacing: .06em;
  transform: translateX(-50%);
  white-space: nowrap;
}

#live-vs-panel #live-vs-ready.primary {
  border: 2px solid #8cff2f;
  color: #071006;
  background: #66ef38;
  box-shadow: inset 0 -5px #249328, inset 0 0 0 2px #c5ff78, 0 0 18px rgba(102,239,56,.38);
  font-size: clamp(.76rem, 2vw, 1.15rem);
  text-transform: uppercase;
}
#live-vs-panel #live-vs-ready.primary:disabled {
  border-color: #42604a;
  color: #91a796;
  background: #112019;
  box-shadow: inset 0 -4px #07110b;
}

@media (max-width: 600px) {
  #live-vs-panel .live-vs-lobby-arena { aspect-ratio: .92; background-size: cover; }
  #live-vs-panel .live-vs-session-strip { top: 2%; }
  #live-vs-panel .live-vs-fighter { top: 13%; left: 2.4%; width: 39%; height: 61%; padding: 5px; }
  #live-vs-panel .live-vs-fighter:last-child { right: 2.4%; left: auto; }
  #live-vs-panel .live-vs-arena-score { top: 48%; left: 40.5%; width: 19%; }
  #live-vs-panel .live-vs-arena-score strong { font-size: clamp(1.55rem, 8vw, 2.2rem); }
  #live-vs-panel .live-vs-score-meta { display: none; }
  #live-vs-panel .live-vs-arena-score i { height: 74%; }
  #live-vs-panel .live-vs-fighter strong { font-size: clamp(.64rem, 3.25vw, .88rem); }
  #live-vs-panel .live-vs-fighter.long-name strong { font-size: clamp(.54rem, 2.7vw, .76rem); }
  #live-vs-panel .live-vs-fighter.very-long-name strong { font-size: clamp(.48rem, 2.35vw, .66rem); }
  #live-vs-panel .live-vs-player-title { font-size: clamp(.38rem, 2.35vw, .58rem); }
  #live-vs-panel .live-vs-arcade-id { font-size: clamp(.32rem, 2vw, .49rem); }
}

@media (max-width: 600px) and (max-height: 700px) {
  #live-vs-panel .live-vs-lobby-arena { aspect-ratio: 1.02; }
}

@media (min-width: 601px) {
  #live-vs-panel .live-vs-lobby-arena { aspect-ratio: 2.2; background-size: cover; }
  #live-vs-panel .live-vs-fighter { top: 10%; left: 3%; width: 25%; height: 70%; }
  #live-vs-panel .live-vs-fighter:last-child { right: 3%; left: auto; }
}

#live-vs-panel #live-vs-message {
  min-height: 1.3em;
  margin: 9px 0 4px;
  font-size: .66rem;
}

#live-vs-panel #live-vs-message:empty { display: none; }

#live-vs-panel #live-vs-close {
  display: block;
  width: min(100%, 280px);
  min-height: 40px;
  margin: 6px auto 0;
  font-size: .62rem;
}

#live-vs-panel .live-vs-card:has(#live-vs-lobby:not([hidden])) > #live-vs-close { display: none; }

@media (max-width: 720px) {
  #live-vs-panel { padding: 0; }

  #live-vs-panel .live-vs-card {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0 12px max(env(safe-area-inset-bottom), 14px);
    border-width: 0 2px;
  }

  #live-vs-panel .live-vs-card:has(#live-vs-lobby:not([hidden])) {
    padding-bottom: max(env(safe-area-inset-bottom), 14px);
  }

  #live-vs-panel .live-vs-marquee {
    margin: 0 -12px 10px;
    padding: max(env(safe-area-inset-top), 12px) 12px 11px;
  }

  #live-vs-panel .live-vs-card:has(#live-vs-lobby:not([hidden])) .live-vs-marquee {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 7px;
    margin-bottom: 7px;
    padding-bottom: 7px;
  }

  #live-vs-panel .live-vs-card:has(#live-vs-lobby:not([hidden])) .live-vs-marquee .menu-kicker,
  #live-vs-panel .live-vs-card:has(#live-vs-lobby:not([hidden])) .live-vs-tagline {
    display: none;
  }

  #live-vs-panel .live-vs-card:has(#live-vs-lobby:not([hidden])) .live-vs-marquee h2 {
    margin: 0;
    font-size: 1rem;
    text-align: left;
  }

  #live-vs-panel .live-vs-card h2 { font-size: 1.55rem; }
  #live-vs-panel .live-vs-tagline { font-size: .64rem; }

  #live-vs-setup {
    grid-template-columns: 1fr;
    grid-template-areas: "art" "settings-open" "create" "divider" "join";
    gap: 10px;
    width: 100%;
    margin-top: 8px;
  }

  #live-vs-panel .live-vs-setup-art {
    min-height: 188px;
  }

  #live-vs-panel .live-vs-setup-art img {
    width: min(96%, 330px);
    margin: -55px 0 -68px;
  }

  #live-vs-panel .live-vs-setup-art > span {
    padding: 4px 8px;
    font-size: .58rem;
  }

  #live-vs-panel .live-vs-room-settings {
    grid-template-columns: 1fr;
    gap: 13px;
    width: min(94vw, 430px);
    max-height: 88dvh;
    padding: 13px;
  }

  #live-vs-panel .live-vs-settings-open {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    min-height: 72px;
  }

  #live-vs-panel .live-vs-settings-icon {
    width: 48px;
    height: 48px;
  }

  #live-vs-panel .live-vs-settings-summary { gap: 6px; }

  #live-vs-panel .live-vs-settings-chip {
    width: 38px;
    height: 34px;
  }

  #live-vs-panel .live-vs-settings-chip .live-vs-rule-icon {
    width: 32px;
    height: 32px;
  }

  #live-vs-panel .live-vs-format-fieldset,
  #live-vs-panel .live-vs-speed-fieldset { grid-column: 1; }

  #live-vs-panel .live-vs-switch-row {
    grid-column: 1;
    gap: 7px;
  }

  #live-vs-panel .live-vs-rule-card {
    grid-template-columns: 50px 1fr auto;
    min-height: 64px;
  }

  #live-vs-panel .live-vs-rule-icon {
    width: 50px;
    height: 50px;
  }

  #live-vs-panel .live-vs-code-entry {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #live-vs-panel .live-vs-code-entry label {
    grid-column: 1 / -1;
  }

  #live-vs-panel .live-vs-lobby-arena {
    min-height: 0;
    margin: 0 -5px;
    padding: 0;
  }

  #live-vs-panel .live-vs-room-bar {
    gap: 7px;
    padding: 6px 7px;
  }

  #live-vs-panel #live-vs-room-code {
    font-size: .86rem;
  }

  #live-vs-panel #live-vs-share {
    min-height: 36px;
    padding: 6px 9px;
    font-size: .54rem;
  }

  #live-vs-panel #live-vs-leave {
    min-height: 30px;
    padding: 5px 6px;
    font-size: .46rem;
  }

  #live-vs-panel .live-vs-session-strip {
    width: 46%;
  }

  #live-vs-panel .live-vs-session-strip span { font-size: .4rem; }

  #live-vs-panel .live-vs-arena-score strong {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  #live-vs-panel .live-vs-fighters {
    width: 100%;
  }

  #live-vs-panel .live-vs-fighter {
    min-height: 0;
    gap: 1px;
  }

  #live-vs-panel .live-vs-fighter strong { font-size: clamp(.78rem, 3.8vw, 1.08rem); }
  #live-vs-panel .live-vs-fighter.long-name strong { font-size: clamp(.64rem, 3.15vw, .9rem); }
  #live-vs-panel .live-vs-fighter.very-long-name strong { font-size: clamp(.57rem, 2.7vw, .78rem); }
  #live-vs-panel .live-vs-fighter-control {
    width: 28px;
    height: 28px;
    padding: 6px;
    font-size: .34rem;
  }
  #live-vs-panel .live-vs-fighter-control svg { width: 14px; height: 14px; }
  #live-vs-panel .live-vs-fighter-control > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  #live-vs-panel .live-vs-control-picker { width: 94vw; padding: 12px 9px; }
  #live-vs-panel .live-vs-control-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #live-vs-panel .live-vs-control-option { min-height: 76px; }

  #live-vs-panel .live-vs-score-meta {
    font-size: clamp(.34rem, 1.65vw, .44rem);
  }

  #live-vs-panel .live-vs-lobby-status {
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 6px;
  }

  #live-vs-panel #live-vs-room-status { font-size: .54rem; text-align: center; }

  #live-vs-panel .live-vs-rule-strip { gap: 12px; padding: 1px 0 3px; }
  #live-vs-panel .live-vs-rule-badge { width: 38px; height: 33px; }
  #live-vs-panel .live-vs-rule-strip .live-vs-rule-icon {
    width: 32px;
    height: 32px;
  }

  #live-vs-panel .live-vs-stage-select,
  #live-vs-panel .live-vs-stage-reveal {
    margin-top: 7px;
    padding: 0;
  }

  #live-vs-panel .live-vs-stage-open {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    min-height: 62px;
    gap: 8px;
    padding: 4px 9px 4px 5px;
  }

  #live-vs-panel .live-vs-current-stage-art {
    width: 50px;
    height: 50px;
  }

  #live-vs-panel .live-vs-current-stage-art .live-vs-stage-art {
    width: 44px;
    height: 44px;
  }

  #live-vs-panel .live-vs-stage-picker {
    width: 94vw;
    max-height: 88dvh;
    padding: 12px 9px;
  }

  #live-vs-panel .live-vs-stage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 6px 0 8px;
  }

  #live-vs-panel .live-vs-stage-option {
    min-height: 82px;
    padding: 5px 3px;
  }

  #live-vs-panel .live-vs-stage-art {
    width: 44px;
    height: 44px;
  }

  #live-vs-panel .live-vs-command-deck {
    position: static;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  #live-vs-panel #live-vs-ready {
    min-height: 52px;
    max-width: 440px;
  }
}

@media (min-width: 721px) and (max-height: 820px) {
  #live-vs-panel .live-vs-card { margin: 0; }
  #live-vs-panel .live-vs-lobby-arena { min-height: 0; }
  #live-vs-panel .live-vs-fighter { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #live-vs-panel .live-vs-stage-option.selected { transform: none; }
}

/* Approved VS identity composition — production correction.
   This is intentionally last: the concept is now the source of truth. */
#live-vs-panel .live-vs-card:has(#live-vs-lobby:not([hidden])) {
  width: min(100%, 1040px);
  min-height: 0;
  padding: 0 10px 16px;
  overflow: visible;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.016) 4px 5px),
    linear-gradient(110deg, rgba(37,220,255,.04), transparent 42%, rgba(255,72,120,.045)),
    #03040a;
}

#live-vs-panel .live-vs-card:has(#live-vs-lobby:not([hidden])) > .live-vs-marquee { display: none; }

#live-vs-panel .live-vs-room-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  margin: 0;
  padding: 8px 10px;
  border: 2px solid #1a3949;
  border-bottom-color: var(--vs-cyan);
  background:
    linear-gradient(90deg, rgba(37,220,255,.1), transparent 48%, rgba(255,72,120,.1)),
    #030711;
  box-shadow: inset 0 -4px #00151e, 0 5px 0 #000;
}

#live-vs-panel .live-vs-room-identity,
#live-vs-panel .live-vs-room-number,
#live-vs-panel .live-vs-room-actions,
#live-vs-panel #live-vs-share,
#live-vs-panel #live-vs-leave { display: flex; align-items: center; }

#live-vs-panel .live-vs-room-identity { gap: clamp(10px, 2.2vw, 28px); min-width: 0; }
#live-vs-panel .live-vs-room-mode {
  padding: 8px 13px 7px;
  border: 2px solid #095d61;
  color: #f7fbff;
  background: #021012;
  font-family: var(--pixel-display-font);
  font-size: clamp(.82rem, 1.65vw, 1.22rem);
  line-height: 1;
  letter-spacing: .045em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 2px #000, 0 0 10px rgba(37,220,255,.18);
}
#live-vs-panel .live-vs-room-mode b { color: #61ff2f; font: inherit; text-shadow: 2px 2px #00451b; }
#live-vs-panel .live-vs-room-number { gap: 7px; color: #fff; white-space: nowrap; }
#live-vs-panel .live-vs-room-number small { color: #64ff42; font-size: .56rem; }
#live-vs-panel #live-vs-room-code { color: #f7fbff; font-family: var(--pixel-font); font-size: clamp(.72rem, 1.4vw, 1rem); letter-spacing: .08em; text-shadow: none; }

#live-vs-panel .live-vs-room-actions { gap: 8px; }
#live-vs-panel #live-vs-share,
#live-vs-panel #live-vs-leave {
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 12px;
  border: 2px solid;
  color: #f7fbff;
  background: #07100a;
  font-family: var(--pixel-font);
  font-size: .66rem;
  box-shadow: inset 0 -4px #000, 0 0 10px color-mix(in srgb, currentColor, transparent 65%);
}
#live-vs-panel #live-vs-share { border-color: #70ff3b; color: #9bff67; }
#live-vs-panel #live-vs-leave { border-color: #ff3d91; color: #ff72b2; }
#live-vs-panel #live-vs-share img,
#live-vs-panel #live-vs-leave img { width: 22px; height: 22px; }

#live-vs-panel .live-vs-lobby-arena {
  margin: 8px 0 0;
  aspect-ratio: 2 / 1;
  overflow: visible;
  border: 2px solid #111d2a;
  background-size: cover;
  box-shadow: inset 0 0 42px #000, 0 8px 0 #000;
}

#live-vs-panel .live-vs-session-strip { display: none; }

#live-vs-panel .live-vs-fighter,
#live-vs-panel .live-vs-fighter:last-child,
#live-vs-panel .live-vs-fighter[data-frame="high-score"] {
  top: 7%;
  left: 2.5%;
  display: block;
  width: 29%;
  height: auto;
  aspect-ratio: 2 / 3;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  filter: none;
}
#live-vs-panel .live-vs-fighter:last-child { right: 2.5%; left: auto; }
#live-vs-panel .live-vs-fighter > .player-identity-plate { position: absolute; inset: 0; }
#live-vs-panel .live-vs-fighter .identity-plate-frame-name {
  color: var(--plate-accent);
  font-family: var(--pixel-display-font);
  font-size: clamp(.72rem, 1.55vw, 1.15rem);
  line-height: .82;
  text-shadow: 2px 2px #00151d;
}
#live-vs-panel .live-vs-fighter .identity-plate-name {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  color: #f7fbff;
  font-family: var(--pixel-display-font);
  font-size: clamp(1rem, 2.25vw, 1.8rem);
  line-height: .84;
  text-shadow: 3px 3px #000, 0 0 10px var(--plate-accent);
  text-wrap: nowrap;
  white-space: nowrap;
}
#live-vs-panel .live-vs-bolt {
  position: absolute;
  z-index: 2;
  top: 12%;
  left: 50%;
  display: block;
  width: 38%;
  height: 42%;
  transform: translateX(-50%);
  background: none;
  clip-path: none;
  filter: none;
  pointer-events: none;
}
#live-vs-panel .live-vs-bolt img { object-fit: contain; }

#live-vs-panel .live-vs-arena-score {
  z-index: 5;
  top: 54%;
  left: 36%;
  display: grid;
  grid-template-columns: 1fr 12px 1fr;
  grid-template-rows: auto auto auto;
  gap: 4px 2px;
  width: 28%;
  transform: translateY(-50%);
}
#live-vs-panel .live-vs-series-label {
  grid-column: 1 / -1;
  grid-row: 1;
  color: #5cff3c;
  font-family: var(--pixel-font);
  font-size: clamp(.48rem, 1vw, .72rem);
  letter-spacing: .08em;
  text-align: center;
}
#live-vs-panel .live-vs-arena-score strong {
  grid-row: 2;
  font-family: var(--pixel-display-font);
  font-size: clamp(2.25rem, 5.7vw, 4.7rem);
  line-height: .8;
  text-shadow: 4px 4px #00212b;
}
#live-vs-panel .live-vs-arena-score i { grid-row: 2; height: 4px; align-self: center; background: #f7fbff; box-shadow: 0 0 6px #fff; }
#live-vs-panel .live-vs-series-format {
  grid-column: 1 / -1;
  grid-row: 3;
  color: #fff;
  font-family: var(--pixel-font);
  font-size: clamp(.46rem, .9vw, .68rem);
  letter-spacing: .06em;
  text-align: center;
}
#live-vs-panel .live-vs-score-meta { display: none; }

#live-vs-panel .live-vs-lobby-status { margin: 10px auto 0; width: min(100%, 640px); }
#live-vs-panel #live-vs-room-status { display: none; }
#live-vs-panel .live-vs-battle-cartridge {
  min-height: 108px;
  padding: 24px 16px 12px;
  border: 4px solid #1b2b33;
  background: linear-gradient(180deg, #07100f, #010507);
  box-shadow: inset 0 0 0 3px #000, inset 0 -8px #050708, 6px 7px 0 #000;
  clip-path: polygon(4% 0, 96% 0, 100% 18%, 100% 82%, 96% 100%, 4% 100%, 0 82%, 0 18%);
}
#live-vs-panel .live-vs-battle-cartridge > strong {
  top: -2px;
  z-index: 4;
  padding: 4px 22px;
  border: 2px solid #183d2b;
  color: #6bff3c;
  font-size: clamp(.62rem, 1.3vw, .9rem);
}
#live-vs-panel .live-vs-rule-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
}
#live-vs-panel .live-vs-rule-badge,
#live-vs-panel button.live-vs-rule-badge {
  display: grid;
  grid-template-rows: auto 34px auto;
  width: auto;
  height: auto;
  min-height: 66px;
  place-items: center;
  gap: 2px;
  padding: 3px 8px;
  border: 0;
  border-right: 1px solid #12422e;
  border-radius: 0;
  color: #eafff0;
  background: transparent;
  box-shadow: none;
}
#live-vs-panel .live-vs-rule-badge:last-child { border-right: 0; }
#live-vs-panel .live-vs-rule-badge small { color: #5dff40; font-size: clamp(.42rem, .8vw, .58rem); white-space: nowrap; }
#live-vs-panel .live-vs-rule-badge b {
  position: static;
  min-width: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  font-size: clamp(.44rem, .85vw, .62rem);
  line-height: 1;
  white-space: nowrap;
}
#live-vs-panel .live-vs-rule-strip .live-vs-rule-icon { width: 34px; height: 34px; }
#live-vs-panel .live-vs-cartridge-stage {
  display: block;
  width: 38px;
  height: 30px;
  border: 3px solid #dbe5ed;
  border-radius: 50%;
  box-shadow: inset 0 -5px #304856, 0 0 6px var(--vs-cyan);
}
#live-vs-panel .live-vs-cartridge-stage::before { content: ''; display: block; width: 3px; height: 10px; margin: -8px auto 0; background: var(--vs-cyan); box-shadow: -10px 4px var(--vs-cyan), 10px 4px var(--vs-cyan); }

#live-vs-panel .live-vs-stage-select { display: contents; }
#live-vs-panel .live-vs-stage-open { display: none; }

#live-vs-panel .live-vs-command-deck { margin: 12px auto 0; width: min(100%, 780px); }
#live-vs-panel #live-vs-ready.primary,
#live-vs-panel #live-vs-ready.primary:disabled {
  display: grid;
  grid-template-columns: 62px auto;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: none;
  min-height: 84px;
  margin: 0;
  padding: 8px 22px;
  border: 4px solid #25dcff;
  color: #63ff38;
  background: linear-gradient(#062913, #020b06);
  box-shadow: inset 0 0 0 3px #75ff3c, inset 0 -8px #001d0d, 0 0 0 4px #000, 0 0 20px rgba(101,255,53,.26);
  clip-path: polygon(4% 0, 96% 0, 100% 20%, 100% 80%, 96% 100%, 4% 100%, 0 80%, 0 20%);
  opacity: 1;
}
#live-vs-panel #live-vs-ready img { width: 58px; height: 58px; image-rendering: pixelated; }
#live-vs-panel #live-vs-ready span { display: grid; gap: 2px; text-align: center; }
#live-vs-panel #live-vs-ready b { font-family: var(--pixel-display-font); font-size: clamp(1.5rem, 4vw, 2.6rem); line-height: .8; letter-spacing: .05em; }
#live-vs-panel #live-vs-ready small { color: #65ff35; font-size: clamp(.54rem, 1.3vw, .84rem); letter-spacing: .08em; }
#live-vs-panel #live-vs-ready.waiting:disabled { border-color: #275742; color: #7b9b88; background: #08120d; box-shadow: inset 0 0 0 3px #213c2e, inset 0 -8px #030806, 0 0 0 4px #000; }
#live-vs-panel #live-vs-ready.waiting:disabled img { filter: grayscale(1); opacity: .56; }
#live-vs-panel #live-vs-ready.waiting:disabled small { color: #5f7568; }

@media (max-width: 600px) {
  #live-vs-panel .live-vs-card:has(#live-vs-lobby:not([hidden])) { padding: 0 7px max(env(safe-area-inset-bottom), 10px); }
  #live-vs-panel .live-vs-room-bar { min-height: 54px; padding: 6px; }
  #live-vs-panel .live-vs-room-identity { gap: 6px; }
  #live-vs-panel .live-vs-room-mode { padding: 7px 8px 6px; font-size: .78rem; }
  #live-vs-panel .live-vs-room-number { display: grid; gap: 0; }
  #live-vs-panel .live-vs-room-number small { font-size: .38rem; }
  #live-vs-panel #live-vs-room-code { font-size: .54rem; letter-spacing: .02em; }
  #live-vs-panel .live-vs-room-actions { gap: 5px; }
  #live-vs-panel #live-vs-share,
  #live-vs-panel #live-vs-leave { min-height: 34px; gap: 4px; padding: 5px 6px; font-size: .47rem; }
  #live-vs-panel #live-vs-share img,
  #live-vs-panel #live-vs-leave img { width: 17px; height: 17px; }

  #live-vs-panel .live-vs-lobby-arena { margin-top: 7px; aspect-ratio: .96; background-position: center; }
  #live-vs-panel .live-vs-fighter,
  #live-vs-panel .live-vs-fighter:last-child,
  #live-vs-panel .live-vs-fighter[data-frame="high-score"] { top: 6%; left: 1%; width: 46%; height: auto; aspect-ratio: 2 / 3; }
  #live-vs-panel .live-vs-fighter:last-child { right: 2%; left: auto; }
  #live-vs-panel .live-vs-fighter .identity-plate-frame-name { font-size: clamp(.64rem, 3vw, .78rem); }
  #live-vs-panel .live-vs-fighter .identity-plate-name { font-size: clamp(.84rem, 4.25vw, 1.05rem); }
  #live-vs-panel .live-vs-bolt { top: 29%; width: 27%; height: 18%; }
  #live-vs-panel .live-vs-arena-score { top: 70%; left: 39%; width: 22%; grid-template-columns: 1fr 7px 1fr; gap: 3px 0; }
  #live-vs-panel .live-vs-series-label { font-size: .42rem; }
  #live-vs-panel .live-vs-arena-score strong { font-size: clamp(1.65rem, 8.5vw, 2.25rem); text-shadow: 2px 2px #00151d; }
  #live-vs-panel .live-vs-arena-score i { width: 6px; height: 3px; justify-self: center; }
  #live-vs-panel .live-vs-series-format { font-size: .38rem; }

  #live-vs-panel .live-vs-lobby-status { width: 100%; margin-top: 10px; }
  #live-vs-panel .live-vs-battle-cartridge { min-height: 96px; padding: 20px 5px 8px; border-width: 3px; }
  #live-vs-panel .live-vs-battle-cartridge > strong { top: -1px; padding: 3px 14px; font-size: .56rem; }
  #live-vs-panel .live-vs-rule-badge,
  #live-vs-panel button.live-vs-rule-badge { grid-template-rows: auto 30px auto; min-height: 62px; padding: 2px 3px; }
  #live-vs-panel .live-vs-rule-badge small { font-size: clamp(.34rem, 1.8vw, .43rem); }
  #live-vs-panel .live-vs-rule-badge b { max-width: 74px; overflow: hidden; font-size: clamp(.34rem, 1.8vw, .43rem); text-overflow: ellipsis; }
  #live-vs-panel .live-vs-rule-strip .live-vs-rule-icon { width: 30px; height: 30px; }
  #live-vs-panel .live-vs-cartridge-stage { width: 32px; height: 24px; }

  #live-vs-panel .live-vs-command-deck { margin-top: 9px; }
  #live-vs-panel #live-vs-ready.primary,
  #live-vs-panel #live-vs-ready.primary:disabled { grid-template-columns: 45px auto; gap: 10px; min-height: 72px; padding: 7px 16px; }
  #live-vs-panel #live-vs-ready img { width: 44px; height: 44px; }
  #live-vs-panel #live-vs-ready b { font-size: clamp(1.15rem, 6.5vw, 1.65rem); }
  #live-vs-panel #live-vs-ready small { font-size: .48rem; }
}

/* Large portrait phones have enough width to stage the identity plates like a
   fighting-game faceoff. Scale the complete 2:3 plates (never stretch their
   registered zones), let their inner rails meet behind the battle crest, and
   use the lower arena floor for the series read. */
@media (min-width: 385px) and (max-width: 600px) and (orientation: portrait) {
  #live-vs-panel .live-vs-card:has(#live-vs-lobby:not([hidden])) {
    min-height: 100dvh;
    padding-bottom: max(env(safe-area-inset-bottom), 10px);
  }

  #live-vs-panel #live-vs-lobby:not([hidden]) {
    display: flex;
    min-height: calc(100dvh - max(env(safe-area-inset-bottom), 10px));
    flex-direction: column;
    justify-content: flex-start;
  }

  #live-vs-panel #live-vs-lobby:not([hidden]) .live-vs-lobby-status {
    display: grid;
    flex: 1 1 96px;
  }

  #live-vs-panel #live-vs-lobby:not([hidden]) .live-vs-battle-cartridge {
    height: 100%;
    align-content: center;
  }

  #live-vs-panel #live-vs-lobby:not([hidden]) .live-vs-command-deck {
    display: grid;
    flex: 1 1 130px;
    grid-template-rows: auto minmax(72px, 1fr);
    gap: 8px;
  }

  #live-vs-panel #live-vs-lobby:not([hidden]) .live-vs-controls-open {
    margin-bottom: 0;
  }

  #live-vs-panel #live-vs-lobby:not([hidden]) #live-vs-ready {
    height: 100%;
  }

  #live-vs-panel .live-vs-fighter,
  #live-vs-panel .live-vs-fighter:last-child,
  #live-vs-panel .live-vs-fighter[data-frame="high-score"] {
    top: 4%;
    left: -2%;
    width: 53%;
    height: auto;
    aspect-ratio: 2 / 3;
  }

  #live-vs-panel .live-vs-fighter:last-child {
    right: -2%;
    left: auto;
  }

  #live-vs-panel .live-vs-bolt {
    top: 28%;
    width: 30%;
    height: 20%;
  }

  #live-vs-panel .live-vs-arena-score {
    top: 86%;
    left: 38%;
    width: 24%;
  }
}

@media (max-width: 380px) and (max-height: 700px) {
  #live-vs-panel .live-vs-lobby-arena { aspect-ratio: 1.04; }
  #live-vs-panel .live-vs-fighter,
  #live-vs-panel .live-vs-fighter:last-child,
  #live-vs-panel .live-vs-fighter[data-frame="high-score"] { top: 5%; height: auto; aspect-ratio: 2 / 3; }
  #live-vs-panel .live-vs-battle-cartridge { min-height: 88px; }
  #live-vs-panel #live-vs-ready.primary,
  #live-vs-panel #live-vs-ready.primary:disabled { min-height: 64px; }
}

/* The approved VS type system is local to this game state and must remain
   readable at physical phone size. No lobby label may collapse into microtype. */
#live-vs-panel .live-vs-controls-open {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  margin: 0 0 8px;
  padding: 7px 12px;
  border: 2px solid #25dcff;
  color: #e8fbff;
  background: #031018;
  box-shadow: inset 0 -5px #001018, 0 0 12px rgba(37,220,255,.24);
  text-align: left;
}
#live-vs-panel .live-vs-controls-open[hidden] { display: none; }
#live-vs-panel .live-vs-controls-open svg { width: 28px; height: 28px; color: #25dcff; }
#live-vs-panel .live-vs-controls-open > span { display: grid; gap: 2px; }
#live-vs-panel .live-vs-controls-open small,
#live-vs-panel .live-vs-controls-open strong,
#live-vs-panel .live-vs-controls-open > b { font-family: var(--pixel-font); line-height: 1; }
#live-vs-panel .live-vs-controls-open small { color: #65ff35; font-size: 12px; }
#live-vs-panel .live-vs-controls-open strong { color: #fff; font-size: 15px; }
#live-vs-panel .live-vs-controls-open > b { color: #25dcff; font-size: 12px; }
#live-vs-panel .live-vs-controls-open:disabled { opacity: .58; }

#live-vs-panel #live-vs-lobby .live-vs-room-mode { font-size: clamp(14px, 3.7vw, 20px); }
#live-vs-panel #live-vs-lobby .live-vs-room-number small,
#live-vs-panel #live-vs-lobby .live-vs-series-label,
#live-vs-panel #live-vs-lobby .live-vs-series-format,
#live-vs-panel #live-vs-lobby .live-vs-rule-badge small,
#live-vs-panel #live-vs-lobby .live-vs-rule-badge b,
#live-vs-panel #live-vs-lobby #live-vs-ready small { font-size: 12px; }
#live-vs-panel #live-vs-lobby #live-vs-room-code { font-size: clamp(13px, 3.4vw, 17px); }
#live-vs-panel #live-vs-lobby #live-vs-share,
#live-vs-panel #live-vs-lobby #live-vs-leave { font-size: 12px; }
#live-vs-panel #live-vs-lobby .identity-plate-frame-name { font-size: clamp(13px, 3.4vw, 18px); }
#live-vs-panel #live-vs-lobby .identity-plate-name { font-size: clamp(16px, 4.4vw, 28px); }
#live-vs-panel #live-vs-lobby .identity-plate-title { font-size: clamp(12px, 2.8vw, 15px); }
#live-vs-panel #live-vs-lobby .live-vs-battle-cartridge > strong { font-size: clamp(13px, 3vw, 17px); }
#live-vs-panel #live-vs-lobby #live-vs-ready b { font-size: clamp(24px, 7vw, 42px); }

@media (max-width: 600px) {
  #live-vs-panel .live-vs-controls-open { min-height: 50px; padding: 6px 9px; }
  #live-vs-panel .live-vs-controls-open > b { max-width: 82px; text-align: right; }
}

/* Locked collection entries remain visible without offering a selectable arena. */
#live-vs-panel .live-vs-stage-option.locked { opacity: .45; cursor: not-allowed; }