:root {
  --gold: #f3c76b;
  --cream: #ffe2a8;
  --red: #8c1f17;
  --ink: rgba(7, 5, 3, 0.78);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  color: var(--cream);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
  letter-spacing: 0;
  user-select: none;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

button:active { transform: scale(0.97); }
img { display: block; max-width: 100%; pointer-events: none; }

#game {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 100vw;
  height: 100dvh;
  max-width: 540px;
  max-height: 960px;
  overflow: hidden;
  background: #000;
  container-type: size;
  z-index: 2;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
}

.screen.active {
  display: block;
  animation: screenIn 220ms ease-out both;
}

.screen-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-hud {
  position: absolute;
  z-index: 5;
  left: 3.8cqw;
  right: 3.8cqw;
  top: 2.1cqh;
  height: 7.2cqh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
}

.player-card,
.wallet,
.menu-btn,
.bottom-nav button,
.profile-tabs button,
.equipment-grid button,
.stage-pin,
.back-hotspot,
.screen-title button,
.challenge-card,
.tutorial-card,
.career-card,
.continue-card,
.objective-strip,
.career-progress-panel,
.level-card,
.settings-list button,
.bracket-list button,
.result-panel button,
.asset-loader,
.asset-error-panel,
.debug-panel {
  background-image: url("assets/ui/menu_button_generated.webp");
  background-size: 100% 100%;
}

.player-card,
.wallet,
.menu-btn,
.bottom-nav button,
.continue-card button,
.level-card,
.big-entry,
.fight-banner {
  transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
}

.player-card:hover,
.menu-btn:hover,
.bottom-nav button:hover,
.continue-card button:hover,
.level-card:not(:disabled):hover,
.big-entry:hover,
.fight-banner:hover {
  filter: brightness(1.12);
}

.menu-btn:active,
.bottom-nav button:active,
.continue-card button:active,
.level-card:active,
.big-entry:active,
.fight-banner:active {
  transform: scale(0.975);
}

.player-card {
  width: 43%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 0.7cqh 2.2cqw;
  text-align: left;
}

.player-card img {
  width: 11cqw;
  height: 11cqw;
  object-fit: cover;
}

