@font-face {
  font-family:'Cinzel';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('assets/fonts/cinzel-variable.ttf') format('truetype');
}
@font-face {
  font-family:'Oxanium';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('assets/fonts/oxanium-variable.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-800.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-900.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/dm-sans-400.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/dm-sans-500.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/dm-sans-600.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/dm-sans-700.ttf') format('truetype');
}
@font-face {
  font-family:'Teko';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/teko-variable.ttf') format('truetype');
}
:root {
  color-scheme:dark;
  --bg:#120e10;
  --panel:#1c1619;
  --line:#382b2d;
  --text:#f6eadb;
  --muted:#a49793;
  --red:#ed5141;
  --gold:#d9b770;
  --font:'Oxanium',Arial,sans-serif;
  --display:'Cinzel',Georgia,serif;
  --arcade:'Teko','Barlow Condensed',sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:radial-gradient(ellipse at 14% 20%,#32191688,transparent 53%),var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px
}
button,select {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.5
}
button:focus-visible,a:focus-visible,select:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px
}
button {
  color:inherit
}
button,a,select {
  -webkit-tap-highlight-color:transparent
}
button {
  border:0
}
button[hidden],[hidden] {
  display:none!important
}
.site-noise {
  position:fixed;
  inset:0;
  opacity:.035;
  pointer-events:none;
  z-index:20;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.9' filter='url(%23n)'/%3E%3C/svg%3E")
}
.arcade {
  max-width:1390px;
  margin:auto;
  padding:0 52px
}
.topbar {
  height:106px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:20px
}
.brand {
  display:flex;
  gap:13px;
  align-items:center;
  color:var(--text);
  text-decoration:none
}
.brand-mark {
  width:48px;
  height:48px;
  border:1px solid #fd786455;
  background:var(--red);
  color:#220e0b;
  font-family:var(--display);
  font-weight:900;
  font-size:31px;
  letter-spacing:-7px;
  padding-left:6px;
  display:flex;
  align-items:center;
  box-shadow:3px 3px 0 #772c27;
  transform:skew(-5deg)
}
.brand-mark span {
  margin-top:11px
}
.brand-name {
  font-family:var(--display);
  font-size:24px;
  letter-spacing:1px;
  line-height:1.06;
  font-weight:700
}
.brand-name b {
  color:var(--red)
}
.brand-name small {
  display:block;
  font-family:var(--font);
  font-size:8px;
  font-weight:500;
  letter-spacing:3px;
  color:var(--muted);
  margin-top:7px
}
.top-actions {
  display:flex;
  align-items:center;
  gap:24px
}
.icon-button {
  background:none;
  color:var(--gold);
  font-size:21px;
  display:flex;
  align-items:center;
  gap:8px
}
.icon-button span {
  font-size:10px;
  letter-spacing:1px;
  font-weight:600;
  color:#d3c7c0
}
.icon-button:hover span {
  color:var(--red)
}
.live-dot {
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--muted);
  display:flex;
  gap:9px;
  align-items:center
}
.live-dot:before,.footer-end i {
  content:'';
  width:5px;
  height:5px;
  background:var(--red);
  border-radius:50%;
  box-shadow:0 0 8px #ed514188
}
.live-dot span {
  color:var(--gold);
  border:1px solid var(--line);
  padding:3px 5px
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:35px 0 24px
}
.eyebrow {
  font-size:9px;
  letter-spacing:1.8px;
  color:var(--gold);
  font-weight:700;
  display:block
}
.section-heading .eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 7px
}
.tiny-square {
  width:5px;
  height:5px;
  background:var(--red)
}
h1 {
  font-family:var(--display);
  font-size:49px;
  letter-spacing:.5px;
  line-height:1;
  margin:0;
  text-transform:uppercase;
  font-weight:700
}
h1 span {
  color:var(--red)
}
.edition-tag {
  text-align:right;
  font-size:9px;
  color:var(--muted);
  letter-spacing:1px;
  line-height:1.8
}
.edition-tag b {
  display:block;
  color:var(--text);
  font-size:10px
}
.game-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:22px;
  align-items:start
}
.cabinet {
  border:1px solid #574039;
  background:#1a1214;
  box-shadow:0 8px 35px #0005
}
.cabinet-top {
  height:34px;
  background:#251b1b;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 15px;
  letter-spacing:1.3px;
  font-size:8px;
  font-weight:700;
  color:#cfb99e;
  border-bottom:1px solid #634b3666
}
.cabinet-top>span:first-child {
  display:flex;
  align-items:center;
  gap:8px
}
.cabinet-top i {
  width:5px;
  height:5px;
  background:#89b499;
  box-shadow:0 0 9px #89b49955
}
.stage-label {
  color:#b59a7d
}
.cabinet-top button {
  background:transparent;
  font-size:21px;
  padding:0;
  color:#c7b69e
}
.screen {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#171216
}
.screen canvas {
  display:block;
  width:100%;
  height:100%;
  outline:none
}
.scanlines {
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.15;
  background:repeating-linear-gradient(0deg,#0007 0px,#0007 1px,transparent 1px,transparent 3px);
  box-shadow:inset 0 0 70px #0008
}
.hud {
  position:absolute;
  top:19px;
  left:25px;
  right:25px;
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  gap:10px;
  pointer-events:none;
  text-shadow:1px 2px #000;
  z-index:2
}
.fighter-label {
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--display);
  font-size:22px;
  font-weight:700;
  line-height:1
}
.fighter-label>span {
  color:#e5b680;
  border:1px solid #a88d4d77;
  background:#1a1219d9;
  font-family:var(--font);
  font-size:8px;
  padding:3px 4px;
  letter-spacing:.5px
}
.health-track {
  height:13px;
  border:2px solid #ecd3a8;
  transform:skew(-9deg);
  margin-top:6px;
  background:#3f1621;
  box-shadow:0 3px 0 #0007
}
.health-fill {
  height:100%;
  width:100%;
  background:linear-gradient(90deg,#be642c,#f5c35d);
  transition:width .1s linear;
  box-shadow:inset 0 3px #ffea9b44
}
.p2 .health-track {
  transform:skew(9deg)
}
.p2 .health-fill {
  margin-left:auto;
  background:linear-gradient(90deg,#ec684c,#a92531)
}
.p2 .fighter-label {
  flex-direction:row-reverse
}
.p2 {
  text-align:right
}
.round-dots {
  display:flex;
  gap:4px;
  margin-left:auto
}
.p2 .round-dots {
  margin-left:0;
  margin-right:auto
}
.round-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:#342824;
  border:1px solid #b19972;
  transform:rotate(45deg)
}
.round-dot.won {
  background:#ecc768;
  box-shadow:0 0 8px #eac66777
}
.meter-track {
  height:3px;
  margin-top:7px;
  background:#ede0c72d;
  width:48%;
  transform:skew(-9deg)
}
.p2 .meter-track {
  margin-left:auto
}
.meter-fill {
  background:#ecc66d;
  height:100%;
  width:0;
  box-shadow:0 0 10px #ecc66d88
}
.p2 .meter-fill {
  margin-left:auto
}
.fighter-hud small {
  display:block;
  font-size:6px;
  letter-spacing:1px;
  color:#dfc8a1;
  margin-top:4px
}
.round-clock {
  text-align:center;
  margin-top:-5px
}
.round-clock>span {
  font-size:7px;
  letter-spacing:1px;
  color:#dcc7a1
}
.round-clock b {
  display:block;
  font-family:var(--display);
  font-size:48px;
  line-height:1.1;
  font-weight:700;
  color:#f7ddae
}
.round-clock small {
  font-size:7px;
  letter-spacing:1px;
  color:#efb451
}
.preview-caption {
  position:absolute;
  bottom:25px;
  left:0;
  right:0;
  text-align:center;
  pointer-events:none;
  text-shadow:0 2px 5px #000
}
.preview-caption>span {
  display:block;
  color:#d8b170;
  font-size:7px;
  letter-spacing:2px
}
.preview-caption b {
  font-family:var(--display);
  font-size:23px;
  letter-spacing:2px;
  line-height:1.7
}
.preview-caption i {
  font-style:italic;
  font-size:14px;
  color:var(--red);
  padding:0 12px
}
.cabinet-bottom {
  min-height:39px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 14px;
  border-top:1px solid #574039;
  font-size:8px;
  color:#b8a999;
  letter-spacing:.7px;
  gap:10px
}
.cabinet-bottom b {
  font-weight:600;
  color:var(--gold)
}
.bottom-separator {
  color:#69463a;
  padding:0 8px
}
.text-button {
  padding:0;
  background:none;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.7px
}
.text-button:hover {
  color:var(--text)
}
.text-button:disabled {
  cursor:default
}
.cabinet-bottom kbd {
  font-size:7px;
  padding:2px 4px;
  margin-left:6px
}
.setup-panel {
  padding:21px;
  background:linear-gradient(145deg,#261b1b,var(--panel));
  border:1px solid var(--line);
  min-height:100%
}
.panel-heading .eyebrow {
  font-size:8px;
  letter-spacing:1.4px
}
.panel-heading h2 {
  font-family:var(--display);
  font-size:27px;
  margin:5px 0 17px;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.5px
}
.mode-options {
  display:flex;
  flex-direction:column;
  gap:6px
}
.mode-option {
  padding:9px 10px;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  background:#110f1180;
  border:1px solid #49312c;
  color:var(--muted);
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s
}
.mode-option.active {
  border-color:#bc5741;
  background:#853a2518;
  color:var(--text)
}
.option-icon {
  font-size:19px;
  color:#937261;
  width:20px;
  text-align:center
}
.mode-option.active .option-icon {
  color:var(--red)
}
.mode-option b {
  font-size:11px;
  font-weight:600;
  display:block
}
.mode-option small {
  font-size:8px;
  color:var(--muted);
  display:block;
  margin-top:3px
}
.mode-option i {
  margin-left:auto;
  height:9px;
  width:9px;
  border-radius:50%;
  border:1px solid #6d554d
}
.mode-option.active i {
  background:var(--red);
  border:3px solid #542a23;
  box-shadow:0 0 0 1px var(--red)
}
.setting {
  margin-top:15px
}
.setting label {
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted);
  display:block;
  font-weight:600;
  margin-bottom:6px
}
select {
  width:100%;
  padding:9px 7px;
  background:#151013;
  border:1px solid var(--line);
  border-radius:0;
  color:#e0d0c3;
  font-size:10px;
  cursor:pointer
}
.match-rules {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:15px 0 13px;
  font-size:6px;
  color:var(--muted);
  letter-spacing:.8px
}
.match-rules b {
  display:block;
  color:#c8b7a9;
  margin-top:4px;
  font-size:8px;
  font-weight:500
}
.primary-button {
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 15px;
  background:var(--red);
  color:#210f0d;
  font-family:var(--display);
  font-size:20px;
  font-weight:700;
  letter-spacing:.8px;
  border:1px solid #fc806550;
  box-shadow:0 3px 0 #91352c;
  transition:background .15s,transform .15s
}
.primary-button:hover:not(:disabled) {
  background:#ff7055;
  transform:translateY(-1px)
}
.primary-button span {
  font-family:var(--font);
  font-weight:400;
  font-size:25px;
  line-height:.7
}
.enter-hint {
  text-align:center;
  font-size:7px;
  color:var(--muted);
  margin:10px 0 0;
  letter-spacing:.2px
}
.enter-hint kbd {
  font-size:6px;
  padding:2px 3px
}
.special-note {
  padding-top:14px;
  margin-top:16px;
  border-top:1px solid var(--line)
}
.special-note span {
  font-size:7px;
  letter-spacing:1px;
  color:#ae9581;
  display:block
}
.special-note b {
  font-family:var(--display);
  font-size:20px;
  font-weight:600;
  display:block;
  margin-top:4px;
  color:var(--gold);
  text-transform:uppercase
}
.special-note small {
  font-size:8px;
  color:var(--muted);
  display:block;
  margin-top:3px
}
.roster-section {
  margin-top:26px
}
.roster-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  gap:12px
}
.roster-heading h2 {
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:600;
  margin:0
}
.roster-number {
  color:var(--red);
  padding-right:10px;
  font-family:var(--display);
  font-size:15px
}
.roster-heading p {
  font-size:9px;
  color:var(--muted);
  margin:0
}
.roster-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px
}
.fighter-card {
  position:relative;
  background:linear-gradient(155deg,#332522,#191619);
  border:1px solid #48332c;
  text-align:left;
  padding:0;
  overflow:hidden;
  transition:transform .18s,border-color .18s,background .18s;
  min-width:0;
  color:var(--text)
}
.fighter-card:before {
  content:'';
  height:100%;
  width:100%;
  position:absolute;
  inset:0;
  opacity:.1;
  background:radial-gradient(ellipse at 50% 35%,var(--fighter-color),transparent 65%);
  pointer-events:none
}
.fighter-card:hover {
  transform:translateY(-4px);
  border-color:var(--fighter-color)
}
.fighter-card.selected {
  border:1px solid var(--red);
  box-shadow:0 0 0 1px #ed514144
}
.fighter-card.selected:after {
  position:absolute;
  inset:auto 0 0;
  height:3px;
  content:'';
  background:var(--red)
}
.fighter-card .select-tag {
  position:absolute;
  top:9px;
  left:9px;
  font-size:7px;
  letter-spacing:.6px;
  background:var(--red);
  color:#1b0c0b;
  padding:3px 5px;
  z-index:1;
  font-weight:800;
  display:none
}
.fighter-card.selected .select-tag {
  display:block
}
.fighter-card .cpu-tag {
  position:absolute;
  right:8px;
  top:9px;
  font-size:7px;
  color:var(--gold);
  border:1px solid #aa865466;
  padding:2px 4px;
  z-index:1;
  display:none
}
.fighter-card.opponent .cpu-tag {
  display:block
}
.portrait-wrap {
  height:118px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid #a7804320
}
.portrait-wrap:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:35%;
  background:linear-gradient(transparent,#211818)
}
.portrait-wrap canvas {
  display:block;
  width:100%;
  height:100%;
  image-rendering:pixelated
}
.fighter-info {
  padding:9px 11px 12px;
  position:relative
}
.fighter-info h3 {
  font-family:var(--display);
  font-size:23px;
  margin:0;
  font-weight:700;
  line-height:1
}
.fighter-info .fighter-title {
  display:block;
  color:#bba398;
  font-size:8px;
  margin-top:4px
}
.fighter-hebrew {
  position:absolute;
  right:10px;
  top:12px;
  color:#8f7366;
  font-size:8px
}
.fighter-stats {
  display:flex;
  gap:10px;
  margin-top:10px;
  font-size:6px;
  letter-spacing:.5px;
  color:#b4a397
}
.stat-line {
  display:flex;
  gap:3px;
  align-items:center
}
.stat-bars {
  display:flex;
  gap:2px
}
.stat-bars i {
  display:block;
  width:3px;
  height:7px;
  background:#58433b;
  transform:skew(-10deg)
}
.stat-bars i.filled {
  background:var(--fighter-color)
}
.controls-strip {
  border:1px solid var(--line);
  background:#1a141680;
  display:flex;
  align-items:center;
  gap:24px;
  padding:14px 18px;
  margin-top:25px;
  justify-content:space-between
}
.control-title {
  border-right:1px solid var(--line);
  padding-right:24px
}
.control-title span {
  font-size:7px;
  color:var(--muted);
  letter-spacing:1px;
  display:block
}
.control-title b {
  font-family:var(--display);
  font-size:17px;
  letter-spacing:.8px;
  color:var(--gold);
  font-weight:600;
  display:block;
  margin-top:3px
}
.control {
  display:flex;
  align-items:center;
  gap:7px
}
.control>div {
  display:flex;
  gap:3px
}
.control span {
  font-size:7px;
  letter-spacing:.7px;
  color:#bdaaa0
}
kbd {
  background:#302327;
  border:1px solid #534039;
  box-shadow:0 2px 0 #0a0708;
  min-width:20px;
  min-height:20px;
  padding:3px 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-family:var(--font);
  color:#e0c4a3
}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:80px;
  font-size:7px;
  color:#80736e;
  letter-spacing:.6px
}
footer>span:first-child {
  color:#ac9180;
  font-weight:600
}
footer b {
  padding-left:8px;
  font-weight:400;
  color:#80736e
}
footer p {
  letter-spacing:0;
  font-size:8px;
  text-align:center
}
.footer-end {
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}
.footer-end i {
  background:#88a691;
  box-shadow:none
}
.screen-overlay {
  position:absolute;
  inset:0;
  background:#130d14da;
  backdrop-filter:blur(4px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:4;
  padding:30px
}
.screen-overlay h2 {
  font-family:var(--display);
  font-size:58px;
  line-height:1;
  text-transform:uppercase;
  margin:12px 0 8px
}
.screen-overlay p {
  color:var(--muted);
  font-size:12px;
  margin:0 0 24px
}
.screen-overlay .primary-button {
  max-width:230px;
  margin-top:10px
}
.screen-overlay .text-button {
  margin-top:20px
}
.loading {
  position:absolute;
  inset:0;
  background:#151014;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px
}
.loading b {
  font-family:var(--display);
  font-size:22px;
  letter-spacing:2px;
  color:var(--gold)
}
.loading small {
  color:var(--muted);
  font-size:10px
}
.loader {
  width:25px;
  height:25px;
  border:2px solid #4b3029;
  border-top-color:var(--red);
  transform:rotate(45deg);
  animation:spin 1s linear infinite
}
@keyframes spin {
  to {
    transform:rotate(405deg)
  }
}
dialog {
  max-width:550px;
  width:calc(100% - 32px);
  background:#24191c;
  border:1px solid #785347;
  color:var(--text);
  padding:32px;
  box-shadow:0 20px 80px #0009
}
dialog::backdrop {
  background:#090508ce;
  backdrop-filter:blur(6px)
}
dialog h2 {
  font-family:var(--display);
  font-size:36px;
  margin:12px 0
}
dialog p {
  font-size:12px;
  line-height:1.7;
  color:#c3aea5
}
.dialog-close {
  position:absolute;
  top:9px;
  right:14px;
  background:none;
  color:var(--muted);
  font-size:28px
}
table {
  width:100%;
  border-collapse:collapse;
  margin:22px 0;
  font-size:12px
}
td,th {
  padding:10px 8px;
  border-bottom:1px solid #4c3638;
  text-align:left
}
th {
  font-size:9px;
  color:var(--gold);
  letter-spacing:1px
}
td:first-child {
  color:var(--muted)
}
.help-foot {
  font-size:10px
}
.sr-only {
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}
.touch-controls {
  display:none;
  justify-content:space-between;
  gap:20px;
  padding:15px 0;
  user-select:none;
  touch-action:none
}
.touch-dpad {
  display:grid;
  grid-template-columns:repeat(3,44px);
  grid-template-rows:repeat(2,40px);
  gap:5px
}
.touch-dpad button:nth-child(1) {
  grid-column:1;
  grid-row:2
}
.touch-dpad button:nth-child(2) {
  grid-column:2;
  grid-row:1
}
.touch-dpad button:nth-child(3) {
  grid-column:3;
  grid-row:2
}
.touch-dpad button:nth-child(4) {
  grid-column:2;
  grid-row:2
}
.touch-controls button {
  background:#382326;
  border:1px solid #805246;
  color:#edcfa4;
  min-width:40px;
  min-height:40px;
  touch-action:none
}
.touch-controls button.held {
  background:#a6412c
}
.touch-attacks {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:5px
}
.touch-attacks button {
  font-size:8px;
  padding:0 10px
}
.screen:fullscreen {
  height:100vh;
  width:100vw;
  aspect-ratio:auto;
  background:#000;
  display:flex;
  align-items:center
}
.screen:fullscreen canvas {
  object-fit:contain;
  width:100%;
  height:100%;
  max-height:100vh
}
.screen:fullscreen .hud {
  top:5%
}
.screen:fullscreen .preview-caption {
  bottom:5%
}
@media(min-width:1450px) {
  .arcade {
    padding:0 65px
  }
  .portrait-wrap {
    height:138px
  }
  .setup-panel {
    padding:24px
  }
  .mode-option {
    padding:12px 10px
  }
  .setting {
    margin-top:20px
  }
  .special-note {
    margin-top:20px;
    padding-top:19px
  }
  .match-rules {
    padding:20px 0 18px
  }
  .hud {
    top:24px
  }
}
@media(max-width:1100px) {
  .arcade {
    padding:0 30px
  }
  .game-layout {
    grid-template-columns:minmax(0,1fr) 225px;
    gap:16px
  }
  .setup-panel {
    padding:16px
  }
  .top-actions {
    gap:18px
  }
  .live-dot {
    display:none
  }
  .controls-strip {
    gap:10px;
    padding:12px
  }
  .control-title {
    padding-right:12px
  }
  .control {
    gap:4px
  }
  .control span {
    font-size:6px
  }
  .fighter-info h3 {
    font-size:20px
  }
  .fighter-hebrew {
    display:none
  }
  .roster-grid {
    gap:8px
  }
  .portrait-wrap {
    height:110px
  }
  .fighter-stats {
    gap:6px
  }
  .hud {
    top:14px;
    left:16px;
    right:16px;
    grid-template-columns:1fr 62px 1fr;
    gap:6px
  }
  .fighter-label {
    font-size:18px
  }
  .round-clock b {
    font-size:40px
  }
  .fighter-hud small {
    font-size:5px
  }
  .special-note {
    display:none
  }
  .setting {
    margin-top:12px
  }
  .panel-heading h2 {
    margin-bottom:12px
  }
  .mode-option {
    padding:8px
  }
  .match-rules {
    padding:12px 0
  }
  .stage-label {
    font-size:7px
  }
  .cabinet-bottom {
    font-size:6px
  }
  .cabinet-bottom .text-button {
    font-size:7px
  }
  footer .footer-end {
    display:none
  }
}
@media(max-width:780px) {
  .arcade {
    padding:0 20px
  }
  .topbar {
    height:85px
  }
  .brand-name {
    font-size:21px
  }
  .brand-mark {
    width:39px;
    height:39px;
    font-size:25px;
    padding-left:4px
  }
  .brand-name small {
    font-size:6px
  }
  .icon-button {
    font-size:20px
  }
  .icon-button span {
    display:none
  }
  .top-actions {
    gap:14px
  }
  .section-heading {
    padding:28px 0 19px
  }
  h1 {
    font-size:39px
  }
  .eyebrow {
    font-size:7px!important
  }
  .edition-tag {
    display:none
  }
  .game-layout {
    grid-template-columns:1fr;
    gap:15px
  }
  .setup-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 16px;
    padding:16px
  }
  .panel-heading {
    grid-column:1/-1;
    display:flex;
    justify-content:space-between;
    align-items:center
  }
  .panel-heading h2 {
    margin:0;
    font-size:21px
  }
  .mode-options {
    grid-column:1/-1;
    flex-direction:row;
    gap:6px
  }
  .mode-option {
    flex:1;
    justify-content:center;
    padding:10px 6px;
    gap:6px
  }
  .mode-option b {
    font-size:10px
  }
  .mode-option small {
    font-size:7px
  }
  .mode-option i {
    display:none
  }
  .option-icon {
    font-size:16px;
    width:16px
  }
  .setting {
    margin:0
  }
  .match-rules {
    grid-column:1/-1;
    justify-content:flex-start;
    gap:40px;
    padding:0;
    font-size:6px
  }
  .match-rules b {
    display:inline;
    margin-left:8px
  }
  .setup-panel .primary-button {
    grid-column:1/-1;
    min-height:45px
  }
  .enter-hint {
    grid-column:1/-1;
    margin:0
  }
  .roster-section {
    margin-top:24px
  }
  .roster-grid {
    gap:8px
  }
  .portrait-wrap {
    height:95px
  }
  .fighter-info {
    padding:8px 7px 10px
  }
  .fighter-info h3 {
    font-size:18px
  }
  .fighter-info .fighter-title {
    font-size:6px
  }
  .fighter-stats {
    display:none
  }
  .fighter-card .cpu-tag {
    top:7px;
    right:5px;
    font-size:5px
  }
  .fighter-card .select-tag {
    top:7px;
    left:5px;
    font-size:5px
  }
  .roster-heading p {
    font-size:7px
  }
  .controls-strip {
    flex-wrap:wrap;
    justify-content:center;
    gap:15px
  }
  .control-title {
    border:0;
    padding-right:0
  }
  .control-title span {
    display:none
  }
  .control-title b {
    font-size:14px
  }
  .controls-strip>.text-button {
    display:none
  }
  .control span {
    font-size:6px
  }
  footer {
    min-height:70px
  }
  footer p {
    font-size:7px;
    max-width:250px
  }
  .hud {
    left:15px;
    right:15px;
    top:17px
  }
  .screen-overlay h2 {
    font-size:46px
  }
  .preview-caption {
    bottom:17px
  }
  .preview-caption b {
    font-size:20px
  }
}
@media(max-width:480px) {
  .arcade {
    padding:0 12px
  }
  .topbar {
    height:75px
  }
  .brand-name {
    font-size:18px
  }
  .brand-name small {
    letter-spacing:2px
  }
  .brand {
    gap:10px
  }
  h1 {
    font-size:34px
  }
  .section-heading {
    padding:22px 0 17px
  }
  .section-heading .eyebrow {
    font-size:6px!important;
    letter-spacing:1.2px
  }
  .roster-grid {
    grid-template-columns:repeat(3,1fr);
    gap:9px
  }
  .portrait-wrap {
    height:110px
  }
  .fighter-info h3 {
    font-size:23px
  }
  .fighter-info .fighter-title {
    font-size:8px
  }
  .roster-heading p {
    display:none
  }
  .fighter-stats {
    display:flex
  }
  .mode-option small {
    display:none
  }
  .setup-panel {
    gap:10px
  }
  .option-icon {
    display:none
  }
  .hud {
    left:10px;
    right:10px;
    top:9px;
    grid-template-columns:1fr 47px 1fr;
    gap:5px
  }
  .fighter-label {
    font-size:14px;
    gap:4px
  }
  .fighter-label>span {
    font-size:5px;
    padding:2px
  }
  .health-track {
    height:9px;
    border-width:1px;
    margin-top:4px
  }
  .round-clock b {
    font-size:28px
  }
  .round-clock>span {
    font-size:5px
  }
  .round-clock small {
    font-size:5px
  }
  .round-dots {
    gap:3px
  }
  .round-dot {
    width:5px;
    height:5px
  }
  .meter-track {
    margin-top:4px;
    height:2px
  }
  .fighter-hud small {
    font-size:4px;
    letter-spacing:.4px
  }
  .preview-caption>span {
    font-size:5px;
    letter-spacing:1px
  }
  .preview-caption b {
    font-size:16px
  }
  .preview-caption {
    bottom:10px
  }
  .cabinet-top {
    height:29px;
    padding:0 10px;
    font-size:6px
  }
  .stage-label {
    font-size:5px
  }
  .cabinet-bottom {
    padding:8px;
    font-size:5px
  }
  .cabinet-bottom .bottom-separator,.cabinet-bottom #cabinet-hint {
    display:none
  }
  .cabinet-bottom .text-button {
    font-size:6px
  }
  .screen-overlay {
    padding:16px
  }
  .screen-overlay h2 {
    font-size:31px;
    margin:7px 0
  }
  .screen-overlay p {
    font-size:9px;
    margin-bottom:10px
  }
  .screen-overlay .primary-button {
    max-width:170px;
    min-height:35px;
    padding:8px 12px;
    font-size:16px
  }
  .screen-overlay .text-button {
    font-size:7px;
    margin-top:12px
  }
  .controls-strip {
    gap:12px 16px;
    margin-top:18px
  }
  .control-title {
    width:100%;
    text-align:center
  }
  .control-title b {
    font-size:12px
  }
  .control span {
    font-size:6px
  }
  footer {
    gap:12px
  }
  footer p {
    max-width:210px;
    font-size:6px
  }
  footer>span:first-child {
    font-size:6px;
    white-space:nowrap
  }
  footer b {
    display:none
  }
  dialog {
    padding:24px
  }
  dialog h2 {
    font-size:31px
  }
  table {
    font-size:10px
  }
  td,th {
    padding:9px 4px
  }
}
@media(pointer:coarse) {
  .touch-controls {
    display:flex;
    padding:15px 12px
  }
  .controls-strip {
    display:none
  }
  .playing .setup-panel,.playing .roster-section {
    display:none
  }
  .playing .game-layout {
    display:block
  }
  .playing .screen {
    scroll-margin-top:8px
  }
}
.roster-grid {
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:9px
}
.fighter-info h3 {
  font-size:21px
}
.fighter-info {
  padding:9px 8px 12px
}
.fighter-hebrew {
  display:none
}
.fighter-stats {
  gap:6px
}
.fighter-card:disabled {
  opacity:1;
  cursor:default
}
.fighter-card:disabled:hover {
  transform:none
}
.mode-option:disabled {
  opacity:.65;
  cursor:default
}
.special-note small {
  line-height:1.6
}
.setup-panel .special-note b {
  font-size:18px
}
@media(max-width:1100px) {
  .roster-grid {
    grid-template-columns:repeat(9,minmax(0,1fr));
    gap:7px
  }
  .portrait-wrap {
    height:95px
  }
  .fighter-info h3 {
    font-size:19px
  }
  .fighter-info .fighter-title {
    font-size:7px
  }
  .fighter-stats {
    gap:4px;
    font-size:5px
  }
  .stat-bars i {
    width:2px
  }
}
@media(max-width:900px) {
  .roster-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px
  }
  .portrait-wrap {
    height:145px
  }
  .fighter-info h3 {
    font-size:26px
  }
  .fighter-info .fighter-title {
    font-size:9px
  }
  .fighter-stats {
    font-size:7px;
    gap:15px
  }
  .stat-bars i {
    width:4px
  }
  .fighter-hebrew {
    display:block;
    font-size:10px
  }
  .fighter-card .select-tag,.fighter-card .cpu-tag {
    font-size:7px
  }
  .controls-strip {
    flex-wrap:wrap;
    justify-content:center;
    gap:14px
  }
  .control-title {
    border:0
  }
}
@media(max-width:480px) {
  .roster-grid {
    gap:9px
  }
  .portrait-wrap {
    height:110px
  }
  .fighter-info h3 {
    font-size:22px
  }
  .fighter-info .fighter-title {
    font-size:8px
  }
  .fighter-stats {
    font-size:6px;
    gap:8px
  }
  .stat-bars i {
    width:3px
  }
  .fighter-hebrew {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
  .loader {
    animation:none
  }
  .site-noise {
    display:none
  }
}

.arena-section {
  margin-top:28px;
}
.combat-actions {
  display:flex;
  align-items:center;
  gap:16px;
}
.combat-actions #combat-help,
.combat-actions #combat-sound {
  display:none;
}
.playing .combat-actions #combat-help,
.playing .combat-actions #combat-sound {
  display:block;
}
.arena-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.stage-card {
  position:relative;
  overflow:hidden;
  padding:0;
  text-align:left;
  border:1px solid #584136;
  background:#211719;
  color:var(--text);
  transition:border-color .18s,transform .18s;
}
.stage-card:hover {
  border-color:var(--stage-color);
  transform:translateY(-3px);
}
.stage-card.active {
  border-color:var(--gold);
  box-shadow:0 0 0 1px #d9b77033;
}
.stage-thumb {
  display:block;
  aspect-ratio:2.7;
  background-size:cover;
  background-position:center;
  image-rendering:pixelated;
  box-shadow:inset 0 -30px 25px #160f1688;
}
.stage-info {
  display:block;
  padding:10px 12px 12px;
}
.stage-info b {
  font-family:var(--display);
  font-size:23px;
  font-weight:600;
  text-transform:uppercase;
}
.stage-info small {
  display:block;
  margin-top:3px;
  font-size:8px;
  color:var(--muted);
}
.stage-selected {
  display:none;
  position:absolute;
  top:8px;
  left:8px;
  padding:4px 6px;
  background:var(--gold);
  color:#291a13;
  font-size:7px;
  font-weight:700;
  letter-spacing:.8px;
}
.stage-card.active .stage-selected {
  display:block;
}
.stage-card:disabled {
  cursor:default;
  opacity:1;
}
body.playing {
  overflow:hidden;
  background:#050305;
}
.playing .arcade {
  height:100dvh;
  max-width:none;
  width:100%;
  padding:0;
}
.playing .topbar,
.playing .section-heading,
.playing .setup-panel,
.playing .roster-section,
.playing .arena-section,
.playing .controls-strip,
.playing footer {
  display:none;
}
.playing .game-layout {
  display:block;
  height:100%;
}
.playing .cabinet {
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
  border:0;
  background:radial-gradient(ellipse at center,#281414 0,#070408 70%);
  box-shadow:none;
}
.playing .cabinet-top {
  width:100%;
  flex-shrink:0;
  height:30px;
  background:#130b0e;
  padding:0 25px;
  font-size:9px;
}
.playing .screen {
  flex:none;
  aspect-ratio:16/9;
  margin:auto;
  background:#050305;
  box-shadow:0 0 65px #ae39221a;
}
.playing .screen canvas {
  width:100%;
  height:100%;
}
.playing .cabinet-bottom {
  width:100%;
  min-height:30px;
  flex-shrink:0;
  background:#130b0e;
  padding:6px 25px;
  font-size:9px;
}
.playing .cabinet-bottom .text-button {
  color:var(--gold);
  font-size:11px;
}
.playing .hud {
  top:4%;
  left:4%;
  right:4%;
  grid-template-columns:1fr 110px 1fr;
  gap:18px;
}
.playing .fighter-label {
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(20px,2.8vw,40px);
  font-weight:700;
  letter-spacing:1px;
  color:#f6d894;
  text-shadow:2px 2px #000,0 0 10px #000;
}
.playing .fighter-label>span {
  font-family:var(--font);
  font-size:10px;
}
.playing .health-track {
  height:21px;
  border:2px solid #dcb66b;
  margin-top:9px;
  box-shadow:0 0 0 1px #150c0c,0 4px 0 #0008;
}
.playing .health-fill {
  background:linear-gradient(#eee198,#d3af54 48%,#a06d2c 52%,#e5c876);
}
.playing .p2 .health-fill {
  background:linear-gradient(#e6d088,#b49a4b 48%,#80652a 52%,#c2a767);
}
.playing .meter-track {
  height:5px;
  margin-top:10px;
}
.playing .fighter-hud small {
  font-size:9px;
  margin-top:6px;
  letter-spacing:1.4px;
}
.playing .round-clock b {
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(44px,6.3vw,78px);
  line-height:1;
  font-weight:700;
  color:#f4d798;
  text-shadow:2px 3px #000;
}
.playing .round-clock>span,
.playing .round-clock small {
  font-size:10px;
}
.playing .round-dot {
  width:10px;
  height:10px;
}
.playing .round-dots {
  gap:7px;
}
.playing .screen-overlay {
  background:radial-gradient(ellipse,#200b15e8,#080308e8);
}
.playing .screen-overlay h2 {
  font-family:Georgia,'Times New Roman',serif;
  color:#edce87;
  font-size:clamp(32px,5.3vw,76px);
  text-shadow:2px 3px #000,0 0 25px #91341a66;
  letter-spacing:2px;
}
.playing .touch-controls {
  width:min(800px,100%);
  flex-shrink:0;
  padding:10px 20px;
  background:#130b0e;
}
.playing .scanlines {
  opacity:.08;
}
@media(max-width:780px) {
  .arena-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .stage-info b {font-size:21px;}
  .mode-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .mode-option {justify-content:flex-start;padding:10px;}
  .playing .hud {grid-template-columns:1fr 65px 1fr;gap:9px;}
  .playing .fighter-label {font-size:20px;letter-spacing:0;}
  .playing .fighter-label>span {font-size:6px;}
  .playing .health-track {height:13px;margin-top:5px;}
  .playing .fighter-hud small {font-size:5px;letter-spacing:.7px;}
  .playing .round-clock b {font-size:43px;}
  .playing .round-clock>span,.playing .round-clock small {font-size:6px;}
  .playing .meter-track {height:3px;margin-top:6px;}
  .playing .round-dot {width:6px;height:6px;}
  .playing .round-dots {gap:4px;}
  .playing .cabinet-top {padding:0 12px;font-size:7px;}
  .playing .cabinet-bottom {padding:6px 12px;font-size:6px;}
  .playing .cabinet-bottom .text-button {font-size:9px;}
  .playing .screen-overlay p {font-size:11px;}
}
@media(max-width:480px) {
  .playing .hud {grid-template-columns:1fr 43px 1fr;gap:5px;}
  .playing .fighter-label {font-size:15px;}
  .playing .round-clock b {font-size:28px;}
  .playing .health-track {height:9px;border-width:1px;}
  .playing .fighter-label>span {font-size:5px;}
  .playing .round-clock>span,.playing .round-clock small {font-size:5px;}
  .playing .fighter-hud small {font-size:4px;letter-spacing:.3px;}
  .playing .screen-overlay h2 {font-size:25px;margin:8px 0;}
  .playing .screen-overlay p {font-size:8px;}
  .stage-info b {font-size:20px;}
}

/* Keep the interactive lobby together even in tall browser windows. */
body {overflow:hidden;}
body:not(.playing) {display:grid;place-items:center;min-height:100dvh;}
body:not(.playing) .arcade {
  position:relative;isolation:isolate;display:grid;
  grid-template-areas:'header' 'title' 'settings' 'content' 'navigation';
  grid-template-rows:210px 72px auto minmax(0,1fr) 76px;
  width:100%;max-width:1440px;height:min(100dvh,980px);margin:0;padding:0;overflow:hidden;
}
body:not(.playing) .game-layout {display:contents;}
body:not(.playing) .cabinet {
  position:fixed;inset:0;z-index:-2;border:0;margin:0;background:#070507;
  box-shadow:none;pointer-events:none;
}
body:not(.playing) .screen {width:100%;height:100%;aspect-ratio:auto;border:0;}
body:not(.playing) #arena {width:100%;height:100%;object-fit:cover;opacity:.65;filter:saturate(.8);}
body:not(.playing) .screen::after {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(#09050ada,transparent 36%,#09050a66 65%,#09050aee),
    radial-gradient(ellipse at center,transparent 30%,#050308bd);
}
body[data-scene='fighters'] #arena {opacity:.43;filter:saturate(.6);}
body:not(.playing) .hud,body:not(.playing) .preview-caption,
body:not(.playing) .cabinet-top,body:not(.playing) .cabinet-bottom,
body:not(.playing) .touch-controls,.controls-strip,footer,.live-dot {display:none;}
body:not(.playing) .topbar {
  grid-area:header;position:relative;height:100%;margin:0 32px;border-bottom:1px solid #d9b77035;
}
body:not(.playing) .brand {
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;width:780px;max-width:72%;height:100%;
}
.brand-logo {display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 12px #000);}
.brand-fallback {display:none;}
.logo-unavailable .brand-logo {display:none;}
.logo-unavailable .brand-fallback {
  display:block;color:#e9bf6e;font:900 clamp(28px,4vw,58px)/1 var(--display);
  text-align:center;text-shadow:2px 3px #7d2017;
}
body:not(.playing) .top-actions {margin-left:auto;position:relative;z-index:1;align-self:flex-start;margin-top:20px;gap:18px;}
body:not(.playing) .icon-button {background:transparent;border:0;color:#c7bba9;font:600 17px var(--arcade);letter-spacing:1px;}
body:not(.playing) .section-heading {
  grid-area:title;position:relative;display:flex;justify-content:center;align-items:center;
  margin:0;padding:8px 0;text-align:center;
}
body:not(.playing) .section-heading .eyebrow {margin:0 0 7px;color:#c6a672;font-size:10px;letter-spacing:3px;}
body:not(.playing) h1 {margin:0;font:800 clamp(24px,2.5vw,35px)/1.1 var(--display);letter-spacing:3px;color:#f0d49a;text-shadow:0 2px #291008,0 0 26px #d36d3944;}
.scene-step {position:absolute;right:34px;bottom:17px;color:#baa789;letter-spacing:1.5px;font-size:10px;}
body:not(.playing) .setup-panel {
  grid-area:settings;display:flex;align-items:center;gap:16px;width:calc(100% - 80px);max-width:960px;
  margin:10px auto 4px;padding:8px 12px;min-height:0;border:0;border-top:1px solid #82623a80;border-bottom:1px solid #82623a80;
  background:linear-gradient(90deg,#161014bb,#241519db,#161014bb);box-shadow:none;
}
.setup-panel .panel-heading,.setup-panel .match-rules,.setup-panel .special-note,.setup-panel .enter-hint {display:none;}
.mode-picker {display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;}
.setup-title,.setting label {display:block;height:13px;margin:0;color:#ceb995;font:600 10px/13px var(--font);letter-spacing:1.4px;}
body:not(.playing) .mode-options {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;min-width:0;border:0;}
body:not(.playing) .mode-option {position:relative;justify-content:center;text-align:center;min-width:0;height:40px;padding:5px 8px;border:1px solid #896747;border-left:0;background:linear-gradient(#302126,#151015);box-shadow:inset 0 1px #ffffff0d;}
body:not(.playing) .mode-option:first-child {border-left:1px solid #896747;}
body:not(.playing) .mode-option.active {background:linear-gradient(#67402b,#2b1a18);box-shadow:inset 0 0 0 1px #e7be73,inset 0 -3px #c95034,0 0 14px #bf512022;}
body:not(.playing) .mode-option:hover {background:linear-gradient(#57332a,#24141b);}
.mode-option .option-icon,.mode-option i,.mode-option small {display:none;}
body:not(.playing) .mode-option b {color:#ead3ad;font:600 21px/1.2 var(--arcade);letter-spacing:.6px;white-space:nowrap;text-transform:uppercase;}
body:not(.playing) .setting {display:flex;flex-direction:column;gap:6px;margin:0;width:160px;flex-shrink:0;}
body:not(.playing) .setting select {font:500 22px/1 var(--arcade);letter-spacing:.6px;padding:6px 24px 6px 10px;height:40px;border-color:#896747;background:linear-gradient(#302126,#151015);}
.selection-stage {
  grid-area:content;display:grid;grid-template-columns:minmax(0,1fr) minmax(450px,600px) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);gap:22px;width:calc(100% - 64px);max-width:1340px;
  height:100%;min-height:0;padding:16px 0 10px;margin:auto;
}
.fighter-display {position:relative;display:grid;grid-template-rows:28px minmax(0,1fr) 154px;min-height:0;min-width:0;text-align:center;}
.fighter-display::before {content:'';position:absolute;inset:10% -10% 18%;z-index:-1;background:radial-gradient(ellipse,#47e4ae1a,transparent 68%);}
.opponent-display::before {background:radial-gradient(ellipse,#ed514124,transparent 68%);}
.player-banner {display:flex;align-items:center;justify-content:center;gap:10px;color:#73e4ba;font-size:11px;letter-spacing:2px;}
.player-banner b {background:#3ab9921c;border:1px solid #57c3a180;font:600 19px/1 var(--arcade);padding:4px 8px;letter-spacing:1px;}
.opponent-display .player-banner {color:#fb9984;}
.opponent-display .player-banner b {background:#b4422e24;border-color:#ef796b80;}
.selection-hero {display:block;width:100%;height:100%;min-height:0;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 12px #000c);}
.selection-profile {min-width:0;padding-top:4px;}
.profile-style {color:#c6b493;font-size:10px;letter-spacing:2px;}
.selection-profile h2 {color:#edcf95;font:800 clamp(23px,2.5vw,35px)/1.1 var(--display);letter-spacing:1px;margin:5px 0 4px;text-shadow:1px 2px #000;}
.selection-profile>p {font-size:12px;color:#c5b69d;margin:0;}
.profile-stats {display:flex;justify-content:center;gap:10px;margin:9px 0;font-size:9px;letter-spacing:.4px;color:#c3ac88;}
.profile-stats>span {display:flex;align-items:center;gap:4px;}
.profile-stats .stat-bars i {width:3px;height:9px;background:#60534177;}
.profile-stats .stat-bars i.filled {background:#e1b870;}
.profile-special>span {display:none;}
.profile-special b {color:#72e5bb;font:600 21px/1 var(--arcade);letter-spacing:1px;}
.opponent-display .profile-special b {color:#fb9984;}
.profile-special p {font-size:11px;color:#c1b29c;line-height:1.45;max-width:290px;margin:5px auto 0;}
body:not(.playing) .roster-section {
  position:relative;align-self:center;min-width:0;margin:0;padding:16px;
  border:1px solid #a37b4180;background:linear-gradient(#130c12ed,#100a10c4);
  box-shadow:0 0 45px #0008,inset 0 0 30px #0006;
}
.roster-section::before,.roster-section::after {content:'';position:absolute;width:28px;height:28px;pointer-events:none;border-color:#e4bc76;border-style:solid;}
.roster-section::before {top:-1px;left:-1px;border-width:2px 0 0 2px;}
.roster-section::after {right:-1px;bottom:-1px;border-width:0 2px 2px 0;}
.roster-heading {margin:0 0 12px;gap:10px;}
.roster-heading h2 {font:600 19px var(--arcade);letter-spacing:1.5px;color:#e2c591;}
.selection-target {display:flex;gap:5px;}
.selection-target button {background:#21181c;color:#bdb2a2;border:1px solid #78634a;padding:5px 10px;min-width:44px;min-height:34px;font:600 20px/1 var(--arcade);letter-spacing:1px;}
.selection-target #select-p1.active {border-color:#62e0b7;color:#70f4c9;background:#25604d55;}
.selection-target #select-p2.active {border-color:#ee8878;color:#ffa491;background:#843b3155;}
.roster-grid {grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;}
.fighter-card {border:2px solid #655044;box-shadow:inset 0 0 15px #000;background:linear-gradient(140deg,#3a302d,#171115);transition:border-color .12s,filter .12s,box-shadow .12s;}
.fighter-card:hover {transform:none;border-color:#dbc08d;}
.fighter-card .portrait-wrap {height:auto;aspect-ratio:.92;border:0;opacity:.73;filter:saturate(.7);}
.fighter-card.selected .portrait-wrap,.fighter-card.opponent .portrait-wrap {opacity:1;filter:none;}
.fighter-card .portrait-wrap canvas {width:100%;height:100%;object-fit:cover;}
.fighter-card .portrait-wrap::after {height:20%;background:linear-gradient(transparent,#160d13);}
.fighter-card .fighter-info {padding:5px 1px 3px;text-align:center;background:#100b0ce8;}
.fighter-card .fighter-info h3 {font:600 clamp(13px,1.45vw,19px)/1 var(--arcade);letter-spacing:.3px;margin:0;white-space:nowrap;}
.fighter-card[data-id='goldknopf'] .fighter-info h3 {font-size:clamp(12px,1.25vw,17px);}
.fighter-card .fighter-stats,.fighter-card .fighter-title,.fighter-card .fighter-hebrew {display:none;}
.fighter-card.selected {border-color:#64e4b5;box-shadow:0 0 14px #3dd9a747;}
.fighter-card.selected::after {height:3px;background:#64e4b5;}
.fighter-card.opponent {border-color:#ee8774;box-shadow:0 0 14px #cf514332;}
.fighter-card.selected.opponent {border-color:#64e4b5;box-shadow:inset -3px 0 #ee8774,0 0 14px #3dd9a747;}
.fighter-card .select-tag,.fighter-card .cpu-tag {top:4px;padding:3px 4px;font-size:9px;letter-spacing:.3px;line-height:1;border:0;color:#061e17;background:#64e4b5;}
.fighter-card .select-tag {left:4px;font-size:0;}
.fighter-card .select-tag::before {content:'1P';font-size:9px;}
.fighter-card .cpu-tag {right:4px;color:#29100b;background:#ee8774;}
#roster-hint {text-align:center;font-size:11px;line-height:1.4;color:#bca88b;margin:12px 0 0;}
.select-ornament {display:flex;align-items:center;justify-content:center;gap:10px;color:#ad8145;font-size:9px;margin-top:12px;}
.select-ornament span {color:#bda17c;font:500 11px var(--font);letter-spacing:3px;}
.primary-button {
  min-height:50px;background:linear-gradient(#493327,#25151a 49%,#170f14 51%,#35221d);
  color:#ffe0a0;border:1px solid #e4b775;font:600 26px/1 var(--arcade);letter-spacing:1.4px;
  box-shadow:inset 0 2px #ffe6aa44,inset 0 -3px #0b050a,0 3px 0 #5c3021,0 0 22px #c1391922;
}
.primary-button:hover:not(:disabled) {background:linear-gradient(#854332,#411c23 49%,#25121b 51%,#632d29);box-shadow:inset 0 2px #ffe6aa44,inset 0 -3px #0b050a,0 3px 0 #5c3021,0 0 25px #c1391944;transform:none;}
.primary-button span {font-family:var(--font);font-size:22px;}
.scene-navigation {grid-area:navigation;position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #d5af714f;margin:0 32px;padding:12px 0;}
.navigation-hint {font-size:11px;color:#c2ac8c;letter-spacing:.6px;}
.navigation-hint>span {margin:0 10px;}
.navigation-hint kbd {font-size:11px;border-color:#8c6c47;}
.scene-navigation .primary-button {width:240px;min-height:50px;white-space:nowrap;}
.scene-navigation .text-button {color:#e1bf85;font:500 20px/1.1 var(--arcade);letter-spacing:1px;}
.scene-navigation .text-button kbd {font:10px var(--font);}
.arena-section {grid-area:content;display:flex;flex-direction:column;width:calc(100% - 80px);max-width:1160px;min-height:0;margin:0 auto;padding:12px 0 20px;}
.arena-copy {text-align:center;margin:auto 0;}
.arena-copy .eyebrow {font-size:11px;letter-spacing:3px;color:#e4c99a;}
.arena-copy h2 {margin:10px 0;font:800 clamp(28px,4vw,52px)/1.1 var(--display);letter-spacing:3px;color:#f0d49a;text-shadow:2px 3px #10070b;}
.arena-copy p {font-size:12px;letter-spacing:2px;color:#d5c2a4;margin:12px 0;}
.arena-matchup {display:flex;flex-direction:column;align-items:center;gap:4px;margin:18px 0;}
.arena-matchup>span {font:600 26px var(--arcade);letter-spacing:2px;color:#f6deaf;text-shadow:1px 2px #000;}
.arena-matchup small {font:12px var(--font);color:#cbb69a;}
.arena-section .roster-heading p {font-size:11px;color:#cbb69a;}
.arena-grid {gap:14px;}
.stage-card {border:2px solid #7a5d43;background:#100b11ed;}
.stage-card:hover {transform:none;border-color:#c3a271;}
.stage-card.active {border-color:#ead092;box-shadow:0 0 20px #cda5573b;}
.stage-thumb {aspect-ratio:2.5;opacity:.85;}
.stage-card.active .stage-thumb {opacity:1;}
.stage-info {padding:8px 12px 10px;}
.stage-info b {font:600 24px/1 var(--arcade);letter-spacing:.6px;color:#f0d8ab;}
.stage-info small {font-size:11px;color:#c6ae91;}
.stage-selected {font-size:10px;color:#25180b;}
body[data-scene='fighters'] .arena-section,body[data-scene='fighters'] #back-fighters,
body[data-scene='fighters'] #fight-button,body[data-scene='arena'] .selection-stage,
body[data-scene='arena'] .setup-panel,body[data-scene='arena'] #continue-button,
.playing .selection-stage,.playing .scene-navigation {display:none;}
body[data-scene='fighters'] .navigation-hint {margin-right:auto;}
body[data-scene='arena'] .navigation-hint {margin-left:auto;}

/* Combat and results use the window without invoking desktop fullscreen. */
.playing .cabinet {position:relative;justify-content:center;}
.playing .screen {margin:0;}
.playing .cabinet-top {position:absolute;top:0;left:0;}
.playing .cabinet-bottom {position:absolute;bottom:0;left:0;}
.playing .touch-controls {margin-top:8px;}
.playing .fighter-label,.playing .round-clock b,.playing .screen-overlay h2 {font-family:var(--display);font-weight:800;}
.results .hud,.results .cabinet-top,.results .cabinet-bottom,.results .touch-controls {visibility:hidden;}
.playing #result-overlay {
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:110px 32px 30px;backdrop-filter:none;
  background:radial-gradient(ellipse at 25% 55%,#8a381d36,transparent 45%),linear-gradient(120deg,#09060df5,#160b13ec 65%,#09060df5);
  border:0;box-shadow:inset 0 0 100px #000;
}
.result-brand {position:absolute;top:16px;left:50%;transform:translateX(-50%);width:300px;height:100px;object-fit:contain;}
.result-stage {display:grid;grid-template-columns:minmax(220px,400px) minmax(0,580px);align-items:center;gap:44px;width:100%;max-width:1080px;max-height:100%;animation:result-reveal .35s ease-out;}
.playing #result-overlay .result-fighter {display:block;width:100%;height:min(56vh,460px);object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 25px #c7922926);}
.result-summary {text-align:left;min-width:0;}
.result-summary .eyebrow {font-size:12px;letter-spacing:2.5px;color:#ccb089;}
.playing #result-overlay #result-outcome {font:900 clamp(42px,6.5vw,88px)/1 var(--display);letter-spacing:2px;color:#f3d48c;margin:12px 0;text-shadow:0 3px #542312,0 0 36px #db80362b;}
.playing #result-overlay[data-outcome='defeat'] #result-outcome {color:#e88473;text-shadow:0 3px #53161d,0 0 36px #d633382b;}
.playing #result-overlay #result-title {font:800 clamp(24px,3vw,38px)/1.15 var(--display);color:#efdebe;margin:8px 0;text-transform:uppercase;}
.playing #result-overlay #result-subtitle {font:14px/1.6 var(--font);color:#c2b09a;max-width:500px;margin:12px 0 20px;}
.result-score {display:flex;align-items:center;gap:24px;width:fit-content;padding:12px 24px;border-top:1px solid #cbaa6555;border-bottom:1px solid #cbaa6555;background:#22141980;}
.result-score>div {display:flex;flex-direction:column;align-items:center;min-width:80px;gap:4px;}
.result-score>div>span {font:600 20px var(--arcade);letter-spacing:1px;color:#cbb897;}
.result-score b {font:600 52px/.95 var(--arcade);color:#efd09c;}
.result-score-divider {font:400 36px var(--arcade);color:#8b694a;}
.result-actions {display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:24px;}
.playing #result-overlay .primary-button {width:300px;max-width:100%;min-height:52px;margin:0;padding:14px 20px;font:600 27px/1 var(--arcade);white-space:nowrap;}
.playing #result-overlay .text-button {font:500 22px var(--arcade);letter-spacing:1px;color:#ccb28a;min-height:36px;padding:5px 0;margin:0;}
.playing #result-overlay #result-shortcut {font:11px var(--font);color:#a18d72;letter-spacing:.5px;margin:14px 0 0;}
@keyframes result-reveal {from {opacity:0;transform:translateY(12px);}to {opacity:1;transform:translateY(0);}}

@media(max-width:1100px) and (min-width:781px) {
  .selection-stage {width:calc(100% - 40px);grid-template-columns:minmax(0,1fr) 500px minmax(0,1fr);gap:10px;}
  .profile-stats {gap:6px;}
  .profile-stats>span:last-child {display:none;}
  .profile-special p {font-size:10px;}
  .player-banner {font-size:9px;letter-spacing:1px;}
  .selection-profile h2 {font-size:25px;}
  body:not(.playing) .brand {width:650px;}
}
@media(max-height:800px) and (min-width:781px) {
  body:not(.playing) .arcade {grid-template-rows:154px 62px auto minmax(0,1fr) 64px;}
  body:not(.playing) .brand {width:680px;}
  body:not(.playing) h1 {font-size:28px;}
  body:not(.playing) .section-heading .eyebrow {font-size:9px;margin-bottom:5px;}
  .selection-stage {padding:8px 0;}
  .fighter-display {grid-template-rows:26px minmax(0,1fr) 142px;}
  .selection-profile h2 {font-size:28px;}
  .profile-special p {font-size:10px;}
  body:not(.playing) .roster-section {padding:12px;}
  .fighter-card .portrait-wrap {aspect-ratio:1.05;}
  .select-ornament {display:none;}
  .stage-thumb {aspect-ratio:3;}
}
@media(max-width:780px) {
  body:not(.playing) .arcade {grid-template-rows:100px 66px auto minmax(0,1fr) 64px;}
  body:not(.playing) .topbar {margin:0 14px;}
  body:not(.playing) .brand {width:310px;max-width:80%;}
  body:not(.playing) .top-actions {gap:7px;margin-top:10px;}
  body:not(.playing) .icon-button {font-size:19px;padding:5px;}
  body:not(.playing) .icon-button span {display:none;}
  body:not(.playing) h1 {font-size:26px;letter-spacing:1.5px;}
  body:not(.playing) .section-heading .eyebrow {font-size:8px;letter-spacing:1.6px;}
  .scene-step {display:none;}
  body:not(.playing) .setup-panel {width:calc(100% - 24px);flex-wrap:wrap;gap:8px;margin:4px auto;padding:8px;}
  .mode-picker {flex-basis:100%;gap:5px;}
  body:not(.playing) .mode-options {gap:0;}
  body:not(.playing) .mode-option {height:32px;padding:5px 3px;}
  body:not(.playing) .mode-option b {font-size:17px;letter-spacing:.2px;}
  body:not(.playing) .setting {flex-direction:row;align-items:center;justify-content:center;gap:12px;width:100%;}
  .setting label {font-size:10px;margin:0;}
  body:not(.playing) .setting select {font-size:18px;width:120px;height:32px;padding:3px 22px 3px 8px;}
  .selection-stage {grid-template-columns:1fr 1fr;grid-template-rows:minmax(180px,.7fr) minmax(0,1fr);width:calc(100% - 24px);gap:8px 12px;padding:6px 0 10px;}
  .fighter-display {grid-row:1;grid-template-rows:24px minmax(0,1fr) 80px;}
  .player-display {grid-column:1;}
  .opponent-display {grid-column:2;}
  .player-banner {font-size:9px;letter-spacing:1px;gap:7px;}
  .player-banner b {font-size:16px;padding:3px 6px;}
  .selection-profile h2 {font-size:23px;margin:3px 0;}
  .profile-style {font-size:8px;letter-spacing:1px;}
  .selection-profile>p {font-size:10px;}
  .profile-stats,.profile-special p {display:none;}
  .profile-special b {font-size:18px;letter-spacing:.5px;display:block;margin-top:5px;}
  body:not(.playing) .roster-section {grid-column:1/-1;grid-row:2;padding:10px;align-self:stretch;display:flex;flex-direction:column;min-height:0;height:100%;}
  .roster-heading {margin-bottom:8px;}
  .roster-heading h2 {font-size:17px;letter-spacing:1px;}
  .roster-grid {grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:5px;flex:1;min-height:0;}
  .fighter-card {display:grid;grid-template-rows:minmax(0,1fr) 24px;min-height:0;}
  .fighter-card .portrait-wrap {height:100%;min-height:0;aspect-ratio:auto;}
  .fighter-card .portrait-wrap canvas {object-fit:cover;object-position:50% 40%;}
  .fighter-card .fighter-info h3 {font-size:17px;}
  .fighter-card[data-id='goldknopf'] .fighter-info h3 {font-size:15px;}
  #roster-hint {font-size:10px;margin-top:8px;}
  .select-ornament {display:none;}
  .selection-target button {padding:4px 8px;font-size:18px;min-width:36px;min-height:30px;}
  .scene-navigation {margin:0 12px;gap:10px;padding:10px 0;}
  .navigation-hint {font-size:9px;letter-spacing:0;}
  .navigation-hint>span {margin:0 4px;}
  .navigation-hint kbd {font-size:9px;padding:3px;}
  .scene-navigation .primary-button {width:175px;font-size:23px;min-height:43px;padding:10px 12px;letter-spacing:.7px;}
  .scene-navigation .text-button {font-size:17px;letter-spacing:.3px;}
  .scene-navigation .text-button kbd {display:none;}
  .arena-section {width:calc(100% - 24px);padding-bottom:12px;}
  .arena-copy h2 {font-size:32px;letter-spacing:1px;}
  .arena-copy .eyebrow {font-size:10px;letter-spacing:2px;}
  .arena-copy p {font-size:11px;letter-spacing:1px;}
  .arena-matchup {margin:14px 0;}
  .arena-matchup>span {font-size:24px;letter-spacing:1px;}
  .arena-matchup small {font-size:11px;}
  .arena-section .roster-heading p {display:none;}
  .arena-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .stage-card {display:flex;align-items:center;}
  .stage-thumb {width:40%;aspect-ratio:1.1;flex-shrink:0;}
  .stage-info {padding:6px 8px;}
  .stage-info b {font-size:20px;letter-spacing:0;}
  .stage-info small {font-size:10px;line-height:1.3;}
  .stage-selected {font-size:7px;top:4px;left:4px;padding:3px;}
  .playing .fighter-label {font-size:16px;}
  .playing #result-overlay {padding:100px 20px 20px;}
  .result-brand {top:8px;width:250px;height:83px;}
  .result-stage {grid-template-columns:minmax(130px,1fr) minmax(0,1.4fr);gap:16px;}
  .playing #result-overlay #result-outcome {font-size:46px;}
  .playing #result-overlay #result-title {font-size:27px;}
  .result-score {gap:12px;padding:10px 12px;}
  .result-score>div {min-width:60px;}
}
@media(max-width:480px) {
  body:not(.playing) .arcade {grid-template-rows:88px 62px auto minmax(0,1fr) 60px;}
  body:not(.playing) .brand {width:270px;max-width:80%;}
  body:not(.playing) h1 {font-size:22px;}
  body:not(.playing) .mode-option b {font-size:15px;}
  .selection-profile h2 {font-size:20px;}
  .selection-profile>p {font-size:9px;}
  .profile-special b {font-size:16px;}
  .fighter-card .fighter-info {padding:4px 0 3px;}
  .fighter-card .select-tag,.fighter-card .cpu-tag {font-size:7px;top:3px;padding:2px;}
  .fighter-card .select-tag {font-size:0;left:3px;}
  .fighter-card .select-tag::before {font-size:7px;}
  .fighter-card .cpu-tag {right:3px;}
  .navigation-hint {font-size:8px;}
  .navigation-hint kbd {font-size:8px;}
  .scene-navigation .primary-button {width:166px;font-size:22px;}
  .arena-copy h2 {font-size:28px;}
  .stage-info b {font-size:18px;}
  .stage-info small {font-size:9px;}
  .playing .fighter-label {font-size:11px;}
  .playing .round-clock b {font-size:25px;}
  .playing #result-overlay {padding:76px 18px 12px;}
  .result-brand {width:210px;height:70px;top:4px;}
  .result-stage {display:flex;flex-direction:column;gap:8px;}
  .playing #result-overlay .result-fighter {height:clamp(100px,23vh,210px);flex-shrink:0;}
  .result-summary {width:100%;text-align:center;}
  .result-summary .eyebrow {font-size:10px;}
  .playing #result-overlay #result-outcome {font-size:40px;margin:5px 0;}
  .playing #result-overlay #result-title {font-size:23px;margin:7px 0;}
  .playing #result-overlay #result-subtitle {font-size:12px;margin:8px auto 12px;line-height:1.4;}
  .result-score {margin:0 auto;padding:7px 20px;}
  .result-score b {font-size:38px;}
  .result-score>div>span {font-size:18px;}
  .result-actions {align-items:center;gap:6px;margin-top:14px;}
  .playing #result-overlay .primary-button {min-height:45px;width:280px;font-size:25px;padding:10px 16px;}
  .playing #result-overlay .text-button {font-size:20px;min-height:32px;}
  .playing #result-overlay #result-shortcut {font-size:10px;margin-top:8px;}
}
@media(max-height:700px) and (min-width:781px) {
  body:not(.playing) .arcade {grid-template-rows:110px 56px auto minmax(0,1fr) 58px;}
  body:not(.playing) .brand {width:400px;}
  .fighter-display {grid-template-rows:24px minmax(0,1fr) 95px;}
  .profile-stats,.profile-special p {display:none;}
  .selection-profile h2 {font-size:25px;}
  .arena-copy h2 {font-size:36px;}
  .stage-thumb {aspect-ratio:3.5;}
}
@media(max-height:740px) and (max-width:780px) and (orientation:portrait) {
  body:not(.playing) .arcade {grid-template-rows:68px 46px auto minmax(0,1fr) 60px;}
  body:not(.playing) .brand {width:220px;}
  body:not(.playing) h1 {font-size:20px;}
  body:not(.playing) .section-heading .eyebrow {display:none;}
  body:not(.playing) .setup-panel {padding:5px 8px;gap:4px;}
  .mode-picker {gap:4px;}
  .setup-title {display:none;}
  body:not(.playing) .mode-option {height:26px;padding:3px 2px;}
  body:not(.playing) .setting select {height:26px;}
  .selection-stage {grid-template-rows:70px minmax(0,1fr);}
  .fighter-display {grid-template-rows:20px minmax(0,1fr);}
  .selection-hero {display:none;}
  .profile-style,.selection-profile>p {display:none;}
  .selection-profile h2 {font-size:19px;}
  body:not(.playing) .roster-section {align-self:stretch;display:flex;flex-direction:column;min-height:0;height:100%;}
  .roster-heading {flex-shrink:0;}
  .roster-grid {grid-template-rows:repeat(3,minmax(0,1fr));flex:1;min-height:0;}
  .fighter-card {display:grid;grid-template-rows:minmax(0,1fr) 23px;min-height:0;}
  .fighter-card .portrait-wrap {height:100%;min-height:0;aspect-ratio:auto;}
  .fighter-card .portrait-wrap canvas {object-fit:cover;object-position:50% 40%;}
  #roster-hint {flex-shrink:0;}
}
@media(max-height:540px) {
  body:not(.playing) .arcade {grid-template-rows:58px 42px auto minmax(0,1fr) 46px;}
  body:not(.playing) .brand {width:230px;}
  body:not(.playing) .top-actions {margin-top:7px;}
  body:not(.playing) h1 {font-size:20px;letter-spacing:1.5px;}
  body:not(.playing) .section-heading .eyebrow {display:none;}
  .scene-step {display:none;}
  body:not(.playing) .setup-panel {flex-wrap:nowrap;width:calc(100% - 32px);gap:8px;padding:5px 8px;margin:3px auto;}
  .mode-picker {flex-basis:0;gap:4px;}
  .setup-title {font-size:8px;height:10px;line-height:10px;}
  body:not(.playing) .mode-options {gap:0;}
  body:not(.playing) .mode-option {height:30px;padding:4px 2px;}
  body:not(.playing) .mode-option b {font-size:16px;}
  body:not(.playing) .setting {flex-direction:column;align-items:stretch;gap:4px;width:110px;}
  .setting label {font-size:8px;letter-spacing:0;margin:0;height:10px;line-height:10px;}
  body:not(.playing) .setting select {font-size:18px;height:30px;width:110px;padding:4px;}
  .selection-stage {grid-template-columns:minmax(0,1fr) minmax(280px,480px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:8px;padding:3px 0;}
  .fighter-display {grid-row:1;grid-template-rows:18px minmax(0,1fr) 40px;overflow:hidden;}
  .player-display {grid-column:1;}
  .opponent-display {grid-column:3;}
  .selection-profile>p,.profile-style,.profile-special,.profile-stats {display:none;}
  .selection-profile h2 {font:600 21px var(--arcade);margin:2px 0;letter-spacing:.5px;}
  .player-banner {font-size:0;gap:0;}
  .player-banner b {font-size:14px;}
  body:not(.playing) .roster-section {grid-column:2;grid-row:1;display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0;padding:7px;}
  .roster-heading {flex-shrink:0;margin-bottom:5px;}
  .roster-heading h2 {font-size:15px;}
  .selection-target button {min-height:24px;font-size:16px;padding:3px 6px;}
  .roster-grid {grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));flex:1;min-height:0;gap:4px;}
  .fighter-card {display:grid;grid-template-rows:minmax(0,1fr) 20px;min-height:0;}
  .fighter-card .portrait-wrap {height:100%;min-height:0;aspect-ratio:auto;}
  .fighter-card .portrait-wrap canvas {object-fit:cover;object-position:50% 40%;}
  .fighter-card .fighter-info {padding:3px 0;}
  .fighter-card .fighter-info h3,.fighter-card[data-id='goldknopf'] .fighter-info h3 {font-size:14px;letter-spacing:0;}
  #roster-hint {font-size:8px;flex-shrink:0;margin-top:5px;}
  .select-ornament {display:none;}
  .scene-navigation {padding:5px 0;}
  .scene-navigation .primary-button {width:180px;min-height:34px;font-size:21px;padding:6px 10px;}
  .navigation-hint {font-size:9px;}
  .scene-navigation .text-button {font-size:17px;}
  .arena-section {padding:4px 0 8px;}
  .arena-copy h2 {font-size:25px;margin:5px 0;}
  .arena-copy .eyebrow,.arena-copy p,.arena-section .roster-heading {display:none;}
  .arena-matchup {margin:5px 0 8px;}
  .arena-matchup>span {font-size:20px;}
  .arena-matchup small {font-size:9px;}
  .arena-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;}
  .stage-card {display:flex;align-items:center;}
  .stage-thumb {width:38%;flex-shrink:0;aspect-ratio:1.2;}
  .stage-info {padding:6px;}
  .stage-info b {font-size:18px;letter-spacing:0;}
  .stage-info small {display:none;}
  .playing #result-overlay {padding:58px 22px 12px;}
  .result-brand {width:170px;height:56px;top:0;}
  .result-stage {display:grid;grid-template-columns:minmax(130px,1fr) minmax(0,1.6fr);gap:18px;max-width:850px;}
  .playing #result-overlay .result-fighter {height:min(70vh,310px);}
  .result-summary {text-align:left;}
  .playing #result-overlay #result-outcome {font-size:39px;margin:5px 0;}
  .playing #result-overlay #result-title {font-size:22px;margin:5px 0;}
  .playing #result-overlay #result-subtitle {font-size:11px;margin:6px 0 10px;}
  .result-summary .eyebrow {font-size:10px;}
  .result-score {padding:5px 12px;margin:0;gap:15px;}
  .result-score b {font-size:32px;}
  .result-score>div>span {font-size:16px;}
  .result-actions {align-items:flex-start;gap:4px;margin-top:10px;}
  .playing #result-overlay .primary-button {min-height:37px;width:260px;font-size:23px;padding:8px 14px;}
  .playing #result-overlay .text-button {font-size:18px;min-height:25px;}
  .playing #result-overlay #result-shortcut {font-size:9px;margin-top:5px;}
}
@media(max-height:540px) and (max-width:600px) {
  .selection-stage {grid-template-columns:1fr;}
  .fighter-display {display:none;}
  body:not(.playing) .roster-section {grid-column:1;}
  body:not(.playing) .setup-panel {flex-wrap:wrap;}
  .mode-picker {flex-basis:100%;}
  body:not(.playing) .setting {flex-direction:row;align-items:center;width:100%;justify-content:center;}
  .arena-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
  .stage-thumb {aspect-ratio:2;}
  .arena-copy h2 {display:none;}
}
@media(prefers-reduced-motion:reduce) {.result-stage {animation:none;}}

/* A single stage rail keeps every battleground reachable without growing the scene. */
.arena-section {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto auto;
  gap:12px;
  padding:12px 0 16px;
}
.arena-copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  margin:0;
}
.arena-rail-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
}
.arena-rail-header h2 {
  margin:0;
  color:#e2c591;
  font:600 21px/1.1 var(--arcade);
  letter-spacing:1px;
}
.arena-rail-header p {margin:4px 0 0;color:#cbb69a;font-size:11px;}
.arena-browse-controls {display:flex;align-items:center;gap:7px;flex-shrink:0;}
#arena-position {margin-right:5px;color:#d2b383;font:500 21px/1 var(--arcade);letter-spacing:1px;}
.arena-browse-controls button {
  width:44px;
  height:40px;
  padding:0;
  border:1px solid #a57d4e;
  background:linear-gradient(#352429,#171015);
  color:#eed29a;
  font-size:14px;
}
.arena-browse-controls button:hover {border-color:#edc483;background:linear-gradient(#60372b,#28171c);}
.arena-section .arena-grid {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 60px) / 7);
  grid-template-columns:none;
  grid-template-rows:1fr;
  gap:10px;
  min-height:0;
  padding:4px 4px 8px;
  margin:-4px -4px 0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  scroll-padding-inline:4px;
  scrollbar-width:thin;
  scrollbar-color:#a47b49 #180e15;
}
.arena-section .stage-card {
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  scroll-snap-align:start;
}
.arena-section .stage-card:focus-visible {outline-color:#ffe4ae;outline-offset:2px;}
.arena-section .stage-thumb {display:block;width:100%;aspect-ratio:16/9;flex:none;}
.arena-section .stage-info {
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
  gap:5px;
  min-height:62px;
  padding:8px 9px;
  text-align:left;
}
.arena-section .stage-info b {font:600 21px/1.05 var(--arcade);letter-spacing:.3px;}
.arena-section .stage-info small {display:block;font-size:10px;line-height:1.25;margin:0;}
.arena-section .stage-selected {top:5px;left:5px;font-size:8px;padding:3px 5px;}
.combat-tips {padding:4px 0;border-top:1px solid #73523860;border-bottom:1px solid #73523860;}
.combat-tips p {margin:10px 0;}
.combat-tips b {color:#ecd2a4;font-weight:600;}

@media(max-width:1050px) {
  .arena-section .arena-grid {grid-auto-columns:180px;}
}
@media(max-width:780px) {
  .arena-section {gap:10px;padding:8px 0 10px;}
  .arena-section .arena-grid {grid-auto-columns:160px;gap:8px;}
  .arena-rail-header h2 {font-size:18px;letter-spacing:.6px;}
  .arena-rail-header p {display:none;}
  #arena-position {font-size:19px;margin-right:0;}
  .arena-browse-controls {gap:5px;}
  .arena-section .stage-info {min-height:55px;padding:8px;}
  .arena-section .stage-info b {font-size:20px;}
}
@media(max-height:540px) {
  .arena-section {gap:6px;padding:3px 0 6px;}
  .arena-rail-header {min-height:32px;}
  .arena-rail-header h2 {font-size:17px;}
  .arena-rail-header p {display:none;}
  .arena-browse-controls button {height:30px;width:36px;font-size:11px;}
  #arena-position {font-size:18px;}
  .arena-section .arena-grid {grid-auto-columns:180px;gap:7px;padding-bottom:5px;}
  .arena-section .stage-thumb {aspect-ratio:3.2;}
  .arena-section .stage-info {min-height:41px;padding:5px 8px;}
  .arena-section .stage-info b {font-size:18px;}
  .arena-section .stage-info small {display:none;}
  .arena-copy h2 {display:block;font-size:25px;margin:5px 0;}
}
@media(max-height:540px) and (max-width:600px) {
  .arena-section .arena-grid {grid-auto-columns:150px;}
  .arena-copy h2 {font-size:23px;}
}
@media(prefers-reduced-motion:reduce) {
  .arena-section .arena-grid {scroll-behavior:auto;}
}

/* HUD dimensions follow the arena, including windows constrained by height. */
.playing .screen {--arena-unit:9.6px;}
.playing .hud {
  top:calc(3 * var(--arena-unit));left:calc(4 * var(--arena-unit));right:calc(4 * var(--arena-unit));
  grid-template-columns:minmax(0,1fr) calc(9 * var(--arena-unit)) minmax(0,1fr);gap:calc(1.4 * var(--arena-unit));
}
.playing .fighter-label {font-size:calc(2.8 * var(--arena-unit));line-height:1;gap:calc(.7 * var(--arena-unit));letter-spacing:calc(.08 * var(--arena-unit));}
.playing .fighter-label>b {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.playing .fighter-label>span {font-size:calc(.9 * var(--arena-unit));line-height:1;padding:calc(.26 * var(--arena-unit)) calc(.38 * var(--arena-unit));letter-spacing:calc(.05 * var(--arena-unit));}
.playing .round-dots {gap:calc(.65 * var(--arena-unit));flex-shrink:0;}
.playing .round-dot {width:calc(.8 * var(--arena-unit));height:calc(.8 * var(--arena-unit));border-width:calc(.12 * var(--arena-unit));}
.playing .health-track {height:calc(1.7 * var(--arena-unit));margin-top:calc(.65 * var(--arena-unit));border-width:calc(.18 * var(--arena-unit));}
.playing .meter-track {height:calc(.42 * var(--arena-unit));margin-top:calc(.65 * var(--arena-unit));}
.playing .fighter-hud small {font-size:calc(.9 * var(--arena-unit));line-height:1.1;margin-top:calc(.45 * var(--arena-unit));letter-spacing:calc(.08 * var(--arena-unit));}
.playing .round-clock {display:grid;gap:calc(.25 * var(--arena-unit));margin-top:0;align-content:start;}
.playing .round-clock b {font-size:calc(5.3 * var(--arena-unit));line-height:1;}
.playing .round-clock>span,.playing .round-clock small {font-size:calc(.9 * var(--arena-unit));line-height:1;letter-spacing:calc(.08 * var(--arena-unit));}