:root {
  --ink: #09070d;
  --gold: #d9a62f;
  --cream: #fff0c0;
  --purple: #6b2999;
  --green: #2db04b;
  --arcade-type-shadow:
    1px 1px 0 #08040b,
    2px 2px 0 rgba(91, 32, 107, 0.9);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 15%, #2b132c 0, #100a14 54%, #060408 100%);
  color: var(--cream);
  font-family: monospace;
  font-synthesis: none;
  font-variant-ligatures: none;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

button {
  font: inherit;
}

.fight-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 14px;
  overflow-x: hidden;
}

.game-shell {
  position: relative;
  width: min(calc(100vw - 28px), calc((100svh - 118px) * 16 / 9));
  max-width: 1920px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid #d9a62f;
  background: #100b17;
  box-shadow:
    0 0 0 3px #17111b,
    0 24px 70px rgba(0, 0, 0, 0.72),
    0 0 38px rgba(114, 40, 132, 0.32);
  isolation: isolate;
  font-family: monospace;
  font-kerning: none;
  font-variant-ligatures: none;
}

/* Fonte bitmap oficial. Cada glifo recorta o mesmo atlas RGBA e só usa
   coordenadas inteiras; não existe webfont visual nem suavização. */
.tfb-bitmap-text {
  --tfb-line-gap: 0px;
  display: inline-flex;
  flex-direction: column;
  gap: var(--tfb-line-gap);
  min-width: 0;
  color: transparent !important;
  font: 0/0 monospace !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.tfb-bitmap-line {
  display: flex;
  flex: none;
  width: 100%;
  min-width: 0;
}

.tfb-bitmap-align-left .tfb-bitmap-line { justify-content: flex-start; }
.tfb-bitmap-align-center .tfb-bitmap-line { justify-content: center; }
.tfb-bitmap-align-right .tfb-bitmap-line { justify-content: flex-end; }

.tfb-bitmap-character {
  position: relative;
  display: inline-block;
  flex: none;
  overflow: visible;
}

.tfb-bitmap-glyph {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/*
 * Tipografia oficial da interface: a mesma linguagem 16-bit do menu inicial.
 * O seletor cobre também legendas, placas, HUDs e botões que antes herdavam
 * estilos tipográficos diferentes em cada tela.
 */
.game-shell :where(
  h1,
  h2,
  h3,
  p,
  span,
  strong,
  b,
  small,
  em,
  label,
  button,
  input,
  select,
  textarea
) {
  font-family: monospace;
  font-style: normal !important;
  font-kerning: none;
  font-variant-ligatures: none;
  text-shadow: var(--arcade-type-shadow);
  text-transform: uppercase;
}

.game-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  border: 0;
  background: #000;
}

.fight-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* o buffer pode ser menor que a tela: deixar o navegador filtrar a subida
     e mais bonito e mais barato que 'pixelated' em arte renderizada */
  image-rendering: auto;
  touch-action: none;
}

.arcade-screen {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  color: #fff2c7;
  background:
    linear-gradient(rgba(11, 5, 16, 0.88), rgba(11, 5, 16, 0.96)),
    radial-gradient(circle at 50% 38%, rgba(113, 44, 143, 0.62), transparent 42%);
}

.arcade-screen::before,
.arcade-screen::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.arcade-screen::before {
  inset: 0;
  opacity: 0.36;
  background:
    linear-gradient(115deg, transparent 0 49%, rgba(255, 198, 58, 0.08) 49.2% 50%, transparent 50.2%),
    repeating-linear-gradient(135deg, transparent 0 72px, rgba(122, 40, 145, 0.12) 73px 75px);
}

.arcade-screen::after {
  inset: 1.6%;
  border: 2px solid rgba(227, 174, 54, 0.42);
  clip-path: polygon(2% 0, 98% 0, 100% 4%, 100% 96%, 98% 100%, 2% 100%, 0 96%, 0 4%);
}

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.17;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, 0.55) 4px
  );
}

.start-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 43%, rgba(95, 28, 119, 0.72), transparent 34%),
    linear-gradient(rgba(7, 4, 10, 0.78), rgba(4, 2, 6, 0.96)),
    url("./public/assets/stage/layers/03_bg_hillside.webp") center / cover;
}

.start-screen > *:not(.scanlines) {
  position: relative;
  z-index: 2;
}

.start-logo {
  width: min(64%, 880px);
  filter:
    drop-shadow(0 14px 0 rgba(14, 4, 16, 0.92))
    drop-shadow(0 0 34px rgba(220, 156, 35, 0.38));
  image-rendering: auto;
}

.arcade-kicker {
  margin: 2% 0 5%;
  color: #e6c065;
  font: 800 clamp(11px, 1.15vw, 20px) monospace;
  letter-spacing: 0.22em;
  text-shadow: 0 3px #050307;
}

.press-start {
  padding: 0.65em 1.5em;
  color: #fff7d8;
  font-size: clamp(20px, 2.5vw, 47px);
  letter-spacing: 0.09em;
  text-align: center;
  text-shadow:
    0 4px 0 #26082e,
    0 0 20px rgba(255, 225, 128, 0.52);
  animation: press-start-blink 1.05s steps(2, end) infinite;
}

.start-help,
.build-label,
.menu-hint {
  color: #b9aebb;
  font: 700 clamp(8px, 0.78vw, 13px) monospace;
  letter-spacing: 0.15em;
}

.build-label {
  position: absolute !important;
  right: 3.5%;
  bottom: 3.5%;
  color: #806e82;
}

@keyframes press-start-blink {
  0%,
  62% {
    opacity: 1;
  }
  63%,
  100% {
    opacity: 0.34;
  }
}

.menu-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.5% 7% 4%;
  background:
    linear-gradient(90deg, rgba(13, 7, 18, 0.98), rgba(31, 10, 39, 0.9), rgba(13, 7, 18, 0.98)),
    url("./public/assets/stage/layers/04_bg_neighborhood_mid.webp") center / cover;
}

.menu-screen > *,
.select-screen > * {
  position: relative;
  z-index: 2;
}

.menu-logo {
  width: min(35%, 470px);
  margin-bottom: 1%;
  filter: drop-shadow(0 8px 0 #080409);
}

.menu-screen h1,
.select-header h1 {
  margin: 0;
  color: #ffe8a1;
  font-size: clamp(25px, 3vw, 58px);
  font-style: italic;
  letter-spacing: 0.045em;
  text-align: center;
  text-shadow:
    0 5px #17081c,
    3px 0 #8a316d;
}

.menu-subtitle {
  margin: 0.5% 0 3%;
  color: #bdafbc;
  font: 700 clamp(9px, 0.86vw, 15px) monospace;
  letter-spacing: 0.13em;
}

.mode-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3%;
  width: min(82%, 1160px);
}

.mode-cards button {
  position: relative;
  min-height: clamp(150px, 20vw, 310px);
  padding: 7% 8%;
  overflow: hidden;
  border: 3px solid #62476a;
  clip-path: polygon(6% 0, 94% 0, 100% 12%, 100% 88%, 94% 100%, 6% 100%, 0 88%, 0 12%);
  color: #d6c8d4;
  background:
    linear-gradient(140deg, rgba(109, 37, 135, 0.34), transparent 42%),
    #100d15;
  box-shadow: inset 0 0 0 4px #09060d;
  cursor: pointer;
  text-align: left;
  transition:
    transform 130ms ease,
    border-color 130ms ease,
    filter 130ms ease;
}

.mode-cards button::after {
  content: "";
  position: absolute;
  inset: auto -12% -38% 22%;
  height: 68%;
  rotate: -9deg;
  background: linear-gradient(90deg, transparent, rgba(219, 169, 50, 0.2));
}

.mode-cards button.active,
.mode-cards button:hover,
.mode-cards button:focus-visible {
  z-index: 2;
  border-color: #efbd45;
  color: #fff1bd;
  outline: none;
  filter: brightness(1.15);
  transform: translateY(-7px) scale(1.015);
  box-shadow:
    inset 0 0 0 4px #0a070d,
    0 12px 0 #5f3c10,
    0 0 28px rgba(225, 174, 52, 0.23);
}

.mode-number {
  display: block;
  color: #945dad;
  font-size: clamp(28px, 4.5vw, 76px);
  line-height: 0.8;
  opacity: 0.66;
}

.mode-cards strong {
  display: block;
  margin: 5% 0 4%;
  font-size: clamp(18px, 2vw, 36px);
  line-height: 1.05;
  letter-spacing: 0.035em;
}

.mode-cards small {
  display: block;
  max-width: 85%;
  color: #ab9faf;
  font: 700 clamp(9px, 0.8vw, 14px)/1.35 monospace;
  letter-spacing: 0.06em;
}

.menu-hint {
  margin-top: auto;
  padding-top: 1.4%;
}

.screen-back {
  position: absolute !important;
  top: 3.6%;
  left: 3.2%;
  z-index: 20 !important;
  padding: 0.55em 1em;
  border: 1px solid rgba(235, 187, 71, 0.6);
  color: #ead9ad;
  background: rgba(8, 6, 12, 0.78);
  cursor: pointer;
  font-size: clamp(9px, 0.92vw, 16px);
  letter-spacing: 0.08em;
}

.screen-back:hover,
.screen-back:focus-visible {
  border-color: #ffe292;
  color: #fff5d2;
  outline: none;
}

.select-screen {
  padding: 2.2% 3.2% 2.5%;
  background:
    linear-gradient(rgba(17, 6, 25, 0.92), rgba(7, 4, 11, 0.97)),
    url("./public/assets/stage/layers/04_bg_neighborhood_mid.webp") center / cover;
}

.select-header {
  height: 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2%;
  border-bottom: 2px solid rgba(221, 168, 53, 0.52);
}

.select-header img {
  width: 16%;
  max-height: 90%;
  object-fit: contain;
}

.select-header > div {
  text-align: left;
}

.select-header span {
  color: #a46cc0;
  font: 800 clamp(8px, 0.78vw, 13px) monospace;
  letter-spacing: 0.2em;
}

.select-header h1 {
  font-size: clamp(20px, 2.45vw, 44px);
  text-align: left;
}

.select-header p {
  margin: 0.2em 0 0;
  color: #e5c76c;
  font: 800 clamp(8px, 0.8vw, 14px) monospace;
  letter-spacing: 0.12em;
}

.fighter-layout {
  height: 78%;
  display: grid;
  grid-template-columns: minmax(180px, 24%) minmax(450px, 52%) minmax(180px, 24%);
  align-items: stretch;
  gap: 1.4%;
  padding-top: 1.6%;
}

.fighter-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: 4% 5%;
  overflow: hidden;
  border: 2px solid rgba(224, 173, 59, 0.42);
  background:
    radial-gradient(circle at 50% 55%, rgba(114, 46, 137, 0.3), transparent 48%),
    rgba(8, 6, 12, 0.76);
}

.fighter-showcase::before {
  content: "";
  position: absolute;
  inset: 6%;
  border: 1px solid rgba(255, 224, 143, 0.15);
}

.fighter-showcase img {
  position: absolute;
  z-index: 1;
  top: 3%;
  width: 145%;
  height: 80%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 14px 8px rgba(0, 0, 0, 0.72));
}

.p2-showcase img {
  transform: scaleX(-1);
}

.fighter-showcase strong,
.fighter-showcase small,
.fighter-showcase em,
.player-tag {
  position: relative;
  z-index: 2;
}

.fighter-showcase strong {
  color: #ffe69a;
  font-size: clamp(19px, 2.1vw, 38px);
  font-style: italic;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 4px #0a050d;
}

.fighter-showcase small {
  color: #c8bac6;
  font: 800 clamp(8px, 0.75vw, 13px) monospace;
  letter-spacing: 0.08em;
  text-align: center;
}

.fighter-showcase em {
  margin-top: 0.45em;
  color: #a36fc2;
  font-size: clamp(9px, 0.9vw, 15px);
  font-style: normal;
  letter-spacing: 0.1em;
}

.player-tag {
  position: absolute;
  top: 4%;
  left: 5%;
  padding: 0.45em 0.8em;
  color: #130a16;
  background: #e3b23f;
  font: 900 clamp(9px, 0.9vw, 15px) monospace;
  letter-spacing: 0.08em;
}

.p2-showcase .player-tag {
  right: 5%;
  left: auto;
  color: #fff0c5;
  background: #7d3498;
}

.roster-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.roster-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 1.2%;
}

.roster-slot {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 2px solid #423148;
  color: #c8bbc9;
  background: #100d14;
  cursor: pointer;
}

.roster-slot.unlocked {
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--fighter-accent) 38%, #120d16), #08070a);
}

.roster-slot img {
  position: absolute;
  inset: -19% -10% 10%;
  width: 120%;
  height: 120%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 3px rgba(0, 0, 0, 0.75));
}

.roster-slot > span:not(.lock-glyph) {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 0.45em 0.2em;
  color: #fff0c3;
  background: rgba(6, 4, 8, 0.9);
  font-size: clamp(8px, 0.8vw, 14px);
  letter-spacing: 0.05em;
  text-align: center;
}

.roster-slot.cursor {
  z-index: 3;
  border-color: #ffe178;
  outline: 3px solid #7d369b;
  outline-offset: -6px;
  box-shadow: 0 0 20px rgba(240, 194, 76, 0.45);
  filter: brightness(1.16);
}

.roster-slot.chosen-p1::after,
.roster-slot.chosen-p2::after {
  position: absolute;
  z-index: 4;
  top: 3%;
  padding: 0.3em 0.5em;
  color: white;
  font: 900 clamp(9px, 0.9vw, 15px) monospace;
}

.roster-slot.chosen-p1::after {
  content: "J1";
  left: 3%;
  background: #cc342f;
}

.roster-slot.chosen-p2::after {
  content: "J2";
  right: 3%;
  background: #2f69ca;
}

.roster-slot.unavailable {
  filter: grayscale(0.8) brightness(0.6);
  cursor: not-allowed;
}

.roster-slot.locked,
.stage-slot.locked {
  border-color: #302a34;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 8px, transparent 8px 16px),
    #0c0a0e;
  cursor: not-allowed;
  opacity: 0.8;
}

.lock-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25%;
  aspect-ratio: 0.82;
  translate: -50% -40%;
  border: 2px solid #786d7b;
  border-radius: 12% 12% 18% 18%;
  background: #211d24;
  box-shadow: inset 0 0 0 2px #0a080b;
}

.lock-glyph::before {
  content: "";
  position: absolute;
  left: 17%;
  bottom: 73%;
  width: 66%;
  height: 58%;
  border: 3px solid #786d7b;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.roster-slot.locked small {
  position: absolute;
  right: 0;
  bottom: 7%;
  left: 0;
  color: #756b77;
  font: 800 clamp(6px, 0.6vw, 10px) monospace;
  letter-spacing: 0.08em;
}

.roster-status {
  display: flex;
  justify-content: space-between;
  padding: 1.2% 1%;
  color: #867889;
  font: 700 clamp(7px, 0.65vw, 11px) monospace;
  letter-spacing: 0.08em;
}

.stage-layout {
  height: 78%;
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 2%;
  padding-top: 1.6%;
}

.brazil-panel {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  padding: 3%;
  border: 2px solid rgba(219, 171, 57, 0.43);
  background:
    radial-gradient(circle, rgba(61, 119, 85, 0.16), transparent 55%),
    rgba(7, 7, 11, 0.76);
}

.brazil-map {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
}

.brazil-map::before,
.brazil-map::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(89, 207, 128, 0.17);
  border-radius: 50%;
}

.brazil-map::before {
  width: 72%;
  aspect-ratio: 1;
}

.brazil-map::after {
  width: 49%;
  aspect-ratio: 1;
}

.brazil-map-shape {
  position: relative;
  z-index: 2;
  width: 72%;
  aspect-ratio: 0.84;
  clip-path: polygon(
    28% 3%, 53% 0, 69% 8%, 88% 10%, 97% 23%, 89% 37%, 80% 44%,
    75% 59%, 66% 70%, 59% 84%, 47% 100%, 38% 86%, 34% 69%, 23% 58%,
    17% 43%, 4% 32%, 9% 17%
  );
  background:
    radial-gradient(circle at 59% 66%, #f3c53f 0 2%, transparent 3%),
    linear-gradient(145deg, #4cbf64, #177642 70%, #0d4b32);
  box-shadow: 0 0 45px rgba(55, 212, 105, 0.28);
}

.brazil-map-shape::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 45%, rgba(255, 230, 127, 0.14) 46% 47%, transparent 48%),
    repeating-linear-gradient(12deg, transparent 0 17px, rgba(255, 255, 255, 0.035) 18px 19px);
}