.player-card span { min-width: 0; }
.player-card strong,
.player-card small {
  display: block;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player-card strong {
  font-size: clamp(0.78rem, 3.7cqw, 1rem);
  line-height: 1.15;
}

.player-card small {
  margin-top: 0.25cqh;
  font-family: Arial, sans-serif;
  font-size: clamp(0.54rem, 2.35cqw, 0.7rem);
  color: #d6ad6a;
}

.wallet {
  width: 49%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4cqw;
  padding: 0 2.4cqw;
}

.wallet span {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  min-width: 0;
  font-size: clamp(0.68rem, 3cqw, 0.88rem);
  white-space: nowrap;
}

.wallet img {
  width: 5.2cqw;
  height: 5.2cqw;
  object-fit: contain;
}

.brand {
  position: absolute;
  z-index: 4;
  left: 7%;
  right: 7%;
  top: 20.4%;
}

.home-screen.active .screen-bg {
  animation: homeBackdropDrift 9000ms ease-in-out infinite alternate;
}

.home-screen.active .brand img {
  animation: homeTitlePulse 4200ms ease-in-out infinite;
  transform-origin: center;
}

.home-screen.active .continue-card {
  animation: homePanelIn 280ms ease-out 70ms both, homePanelGlow 5200ms ease-in-out 900ms infinite;
}

.home-screen.active .continue-card button,
.home-screen.active .menu-btn.active {
  animation: playCtaPulse 1800ms ease-in-out infinite;
}

.home-screen.active .menu-btn,
.home-screen.active .bottom-nav button {
  animation: homePanelIn 260ms ease-out both;
}

.home-screen.active .menu-btn:nth-child(1) { animation-delay: 120ms; }
.home-screen.active .menu-btn:nth-child(2) { animation-delay: 155ms; }
.home-screen.active .menu-btn:nth-child(3) { animation-delay: 190ms; }
.home-screen.active .menu-btn:nth-child(4) { animation-delay: 225ms; }
.home-screen.active .menu-btn:nth-child(5) { animation-delay: 260ms; }
.home-screen.active .menu-btn:nth-child(6) { animation-delay: 295ms; }
.home-screen.active .bottom-nav button:nth-child(1) { animation-delay: 320ms; }
.home-screen.active .bottom-nav button:nth-child(2) { animation-delay: 345ms; }
.home-screen.active .bottom-nav button:nth-child(3) { animation-delay: 370ms; }
.home-screen.active .bottom-nav button:nth-child(4) { animation-delay: 395ms; }
.home-screen.active .bottom-nav button:nth-child(5) { animation-delay: 420ms; }

.continue-card {
  position: absolute;
  z-index: 6;
  left: 6.4%;
  right: 6.4%;
  top: 35.5%;
  min-height: 12.2cqh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24% 25%;
  align-items: center;
  gap: 2cqw;
  padding: 1.15cqh 4cqw;
}

.continue-copy {
  min-width: 0;
  display: grid;
  gap: 0.28cqh;
}

.continue-copy small,
.continue-copy strong,
.continue-copy span,
.continue-copy em {
  min-width: 0;
  overflow: hidden;
  line-height: 1.16;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.continue-copy small,
.continue-copy span,
.continue-copy em,
.continue-meter b {
  font-family: Arial, sans-serif;
  font-weight: 900;
}

.continue-copy small {
  font-size: clamp(0.5rem, 2.05cqw, 0.62rem);
  color: #f4c467;
}

.continue-copy strong {
  font-size: clamp(0.86rem, 3.8cqw, 1.08rem);
  color: #fff0bb;
}

.continue-copy span,
.continue-copy em {
  font-size: clamp(0.54rem, 2.16cqw, 0.66rem);
  color: #e3bd7e;
  font-style: normal;
}

.continue-meter {
  min-width: 0;
  display: grid;
  gap: 0.65cqh;
}

.continue-meter b {
  font-size: clamp(0.56rem, 2.25cqw, 0.7rem);
  color: #ffe7a6;
  text-align: right;
}

.progress-track {
  width: 100%;
  height: 0.9cqh;
  min-height: 5px;
  overflow: hidden;
  border: 1px solid rgba(241, 185, 82, 0.42);
  background: rgba(12, 8, 5, 0.78);
}

.progress-track i {
  display: block;
  width: 0%;
  height: 100%;
  background: #d7a13a;
  transition: width 280ms ease-out;
}

.continue-card button {
  min-width: 0;
  height: 5.4cqh;
  background-image: url("assets/ui/menu_button_active_generated.webp");
  background-size: 100% 100%;
  color: #ffe1a0;
  font-size: clamp(0.62rem, 2.55cqw, 0.78rem);
  line-height: 1;
}

.mode-menu {
  position: absolute;
  z-index: 5;
  left: 6.5%;
  right: 6.5%;
  top: 49.2%;
  height: 38.4%;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 0.62cqh;
}

.menu-btn {
  display: grid;
  grid-template-columns: 15% 1fr;
  align-items: center;
  min-height: 0;
  padding: 0 5cqw;
  text-align: left;
}

.menu-btn.active,
.upgrade,
.challenge-card button {
  background-image: url("assets/ui/menu_button_active_generated.webp");
  background-size: 100% 100%;
}

.menu-btn img {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 8.6cqw;
  height: 8.6cqw;
  object-fit: contain;
}

.menu-btn span,
.menu-btn small {
  grid-column: 2;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.menu-btn span {
  font-size: clamp(0.76rem, 3.7cqw, 1rem);
  line-height: 1.15;
}

.menu-btn small {
  margin-top: 0.18cqh;
  font-family: Arial, sans-serif;
  font-size: clamp(0.56rem, 2.35cqw, 0.7rem);
  color: #e3bd7e;
}

.bottom-nav,
.profile-tabs {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9.8cqh;
  display: grid;
  background: rgba(0, 0, 0, 0.58);
}

.bottom-nav { grid-template-columns: repeat(5, 1fr); }
.profile-tabs { grid-template-columns: repeat(3, 1fr); height: 10.8cqh; }

.bottom-nav button,
.profile-tabs button,
.equipment-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35cqh;
  min-width: 0;
}

.bottom-nav img,
.profile-tabs img {
  width: 6.8cqw;
  height: 6.8cqw;
  object-fit: contain;
}

.bottom-nav span,
.profile-tabs span {
  max-width: 92%;
  overflow: hidden;
  font-size: clamp(0.46rem, 2cqw, 0.6rem);
  white-space: nowrap;
  text-transform: uppercase;
  text-overflow: ellipsis;
}

.fight-hud {
  position: absolute;
  z-index: 8;
  left: 6.2%;
  right: 6.2%;
  top: 2.4%;
  height: 8.6%;
}

.hud-panel,
.timer-card {
  position: absolute;
  top: 0;
  height: 100%;
}

.hud-panel { width: 39.4%; }
.hud-player { left: 0; }
.hud-enemy { right: 0; }

.hud-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.hud-panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 13%;
  bottom: 14%;
  width: 26%;
  border: 1px solid rgba(218, 159, 66, 0.5);
  background: rgba(5, 4, 3, 0.72);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.55);
}

.hud-player::before { left: 2.2%; }
.hud-enemy::before { right: 2.2%; }

.hud-portrait {
  position: absolute;
  z-index: 2;
  top: 15%;
  width: 23%;
  aspect-ratio: 1;
  object-fit: cover;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

.hud-player .hud-portrait { left: 3.3%; }
.hud-enemy .hud-portrait {
  right: 3.3%;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%);
}

.hud-panel strong {
  position: absolute;
  z-index: 2;
  top: 17%;
  max-width: 48%;
  overflow: hidden;
  font-size: clamp(0.42rem, 1.72cqw, 0.58rem);
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 2px 5px #000;
}

