@font-face {
  font-family: "Bungee";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/bungee-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../assets/fonts/nunito-latin.woff2") format("woff2");
}

:root {
  --ink: #06161a;
  --ink-2: #0c2a30;
  --foam: #f3fff6;
  --muted: #9fc0b8;
  --ember: #ff6b2c;
  --ember-deep: #c43c00;
  --volt: #b8ff3c;
  --cyan: #2de2e6;
  --danger: #ff3b5c;
  --ok: #3ddc97;
  --panel: rgba(6, 22, 26, 0.72);
  --radius: 18px;
  --font-display: "Bungee", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* No double-tap zoom anywhere; taps and scrolling still work. The fight screen tightens this to none below. */
* {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--foam);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

input,
textarea {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

/* Rapid taps on the fight controls must never zoom, pan, select text or open a long-press menu. */
#screen-battle,
#screen-battle *,
.controls,
.controls * {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  min-height: 100dvh;
  overflow: hidden;
}

#app {
  min-height: 100dvh;
  position: relative;
}

.screen {
  display: none;
  min-height: 100dvh;
  flex-direction: column;
  padding: 1rem 1.1rem 1.4rem;
  position: absolute;
  inset: 0;
  overflow: auto;
}

.screen.active {
  display: flex;
  animation: screen-in 0.35s ease-out;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.btn {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.05rem;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  position: relative;
  z-index: 3;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.btn:active {
  transform: scale(0.96);
}

.btn-primary {
  background: linear-gradient(180deg, var(--ember), var(--ember-deep));
  color: #fff8f2;
  box-shadow: 0 10px 0 #6b1f00, 0 16px 30px rgba(255, 107, 44, 0.35);
}

.btn-primary:hover {
  filter: brightness(1.06);
}

.btn-secondary {
  background: rgba(243, 255, 246, 0.12);
  color: var(--foam);
  border: 2px solid rgba(243, 255, 246, 0.25);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  padding: 0.4rem 0.7rem;
  font-size: 0.95rem;
}

/* ---------- Sound toggle ---------- */
.sound-toggle {
  position: fixed;
  top: max(0.6rem, env(safe-area-inset-top));
  right: 0.7rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 2px solid rgba(243, 255, 246, 0.25);
  background: rgba(6, 22, 26, 0.85);
  color: var(--foam);
  border-radius: 999px;
  padding: 0.3rem 0.7rem 0.3rem 0.45rem;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 0.8rem;
  cursor: pointer;
}

.sound-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-toggle .spk {
  fill: currentColor;
}

.sound-toggle .mute-x {
  display: none;
  stroke: var(--danger);
}

.sound-toggle[data-vol="1"] .w2 {
  display: none;
}

.sound-toggle[data-vol="2"] .wave {
  display: none;
}

.sound-toggle[data-vol="2"] .mute-x {
  display: inline;
}

#screen-battle.active ~ .sound-toggle,
body:has(#screen-battle.active) .sound-toggle {
  top: auto;
  bottom: calc(0.5rem + env(safe-area-inset-bottom));
  right: 50%;
  translate: 50% 0;
}

/* ---------- Title ---------- */
#screen-title {
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
}

.title-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 70% 20%, rgba(255, 107, 44, 0.45), transparent 55%),
    radial-gradient(ellipse 60% 40% at 15% 70%, rgba(45, 226, 230, 0.22), transparent 50%),
    linear-gradient(165deg, #041215 0%, #0a2f28 42%, #123a28 70%, #1a1a0a 100%);
  animation: sky-pulse 8s ease-in-out infinite alternate;
}

@keyframes sky-pulse {
  from {
    filter: saturate(1);
  }
  to {
    filter: saturate(1.2) brightness(1.05);
  }
}

.title-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (max-width: 700px) {
  .title-canvas {
    opacity: 0.45;
  }
}

.title-content {
  position: relative;
  z-index: 2;
  padding: 2.5rem 1.4rem 3rem;
  max-width: 560px;
  pointer-events: auto;
}

.title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1rem;
}

.brand {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 11vw, 4.6rem);
  line-height: 0.95;
  margin: 0 0 0.85rem;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff7e8 20%, var(--ember) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35));
  animation: brand-pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes brand-pop {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.tagline {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(1.15rem, 3.5vw, 1.45rem);
  margin: 0 0 0.45rem;
  color: var(--foam);
}

.sub {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-weight: 700;
  max-width: 34ch;
}

/* ---------- Welcome ---------- */
#screen-welcome {
  padding: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#screen-welcome.leaving {
  animation: welcome-out 0.32s ease-in forwards;
}

@keyframes welcome-out {
  to {
    opacity: 0;
    transform: scale(1.06);
  }
}

.welcome-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(255, 107, 44, 0.5), transparent 60%),
    radial-gradient(ellipse 50% 35% at 12% 80%, rgba(45, 226, 230, 0.25), transparent 55%),
    radial-gradient(ellipse 50% 35% at 88% 80%, rgba(184, 255, 60, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 12% at 50% 94%, rgba(255, 229, 102, 0.18), transparent 70%),
    linear-gradient(170deg, #041215 0%, #0a2f28 45%, #123a28 75%, #1a1a0a 100%);
  animation: sky-pulse 6s ease-in-out infinite alternate;
}

.welcome-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti i {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  background: var(--c);
  border-radius: 2px;
  opacity: 0.9;
  animation: confetti-fall var(--dur) linear var(--delay) infinite;
}

.confetti i.round {
  border-radius: 50%;
  height: var(--w);
}

@keyframes confetti-fall {
  from {
    transform: translate(0, -5vh) rotate(0deg);
  }
  to {
    transform: translate(var(--drift), 108dvh) rotate(var(--spin));
  }
}

.welcome-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: min(980px, 92vw);
  padding: 1.5rem 1.2rem;
  margin-bottom: 8vh;
}

.welcome-brand {
  margin: 0 0 0.9rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(6, 22, 26, 0.6);
  border: 2px solid rgba(243, 255, 246, 0.18);
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 2.4vw, 1rem);
  letter-spacing: 0.06em;
  color: var(--volt);
  animation: brand-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.welcome-message {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-weight: 400;
}

.welcome-names {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8.5vw, 4.2rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-wrap: balance;
  background: linear-gradient(180deg, #fff7e8 15%, #ffd166 55%, var(--ember) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.4));
  animation: welcome-pop 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s both, welcome-wiggle 3.2s ease-in-out 1.2s infinite;
}

.welcome-line {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(1.15rem, 3.6vw, 1.8rem);
  line-height: 1.2;
  color: var(--foam);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  animation: brand-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) 0.45s both;
}

.welcome-heart {
  width: clamp(28px, 6vw, 40px);
  height: clamp(28px, 6vw, 40px);
  margin: 0.7rem 0 1.1rem;
  fill: var(--danger);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.4));
  animation: brand-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.7s both, heart-beat 1.1s ease-in-out 1.2s infinite;
}

.welcome-go {
  font-size: clamp(1.25rem, 3.8vw, 1.6rem);
  padding: 1rem 2.6rem;
  animation: brand-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.9s both, go-pulse 1.6s ease-in-out 1.6s infinite;
}

.welcome-go:focus-visible {
  outline: 3px solid var(--volt);
  outline-offset: 4px;
}

.welcome-hint {
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.9rem;
  animation: hint-blink 2s ease-in-out 1.4s infinite both;
}

@keyframes welcome-pop {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-6deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes welcome-wiggle {
  0%,
  86%,
  100% {
    transform: none;
  }
  90% {
    transform: rotate(-2.5deg) scale(1.03);
  }
  95% {
    transform: rotate(2.5deg) scale(1.03);
  }
}

@keyframes heart-beat {
  0%,
  60%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.22);
  }
  30% {
    transform: scale(0.96);
  }
  45% {
    transform: scale(1.12);
  }
}