.map-grid {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, #b5ffd0 35px),
    repeating-linear-gradient(0deg, transparent 0 34px, #b5ffd0 35px);
}

.state-pin {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(21px, 3.1vw, 42px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 2px solid #776d79;
  border-radius: 50%;
  color: #aaa0ad;
  background: #18141c;
  font: 900 clamp(7px, 0.62vw, 11px) monospace;
  cursor: not-allowed;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
}

.state-pin.available {
  border-color: #fff3af;
  color: #fff6cd;
  background: #d92932;
  cursor: pointer;
  box-shadow:
    0 0 0 7px rgba(225, 47, 55, 0.18),
    0 0 22px #ffcc62;
  animation: map-pulse 1.3s ease-out infinite;
}

.state-pin.cursor {
  outline: 3px solid #62a8ff;
  outline-offset: 3px;
  filter: brightness(1.3);
}

.state-pin.locked::after {
  content: "";
  position: absolute;
  width: 32%;
  height: 32%;
  border: 1px solid #aaa0ad;
  border-radius: 1px;
  background: #26212a;
}

.state-pin.locked::before {
  content: "";
  position: absolute;
  bottom: 52%;
  width: 24%;
  height: 22%;
  border: 1px solid #aaa0ad;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.state-pin.locked span {
  opacity: 0;
}

.map-radar {
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(70, 220, 127, 0.16);
  border-radius: 50%;
}

@keyframes map-pulse {
  50% {
    box-shadow:
      0 0 0 16px rgba(225, 47, 55, 0),
      0 0 28px #ffcc62;
  }
}

.stage-current {
  padding: 3.5%;
  border-top: 2px solid rgba(230, 180, 60, 0.38);
  background: rgba(9, 6, 12, 0.82);
}

.stage-current span {
  display: block;
  color: #69d886;
  font: 800 clamp(7px, 0.67vw, 12px) monospace;
  letter-spacing: 0.15em;
}

.stage-current strong {
  display: block;
  margin: 0.25em 0;
  color: #ffe191;
  font-size: clamp(20px, 2vw, 36px);
  font-style: italic;
}

.stage-current small {
  color: #b5a9b8;
  font: 700 clamp(7px, 0.7vw, 12px) monospace;
  letter-spacing: 0.08em;
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 1.5%;
  min-width: 0;
}

.stage-slot {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 2px solid #433448;
  color: #d4c5d2;
  background: #0d0b10;
  cursor: pointer;
}

.stage-slot.cursor {
  z-index: 3;
  border-color: #ffe17d;
  outline: 3px solid #783896;
  outline-offset: -6px;
  box-shadow: 0 0 20px rgba(232, 181, 59, 0.38);
}

.stage-thumb {
  position: absolute;
  inset: 0 0 31%;
  background:
    linear-gradient(transparent, rgba(8, 5, 9, 0.2)),
    url("./public/assets/stage/layers/05_bg_facades_near.webp") center / cover;
}

.state-flag {
  position: absolute;
  z-index: 3;
  top: 7%;
  left: 7%;
  display: grid;
  place-items: center;
  width: 30%;
  aspect-ratio: 1.45;
  border: 1px solid rgba(255, 238, 176, 0.62);
  color: #fff8df;
  background:
    linear-gradient(135deg, #158243 0 36%, #e6bd2f 37% 63%, #235ba0 64%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.58);
  font: 900 clamp(7px, 0.65vw, 11px) monospace;
  text-shadow: 0 1px 2px #000;
}

.stage-slot.locked .state-flag {
  filter: grayscale(0.78) brightness(0.52);
}

.flag-ce {
  color: #183d87;
  background:
    radial-gradient(circle, #fff 0 18%, transparent 19%),
    linear-gradient(145deg, transparent 33%, #f1c72e 34% 66%, transparent 67%),
    #168347;
}

.stage-slot strong,
.stage-slot small {
  position: absolute;
  right: 3%;
  bottom: 11%;
  left: 3%;
  z-index: 2;
  text-align: center;
}

.stage-slot strong {
  color: #ffe5a0;
  font-size: clamp(8px, 0.78vw, 14px);
}

.stage-slot small {
  bottom: 3%;
  color: #69d68a;
  font: 800 clamp(6px, 0.57vw, 10px) monospace;
  letter-spacing: 0.1em;
}

.stage-slot.locked .lock-glyph {
  width: 18%;
  translate: -50% -42%;
}

.stage-slot.locked strong {
  color: #756d78;
}

.stage-slot.locked small {
  color: #655d67;
}

.result-card,
.pause-card {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1.4vw, 20px);
  padding: 5%;
  background:
    radial-gradient(circle, rgba(31, 16, 38, 0.72), rgba(3, 2, 6, 0.93)),
    linear-gradient(120deg, rgba(37, 167, 65, 0.08), rgba(104, 36, 154, 0.14));
  backdrop-filter: blur(5px);
}

.pause-card {
  background:
    radial-gradient(circle, rgba(31, 16, 38, 0.62), rgba(3, 2, 6, 0.9)),
    linear-gradient(120deg, rgba(37, 167, 65, 0.06), rgba(104, 36, 154, 0.13));
}

.mode-prompt {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 6%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: clamp(7px, 1vw, 14px);
  width: min(92%, 720px);
  padding: clamp(10px, 1.3vw, 18px) clamp(14px, 1.8vw, 26px);
  border: 2px solid rgba(217, 166, 47, 0.88);
  clip-path: polygon(3% 0, 97% 0, 100% 18%, 100% 82%, 97% 100%, 3% 100%, 0 82%, 0 18%);
  background: rgba(9, 7, 13, 0.88);
  box-shadow:
    inset 0 0 24px rgba(104, 36, 154, 0.25),
    0 10px 35px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

.mode-prompt > p {
  margin: 0;
  color: #fff2c9;
  font: 900 clamp(13px, 1.45vw, 22px) monospace;
  letter-spacing: 0.13em;
  text-shadow: 0 4px #09050c;
}

.mode-actions {
  display: flex;
  gap: clamp(12px, 2.4vw, 34px);
}

.mode-actions button,
.result-card button,
.pause-card button {
  min-width: clamp(145px, 15vw, 225px);
  padding: clamp(8px, 0.8vw, 13px) clamp(12px, 1.5vw, 22px);
  border: 3px solid var(--gold);
  clip-path: polygon(7% 0, 93% 0, 100% 24%, 100% 76%, 93% 100%, 7% 100%, 0 76%, 0 24%);
  color: #fff2c4;
  background:
    linear-gradient(135deg, rgba(47, 176, 74, 0.24), transparent 37%),
    linear-gradient(315deg, rgba(109, 41, 154, 0.31), transparent 42%),
    #101016;
  box-shadow:
    inset 0 0 0 2px #09070c,
    0 6px 0 #6f4910;
  cursor: pointer;
  font-size: clamp(17px, 1.55vw, 26px);
  letter-spacing: 0.06em;
  text-shadow: 0 3px #070509;
  transition:
    transform 120ms ease,
    filter 120ms ease;
}

.mode-actions button:hover,
.mode-actions button:focus-visible,
.result-card button:hover,
.result-card button:focus-visible,
.result-card button.active,
.pause-card button:hover,
.pause-card button:focus-visible,
.pause-card button.active {
  transform: translateY(-3px);
  border-color: #fff0a3;
  filter: brightness(1.25);
  outline: none;
  box-shadow:
    inset 0 0 0 2px #09070c,
    0 6px 0 #6f4910,
    0 0 24px rgba(245, 188, 55, 0.58);
}

.mode-actions button:active,
.result-card button:active,
.pause-card button:active {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 2px #09070c;
}

.mode-actions button:disabled {
  filter: grayscale(0.65);
  cursor: wait;
  opacity: 0.64;
}

.mode-actions small {
  display: block;
  margin-top: 5px;
  color: #d4c7b1;
  font: 700 clamp(9px, 0.8vw, 13px) monospace;
  letter-spacing: 0;
  text-shadow: none;
}

.ready-dot {
  color: #ad9f93;
  font: 800 clamp(9px, 0.85vw, 13px) monospace;
  letter-spacing: 0.16em;
}

.ready-dot::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  border-radius: 50%;
  background: #d39d31;
  box-shadow: 0 0 12px currentColor;
}

.ready-dot[data-ready="true"] {
  color: #63e47d;
}

.utility-controls {
  position: absolute;
  z-index: 7;
  right: 1.1%;
  top: 18%;
  display: flex;
  gap: 7px;
}

.utility-controls button {
  display: grid;
  place-items: center;
  width: clamp(29px, 3vw, 52px);
  aspect-ratio: 1;
  border: 2px solid #d7a338;
  border-radius: 50%;
  color: #ffe9a4;
  background: rgba(12, 9, 16, 0.8);
  cursor: pointer;
  font-size: clamp(13px, 1.4vw, 24px);
  box-shadow: 0 3px 0 #4d3313;
}

.result-card strong,
.pause-card strong {
  color: #ffe495;
  font-size: clamp(40px, 7vw, 110px);
  letter-spacing: 0.04em;
  text-shadow:
    -4px -4px 0 #130a16,
    4px 4px 0 #6d2b91,
    0 12px 26px #000;
}

.pause-card strong {
  font-size: clamp(44px, 8vw, 126px);
}

.result-card .ghost,
.pause-card .ghost {
  border-color: #6d5274;
  box-shadow: 0 5px 0 #332337;
  color: #d7c9da;
  font-size: clamp(14px, 1.4vw, 24px);
}

.fight-menu-kicker {
  color: #d9ac42;
  font: 900 clamp(10px, 1.05vw, 18px) monospace;
  letter-spacing: 0.2em;
  text-shadow: 0 3px #050307;
}

.result-card small,
.pause-card small {
  margin-top: clamp(4px, 0.7vw, 10px);
  color: #b7abb8;
  font: 800 clamp(8px, 0.75vw, 13px) monospace;
  letter-spacing: 0.11em;
  text-align: center;
}

.control-legend {
  width: min(calc(100vw - 28px), 1280px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px 18px;
  color: #bdb0bd;
  font: 600 11px/1.35 monospace;
  text-align: center;
  overflow: hidden;
}

.control-legend > .tfb-bitmap-text {
  max-width: 100%;
}

.control-legend b {
  color: #e6b94d;
  letter-spacing: 0.08em;
}

.touch-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  touch-action: none;
}

.touch-layer button {
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  color: #ffe6a4;
  background: rgba(12, 10, 17, 0.68);
  border: 2px solid rgba(226, 177, 62, 0.92);
  box-shadow:
    inset 0 0 12px rgba(111, 42, 151, 0.35),
    0 3px 0 rgba(20, 10, 22, 0.8);
  text-shadow: 0 2px #000;
}

.touch-layer button:active {
  background: rgba(60, 27, 70, 0.88);
  transform: scale(0.94);
}

.touch-layer .mobile-pause-control {
  display: none;
  position: absolute;
  top: 2.2%;
  right: 2.2%;
  width: clamp(34px, 7vw, 58px);
  aspect-ratio: 1;
  border-radius: 0;
  color: #ffe069;
  background:
    url("./public/assets/ui/mobile_controls/button_pause.png") center / contain no-repeat,
    #100b12;
  border: 0;
  box-shadow: none;
  font: 900 clamp(11px, 2.5vw, 20px)/1 monospace;
  image-rendering: pixelated;
}

.touch-attacks {
  position: absolute;
  right: 2.2%;
  bottom: 5%;
  width: 29%;
  aspect-ratio: 1.35;
}

.touch-attacks button {
  position: absolute;
  width: 23%;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: clamp(10px, 2.2vw, 28px);
}

.touch-attacks .lp { left: 3%; top: 27%; color: #5cf07a; }
.touch-attacks .hp { left: 30%; top: 7%; color: #5cf07a; }
.touch-attacks .lk { left: 27%; top: 59%; color: #d777ef; }
.touch-attacks .hk { left: 56%; top: 39%; color: #d777ef; }
.touch-attacks .sp { right: 0; top: 8%; color: #ffd75d; }
.touch-attacks .bl { right: 0; bottom: 0; color: #7ee8ff; }
.touch-attacks .su {
  left: 3%;
  bottom: -8%;
  width: 29%;
  color: #fff0a8;
  font-size: clamp(8px, 1.45vw, 18px);
}

.asset-error { position: absolute; inset: 20% 12%; z-index: 100; padding: 24px; display: grid; place-content: center; gap: 16px; background: #120917; border: 3px solid #ffca50; color: #fff; font: 16px/1.5 sans-serif; text-align: center; }
.asset-error button { min-height: 44px; padding: 12px 20px; background: #ffca50; color: #16081f; cursor: pointer; }

/* ALPHA 0.6 — layouts finais dos packs de interface */

.start-screen {
  background:
    radial-gradient(circle at 50% 38%, rgba(45, 12, 54, 0.28), transparent 38%),
    #020203;
}

.start-screen .arcade-kicker {
  display: none;
}

.start-screen .start-logo {
  width: 59%;
  max-height: 61%;
  object-fit: contain;
  margin-bottom: 1.8%;
}

.start-screen .press-start {
  padding: 0.25em 1em;
  color: #fff1c1;
  font-size: clamp(18px, 2.05vw, 39px);
}

.start-screen .start-help {
  margin-top: 0.8%;
}

.arcade-main-menu {
  justify-content: flex-start;
  padding: 3.2% 8% 3%;
  background:
    radial-gradient(circle at 50% 42%, rgba(52, 17, 61, 0.2), transparent 42%),
    #020203;
}

.arcade-main-menu .menu-logo {
  width: 55%;
  max-width: none;
  max-height: 61%;
  object-fit: contain;
  margin: -2% 0 0;
}

.arcade-menu-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.3vw, 23px);
  width: 48%;
  margin-top: -1%;
}

.arcade-menu-option {
  position: relative;
  width: 100%;
  padding: 0.12em 0.3em 0.12em 2.35em;
  border: 0;
  color: #bdb3bd;
  background: transparent;
  cursor: pointer;
  font-size: clamp(18px, 2vw, 38px);
  line-height: 1.05;
  letter-spacing: 0.055em;
  text-align: left;
  text-shadow:
    3px 3px 0 #2b1233,
    -1px -1px 0 #070509;
}

.arcade-menu-option:hover,
.arcade-menu-option:focus-visible,
.arcade-menu-option.active {
  color: #ffd765;
  outline: none;
}

.menu-crown {
  position: absolute;
  left: 0.45em;
  top: 50%;
  translate: 0 -50%;
  color: #f7b926;
  font-size: 0.82em;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(247, 185, 38, 0.65));
}

.arcade-menu-option.active .menu-crown {
  opacity: 1;
}

.arcade-menu-hint {
  margin-top: auto;
  padding-top: 0;
}

.approved-fighter-select,
.approved-stage-select {
  padding: 0;
  background:
    linear-gradient(rgba(3, 5, 7, 0.27), rgba(2, 3, 5, 0.58)),
    url("./public/assets/stage/layers/04_bg_neighborhood_mid.webp") center / cover;
}

.approved-fighter-select::after,
.approved-stage-select::after {
  inset: 1.2%;
  border-color: rgba(224, 169, 43, 0.75);
}

.approved-fighter-select .screen-back,
.approved-stage-select .screen-back {
  top: 2.4%;
  left: 2%;
}

.fighter-select-title {
  position: absolute !important;
  z-index: 12 !important;
  top: 1.1%;
  left: 20%;
  width: 60%;
  text-align: center;
}

.fighter-select-title h1 {
  margin: 0;
  color: #e5ad35;
  font-size: clamp(25px, 3.45vw, 66px);
  letter-spacing: 0.07em;
  text-shadow:
    0 5px 0 #1a0e09,
    0 0 16px rgba(236, 178, 51, 0.38);
}

.fighter-select-title p {
  margin: -0.1em 0 0;
  color: #ffe09a;
  font: 900 clamp(8px, 0.83vw, 15px) monospace;
  letter-spacing: 0.16em;
}

.approved-select-stage {
  position: absolute !important;
  z-index: 3 !important;
  inset: 7% 1.2% 0;
}

.fighter-hero {
  position: absolute;
  top: 0;
  bottom: 7%;
  width: 31%;
  overflow: hidden;
}

.fighter-hero-left {
  left: 0;
}

.fighter-hero-right {
  right: 0;
}

.fighter-hero > img {
  position: absolute;
  top: -2%;
  width: 125%;
  height: 82%;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 15px 5px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 16px rgba(229, 177, 59, 0.12));
}

.fighter-hero-left > img {
  left: -11%;
}

.fighter-hero-right > img {
  right: -11%;
  transform: scaleX(-1);
}

.fighter-nameplate {
  position: absolute;
  z-index: 5;
  bottom: 2.5%;
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-width: 86%;
  padding: 0.7em 1em;
  border: 3px solid currentColor;
  clip-path: polygon(4% 0, 96% 0, 100% 18%, 100% 82%, 96% 100%, 4% 100%, 0 82%, 0 18%);
  color: #4b9cff;
  background: rgba(5, 7, 12, 0.93);
  box-shadow:
    inset 0 0 0 3px #0c0d13,
    0 0 18px currentColor;
}

.fighter-hero-left .fighter-nameplate {
  left: 2%;
}

.fighter-hero-right .fighter-nameplate {
  right: 2%;
  justify-content: flex-end;
  color: #ff423c;
}

.fighter-nameplate span {
  font-size: clamp(17px, 2.1vw, 39px);
}

.fighter-nameplate strong {
  color: #f4eee1;
  font-size: clamp(15px, 1.65vw, 31px);
  letter-spacing: 0.035em;
}

.fighter-map-center {
  position: absolute;
  z-index: 2;
  top: 4%;
  left: 29%;
  width: 42%;
  height: 55%;
}

.select-map-outline,
.stage-map-shape {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    28% 3%, 53% 0, 69% 8%, 88% 10%, 97% 23%, 89% 37%, 80% 44%,
    75% 59%, 66% 70%, 59% 84%, 47% 100%, 38% 86%, 34% 69%, 23% 58%,
    17% 43%, 4% 32%, 9% 17%
  );
  background:
    radial-gradient(circle at 53% 55%, rgba(220, 164, 35, 0.22), transparent 48%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 6px),
    #111317;
  filter:
    drop-shadow(0 0 2px #ffc438)
    drop-shadow(0 0 11px rgba(244, 178, 33, 0.72));
}

.select-map-outline::before,
.stage-map-shape::before {
  content: "";
  position: absolute;
  inset: 2%;
  background: radial-gradient(circle, #d59a20 0 1.2px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.45;
}

.origin-dot {
  position: absolute;
  z-index: 3;
  width: clamp(8px, 1.4vw, 22px);
  aspect-ratio: 1;
  border: 3px solid #fff3b0;
  border-radius: 50%;
  background: #f3b923;
  box-shadow: 0 0 13px #f3b923;
}

.origin-label {
  position: absolute;
  z-index: 3;
  color: #e9b93c;
  font: 900 clamp(7px, 0.74vw, 13px) monospace;
  white-space: nowrap;
}

.origin-dot.fortaleza { left: 73%; top: 22%; }
.origin-dot.brasilia { left: 57%; top: 53%; }
.origin-dot.belford { left: 64%; top: 69%; }
.fortaleza-label { left: 78%; top: 21%; }
.brasilia-label { left: 62%; top: 52%; }
.belford-label { left: 69%; top: 68%; }

.approved-roster-grid {
  position: absolute !important;
  z-index: 10 !important;
  left: 21%;
  bottom: 3.2%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 0.35%;
  width: 58%;
  height: 42%;
}

.approved-roster-slot {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 2px solid #5c4219;
  color: #d8a93b;
  background: rgba(8, 10, 12, 0.94);
  cursor: pointer;
}

.approved-roster-slot.unlocked {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--fighter-accent) 31%, #111319), #090a0d 72%);
}

.approved-roster-slot > img {
  position: absolute;
  inset: 4% 4% 15%;
  width: 92%;
  height: 81%;
  object-fit: contain;
  object-position: center top;
  image-rendering: pixelated;
}

.fight-loading {
  position: absolute;
  inset: 0;
  z-index: 38;
  display: grid;
  place-content: center;
  gap: clamp(7px, 1vw, 14px);
  color: #ffd447;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    #050409;
  font-family: monospace;
  text-align: center;
}

.fight-loading-logo {
  justify-self: center;
  width: clamp(180px, 32vw, 480px);
  aspect-ratio: 8 / 5;
  background: url("./public/assets/ui/selection_logo_sprite.png") 0 0 / 400% 100% no-repeat;
  image-rendering: pixelated;
  animation: selection-logo-pulse 680ms steps(1, end) infinite;
}
.fight-loading strong {
  font: 900 clamp(14px, 2.3vw, 34px)/1 monospace;
  letter-spacing: .08em;
  text-shadow: 3px 3px 0 #5c1d64;
}
.fight-loading span { color: #d4c59e; font-size: clamp(7px, .82vw, 12px); letter-spacing: .12em; }
.fight-loading-bar {
  justify-self: center;
  width: clamp(190px, 32vw, 460px);
  height: clamp(10px, 1.2vw, 16px);
  padding: 3px;
  border: 3px solid #f3ddb0;
  background: #110d16;
  box-shadow: 3px 3px 0 #421c4d;
}
.fight-loading-bar > i {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #f2c436 0 13px, #8bd32f 13px 25px, #231829 25px 29px);
  animation: fight-loading-fill 1.8s steps(12, end) infinite;
}
@keyframes fight-loading-fill { 0% { width: 4%; } 88%, 100% { width: 100%; } }
@keyframes selection-logo-pulse {
  0%, 24.99% { background-position: 0 0; }
  25%, 49.99% { background-position: 33.333% 0; }
  50%, 74.99% { background-position: 66.666% 0; }
  75%, 100% { background-position: 100% 0; }
}

.approved-roster-slot > span:not(.lock-glyph) {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.35em 0.1em;
  color: #f4e8c5;
  background: rgba(2, 3, 5, 0.9);
  font-size: clamp(6px, 0.62vw, 11px);
  text-align: center;
}

.approved-roster-slot.locked {
  cursor: not-allowed;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 7px, transparent 7px 14px),
    rgba(9, 10, 12, 0.97);
}

.approved-roster-slot .lock-glyph {
  width: 27%;
  border-color: #9a6f22;
  background: #2d210f;
}

.approved-roster-slot .lock-glyph::before {
  border-color: #9a6f22;
}

.approved-roster-slot.cursor {
  z-index: 4;
  border-color: #fff0a1;
  outline: 3px solid #318cff;
  outline-offset: -5px;
  filter: brightness(1.17);
  box-shadow: 0 0 18px rgba(53, 145, 255, 0.78);
}

.approved-roster-slot.chosen-p2,
.approved-roster-slot.cursor.chosen-p2 {
  outline-color: #ff403d;
  box-shadow: 0 0 18px rgba(255, 64, 61, 0.75);
}

.approved-roster-status {
  position: absolute !important;
  z-index: 11 !important;
  right: 21%;
  bottom: 0.9%;
  left: 21%;
  display: flex;
  justify-content: space-between;
  color: #a69687;
  font: 700 clamp(6px, 0.54vw, 10px) monospace;
  letter-spacing: 0.08em;
}

.stage-select-title {
  top: 1.5%;
}

.approved-stage-map {
  position: absolute !important;
  z-index: 3 !important;
  top: 10%;
  left: 29%;
  width: 42%;
  height: 58%;
}

.approved-stage-map .stage-map-shape {
  inset: 0 8% 16%;
}

.approved-stage-info {
  position: absolute;
  z-index: 6;
  right: 12%;
  bottom: 0;
  left: 12%;
  padding: 1.5% 4%;
  border: 2px solid rgba(226, 170, 42, 0.72);
  color: #d8a839;
  background: rgba(5, 7, 9, 0.92);
  text-align: center;
}

.approved-stage-info span,
.approved-stage-info small {
  display: block;
  font: 800 clamp(6px, 0.58vw, 11px) monospace;
  letter-spacing: 0.12em;
}

.approved-stage-info strong {
  display: block;
  color: #ffdf80;
  font-size: clamp(14px, 1.55vw, 29px);
}

.approved-stage-grid {
  position: absolute !important;
  z-index: 8 !important;
  left: 10%;
  bottom: 4.5%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.55%;
  width: 80%;
  height: 27%;
}

.approved-stage-slot {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 2px solid #604617;
  color: #d7a838;
  background: rgba(7, 9, 11, 0.94);
  cursor: pointer;
}

.approved-stage-slot.locked {
  cursor: not-allowed;
  filter: saturate(0.45) brightness(0.72);
}

.approved-stage-slot.cursor {
  z-index: 4;
  border-color: #fff0a2;
  outline: 3px solid #3a91ff;
  outline-offset: -5px;
  filter: brightness(1.2);
  box-shadow: 0 0 15px rgba(54, 146, 255, 0.65);
}

.approved-stage-slot .state-flag {
  top: 8%;
  left: 8%;
  width: 36%;
}

.approved-stage-slot .lock-glyph {
  top: 39%;
  width: 17%;
  border-color: #a57a29;
}

.approved-stage-slot .lock-glyph::before {
  border-color: #a57a29;
}

.approved-stage-slot strong {
  position: absolute;
  right: 4%;
  bottom: 7%;
  left: 4%;
  color: #e5d6ae;
  font-size: clamp(7px, 0.65vw, 12px);
  text-align: center;
}

.stage-status-text {
  position: absolute;
  top: 13%;
  right: 7%;
  color: #70d98b;
  font: 900 clamp(5px, 0.52vw, 9px) monospace;
}

.approved-stage-hint {
  position: absolute !important;
  z-index: 9 !important;
  right: 10%;
  bottom: 1.5%;
  left: 10%;
  color: #b8a890;
  font: 800 clamp(6px, 0.62vw, 11px) monospace;
  letter-spacing: 0.14em;
  text-align: center;
}

/* Runtime dos três packs oficiais — coordenadas virtuais 1920×1080 */

.pack-flow-page {
  min-height: 100dvh;
  padding: 0;
  gap: 0;
  background: #000;
}

.pack-flow-page .game-shell {
  width: min(100vw, calc(100dvh * 16 / 9));
  max-width: none;
  border: 0;
  background: #000;
  box-shadow: none;
}

.fight-canvas-hidden {
  visibility: hidden;
}

.fight-canvas-live {
  animation: fight-canvas-enter 420ms cubic-bezier(.2, .75, .2, 1) both;
}

.pack-screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  color: #fff;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  isolation: isolate;
  animation: pack-screen-enter 420ms cubic-bezier(.2, .75, .2, 1) both;
}

.screen-transition {
  position: absolute;
  inset: -8%;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      112deg,
      transparent 0 34%,
      rgba(247, 188, 48, 0.92) 35% 36%,
      #050308 37% 61%,
      rgba(116, 38, 137, 0.92) 62% 63%,
      transparent 64% 100%
    );
  animation: screen-transition-wipe 560ms cubic-bezier(.65, 0, .2, 1) both;
}

@keyframes pack-screen-enter {
  from {
    opacity: 0.34;
    filter: brightness(0.35);
    transform: scale(1.012);
  }
  to {
    opacity: 1;
    filter: brightness(1);
    transform: scale(1);
  }
}

@keyframes fight-canvas-enter {
  from {
    opacity: 0.1;
    filter: brightness(0.2);
  }
  to {
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes screen-transition-wipe {
  0% {
    opacity: 0;
    transform: translateX(-76%);
  }
  18% {
    opacity: 1;
  }
  52% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(76%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pack-screen,
  .fight-canvas-live,
  .screen-transition {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

.pack-screen button {
  font: inherit;
}

.pack-fill,
.pack-crt,
.pack-select-border,
.pack-stage-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pack-fill {
  z-index: 0;
  object-fit: cover;
}

.pack-crt {
  z-index: 20;
  pointer-events: none;
}

.pack-logo {
  position: absolute;
  z-index: 2;
  display: block;
  background-image: url("./public/assets/packs/title_menu/art/logo/logo_pulse_atlas.png");
  background-repeat: no-repeat;
  background-size: 400% 100%;
  animation: pack-logo-pulse 800ms steps(1, end) infinite;
}

.pack-logo-start {
  left: 24.479%;
  top: 3.241%;
  width: 51.042%;
  height: 60.185%;
}

.pack-logo-menu {
  left: 28.646%;
  top: 0.926%;
  width: 42.708%;
  height: 50.37%;
}

@keyframes pack-logo-pulse {
  0%, 24.99% { background-position: 0 0; }
  25%, 49.99% { background-position: 33.333% 0; }
  50%, 74.99% { background-position: 66.666% 0; }
  75%, 100% { background-position: 100% 0; }
}

.pack-press-start {
  position: absolute;
  z-index: 3;
  left: 30.208%;
  top: 71.296%;
  width: 39.583%;
  height: 8.519%;
  background-image: url("./public/assets/packs/title_menu/art/text/press_start_blink_atlas.png");
  background-repeat: no-repeat;
  background-size: 600% 100%;
  animation: pack-start-blink 1.2s steps(1, end) infinite;
}

@keyframes pack-start-blink {
  0%, 16.65% { background-position: 0 0; }
  16.66%, 33.32% { background-position: 20% 0; }
  33.33%, 49.99% { background-position: 40% 0; }
  50%, 66.65% { background-position: 60% 0; }
  66.66%, 83.32% { background-position: 80% 0; }
  83.33%, 100% { background-position: 100% 0; }
}

.pack-title-tagline {
  position: absolute;
  z-index: 3;
  top: 82.778%;
  left: 25%;
  width: 50%;
  color: #b4ab91;
  font: 800 clamp(8px, 1.15vw, 23px) monospace;
  letter-spacing: 0.08em;
  text-align: center;
}

.pack-menu-items {
  position: absolute;
  z-index: 5;
  inset: 0;
}

.pack-menu-items button {
  position: absolute;
  left: 31.771%;
  width: 36.458%;
  height: 7.222%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pack-menu-items button:nth-child(1) { top: 54.63%; }
.pack-menu-items button:nth-child(2) { top: 62.5%; }
.pack-menu-items button:nth-child(3) { top: 70.37%; }
.pack-menu-items button:nth-child(4) { top: 78.241%; }

.pack-menu-items button > img {
  display: block;
  width: 100%;
  height: 100%;
}

.pack-menu-cursor {
  position: absolute;
  left: -9.286%;
  top: 3.846%;
  width: 10.286%;
  height: 92.308%;
  background-image: url("./public/assets/packs/title_menu/ui/menu_cursor_crown_atlas.png");
  background-repeat: no-repeat;
  background-size: 400% 100%;
  animation: pack-menu-cursor 500ms steps(1, end) infinite;
}

@keyframes pack-menu-cursor {
  0%, 24.99% { background-position: 0 0; }
  25%, 49.99% { background-position: 33.333% 0; }
  50%, 74.99% { background-position: 66.666% 0; }
  75%, 100% { background-position: 100% 0; }
}

.pack-controls-hint {
  position: absolute;
  z-index: 4;
  left: 25.521%;
  top: 90.556%;
  width: 48.958%;
  height: 4.815%;
}

.pack-menu-overlay {
  position: absolute;
  z-index: 40;
  left: 22.396%;
  top: 23.148%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5%;
  width: 55.208%;
  height: 53.704%;
  border: 0.313vw solid #e09922;
  color: #fff1b9;
  background: rgba(0, 0, 0, 0.94);
  box-shadow: inset 0 0 3vw rgba(104, 36, 154, 0.18);
}

.pack-menu-overlay strong {
  color: #ffde67;
  font-size: clamp(23px, 3vw, 58px);
}

.pack-menu-overlay span {
  color: #b4ab91;
  font: 800 clamp(10px, 1.4vw, 28px) monospace;
}

.pack-menu-overlay button {
  min-width: 36%;
  padding: 1.2% 4%;
  border: 2px solid #e09922;
  color: #fff1b9;
  background: #120d15;
  cursor: pointer;
  font-size: clamp(12px, 1.7vw, 33px);
}

.pack-select-border,
.pack-stage-border {
  z-index: 18;
  pointer-events: none;
}

.pack-select-wall-logo {
  position: absolute;
  z-index: 2;
  left: 1.042%;
  top: 22.685%;
  width: auto;
  height: auto;
  max-width: 18%;
  max-height: 31%;
}

.pack-select-title,
.pack-stage-title {
  position: absolute;
  z-index: 7;
  left: 23.958%;
  top: 0.926%;
  width: 52.083%;
  height: 11.111%;
}

.pack-select-subtitle {
  position: absolute;
  z-index: 8;
  top: 11.9%;
  left: 30%;
  width: 40%;
  color: #fff1b9;
  font: 900 clamp(7px, 0.82vw, 16px) monospace;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 2px #000;
}

.pack-difficulty-select {
  position: absolute;
  z-index: 18;
  top: 15.4%;
  left: 35.5%;
  width: 29%;
  padding: 0.42% 0.55% 0.55%;
  border: 1px solid rgba(224, 170, 48, 0.75);
  background: rgba(4, 4, 4, 0.86);
  color: #f5d878;
  text-align: center;
  box-shadow: 0 0.25vw 0.8vw rgba(0, 0, 0, 0.65);
}

.pack-difficulty-select > span {
  display: block;
  margin-bottom: 0.28em;
  font: 900 clamp(6px, 0.58vw, 11px) monospace;
  letter-spacing: 0.14em;
}

.pack-difficulty-select > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35vw;
}

.pack-difficulty-select button {
  min-width: 0;
  padding: 0.42em 0.2em;
  border: 1px solid #755c2a;
  color: #d6c9aa;
  background: #101010;
  font: 900 clamp(6px, 0.67vw, 13px) monospace;
  cursor: pointer;
}

.pack-difficulty-select button small {
  margin-right: 0.35em;
  color: #8e836c;
  font-size: 0.72em;
}

.pack-difficulty-select button.selected {
  border-color: #ffc43d;
  color: #15100a;
  background: linear-gradient(#ffe17a, #d89520);
  box-shadow: 0 0 0.75vw rgba(255, 190, 52, 0.42);
}

.pack-difficulty-select button.selected small {
  color: #4d3511;
}

.pack-portrait {
  position: absolute;
  z-index: 5;
  top: 11.111%;
  width: 33.333%;
  height: 83.333%;
  object-fit: contain;
}

.pack-portrait-left { left: 0; }
.pack-portrait-right { right: 0; }

/* Big Fett é naturalmente mais largo e Leviano tem uma silhueta muito alta.
   A calibração individual preserva o enquadramento dos pés e impede que as
   artes invadam o mapa, a grade ou as placas de nome. */
.pack-portrait[data-fighter-id="big_fett"] {
  top: 14.5%;
  width: 30%;
  height: 79%;
}

.pack-portrait-left[data-fighter-id="big_fett"] { left: 1.2%; }
.pack-portrait-right[data-fighter-id="big_fett"] { right: 1.2%; }

.pack-portrait[data-fighter-id="leviano"] {
  top: 13.5%;
  width: 30.5%;
  height: 80%;
}

.pack-portrait-left[data-fighter-id="leviano"] { left: 1.8%; }
.pack-portrait-right[data-fighter-id="leviano"] { right: 1.8%; }

/* A expansão inteira usa o mesmo canvas 640x900. Esta moldura comum mantém
   olhos, ombros e pés na mesma régua visual dos lutadores já calibrados. */
.pack-portrait[data-fighter-id="bozo"],
.pack-portrait[data-fighter-id="tchelo"],
.pack-portrait[data-fighter-id="diey"],
.pack-portrait[data-fighter-id="deesik"],
.pack-portrait[data-fighter-id="the_boy"],
.pack-portrait[data-fighter-id="tz_da_coronel"],
.pack-portrait[data-fighter-id="derek"],
.pack-portrait[data-fighter-id="nana_panyin"],
.pack-portrait[data-fighter-id="nana_kakra"],
.pack-portrait[data-fighter-id="mc_igu"],
.pack-portrait[data-fighter-id="paulin_shawty"],
.pack-portrait[data-fighter-id="belladona"] {
  top: 13.5%;
  width: 30.5%;
  height: 80.5%;
}

.pack-portrait-left[data-fighter-id="bozo"],
.pack-portrait-left[data-fighter-id="tchelo"],
.pack-portrait-left[data-fighter-id="diey"],
.pack-portrait-left[data-fighter-id="deesik"],
.pack-portrait-left[data-fighter-id="the_boy"],
.pack-portrait-left[data-fighter-id="tz_da_coronel"],
.pack-portrait-left[data-fighter-id="derek"],
.pack-portrait-left[data-fighter-id="nana_panyin"],
.pack-portrait-left[data-fighter-id="nana_kakra"],
.pack-portrait-left[data-fighter-id="mc_igu"],
.pack-portrait-left[data-fighter-id="paulin_shawty"],
.pack-portrait-left[data-fighter-id="belladona"] { left: 1.5%; }

.pack-portrait-right[data-fighter-id="bozo"],
.pack-portrait-right[data-fighter-id="tchelo"],
.pack-portrait-right[data-fighter-id="diey"],
.pack-portrait-right[data-fighter-id="deesik"],
.pack-portrait-right[data-fighter-id="the_boy"],
.pack-portrait-right[data-fighter-id="tz_da_coronel"],
.pack-portrait-right[data-fighter-id="derek"],
.pack-portrait-right[data-fighter-id="nana_panyin"],
.pack-portrait-right[data-fighter-id="nana_kakra"],
.pack-portrait-right[data-fighter-id="mc_igu"],
.pack-portrait-right[data-fighter-id="paulin_shawty"],
.pack-portrait-right[data-fighter-id="belladona"] { right: 1.5%; }

.pack-portrait[data-fighter-id="paulin_shawty"] {
  top: 15%;
  width: 29.5%;
  height: 78.5%;
}

.pack-portrait[data-fighter-id="bozo"] {
  width: 29.5%;
}

.pack-character-grid {
  position: absolute;
  z-index: 12;
  left: 20%;
  top: 52.5%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);
  width: 60%;
  height: 42%;
}

.pack-character-grid > button {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pack-character-grid > button.locked {
  cursor: not-allowed;
}

.pack-slot-base,
.pack-slot-locked,
.pack-character-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pack-character-icon {
  inset: 7%;
  width: 86%;
  height: 86%;
  object-fit: contain;
  object-position: center top;
}

.pack-character-grid > button[data-fighter-id="big_fett"] .pack-character-icon {
  inset: 10%;
  width: 80%;
  height: 80%;
}

.pack-character-grid > button[data-fighter-id="leviano"] .pack-character-icon {
  inset: 8%;
  width: 84%;
  height: 84%;
}

.pack-character-grid > button[data-fighter-id="bozo"] .pack-character-icon {
  inset: 10%;
  width: 80%;
  height: 80%;
}

.pack-character-cursor,
.pack-fixed-cursor {
  position: absolute;
  z-index: 5;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 400% 100%;
  pointer-events: none;
  animation: pack-slot-cursor 520ms steps(1, end) infinite;
}

.pack-character-cursor.blue,
.pack-fixed-cursor.blue {
  background-image: url("./public/assets/packs/character_select/ui/cursor_1j_blue.png");
}

.pack-character-cursor.red,
.pack-fixed-cursor.red {
  background-image: url("./public/assets/packs/character_select/ui/cursor_2j_red.png");
}

@keyframes pack-slot-cursor {
  0%, 24.99% { background-position: 0 0; }
  25%, 49.99% { background-position: 33.333% 0; }
  50%, 74.99% { background-position: 66.666% 0; }
  75%, 100% { background-position: 100% 0; }
}

.pack-lock-atlas {
  position: absolute;
  z-index: 3;
  left: 16.667%;
  top: 16.667%;
  width: 66.667%;
  height: 66.667%;
  background-image: url("./public/assets/packs/character_select/ui/lock_animation.png");
  background-repeat: no-repeat;
  background-size: 400% 100%;
  animation: pack-slot-cursor 900ms steps(1, end) infinite;
}

.pack-nameplate {
  position: absolute;
  z-index: 14;
  top: 88.519%;
  width: 25%;
  height: 9.63%;
}

.pack-nameplate-left { left: 1.042%; }
.pack-nameplate-right { left: 73.958%; }

.pack-name {
  position: absolute;
  z-index: 15;
  top: 91.75%;
  display: flex;
  align-items: center;
  gap: 1.3vw;
  width: 22%;
  color: #f2eee4;
  font: 900 clamp(12px, 1.68vw, 32px) monospace;
  white-space: nowrap;
  text-shadow: 0 3px #000;
}

.pack-name b {
  font-size: 1.05em;
}

.pack-name-left { left: 2.7%; }
.pack-name-left b { color: #eaf2ff; }
.pack-name-right {
  right: 2.7%;
  justify-content: flex-end;
}
.pack-name-right b { color: #fff0ed; }

.pack-cpu-badge {
  position: absolute;
  z-index: 16;
  right: 2.9%;
  top: 84.3%;
  width: 5.833%;
  height: 4.074%;
}

.pack-back-button {
  position: absolute;
  z-index: 25;
  top: 3.2%;
  left: 3.1%;
  padding: 0.45em 0.75em;
  border: 1px solid #d29d2b;
  color: #eadab5;
  background: rgba(5, 7, 8, 0.82);
  cursor: pointer;
  font-size: clamp(7px, 0.75vw, 14px);
}

.pack-stage-map {
  position: absolute;
  z-index: 3;
  left: 26.042%;
  top: 10.648%;
  width: 47.917%;
  height: 60.185%;
}

.pack-stage-preview-frame {
  position: absolute;
  z-index: 6;
  left: 1.25%;
  top: 17.13%;
  width: 29.167%;
  height: 31.481%;
}

.pack-stage-preview {
  position: absolute;
  z-index: 5;
  left: 2.24%;
  top: 19.074%;
  width: 23.958%;
  height: 24.074%;
  object-fit: cover;
}

.pack-stage-preview-state,
.pack-stage-preview-name {
  position: absolute;
  z-index: 7;
  left: 2.2%;
  width: 25%;
  text-align: center;
  text-shadow: 0 3px #000;
}

.pack-stage-preview-state {
  top: 49%;
  color: #ffdc6a;
  font: 900 clamp(12px, 1.65vw, 32px) monospace;
}

.pack-stage-preview-name {
  top: 53.5%;
  color: #fff;
  font: 900 clamp(8px, 0.95vw, 19px) monospace;
}

.pack-stage-available {
  position: absolute;
  z-index: 7;
  left: 3.646%;
  top: 55.833%;
  width: 21.875%;
  height: 5.926%;
}

.pack-stage-info-panel {
  position: absolute;
  z-index: 6;
  left: 75.938%;
  top: 17.593%;
  width: 22.396%;
  height: 30.556%;
}

.pack-stage-route-info {
  position: absolute;
  z-index: 7;
  left: 77.3%;
  top: 21.5%;
  display: flex;
  flex-direction: column;
  width: 19.7%;
  color: #d5d0c3;
  font: 900 clamp(9px, 1.18vw, 23px) monospace;
  line-height: 1.85;
}

.pack-stage-route-info > strong {
  padding-bottom: 1.5%;
  border-bottom: 2px solid #784f12;
  color: #ffd65a;
  font-size: 1.25em;
  text-align: center;
}

.pack-stage-route-info .available {
  color: #47e477;
}

.pack-stage-route-info small {
  margin-top: 4%;
  padding-top: 4%;
  border-top: 2px solid #784f12;
  color: #308cff;
  font-size: 0.75em;
  line-height: 1.8;
}

.pack-map-node {
  position: absolute;
  z-index: 9;
  width: 2.5%;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0.48;
}

.pack-map-node.selected,
.pack-map-node.available {
  opacity: 1;
}

.pack-map-node-atlas {
  position: absolute;
  inset: 0;
  background-image: url("./public/assets/packs/stage_select/ui/map_node_animation.png");
  background-repeat: no-repeat;
  background-size: 800% 100%;
  animation: pack-map-node 800ms steps(1, end) infinite;
}

@keyframes pack-map-node {
  0%, 12.49% { background-position: 0 0; }
  12.5%, 24.99% { background-position: 14.285% 0; }
  25%, 37.49% { background-position: 28.57% 0; }
  37.5%, 49.99% { background-position: 42.855% 0; }
  50%, 62.49% { background-position: 57.14% 0; }
  62.5%, 74.99% { background-position: 71.425% 0; }
  75%, 87.49% { background-position: 85.71% 0; }
  87.5%, 100% { background-position: 100% 0; }
}

.pack-map-node > b {
  position: absolute;
  z-index: 2;
  top: -32%;
  left: 50%;
  translate: -50% 0;
  color: #c9b98b;
  font: 900 clamp(5px, 0.55vw, 10px) monospace;
}

.pack-map-node.selected > b {
  color: #ffe16d;
}

.pack-stage-cards {
  position: absolute;
  z-index: 12;
  left: 3.958%;
  top: 80.37%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.452%;
  width: 92.084%;
  height: 9.259%;
}

.pack-stage-cards > button {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pack-stage-cards > button.locked {
  cursor: not-allowed;
}

.pack-state-card-base,
.pack-state-locked {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pack-state-flag {
  position: absolute;
  z-index: 2;
  left: 15.714%;
  top: 10%;
  width: 68.571%;
  height: 64%;
  object-fit: fill;
}

.pack-state-lock-atlas {
  position: absolute;
  z-index: 4;
  left: 32.857%;
  top: 26%;
  width: 34.286%;
  height: 48%;
  background-image: url("./public/assets/packs/stage_select/ui/state_lock_animation.png");
  background-repeat: no-repeat;
  background-size: 400% 100%;
  animation: pack-slot-cursor 900ms steps(1, end) infinite;
}

.pack-stage-cursor {
  position: absolute;
  z-index: 5;
  inset: 0;
  background-image: url("./public/assets/packs/stage_select/ui/state_cursor_1j_blue.png");
  background-repeat: no-repeat;
  background-size: 400% 100%;
  animation: pack-slot-cursor 520ms steps(1, end) infinite;
}

.pack-stage-cards button > b {
  position: absolute;
  z-index: 7;
  top: 88%;
  left: 0;
  width: 100%;
  color: #a99f8d;
  font: 900 clamp(5px, 0.58vw, 11px) monospace;
  text-align: center;
}

.pack-stage-cards button.unlocked > b {
  color: #fff1a0;
}

.pack-stage-footer {
  position: absolute;
  z-index: 10;
  left: 28%;
  top: 94.2%;
  width: 44%;
  color: #f0e9d7;
  font: 900 clamp(8px, 1vw, 20px) monospace;
  text-align: center;
  text-shadow: 0 3px #000;
}

@media (max-width: 900px), (max-height: 620px) {
  .fight-page {
    padding: 0;
    min-height: 100dvh;
    align-content: center;
  }

  .game-shell {
    width: 100vw;
    max-height: 100dvh;
    border-width: 1px;
  }

  .control-legend {
    display: none;
  }
}

@media (orientation: portrait) and (pointer: coarse) {
  .rotate-device-message {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: grid !important;
    place-items: center;
    padding: 24px;
    color: #ffe4a0;
    background: #09060d;
    text-align: center;
  }
}

.rotate-device-message { display: none; }

/* ---------------------------------------------------------------
   Navegação: botão de voltar + trilha do fluxo (1.7.0)
   --------------------------------------------------------------- */

.pack-back-button {
  position: absolute;
  z-index: 22;
  left: 1.6%;
  top: 2.4%;
  display: flex;
  align-items: center;
  gap: 0.7vw;
  width: 15.2%;
  min-height: 6.2%;
  padding: 0.9% 1%;
  border: 2px solid #e09922;
  border-radius: 2px;
  color: #fff1b9;
  background: linear-gradient(180deg, #241826 0%, #120d15 100%);
  box-shadow:
    inset 0 0 0 2px #3a2412,
    0 4px 0 #000,
    0 0 18px rgba(224, 153, 34, 0.18);
  cursor: pointer;
  font: 900 clamp(8px, 0.92vw, 18px) monospace;
  letter-spacing: 0.06em;
  text-align: left;
  transition:
    transform 0.09s ease,
    box-shadow 0.09s ease,
    border-color 0.09s ease;
}

.pack-back-button:hover,
.pack-back-button:focus-visible {
  border-color: #ffd65a;
  outline: none;
  transform: translateX(-2px);
  box-shadow:
    inset 0 0 0 2px #5a3a16,
    0 4px 0 #000,
    0 0 26px rgba(255, 214, 90, 0.42);
}

.pack-back-button:active {
  transform: translate(-2px, 3px);
  box-shadow:
    inset 0 0 0 2px #5a3a16,
    0 1px 0 #000;
}

.pack-back-glyph {
  flex: none;
  color: #ffd65a;
  font-size: 1.5em;
  line-height: 1;
  text-shadow: 0 2px #000;
}

.pack-back-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.25;
  overflow: hidden;
}

.pack-back-text b {
  color: #ffd65a;
  font-size: 1.05em;
  text-shadow: 0 2px #000;
}

.pack-back-text small {
  color: #b9b0a0;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pack-back-key {
  flex: none;
  align-self: flex-start;
  padding: 0.15em 0.4em;
  border: 1px solid #6b4a1c;
  border-radius: 2px;
  color: #8d7f6a;
  background: #0c080e;
  font-size: 0.68em;
}

.pack-flow-trail {
  position: absolute;
  z-index: 22;
  left: 1.6%;
  top: 9.6%;
  display: flex;
  align-items: center;
  gap: 0.45vw;
  width: 15.2%;
  font: 900 clamp(6px, 0.66vw, 13px) monospace;
  letter-spacing: 0.05em;
}

.pack-flow-step {
  display: inline-flex;
  align-items: center;
  gap: .45vw;
}

.pack-flow-trail > .pack-flow-step {
  position: relative;
  color: #6d6558;
  text-shadow: 0 2px #000;
}

.pack-flow-trail .done {
  color: #a8823a;
}

.pack-flow-trail .current {
  color: #ffd65a;
}

/* alvo de toque decente no celular */
@media (pointer: coarse) {
  .pack-back-button {
    width: 19%;
    min-height: 8%;
  }

  .pack-back-key {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Analógico virtual (1.7.2) — substitui o d-pad de setinhas
   --------------------------------------------------------------- */

.touch-stick-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42%;
  height: 62%;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* base fantasma: mostra onde o analógico está quando não há dedo */
.touch-stick-zone::after {
  content: "";
  position: absolute;
  left: 24%;
  bottom: 16%;
  width: 30%;
  aspect-ratio: 1;
  border: 2px dashed rgba(226, 177, 62, 0.3);
  border-radius: 50%;
  opacity: 0.7;
  pointer-events: none;
}

.touch-stick-base {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  border: 2px solid rgba(226, 177, 62, 0.55);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(12, 10, 17, 0.62) 0%,
    rgba(12, 10, 17, 0.28) 70%,
    rgba(12, 10, 17, 0) 100%
  );
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.12s ease;
  pointer-events: none;
  will-change: opacity;
}

.touch-stick-base.live {
  opacity: 1;
}

.touch-stick-ring {
  position: absolute;
  inset: 22%;
  border: 1px solid rgba(226, 177, 62, 0.28);
  border-radius: 50%;
}

.touch-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 214, 90, 0.95);
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    rgba(120, 84, 160, 0.95) 0%,
    rgba(38, 22, 52, 0.95) 100%
  );
  box-shadow: 0 3px 0 rgba(16, 8, 20, 0.85);
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}

/* ==================================================================
   INTERFACE SNES — elementos pequenos, bordas duras e zero vidro/blur
   ================================================================== */

.pause-card {
  padding: 0;
  background: rgba(4, 2, 9, 0.48);
  backdrop-filter: none;
}

.pause-snes-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  justify-items: center;
  align-content: start;
  gap: clamp(8px, 1vw, 15px);
  width: min(43%, 430px);
  aspect-ratio: 4 / 5;
  padding: 8.5% 6% 4%;
  background: url("./public/assets/ui/pause_snes/pause_industrial_panel.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(10px 12px 0 rgba(0, 0, 0, 0.55));
}

.pause-snes-brand {
  color: #8d35b2;
  font: 900 clamp(9px, 1.1vw, 16px)/1 monospace;
  letter-spacing: .12em;
  text-shadow: 2px 2px #070608;
}

.pause-snes-panel > strong {
  margin: 0;
  color: #eee3cb;
  font: 900 clamp(22px, 3.2vw, 44px)/1 monospace;
  letter-spacing: 0.12em;
  text-shadow: 4px 4px 0 #111, 0 0 8px #7c28a0;
}

.pause-snes-panel > button,
.pause-snes-panel > button.ghost {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  width: 82%;
  min-width: 0;
  height: clamp(32px, 4vw, 48px);
  padding: 0;
  border: 0;
  clip-path: none;
  color: #efe3bd;
  background: url("./public/assets/ui/pause_snes/pause_industrial_buttons.png") 0 0 / 100% 200% no-repeat;
  box-shadow: none;
  font: 900 clamp(10px, 1.25vw, 17px)/1 monospace;
  letter-spacing: 0.04em;
  text-shadow: 2px 2px 0 #120b11;
  image-rendering: pixelated;
  transform: none;
  filter: none;
}

.pause-snes-panel > button:hover,
.pause-snes-panel > button:focus-visible,
.pause-snes-panel > button.active {
  border: 0;
  outline: none;
  background-position: 0 100%;
  box-shadow: none;
  transform: none;
  filter: none;
  color: #fff4bc;
}

.pause-snes-panel > button:active {
  translate: 2px 3px;
  box-shadow: none;
}

.pause-snes-panel > button i {
  color: #ffd45e;
  font-style: normal;
}

.pause-snes-panel > small,
.pause-snes-panel > .pause-snes-help {
  align-self: end;
  margin: 0 0 8%;
  color: #d8cdb8;
  font: 900 clamp(7px, 0.68vw, 10px)/1.75 monospace;
  letter-spacing: 0.02em;
  text-shadow: 2px 2px 0 #090809;
}

@media (max-width: 900px), (pointer: coarse) {
  .touch-layer .mobile-pause-control {
    display: block;
  }
}

/* Selecao: os retratos continuam sendo arte; molduras, placas e travas viram
   pixels/CSS para nao carregar os antigos HUDs grandes. */
.pack-select-border,
.pack-stage-border {
  inset: 1.1%;
  width: auto;
  height: auto;
  border: 3px solid #dba72c;
  box-shadow: inset 0 0 0 3px #0c080d;
  background: transparent;
}

.pack-select-title,
.pack-stage-title {
  display: grid;
  place-items: center;
  margin: 0;
  height: 7.4%;
  border: 0;
  color: #ffd158;
  background: rgba(5, 4, 8, 0.82);
  font: 900 clamp(14px, 2vw, 38px)/1 monospace;
  letter-spacing: 0.1em;
  text-shadow: 3px 3px 0 #38132f;
}

/* Selecao de arena em carrossel: somente os tres cenarios jogaveis entram
   na navegacao. O sprite de setas tem quatro celulas reais (L/L+/R/R+). */
.pack-stage-carousel {
  position: absolute;
  z-index: 8;
  inset: 14% 8% 13%;
  display: grid;
  grid-template-columns: 12% minmax(0, 1fr) 12%;
  align-items: center;
  gap: 2.2%;
}

.pack-stage-current {
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 5px solid #d59b28;
  color: #fff;
  background: #07070a;
  box-shadow: 0 0 0 4px #120d07, 0 12px 0 rgba(0, 0, 0, .46);
  cursor: pointer;
  image-rendering: pixelated;
}

.pack-stage-current::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(transparent 58%, rgba(2, 2, 5, .92) 100%);
  box-shadow: inset 0 0 0 3px #2e1e0b;
}

.pack-stage-current:hover,
.pack-stage-current:focus-visible {
  border-color: #ffe369;
  outline: 0;
}

.pack-stage-carousel-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.pack-stage-carousel-copy {
  position: absolute;
  z-index: 2;
  inset: auto 4% 4%;
  display: grid;
  gap: .35em;
  text-align: center;
  text-shadow: 3px 3px 0 #000;
}

.pack-stage-carousel-copy small {
  color: #ffd45a;
  font: 900 clamp(8px, 1vw, 19px)/1 monospace;
}

.pack-stage-carousel-copy strong {
  color: #fff7dc;
  font: 900 clamp(13px, 1.8vw, 35px)/1.05 monospace;
  letter-spacing: .04em;
}

.pack-stage-carousel-copy b {
  color: #61e37d;
  font: 900 clamp(7px, .78vw, 15px)/1 monospace;
}

.pack-stage-arrow {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: url("./public/assets/ui/stage_carousel_arrows.png") 0 0 / 400% 100% no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
  filter: drop-shadow(0 7px 0 rgba(0,0,0,.55));
}

.pack-stage-arrow-left { background-position: 0 0; }
.pack-stage-arrow-left:hover,
.pack-stage-arrow-left:focus-visible,
.pack-stage-arrow-left:active { background-position: 33.333% 0; outline: 0; }
.pack-stage-arrow-right { background-position: 66.666% 0; }
.pack-stage-arrow-right:hover,
.pack-stage-arrow-right:focus-visible,
.pack-stage-arrow-right:active { background-position: 100% 0; outline: 0; }

.pack-stage-carousel + .pack-stage-footer {
  left: 17%;
  top: 91.5%;
  width: 66%;
  color: #ffe18b;
  font-size: clamp(6px, .72vw, 14px);
}

.pack-character-grid > button {
  margin: 2px;
  overflow: hidden;
  border: 3px solid #b57b20;
  background: #0b0b0d;
  box-shadow: inset 0 0 0 2px #3a2a12;
}

.pack-character-grid > button.unlocked:hover,
.pack-character-grid > button.unlocked:focus-visible {
  border-color: #ffe066;
  outline: 0;
}

.pack-character-grid > button.locked {
  border-color: #59451d;
  background: repeating-linear-gradient(135deg, #0a0a0b 0 7px, #17130e 7px 14px);
}

.pack-pixel-lock {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 38%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: url("./public/assets/packs/character_select/ui/selection_lock_atlas.png") 0 0 / 400% 100% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(3px 4px 0 #080607);
  animation: pack-lock-idle 1.15s steps(1, end) infinite;
}

.pack-character-grid > button.locked:hover .pack-pixel-lock,
.pack-character-grid > button.locked:focus-visible .pack-pixel-lock {
  animation: pack-lock-alert .42s steps(1, end) infinite;
}

@keyframes pack-lock-idle {
  0%, 54% { background-position: 0 0; }
  55%, 84% { background-position: 33.333% 0; }
  85%, 94% { background-position: 66.666% 0; }
  95%, 100% { background-position: 100% 0; }
}

@keyframes pack-lock-alert {
  0%, 34% { background-position: 66.666% 0; }
  35%, 69% { background-position: 0 0; }
  70%, 100% { background-position: 100% 0; }
}

.pack-name {
  top: 91.4%;
  width: 20.5%;
  height: 5.4%;
  padding: 0 .85%;
  gap: .5vw;
  border: 2px solid #eee8d6;
  background: #08090d;
  box-shadow: 4px 4px 0 #080509;
  font: 900 clamp(7px, .94vw, 17px)/1 monospace;
  text-shadow: 2px 2px 0 #2a1530;
}

.pack-name-left {
  left: 1.5%;
  border-left: 5px solid #176cff;
}

.pack-name-right {
  right: 1.5%;
  border-right: 5px solid #e52c34;
}

.pack-name b { color: #ffd65a !important; }

.pack-back-button {
  left: 2%;
  top: 2.6%;
  display: grid;
  grid-template-columns: auto auto auto;
  width: auto;
  min-height: 0;
  padding: 0.42em 0.6em;
  gap: 0.55em;
  border: 0;
  border-radius: 0;
  color: #fff0c4;
  background: #09080d;
  box-shadow: 3px 3px 0 #4f2d14;
  font: 900 clamp(7px, 0.78vw, 14px)/1 monospace;
}

.pack-back-button:hover,
.pack-back-button:focus-visible {
  border: 0;
  color: #ffd65a;
  background: #221521;
  box-shadow: 3px 3px 0 #d29326;
  transform: none;
}

.pack-back-button > b { color: #ffd65a; }
.pack-back-button > small { color: #d6c391; font-size: 0.62em; }
.pack-back-destination { display: none; }
.pack-back-glyph { font-size: 1em; }

.pack-flow-trail {
  left: 2%;
  top: 8.1%;
  width: auto;
  font: 900 clamp(5px, 0.58vw, 10px)/1 monospace;
}

.pack-stage-preview-frame,
.pack-stage-info-panel {
  border: 4px solid #d39b2a;
  background: rgba(7, 7, 10, 0.76);
  box-shadow: inset 0 0 0 3px #241809;
}

.pack-stage-preview {
  left: 1.75%;
  top: 18%;
  width: 28.2%;
  height: 28.8%;
}

.pack-stage-available {
  display: grid;
  place-items: center;
  color: #78e664;
  background: #080b08;
  font: 900 clamp(7px, 0.8vw, 15px)/1 monospace;
  letter-spacing: 0.1em;
}

.pack-stage-cards > button {
  overflow: hidden;
  border: 3px solid #8c641d;
  background: #09090b;
  box-shadow: inset 0 0 0 2px #231a0d;
}

.pack-stage-cards > button.unlocked:hover,
.pack-stage-cards > button.unlocked:focus-visible {
  border-color: #ffe15d;
  outline: 0;
}

.pack-stage-cards > button.locked {
  border-color: #55431d;
  filter: saturate(0.35) brightness(0.62);
}

.pack-stage-cards .pack-pixel-lock {
  width: 26%;
  height: 30%;
  border-width: 2px;
}

.pack-stage-cards .pack-pixel-lock::before { border-width: 2px; }

@media (max-width: 700px), (max-height: 520px) {
  .pause-snes-panel { width: min(35%, 290px); padding-top: 7%; gap: 5px; }
  .pause-snes-panel > small,
  .pause-snes-panel > .pause-snes-help { display: none; }
  .pause-snes-panel > button { height: 26px; }
}

/* Seleção por turnos: um lutador em destaque, ficha à direita e grade única.
   A troca J1 -> J2 remonta o componente e reutiliza o wipe global. */
.pack-turn-select::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 8.5% 1.5% 1.5%;
  background:
    linear-gradient(90deg, rgba(3, 4, 8, .18) 0 45%, rgba(3, 4, 8, .87) 59% 100%),
    linear-gradient(transparent 58%, rgba(4, 3, 7, .92) 87%);
  pointer-events: none;
}

.pack-turn-select .pack-select-title {
  left: 31%;
  top: 1.2%;
  width: 38%;
}

.pack-turn-select .pack-select-subtitle {
  top: 8.8%;
  left: 30%;
  width: 40%;
  color: #fff3bf;
}

.pack-turn-portrait {
  position: absolute;
  z-index: 5;
  left: 5.5%;
  top: 12%;
  width: 39.5%;
  height: 61%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(1.1vw .8vw .35vw rgba(0, 0, 0, .82));
}

.pack-fighter-dossier {
  position: absolute;
  z-index: 8;
  top: 14%;
  right: 4.2%;
  display: flex;
  flex-direction: column;
  gap: 1.15vh;
  width: 42%;
  min-height: 48%;
  padding: 2.2% 2.4%;
  border: 3px solid #be8525;
  color: #f6efd7;
  background: rgba(6, 7, 10, .92);
  box-shadow: inset 0 0 0 3px #30210e, .7vw .7vw 0 rgba(0, 0, 0, .48);
}

.pack-dossier-kicker,
.pack-dossier-origin,
.pack-dossier-bio,
.pack-turn-confirm {
  font-family: monospace;
}

.pack-dossier-kicker {
  color: #8ce8ff;
  font-size: clamp(6px, .68vw, 13px);
  letter-spacing: .1em;
}

.turn-2 .pack-dossier-kicker { color: #ff8d87; }

.pack-dossier-name {
  margin: .1em 0 0;
  color: #ffce4d;
  font: 900 clamp(19px, 2.25vw, 44px)/.95 monospace;
  text-shadow: 3px 3px 0 #40142f;
}

.pack-dossier-origin {
  margin: 0;
  color: #d7c9a7;
  font-size: clamp(7px, .75vw, 14px);
}

.pack-dossier-style {
  width: fit-content;
  padding: .45em .65em;
  border-left: 5px solid #e0a52d;
  color: #101012;
  background: #e8b942;
  font: 900 clamp(8px, .84vw, 16px)/1 monospace;
}

.pack-dossier-bio {
  min-height: 3.8em;
  margin: .25em 0;
  color: #eee5ce;
  font-size: clamp(8px, .86vw, 16px);
  line-height: 1.5;
}

.pack-dossier-stats { display: grid; gap: .55em; }
.pack-dossier-stats > div {
  display: grid;
  grid-template-columns: 27% 1fr;
  align-items: center;
  gap: 3%;
  font: 900 clamp(7px, .72vw, 14px)/1 monospace;
}
.pack-dossier-stats i { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.5%; }
.pack-dossier-stats b {
  display: block;
  height: clamp(6px, .65vw, 12px);
  border: 1px solid #5d4d2d;
  background: #17171c;
}
.pack-dossier-stats b.on { background: #e7ad2f; box-shadow: inset 0 -3px #a65b1c; }
.turn-2 .pack-dossier-stats b.on { background: #ef625c; box-shadow: inset 0 -3px #8d202b; }

.pack-turn-difficulty { display: flex; align-items: center; gap: .45em; }
.pack-turn-difficulty > span { margin-right: auto; font: 900 clamp(6px, .65vw, 12px)/1 monospace; }
.pack-turn-difficulty button {
  padding: .45em .65em;
  border: 2px solid #6d5527;
  color: #c9bfa8;
  background: #111117;
  font: 900 clamp(6px, .62vw, 12px)/1 monospace;
}
.pack-turn-difficulty button.selected { border-color: #ffe16a; color: #15100b; background: #e6ad35; }

.pack-turn-select .pack-character-grid {
  z-index: 12;
  left: 11.5%;
  top: 68.5%;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 77%;
  height: 25%;
}

.pack-turn-select .pack-character-grid > button { margin: 1px; }
.pack-turn-select .pack-character-grid > button.unavailable {
  filter: grayscale(1) brightness(.42);
  cursor: not-allowed;
}

.pack-turn-confirm {
  position: absolute;
  z-index: 13;
  left: 35%;
  bottom: 1.7%;
  width: 30%;
  color: #ffdc70;
  font-size: clamp(6px, .62vw, 12px);
  text-align: center;
  text-shadow: 2px 2px #000;
}

@media (max-width: 760px), (max-height: 560px) {
  .pack-fighter-dossier { top: 13%; gap: 3px; min-height: 49%; padding: 1.7%; }
  .pack-dossier-bio { min-height: 0; margin: 0; line-height: 1.25; }
  .pack-turn-portrait { left: 6%; top: 13%; width: 38%; height: 53%; }
  .pack-turn-select .pack-character-grid { top: 66.5%; height: 27%; }
}

/* Arcade 1.28: eight independent, multitouch-safe action targets. */
.touch-attacks { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: clamp(5px, .8vw, 12px); width: clamp(198px, 34%, 550px); aspect-ratio: auto; right: max(2.2%, env(safe-area-inset-right)); bottom: max(4%, env(safe-area-inset-bottom)); }
.touch-attacks button { position: static; width: 100%; min-width: 44px; min-height: 44px; aspect-ratio: 1; touch-action: none; user-select: none; }
.touch-attacks .su { width: 100%; }
.touch-attacks .gr { color: #ffca50; }

/* 1.29 — arcade menu layout: one stage, clear hierarchy, touch targets. */
.pack-flow-page { background: #080a0e; }
.pack-flow-page .game-shell { border: 1px solid #635539; box-shadow: 0 0 0 5px #131619, 0 25px 70px #0009; }
.tfb-opening, .tfb-mode-screen, .tfb-roster-screen, .tfb-arena-screen { background: #0a0d12; }
.pack-crt { opacity: .15; }
.tfb-opening .pack-fill { filter: brightness(.48) saturate(.7); }
.tfb-opening-shade, .tfb-mode-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg,#080b10 0%,transparent 70%),linear-gradient(90deg,#090c1288,transparent,#090c1288); pointer-events: none; }
.tfb-edition { position: absolute; z-index: 5; top: 5%; left: 4%; padding-left: 14px; border-left: 4px solid #ebbb5c; }
.tfb-opening-fighter { position: absolute; z-index: 2; top: 15%; width: 40%; height: 78%; object-fit: contain; object-position: bottom; filter: drop-shadow(8px 5px 0 #0008); }
.tfb-opening-fighter.left { left: -5%; }
.tfb-opening-fighter.right { right: -5%; }
.tfb-opening-kicker { position: absolute; z-index: 4; top: 17%; left: 20%; width: 60%; }
.tfb-opening .pack-logo-start { left: 26%; top: 20%; width: 48%; height: 48%; z-index: 4; animation: none; }
.tfb-start-cta { position: absolute; z-index: 5; left: 27%; top: 71%; width: 46%; height: 10%; display: grid; place-items: center; background: #151814ee; border: 2px solid #e8b755; box-shadow: 4px 4px 0 #0009; }
.tfb-start-cta::before { content: ''; position: absolute; left: -8px; width: 8px; height: 40%; background: #e8b755; animation: tfb-ready 1.2s steps(2,end) infinite; }
@keyframes tfb-ready { 50% { opacity: .3; } }
.tfb-opening .pack-title-tagline { top: 84%; left: 12%; width: 76%; }
.tfb-opening-footer { position: absolute; bottom: 4%; width: 100%; z-index: 5; }
.tfb-mode-screen .pack-fill { filter: brightness(.33) saturate(.55); }
.tfb-mode-shade { background: linear-gradient(90deg,#10141c99 25%,#0b1018 51%); }
.tfb-mode-screen .pack-logo-menu { top: 10%; left: 3%; width: 37%; height: 40%; animation: none; }
.tfb-mode-fighter { position: absolute; left: 5%; bottom: 0; width: 37%; height: 66%; object-fit: contain; object-position: bottom; z-index: 2; opacity: .75; }
.tfb-mode-intro { position: absolute; top: 15%; left: 47%; z-index: 6; display: flex; flex-direction: column; gap: 14px; }
.tfb-mode-screen .pack-menu-items { inset: 29% 5% 15% 47%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr .6fr; gap: 12px; }
.tfb-mode-screen .tfb-mode-choice { position: relative; inset: auto; width: auto; height: auto; display: flex; align-items: center; gap: 18px; padding: 18px; grid-column: 1/-1; border: 1px solid #39404b; border-left: 4px solid #39404b; background: #111823; text-align: left; transition: background .12s,border-color .12s; }
.tfb-mode-screen .tfb-mode-choice.selected,.tfb-mode-screen .tfb-mode-choice:hover,.tfb-mode-screen .tfb-mode-choice:focus-visible { background: #262720; border-color: #eabc62; outline: none; }
.tfb-mode-screen .tfb-mode-choice.utility { grid-column: auto; padding: 10px 16px; }
.tfb-choice-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tfb-choice-arrow { margin-left: auto; }
.tfb-choice-number { opacity: .8; align-self: flex-start; margin-top: 3px; }
.tfb-mode-choice.utility .tfb-choice-arrow { display: none; }
.tfb-menu-footer { position: absolute; bottom: 6%; left: 47%; z-index: 6; }
.pack-back-button { top: 3%; left: 3%; min-height: 36px; background: transparent; border: 0; box-shadow: none; }
.pack-flow-trail { top: 4%; right: 4%; left: auto; width: auto; }
.pack-flow-step { gap: 9px; }
.pack-menu-overlay { inset: 10% 18%; width: auto; height: auto; padding: clamp(12px, 3vh, 32px); overflow-y: auto; background: #0d131bf5; border: 2px solid #d8a850; box-shadow: 0 0 0 100vmax #0009; gap: clamp(6px, 2vh, 16px); }
.pack-menu-overlay button { min-height: 48px; border: 1px solid #51564e; padding: 14px 24px; background: #202620; }
.pack-menu-overlay button:hover,.pack-menu-overlay button:focus-visible { border-color: #efc571; outline: 2px solid #efc571; }
.tfb-roster-screen .pack-fill { filter: brightness(.32) saturate(.65); }
.tfb-roster-screen::after { inset: 0; background: linear-gradient(90deg,transparent,#0a101b 44%),linear-gradient(0deg,#080b12,transparent 70%); }
.tfb-roster-screen .pack-select-border,.tfb-arena-screen .pack-stage-border { display: none; }
.tfb-roster-screen .pack-select-title { left: 4%; top: 10%; width: 32%; }
.tfb-roster-screen .pack-select-subtitle { left: 40%; top: 11%; width: 56%; }
.tfb-roster-screen .pack-turn-portrait { left: 0; top: 18%; width: 39%; height: 51%; filter: drop-shadow(8px 4px 0 #030508); }
.tfb-roster-screen .pack-fighter-dossier { left: 4%; right: auto; top: 69%; width: 31%; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; gap: 8px; }
.tfb-roster-screen .pack-dossier-kicker,.tfb-roster-screen .pack-dossier-bio { display: none; }
.tfb-roster-screen .pack-dossier-name { margin: 0; }
.tfb-roster-screen .pack-dossier-origin { margin: 0; }
.tfb-roster-screen .pack-dossier-style { padding: 0; border: 0; background: transparent; margin: 0 0 4px; }
.tfb-roster-screen .pack-dossier-stats { gap: 5px; }
.tfb-roster-screen .pack-dossier-stats > div { grid-template-columns: 90px 1fr; gap: 10px; }
.tfb-roster-screen .pack-dossier-stats b { height: 6px; border: 0; background: #303a46; box-shadow: none; }
.tfb-roster-screen .pack-dossier-stats b.on { background: #ebbc5d; }
.tfb-roster-count { position: absolute; z-index: 12; top: 19%; left: 41%; }
.tfb-roster-screen .pack-character-grid { top: 25%; left: 40%; width: 56%; height: 55%; gap: 5px; }
.tfb-roster-screen .pack-character-grid > button { margin: 0; min-width: 0; min-height: 0; aspect-ratio: auto; border: 0; background: #ffffff05; }
.tfb-roster-screen .pack-character-grid > button.unlocked:hover { background: #e7b95520; }
.tfb-roster-screen .pack-character-icon { width: 100%; height: 100%; object-fit: contain; }
.tfb-roster-screen .pack-character-grid > button.locked { background: #ffffff03; opacity: .25; }
.tfb-roster-screen .pack-character-cursor { inset: 0; border: 2px solid #eac36c; background: transparent; animation: none; box-shadow: 0 0 0 2px #0b1118,inset 0 -4px #eac36c; }
.tfb-roster-screen.turn-2 .pack-character-cursor { border-color: #ec716b; box-shadow: 0 0 0 2px #0b1118,inset 0 -4px #ec716b; }
.tfb-roster-screen .pack-fixed-cursor { border: 2px solid #60b4fa; background: none; }
.tfb-roster-screen .pack-turn-difficulty { position: absolute; left: 119.4%; top: calc((100vw - 28px) * .07); width: 180%; margin-top: -3px; gap: 8px; }
.tfb-roster-screen .pack-turn-difficulty button { min-height: 36px; flex: 1; background: #151d29; border: 1px solid #465367; padding: 6px; }
.tfb-roster-screen .pack-turn-difficulty button.selected { border-color: #eabd65; background: #373220; }
.tfb-roster-screen .pack-turn-confirm { left: 40%; bottom: 5%; width: 56%; }
.tfb-arena-screen .pack-fill { filter: brightness(.24) saturate(.6); }
.tfb-arena-screen .pack-stage-title { top: 12%; left: 4%; width: 92%; }
.tfb-arena-screen .pack-stage-carousel { left: 4%; top: 25%; width: 61%; height: 57%; padding: 0; display: block; }
.tfb-arena-screen .pack-stage-current { position: relative; inset: auto; width: 100%; height: 100%; border: 1px solid #66583b; background: #111821; box-shadow: none; padding: 0; overflow: hidden; }
.tfb-arena-screen .pack-stage-current::after { display: none; }
.tfb-arena-screen .pack-stage-carousel-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.tfb-arena-screen .pack-stage-carousel-copy { position: absolute; inset: auto 0 0; padding: 6% 4% 4%; background: linear-gradient(transparent,#060a12f5 40%); gap: 8px; }
.tfb-arena-screen .pack-stage-arrow { position: absolute; z-index: 12; top: 38%; width: 36px; height: 50px; }
.tfb-arena-screen .pack-stage-arrow-left { left: 4px; }.tfb-arena-screen .pack-stage-arrow-right { right: 4px; }
.tfb-arena-list { position: absolute; left: 68%; top: 25%; width: 28%; height: 44%; display: grid; gap: 10px; }
.tfb-arena-list button { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid #303b4c; background: #121b27; text-align: left; overflow: hidden; min-height: 44px; }
.tfb-arena-list button[aria-pressed="true"] { border-color: #e7b855; background: #272920; }
.tfb-arena-list button > img { width: 29%; aspect-ratio: 1.3; object-fit: cover; }
.tfb-arena-list button > span { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tfb-arena-confirm { position: absolute; top: 73%; left: 68%; width: 28%; height: 9%; z-index: 10; border: 2px solid #e8bb60; background: #302c1d; display: grid; place-items: center; min-height: 44px; }
.tfb-arena-confirm:hover,.tfb-arena-confirm:focus-visible { background: #4c4126; outline: 2px solid #e8bb60; }
.tfb-arena-screen .pack-stage-footer { top: auto; bottom: 8%; left: 10%; width: 80%; }
.pause-card { background: #030711b8; backdrop-filter: none; }
.pause-snes-panel { position: relative; display: grid; width: min(680px,80%); padding: 32px 28px 28px 46%; min-height: 300px; border: 2px solid #d9ae5f; background: #101720; box-shadow: 6px 6px 0 #0009; gap: 18px; }
.pause-snes-panel > button { min-height: 48px; border: 1px solid #42516a; background: #192334; padding: 12px; }
.pause-snes-panel > button.active { border-color: #eac369; background: #383221; }
.tfb-pause-match { position: absolute; left: 5%; top: 28%; width: 32%; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 12px 0; }
.pause-snes-brand { position: absolute; left: 5%; top: 9%; }
.pause-snes-help { margin: 0; }
@media(max-width:1000px),(max-height:620px) {
  .tfb-mode-screen .pack-menu-items { gap: 7px; }
  .tfb-mode-screen .tfb-mode-choice { padding: 10px; gap: 10px; }
  .tfb-choice-copy { gap: 6px; }
  .tfb-mode-intro { gap: 8px; }
  .tfb-start-cta { left: 23%; width: 54%; }
  .tfb-roster-screen .pack-fighter-dossier { top: 65%; gap: 5px; width: 34%; }
  .tfb-roster-screen .pack-dossier-stats { gap: 3px; }
  .tfb-roster-screen .pack-turn-difficulty { left: 109%; width: 166%; top: 78px; gap: 4px; }
  .tfb-roster-screen .pack-character-grid { gap: 3px; height: 53%; }
  .tfb-arena-list button > img { display: none; }
  .tfb-arena-list button { padding: 9px; }
  .pause-snes-panel { min-height: 240px; gap: 12px; padding-top: 22px; padding-bottom: 18px; }
}
@media(max-width:700px) {
  .tfb-choice-note,.tfb-opening-kicker { display: none; }
  .tfb-mode-screen .pack-menu-items { left: 39%; right: 3%; }
  .tfb-mode-intro,.tfb-menu-footer { left: 39%; }
  .tfb-choice-number { display: none; }
  .tfb-roster-screen .pack-dossier-origin { display: none; }
  .tfb-roster-screen .pack-dossier-name { transform: scale(.8); transform-origin: left; width: 125%; }
  .tfb-roster-screen .pack-turn-difficulty > .tfb-bitmap-text { display: none; }
  .tfb-arena-confirm .tfb-bitmap-text { transform: scale(.8); }
  .tfb-arena-screen .pack-stage-footer { display: none; }
}
@media(prefers-reduced-motion:reduce) { .tfb-start-cta::before,.pack-logo,.pack-character-cursor { animation: none !important; } }
.tfb-mode-screen .pack-menu-items > button.tfb-mode-choice { inset: auto; }
.pause-snes-panel { padding: 28px; grid-template-columns: 1fr 1.25fr; }
.pause-snes-panel > button,.pause-snes-panel > .tfb-bitmap-text:not(.pause-snes-brand) { grid-column: 2; }
.tfb-pause-match { position: static; grid-column: 1; grid-row: 1/5; width: auto; align-self: center; }
@media(max-width:900px),(max-height:620px) { .pack-flow-page .game-shell { width: min(100vw,calc(100svh * 16 / 9)); max-height: none; } }
.tfb-start-cta { left: 23%; width: 54%; }
.tfb-roster-screen .pack-dossier-stats > div { grid-template-columns: 42% 1fr; }
.tfb-roster-screen .pack-turn-difficulty { top: calc((100vw - 28px) * .07); }
@media(max-width:1000px),(max-height:620px) {
  .tfb-roster-screen .pack-turn-difficulty { top: 68px; }
  .tfb-mode-screen .pack-menu-items { top: 29%; bottom: 15%; }
  .tfb-mode-intro { top: 14%; }
  .tfb-roster-screen .pack-fighter-dossier { top: 69%; }
  .tfb-roster-screen .pack-dossier-style { margin: 0; }
  .tfb-roster-screen .pack-turn-confirm { bottom: 4%; }
  .tfb-roster-screen .pack-dossier-name { transform: none; width: auto; }
}
@media(max-width:1000px),(max-height:620px) { .tfb-roster-screen .pack-turn-difficulty { top: 52px; } }
.pause-snes-panel { aspect-ratio: auto; grid-template-rows: auto auto auto auto; align-content: center; min-height: 320px; max-height: 90%; }
@media(max-width:1000px),(max-height:620px) { .pause-snes-panel { min-height: 230px; width: min(680px,90%); padding: 20px; gap: 12px; } }

.tfb-power-guide{position:absolute;left:6%;bottom:5%;z-index:8;padding:8px 12px;background:#141b29;color:#f4d18b;border:1px solid #d5b46b;border-radius:4px;font:700 12px system-ui;text-decoration:none}.tfb-power-guide:focus-visible{outline:3px solid white}

/* 1.31 — classic arcade selection, two portraits and an illustrated city. */
.tfb-classic-select{container-type:inline-size;background:radial-gradient(ellipse at 50% 20%,#2029c4 0%,#0b0b88 55%,#050347 100%);border:3px solid #d3bb71;box-shadow:inset 0 0 0 3px #3d398d;color:#fff7db;font-family:"Courier New",monospace;font-weight:700}
.classic-scanlines{position:absolute;inset:0;z-index:20;pointer-events:none;background:repeating-linear-gradient(0deg,#00000012 0 1px,transparent 1px 4px);opacity:.45}
.classic-select-header{position:absolute;top:3%;left:2%;right:2%;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:12px}
.classic-select-header h1{margin:0;text-align:center;color:#ffdb70;font:900 clamp(16px,2.7cqw,45px)/1 Georgia,serif;text-shadow:2px 3px #9d361e,3px 4px #14002f;letter-spacing:.035em}
.classic-back,.classic-mode{width:17%;font:700 clamp(10px,1cqw,16px)/1.3 "Courier New",monospace;color:#e0e5ff}
.classic-back{background:transparent;border:0;padding:8px 0;text-align:left;cursor:pointer}.classic-mode{text-align:right}
.classic-world{position:absolute;left:13%;top:10%;width:74%;height:36%;pointer-events:none;overflow:hidden;mask-image:linear-gradient(#000 85%,transparent)}
.classic-world img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.classic-turn{position:absolute;z-index:5;left:25%;right:25%;top:42%;text-align:center;color:#ffed83;font-size:clamp(10px,1.05cqw,18px);text-shadow:2px 2px #020125}
.classic-fighter{position:absolute;z-index:4;top:42%;bottom:13%;width:24%;margin:0;--player-color:#5be6ff}
.classic-fighter-left{left:1.5%}.classic-fighter-right{right:1.5%;--player-color:#ff6785;text-align:right}
.classic-player-label{display:flex;align-items:center;gap:10px;line-height:1;color:var(--player-color);font-size:clamp(10px,1.2cqw,20px)}.classic-fighter-right .classic-player-label{flex-direction:row-reverse}.classic-player-label b{font-size:1.35em}.classic-player-label span{font-size:.75em;letter-spacing:.1em}
.classic-fighter h2{position:relative;z-index:3;margin:6px 0;font-size:clamp(12px,1.7cqw,28px);line-height:1.05;text-shadow:2px 2px #020021;color:#fff1b4;overflow-wrap:anywhere}
.classic-portrait-window{position:absolute;inset:16% 0 5%;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#2cb0f877,transparent 68%);mask-image:linear-gradient(#000 83%,transparent)}
.classic-fighter-right .classic-portrait-window{background:radial-gradient(ellipse at 50% 45%,#eb277677,transparent 68%)}
.classic-portrait{display:block;width:100%;height:170%;object-fit:cover;object-position:center top;image-rendering:auto;filter:drop-shadow(3px 0 #08074b) drop-shadow(-3px 0 #4d88d577);animation:classic-portrait-in 160ms ease-out both}
.classic-origin{position:absolute;bottom:0;width:100%;color:var(--player-color);font-size:clamp(9px,.9cqw,15px)}
.classic-vs{display:none}
.classic-roster{position:absolute;z-index:7;left:27%;top:47%;width:46%;height:31%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:3px}
.classic-slot{position:relative;min-width:0;min-height:0;padding:0;border:1px solid #b7b2ee;background:linear-gradient(145deg,#2778d4,#17147d 65%);border-radius:0;cursor:pointer;isolation:isolate;overflow:visible;touch-action:manipulation}
.classic-icon{display:block;width:100%;height:100%;object-fit:cover;object-position:center 15%;image-rendering:auto;pointer-events:none}
.classic-slot:hover{background:#4641bd}.classic-slot.is-selected{z-index:3;outline:3px solid #ffdf69;outline-offset:0;box-shadow:0 0 0 5px #e7772d,0 0 15px #ffe86477;background:#4e69d6}
.turn-2 .classic-slot.is-selected{outline-color:#ff718d;box-shadow:0 0 0 5px #a31762,0 0 15px #ff527977}
.classic-slot.is-chosen{box-shadow:inset 0 0 0 3px #56e6ff;background:#154761}.classic-slot.is-chosen img{opacity:.55}
.classic-slot.is-locked{background:#080747;border-color:#514c98;cursor:default}.classic-slot .pack-pixel-lock{position:absolute;left:38%;top:32%;width:25%;height:38%;opacity:.55}
.classic-cursor-label,.classic-chosen-label{position:absolute;top:-1px;left:-1px;z-index:5;background:#ffe375;color:#130859;padding:2px 3px;font-size:clamp(9px,.9cqw,15px);line-height:1}
.turn-2 .classic-cursor-label{background:#ff7190}.classic-chosen-label{left:auto;right:0;top:auto;bottom:0;background:#56e6ff}
.classic-selection-info{position:absolute;z-index:8;top:80%;left:26%;width:48%;text-align:center}.classic-selection-info h3{margin:0 0 4px;color:#ffe183;font-size:clamp(13px,1.45cqw,24px);text-shadow:2px 2px #520735}.classic-selection-info p{margin:0;color:#b4ccff;font-size:clamp(9px,.8cqw,14px)}
.classic-stats{display:flex;justify-content:center;gap:5%;margin-top:7px}.classic-stats>span{display:flex;align-items:center;gap:6px}.classic-stats small{font-size:clamp(8px,.65cqw,12px);color:#c2c9ed}.classic-stats i{display:flex;gap:2px}.classic-stats b{display:block;width:clamp(3px,.35cqw,6px);height:7px;background:#3b398b}.classic-stats b.on{background:#ffda63}
.classic-difficulty{position:absolute;bottom:7%;left:2%;z-index:9;display:flex;align-items:center;gap:4px;font-size:clamp(9px,.8cqw,14px)}.classic-difficulty button{font:inherit;color:#c3cdf9;border:1px solid #4f59ad;background:#08074c;padding:5px 7px;cursor:pointer}.classic-difficulty button[aria-pressed=true]{color:#180844;border-color:#ffe282;background:#ffe282}
.classic-select-footer{position:absolute;bottom:2%;left:2%;right:2%;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:12px}.classic-controls,.classic-roster-total{font-size:clamp(9px,.85cqw,14px);color:#a8b5ee;flex:1}.classic-roster-total{text-align:right}.classic-confirm{font:900 clamp(12px,1.1cqw,19px)/1.2 "Courier New",monospace;color:#fff0a0;background:#141171;border:1px solid #ffd46e;border-bottom:3px solid #d8903f;padding:9px 16px;cursor:pointer;letter-spacing:.025em}.classic-confirm:disabled{opacity:.5;cursor:not-allowed}.classic-confirm:hover:not(:disabled){background:#34259a}.tfb-classic-select button:focus-visible{outline:3px solid white;outline-offset:2px}
@keyframes classic-portrait-in{from{opacity:.3;translate:0 6px}to{opacity:1;translate:0 0}}
@media(max-width:600px) and (orientation:portrait){
 .screen-fighters.pack-flow-page .game-shell{width:100vw;height:max(760px,100svh);aspect-ratio:auto;max-height:none;border:0;box-shadow:none}.screen-fighters.pack-flow-page{align-content:start}
 .tfb-classic-select{border-width:2px}.classic-select-header{top:2%;left:4%;right:4%;flex-wrap:wrap;gap:13px}.classic-select-header h1{order:3;width:100%;font-size:clamp(16px,5.7cqw,22px);line-height:1.15}.classic-back,.classic-mode{width:46%;font-size:12px}.classic-world{top:12%;left:0;width:100%;height:17%}.classic-turn{top:29%;left:2%;right:2%;font-size:12px}
 .classic-fighter{top:33%;bottom:45%;width:40%}.classic-fighter-left{left:4%}.classic-fighter-right{right:4%}.classic-player-label{font-size:12px;gap:5px}.classic-player-label span{font-size:9px}.classic-fighter h2{font-size:14px;margin:5px 0}.classic-portrait-window{inset:23% 0 8%}.classic-portrait{height:180%;object-fit:cover}.classic-origin{font-size:9px}.classic-vs{display:block;position:absolute;top:43%;left:44%;width:12%;text-align:center;color:#ffdd74;font:bold italic 28px Georgia;text-shadow:2px 2px #a52938}
 .classic-roster{left:4%;width:92%;top:58%;height:25%;gap:3px}.classic-cursor-label,.classic-chosen-label{font-size:9px;padding:2px}.classic-slot.is-selected{outline-width:2px;box-shadow:0 0 0 3px #e7772d}.turn-2 .classic-slot.is-selected{box-shadow:0 0 0 3px #a31762}
 .classic-selection-info{top:84%;left:4%;width:92%}.classic-selection-info h3{font-size:17px}.classic-selection-info p{font-size:10px}.classic-stats{margin-top:5px;gap:12px}.classic-stats small{font-size:8px}.classic-stats b{width:4px;height:6px}
 .classic-difficulty{top:55%;bottom:auto;left:4%;width:92%;justify-content:center;font-size:10px}.classic-difficulty button{padding:3px 9px}
 .classic-select-footer{bottom:2%;left:4%;right:4%;justify-content:center}.classic-confirm{font-size:13px;padding:10px 13px;min-height:42px}.classic-controls,.classic-roster-total{display:none}
}
@media(max-height:520px) and (orientation:landscape){.classic-stats{display:none}.classic-select-header h1{font-size:20px}.classic-difficulty{bottom:3%}.classic-select-footer{left:30%;right:3%}.classic-controls{display:none}.classic-confirm{padding:6px 9px;font-size:11px}.classic-roster{top:46%;height:33%}.classic-turn{top:41%;font-size:10px}}
@media(prefers-reduced-motion:reduce){.classic-portrait{animation:none}.classic-scanlines{display:none}}

/* Ecos da Indústria — pixel cinema, tower and campaign controls. */
.tfb-mode-screen .pack-menu-items{grid-template-rows:1fr 1fr 1fr .6fr;top:27%;bottom:12%;gap:8px}
.tfb-mode-screen .tfb-mode-choice{padding:12px 16px;gap:12px}
.tfb-mode-screen .tfb-choice-copy{gap:5px}
.tfb-mode-screen .tfb-choice-note{display:none}
.tfb-arena-list{height:53%;overflow-y:auto;display:flex;flex-direction:column;scrollbar-color:#e7b855 #121b27;overscroll-behavior:contain}
.tfb-arena-list button{flex:0 0 auto;min-height:64px}
.screen-story.pack-flow-page .game-shell{width:min(1480px,100vw);height:100svh;max-height:none;aspect-ratio:auto;border:0;box-shadow:none}
.story-screen{position:absolute;inset:0;z-index:32;background:#090912;color:#f4f0ff;display:flex;flex-direction:column;overflow:hidden;font:16px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;--story-purple:#b48aff;--story-gold:#efd082}
.story-screen *{box-sizing:border-box}
.story-screen button{font:inherit;cursor:pointer;color:inherit;border:1px solid #50456a;background:#1c1629;padding:10px 16px;min-height:44px;touch-action:manipulation}
.story-screen button:hover,.story-screen button:focus-visible{border-color:var(--story-gold);outline:2px solid var(--story-gold);outline-offset:2px}
.story-header{display:flex;align-items:center;gap:22px;min-height:64px;padding:10px 24px;border-bottom:1px solid #383047;background:#0d0a15;z-index:3;font-size:14px;letter-spacing:1px}
.story-header button{padding:6px 12px}
.story-save-state{margin-left:auto;color:#b8accd;font-size:12px;letter-spacing:0}
.story-eyebrow{font-size:13px;color:var(--story-gold);letter-spacing:2px;font-weight:700}
.story-screen h1,.story-screen h2,.story-screen p{margin:0}
.story-screen h1{font-size:clamp(22px,3vw,42px);line-height:1.1;font-weight:900;letter-spacing:-1px;text-shadow:3px 3px #462460}
.story-select-heading{padding:24px 32px 16px;display:grid;gap:10px}
.story-select-heading p{max-width:880px;color:#c1b8d0}
.story-select-body{display:grid;grid-template-columns:26% 1fr;gap:28px;padding:0 32px;flex:1;min-height:0}
.story-hero-preview{display:flex;align-items:center;flex-direction:column;justify-content:center;border:1px solid #3d2d54;background:radial-gradient(ellipse at 50% 55%,#4b2857,transparent 65%),linear-gradient(#11111b,#161023);padding:18px;text-align:center;min-height:0}
.story-sprite{object-fit:contain;image-rendering:pixelated;filter:drop-shadow(5px 6px #0009)}
.story-hero-preview .story-sprite{height:75%;max-width:100%;min-height:0}
.story-hero-preview strong{color:var(--story-gold);font-size:20px}
.story-hero-preview span{font-size:12px;color:#c3b8d4;margin-top:8px}
.story-select-controls{display:flex;flex-direction:column;gap:12px;min-height:0}
.story-roster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;overflow:auto;flex:1;min-height:120px;padding:3px;align-content:start;scrollbar-color:#8b61b9 #16101f}
.story-roster button{padding:4px;display:flex;flex-direction:column;align-items:center;min-height:93px;background:#181322}
.story-roster button[aria-pressed=true]{background:#3c2750;border:2px solid var(--story-gold)}
.story-roster .story-sprite{width:100%;height:72px;object-fit:contain}
.story-roster button span{font-size:12px;font-weight:700;text-align:center;line-height:1.25;min-height:30px}
.story-difficulty{display:flex;gap:6px}
.story-difficulty button{flex:1;font-size:14px}
.story-difficulty button[aria-pressed=true]{background:#47315f;border-color:#c89bff}
.story-screen .story-primary{background:#f0cd7f;color:#201520;border:2px solid #ffdf9d;box-shadow:0 4px #9f7440;font-weight:900;letter-spacing:1px;min-height:48px}
.story-screen .story-secondary{border:0;background:transparent;font-size:13px;color:#c7b8de;display:block;margin-top:12px;padding:4px 0}
.story-fiction{padding:16px 32px!important;font-size:12px;color:#a99bbb}
.story-replace-note{font-size:13px;color:#edce84}
.story-replace-note button{padding:2px 8px;font-size:12px;margin-left:8px}
.story-hub-layout{display:grid;grid-template-columns:35% 65%;min-height:0;flex:1}
.story-tower-panel{padding:24px 20px 0;display:flex;flex-direction:column;gap:12px;min-height:0;border-right:1px solid #3e2d56;background:linear-gradient(#1b102d,#0e0b17)}
.story-tower-panel h1{font-size:clamp(22px,2.5vw,34px)}
.story-progress{display:flex;justify-content:space-between;font-size:12px;color:#cebddc;gap:8px}
.story-progress-track{height:4px;background:#342640;flex-shrink:0}
.story-progress-track i{height:100%;display:block;background:#d7adff}
.story-tower{overflow:auto;list-style:none;padding:6px 2px 20px;margin:0;scrollbar-color:#a77bd6 #100c19;overscroll-behavior:contain}
.story-tower li{position:relative;display:flex;gap:10px;align-items:center;padding:8px;min-height:82px;margin-bottom:6px;border:1px solid #3a2a4a;background:#18101f}
.story-tower li.locked{opacity:.58}
.story-tower li.current{border:2px solid var(--story-gold);background:#34253e;box-shadow:inset 3px 0 #f3ca76}
.story-tower li.cleared{border-color:#4d7b72;background:#142727}
.story-tower li.boss{border-color:#b176e1}
.story-tower .story-sprite{height:64px;width:56px;flex-shrink:0}
.story-tower li:not(.cleared) .story-sprite{filter:drop-shadow(0 0 5px #bb4cff) saturate(.55)}
.story-tower strong{display:block;font-size:14px;line-height:1.3}
.story-tower li div span{color:#c2aecf;font-size:11px;letter-spacing:1px}
.story-tower b{margin-left:auto;color:var(--story-gold)}
.story-step{font-size:12px;color:#b29bc2}
.story-briefing{background-position:center;background-size:cover;position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;min-height:0}
.story-briefing-top{position:relative;z-index:1;padding:20px 28px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#e8dcf5;text-shadow:1px 2px #000;background:#120e2470}
.story-versus-portraits{position:absolute;inset:8% 0 20%;display:flex;justify-content:space-around;align-items:center}
.story-versus-portraits .story-sprite{width:48%;height:100%}
.story-versus-portraits .rival{transform:scaleX(-1)}
.story-sprite.possessed{filter:drop-shadow(0 0 12px #a33bff) drop-shadow(6px 0 #a446d778) saturate(.6);animation:story-aura 1.8s steps(4) infinite}
.story-briefing-copy{position:relative;margin-top:auto;padding:24px 30px;background:linear-gradient(transparent,#0b0915 17%);z-index:2}
.story-briefing-copy h2{font-size:clamp(21px,2.5vw,34px);line-height:1.1;margin:9px 0 12px;text-shadow:2px 3px #381e4d}
.story-briefing-copy>p{color:#cebedb;font-size:14px}
.story-objectives{margin:16px 0 20px;padding:12px 14px;border-left:3px solid var(--story-purple);background:#251635e6;display:grid;gap:6px}
.story-objectives p{font-size:14px}
.story-objectives b{font-size:11px;color:#dab4ff;display:block;letter-spacing:1px}
.story-loss{padding:10px 0;color:#ffd58c!important}
.story-confirm{position:absolute;inset:0;background:#160e23f9;border:2px solid #b488dc;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:12px;z-index:4}
.story-cinema{position:relative;flex:1;min-height:0;background-position:center;background-size:cover;isolation:isolate;border-top:14px solid #000;border-bottom:14px solid #000}
.story-cinema:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#080613bd,transparent 58%),repeating-linear-gradient(0deg,#0001 0 2px,transparent 2px 5px);pointer-events:none;z-index:2}
.story-cinema-label{position:absolute;left:3%;right:3%;top:3%;display:flex;align-items:center;justify-content:space-between;z-index:5;color:#ffdda3;font-size:14px;letter-spacing:2px;text-shadow:2px 2px #000}
.story-cinema-label button{font-size:12px;background:#0c061dcc}
.story-cinema-cast{position:absolute;inset:3% 10% 24%;display:flex;align-items:end;justify-content:space-between;z-index:1}
.story-cinema-cast .story-sprite{width:46%;height:100%;object-position:bottom;animation:story-breathe 2s steps(3) infinite}
.story-cinema-cast .story-sprite:last-child{transform:scaleX(-1)}
.story-cinema-cast .dimmed{filter:brightness(.5) drop-shadow(2px 0 #000);opacity:.85}
.story-cinema-cast .speaking{filter:drop-shadow(3px 0 #f7cd86) drop-shadow(-3px 0 #f7cd86)}
.story-cinema-cast .possessed{filter:drop-shadow(0 0 20px #a73bff) saturate(.6)}
.story-dialogue{position:absolute;bottom:5%;left:6%;right:6%;z-index:4;padding:22px 26px;background:#100a1eee;border:3px solid #d1afed;box-shadow:5px 5px 0 #000, inset 0 0 0 4px #2e1e40}
.story-dialogue-header{display:flex;justify-content:space-between;margin-bottom:12px;gap:16px;color:#f5d289}
.story-dialogue-header span{font-size:12px;color:#bfa7d2}
.story-dialogue p{font-size:clamp(16px,1.6vw,22px);line-height:1.55;min-height:3.1em;max-width:980px}
.story-dialogue .story-primary{display:block;margin:16px 0 0 auto;font-size:14px;padding:8px 20px}
.story-cinema-footnote{position:absolute;bottom:1%;left:6%;z-index:4;font-size:11px;color:#c5b5d0;text-shadow:1px 2px #000}
.story-type-caret{display:inline-block;width:7px;height:1em;background:#edc985;margin-left:5px;vertical-align:text-bottom;animation:story-caret 1s steps(2) infinite}
.story-pixel-signal{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 80px,#8f3dff44 82px 87px,transparent 89px 140px);opacity:0;mix-blend-mode:screen;pointer-events:none}
.signal-on .story-pixel-signal{opacity:.65;animation:story-signal 5s steps(14) infinite}
.story-fight-mission{position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:12;display:grid;gap:2px;pointer-events:none;font:12px/1.4 ui-monospace,monospace;color:#eddaff;text-align:center;background:#170a26c9;padding:6px 14px;border-bottom:2px solid #b376e7;max-width:55%}
.story-fight-mission b{font-size:11px;color:#cfa5ff}
@keyframes story-signal{from{background-position:0 0}to{background-position:140px 0}}
@keyframes story-breathe{50%{translate:0 -4px}}
@keyframes story-aura{50%{filter:drop-shadow(0 0 20px #c477ff) drop-shadow(6px 0 #b677ff80) saturate(.6)}}
@keyframes story-caret{50%{opacity:0}}
@media(max-width:850px){
 .story-header{padding:8px 12px;gap:12px;font-size:12px;min-height:52px}.story-save-state{max-width:155px;font-size:11px}
 .story-select-heading{padding:16px 16px 12px}.story-select-heading p{font-size:14px}.story-select-body{gap:12px;padding:0 16px;grid-template-columns:23% 1fr}.story-roster{grid-template-columns:repeat(5,minmax(0,1fr))}.story-roster button span{font-size:11px}.story-roster .story-sprite{height:58px}.story-roster button{min-height:84px}.story-hero-preview{padding:8px}.story-hero-preview strong{font-size:16px}.story-hero-preview span{font-size:11px}.story-fiction{padding:12px 16px!important;font-size:11px}.story-primary{font-size:14px}
 .story-hub-layout{grid-template-columns:36% 64%}.story-tower-panel{padding:16px 10px 0}.story-tower-panel h1{font-size:22px}.story-tower .story-sprite{width:38px;height:52px}.story-tower li{gap:6px;padding:6px}.story-tower strong{font-size:12px}.story-tower li div span{font-size:10px}.story-progress{font-size:10px}.story-briefing-top{padding:16px;font-size:11px}.story-briefing-copy{padding:20px}.story-eyebrow{font-size:11px;letter-spacing:1px}.story-objectives p{font-size:13px}.story-step{display:none}
}
@media(max-width:600px) and (orientation:portrait){
 .story-screen{overflow:auto}.story-header{position:sticky;top:0;flex-wrap:wrap}.story-save-state{max-width:120px;font-size:10px}.story-select-heading h1{font-size:28px}.story-select-heading{padding-top:20px}
 .story-select-body{display:flex;flex-direction:column;flex:none}.story-hero-preview{height:120px;flex-direction:row;gap:10px;justify-content:start}.story-hero-preview .story-sprite{height:116px;width:88px}.story-hero-preview span{display:none}.story-hero-preview strong{font-size:18px}.story-select-controls{min-height:440px}.story-roster{grid-template-columns:repeat(4,minmax(0,1fr));height:310px;flex:none}.story-roster .story-sprite{height:55px}.story-roster button span{font-size:11px}.story-difficulty button{font-size:12px;padding:8px}
 .story-hub-layout{display:flex;flex-direction:column;flex:none}.story-tower-panel{height:240px;padding:16px 14px 0;border-right:0}.story-tower-panel h1{font-size:25px}.story-tower{display:flex;gap:8px;padding-bottom:10px}.story-tower li{min-width:175px;max-width:175px;height:80px}.story-tower li b{display:none}.story-progress{font-size:12px}.story-tower strong{font-size:12px}.story-briefing{min-height:530px}.story-versus-portraits{inset:5% 0 25%}.story-briefing-copy{padding:24px 20px 12px}.story-briefing-copy h2{font-size:26px}.story-objectives{margin:14px 0}.story-briefing-top{gap:8px;flex-direction:column}.story-briefing-copy .story-primary{width:100%}
 .story-cinema{flex:none;height:calc(100svh - 64px);min-height:610px}.story-cinema-cast{inset:9% 0 34%}.story-cinema-cast .story-sprite{width:50%}.story-dialogue{left:4%;right:4%;padding:18px 16px;bottom:5%}.story-dialogue p{min-height:6.2em;font-size:16px}.story-dialogue-header{font-size:14px}.story-cinema-footnote{font-size:9px;left:4%;right:4%}.story-cinema-label{letter-spacing:1px;font-size:12px}
}
@media(max-height:550px) and (orientation:landscape){
 .story-header{min-height:44px;padding:4px 12px}.story-header button{min-height:32px;font-size:11px}.story-select-heading{padding:8px 16px}.story-select-heading h1{font-size:22px}.story-select-heading p{display:none}.story-select-body{padding-bottom:4px}.story-fiction{padding:6px 16px!important;font-size:10px}.story-select-controls{gap:6px}.story-roster{grid-template-columns:repeat(7,minmax(0,1fr))}.story-difficulty button{padding:3px;min-height:30px;font-size:12px}.story-screen .story-primary{min-height:38px;padding:6px 12px;font-size:12px}.story-tower-panel{gap:6px;padding:10px 12px 0}.story-tower-panel h1{font-size:21px}.story-briefing-top{padding:8px 16px;font-size:10px}.story-briefing-copy{padding:12px 18px}.story-briefing-copy h2{font-size:21px;margin:4px 0}.story-briefing-copy>p{font-size:12px}.story-objectives{margin:8px 0;padding:7px 10px;gap:2px}.story-objectives p{font-size:11px}.story-objectives b{font-size:10px;display:inline}.story-screen .story-secondary{margin-top:6px;min-height:24px;font-size:11px}.story-cinema{border-width:5px}.story-dialogue{padding:12px 18px;left:5%;right:5%}.story-dialogue-header{margin-bottom:5px;font-size:14px}.story-dialogue p{font-size:15px;min-height:3.1em;line-height:1.3}.story-dialogue .story-primary{margin-top:6px}.story-cinema-label button{min-height:32px;font-size:11px;padding:4px 10px}.story-cinema-footnote{font-size:9px}.story-fight-mission{font-size:9px;padding:2px 8px}.story-fight-mission b{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.story-screen *{animation:none!important}}

/* 1.35 — a shared, readable arcade interface. */
.screen-mode.pack-flow-page .game-shell,.screen-stages.pack-flow-page .game-shell{width:min(1480px,100vw);height:100svh;max-height:none;aspect-ratio:auto;border:0;box-shadow:none}
.ux-screen{position:absolute;inset:0;z-index:32;display:flex;flex-direction:column;background:#0b0e16;color:#f3eee1;overflow:hidden;--ux-line:#343847;--ux-muted:#a7adbb;--ux-gold:#f0cf87}
.game-shell .ux-screen :where(h1,h2,h3,p,span,strong,b,small,button,a,kbd),.game-shell .story-screen :where(h1,h2,h3,p,span,strong,b,small,button,a){font-family:Arial,Helvetica,sans-serif;text-transform:none;text-shadow:none;font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.ux-screen button,.ux-screen a{font:inherit;cursor:pointer;touch-action:manipulation}
.ux-screen button{min-height:44px;border:1px solid var(--ux-line);background:#161b28;color:#f3eee1;padding:10px 18px;border-radius:4px}
.ux-screen button:focus-visible,.ux-screen a:focus-visible,.story-screen button:focus-visible{outline:3px solid #f0cf87;outline-offset:3px}
.ux-header{height:68px;flex-shrink:0;display:flex;align-items:center;gap:24px;padding:12px 28px;border-bottom:1px solid var(--ux-line);font-size:14px;font-weight:700;letter-spacing:1.5px;background:#0d111b}
.ux-header .ux-version,.arena-match-label{margin-left:auto;color:#a7adbb;font-size:12px;letter-spacing:1px}
.ux-screen .ux-back{background:transparent;font-size:14px;padding:8px 16px}
.ux-footer{min-height:62px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 28px;border-top:1px solid var(--ux-line);color:#adb3c0;font-size:13px;background:#0d111b}
.ux-footer kbd{display:inline-block;padding:3px 6px;margin:0 5px 0 9px;border:1px solid #4b5060;border-radius:3px;color:#ede6d4;font-size:12px;background:#202534}
.ux-screen .ux-primary,.story-screen .ux-primary{background:#f0cf87;color:#201b18;border:1px solid #ffe1a4;min-height:48px;padding:12px 26px;font-weight:800;border-radius:3px;font-size:16px;box-shadow:0 3px #927743;cursor:pointer}
.ux-screen .ux-primary:hover,.story-screen .ux-primary:hover{background:#ffe0a3}
.ux-kicker{font-size:12px!important;font-weight:800;letter-spacing:2px;text-transform:uppercase!important;color:#e9c783}
.arcade-home-body{flex:1;min-height:0;display:grid;grid-template-columns:390px 1fr}
.arcade-nav{padding:26px 28px;display:flex;flex-direction:column;border-right:1px solid var(--ux-line);overflow:auto;background:linear-gradient(145deg,#181b2b,#0e121d)}
.arcade-brand{height:135px;max-width:245px;object-fit:contain;align-self:flex-start;image-rendering:auto}
.arcade-nav h1{font-size:17px;font-weight:400;color:#b9bac7;margin:20px 0 16px}
.arcade-nav nav{display:grid;gap:8px}
.arcade-mode{display:flex;align-items:center;gap:14px;text-align:left;min-height:94px!important;background:transparent!important;border:1px solid transparent!important;padding:18px 12px!important;border-radius:3px}
.arcade-mode.is-selected{border-color:#c4a570!important;background:#2c2930!important;box-shadow:inset 3px 0 #efd083}
.arcade-mode:hover{background:#222737!important}
.arcade-mode-number{font-size:12px;color:#818594;font-family:monospace!important;align-self:flex-start;margin-top:5px}
.arcade-mode strong{font-size:22px;display:block;line-height:1.2;letter-spacing:-.5px}
.arcade-mode small{font-size:14px;color:#b5b3be;display:block;line-height:1.4;margin-top:8px}
.arcade-mode-marker{margin-left:auto;opacity:0;color:#efd083;font-size:12px}.is-selected .arcade-mode-marker{opacity:1}
.arcade-utilities{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:24px}
.arcade-utilities button{background:#151a26;font-size:14px}
.arcade-utilities button.is-selected{border-color:#efd083}
.arcade-utilities a{grid-column:1/-1;text-align:center;margin-top:10px;color:#bcc2d0;font-size:14px;padding:8px}
.arcade-feature{position:relative;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;overflow:hidden}
.arcade-feature-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;image-rendering:pixelated}
.arcade-feature-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,#090b14 0%,#090b14ee 10%,#090b1488 50%,#0a102644 100%)}
.arcade-feature-top{display:flex;justify-content:space-between;gap:18px;padding:28px 36px;font-size:11px;font-weight:800;letter-spacing:1.5px;color:#e0d8de}
.arcade-feature-copy{padding:40px;max-width:720px;animation:feature-in .22s ease-out}
.arcade-feature-copy h2{font-family:Impact,'Arial Black',sans-serif!important;font-size:clamp(36px,4.8vw,68px);font-weight:900;line-height:1.02;letter-spacing:.5px;margin:14px 0 20px;max-width:640px;text-transform:uppercase!important}
.arcade-feature-copy p{max-width:480px;font-size:17px;line-height:1.65;color:#c9c7d2;margin:0 0 28px}
.arcade-resume{max-width:440px;padding:16px 20px;background:#12182ac9;border:1px solid #4c4356;margin:0 0 24px;border-radius:4px}
.arcade-resume>div{display:flex;justify-content:space-between;font-size:13px;gap:15px;color:#c8bbd4}.arcade-resume strong{color:#f1d897}
.arcade-resume progress{width:100%;height:4px;accent-color:#cfb2ff;margin-top:12px;display:block;border:0;background:#343249}
.arcade-resume progress::-webkit-progress-bar{background:#343249}.arcade-resume progress::-webkit-progress-value{background:#cfb2ff}
@keyframes feature-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.arena-browser-body{display:grid;grid-template-columns:55% 45%;flex:1;min-height:0}
.arena-preview{position:relative;min-height:0;background:#131726;isolation:isolate;overflow:hidden}
.arena-preview>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;z-index:-2}
.arena-preview:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#080b14 0%,#0b0f1d99 25%,transparent 60%)}
.arena-preview-copy{position:absolute;bottom:90px;left:32px;right:32px}
.arena-preview-copy h1{font:900 clamp(26px,3.3vw,44px)/1.1 Impact,'Arial Black',sans-serif!important;letter-spacing:.5px;margin:12px 0;text-transform:uppercase!important;max-width:600px}
.arena-preview-copy p{color:#b4bbca;font-size:14px;margin:0}
.arena-step-controls.pack-stage-carousel{position:absolute;inset:auto 32px 25px;display:flex;gap:10px;width:auto;height:auto;transform:none;justify-content:space-between}
.arena-step-controls button{position:relative!important;inset:auto!important;min-height:44px;width:auto;height:auto;min-width:100px;font-size:14px;background:#151b2de6;border:1px solid #8990a4}
.arena-picker{padding:24px;display:flex;flex-direction:column;min-height:0;border-left:1px solid #343847}
.arena-picker-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;gap:16px}.arena-picker-heading h2{font-size:22px;margin:0}.arena-picker-heading span{font-size:13px;color:#aaaebe}
.arena-grid.tfb-arena-list{position:static;inset:auto;width:auto;height:auto;flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:12px;overflow:auto;padding:3px;scrollbar-color:#80708e #101622}
.arena-grid.tfb-arena-list button{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;border:1px solid #393e50;min-height:166px;padding:0;background:#171d2c;overflow:hidden;flex:none}
.arena-grid.tfb-arena-list button>img{display:block;width:100%;height:91px;aspect-ratio:auto;object-fit:cover;image-rendering:pixelated}
.arena-grid.tfb-arena-list button>span{padding:12px;gap:5px;display:flex;flex-direction:column;min-width:0}
.arena-grid strong{font-size:13px;line-height:1.3;color:#f0e8d8;letter-spacing:.25px}.arena-grid small{font-size:12px;color:#a9afbf;line-height:1.4}
.arena-grid.tfb-arena-list button[aria-pressed=true]{border:2px solid #efd083;background:#2c2a31}
.arena-selected-badge{position:absolute;top:8px;left:8px;padding:4px 6px;background:#f0cf87;color:#211a18;font-size:9px;letter-spacing:1px}
.arena-action .ux-primary{min-width:250px}
/* Campaign uses the same hierarchy, type, buttons and spacing as the main menu. */
.story-screen{background:#0b0e16;--story-purple:#bcb0dd;--story-gold:#f0cf87;font-family:Arial,Helvetica,sans-serif}
.story-header{height:68px;flex-shrink:0;background:#0d111b;border-color:#343847;padding:12px 28px;letter-spacing:1px}
.story-header button,.story-screen button{border-radius:3px;font-size:14px;min-height:44px}
.story-save-state{font-size:12px!important;color:#a7adbb}
.story-select-heading{padding:28px 32px 20px;gap:12px}.story-select-heading h1{font-family:Impact,'Arial Black',sans-serif!important;letter-spacing:1px;font-size:36px}.story-select-heading p{font-size:16px;line-height:1.6;color:#b6bac8}
.story-eyebrow{font-size:12px!important;color:#f0cf87;letter-spacing:1.5px;font-weight:700}
.story-roster button{background:#151b29;border-color:#373d50;min-height:112px}
.story-roster .story-sprite{height:82px}.story-roster button span{font-size:12px;line-height:1.35}
.story-roster button[aria-pressed=true]{border-color:#f0cf87;background:#2b2739;box-shadow:inset 0 -3px #f0cf87}
.story-hero-preview{background:radial-gradient(ellipse at center,#332846,#141b2c 70%);border-color:#414453}
.story-screen .story-primary{background:#f0cf87;border-color:#ffdda1;color:#211d1a;font-size:15px;font-weight:800;letter-spacing:.3px;box-shadow:0 3px #947447}
.story-difficulty button[aria-pressed=true]{background:#322c42;border-color:#bcb0dd}
.story-tower-panel{background:linear-gradient(150deg,#1d1c30,#0e141f);padding:26px 22px 0;border-color:#363b4b;gap:14px}
.story-tower-panel h1{font-family:Impact,'Arial Black',sans-serif!important;font-size:32px;letter-spacing:.8px}
.story-progress{font-size:12px;color:#b6b1c5}.story-progress-track{height:5px;background:#303243}.story-progress-track i{background:#c7b1e9}
.story-tower li{min-height:88px;border-color:#35394b;background:#151b28;border-radius:3px;padding:10px}.story-tower li.current{background:#2b2934;border-color:#f0cf87}.story-tower li.cleared{background:#17282a;border-color:#355456}.story-tower li.locked{opacity:.72}
.story-tower strong{font-size:14px;line-height:1.4}.story-tower li div span{font-size:11px;letter-spacing:.5px;display:block;margin-top:5px}
.story-route-toggle{font-size:12px!important;background:transparent!important;border:1px solid #363c50!important;padding:6px!important;min-height:34px!important;text-align:left;color:#c5c3d1!important}
.story-briefing-top{background:#10162b80;font-size:12px;padding:24px 30px;letter-spacing:.3px}
.story-briefing-copy{padding:28px 34px;background:linear-gradient(transparent,#0b0e16 18%)}.story-briefing-copy h2{font-family:Impact,'Arial Black',sans-serif!important;font-size:36px;letter-spacing:.5px;margin:12px 0 15px}.story-briefing-copy>p{font-size:15px;line-height:1.5}
.story-objectives{border-color:#b4a2d4;background:#1b2031ed;border-radius:0 4px 4px 0;padding:14px 18px;margin:20px 0}.story-objectives p{font-size:15px;line-height:1.5}.story-objectives b{font-size:11px;color:#c3bad4;margin-bottom:2px}
.story-fiction{font-size:12px;color:#9ca3b5;line-height:1.5}
/* Cutscene player: original animated illustrations, no game sprites. */
.story-scene{background:#030409}.pixel-cinema{display:flex;flex-direction:column;width:100%;height:100%;background:#060810;color:#eee8dc;overflow:auto}
.cinema-topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 28px;min-height:72px;flex-shrink:0;border-bottom:1px solid #282c38}
.cinema-topbar>div{display:grid;gap:6px}.cinema-topbar strong{font-size:15px;font-weight:400;color:#c4c6d0}.cinema-topbar button{border-color:#444754;background:transparent;min-height:40px}
.cinema-viewport{position:relative;flex:1;min-height:140px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.cinema-viewport canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.cinema-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#0b0d18;color:#c8c5d8;font-size:15px}
.cinema-loader{width:24px;height:24px;border:2px solid #595468;border-top-color:#e5c57d;animation:cinema-spin 1s linear infinite}
@keyframes cinema-spin{to{transform:rotate(360deg)}}
.cinema-caption{padding:20px 36px 12px;max-width:1180px;width:100%;align-self:center;flex-shrink:0;min-height:127px}
.cinema-speaker{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:10px}.cinema-speaker strong{font-size:13px;letter-spacing:1.2px;color:#eed394}.cinema-speaker span{font-size:11px;color:#848b9e;letter-spacing:1px}
.cinema-caption p{font-size:clamp(16px,1.5vw,21px);line-height:1.55;color:#e4e1e8;min-height:3.1em;margin:0}
.cinema-timeline{display:flex;gap:5px;max-width:1108px;width:calc(100% - 72px);margin:0 auto;flex-shrink:0}.cinema-timeline>span{height:3px;background:#282535;flex:1}.cinema-timeline i{display:block;height:100%;background:#d5b983}
.cinema-controls{display:flex;align-items:center;gap:12px;padding:16px 36px 24px;max-width:1180px;width:100%;align-self:center;flex-shrink:0}.cinema-controls button{background:transparent;border-color:#303545;color:#b1b7c8;font-size:13px}.cinema-controls .ux-primary{margin-left:auto;font-size:14px}.cinema-controls button:disabled{opacity:.5;cursor:wait}
.game-shell .asset-error{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,90%);padding:30px;gap:16px;border:1px solid #e4bd70;background:#101421;box-shadow:0 0 0 100vmax #03040a99;border-radius:6px;font-family:Arial,sans-serif;text-transform:none}
.game-shell .asset-error :where(p,h2,button){font-family:Arial,sans-serif;text-shadow:none;text-transform:none}.asset-error h2{font-size:24px;margin:0}.asset-error p{color:#c5c8d4;font-size:16px;line-height:1.6;margin:0}.asset-error button{border:0;border-radius:3px;font-weight:700}.asset-error .ghost{background:#242b3c;color:#e7e4de;border:1px solid #555c6c}
.loading-match-names,.loading-count{font-family:Arial,sans-serif!important;text-transform:none!important;text-shadow:none!important;font-size:16px;color:#d3cde1}.loading-count{font-size:13px;color:#aca5b9}
@media(max-width:1000px){
 .arcade-home-body{grid-template-columns:330px 1fr}.arcade-nav{padding:20px}.arcade-brand{height:110px}.arcade-mode{min-height:88px!important;padding:14px 10px!important;gap:10px}.arcade-mode strong{font-size:20px}.arcade-mode small{font-size:13px}.arcade-feature-copy{padding:30px}.arcade-feature-copy h2{font-size:42px}.arcade-feature-copy p{font-size:16px}.arcade-feature-top{padding:24px;flex-direction:column;gap:8px}
 .arena-browser-body{grid-template-columns:50% 50%}.arena-picker{padding:18px}.arena-grid.tfb-arena-list{gap:8px}.arena-grid.tfb-arena-list button>span{padding:9px}.arena-grid strong{font-size:12px}.arena-grid small{font-size:11px}.arena-preview-copy{left:24px;right:24px}.arena-preview-copy h1{font-size:32px}.arena-match-label{font-size:11px!important;max-width:45%;text-align:right}
 .story-header{padding:10px 18px}.story-tower-panel{padding:20px 12px 0}.story-tower-panel h1{font-size:25px}.story-briefing-copy{padding:24px}.story-briefing-copy h2{font-size:28px}.story-tower strong{font-size:13px}.story-objectives p{font-size:14px}
}
@media(max-width:700px) and (orientation:portrait){
 .ux-screen{overflow:auto}.ux-header{height:58px;padding:8px 16px;gap:14px;font-size:12px;letter-spacing:.6px;position:sticky;top:0;z-index:5}.ux-header .ux-version{font-size:10px}.ux-screen .ux-back{padding:6px 10px;min-height:38px}.ux-footer{padding:12px 16px;font-size:11px;min-height:56px}.ux-footer>span:first-child{display:none}
 .arcade-home-body{display:flex;flex-direction:column;min-height:auto;flex:none}.arcade-nav{padding:18px 16px;border:0;overflow:visible;display:block}.arcade-brand{height:90px;display:block;max-width:180px;margin:0 auto}.arcade-nav h1{font-size:14px;margin:12px 0}.arcade-nav nav{gap:6px}.arcade-mode{width:100%;min-height:76px!important;padding:13px!important}.arcade-mode strong{font-size:20px}.arcade-mode small{font-size:13px;margin-top:5px}.arcade-utilities{padding-top:14px;grid-template-columns:1fr 1fr 1.4fr;align-items:center;gap:6px}.arcade-utilities button{font-size:13px;padding:8px}.arcade-utilities a{grid-column:auto;font-size:12px;margin:0;padding:4px}.arcade-feature{min-height:365px;border-top:1px solid #343847}.arcade-feature-top{padding:18px;flex-direction:row;font-size:9px;gap:12px}.arcade-feature-copy{padding:24px}.arcade-feature-copy h2{font-size:38px;margin:10px 0 14px}.arcade-feature-copy p{font-size:15px;line-height:1.5;margin-bottom:20px}.arcade-feature-copy .ux-primary{width:100%}.arcade-resume{margin-bottom:16px}
 .arena-browser-body{display:flex;flex-direction:column;flex:none;min-height:0}.arena-preview{height:260px;flex:none}.arena-preview-copy{bottom:75px;left:20px;right:20px}.arena-preview-copy h1{font-size:27px;margin:8px 0}.arena-preview-copy p{font-size:12px}.arena-step-controls.pack-stage-carousel{bottom:15px;left:20px;right:20px}.arena-step-controls button{min-height:36px;font-size:12px}.arena-picker{padding:18px 14px;min-height:350px;border-left:0}.arena-picker-heading{padding-bottom:12px}.arena-picker-heading h2{font-size:20px}.arena-grid.tfb-arena-list{max-height:360px;min-height:220px;grid-template-columns:1fr 1fr}.arena-grid.tfb-arena-list button{min-height:153px}.arena-grid.tfb-arena-list button>img{height:82px}.arena-match-label{display:none}.arena-action{position:sticky;bottom:0;z-index:4}.arena-action .ux-primary{width:100%;font-size:15px;min-height:48px}
 .story-header{height:auto;min-height:58px;padding:8px 14px;gap:10px;font-size:12px}.story-save-state{font-size:11px!important}.story-select-heading{padding:20px 16px 16px}.story-select-heading h1{font-size:30px}.story-select-heading p{font-size:15px}.story-roster button{min-height:112px}.story-roster .story-sprite{height:74px}.story-roster{height:330px}.story-select-controls{min-height:465px}.story-tower-panel{height:258px;gap:10px;padding:18px 14px 0}.story-tower-panel h1{font-size:26px}.story-tower li{height:82px;min-width:185px}.story-tower strong{font-size:13px}.story-route-toggle{display:none}.story-briefing{min-height:560px}.story-briefing-copy{padding:26px 20px 20px}.story-briefing-copy h2{font-size:30px}.story-objectives p{font-size:14px}.story-briefing-top{padding:18px;gap:6px}
 .pixel-cinema{height:100svh;overflow:auto}.cinema-topbar{padding:14px 16px;min-height:70px;gap:12px}.cinema-topbar .ux-kicker{font-size:10px!important;letter-spacing:1px}.cinema-topbar strong{font-size:13px}.cinema-topbar button{font-size:12px;min-height:40px;padding:6px 12px}.cinema-viewport{flex:none;height:auto;min-height:0;aspect-ratio:16/9;margin-top:auto}.cinema-viewport canvas{width:100%;height:100%}.cinema-caption{padding:22px 20px 16px;min-height:190px}.cinema-speaker strong{font-size:12px}.cinema-speaker span{font-size:10px}.cinema-caption p{font-size:18px;line-height:1.6;min-height:6.4em}.cinema-timeline{width:calc(100% - 40px)}.cinema-controls{padding:16px 20px 24px;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:auto}.cinema-controls button{font-size:12px;padding:8px 10px}.cinema-controls .ux-primary{grid-column:1/-1;width:100%;margin:0;min-height:48px;font-size:15px}
}
@media(max-height:550px) and (orientation:landscape){
 .ux-header,.story-header{height:44px;min-height:44px;padding:5px 18px;font-size:11px}.ux-screen .ux-back{min-height:32px;padding:4px 12px;font-size:12px}.ux-footer{min-height:42px;padding:5px 18px;font-size:11px}.arcade-home-body{grid-template-columns:310px 1fr}.arcade-nav{padding:10px 16px}.arcade-brand{height:60px;align-self:flex-start}.arcade-nav h1{margin:5px 0;font-size:12px}.arcade-mode{min-height:52px!important;padding:7px!important}.arcade-mode strong{font-size:16px}.arcade-mode small{font-size:11px;margin-top:3px}.arcade-mode-number{font-size:10px}.arcade-nav nav{gap:3px}.arcade-utilities{padding-top:6px;grid-template-columns:1fr 1fr 1.5fr}.arcade-utilities button{min-height:32px;padding:5px;font-size:12px}.arcade-utilities a{grid-column:auto;margin:0;font-size:11px;padding:4px}.arcade-feature-top{padding:14px 20px;flex-direction:row;font-size:9px;gap:10px}.arcade-feature-copy{padding:16px 24px}.arcade-feature-copy h2{font-size:32px;margin:6px 0 10px}.arcade-feature-copy p{font-size:13px;line-height:1.45;margin-bottom:12px}.ux-screen .ux-primary{min-height:38px;padding:8px 18px;font-size:13px}.arcade-resume{padding:8px 12px;margin:0 0 10px}.arcade-resume>div{font-size:11px}
 .arena-picker{padding:12px}.arena-picker-heading{padding-bottom:10px}.arena-picker-heading h2{font-size:18px}.arena-picker-heading span{font-size:11px}.arena-grid.tfb-arena-list button{min-height:120px}.arena-grid.tfb-arena-list button>img{height:65px}.arena-grid.tfb-arena-list button>span{padding:6px}.arena-grid strong{font-size:11px}.arena-grid small{font-size:10px}.arena-preview-copy{bottom:66px;left:22px}.arena-preview-copy h1{font-size:25px;margin:6px 0}.arena-preview-copy p{font-size:11px}.arena-step-controls.pack-stage-carousel{bottom:14px;left:22px;right:22px}.arena-step-controls button{min-height:32px;padding:4px 12px;font-size:12px}
 .story-select-heading{padding:10px 16px}.story-select-heading h1{font-size:23px}.story-roster button{min-height:93px}.story-roster .story-sprite{height:60px}.story-tower-panel{padding:12px 12px 0;gap:8px}.story-tower-panel h1{font-size:22px}.story-briefing-copy{padding:16px 20px}.story-briefing-copy h2{font-size:25px;margin:6px 0}.story-briefing-copy>p{font-size:12px}.story-objectives{margin:10px 0;padding:8px 12px}.story-objectives p{font-size:12px}.story-objectives b{font-size:10px}.story-screen .story-primary{font-size:12px;min-height:36px}.story-tower li{min-height:73px}.story-route-toggle{display:none}
 .pixel-cinema{position:relative;overflow:hidden}.cinema-topbar{position:absolute;z-index:3;top:0;left:0;right:0;min-height:44px;padding:8px 16px;border:0;background:linear-gradient(#000c,transparent)}.cinema-topbar strong{display:none}.cinema-topbar button{min-height:30px;padding:4px 10px;font-size:11px}.cinema-viewport{position:absolute;inset:0;min-height:0}.cinema-caption{position:absolute;left:0;right:0;bottom:56px;padding:35px 30px 8px;background:linear-gradient(transparent,#000e);min-height:0;z-index:2}.cinema-speaker{margin-bottom:6px}.cinema-speaker strong{font-size:12px}.cinema-caption p{font-size:15px;line-height:1.35;min-height:2.7em;max-width:900px}.cinema-controls{position:absolute;bottom:0;left:0;right:0;padding:8px 24px;z-index:3;background:#080a13;max-width:none}.cinema-controls button{min-height:34px;padding:5px 12px;font-size:11px}.cinema-controls .ux-primary{min-height:34px;font-size:12px}.cinema-timeline{position:absolute;bottom:55px;left:24px;right:24px;width:auto;z-index:4}
 .game-shell .asset-error{padding:20px;gap:10px;width:min(520px,85%)}.asset-error h2{font-size:20px}.asset-error p{font-size:14px}.asset-error button{min-height:36px;padding:8px}
}
@media(prefers-reduced-motion:reduce){.ux-screen *{animation:none!important;transition:none!important}}

/* 1.36: fighting-game attract menu and mobile input surface. */
.versus-menu{position:absolute;inset:0;z-index:30;isolation:isolate;overflow:hidden;background:#090517;color:#fff;--mode-color:#ad48ff}
.versus-menu-stage,.versus-menu-vignette,.versus-menu-scanlines{position:absolute;inset:0;pointer-events:none;z-index:-1}
.versus-menu-stage{background-size:cover;background-position:center;filter:brightness(.42) saturate(1.2);animation:arena-drift 18s ease-in-out infinite alternate}
.versus-menu-vignette{background:radial-gradient(ellipse at 50% 40%,transparent 20%,#070411e8 100%),linear-gradient(90deg,#170b3255,transparent,#170b3255)}
.versus-menu-scanlines{background:repeating-linear-gradient(0deg,transparent 0 3px,#0003 3px 4px);z-index:4;opacity:.28}
.versus-menu-top{position:absolute;top:2%;left:2%;right:2%;display:flex;align-items:center;justify-content:space-between;font:11px monospace;letter-spacing:2px;color:#aaa}
.versus-menu-top button{min-height:40px;background:#090517aa;border:1px solid #ffffff30;padding:8px 12px;cursor:pointer}
.versus-menu-logo{position:absolute;left:32%;right:32%;top:3%;height:24%;pointer-events:none}
.versus-menu-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 14px #ec9b2833)}
.versus-menu-fighter{position:absolute;top:24%;bottom:10%;width:30%;animation:fighter-enter .3s ease-out}
.versus-menu-fighter-left{left:1%}.versus-menu-fighter-right{right:1%}
.versus-menu-fighter>img{height:100%;width:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 18px var(--mode-color))}
.versus-menu-fighter-right>img{transform:scaleX(-1)}
.versus-menu-nameplate{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 0;background:linear-gradient(90deg,transparent,#070517e8,transparent);border-bottom:2px solid var(--mode-color);--tfb-ui-scale:.65}
.versus-menu-nameplate b{font:900 20px monospace;color:#ffd36a}
.versus-menu-panel{position:absolute;top:29%;bottom:10%;left:33%;right:33%;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:12px}
.versus-menu-panel h1{margin:0 0 8px;display:flex;justify-content:center;--tfb-ui-scale:.6}
.versus-menu-panel nav{display:flex;flex-direction:column;gap:10px}
.versus-mode{position:relative;display:flex;justify-content:center;align-items:center;min-height:64px;padding:10px 14px;border:2px solid #70529a;background:linear-gradient(110deg,#100b24ed,#24143dea);cursor:pointer;--tfb-ui-scale:.72;transition:border-color .12s,background .12s,transform .12s}
.versus-mode.is-selected{border-color:#ffd05e;background:linear-gradient(100deg,#5a3420,#241038);box-shadow:inset 4px 0 #ffe182,0 0 20px #efab2528;transform:translateX(3px)}
.versus-mode-p1{display:none;position:absolute;left:-29px;color:#ffdc71;font:900 17px monospace;text-shadow:2px 2px #000}
.versus-mode.is-selected .versus-mode-p1{display:block;animation:ready-blink 1s steps(2,end) infinite}
.versus-menu-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;--tfb-ui-scale:.6}
.versus-menu-options button{min-height:44px;border:1px solid #736080;background:#10091ccc;cursor:pointer;padding:8px;display:flex;justify-content:center}
.versus-menu-options .is-selected{border-color:#ffd05e;background:#442b22}
.versus-mode-note{display:flex;justify-content:center;--tfb-ui-scale:.8;min-height:18px}
.versus-campaign-progress{display:flex;align-items:center;gap:10px;font:12px monospace;color:#bbb}.versus-campaign-progress progress{width:100%;height:4px;accent-color:#a65bff}
.versus-menu-footer{position:absolute;bottom:0;left:0;right:0;min-height:8%;display:flex;justify-content:space-around;align-items:center;border-top:1px solid #9c64ca55;background:#070413b0;--tfb-ui-scale:.65;gap:12px;padding:6px}
.versus-menu-ready{animation:ready-blink 1.8s steps(2,end) infinite}
.versus-menu button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes arena-drift{from{transform:scale(1.04) translateX(-.5%)}to{transform:scale(1.08) translateX(.5%)}}
@keyframes fighter-enter{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@keyframes ready-blink{50%{opacity:.45}}
html[data-game-mobile],html[data-game-mobile] body,html[data-game-mobile] #root{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
html[data-game-mobile] body{position:fixed;inset:0;-webkit-text-size-adjust:100%}
.has-touch.fight-page{width:100%;height:var(--game-height,100dvh);min-height:0;padding:0;overflow:clip;overscroll-behavior:none;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.has-touch button{touch-action:manipulation}.has-touch.screen-fight{touch-action:none}
.has-touch .control-legend{display:none}
.has-touch.pack-flow-page .game-shell{height:var(--game-height,100dvh);max-height:none;min-height:0;width:100%;aspect-ratio:auto;border:0;border-radius:0;overflow:clip}
.has-touch.screen-fight .game-shell{width:min(100%,calc(var(--game-height,100dvh) * 16 / 9));height:auto;aspect-ratio:16/9;max-height:var(--game-height,100dvh);min-height:0;overflow:clip;border:0;border-radius:0}
.has-touch .touch-layer{position:fixed;inset:0;width:100%;height:var(--game-height,100dvh);z-index:50;pointer-events:none;touch-action:none}
.has-touch .touch-layer button{touch-action:none;min-width:46px;min-height:46px}
.has-touch .touch-layer button.is-held{filter:brightness(1.7);box-shadow:0 0 15px #ffffff85;transform:scale(.94)}
.has-touch .touch-stick-zone{position:absolute;left:env(safe-area-inset-left,0px);bottom:0;width:38%;height:60%;pointer-events:auto;touch-action:none}
.has-touch .mobile-pause-control{position:absolute!important;top:max(8px,env(safe-area-inset-top))!important;right:max(10px,env(safe-area-inset-right))!important;min-width:44px;min-height:44px;pointer-events:auto}
@media (orientation:landscape) and (max-height:550px){
 .versus-menu-top{top:1%}.versus-menu-top button{min-height:34px;--tfb-ui-scale:.7}.versus-menu-top>span{font-size:9px}
 .versus-menu-panel{top:26%;bottom:10%;gap:7px}.versus-menu-panel h1{--tfb-ui-scale:.4;margin-bottom:1px}.versus-menu-panel nav{gap:6px}
 .versus-mode{min-height:42px;padding:6px;--tfb-ui-scale:.5}.versus-menu-options{--tfb-ui-scale:.43;gap:6px}.versus-menu-options button{min-height:36px;padding:6px}
 .versus-mode-note{--tfb-ui-scale:.55;min-height:12px}.versus-menu-nameplate{--tfb-ui-scale:.4;padding:7px 0}.versus-menu-nameplate b{font-size:12px}
 .versus-menu-footer{--tfb-ui-scale:.5}.versus-menu-help{display:none}.versus-campaign-progress{font-size:9px}.versus-menu-fighter{top:21%}
}
@media (orientation:portrait) and (max-width:900px){
 .versus-menu-logo{top:8%;height:22%;left:12%;right:12%}.versus-menu-panel{top:32%;bottom:14%;left:12%;right:12%;gap:13px}
 .versus-menu-fighter{top:28%;width:65%;bottom:9%;opacity:.43}.versus-menu-fighter-left{left:-22%}.versus-menu-fighter-right{right:-22%}.versus-menu-nameplate{display:none}
 .versus-mode{min-height:64px;--tfb-ui-scale:.6}.versus-menu-panel h1{--tfb-ui-scale:.48}.versus-menu-options{--tfb-ui-scale:.5}.versus-menu-top{top:2%;left:3%;right:3%}.versus-menu-top>span{display:none}
 .versus-menu-help,.versus-menu-ready{display:none}.versus-menu-footer{--tfb-ui-scale:.65}
}
@media (orientation:landscape) and (max-height:350px){.versus-menu-panel h1{display:none}.versus-menu-panel{gap:5px}.versus-mode{min-height:38px}.versus-mode-note{display:none}}
@media(prefers-reduced-motion:reduce){.versus-menu *{animation:none!important;transition:none!important}}
.has-touch .touch-attacks{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:clamp(222px,33vw,320px);height:auto;aspect-ratio:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;pointer-events:none}
.has-touch .touch-attacks button{position:relative;inset:auto!important;width:100%!important;height:auto;aspect-ratio:1;min-height:46px;border-radius:50%;pointer-events:auto;--tfb-ui-scale:.65}
.has-touch .touch-attacks .lp,.has-touch .touch-attacks .hp{border-color:#6bcc7c}.has-touch .touch-attacks .lk,.has-touch .touch-attacks .hk{border-color:#c281e2}.has-touch .touch-attacks .bl{border-color:#75cfe1}
@media(orientation:landscape) and (max-height:350px){.has-touch .touch-attacks{width:224px;gap:5px;bottom:10px}.has-touch .touch-attacks button{--tfb-ui-scale:.55}}
.trio-format{display:flex;gap:6px;justify-content:center}.trio-format button{flex:1;min-height:32px;border:1px solid #756091;background:#100a21;color:#b2a3c4;font:700 12px monospace;cursor:pointer}.trio-format button[aria-pressed=true]{color:#ffe18e;border-color:#ffd05e;background:#48301c}
.versus-menu-panel{top:26%;gap:8px}.versus-menu-panel h1{margin-bottom:2px}
.trio-picks{display:flex;gap:5px;justify-content:center;margin-top:4px}.trio-picks>span{background:#0c0926e8;border:1px solid #7767a3;padding:4px 7px;color:#fff;white-space:nowrap;font-size:.85em}
.tfb-classic-select[data-trio] .classic-turn{top:36%;left:20%;right:20%}
@media(orientation:landscape) and (max-height:550px){.versus-menu-panel{top:24%;gap:5px}.versus-menu-panel h1{display:none}.trio-format button{min-height:30px;font-size:11px}.versus-mode{min-height:38px}.versus-mode-note{display:none}.tfb-classic-select[data-trio] .classic-turn{top:35%;font-size:10px}.trio-picks>span{padding:3px 5px}}
@media(orientation:portrait) and (max-width:900px){.versus-menu-panel{top:30%;gap:12px}.tfb-classic-select[data-trio] .classic-turn{top:27%;left:2%;right:2%;font-size:11px}.trio-picks>span{font-size:9px;padding:4px}}
/* Story tower — the same bitmap type and cabinet palette as the start screen. */
.story-header-logo{display:none}
.story-hub{position:absolute;isolation:isolate;background:#060719;border:4px solid #cfab57;box-shadow:inset 0 0 0 3px #171442;overflow:hidden;font-family:'Courier New',monospace!important}
.story-hub::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:8;background:repeating-linear-gradient(0deg,transparent 0 3px,#0002 3px 4px);opacity:.33}
.story-hub button{border-radius:0!important;font-family:'Courier New',monospace!important;text-transform:uppercase;box-shadow:3px 3px #0008}
.story-hub .story-header{position:relative;min-height:70px;padding:10px 22px;border-bottom:3px solid #ad8546;background:linear-gradient(#171542,#090b24);gap:20px}
.story-hub .story-header button{background:#15132d;border:2px solid #dfb563;min-height:42px;--tfb-ui-scale:.8}
.story-hub .story-header-title{--tfb-ui-scale:.85}.story-hub .story-save-state{font:11px/1.4 'Courier New',monospace;text-transform:uppercase;max-width:180px;text-align:right;color:#a9a4c5}
.story-hub .story-header-logo{display:block;position:absolute;left:50%;top:3px;transform:translateX(-50%);height:62px;width:135px;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.story-hub .story-hub-layout{display:grid;grid-template-columns:34% 66%;flex:1;min-height:0;overflow:hidden}
.story-hub .story-tower-panel{position:relative;padding:22px 18px 0;gap:13px;background:linear-gradient(100deg,#141337,#0b0e27);border-right:3px solid #a17a40;min-width:0;height:auto}
.story-hub .story-tower-panel>.story-eyebrow{--tfb-ui-scale:.7}.story-hub .story-tower-panel h1{--tfb-ui-scale:.78;line-height:1.2;margin:0;text-shadow:none}
.story-hub .story-progress{font:11px/1.5 'Courier New',monospace;color:#dac99b;letter-spacing:.5px}.story-hub .story-progress-track{height:9px;background:#060814;border:2px solid #6e5739;box-shadow:2px 2px #000}.story-hub .story-progress-track i{background:repeating-linear-gradient(90deg,#e7b34b 0 8px,#99722d 8px 10px)}
.story-hub .story-tower{padding:6px 4px 20px 12px;scrollbar-width:thin;scrollbar-color:#c39851 #08091b;display:block;min-height:0}
.story-hub .story-tower li{min-height:78px;height:auto;max-width:none;min-width:0;margin:0 0 9px;padding:7px 9px;gap:10px;background:linear-gradient(110deg,#201b47,#11122c);border:2px solid #494172;border-radius:0;box-shadow:3px 3px #0008;opacity:1}
.story-hub .story-tower li.current{border:2px solid #ffe181;background:linear-gradient(100deg,#5b351f,#292046);box-shadow:inset 3px 0 #ffe7a3,3px 3px #000}
.story-hub .story-tower li.current::before{content:'▶';position:absolute;left:-13px;color:#ffe48d;font:18px monospace;text-shadow:2px 2px #000;animation:ready-blink .8s steps(2,end) infinite}
.story-hub .story-tower li.cleared{background:#112b2d;border-color:#5b9c82}.story-hub .story-tower li.boss{border-color:#b676ef}.story-hub .story-tower li.locked .story-sprite{opacity:.72}
.story-hub .story-tower .story-sprite{height:60px;width:48px}.story-hub .story-step{display:block;font:12px monospace;color:#d4b46d}
.story-hub .story-tower li>div{min-width:0}.story-hub .story-tower strong{--tfb-ui-scale:.68}.story-hub .story-tower small{display:block;font:10px/1.4 'Courier New',monospace;color:#bbb1d5;letter-spacing:.5px;margin-top:7px}.story-hub .story-tower b{display:block;color:#e7c073;font-size:14px}
.story-hub .story-tower .tfb-bitmap-text{display:inline-flex;margin:0}.story-hub .story-tower .tfb-bitmap-line{display:flex;margin:0;letter-spacing:0}.story-hub .story-tower .tfb-bitmap-character{display:inline-block;margin:0;letter-spacing:0}
.story-hub .story-briefing{min-height:0;background-position:center top;background-size:cover;isolation:isolate}
.story-hub .story-briefing::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#10144a33,transparent 45%,#0b071b);z-index:-1}
.story-hub .story-briefing-top{padding:16px 22px;background:#090821b8;border-bottom:1px solid #cfab5755;color:#e3d7b3;font:11px/1.4 'Courier New',monospace;text-transform:uppercase;gap:12px;flex-direction:row}
.story-hub .story-versus-portraits{inset:5% 2% 32%;align-items:center}.story-hub .story-versus-portraits .story-sprite{width:45%;height:100%;object-fit:contain;filter:drop-shadow(4px 5px #050519)}
.story-hub .story-versus-portraits .possessed{filter:drop-shadow(0 0 14px #a14bee) saturate(.7)}
.story-retro-vs{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);--tfb-ui-scale:.8;filter:drop-shadow(4px 4px #000);z-index:2}
.story-hub .story-briefing-copy{padding:20px 26px 22px;background:linear-gradient(transparent,#08091beF 20%);max-height:65%;overflow:auto}
.story-hub .story-briefing-copy>.story-eyebrow{font:700 12px monospace;letter-spacing:2px;color:#ffe090}.story-hub .story-briefing-copy h2{--tfb-ui-scale:.82;margin:10px 0 12px;text-shadow:none;line-height:1.2}.story-hub .story-briefing-copy>p{font:12px/1.5 'Courier New',monospace;color:#c1b6d1}
.story-hub .story-objectives{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;padding:12px 15px;border:2px solid #675181;border-radius:0;background:#100e29e8;box-shadow:inset 0 0 0 2px #272047,3px 3px #0008}
.story-hub .story-objectives p{font:12px/1.5 'Courier New',monospace;color:#cfc6dc}.story-hub .story-objectives b{display:block;font:700 10px/1.5 'Courier New',monospace;color:#d8b473;margin-bottom:5px;letter-spacing:1px}
.story-hub .story-primary{position:relative;min-height:48px;background:linear-gradient(#343052,#19142f)!important;border:2px solid #ffda78!important;box-shadow:inset 0 0 0 2px #64502f,4px 4px #000!important;padding:12px 22px!important;--tfb-ui-scale:.88}
.story-hub .story-primary::before{content:'▶';display:inline-block;margin-right:12px;color:#ffda78;animation:ready-blink .85s steps(2,end) infinite}.story-hub .story-secondary{display:inline-flex;margin:0 0 0 18px;min-height:44px;padding:8px 10px!important;border:1px solid #615071!important;--tfb-ui-scale:.6;background:#0e0a22!important;vertical-align:middle}
.story-hub .story-confirm{background:#110d2b;border:3px double #e2b975;border-radius:0;font-family:'Courier New',monospace}.story-hub .story-route-toggle{font-family:'Courier New',monospace!important;border-color:#8e714c!important;color:#e1c797!important}
@media(orientation:landscape) and (max-height:550px){
 .story-hub{border-width:2px}.story-hub .story-header{min-height:42px;height:42px;padding:4px 12px;gap:12px}.story-hub .story-header button{min-height:30px;--tfb-ui-scale:.58;padding:3px 8px}.story-hub .story-header-title{--tfb-ui-scale:.58}.story-hub .story-header-logo{height:38px;width:85px;top:0}.story-hub .story-save-state{font-size:8px;max-width:140px}
 .story-hub .story-hub-layout{grid-template-columns:33% 67%}.story-hub .story-tower-panel{padding:10px 8px 0;gap:6px}.story-hub .story-tower-panel>.story-eyebrow{--tfb-ui-scale:.43}.story-hub .story-tower-panel h1{--tfb-ui-scale:.48}.story-hub .story-progress{font-size:8px}.story-hub .story-progress-track{height:6px}
 .story-hub .story-tower{padding:3px 2px 10px 9px}.story-hub .story-tower li{min-height:53px;padding:3px 5px;gap:6px;margin-bottom:6px}.story-hub .story-tower .story-sprite{height:42px;width:30px}.story-hub .story-tower strong{--tfb-ui-scale:.44}.story-hub .story-tower small{font-size:7px;margin-top:3px}.story-hub .story-step{font-size:9px}.story-hub .story-tower b{font-size:10px}
 .story-hub .story-briefing-top{padding:7px 12px;font-size:8px}.story-hub .story-versus-portraits{inset:2% 2% 34%}.story-retro-vs{--tfb-ui-scale:.5}
 .story-hub .story-briefing-copy{padding:10px 14px;max-height:67%}.story-hub .story-briefing-copy>.story-eyebrow{font-size:9px}.story-hub .story-briefing-copy h2{--tfb-ui-scale:.48;margin:5px 0}.story-hub .story-briefing-copy>p{font-size:9px;line-height:1.25}.story-hub .story-objectives{padding:6px 9px;gap:10px;margin:8px 0}.story-hub .story-objectives p{font-size:9px;line-height:1.3}.story-hub .story-objectives b{font-size:8px;margin-bottom:2px}
 .story-hub .story-primary{min-height:36px;--tfb-ui-scale:.55;padding:7px 10px!important}.story-hub .story-secondary{min-height:32px;--tfb-ui-scale:.4;padding:5px!important;margin-left:8px}.story-hub .story-primary::before{font-size:10px;margin-right:6px}
}
@media(orientation:portrait) and (max-width:900px){
 .story-hub .story-header{min-height:50px;padding:7px 10px;gap:10px}.story-hub .story-header-title{--tfb-ui-scale:.55}.story-hub .story-header button{--tfb-ui-scale:.55;min-height:34px}.story-hub .story-header-logo{display:none}.story-hub .story-save-state{font-size:8px;max-width:100px}
 .story-hub .story-hub-layout{display:flex;flex-direction:column;overflow:auto}.story-hub .story-tower-panel{flex:none;height:220px;padding:12px 12px 0;border-right:0;border-bottom:3px solid #a17a40;gap:7px}.story-hub .story-tower-panel>.story-eyebrow{--tfb-ui-scale:.55}.story-hub .story-tower-panel h1{--tfb-ui-scale:.58}.story-hub .story-progress{font-size:9px}.story-hub .story-tower{display:flex;gap:8px;padding:5px 3px 12px}.story-hub .story-tower li{min-width:190px;max-width:190px;min-height:64px;height:64px;margin:0;gap:6px}.story-hub .story-tower .story-sprite{width:35px;height:48px}.story-hub .story-tower strong{--tfb-ui-scale:.5}.story-hub .story-tower small{font-size:8px}.story-hub .story-step{font-size:9px}.story-hub .story-tower li.current::before{display:none}
 .story-hub .story-briefing{flex:none;min-height:550px}.story-hub .story-briefing-top{font-size:9px;padding:10px 12px}.story-hub .story-briefing-copy{padding:16px;max-height:none}.story-hub .story-briefing-copy h2{--tfb-ui-scale:.53}.story-hub .story-versus-portraits{inset:5% 0 40%}.story-retro-vs{--tfb-ui-scale:.5}.story-hub .story-objectives{gap:10px;padding:10px;font-size:10px}.story-hub .story-objectives p{font-size:10px}.story-hub .story-primary{width:100%;--tfb-ui-scale:.7}.story-hub .story-secondary{margin:12px 0 0;--tfb-ui-scale:.55}
}
@media(prefers-reduced-motion:reduce){.story-hub *{animation:none!important}}

.story-hub .story-briefing,.story-hub .story-tower-panel,.story-hub .story-hub-layout{min-width:0}.story-hub .story-header{flex-shrink:0}

/* Possession colors and eyes are part of each animated frame; CSS only outlines it. */
.story-hub .story-versus-portraits canvas.possessed{filter:drop-shadow(2px 0 #663d88) drop-shadow(-2px 0 #663d88);animation:none;image-rendering:pixelated}