.hud-player strong { left: 31%; }
.hud-enemy strong { right: 31%; text-align: right; }

.bar {
  position: absolute;
  z-index: 2;
  height: 8.5%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.bar i {
  display: block;
  width: 100%;
  height: 100%;
  transition: width 180ms ease-out;
}

.hud-player .bar { left: 31%; right: 7%; }
.hud-enemy .bar { left: 7%; right: 31%; }
.bar.hp { top: 42%; }
.bar.stamina { top: 60%; }
.bar.hp i { background: #49e32c; }
.bar.stamina i { background: #f8ad20; }

.timer-card {
  left: 43.2%;
  width: 13.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.timer-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.timer-card strong,
.timer-card small {
  position: relative;
  z-index: 1;
  display: block;
}

.timer-card strong {
  font-size: clamp(1rem, 6.1cqw, 1.65rem);
  line-height: 1;
}

.timer-card small {
  position: absolute;
  top: 11%;
  font-family: Arial, sans-serif;
  font-size: clamp(0.42rem, 1.7cqw, 0.56rem);
  color: var(--gold);
}

.combo {
  position: absolute;
  z-index: 7;
  left: 7.5%;
  top: 15.4%;
  color: #ffd35c;
  font-size: clamp(0.92rem, 4.7cqw, 1.42rem);
  line-height: 1.04;
  text-shadow: 0 3px 0 #5c1208;
  transform: rotate(-5deg);
  max-width: 32%;
  pointer-events: none;
}

.combo.pop { animation: popText 220ms ease-out both; }

.fight-status {
  position: absolute;
  z-index: 7;
  left: 28%;
  right: 28%;
  top: 14.9%;
  padding: 0.18rem 0.35rem;
  border: 1px solid rgba(215, 160, 73, 0.28);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
  color: #f6cea0;
  font-family: Arial, sans-serif;
  font-size: clamp(0.5rem, 1.95cqw, 0.62rem);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px #000;
  pointer-events: none;
}

.countdown {
  position: absolute;
  z-index: 9;
  left: 16%;
  right: 16%;
  top: 36%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10cqh;
  color: var(--gold);
  font-size: clamp(1.6rem, 9cqw, 2.7rem);
  line-height: 1;
  text-align: center;
  text-shadow: 0 4px 0 #5c1208, 0 0 18px #000;
  pointer-events: none;
}

.countdown:empty { display: none; }

.asset-loader,
.asset-error-panel {
  position: absolute;
  z-index: 13;
  left: 9%;
  right: 9%;
  top: 31%;
  min-height: 21cqh;
  padding: 2cqh 5cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9cqh;
  text-align: center;
  background-color: rgba(5, 3, 2, 0.72);
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.82));
}

.asset-loader[hidden],
.asset-error-panel[hidden] {
  display: none;
}

.asset-loader img {
  width: 14cqw;
  height: 14cqw;
  object-fit: contain;
  animation: loaderPulse 900ms ease-in-out infinite alternate;
}

.asset-loader strong,
.asset-error-panel strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--gold);
  font-size: clamp(0.9rem, 4.3cqw, 1.22rem);
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 3px 0 #5c1208;
}

.asset-loader span,
.asset-error-panel span {
  max-width: 100%;
  overflow: hidden;
  color: #f6cea0;
  font-family: Arial, sans-serif;
  font-size: clamp(0.58rem, 2.35cqw, 0.74rem);
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.asset-progress {
  width: 82%;
  height: 0.72cqh;
  min-height: 5px;
  border: 1px solid rgba(243, 199, 107, 0.44);
  background: rgba(0, 0, 0, 0.62);
  overflow: hidden;
}

.asset-progress i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #8f2318, #dba047, #fff0a6);
  transition: width 160ms ease-out;
}

.asset-loader small {
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: clamp(0.52rem, 2.05cqw, 0.64rem);
  font-weight: 900;
}

