#game-stats { display: flex; flex: 0 0 auto; justify-content: center; gap: 9px; width: 100%; margin-top: 9px; }
.game-stat { display: flex; align-items: baseline; gap: 7px; min-width: 0; padding: 6px 11px; border: 1px solid #66578d; border-radius: 9px; color: #eee8ff; background: #17122de8; }
.game-stat-label { color: #b9a9e2; font: 900 9px/1 var(--body); letter-spacing: .09em; }
.game-stat-value { color: #8dffb0; font: 900 14px/1 var(--font); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  #game-stats { gap: 5px; margin-top: 6px; }
  .game-stat { gap: 4px; padding: 5px 7px; }
  .game-stat-label { font-size: 8px; }
  .game-stat-value { font-size: 12px; }
}

#menu.screen.open {
  justify-content: safe center !important;
  align-items: center !important;
  padding: 20px max(16px, var(--sa-r)) 20px max(16px, var(--sa-l)) !important;
  background:
    radial-gradient(circle at 50% 45%, #100c2680 0%, #09091a9c 58%, #080719b8 100%) !important;
}
#menu::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, #ff714a18, transparent 38%, transparent 62%, #74fbd012);
}
#arena-stage {
  position: relative;
  z-index: 1;
  width: min(1260px, 100%);
  min-height: min(650px, calc(100dvh - 40px));
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 14px;
  text-align: left;
}
#arena-feature,
#arena-roster {
  min-width: 0;
  min-height: 610px;
  position: relative;
  overflow: hidden;
  border: 2px solid #ffffff29;
  border-radius: 22px 6px 22px 6px;
  box-shadow: 0 18px 65px #070616bd, 0 5px 0 #080818;
}
#arena-feature {
  --fighter-accent: #ffc93a;
  isolation: isolate;
  border-color: #ffc93a8a;
  border-bottom: 4px solid var(--fighter-accent);
  background:
    radial-gradient(circle at 68% 44%, #ff8a4252, transparent 40%),
    linear-gradient(146deg, #1f153eea 0%, #110e2de8 51%, #0b0c21f5 100%);
}
#arena-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .4;
  background:
    repeating-linear-gradient(145deg, transparent 0 44px, #ffffff09 45px 46px),
    linear-gradient(90deg, #0d0b26b5, transparent 52%);
}
#arena-feature::after {
  content: "01";
  position: absolute;
  right: -15px;
  top: 68px;
  color: #ffffff0d;
  font: 170px/1 var(--font);
  pointer-events: none;
}
.arena-brand {
  position: absolute;
  z-index: 4;
  top: 24px;
  left: 28px;
  right: 28px;
}
.arena-eyebrow,
.arena-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8dffb0;
  font: 900 11px/1.2 var(--body);
  letter-spacing: .2em;
}
.arena-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8dffb0;
  box-shadow: 0 0 14px #8dffb0;
}
#menu #title {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 17px 0 0 !important;
  color: #ffd443;
  text-align: left;
  font-size: clamp(62px, 6vw, 96px) !important;
  line-height: .78;
  letter-spacing: -.025em;
  text-shadow: -3px -3px 0 #1a1230, 3px 3px 0 #1a1230, 0 8px 0 #1a1230, 0 14px 28px #0009;
}
#menu #title span {
  display: block !important;
  margin: 7px 0 0 !important;
  color: #ff7359;
  font-size: inherit !important;
}
#menu #tagline {
  width: fit-content;
  max-width: 250px;
  margin: 17px 0 7px !important;
  padding: 6px 8px;
  color: #f5edff;
  background: #120d2aba;
  border-left: 2px solid #ffc93a;
  text-align: left;
  font: 900 15px/1.25 var(--body);
  text-shadow: 0 2px 10px #090716;
}
#brand-site {
  display: inline-block;
  color: #8dffb0;
  text-decoration: none;
  font: 900 10px/1 var(--body);
  letter-spacing: .18em;
}
#brand-site:hover { color: white; }
.arena-feature-art {
  position: absolute;
  z-index: 2;
  inset: 80px -4% 92px 9%;
  pointer-events: none;
}
.arena-orbit {
  position: absolute;
  width: min(88%, 470px);
  aspect-ratio: 1;
  top: 3%;
  right: 2%;
  border: 2px dashed #ffd56663;
  border-radius: 50%;
  box-shadow: 0 0 0 28px #ffc93a0b, 0 0 0 58px #ffc93a09, 0 0 110px #ffc93a4a;
  transform: rotate(-18deg);
}
#arena-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 16px 18px #0806169c);
  transform: translateX(8%) rotate(-3deg) scale(1.08);
  transition: opacity .18s, transform .24s;
}
.arena-feature-bottom {
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 78px 28px 20px;
  background: linear-gradient(0deg, #0b0a20 0%, #0b0a20f5 42%, #0b0a20c0 72%, transparent 100%);
}
.arena-selected-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #aaf9c2;
  font: 900 10px var(--body);
  letter-spacing: .17em;
}
#arena-selected-number { color: #ffffffa8; }
#arena-fighter-name {
  margin: 4px 0 0;
  color: var(--fighter-accent);
  font: clamp(50px, 5vw, 74px)/.88 var(--font);
  letter-spacing: .02em;
  text-shadow: 0 5px 0 #080719, 0 10px 20px #000a;
}
#arena-fighter-role {
  display: block;
  margin-top: 7px;
  color: white;
  font: 900 12px var(--body);
  letter-spacing: .15em;
  text-transform: uppercase;
}
#arena-fighter-blurb {
  max-width: 390px;
  min-height: 34px;
  margin: 5px 0 9px;
  color: #e1dbf6;
  font: 800 13px/1.3 var(--body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
#arena-feature-stats {
  display: flex;
  gap: 18px;
}
#arena-feature-stats .stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #d8d0f2;
  font: 900 10px var(--body);
  letter-spacing: .1em;
}
#arena-feature-stats .stat i {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: #ffffff26;
}
#arena-feature-stats .stat b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fighter-accent);
}
#arena-roster {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: linear-gradient(150deg, #171132f2 0%, #100d27f2 52%, #0c0b22f5 100%);
}
#arena-roster::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffc93a, #ff7559, #8dffb0);
}
.arena-roster-header {
  flex: 0 0 auto;
  margin-bottom: 13px;
}
.arena-roster-topline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
@media (max-width: 1320px) {
  .arena-roster-topline { padding-right: 42px; }
}
.arena-online {
  color: #bcb4da;
  font: 900 10px var(--body);
  letter-spacing: .1em;
  white-space: nowrap;
}
.arena-roster-header h2 {
  margin: 8px 0 3px;
  color: #fff;
  font: clamp(30px, 2.8vw, 42px)/.92 var(--font);
  letter-spacing: .02em;
}
.arena-roster-header h2 em { color: #ffc93a; font-style: normal; }
.arena-roster-header p {
  margin: 0;
  color: #bfb7df;
  font: 800 12px/1.3 var(--body);
}
#arena-roster-slot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
#cards {
  counter-reset: rival;
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 9px !important;
}
#cards .card {
  counter-increment: rival;
  position: relative;
  min-width: 0;
  width: auto !important;
  height: 100%;
  margin: 0;
  padding: 7px 9px 9px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  text-align: left;
  border: 2px solid #ffffff24 !important;
  border-radius: 13px 4px 13px 4px !important;
  background: linear-gradient(155deg, #34274cbd, #15132ddb) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
#cards .card::before {
  content: "0" counter(rival);
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 8px;
  color: #ffffff8a;
  font: 900 10px var(--body);
  letter-spacing: .1em;
}
#cards .card:hover,
#cards .card:focus-visible {
  border-color: #ffffff9c !important;
  background: linear-gradient(155deg, #473260e0, #1b1838ef) !important;
  transform: translateY(-3px) !important;
}
#cards .card.on {
  border-color: var(--card-accent, #ffc93a) !important;
  background: linear-gradient(160deg, #43345fd9, #201934f0) !important;
  box-shadow: inset 0 0 0 1px var(--card-accent, #ffc93a), 0 0 22px #ffc93a45 !important;
  transform: translateY(-2px) !important;
}
#cards .card .swatch {
  position: relative;
  flex: 1 1 auto;
  min-height: 28px;
  width: 100%;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center bottom !important;
  filter: drop-shadow(0 7px 10px #0008);
}
#cards .card .swatch .card-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
}
#cards .card .swatch[data-image-failed="true"] {
  background-image: radial-gradient(circle at 50% 38%, #ffffff16, transparent 60%), linear-gradient(145deg, #352957, #17132d) !important;
}
#cards .card .swatch[data-image-failed="true"]::after {
  content: attr(data-fallback);
  color: var(--card-accent, #ffc93a);
  font: 900 clamp(30px, 4vw, 54px)/1 var(--font);
  letter-spacing: .04em;
  text-shadow: 0 4px 16px #0009;
}
#cards .card h2 {
  margin: 3px 0 0;
  color: white;
  font-size: clamp(16px, 1.7vw, 22px) !important;
  line-height: .98;
}
#cards .card .role {
  margin-top: 3px;
  color: var(--card-accent, #ffc93a);
  font: 900 10px/1.1 var(--body);
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cards .card p,
#cards .card .stat { display: none !important; }
#menu-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  justify-content: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 15px;
}
#menu-actions #play,
#menu-actions #mp-open,
#menu-actions #mp-quickplay,
#menu-actions #mp-arena-assault {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  height: auto;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 2px solid #1a1230 !important;
  border-radius: 13px 5px 13px 5px !important;
  cursor: pointer;
  font: clamp(14px, 1.6vw, 22px)/1.05 var(--font) !important;
  transition: transform .16s, filter .16s;
}
#menu-actions #play {
  min-height: 54px;
  color: #1b1530;
  background: linear-gradient(#ffe472, #ffb21e) !important;
  box-shadow: 0 5px #8f5215 !important;
}
#menu-actions #mp-quickplay {
  color: #0b1e1a !important;
  background: linear-gradient(#a9ffd0, #63e6c2) !important;
  box-shadow: 0 5px #1f7665 !important;
}
#menu-actions #mp-open {
  color: #eee8ff !important;
  background: linear-gradient(#3d315f, #261d43) !important;
  box-shadow: 0 5px #120e22 !important;
}
#menu-actions #mp-arena-assault {
  color: #091d1b !important;
  background: linear-gradient(#b9ffd4, #63e6c2) !important;
  box-shadow: 0 5px #1f7665 !important;
}
#menu-actions #play:hover,
#menu-actions #mp-open:hover,
#menu-actions #mp-quickplay:hover,
#menu-actions #mp-arena-assault:hover { transform: translateY(-2px); filter: brightness(1.07); }
#share-open {
  flex: 0 0 auto;
  width: 100%;
  height: 34px;
  margin: 14px 0 0 !important;
  padding: 4px 10px !important;
  border: 1px solid #6b5e95 !important;
  border-radius: 8px !important;
  color: #e8e0fb !important;
  background: #211a3dbd !important;
  box-shadow: none !important;
  cursor: pointer;
  font: 900 11px var(--body) !important;
  letter-spacing: .12em;
}
#share-open:hover { border-color: #ff9979 !important; color: white !important; }
#share-panel {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  color: white;
  background: #1a1534f8;
  border: 1px solid #ff9979;
  border-radius: 12px;
  box-shadow: 0 10px 30px #0008;
  font-family: var(--body);
}
#share-panel strong { color: #ffb39d; font-size: 12px; letter-spacing: .1em; }
#share-panel p { margin: 5px 0 9px; color: #e8e2ff; font-size: 12px; }
.share-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.share-actions button,
.share-actions a {
  border: 1px solid #7768ac;
  border-radius: 7px;
  padding: 7px 9px;
  color: white;
  background: #2b2051;
  text-decoration: none;
  cursor: pointer;
  font: 900 11px var(--body);
}
.share-actions button:first-child { color: #0b1a18; background: #8dffb0; border-color: #8dffb0; }
.share-actions button:hover,
.share-actions a:hover { border-color: #ffc93a; }
#share-status { min-height: 14px; margin-top: 6px; color: #8dffb0; font: 900 11px var(--body); }
#menu-hint {
  flex: 0 0 auto;
  margin-top: 13px !important;
  color: #b7aed6;
  text-align: center;
  font: 800 11px/1.3 var(--body);
}
#lab-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 9px 2px 0;
  border-top: 1px solid #ffffff20;
  color: #938ba9;
  font: 900 9px/1.2 var(--body);
  letter-spacing: .13em;
}
#lab-footer a {
  color: #bcb4da;
  text-decoration: none;
  transition: color .16s ease;
}
#lab-footer a:hover,
#lab-footer a:focus-visible { color: #8dffb0; }
@media (max-width: 900px) and (min-height: 561px) {
  #arena-stage { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 9px; }
  #arena-roster { padding: 15px; }
  #arena-feature-stats { gap: 8px; }
  #cards { gap: 6px !important; }
  #cards .card { padding: 5px 6px 7px !important; }
}
@media (max-width: 700px) and (min-height: 561px) {
  #menu.screen.open { justify-content: flex-start !important; padding: 12px 10px 20px !important; }
  #arena-stage { width: min(520px, 100%); min-height: 0; display: flex; flex-direction: column; gap: 9px; }
  #arena-feature { height: 250px; min-height: 250px; flex: 0 0 auto; }
  .arena-brand { top: 14px; left: 16px; right: 12px; }
  .arena-eyebrow { font-size: 9px; }
  #menu #title { margin-top: 12px !important; font-size: clamp(46px, 12vw, 65px) !important; }
  #menu #tagline,
  #brand-site { display: none; }
  .arena-feature-art { inset: 12px -8% 34px 34%; }
  #arena-portrait { transform: translateX(5%) rotate(-3deg) scale(1.05); }
  .arena-orbit { width: 90%; top: 8%; }
  .arena-feature-bottom { padding: 45px 16px 12px; }
  .arena-selected-label { font-size: 8px; }
  #arena-fighter-name { font-size: 37px; }
  #arena-fighter-role { margin-top: 2px; font-size: 9px; }
  #arena-fighter-blurb,
  #arena-feature-stats { display: none; }
  #arena-roster { min-height: 0; padding: 14px; }
  .arena-roster-header { margin-bottom: 10px; }
  .arena-roster-header h2 { font-size: 27px; }
  .arena-roster-header p { font-size: 11px; }
  .arena-online { font-size: 9px; }
  #arena-roster-slot { flex: 0 0 auto; }
  #cards { grid-template-rows: repeat(2, 105px); gap: 6px !important; }
  #cards .card { padding: 5px 6px 6px !important; }
  #cards .card h2 { font-size: 16px !important; }
  #cards .card .role { font-size: 8px; }
  #menu-actions { margin-top: 10px; gap: 8px; }
  #menu-actions #play { min-height: 46px; font-size: clamp(16px, 4.3vw, 22px) !important; }
  #menu-actions #mp-open,
  #menu-actions #mp-quickplay,
  #menu-actions #mp-arena-assault { min-height: 42px; font-size: clamp(10px, 3vw, 16px) !important; }
  #share-open { margin-top: 10px !important; }
  #lab-footer { margin-top: 6px; padding-top: 7px; font-size: 8px; }
  #menu-hint { display: none; }
}
@media (max-height: 560px) and (min-width: 701px) {
  #menu.screen.open { justify-content: flex-start !important; padding: 8px max(10px, var(--sa-r)) 8px max(10px, var(--sa-l)) !important; }
  #arena-stage { width: min(1050px, 100%); min-height: 0; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 8px; }
  #arena-feature,
  #arena-roster { height: 354px; min-height: 354px; }
  .arena-brand { top: 11px; left: 14px; right: 12px; }
  .arena-eyebrow { font-size: 8px; }
  #menu #title { margin-top: 10px !important; font-size: clamp(42px, 5vw, 56px) !important; }
  #menu #title span { margin-top: 4px !important; }
  #menu #tagline,
  #brand-site { display: none; }
  .arena-feature-art { inset: 42px -6% 64px 20%; }
  .arena-orbit { width: 79%; }
  .arena-feature-bottom { padding: 45px 14px 11px; }
  .arena-selected-label { font-size: 8px; }
  #arena-fighter-name { font-size: 38px; }
  #arena-fighter-role { margin-top: 2px; font-size: 9px; }
  #arena-fighter-blurb,
  #arena-feature-stats { display: none; }
  #arena-roster { padding: 9px 11px; }
  .arena-roster-header { margin-bottom: 5px; }
  .arena-roster-header h2 { margin: 4px 0 0; font-size: 24px; }
  .arena-roster-header p,
  .arena-online { display: none; }
  .arena-kicker { font-size: 8px; }
  #cards { gap: 5px !important; }
  #cards .card { padding: 3px 5px 5px !important; border-radius: 7px !important; }
  #cards .card::before { top: 4px; right: 4px; font-size: 7px; }
  #cards .card h2 { font-size: 15px !important; }
  #cards .card .role { margin-top: 1px; font-size: 8px; }
  #menu-actions { margin-top: 5px; gap: 5px; }
  #menu-actions #play { min-height: 38px; border-radius: 8px !important; font-size: 18px !important; }
  #menu-actions #mp-open,
  #menu-actions #mp-quickplay,
  #menu-actions #mp-arena-assault { min-height: 34px; border-radius: 8px !important; font-size: 12px !important; }
  #share-open { height: 23px; margin-top: 8px !important; padding: 1px 5px !important; font-size: 9px !important; }
  #menu-hint { display: none; }
}
@media (max-width: 700px) and (max-height: 560px) {
  #menu.screen.open { justify-content: flex-start !important; padding: 8px !important; }
  #arena-stage { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  #arena-feature { height: 200px; min-height: 200px; }
  #arena-roster { min-height: 0; padding: 10px; }
  .arena-brand { top: 10px; left: 12px; }
  #menu #title { font-size: 41px !important; }
  #menu #tagline,
  #brand-site { display: none; }
  .arena-feature-art { inset: 6px 0 20px 38%; }
  .arena-feature-bottom { padding: 35px 12px 9px; }
  #arena-fighter-name { font-size: 34px; }
  #arena-fighter-role { font-size: 9px; }
  #arena-fighter-blurb,
  #arena-feature-stats { display: none; }
  .arena-roster-header p,
  .arena-online { display: none; }
  #cards { grid-template-rows: repeat(2, 90px); gap: 4px !important; }
  #cards .card { padding: 3px 4px !important; }
  #cards .card h2 { font-size: 14px !important; }
  #cards .card .role { font-size: 7px; }
  #menu-actions { margin-top: 6px; }
  #menu-actions #play { min-height: 40px; font-size: 16px !important; }
  #menu-actions #mp-open,
  #menu-actions #mp-quickplay,
  #menu-actions #mp-arena-assault { min-height: 36px; font-size: 11px !important; }
  #share-open { height: 28px; margin-top: 7px !important; }
  #menu-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #arena-portrait,
  #cards .card,
  #menu-actions #play,
  #menu-actions #mp-open,
  #menu-actions #mp-quickplay,
  #menu-actions #mp-arena-assault { transition: none !important; }
}