@keyframes go-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes hint-blink {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@media (orientation: portrait) {
  .welcome-content {
    max-width: 92vw;
    margin-bottom: 26dvh;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .welcome-content {
    padding: 0.6rem 1rem;
    margin-bottom: 4vh;
  }

  .welcome-brand {
    margin-bottom: 0.5rem;
  }

  .welcome-names {
    font-size: clamp(1.7rem, 6vh + 1rem, 2.8rem);
  }

  .welcome-line {
    font-size: clamp(1rem, 4.5vh, 1.3rem);
  }

  .welcome-heart {
    margin: 0.4rem 0 0.7rem;
  }

  .welcome-go {
    padding: 0.75rem 2.2rem;
  }

  .welcome-hint {
    margin-top: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .confetti {
    display: none;
  }

  .welcome-names,
  .welcome-line,
  .welcome-heart,
  .welcome-go,
  .welcome-hint,
  .welcome-brand {
    animation: none;
  }
}

/* ---------- Headers / roster ---------- */
.screen-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-right: 6.5rem;
}

.screen-header h2 {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 4vw, 1.45rem);
  font-weight: 400;
}

.step {
  color: var(--muted);
  font-weight: 800;
  font-size: 0.85rem;
}

#screen-pick-you,
#screen-pick-enemy,
#screen-customize {
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(255, 107, 44, 0.18), transparent 60%),
    linear-gradient(180deg, #071c20, #0a2a24 60%, #06161a);
}

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  padding-bottom: 1rem;
}

.fighter-card {
  appearance: none;
  border: 2px solid rgba(243, 255, 246, 0.12);
  background:
    radial-gradient(ellipse at 50% 85%, rgba(184, 255, 60, 0.1), transparent 60%),
    rgba(8, 30, 34, 0.85);
  border-radius: var(--radius);
  padding: 0.6rem 0.6rem 0.85rem;
  color: inherit;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-body);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.fighter-card:hover,
.fighter-card:focus-visible {
  border-color: var(--volt);
  transform: translateY(-3px);
  outline: none;
}

.fighter-card .mini {
  display: block;
  width: 100%;
  height: 110px;
  margin-bottom: 0.35rem;
}

.fighter-card .name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin: 0;
}

.fighter-card .kind {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Customize ---------- */
.customize-layout {
  display: grid;
  gap: 1rem;
  align-items: start;
  flex: 1;
}

@media (min-width: 760px) {
  .customize-layout {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}

.preview-stage {
  background:
    radial-gradient(circle at 50% 80%, rgba(184, 255, 60, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.25));
  border: 2px solid rgba(243, 255, 246, 0.1);
  border-radius: 24px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.fighter-preview {
  width: min(360px, 84vw);
  height: 240px;
  display: block;
}

.preview-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0.4rem 0 0;
}

.preview-moves {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.85rem;
  text-align: center;
}

.customize-controls fieldset {
  border: 2px solid rgba(243, 255, 246, 0.12);
  border-radius: 16px;
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.9rem 1rem;
}

.customize-controls legend {
  font-weight: 900;
  padding: 0 0.35rem;
  color: var(--volt);
}

.style-row,
.color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.style-chip,
.color-chip {
  appearance: none;
  border: 2px solid transparent;
  cursor: pointer;
  border-radius: 999px;
}

.style-chip {
  background: rgba(243, 255, 246, 0.08);
  color: var(--foam);
  font-family: var(--font-body);
  font-weight: 800;
  padding: 0.45rem 0.9rem;
}

.style-chip.active,
.color-chip.active {
  border-color: var(--volt);
  box-shadow: 0 0 0 2px rgba(184, 255, 60, 0.25);
}

.color-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

#btn-customize-next {
  width: 100%;
}

.special-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.special-arrow {
  appearance: none;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(243, 255, 246, 0.18);
  background: rgba(243, 255, 246, 0.08);
  color: var(--volt);
  font-size: 1.2rem;
  cursor: pointer;
  touch-action: manipulation;
}

.special-arrow:active {
  transform: scale(0.92);
}

.special-face {
  appearance: none;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 2px solid var(--volt);
  border-radius: 16px;
  background: rgba(184, 255, 60, 0.08);
  color: var(--foam);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  touch-action: manipulation;
}

.special-face.pop .special-icon {
  animation: special-pop 0.35s ease-out;
}

.special-icon {
  font-size: 1.9rem;
  line-height: 1;
}

.special-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.special-name {
  font-family: var(--font-display);
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.special-sub {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
}

@keyframes special-pop {
  40% {
    transform: scale(1.35) rotate(-8deg);
  }
}

/* ---------- Battle ---------- */
#screen-battle {
  padding: 0;
  background: #05080c;
  overflow: hidden;
}

.arena {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.stage {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06), 0 20px 50px rgba(0, 0, 0, 0.5);
}

.stage canvas {
  display: block;
}

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem;
  align-items: start;
  padding: 0.55rem 0.8rem 0;
  pointer-events: none;
}

.hud-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.hud-enemy .hud-row {
  justify-content: flex-end;
}

.hud-name {
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1.6vw, 0.9rem);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}

.pips {
  display: inline-flex;
  gap: 0.25rem;
}

.pip {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.4);
}

.pip.won {
  background: var(--volt);
  border-color: #fff;
  box-shadow: 0 0 8px var(--volt);
}

.hp-bar {
  position: relative;
  height: clamp(12px, 2.4vw, 20px);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.75);
  overflow: hidden;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}

.hp-fill,
.hp-lag {
  position: absolute;
  inset: 0;
  transform-origin: left center;
}

.hp-lag {
  background: #fff4c2;
}

.hp-fill.you {
  background: linear-gradient(180deg, #d4ff6a, #3cbf3a);
}

.hp-fill.enemy {
  background: linear-gradient(180deg, #d4ff6a, #3cbf3a);
}

.hp-fill.low {
  background: linear-gradient(180deg, #ffb36a, #e0342f);
}

.hp-fill.low::after,
.sp-meter.ready .sp-fill::after,
.su-meter.full .su-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: bar-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes bar-pulse {
  to {
    opacity: 0.28;
  }
}

.hud-enemy .hp-fill,
.hud-enemy .hp-lag,
.sp-meter.enemy .sp-fill {
  transform-origin: right center;
}

.sp-meter {
  position: relative;
  margin-top: 0.25rem;
  width: 55%;
  height: 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.sp-meter.enemy {
  margin-left: auto;
}

.sp-meter span {
  position: absolute;
  inset: 0;
  font-size: 7px;
  line-height: 6px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.sp-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #2de2e6, #7ef9ff);
  transform-origin: left center;
}

.su-meter {
  position: relative;
  margin-top: 0.2rem;
  width: 55%;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(255, 229, 102, 0.5);
  overflow: hidden;
}

.su-meter.enemy {
  margin-left: auto;
}

.su-meter span {
  position: absolute;
  inset: 0;
  font-size: 7px;
  line-height: 5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
}

.su-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff9f1c, #ffe566);
  transform-origin: left center;
  transform: scaleX(0);
}

.su-meter.enemy .su-fill {
  transform-origin: right center;
}

.su-meter.full {
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 229, 102, 0.9);
}

.su-meter.full .su-fill {
  background: linear-gradient(90deg, #ff5d8f, #ffb347, #fff275, #7cf29c, #6cc6ff, #b388ff);
}

.su-meter.full .su-fill::after {
  animation-duration: 0.4s;
}

.sp-meter.ready .sp-fill {
  background: linear-gradient(90deg, var(--volt), #fff);
}

.sp-meter.ready .sp-fill::after {
  animation-duration: 0.5s;
}

.hud,
.battle-bar {
  transition: opacity 0.2s ease;
}

.stage.super-freeze .hud,
.stage.super-freeze .battle-bar {
  opacity: 0.15;
}

.hud-center {
  text-align: center;
}

.timer {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.6vw, 2.2rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6);
  min-width: 2.2ch;
}

.timer.hurry {
  color: #ff5d73;
}

.round-label {
  font-weight: 900;
  font-size: clamp(0.55rem, 1.3vw, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--volt);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.battle-bar {
  position: absolute;
  z-index: 4;
  left: 50%;
  translate: -50% 0;
  top: clamp(46px, 9vw, 70px);
  display: flex;
  gap: 0.4rem;
}

.bar-btn {
  height: 28px;
  min-width: 34px;
  padding: 0 0.55rem;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 0.75rem;
  cursor: pointer;
}

.bar-btn:hover,
.bar-btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.55);
}

@media (pointer: coarse) {
  .bar-btn {
    height: 36px;
    min-width: 44px;
    font-size: 0.85rem;
  }
}

.callout {
  position: absolute;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  z-index: 8;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 4.2rem);
  color: #fff7e8;
  -webkit-text-stroke: 2px #1a0a00;
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 140, 40, 0.6);
  pointer-events: none;
  white-space: nowrap;
}