.asset-error-panel span {
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.asset-error-panel button {
  width: 60%;
  height: 5cqh;
  min-height: 34px;
  color: var(--gold);
  font-size: clamp(0.62rem, 2.55cqw, 0.78rem);
}

.arena {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 14.8%;
  bottom: 25.6%;
  overflow: visible;
}

.stage-track {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 168%;
  transform: translateX(calc(var(--camera-x, 0) * 1px));
  will-change: transform;
}

.fighter {
  position: absolute;
  left: calc(var(--x-pct, 28) * 1%);
  bottom: calc(1% + var(--y, 0) * 1%);
  width: 21.4%;
  aspect-ratio: 256 / 384;
  background-size: 600% 100%;
  background-repeat: no-repeat;
  transition: filter 120ms ease-out, opacity 200ms ease-out, transform 80ms ease-out;
  transform:
    translateX(calc(-50% + var(--impulse, 0px)))
    translateY(calc(var(--bob, 0px) * -1))
    skewX(var(--lean-skew, 0deg))
    scale(var(--scale, 1))
    rotate(calc(var(--tilt, 0deg) + var(--lean-rot, 0deg)));
  transform-origin: 50% 90%;
  will-change: transform, filter;
}

.fighter-player {
  background-image: var(--player-sprite);
}

.fighter-enemy {
  background-image: var(--enemy-sprite);
  transform:
    translateX(calc(-50% - var(--impulse, 0px)))
    translateY(calc(var(--bob, 0px) * -1))
    scaleX(-1)
    skewX(var(--lean-skew, 0deg))
    scale(var(--scale, 1))
    rotate(calc(var(--tilt, 0deg) + var(--lean-rot, 0deg)));
}

.fight-screen[data-assets-ready="false"] .fighter-player,
.fight-screen[data-assets-ready="false"] .fighter-enemy {
  display: none;
}

.fighter.hit { filter: brightness(1.45); }
.fighter.guarding { filter: brightness(1.08) contrast(1.08); }
.fighter.feinting { transition-duration: 55ms; }
.fighter.taunting { filter: brightness(1.15) saturate(1.12); }
.fighter.crouch { --scale: 0.84; }
.fighter.anim-walk { animation: fighterWalk 520ms ease-in-out infinite; }
.fighter.anim-punch,
.fighter.anim-kick,
.fighter.anim-elbow,
.fighter.anim-knee,
.fighter.anim-clinch { animation: fighterStrike 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.fighter.anim-block { animation: fighterBrace 260ms ease-out both; }
.fighter.anim-hit { animation: fighterRecoil 260ms ease-out both; }
.fighter.anim-dodge { animation: fighterSlip 260ms ease-out both; }
.fighter.knockdown {
  --tilt: 78deg;
  opacity: 0.72;
}

.frame-0 { background-position: 0% 0; }
.frame-1 { background-position: 20% 0; }
.frame-2 { background-position: 40% 0; }
.frame-3 { background-position: 60% 0; }
.frame-4 { background-position: 80% 0; }
.frame-5 { background-position: 100% 0; }

.impact {
  position: absolute;
  z-index: 4;
  width: 14.7%;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}

.impact-player { left: 50%; top: 39%; }
.impact-enemy { left: 27%; top: 42%; }
.smoke { left: 39%; top: 58%; width: 25%; }
.impact.show {
  opacity: 1;
  transform: scale(1.24);
}

.fight-controls {
  position: absolute;
  z-index: 8;
  left: 4%;
  right: 4%;
  bottom: 1.6%;
  height: 23.4%;
}

.joystick,
.action,
.move-btn,
.back-hotspot,
.big-entry,
.fight-banner {
  position: absolute;
}

.joystick {
  left: 1%;
  bottom: 55%;
  width: min(19%, 68px);
  aspect-ratio: 1;
}

.joystick img,
.move-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 90ms ease, filter 90ms ease;
}

.action img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  transition: transform 90ms ease, filter 90ms ease;
}

.joystick:active img,
.action:active img,
.move-btn:active img,
.joystick.pressed img,
.action.pressed img,
.move-btn.pressed img {
  filter: brightness(1.25) saturate(1.12);
  transform: scale(0.92);
}

.joystick span,
.action span,
.move-btn span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  overflow: hidden;
  font-size: clamp(0.46rem, 2.05cqw, 0.6rem);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 4px #000;
}

.joystick span { bottom: 7%; color: var(--gold); }
.action span { display: none; }
.move-btn {
  width: min(9.2%, 34px);
  aspect-ratio: 1;
}

.move-back { left: 0.5%; bottom: 0; }
.move-forward { left: 21.5%; bottom: 0; }
.move-crouch { left: 11%; bottom: 0; }
.move-jump { left: 11%; bottom: 31%; }

.action { width: min(12.6%, 46px); aspect-ratio: 1; }
.kick { right: 22%; top: 0; }
.punch { right: 5%; top: 6%; }
.elbow { right: 39%; top: 25%; }
.knee { right: 22%; top: 47%; }
.block { right: 5%; top: 48%; }
.clinch { right: 39%; top: 62%; }

.fight-screen:not([data-phase="active_combat"]) .fight-controls button {
  opacity: 0.45;
  filter: saturate(0.7);
}

.back-hotspot {
  z-index: 10;
  left: 2.4%;
  top: 2.7%;
  min-width: 8.8cqw;
  height: 4.2cqh;
  padding: 0 1.8cqw;
  color: var(--gold);
  font-size: clamp(0.5rem, 2.05cqw, 0.66rem);
}