.callout.fight,
.callout.ko {
  color: #ffd23f;
  font-size: clamp(2.4rem, 11vw, 5.6rem);
}

.callout.win {
  color: var(--volt);
}

.callout.lose {
  color: #ff8a8a;
}

.callout.show {
  animation: callout-bang var(--dur, 1s) cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.tip {
  position: absolute;
  left: 50%;
  bottom: 12%;
  translate: -50% 0;
  z-index: 8;
  max-width: min(92%, 420px);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(6, 22, 26, 0.82);
  border: 2px solid rgba(184, 255, 60, 0.55);
  color: #f3fff6;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(0.9rem, 2.8vw, 1.15rem);
  text-align: center;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
}

.tip.show {
  animation: tip-pop var(--dur, 2.8s) ease both;
}

@keyframes tip-pop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  12% {
    opacity: 1;
    transform: none;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.diff-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0 0 0.9rem;
  padding: 0.65rem 0.85rem;
  border-radius: 16px;
  border: 2px solid rgba(243, 255, 246, 0.12);
  background: rgba(8, 30, 34, 0.65);
}

.diff-label {
  font-weight: 900;
  color: var(--volt);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}

.diff-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.diff-chip {
  appearance: none;
  border: 2px solid transparent;
  background: rgba(243, 255, 246, 0.08);
  color: var(--foam);
  font-family: var(--font-body);
  font-weight: 900;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
}

.diff-chip.active {
  border-color: var(--volt);
  box-shadow: 0 0 0 2px rgba(184, 255, 60, 0.25);
  background: rgba(184, 255, 60, 0.12);
}

.diff-blurb {
  margin: 0;
  flex: 1 1 100%;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
}

@keyframes callout-bang {
  0% {
    opacity: 0;
    transform: scale(2.2);
  }
  15% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 0;
    transform: scale(1.15) translateY(-10px);
  }
}

.pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(3, 8, 12, 0.72);
  backdrop-filter: blur(3px);
}

.pause-overlay[hidden] {
  display: none;
}

.pause-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-align: center;
  padding: 1rem;
}

.pause-card h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 0;
}

.pause-keys {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.6;
}

.quit-actions {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}

.quit-actions .btn {
  min-width: 6.5rem;
}

#screen-battle.paused .dpad,
#screen-battle.paused .actions {
  opacity: 0.3;
  pointer-events: none;
}

/* ---------- Controls ---------- */
.controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.9rem calc(2.8rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
  position: relative;
  z-index: 4;
  touch-action: none;
}

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(2, 50px);
  gap: 6px;
  grid-template-areas:
    "upleft up upright"
    "left down right";
}

.pad {
  position: relative;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #3a4a5a, #1f2a36);
  box-shadow: 0 5px 0 #0c1218;
  color: #fff;
  cursor: pointer;
  touch-action: none;
  display: grid;
  place-items: center;
  transition: transform 0.06s ease;
}

.pad.held {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #0c1218;
  background: linear-gradient(180deg, #56708a, #2c3d4f);
}

.pad-up {
  grid-area: up;
}

.pad-left {
  grid-area: left;
}

.pad-down {
  grid-area: down;
}

.pad-right {
  grid-area: right;
}

.pad-upleft {
  grid-area: upleft;
}

.pad-upright {
  grid-area: upright;
}

.pad .arrow {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 13px solid #fff;
}

.pad-down .arrow {
  rotate: 180deg;
}

.pad-left .arrow {
  rotate: -90deg;
}

.pad-right .arrow {
  rotate: 90deg;
}

.pad-upleft .arrow,
.pad-upright .arrow {
  border: 0 solid transparent;
  border-top: 15px solid #fff;
}

.pad-upleft .arrow {
  border-right-width: 15px;
}

.pad-upright .arrow {
  border-left-width: 15px;
}

.pad-key {
  position: absolute;
  bottom: 2px;
  right: 6px;
  font-size: 0.6rem;
  font-weight: 900;
  opacity: 0.6;
}

.key-legend {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.9;
  transition: opacity 1.2s ease, max-height 0.8s ease, margin 0.8s ease;
  opacity: 1;
  max-height: 4rem;
  overflow: hidden;
}

.key-legend.fade-out {
  opacity: 0;
  max-height: 0;
  margin: 0;
  pointer-events: none;
}

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 0.3em;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-bottom-width: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 760px) {
  .key-legend {
    display: none;
  }
  .controls {
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}

@media (max-width: 480px) {
  .dpad {
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(2, 44px);
    gap: 5px;
  }
  .actions {
    grid-template-columns: repeat(4, 60px);
    gap: 0.4rem;
  }
  .ctrl {
    min-height: 62px;
    border-radius: 16px;
  }
  .ctrl-label {
    font-size: 0.68rem;
  }
}

@media (max-height: 520px) {
  .controls {
    padding-top: 0.35rem;
    padding-bottom: calc(0.4rem + env(safe-area-inset-bottom));
    grid-template-columns: auto 1fr;
  }
  .key-legend {
    display: none;
  }
  .dpad {
    grid-template-columns: repeat(3, 42px);
    grid-template-rows: repeat(2, 38px);
    gap: 4px;
  }
  .ctrl {
    min-height: 54px;
  }
  body:has(#screen-battle.active) .sound-toggle {
    top: 0.4rem;
    bottom: auto;
    right: 0.4rem;
    translate: none;
  }
  body:has(#screen-battle.active) .sound-label {
    display: none;
  }
}

.rotate-hint {
  display: none;
}

@media (orientation: portrait) and (max-width: 700px) {
  .rotate-hint {
    display: block;
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-weight: 800;
    font-size: 0.85rem;
  }
}

/* Pinned to the last column: on touch devices .key-legend is hidden, so auto-placement would put the buttons beside the d-pad. */
.actions {
  grid-column: -2;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 96px));
  gap: 0.5rem;
}

.ctrl {
  position: relative;
  border: none;
  border-radius: 20px;
  min-height: 72px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 900;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  overflow: hidden;
  touch-action: none;
  padding: 0.3rem;
  transition: transform 0.06s ease, filter 0.1s ease;
}

.ctrl.held {
  transform: translateY(3px) scale(0.97);
}

.ctrl.attack {
  background: linear-gradient(180deg, #ff8a3d, #d44100);
  box-shadow: 0 6px 0 #7a2200;
}

.ctrl.block {
  background: linear-gradient(180deg, #3be0e6, #0f8a9a);
  box-shadow: 0 6px 0 #06555f;
}

.ctrl.block.held {
  filter: brightness(1.15);
  box-shadow: 0 0 0 3px rgba(45, 226, 230, 0.45), 0 3px 0 #06555f;
}

.ctrl.special {
  background: linear-gradient(180deg, #d4ff4a, #7cb800);
  color: #102000;
  box-shadow: 0 6px 0 #3d5c00;
}

.ctrl.special.ready {
  box-shadow: 0 6px 0 #3d5c00, 0 0 14px rgba(184, 255, 60, 0.65);
}

.ctrl.special,
.ctrl.super {
  isolation: isolate;
}

.ctrl.special.ready::before,
.ctrl.super.ready::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), inset 0 0 18px rgba(255, 255, 255, 0.7);
  pointer-events: none;
  opacity: 0;
  animation: btn-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes btn-pulse {
  to {
    opacity: 1;
  }
}

.ctrl.special.cooling {
  filter: saturate(0.5) brightness(0.8);
}

.ctrl.special.denied {
  animation: sp-denied 0.32s ease-out;
}

@keyframes sp-denied {
  20% {
    translate: -6px 0;
  }
  45% {
    translate: 5px 0;
  }
  70% {
    translate: -3px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctrl.special.denied {
    animation: none;
    outline: 3px solid rgba(255, 255, 255, 0.7);
  }
}

.ctrl-key {
  font-size: 0.68rem;
  opacity: 0.75;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
}

.ctrl-label {
  font-size: 0.85rem;
  line-height: 1.05;
  text-align: center;
  position: relative;
  z-index: 1;
}

.ctrl.super {
  background: linear-gradient(180deg, #ffe566, #ff9f1c);
  color: #3a1a00;
  box-shadow: 0 6px 0 #8a4a00;
}

.su-charge {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 30, 0.62);
  transform-origin: top;
  pointer-events: none;
}

.ctrl.super:not(.ready) {
  filter: saturate(0.4);
}

.ctrl.super.ready {
  background: linear-gradient(135deg, #ff5d8f, #ffb347 30%, #fff275 50%, #7cf29c 70%, #6cc6ff);
  box-shadow: 0 6px 0 #8a4a00, 0 0 20px 4px rgba(255, 229, 102, 0.85);
  animation: super-btn 0.6s ease-in-out infinite alternate;
}

.ctrl.super.ready::before {
  animation-duration: 0.6s;
}

@keyframes super-btn {
  to {
    scale: 1.06;
  }
}

.ctrl.super.denied {
  animation: sp-denied 0.32s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ctrl.super.ready {
    animation: none;
    box-shadow: 0 6px 0 #8a4a00, 0 0 22px 4px rgba(255, 229, 102, 0.95);
  }
  .ctrl.special.ready::before,
  .ctrl.super.ready::before {
    animation: none;
    opacity: 0.7;
  }
}

.cd-ring {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  transform-origin: bottom;
  transform: scaleY(0);
  pointer-events: none;
}

/* ---------- Phone landscape: arena fills the screen, controls float on top ---------- */
/* Keep this query in sync with OVERLAY_MQ in js/app.js. */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #screen-battle {
    position: fixed;
    inset: 0;
    min-height: 0;
    touch-action: none;
    -webkit-touch-callout: none;
  }

  .arena {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .stage {
    border-radius: 0;
    box-shadow: none;
  }

  .controls {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 max(0.9rem, env(safe-area-inset-right)) max(0.7rem, env(safe-area-inset-bottom)) max(0.9rem, env(safe-area-inset-left));
    background: none;
    pointer-events: none;
  }

  .dpad,
  .actions {
    pointer-events: auto;
    transition: opacity 0.2s ease;
  }

  .dpad {
    grid-template-columns: repeat(3, 58px);
    grid-template-rows: repeat(3, 56px);
    gap: 3px;
    grid-template-areas:
      "upleft up upright"
      "left . right"
      ". down .";
  }

  .pad {
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background: rgba(10, 18, 26, 0.5);
    box-shadow: none;
  }

  .pad.held {
    transform: scale(0.94);
    border-color: #fff;
    background: rgba(126, 249, 255, 0.42);
    box-shadow: none;
  }

  .pad .arrow {
    border-left-width: 12px;
    border-right-width: 12px;
    border-bottom-width: 17px;
  }

  .pad-upleft .arrow,
  .pad-upright .arrow {
    border-width: 20px 0 0;
  }

  .pad-upleft .arrow {
    border-right-width: 20px;
  }

  .pad-upright .arrow {
    border-left-width: 20px;
  }

  .pad-key,
  .ctrl-key {
    display: none;
  }

  .actions {
    grid-template-columns: 72px 86px;
    grid-template-rows: 72px 86px;
    gap: 8px;
    grid-template-areas:
      "super special"
      "block attack";
    place-items: center;
  }

  .actions .ctrl {
    width: 72px;
    height: 72px;
    min-height: 0;
    border-radius: 50%;
    opacity: 0.72;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 4px 0 rgba(0, 0, 0, 0.35);
  }

  .actions .ctrl.held {
    opacity: 1;
  }

  .ctrl.attack {
    grid-area: attack;
    width: 86px;
    height: 86px;
  }

  .ctrl.block {
    grid-area: block;
  }

  .ctrl.special {
    grid-area: special;
  }

  .ctrl.super {
    grid-area: super;
  }

  .actions .ctrl.super:not(.ready) {
    opacity: 0.5;
  }

  .actions .ctrl.super.ready {
    opacity: 1;
  }

  .ctrl-label {
    font-size: 0.72rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }

  .ctrl.special .ctrl-label {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  }

  .ctrl.attack .ctrl-label {
    font-size: 0.82rem;
  }

  .tip {
    bottom: 34%;
    max-width: min(50%, 360px);
  }

  body:has(#screen-battle.active) .sound-toggle {
    top: auto;
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    right: 50%;
    translate: 50% 0;
  }
}

/* ---------- Result ---------- */
/* Centred with margin: auto (not justify-content) so a tall card still scrolls to its top. */
#screen-result {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 107, 44, 0.35), transparent 50%),
    #06161a;
}

.result-card {
  text-align: center;
  max-width: 420px;
  padding: 1.5rem;
  margin: auto;
}

.result-brand {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.result-canvas {
  display: block;
  width: min(300px, 80vw);
  height: 190px;
  margin: 0 auto;
}

#result-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3rem);
  margin: 0 0 0.2rem;
}

.result-score {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--volt);
  margin: 0 0 0.4rem;
}

#result-sub {
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 1.4rem;
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Short landscape screens (phones): winner on the left, text and buttons on the right, nothing below the fold. */
@media (orientation: landscape) and (max-height: 520px) {
  #screen-result {
    padding: max(0.6rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(0.6rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  }

  .result-card {
    max-width: 760px;
    width: 100%;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas:
      "canvas brand"
      "canvas title"
      "canvas score"
      "canvas points"
      "canvas sub"
      "canvas actions";
    align-items: center;
    column-gap: 1.2rem;
  }

  .result-brand {
    grid-area: brand;
    margin: 0;
  }

  .result-canvas {
    grid-area: canvas;
    width: 100%;
    height: min(62vh, 260px);
  }

  #result-title {
    grid-area: title;
  }

  .result-score {
    grid-area: score;
  }

  /* The points panel takes the room the brand and hint text used to have. */
  .result-brand,
  #result-sub {
    display: none;
  }

  .points {
    grid-area: points;
    margin-bottom: 0.5rem;
    gap: 0.2rem;
  }

  .points-line {
    font-size: 0.72rem;
    padding: 0.1rem 0.5rem 0.1rem 0.3rem;
  }

  .pl-icon {
    font-size: 0.85rem;
  }

  .points-total {
    margin: 0;
  }

  .points-num {
    font-size: 1.9rem;
  }

  .new-best {
    font-size: 1rem;
    padding: 0.25rem 0.9rem;
  }

  .points-best {
    font-size: 0.78rem;
  }

  #result-title {
    font-size: 1.7rem;
    margin: 0;
    line-height: 1.1;
  }

  .result-score {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
  }

  .result-actions {
    grid-area: actions;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .result-actions .btn {
    padding: 0.7rem 1.1rem;
    font-size: 0.95rem;
  }
}

/* ---------- Players ---------- */
/* Badges inherit --pc (player colour) from their tile, row or card, or have it set inline. */
.player-badge {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 55%), var(--pc, var(--muted));
  box-shadow: 0 0 0 3px rgba(6, 22, 26, 0.85), 0 0 0 5px var(--pc, var(--muted)), 0 6px 14px rgba(0, 0, 0, 0.4);
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  font-family: var(--font-display);
}