.screen-title {
  position: absolute;
  z-index: 8;
  left: 4%;
  right: 4%;
  top: 2.3%;
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen-title > img {
  position: absolute;
  left: 27%;
  right: 7%;
  height: 78%;
  width: 66%;
  object-fit: fill;
}

.screen-title strong {
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: 56%;
  font-size: clamp(0.95rem, 4.8cqw, 1.3rem);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.screen-title button {
  position: absolute;
  z-index: 2;
  left: 0;
  width: 18%;
  height: 68%;
  color: var(--gold);
  font-size: clamp(0.62rem, 2.55cqw, 0.78rem);
}

.profile-body {
  position: absolute;
  z-index: 4;
  left: 5%;
  right: 5%;
  top: 13%;
  bottom: 13%;
}

.profile-copy {
  position: absolute;
  left: 0;
  top: 5%;
  width: 44%;
  padding: 2cqh 3cqw;
  background-image: url("assets/ui/menu_button_generated.webp");
  background-size: 100% 100%;
}

.profile-copy h1,
.profile-copy h2,
.profile-copy p {
  margin: 0 0 0.65cqh;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profile-copy h1 { font-size: clamp(1.08rem, 5.2cqw, 1.58rem); line-height: 1; }
.profile-copy h2,
.profile-copy p { font-size: clamp(0.66rem, 2.9cqw, 0.86rem); color: var(--gold); }

.stat-list {
  margin: 1.5cqh 0;
  padding: 0;
  list-style: none;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.58rem, 2.45cqw, 0.74rem);
  line-height: 1.65;
}

.stat-list li {
  display: flex;
  justify-content: space-between;
  gap: 1cqw;
}

.stat-list span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.upgrade {
  width: 100%;
  height: 5.4cqh;
  color: var(--gold);
  font-size: clamp(0.78rem, 3.5cqw, 1rem);
}

.profile-fighter {
  left: auto;
  right: 3%;
  bottom: 0;
  width: 56%;
  transform: translateX(0);
}

.stage-pin {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1cqw;
  min-width: 35%;
  max-width: 44%;
  min-height: 6.4cqh;
  padding: 0.75cqh 2cqw;
  opacity: 0.62;
}

.stage-pin.unlocked { opacity: 1; }
.stage-pin img {
  width: 7.6cqw;
  height: 7.6cqw;
  object-fit: contain;
}

.stage-pin span {
  overflow: hidden;
  font-size: clamp(0.64rem, 2.9cqw, 0.84rem);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pin-1 { left: 9%; top: 18%; }
.pin-2 { right: 6%; top: 31%; }
.pin-3 { left: 14%; top: 49%; }
.pin-4 { right: 7%; top: 66%; }

.fight-banner {
  z-index: 6;
  left: 18%;
  right: 18%;
  bottom: 5%;
}

.equipment-grid {
  position: absolute;
  z-index: 5;
  left: 5.8%;
  right: 5.8%;
  top: 16%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.35cqh 2.6cqw;
}

.equipment-grid button {
  min-height: 16.2cqh;
  padding: 1.25cqh 2.4cqw 1.45cqh;
  align-content: center;
  transition: transform 160ms ease, filter 160ms ease;
}

.equipment-grid button.equipped {
  background-image: url("assets/ui/menu_button_active_generated.webp");
}

.equipment-grid button:active {
  transform: scale(0.975);
  filter: brightness(1.18);
}

.equipment-grid img {
  width: clamp(72px, 21cqw, 92px);
  height: clamp(72px, 21cqw, 92px);
  object-fit: contain;
  filter: drop-shadow(0 0.6cqh 0.7cqh rgba(0, 0, 0, 0.55));
}

.equipment-grid span,
.equipment-grid small {
  display: block;
  max-width: 96%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.equipment-grid span {
  margin-top: 0.35cqh;
  font-size: clamp(0.64rem, 2.65cqw, 0.8rem);
  line-height: 1.05;
}

.equipment-grid small {
  font-family: Arial, sans-serif;
  font-size: clamp(0.5rem, 2.05cqw, 0.62rem);
  color: var(--gold);
  line-height: 1.1;
}

.career-card {
  position: absolute;
  z-index: 5;
  left: 6%;
  right: 6%;
  top: 12.3%;
  height: 10.3%;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 0.95cqh 3.6cqw;
}

.career-card img {
  width: clamp(48px, 14.2cqw, 60px);
  height: clamp(48px, 14.2cqw, 60px);
  object-fit: cover;
}

.career-card div { min-width: 0; }
.career-card small,
.career-card strong,
.career-card span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.career-card small,
.career-card span {
  font-family: Arial, sans-serif;
  font-weight: 800;
  color: #e0b575;
}

.career-card small { font-size: clamp(0.5rem, 2.08cqw, 0.63rem); }
.career-card strong { font-size: clamp(0.78rem, 3.25cqw, 1rem); line-height: 1; }
.career-card span { font-size: clamp(0.55rem, 2.25cqw, 0.7rem); }

.objective-strip {
  position: absolute;
  z-index: 5;
  left: 6.5%;
  right: 6.5%;
  top: 23.8%;
  min-height: 6.05cqh;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 0.95cqh 3.6cqw;
  font-family: Arial, sans-serif;
  font-size: clamp(0.58rem, 2.35cqw, 0.72rem);
  font-weight: 800;
  line-height: 1.2;
}

.objective-strip img {
  width: clamp(26px, 7.3cqw, 32px);
  height: clamp(26px, 7.3cqw, 32px);
  object-fit: contain;
}

.career-progress-panel {
  position: absolute;
  z-index: 5;
  left: 6.5%;
  right: 6.5%;
  top: 31.1%;
  min-height: 4.9cqh;
  display: grid;
  align-content: center;
  gap: 0.52cqh;
  padding: 0.65cqh 3.6cqw;
}

.career-progress-panel span {
  overflow: hidden;
  color: #e3bd7e;
  font-family: Arial, sans-serif;
  font-size: clamp(0.54rem, 2.18cqw, 0.68rem);
  font-weight: 900;
  line-height: 1.16;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.level-list {
  position: absolute;
  z-index: 6;
  left: 6%;
  right: 6%;
  top: 37.3%;
  bottom: 15.8%;
  display: grid;
  gap: 0.62cqh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0.45cqw 1.1cqh;
  scrollbar-width: none;
}

.level-list::-webkit-scrollbar { display: none; }

.level-card {
  min-height: 7.15cqh;
  display: grid;
  grid-template-columns: 12% minmax(0, 1fr) 17.5%;
  align-items: center;
  gap: 1.8cqw;
  padding: 0.65cqh 2.8cqw;
  text-align: left;
}

.level-card.current,
.level-card.completed {
  background-image: url("assets/ui/menu_button_active_generated.webp");
}

.level-card.locked {
  opacity: 0.52;
  filter: saturate(0.65);
}

.level-card.boss {
  filter: brightness(1.08) contrast(1.06);
}

.level-card > img {
  width: clamp(34px, 9.6cqw, 42px);
  height: clamp(34px, 9.6cqw, 42px);
  object-fit: cover;
}

.level-main {
  min-width: 0;
  display: grid;
  gap: 0.18cqh;
}

.level-main small,
.level-main strong,
.level-main span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.level-main small,
.level-main span,
.level-meta {
  font-family: Arial, sans-serif;
  font-weight: 900;
}

.level-main small {
  color: #f3c76b;
  font-size: clamp(0.43rem, 1.72cqw, 0.54rem);
}

.level-main strong {
  color: #fff0bd;
  font-size: clamp(0.58rem, 2.42cqw, 0.74rem);
  line-height: 1;
}

.level-main span {
  color: #d8ad71;
  font-size: clamp(0.43rem, 1.75cqw, 0.55rem);
}

.level-meta {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 0.24cqh;
  color: #f0c66e;
  font-size: clamp(0.43rem, 1.72cqw, 0.55rem);
  line-height: 1;
  text-align: right;
}

.star-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.3cqw;
}

.star-row img {
  width: clamp(12px, 3.25cqw, 15px);
  height: clamp(12px, 3.25cqw, 15px);
  object-fit: contain;
  opacity: 0.38;
}

.star-row img.earned { opacity: 1; }

.big-entry {
  z-index: 8;
  left: 8%;
  right: 8%;
  bottom: 6.2%;
  height: 9.2cqh;
}

.tutorial-brand {
  position: absolute;
  z-index: 5;
  left: 9%;
  right: 9%;
  top: 14.4%;
}

.tutorial-card {
  position: absolute;
  z-index: 6;
  left: 6.5%;
  right: 6.5%;
  top: 31%;
  min-height: 58cqh;
  padding: 2.2cqh 4.4cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25cqh;
  text-align: center;
}

.tutorial-card > small {
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: clamp(0.56rem, 2.3cqw, 0.7rem);
  font-weight: 900;
  line-height: 1;
}

.tutorial-card > strong {
  max-width: 95%;
  color: var(--cream);
  font-size: clamp(0.86rem, 3.7cqw, 1.08rem);
  line-height: 1.08;
}

.tutorial-steps {
  width: 100%;
  display: grid;
  gap: 0.95cqh;
}

.tutorial-steps article {
  min-height: 9.4cqh;
  display: grid;
  grid-template-columns: 15% 22% 1fr;
  align-items: center;
  gap: 2cqw;
  padding: 0.7cqh 2.2cqw;
  border: 1px solid rgba(243, 199, 107, 0.18);
  background: rgba(5, 4, 3, 0.54);
  text-align: left;
}

.tutorial-steps img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.tutorial-steps span {
  overflow: hidden;
  color: var(--gold);
  font-size: clamp(0.68rem, 2.9cqw, 0.86rem);
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tutorial-steps p {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #f6cea0;
  font-family: Arial, sans-serif;
  font-size: clamp(0.52rem, 2.05cqw, 0.64rem);
  font-weight: 800;
  line-height: 1.2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tutorial-actions {
  width: 100%;
  margin-top: auto;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 2.5cqw;
}

.tutorial-actions button {
  height: 5.6cqh;
  min-height: 38px;
  background-image: url("assets/ui/menu_button_active_generated.webp");
  background-size: 100% 100%;
  color: var(--gold);
  font-size: clamp(0.66rem, 2.75cqw, 0.84rem);
  transition: transform 150ms ease, filter 150ms ease;
}

.tutorial-actions button:first-child {
  background-image: url("assets/ui/menu_button_generated.webp");
  color: #dfba77;
}

.tutorial-actions button:hover {
  filter: brightness(1.12);
}

.bracket-list,
.settings-list {
  position: absolute;
  z-index: 5;
  left: 7%;
  right: 7%;
  top: 17%;
  display: grid;
  gap: 1.3cqh;
}

.bracket-list button,
.settings-list button {
  min-height: 10.5cqh;
  display: grid;
  grid-template-columns: 16% 1fr auto;
  align-items: center;
  gap: 2cqw;
  padding: 1cqh 4cqw;
  text-align: left;
}

.bracket-list img,
.settings-list img {
  width: 10.5cqw;
  height: 10.5cqw;
  object-fit: cover;
}

.bracket-list span,
.bracket-list b,
.settings-list span,
.settings-list b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bracket-list span,
.settings-list span { font-size: clamp(0.8rem, 3.4cqw, 0.98rem); }
.bracket-list b,
.settings-list b {
  font-family: Arial, sans-serif;
  font-size: clamp(0.58rem, 2.35cqw, 0.72rem);
  color: var(--gold);
}

.debug-scroll {
  position: absolute;
  z-index: 5;
  left: 5%;
  right: 5%;
  top: 15.5%;
  bottom: 3%;
  display: flex;
  flex-direction: column;
  gap: 1.25cqh;
  overflow: auto;
  padding: 0 1cqw 1.2cqh;
  scrollbar-width: thin;
}

.debug-panel {
  flex: 0 0 auto;
  padding: 1.35cqh 3.2cqw;
}

.debug-panel h2 {
  margin: 0 0 0.9cqh;
  color: var(--gold);
  font-size: clamp(0.76rem, 3.2cqw, 0.96rem);
  line-height: 1;
}

.debug-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8cqh 2cqw;
}

.debug-metric,
.debug-level {
  min-width: 0;
  padding: 0.7cqh 2cqw;
  border: 1px solid rgba(243, 199, 107, 0.25);
  background: rgba(5, 4, 3, 0.58);
}

.debug-metric small,
.debug-level small,
.debug-fighter small {
  display: block;
  overflow: hidden;
  color: rgba(255, 226, 168, 0.74);
  font-family: Arial, sans-serif;
  font-size: clamp(0.52rem, 2.05cqw, 0.64rem);
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-metric strong,
.debug-level strong,
.debug-fighter strong {
  display: block;
  overflow: hidden;
  color: var(--cream);
  font-size: clamp(0.64rem, 2.7cqw, 0.82rem);
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-fighters {
  display: grid;
  gap: 1cqh;
}

.debug-fighter {
  display: grid;
  grid-template-columns: 20% 1fr;
  gap: 2.2cqw;
  align-items: center;
  min-width: 0;
  padding: 0.8cqh 2cqw;
  border: 1px solid rgba(243, 199, 107, 0.22);
  background: rgba(5, 4, 3, 0.56);
}

.debug-fighter img {
  width: 100%;
  aspect-ratio: 1 / 1.5;
  object-fit: contain;
  object-position: left center;
}

.debug-fighter div {
  min-width: 0;
}

.debug-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4cqh 1.1cqw;
  margin-top: 0.55cqh;
}

.debug-tags span {
  max-width: 100%;
  overflow: hidden;
  padding: 0.22cqh 1.2cqw;
  border: 1px solid rgba(243, 199, 107, 0.2);
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: clamp(0.48rem, 1.95cqw, 0.58rem);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-levels {
  display: grid;
  gap: 0.75cqh;
}

.debug-level {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1cqw;
}

.debug-level span {
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: clamp(0.5rem, 2cqw, 0.6rem);
  font-weight: 900;
  white-space: nowrap;
}

.challenge-card {
  position: absolute;
  z-index: 5;
  left: 8%;
  right: 8%;
  top: 18%;
  min-height: 27cqh;
  padding: 2.2cqh 5cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqh;
  text-align: center;
}

.challenge-card img {
  width: 15cqw;
  height: 15cqw;
  object-fit: contain;
}

.challenge-card strong {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(1rem, 4.4cqw, 1.25rem);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.challenge-card span {
  font-family: Arial, sans-serif;
  font-size: clamp(0.62rem, 2.45cqw, 0.76rem);
  font-weight: 800;
  color: var(--gold);
}

.challenge-card button {
  width: 54%;
  height: 5.3cqh;
  color: var(--gold);
  font-size: clamp(0.76rem, 3.2cqw, 0.94rem);
}

.achievements {
  position: absolute;
  z-index: 5;
  left: 8%;
  right: 8%;
  top: 49%;
  display: grid;
  gap: 1cqh;
}

.achievements span {
  min-height: 5.7cqh;
  display: flex;
  align-items: center;
  padding: 0 4cqw;
  background-image: url("assets/ui/menu_button_generated.webp");
  background-size: 100% 100%;
  color: #a98b58;
  font-size: clamp(0.68rem, 2.9cqw, 0.84rem);
}

.achievements span.done {
  color: var(--gold);
  background-image: url("assets/ui/menu_button_active_generated.webp");
}

.result-panel {
  position: absolute;
  z-index: 12;
  left: 8%;
  right: 8%;
  top: 35%;
  min-height: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqh;
  padding: 3cqh 5cqw;
  background: var(--ink);
  animation: resultIn 360ms ease-out both;
}

.result-panel[hidden] { display: none; }
.result-panel > img {
  width: 82%;
  object-fit: contain;
}

.result-panel strong {
  font-size: clamp(1.2rem, 5.3cqw, 1.56rem);
  color: var(--gold);
}

.result-panel span {
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(0.64rem, 2.6cqw, 0.8rem);
}

.result-panel div {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3cqw;
}

.result-panel button {
  height: 5.2cqh;
  color: var(--gold);
  font-size: clamp(0.68rem, 2.8cqw, 0.84rem);
}

@keyframes screenIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes desktopBackdropDrift {
  0% { transform: scale(1.06) translate3d(-0.8%, -0.4%, 0); filter: blur(16px) brightness(0.48) saturate(1.1); }
  100% { transform: scale(1.1) translate3d(0.8%, 0.5%, 0); filter: blur(18px) brightness(0.56) saturate(1.16); }
}

@keyframes desktopAtmosphereFloat {
  0% { transform: translate3d(-0.8%, 1.2%, 0) scale(1.02); opacity: 0.18; }
  50% { opacity: 0.26; }
  100% { transform: translate3d(0.8%, -1.2%, 0) scale(1.04); opacity: 0.22; }
}

@keyframes homeBackdropDrift {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.018); filter: brightness(1.05) saturate(1.04); }
}

@keyframes homeTitlePulse {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-0.35cqh) scale(1.012); filter: brightness(1.13); }
}

@keyframes homePanelIn {
  from { opacity: 0; transform: translateY(1.2cqh) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes homePanelGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@keyframes playCtaPulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.18) saturate(1.08); transform: scale(1.018); }
}

@keyframes loaderPulse {
  from { transform: scale(0.96); filter: brightness(0.92); }
  to { transform: scale(1.04); filter: brightness(1.18); }
}

@keyframes popText {
  0% { transform: rotate(-5deg) scale(0.88); opacity: 0.2; }
  100% { transform: rotate(-5deg) scale(1); opacity: 1; }
}

@keyframes resultIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.shake { animation: shakeScreen 240ms linear both; }

@keyframes shakeScreen {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(calc(-1.1cqw * var(--shake-strength, 1)), calc(0.5cqh * var(--shake-strength, 1))); }
  45% { transform: translate(calc(1cqw * var(--shake-strength, 1)), calc(-0.4cqh * var(--shake-strength, 1))); }
  70% { transform: translate(calc(-0.6cqw * var(--shake-strength, 1)), calc(-0.3cqh * var(--shake-strength, 1))); }
}

@keyframes fighterWalk {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@keyframes fighterStrike {
  0% { filter: brightness(1); }
  38% { filter: brightness(1.18) saturate(1.08); }
  100% { filter: brightness(1); }
}

@keyframes fighterBrace {
  0% { filter: brightness(1.18) contrast(1.08); }
  100% { filter: brightness(1.06) contrast(1.08); }
}

@keyframes fighterRecoil {
  0% { filter: brightness(1.65) saturate(1.12); }
  100% { filter: brightness(1); }
}

@keyframes fighterSlip {
  0% { filter: brightness(1.18); }
  100% { filter: brightness(1); }
}

@media (min-width: 700px) {
  body::before,
  body::after {
    display: block;
  }

  body::before {
    z-index: 0;
    background-image: url("assets/backgrounds/home_generated.webp");
    background-size: cover;
    background-position: center;
    animation: desktopBackdropDrift 14000ms ease-in-out infinite alternate;
  }

  body::after {
    z-index: 1;
    background-image: url("assets/effects/smoke_impact_01.webp"), url("assets/effects/smoke_impact_01.webp"), url("assets/backgrounds/home_generated.webp");
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 24vw auto, 20vw auto, 30vw auto;
    background-position: 15vw 78vh, 85vw 22vh, 86vw 68vh;
    opacity: 0.68;
    mix-blend-mode: screen;
    animation: desktopAtmosphereFloat 10500ms ease-in-out infinite alternate;
  }

  #game {
    width: min(100vw, calc(100vh * 9 / 16));
    height: min(100vh, calc(100vw * 16 / 9));
    box-shadow: 0 0 0 1px rgba(243, 199, 107, 0.12), 0 0 52px rgba(0, 0, 0, 0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}