.player-badge.small {
  width: 34px;
  height: 34px;
  font-size: 18px;
  box-shadow: 0 0 0 2px rgba(6, 22, 26, 0.85), 0 0 0 4px var(--pc, var(--muted));
}

.player-badge.big {
  width: clamp(72px, 16vw, 104px);
  height: clamp(72px, 16vw, 104px);
  font-size: clamp(38px, 8.5vw, 56px);
  box-shadow: 0 0 0 4px rgba(6, 22, 26, 0.85), 0 0 0 7px var(--pc, var(--muted)), 0 10px 22px rgba(0, 0, 0, 0.45);
}

.player-chip {
  --pc: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
  padding: 0.4rem 1rem 0.4rem 0.45rem;
  border-radius: 999px;
  border: 2px solid var(--pc);
  background: rgba(6, 22, 26, 0.7);
  color: var(--foam);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  position: relative;
  z-index: 3;
  transition: transform 0.12s ease;
  animation: brand-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.1s both;
}

.player-chip:active {
  transform: scale(0.96);
}

.player-chip b {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--pc);
}

.player-chip-change {
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.player-chip.empty {
  border-style: dashed;
  animation: brand-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.1s both, go-pulse 1.6s ease-in-out 1s infinite;
}

.player-chip.empty .player-chip-change {
  display: none;
}

.btn-board span {
  margin-right: 0.15rem;
}

#screen-players,
#screen-leaderboard {
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(255, 107, 44, 0.18), transparent 60%),
    linear-gradient(180deg, #071c20, #0a2a24 60%, #06161a);
}

.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.9rem;
  width: 100%;
  max-width: 1060px;
  margin: auto;
  padding-bottom: 1rem;
}

.player-tile {
  --pc: var(--muted);
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 180px;
  padding: 1.2rem 0.6rem 1rem;
  border-radius: 24px;
  border: 3px solid color-mix(in srgb, var(--pc) 45%, transparent);
  background:
    radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--pc) 28%, transparent), transparent 70%),
    rgba(8, 30, 34, 0.85);
  color: var(--foam);
  cursor: pointer;
  font-family: var(--font-display);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.player-tile:hover,
.player-tile:focus-visible {
  border-color: var(--pc);
  transform: translateY(-3px);
  outline: none;
}

.player-tile:active {
  transform: scale(0.96);
}

.player-tile.active {
  border-color: var(--pc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 35%, transparent), 0 0 26px color-mix(in srgb, var(--pc) 40%, transparent);
}

.player-tile-name {
  font-size: clamp(1.1rem, 3.6vw, 1.4rem);
  color: var(--pc);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  overflow-wrap: break-word;
  max-width: 100%;
}

.player-tile.long .player-tile-name {
  font-size: clamp(0.8rem, 2.4vw, 1rem);
}

.player-tile.add {
  border-style: dashed;
  background: rgba(8, 30, 34, 0.5);
}

.player-tile.add .player-badge {
  background: rgba(243, 255, 246, 0.12);
  color: var(--foam);
  box-shadow: 0 0 0 4px rgba(6, 22, 26, 0.85), 0 0 0 7px rgba(243, 255, 246, 0.3);
}

.player-tile.add .player-tile-name {
  color: var(--foam);
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(1rem, 3vw, 1.2rem);
}

.fixed-overlay {
  position: fixed;
  z-index: 60;
}

.add-player {
  width: min(360px, 90vw);
}

.name-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 16px;
  border: 3px solid rgba(184, 255, 60, 0.6);
  background: rgba(6, 22, 26, 0.9);
  color: var(--foam);
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-align: center;
  user-select: text;
  -webkit-user-select: text;
}

.name-input:focus {
  outline: none;
  border-color: var(--volt);
  box-shadow: 0 0 0 3px rgba(184, 255, 60, 0.25);
}

/* ---------- Leaderboard ---------- */
.board-layout {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

@media (min-width: 760px) {
  .board-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

.board-panel {
  border: 2px solid rgba(243, 255, 246, 0.12);
  border-radius: var(--radius);
  background: rgba(8, 30, 34, 0.7);
  padding: 0.8rem;
}

.board-panel h3 {
  margin: 0 0 0.6rem;
  font-weight: 900;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--volt);
}

.board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.board-row {
  --pc: var(--muted);
  display: grid;
  grid-template-columns: 2.2rem auto minmax(0, 1fr) 64px auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.7rem 0.35rem 0.4rem;
  border-radius: 14px;
  background: rgba(243, 255, 246, 0.05);
  border-left: 5px solid var(--pc);
  animation: row-in 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.board-row:nth-child(2) { animation-delay: 0.04s; }
.board-row:nth-child(3) { animation-delay: 0.08s; }
.board-row:nth-child(4) { animation-delay: 0.12s; }
.board-row:nth-child(5) { animation-delay: 0.16s; }
.board-row:nth-child(n + 6) { animation-delay: 0.2s; }

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
}

.board-row.top {
  background:
    linear-gradient(90deg, rgba(255, 214, 10, 0.22), rgba(255, 107, 44, 0.08) 70%),
    rgba(243, 255, 246, 0.05);
  box-shadow: inset 0 0 0 2px rgba(255, 214, 10, 0.55), 0 8px 24px rgba(255, 190, 40, 0.18);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.board-rank {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-align: center;
  color: var(--muted);
}

.board-row:nth-child(-n + 3) .board-rank {
  font-size: 1.5rem;
}

.board-row.top .board-rank {
  font-size: 2rem;
  filter: drop-shadow(0 0 8px rgba(255, 214, 10, 0.7));
  animation: heart-beat 2.2s ease-in-out infinite;
}

.board-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.board-name {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--pc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
}

.diff-tag {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(45, 226, 230, 0.18);
  color: var(--cyan);
}

.diff-tag[data-diff="easy"] {
  background: rgba(61, 220, 151, 0.18);
  color: var(--ok);
}

.diff-tag[data-diff="hard"] {
  background: rgba(255, 59, 92, 0.2);
  color: #ff8a9c;
}

.board-mini {
  width: 64px;
  height: 52px;
  display: block;
}

.board-pts {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--foam);
  text-align: right;
}

.board-row.top .board-pts {
  font-size: 1.4rem;
  color: #ffd60a;
}

.board-empty {
  margin: 0.4rem 0;
  padding: 1.4rem 0.5rem;
  text-align: center;
  font-weight: 900;
  color: var(--muted);
  border: 2px dashed rgba(243, 255, 246, 0.15);
  border-radius: 14px;
}

.board-players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.55rem;
}

.board-player {
  --pc: var(--muted);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.8rem 0.4rem 0.7rem;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--pc) 20%, transparent), transparent 70%), rgba(243, 255, 246, 0.04);
  border: 2px solid color-mix(in srgb, var(--pc) 35%, transparent);
  text-align: center;
}

.board-player.none {
  opacity: 0.55;
}

.board-player.leader {
  border-color: #ffd60a;
  box-shadow: 0 0 18px rgba(255, 214, 10, 0.3);
}

.board-player.leader::before {
  content: "👑";
  position: absolute;
  top: -0.7rem;
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.bp-name {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--pc);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-best {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.bp-best small {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.bp-wins {
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--muted);
}

.bp-wins b {
  color: var(--foam);
}

.board-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.2rem;
}

.hold-btn {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 59, 92, 0.45);
  border-radius: 999px;
  background: rgba(6, 22, 26, 0.6);
  color: #ff8a9c;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 0.85rem;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
}

.hold-fill {
  position: absolute;
  inset: 0;
  background: rgba(255, 59, 92, 0.45);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.hold-btn.holding .hold-fill {
  transform: scaleX(1);
  transition: transform var(--hold, 1.6s) linear;
}

.hold-btn.holding {
  color: #fff;
}

.hold-label {
  position: relative;
}

.hold-hint {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  opacity: 0.7;
}

@media (max-height: 520px) and (orientation: landscape) {
  .title-content {
    padding-top: 1rem;
    padding-bottom: 1.6rem;
  }

  .title-content .sub {
    display: none;
  }

  .player-chip {
    margin-bottom: 0.8rem;
  }

  .player-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.7rem;
  }

  .player-tile {
    min-height: 0;
    padding: 0.9rem 0.4rem 0.8rem;
    gap: 0.6rem;
  }

  .player-badge.big {
    width: 70px;
    height: 70px;
    font-size: 38px;
  }

  #screen-players .screen-header,
  #screen-leaderboard .screen-header {
    margin-bottom: 0.6rem;
  }
}

/* ---------- Result points ---------- */
#screen-result .confetti {
  z-index: 1;
}

.result-card {
  position: relative;
  z-index: 2;
}

.points {
  margin: 0 0 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.points-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
}

.points-line {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem 0.2rem 0.35rem;
  border-radius: 999px;
  background: rgba(243, 255, 246, 0.08);
  border: 1.5px solid rgba(243, 255, 246, 0.16);
  font-size: 0.8rem;
  font-weight: 800;
  animation: chip-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) var(--d, 0s) both;
}

.pl-icon {
  font-size: 1rem;
}

.pl-label {
  color: var(--muted);
}

.pl-pts {
  font-weight: 900;
  color: var(--volt);
}

.points-line.mult {
  border-color: rgba(255, 107, 44, 0.6);
  background: rgba(255, 107, 44, 0.16);
}

.points-line.mult .pl-pts {
  color: var(--ember);
  font-family: var(--font-display);
  font-weight: 400;
}

@keyframes chip-pop {
  from {
    opacity: 0;
    transform: scale(0.4) translateY(8px);
  }
}

.points-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.25rem 0 0;
}

.points-num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 9vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff7e8;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
  min-width: 3ch;
}

.points-unit {
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.points.celebrate .points-num {
  background: linear-gradient(180deg, #fff7e8 10%, #ffd60a 50%, var(--ember) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 14px rgba(255, 214, 10, 0.5));
  text-shadow: none;
  animation: welcome-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.new-best {
  margin: 0.1rem 0 0;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe566, #ff9f1c);
  color: #3a1600;
  font-family: var(--font-display);
  font-size: clamp(1rem, 4.2vw, 1.35rem);
  box-shadow: 0 5px 0 #8a3b00, 0 0 28px rgba(255, 214, 10, 0.55);
  animation: welcome-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both, welcome-wiggle 2.4s ease-in-out 0.8s infinite;
}

.new-best[hidden] {
  display: none;
}

.points-best {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .points-line,
  .new-best,
  .points.celebrate .points-num,
  .board-row,
  .board-row.top .board-rank,
  .player-chip {
    animation: none;
  }
}

/* ---------- Touch-only devices (phones, tablets): keyboard letters are noise ---------- */
/* Keep this query in sync with TOUCH_MQ in js/app.js. */
.touch-only {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .touch-only {
    display: block;
  }

  .keys-only,
  .key-legend,
  .pad-key,
  .ctrl-key {
    display: none;
  }
}

/* ---------- Prizes (unlockables) ---------- */
.btn-prizes {
  position: relative;
}

.prizes-new {
  position: absolute;
  top: -0.45rem;
  right: -0.35rem;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--danger);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  box-shadow: 0 0 0 2px var(--ink);
  animation: go-pulse 1.6s ease-in-out infinite;
}

.prizes-new[hidden] {
  display: none;
}

#screen-prizes {
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(255, 214, 10, 0.2), transparent 60%),
    linear-gradient(180deg, #071c20, #0a2a24 60%, #06161a);
}

.prizes-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: -0.3rem 0 0.9rem;
}

.prizes-player {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
}

.prizes-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.9rem 0.2rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe566, #ff9f1c);
  color: #3a1600;
  font-size: 1.1rem;
  box-shadow: 0 4px 0 #8a3b00;
}

.prizes-stars b {
  font-family: var(--font-display);
  font-weight: 400;
}

.prize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0.7rem;
  padding-bottom: 1rem;
}

.prize-card {
  --p: 0;
  position: relative;
  appearance: none;
  border: 2px solid rgba(243, 255, 246, 0.12);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 50% 85%, rgba(184, 255, 60, 0.12), transparent 60%),
    rgba(8, 30, 34, 0.85);
  color: inherit;
  padding: 0.3rem 0.3rem 0.5rem;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.prize-card.got {
  border-color: rgba(184, 255, 60, 0.45);
  background:
    radial-gradient(ellipse at 50% 70%, rgba(255, 214, 10, 0.2), transparent 65%),
    rgba(10, 40, 40, 0.9);
}

.prize-card.locked {
  background: rgba(6, 22, 26, 0.7);
  border-style: dashed;
}

.prize-card.next {
  border: 3px solid var(--volt);
  border-style: solid;
  box-shadow: 0 0 0 4px rgba(184, 255, 60, 0.18), 0 0 24px rgba(184, 255, 60, 0.28);
  animation: go-pulse 1.8s ease-in-out infinite;
}

.prize-card.secret {
  border-color: #ffd60a;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(199, 125, 255, 0.28), transparent 65%),
    rgba(18, 12, 36, 0.9);
}

.prize-pic {
  display: block;
  width: 100%;
  height: 100px;
}

.prize-name {
  min-height: 1.2em;
  font-weight: 900;
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: center;
  color: var(--foam);
}

.prize-card.locked .prize-name {
  color: var(--volt);
  font-family: var(--font-display);
  font-weight: 400;
}

/* Progress ring: fills clockwise with how close the player is to this prize. */
.prize-ring {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--volt) calc(var(--p) * 1turn), rgba(243, 255, 246, 0.14) 0);
}

.prize-ring-inner {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0b2226;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: #ffe566;
}

.prize-ring-inner::after {
  content: "⭐";
  font-size: 0.55rem;
  margin-left: 1px;
  font-family: var(--font-body);
}

.prize-card.got .prize-ring {
  background: var(--ok);
  width: 28px;
  height: 28px;
}

.prize-card.got .prize-ring-inner {
  width: auto;
  height: auto;
  background: none;
  color: var(--ink);
  font-size: 0.85rem;
}

.prize-card.got .prize-ring-inner::after,
.prize-card.secret .prize-ring-inner::after {
  content: none;
}

.prize-card.secret .prize-ring {
  background: conic-gradient(#ffd60a calc(var(--p) * 1turn), rgba(243, 255, 246, 0.14) 0);
}

.prize-card.secret .prize-ring-inner {
  font-size: 1rem;
}

.prize-tag {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  font-size: 0.7rem;
  font-weight: 900;
}

.prize-tag:empty {
  display: none;
}

.prize-card.fresh .prize-tag {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  animation: welcome-wiggle 2.4s ease-in-out infinite;
}

.prize-card.secret.locked .prize-tag {
  color: #ffe566;
}

.wobble {
  animation: prize-wobble 0.45s ease both;
}

@keyframes prize-wobble {
  25% { transform: rotate(-4deg) scale(1.04); }
  50% { transform: rotate(4deg) scale(1.04); }
  75% { transform: rotate(-2deg); }
}

/* Locked secret fighter on the roster */
.fighter-card.secret {
  border-color: rgba(255, 214, 10, 0.55);
  background:
    radial-gradient(ellipse at 50% 70%, rgba(199, 125, 255, 0.25), transparent 65%),
    rgba(18, 12, 36, 0.9);
}

.fighter-card.secret.locked .name {
  color: #ffe566;
}

.fighter-card.secret.locked .kind {
  text-transform: none;
  letter-spacing: 0;
}

/* Customize: prize chips */
.prize-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.8rem 0.35rem 0.5rem;
}

.prize-chip-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.color-chip.prize {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  position: relative;
}

.color-chip.prize::after {
  content: "⭐";
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 0.7rem;
}

.color-chip.prize.active {
  box-shadow: 0 0 0 2px rgba(184, 255, 60, 0.25), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Result: stars earned and the next prize */
.stars-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  animation: chip-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.stars-strip[hidden] {
  display: none;
}

.stars-earned {
  padding: 0.15rem 0.7rem 0.15rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe566, #ff9f1c);
  color: #3a1600;
  font-size: 0.95rem;
  box-shadow: 0 3px 0 #8a3b00;
}

.stars-earned b {
  font-family: var(--font-display);
  font-weight: 400;
}

.next-prize {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--muted);
}

.next-bar {
  width: 86px;
  height: 10px;
  border-radius: 999px;
  background: rgba(243, 255, 246, 0.14);
  overflow: hidden;
}

.next-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--volt), #ffe566);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.2, 0.9, 0.3, 1) 0.2s;
}

.next-prize-icon {
  font-size: 1.2rem;
  line-height: 1;
}

/* Result: "You unlocked…!" reveal */
.unlock-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: radial-gradient(circle at 50% 45%, rgba(40, 20, 70, 0.9), rgba(3, 10, 12, 0.94));
}

.unlock-overlay[hidden] {
  display: none;
}

.unlock-overlay .confetti {
  z-index: 0;
}

.unlock-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.unlock-overlay.show .unlock-card {
  animation: welcome-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.unlock-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  color: #ffe566;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
}

.unlock-stage {
  position: relative;
  width: min(300px, 70vw);
  height: min(240px, 40vh);
  display: grid;
  place-items: center;
}

.unlock-rays {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 229, 102, 0.55), transparent 55%),
    repeating-conic-gradient(rgba(255, 229, 102, 0.22) 0 10deg, transparent 10deg 20deg);
  mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  animation: rays-spin 12s linear infinite;
}

@keyframes rays-spin {
  to { transform: rotate(1turn); }
}

.unlock-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

.unlock-title {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  background: linear-gradient(180deg, #fff7e8 10%, #ffd60a 55%, var(--ember) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
}

.unlock-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-height: 520px) and (orientation: landscape) {
  .prize-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 0.55rem;
  }

  .prize-pic {
    height: 78px;
  }

  #screen-prizes .screen-header {
    margin-bottom: 0.4rem;
  }

  .prizes-head {
    margin: -0.2rem 0 0.6rem;
  }

  .customize-controls fieldset {
    margin-bottom: 0.5rem;
    padding: 0.45rem 0.7rem 0.6rem;
  }

  .special-arrow {
    width: 42px;
    height: 42px;
  }

  .special-icon {
    font-size: 1.6rem;
  }

  .stars-strip {
    gap: 0.4rem;
  }

  .points:has(.stars-strip:not([hidden])) .points-best {
    display: none;
  }

  .unlock-stage {
    height: 46vh;
  }

  .unlock-kicker {
    font-size: 1.3rem;
  }

  .unlock-title {
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
  }

  .unlock-actions .btn {
    padding: 0.6rem 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prize-card.next,
  .prize-card.fresh .prize-tag,
  .prizes-new,
  .unlock-rays,
  .unlock-overlay.show .unlock-card,
  .stars-strip,
  .wobble {
    animation: none;
  }
}

/* ---------- Adventure ---------- */
.btn-adventure {
  background: linear-gradient(180deg, #ffe566, #ff9f1c);
  color: #3a1a00;
  box-shadow: 0 10px 0 #8a4a00, 0 16px 30px rgba(255, 180, 60, 0.35);
}

.btn-adventure:hover {
  filter: brightness(1.06);
}

#screen-story {
  padding: 0;
  overflow: hidden;
  background: #06161a;
}

.story-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#story-confetti {
  z-index: 2;
}

.story-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1rem;
  padding: 0.8rem max(1rem, env(safe-area-inset-right)) max(0.9rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(6, 22, 26, 0), rgba(6, 22, 26, 0.85) 40%);
}

.story-title {
  flex: 1 1 100%;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 4.2vw, 2.2rem);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6);
}

.story-tips {
  display: flex;
  gap: 0.5rem;
}

/* Adventure select: two big picture cards. */
.adv-picks {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.adv-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(44vw, 420px);
  min-width: 240px;
  padding: 0;
  overflow: hidden;
  border: 4px solid #ffd23f;
  border-radius: 22px;
  background: #1d3a4a;
  color: #fff7e8;
  cursor: pointer;
  box-shadow: 0 8px 0 #8a4a00, 0 14px 26px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease;
}

.adv-pick.sea {
  border-color: #2de2e6;
  box-shadow: 0 8px 0 #0b5560, 0 14px 26px rgba(0, 0, 0, 0.35);
}

.adv-pick:hover,
.adv-pick:focus-visible {
  transform: translateY(-3px) scale(1.02);
}

.adv-pick:active {
  transform: translateY(2px);
}

.adv-pick-pic {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.adv-pick-name {
  padding: 0.5rem 0.8rem 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.adv-pick-name b {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-right: 0.3em;
  border-radius: 50%;
  background: #ffd23f;
  color: #3a1a00;
  font-weight: 400;
}

.adv-pick.sea .adv-pick-name b {
  background: #2de2e6;
  color: #062a30;
}

.adv-pick-done {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #3cbf3a;
  border: 3px solid #fff;
  font-weight: 900;
  font-size: 1.2rem;
}

.adv-pick-done[hidden] {
  display: none;
}

@media (orientation: landscape) and (max-height: 520px) {
  .adv-picks {
    flex-wrap: nowrap;
  }

  .adv-pick {
    width: min(42vw, calc((100dvh - 7rem) * 1.6));
    min-width: 0;
  }
}

.story-tips[hidden],
#adv-diff-row[hidden] {
  display: none;
}

.story-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.3rem 0.5rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.25);
  font-weight: 900;
  font-size: 0.75rem;
}

.story-tip svg {
  width: 64px;
  height: 40px;
}

.story-actions {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.story-go {
  white-space: nowrap;
  font-size: 1.3rem;
  padding: 0.9rem 2.2rem;
  animation: story-go 0.9s ease-in-out infinite alternate;
}

@keyframes story-go {
  to {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-go {
    animation: none;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .story-panel {
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-top: 0.5rem;
  }

  .story-title {
    flex: 0 1 auto;
    text-align: left;
    font-size: clamp(1rem, 3.4vw, 1.6rem);
  }

  .story-tip svg {
    width: 48px;
    height: 30px;
  }

  #adv-diff-row {
    flex-wrap: nowrap;
  }

  .story-go {
    padding: 0.75rem 1.6rem;
  }
}

/* Boss fight: a big, thick health bar for the Mega T-Rex. */
.hud.boss .hud-enemy .hp-bar {
  height: clamp(18px, 3.6vw, 30px);
  border-color: #ffd23f;
  box-shadow: 0 0 12px rgba(255, 90, 40, 0.6), 0 3px 0 rgba(0, 0, 0, 0.4);
}

.hud.boss .hud-enemy .hp-fill {
  background: linear-gradient(180deg, #ff8a5c, #c2172f);
}

.hud.boss.kraken .hud-enemy .hp-fill {
  background: linear-gradient(180deg, #c38cff, #6a2bbf);
}

.hud.boss.kraken .hud-enemy .hp-bar {
  border-color: #2de2e6;
  box-shadow: 0 0 12px rgba(120, 80, 255, 0.6), 0 3px 0 rgba(0, 0, 0, 0.4);
}

.hud.boss .hud-enemy .hud-name {
  color: #ffd23f;
  font-size: clamp(0.75rem, 2vw, 1.1rem);
}

.hud.boss .hud-enemy .sp-meter,
.hud.boss .hud-enemy .su-meter {
  display: none;
}

/* Boss phase 2: the health bar throbs red once Mega T-Rex is enraged. */
.hud.boss.enraged .hud-enemy .hp-bar {
  border-color: #ff5d3c;
  animation: boss-enraged 0.7s ease-in-out infinite alternate;
}

@keyframes boss-enraged {
  to {
    box-shadow: 0 0 22px rgba(255, 60, 30, 0.95), 0 3px 0 rgba(0, 0, 0, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud.boss.enraged .hud-enemy .hp-bar {
    animation: none;
  }
}

/* ---------- Create a Fighter ---------- */
#screen-create {
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(199, 125, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #0b1830, #0a2a24 60%, #06161a);
}

.btn-create {
  border-color: rgba(199, 125, 255, 0.55);
}

.create-mine-btn {
  white-space: nowrap;
}

.create-mine-btn b {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 0.2rem;
  padding: 0 0.35em;
  border-radius: 999px;
  background: rgba(199, 125, 255, 0.35);
  color: var(--foam);
}

.create-view {
  display: none;
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  gap: 1rem;
}

#screen-create[data-view="form"] .create-view[data-view="form"],
#screen-create[data-view="result"] .create-view[data-view="result"] {
  display: grid;
}

#screen-create[data-view="loading"] .create-view[data-view="loading"],
#screen-create[data-view="list"] .create-view[data-view="list"] {
  display: flex;
}

.create-form,
.create-result {
  align-items: center;
}

@media (min-width: 640px) {
  .create-form,
  .create-result {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.create-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.photo-slot {
  position: relative;
  width: min(220px, 60vw);
  aspect-ratio: 1;
  border-radius: 28px;
  border: 3px dashed rgba(199, 125, 255, 0.55);
  background: rgba(8, 30, 34, 0.7);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-empty {
  font-size: 2.2rem;
  letter-spacing: 0.15em;
  opacity: 0.85;
}

.photo-clear {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: none;
  background: rgba(6, 22, 26, 0.8);
  color: var(--foam);
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
}

.photo-actions {
  display: flex;
  gap: 0.6rem;
}

.photo-btn {
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
}

.photo-note,
.create-list-note {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.78rem;
  text-align: center;
}

.create-powers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.powers-label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vw, 1.3rem);
}

.powers-input {
  width: 100%;
  resize: none;
  padding: 0.8rem 1rem;
  border-radius: 18px;
  border: 3px solid rgba(184, 255, 60, 0.5);
  background: rgba(6, 22, 26, 0.9);
  color: var(--foam);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.35;
  user-select: text;
  -webkit-user-select: text;
}

.powers-input:focus {
  outline: none;
  border-color: var(--volt);
  box-shadow: 0 0 0 3px rgba(184, 255, 60, 0.25);
}

.powers-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.78rem;
}

.practice-badge {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 214, 10, 0.18);
  border: 1px solid rgba(255, 214, 10, 0.5);
  color: #ffe566;
}

.practice-badge[hidden] {
  display: none;
}

.create-error {
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 59, 92, 0.15);
  color: #ffb3c0;
  font-weight: 800;
  font-size: 0.9rem;
}

.create-error[hidden],
.turnstile-box[hidden] {
  display: none;
}

.create-go {
  align-self: center;
  margin-top: 0.3rem;
  background: linear-gradient(180deg, #c77dff, #7b2cbf);
  box-shadow: 0 10px 0 #3c1066, 0 16px 30px rgba(199, 125, 255, 0.35);
}

.create-loading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.create-loading-canvas {
  width: min(260px, 60vw);
  height: min(220px, 45dvh);
  animation: create-bob 0.65s ease-in-out infinite alternate;
}

.create-loading-text {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  color: #e3c6ff;
}

.create-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.create-sparkles i {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ffe566;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: create-twinkle 1.4s ease-in-out infinite;
}

.create-sparkles i:nth-child(1) { left: 22%; top: 20%; }
.create-sparkles i:nth-child(2) { left: 74%; top: 26%; animation-delay: 0.3s; background: var(--cyan); }
.create-sparkles i:nth-child(3) { left: 30%; top: 66%; animation-delay: 0.6s; background: #ff8fd8; }
.create-sparkles i:nth-child(4) { left: 68%; top: 70%; animation-delay: 0.9s; }
.create-sparkles i:nth-child(5) { left: 50%; top: 10%; animation-delay: 1.1s; background: var(--volt); }

@keyframes create-bob {
  to {
    transform: translateY(-8px) scale(1.03);
  }
}

@keyframes create-twinkle {
  0%,
  100% {
    transform: scale(0.3) rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.4) rotate(90deg);
    opacity: 1;
  }
}

.create-stage {
  min-height: 0;
}

.create-kind {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.create-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.create-blurb {
  margin: 0;
  font-weight: 900;
  font-size: 1.05rem;
  color: #e3c6ff;
}

.create-moves {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.8rem;
  font-weight: 800;
  font-size: 0.9rem;
}

.create-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1rem;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-name {
  width: 3.6rem;
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
}

.stat-pips {
  display: flex;
  gap: 4px;
}

.stat-pips i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(243, 255, 246, 0.14);
}

.stat-pips i.on {
  background: linear-gradient(180deg, var(--volt), #6fbf00);
}

.create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.4rem;
}

.create-actions[hidden] {
  display: none;
}

.create-list {
  flex-direction: column;
  gap: 0.6rem;
}

.create-list-empty {
  margin: 2rem 0;
  text-align: center;
  font-family: var(--font-display);
  color: var(--muted);
}

.create-list-empty[hidden] {
  display: none;
}

.fighter-card.custom {
  border-color: rgba(199, 125, 255, 0.5);
  background:
    radial-gradient(ellipse at 50% 80%, rgba(199, 125, 255, 0.2), transparent 62%),
    rgba(14, 18, 40, 0.88);
}

.mine-card {
  position: relative;
  padding: 0;
  cursor: default;
}

.mine-play {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  width: 100%;
  padding: 0.6rem 0.6rem 0.85rem;
  cursor: pointer;
}

.mine-tools {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mine-tool {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid rgba(243, 255, 246, 0.2);
  background: rgba(6, 22, 26, 0.75);
  font-size: 1rem;
  cursor: pointer;
}

.create-card-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  border-color: rgba(199, 125, 255, 0.6);
}

.create-tile-icon {
  display: grid;
  place-items: center;
  height: 110px;
  margin-bottom: 0.35rem;
  font-size: 3rem;
}

.create-gate-card {
  width: min(460px, 92vw);
  align-items: center;
  background: rgba(8, 24, 30, 0.95);
  border: 2px solid rgba(199, 125, 255, 0.45);
  border-radius: 24px;
  padding: 1.2rem;
}

.create-gate-card h3 {
  font-size: 1.5rem;
}

.create-gate-text {
  margin: 0;
  color: var(--foam);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.45;
}

.gate-hold {
  border-color: rgba(199, 125, 255, 0.7);
  color: #e3c6ff;
  font-size: 1rem;
  padding: 0.8rem 1.6rem;
}

.gate-hold .hold-fill {
  background: rgba(199, 125, 255, 0.55);
}

@media (orientation: landscape) and (max-height: 520px) {
  #screen-create .screen-header {
    margin-bottom: 0.4rem;
  }

  .photo-slot {
    width: min(150px, 34dvh);
    border-radius: 22px;
  }

  .photo-note {
    display: none;
  }

  .powers-input {
    font-size: 0.95rem;
    padding: 0.55rem 0.8rem;
  }

  .create-go {
    padding: 0.7rem 1.4rem;
  }

  #create-preview {
    height: min(200px, 44dvh);
  }

  .create-stage {
    padding: 0.5rem;
  }

  .create-stage .preview-name {
    font-size: 1.05rem;
  }

  .create-card {
    gap: 0.4rem;
  }

  .create-moves {
    font-size: 0.8rem;
  }

  .create-gate-card {
    padding: 0.9rem;
    gap: 0.5rem;
  }

  .create-gate-text {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .create-loading-canvas,
  .create-sparkles i {
    animation: none;
  }
}