@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Russo+One&display=swap');

:root {
  color-scheme: dark;
  --bg: #040814;
  --panel: rgba(11, 19, 43, 0.72);
  --panel-border: #17f1ff;
  --text: #e2efff;
  --muted: #7fa0c4;
  --accent: #ff2aa6;
  --accent-alt: #17f1ff;
  --accent-good: #d7ff2f;
  --accent-warn: #ff8c2a;
  --accent-deep: #6a35ff;
  --grid-line: rgba(23, 241, 255, 0.09);
  --panel-glow: 0 0 0 1px rgba(23, 241, 255, 0.22), 0 0 22px rgba(23, 241, 255, 0.14), 0 0 40px rgba(106, 53, 255, 0.18);
  --shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
  --font-arcade: 'Russo One', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(23, 241, 255, 0.22), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(255, 42, 166, 0.22), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(106, 53, 255, 0.28), transparent 38%),
    linear-gradient(rgba(23, 241, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 241, 255, 0.05) 1px, transparent 1px);
  background-size: auto, auto, auto, 24px 24px, 24px 24px;
  color: var(--text);
  animation: pageFadeIn 0.8s ease-out;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

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

body::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.04)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px);
  opacity: 0.16;
  mix-blend-mode: screen;
}

body::after {
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(23, 241, 255, 0.08) 50%, transparent 54%),
    linear-gradient(315deg, transparent 0 47%, rgba(255, 42, 166, 0.08) 50%, transparent 53%);
  opacity: 0.4;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

button {
  font: inherit;
  font-family: var(--font-arcade);
}

.text-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(23, 241, 255, 0.22);
  background: rgba(4, 8, 20, 0.72);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(255, 42, 166, 0.12), 0 10px 20px rgba(0, 0, 0, 0.35);
  font-family: var(--font-arcade);
  letter-spacing: 0.4px;
}

.text-input:focus {
  outline: none;
  border-color: rgba(255, 42, 166, 0.45);
  box-shadow: 0 0 0 2px rgba(255, 42, 166, 0.2), 0 10px 20px rgba(0, 0, 0, 0.35);
}

.app-shell {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-left: 1px solid rgba(23, 241, 255, 0.18);
  border-right: 1px solid rgba(255, 42, 166, 0.16);
  background: linear-gradient(180deg, rgba(5, 10, 26, 0.88), rgba(3, 8, 18, 0.94));
  box-shadow: var(--panel-glow);
}

.app-shell::before,
.app-shell::after {
  content: '';
  position: absolute;
  inset: 12px;
  pointer-events: none;
  z-index: 0;
}

.app-shell::before {
  border: 1px solid rgba(23, 241, 255, 0.18);
  clip-path: polygon(0 20px, 20px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 24px 100%, 0 calc(100% - 24px));
}

.app-shell::after {
  background:
    linear-gradient(90deg, rgba(23, 241, 255, 0.12), transparent 18%, transparent 82%, rgba(255, 42, 166, 0.12)),
    linear-gradient(180deg, transparent, rgba(23, 241, 255, 0.06) 45%, transparent);
  opacity: 0.75;
}

#app-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 24px;
  z-index: 1;
}

.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(6, 12, 26, 0.2), rgba(6, 12, 26, 0.55)),
    radial-gradient(circle at top, rgba(23, 241, 255, 0.12), transparent 42%);
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  padding: 24px;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
}

.screen > * {
  flex-shrink: 0;
}

.screen.active {
  display: flex;
  animation: panelFadeIn 0.4s ease-out;
}

.screen-centered {
  justify-content: center;
}

.screen-home .punching-bag-container {
  min-height: 240px;
}

.home-logo {
  width: 100%;
}

.home-actions {
  align-self: stretch;
}

.screen-stack {
  align-items: stretch;
  text-align: center;
}

.screen-kicker {
  font-family: var(--font-arcade);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--accent-alt);
  text-shadow: 0 0 12px rgba(23, 241, 255, 0.35);
  width: 100%;
}

.screen-kicker-left {
  text-align: left;
}

.screen-kicker-center {
  text-align: center;
}

.screen-kicker-right {
  text-align: right;
}

.screen-actions {
  margin-top: auto;
}

.screen-countdown {
  justify-content: center;
}

.screen-countdown .punching-bag-container {
  min-height: 220px;
}

.stats-grid {
  align-self: stretch;
}

.stats-grid .info-row {
  min-width: 0;
}

.stats-grid .info-row > div:last-child,
.screen-actions button,
#battle-status-copy,
#battle-result-copy,
#battle-prep-copy,
#battle-challenge-preview,
#res-copy,
#safety-copy,
#safety-subcopy,
#punch-instruction {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.battle-hud-panel {
  width: 100%;
  margin-bottom: 8px;
}

.punch-motion-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
}

.punch-callout {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(6, 14, 32, 0.9), rgba(8, 18, 38, 0.72));
  border: 1px solid rgba(23, 241, 255, 0.22);
  box-shadow: var(--panel-glow);
}

.punch-instruction {
  max-width: 86%;
  line-height: 1.08;
  text-align: center;
  word-break: break-word;
  font-size: clamp(24px, 6vw, 32px) !important;
  margin-bottom: 0 !important;
}

.punch-subcopy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

.punch-stage,
.result-stage {
  min-height: 220px;
}

.punch-stage {
  flex: 1;
  min-height: 300px;
  align-items: center;
  justify-content: center;
}

.punch-stage .punching-bag {
  transition: transform 120ms ease-out, filter 120ms ease-out, box-shadow 120ms ease-out;
}

.screen-punch-layout {
  justify-content: flex-start;
  gap: 8px;
}

.screen-punch-layout .punch-stage {
  flex: 1 1 auto;
  min-height: clamp(192px, 30vh, 260px);
  margin-top: 12px;
  transform: scale(0.9) !important;
}

.screen-punch-layout .punching-bag {
  width: 96px;
  height: 190px;
}

.screen-result-layout .result-stage {
  min-height: 210px;
  transform: scale(1.08) !important;
}

.punch-fallback-panel {
  margin-top: 0;
  padding-top: 8px;
}

.screen-result-layout {
  gap: 12px;
}

.screen-battle-layout {
  justify-content: flex-start;
  gap: 10px;
}

#battle-status-title {
  font-size: clamp(32px, 8vw, 42px) !important;
  line-height: 1.04;
  margin-bottom: 8px !important;
}

#battle-status-phase {
  font-size: clamp(15px, 4vw, 18px) !important;
  margin-bottom: 4px !important;
}

#battle-status-copy {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.result-title-banner {
  text-align: center;
  align-self: center;
  max-width: 100%;
  line-height: 1;
}

.result-damage-hud {
  position: relative;
  align-self: center;
  margin-top: -24px;
  margin-bottom: 4px;
}

.result-rank-panel {
  width: 100%;
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 14px;
  align-items: stretch;
}

.result-rank-badge,
.result-meter-card {
  padding: 14px;
  background: linear-gradient(180deg, rgba(6, 14, 32, 0.94), rgba(10, 18, 42, 0.76));
  border: 1px solid rgba(23, 241, 255, 0.24);
  box-shadow: var(--panel-glow);
}

.result-rank-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.result-rank-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
  font-weight: 700;
}

.result-rank-tier {
  font-family: var(--font-arcade);
  font-size: clamp(36px, 9vw, 52px);
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(255, 42, 166, 0.3);
}

.result-rank-tier.is-c { color: #8fd1ff; }
.result-rank-tier.is-b { color: var(--accent-alt); }
.result-rank-tier.is-a { color: var(--accent-good); }
.result-rank-tier.is-s { color: #ffe56d; }
.result-rank-tier.is-ss { color: #ffffff; text-shadow: 0 0 16px rgba(255,255,255,0.38), 0 0 28px rgba(23,241,255,0.28); }

.result-meter-card {
  display: grid;
  gap: 12px;
  align-content: center;
}

.result-meter-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.result-meter-label {
  color: var(--accent-good);
  font-family: var(--font-arcade);
  font-size: 14px;
}

.result-meter-track {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(23, 241, 255, 0.18);
}

.result-meter-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1fd9ff, #7c4dff);
  box-shadow: 0 0 18px rgba(23, 241, 255, 0.28);
  transition: width 360ms ease-out;
}

.result-meter-fill.is-c { background: linear-gradient(90deg, #6cbcff, #7ee8ff); }
.result-meter-fill.is-b { background: linear-gradient(90deg, #15d8ff, #4d8dff); }
.result-meter-fill.is-a { background: linear-gradient(90deg, #29ffa8, #15d8ff); }
.result-meter-fill.is-s { background: linear-gradient(90deg, #ffe15a, #ff8c42); }
.result-meter-fill.is-ss { background: linear-gradient(90deg, #ffffff, #8bf8ff, #ff78dc); }

.result-grid-panel {
  align-self: stretch;
}

.result-stats-grid {
  align-items: stretch;
}

.result-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  min-height: 120px;
}

.result-stat-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.4px;
}

.result-stat-value,
#res-score,
#res-rating,
#res-title,
#res-copy {
  text-align: center;
  width: 100%;
  line-height: 1.18;
}

.result-stat-value {
  font-size: clamp(22px, 5vw, 28px);
  font-family: var(--font-arcade);
}

#res-rating {
  font-size: clamp(22px, 5.5vw, 28px) !important;
  line-height: 1.2;
}

#res-title {
  font-size: clamp(22px, 6vw, 24px) !important;
  line-height: 1.2;
}

#res-copy {
  font-size: clamp(20px, 5vw, 24px) !important;
  color: var(--accent-good) !important;
}

.screen-battle-layout {
  gap: 12px;
}

.screen-battle-result-layout {
  gap: 12px;
}

.battle-result-hero {
  width: 100%;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 12px 6px;
}

.battle-result-kicker {
  font-family: var(--font-arcade);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--accent-alt);
  opacity: 0.9;
}

.battle-result-impact-mark {
  position: absolute;
  inset: 8px 18% auto;
  height: 90px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.55), rgba(23, 241, 255, 0.22) 24%, rgba(255, 42, 166, 0.16) 48%, transparent 72%);
  filter: blur(22px);
  opacity: 0.65;
  pointer-events: none;
}

.battle-result-defeated {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(23, 241, 255, 0.24);
  background: linear-gradient(135deg, rgba(8, 18, 38, 0.92), rgba(18, 16, 44, 0.86));
  color: #fff;
  font-family: var(--font-arcade);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-align: center;
  box-shadow: var(--panel-glow);
}

.screen-battle-result-layout.is-revealing .battle-result-kicker,
.screen-battle-result-layout.is-revealing #battle-result-title,
.screen-battle-result-layout.is-revealing .battle-result-defeated,
.screen-battle-result-layout.is-revealing #battle-result-copy,
.screen-battle-result-layout.is-revealing .stats-grid,
.screen-battle-result-layout.is-revealing .screen-actions {
  animation-duration: 0.55s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.screen-battle-result-layout.is-revealing .battle-result-kicker {
  animation-name: resultRiseIn;
}

.screen-battle-result-layout.is-revealing #battle-result-title {
  animation-name: resultTitleSlam;
  animation-delay: 0.05s;
}

.screen-battle-result-layout.is-revealing .battle-result-defeated {
  animation-name: resultChipIn;
  animation-delay: 0.11s;
}

.screen-battle-result-layout.is-revealing #battle-result-copy {
  animation-name: resultRiseIn;
  animation-delay: 0.18s;
}

.screen-battle-result-layout.is-revealing .stats-grid {
  animation-name: resultRiseIn;
  animation-delay: 0.24s;
}

.screen-battle-result-layout.is-revealing .screen-actions {
  animation-name: resultRiseIn;
  animation-delay: 0.3s;
}

.screen-battle-result-layout.is-win #battle-result-title {
  color: var(--accent-good) !important;
  text-shadow: 0 0 20px rgba(215, 255, 47, 0.28), 4px 4px 0 #000;
}

.screen-battle-result-layout.is-win .battle-result-kicker,
.screen-battle-result-layout.is-win .battle-result-defeated {
  color: var(--accent-good);
}

.screen-battle-result-layout.is-lose #battle-result-title {
  color: var(--accent) !important;
  text-shadow: 0 0 18px rgba(255, 42, 166, 0.28), 4px 4px 0 #000;
}

.screen-battle-result-layout.is-draw #battle-result-title {
  color: #ffe56d !important;
  text-shadow: 0 0 18px rgba(255, 229, 109, 0.24), 4px 4px 0 #000;
}

/* HERO / HEADER - Kept for fallback, but not used in layout */
.hero {
  text-align: center;
  margin-bottom: 32px;
}

.game-logo {
  margin-bottom: 48px;
}
.game-logo h1 {
  margin: 0;
  font-family: var(--font-arcade);
  font-size: clamp(48px, 15vw, 80px);
  text-transform: uppercase;
  color: #f4fbff;
  text-shadow:
    0 0 8px rgba(23, 241, 255, 0.45),
    0 0 18px rgba(23, 241, 255, 0.3),
    3px 3px 0 rgba(255, 42, 166, 0.75);
  letter-spacing: 3px;
  line-height: 1.1;
}

.subtitle {
  margin: 16px auto 0;
  max-width: 600px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* PUNCHING BAG CSS ART */
.punching-bag-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 240px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.punching-bag {
  width: 110px;
  height: 220px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 16%, transparent 84%, rgba(255,255,255,0.12)),
    linear-gradient(135deg, #ff2aa6 0%, #8b1cff 48%, #0e1528 100%);
  border-radius: 20px 20px 55px 55px;
  box-shadow:
    inset -12px -12px 24px rgba(0,0,0,0.6),
    inset 12px 12px 24px rgba(255,255,255,0.15),
    0 0 0 2px rgba(23, 241, 255, 0.18),
    0 0 24px rgba(255, 42, 166, 0.22),
    0 18px 24px rgba(0, 0, 0, 0.42);
  position: relative;
  transform-origin: top center;
  border: 3px solid rgba(0, 0, 0, 0.8);
}

.punching-bag::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #162341, #0c1327);
  border: 3px solid rgba(23, 241, 255, 0.22);
  border-radius: 4px;
  box-shadow: inset -4px -4px 8px rgba(0,0,0,0.5);
}

.punching-bag::after {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 16px;
  background: linear-gradient(180deg, #8ef8ff, #6670ff);
  border: 2px solid rgba(0, 0, 0, 0.75);
}

@keyframes bagHit {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-18deg) translateX(-15px); }
  30% { transform: rotate(12deg) translateX(10px); }
  50% { transform: rotate(-8deg) translateX(-5px); }
  70% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

.bag-hit .punching-bag {
  animation: bagHit 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
}

.bag-hit .punching-bag::before {
  box-shadow: 0 0 18px rgba(23, 241, 255, 0.45);
}

@keyframes screenShake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-10px, -10px); }
  20% { transform: translate(10px, 10px); }
  30% { transform: translate(-10px, 10px); }
  40% { transform: translate(10px, -10px); }
  50% { transform: translate(-5px, -5px); }
  60% { transform: translate(5px, 5px); }
  70% { transform: translate(-5px, 5px); }
  80% { transform: translate(5px, -5px); }
  90% { transform: translate(-2px, -2px); }
  100% { transform: translate(0, 0); }
}

.screen-shake {
  animation: screenShake 0.4s ease-out;
}

@keyframes punchCueBag {
  0% { transform: translateY(22px) scale(0.88) rotate(-5deg); opacity: 0.3; filter: blur(6px); }
  40% { transform: translateY(-6px) scale(1.04) rotate(4deg); opacity: 1; filter: blur(0); }
  65% { transform: translateY(2px) scale(0.98) rotate(-2deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; filter: blur(0); }
}

@keyframes punchCueStage {
  0% { opacity: 0.2; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

.punch-stage.is-cueing {
  animation: punchCueStage 0.38s ease-out;
}

.punch-stage.is-cueing .punching-bag {
  animation: punchCueBag 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panel {
  padding: 24px;
  border: 3px solid #000;
  border-radius: 0;
  background: var(--panel);
  box-shadow: 6px 6px 0 #000;
  position: relative;
}

.panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.panel-head h2 {
  margin: 0;
  font-family: var(--font-arcade);
  font-size: 24px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
}

.panel-note {
  color: var(--accent-alt);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
}

/* CHIPS & BADGES */
.status-chip,
.mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  min-height: 36px;
  padding: 0 16px;
  background: #000;
  color: var(--accent-alt);
  border: 2px solid var(--accent-alt);
  font-family: var(--font-arcade);
  font-size: 14px;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--accent-alt);
}

.status-chip.is-good,
.mode-badge.is-good {
  color: var(--accent-good);
  border-color: var(--accent-good);
  box-shadow: 2px 2px 0 var(--accent-good);
}

.status-chip.is-warn,
.mode-badge.is-warn {
  color: var(--accent-warn);
  border-color: var(--accent-warn);
  box-shadow: 2px 2px 0 var(--accent-warn);
}

/* GRIDS */
.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(6, 14, 32, 0.88), rgba(10, 16, 38, 0.72));
  border: 1px solid rgba(23, 241, 255, 0.22);
  box-shadow: var(--panel-glow);
}

.info-row span,
.helper-list p,
.fallback-copy,
.result-message,
.status-message,
.metric-label,
.result-label {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  font-weight: bold;
}

.info-row strong {
  font-size: 16px;
  color: #fff;
  font-family: var(--font-arcade);
}

.status-message {
  margin: 20px 0 0;
  line-height: 1.6;
  padding: 12px;
  background: rgba(0, 229, 255, 0.1);
  border-left: 4px solid var(--accent-alt);
  color: #fff;
  font-weight: bold;
}

/* BUTTONS */
.button-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 480px) {
  .button-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.button-grid button,
.charge-button {
  position: relative;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid rgba(23, 241, 255, 0.38);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 24px rgba(0, 0, 0, 0.34);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  backdrop-filter: blur(6px);
  overflow: visible;
}

.button-grid button:active:not(:disabled),
.charge-button:active:not(:disabled) {
  transform: translateY(2px) scale(0.985);
  box-shadow: 0 0 16px rgba(23, 241, 255, 0.22);
}

.button-grid button:disabled,
.charge-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(100%);
  transform: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.primary-button {
  background: linear-gradient(135deg, rgba(23, 241, 255, 0.85), rgba(106, 53, 255, 0.88));
  color: #041220;
  box-shadow: 0 0 18px rgba(23, 241, 255, 0.24), 0 10px 24px rgba(0, 0, 0, 0.35);
}

.secondary-button {
  background: linear-gradient(135deg, rgba(22, 31, 58, 0.92), rgba(36, 18, 68, 0.92));
  color: #d7e8ff;
}

.accent-button {
  background: linear-gradient(135deg, rgba(255, 42, 166, 0.96), rgba(106, 53, 255, 0.92));
  color: #fff;
  font-size: 20px;
  box-shadow: 0 0 22px rgba(255, 42, 166, 0.26), 0 10px 24px rgba(0, 0, 0, 0.35);
}

.pvp-action-button {
  border: none;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34), 0 0 18px rgba(23, 241, 255, 0.12);
}

.pvp-action-button:disabled {
  border: none;
}

.ghost-button {
  background: transparent;
  color: var(--text);
  border-color: #555;
}

/* PUNCH EMPHASIS EFFECT */
body.is-punching .accent-button {
  animation: pulseButton 0.5s infinite alternate;
}

@keyframes pulseButton {
  from { box-shadow: 0 0 12px rgba(255, 42, 166, 0.4), 0 8px 24px rgba(0,0,0,0.3); }
  to { box-shadow: 0 0 34px rgba(255, 42, 166, 0.55), 0 8px 26px rgba(0,0,0,0.38); }
}

.button-punch-pop::after {
  content: 'PUNCH!';
  position: absolute;
  top: -6px;
  right: 18px;
  transform: rotate(-10deg) scale(0.72);
  color: #ffe83a;
  font-family: var(--font-arcade);
  font-size: 24px;
  letter-spacing: 1px;
  text-shadow:
    0 0 12px rgba(215, 255, 47, 0.32),
    2px 2px 0 rgba(0, 0, 0, 0.92);
  pointer-events: none;
  z-index: 12;
  animation: punchPop 0.56s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes punchPop {
  0% { opacity: 0; transform: translateY(12px) rotate(2deg) scale(0.62); }
  18% { opacity: 1; transform: translateY(-2px) rotate(-8deg) scale(1.06); }
  62% { opacity: 1; transform: translateY(-8px) rotate(-12deg) scale(1.1); }
  100% { opacity: 0; transform: translateY(-20px) rotate(-16deg) scale(1.18); }
}

.helper-list {
  margin-top: 20px;
  padding: 16px;
  background: rgba(8, 15, 34, 0.72);
  border: 1px dashed rgba(23, 241, 255, 0.24);
}

.helper-list p {
  margin: 8px 0 0;
  line-height: 1.5;
  color: var(--muted);
}
.helper-list p:first-child {
  margin-top: 0;
}

.pulse-text {
  animation: pulseText 0.5s infinite alternate;
}

@keyframes pulseText {
  from { transform: scale(1); text-shadow: 4px 4px 0 #000; }
  to { transform: scale(1.1); text-shadow: 8px 8px 0 #000, 0 0 20px var(--accent); }
}

/* METRICS */
.metric-grid,
.result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 480px) {
  .metric-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.metric-card,
.result-card {
  padding: 16px;
  background: #000;
  border: 2px solid #333;
  text-align: center;
}

.metric-card strong,
.result-card strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(24px, 6vw, 36px);
  font-family: var(--font-arcade);
  color: #fff;
}

.metric-hot {
  border-color: var(--accent);
  background: rgba(255, 0, 60, 0.1);
}
.metric-hot strong {
  color: var(--accent);
}

/* CHARGE BAR */
.charge-bar {
  width: 100%;
  height: 32px;
  border: 1px solid rgba(23, 241, 255, 0.26);
  background: linear-gradient(180deg, rgba(4, 7, 19, 0.92), rgba(14, 20, 38, 0.92));
  margin: 16px 0;
  position: relative;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.5), 0 0 14px rgba(23, 241, 255, 0.12);
}

.charge-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-alt) 0%, var(--accent) 52%, var(--accent-good) 100%);
  transition: width 0.05s linear;
  box-shadow: 0 0 16px rgba(23, 241, 255, 0.34);
}

.charge-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

#charge-value {
  font-family: var(--font-arcade);
  font-size: 32px;
  color: var(--accent-good);
  text-shadow: 2px 2px 0 #000;
  display: inline-block;
}

/* ANIMATIONS ADDED VIA SCRIPT */
.scale-anim {
  animation: scalePop 0.15s ease-out;
}
@keyframes scalePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); color: #fff; }
  100% { transform: scale(1); }
}

.charge-button {
  width: 100%;
  background: linear-gradient(135deg, rgba(255, 140, 42, 0.94), rgba(255, 42, 166, 0.88));
  color: #08111d;
}

/* RESULT */
.panel-result {
  border-color: var(--accent-good);
}

.result-card {
  border-color: #444;
}

@media (min-width: 860px) {
  .panel-status,
  .panel-controls {
    grid-column: span 6;
  }
}

.result-score {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(255, 42, 166, 0.78), rgba(106, 53, 255, 0.82));
  border-color: rgba(23, 241, 255, 0.18);
  padding: 24px;
}

.result-score .result-label {
  color: #000;
}

.result-score strong {
  font-size: clamp(48px, 12vw, 80px);
  color: var(--accent-good);
  text-shadow: 4px 4px 0 #000;
  display: inline-block;
}

.pop-anim {
  animation: scorePop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes scorePop {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.fade-in-anim {
  animation: panelFadeIn 0.5s ease-out;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(20px); box-shadow: 0 0 0 #000; }
  to { opacity: 1; transform: translateY(0); box-shadow: 6px 6px 0 #000; }
}

.result-message {
  margin: 20px 0 0;
  line-height: 1.6;
  font-size: 16px;
  color: #fff;
  text-align: center;
  background: rgba(23, 241, 255, 0.08);
  padding: 16px;
  border: 1px dashed rgba(23, 241, 255, 0.35);
}

#countdown-display,
#res-score,
#res-rating,
#res-damage,
#result-title {
  filter: drop-shadow(0 0 10px rgba(23, 241, 255, 0.22));
}

#countdown-display {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: min(92%, 380px);
  height: fit-content;
  max-width: 100%;
  text-align: center;
  font-size: clamp(128px, 32vw, 180px) !important;
  line-height: 0.9;
  white-space: nowrap;
  pointer-events: none;
}

#countdown-display.is-punch-cue {
  width: min(94%, 420px);
  font-size: clamp(70px, 18vw, 108px) !important;
  line-height: 0.95;
  letter-spacing: 3px;
  color: #ffe83a !important;
  -webkit-text-stroke: 2px rgba(42, 16, 0, 0.92);
  text-shadow:
    0 0 18px rgba(255, 232, 58, 0.5),
    0 0 28px rgba(255, 138, 42, 0.28),
    -4px 4px 0 rgba(255, 124, 12, 0.96),
    4px 7px 0 rgba(0, 0, 0, 0.95);
  transform: rotate(-11deg) skewX(-8deg);
}

#damage-hud::before {
  content: '';
  position: absolute;
  inset: -16px;
  border: 1px solid rgba(23, 241, 255, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 18, 42, 0.46), rgba(10, 18, 42, 0.1));
  z-index: -1;
  box-shadow: var(--panel-glow);
}

.battle-arena {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 14px;
  margin-bottom: 18px;
  padding: 28px 12px 16px;
  position: relative;
  min-height: 280px;
  flex: 1 1 auto;
  perspective: 1200px;
  transform-style: preserve-3d;
  isolation: isolate;
  overflow: hidden;
}

.arena-backdrop,
.arena-floor {
  position: absolute;
  pointer-events: none;
}

.arena-backdrop {
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(23, 241, 255, 0.18), transparent 28%),
    radial-gradient(circle at 50% 55%, rgba(255, 42, 166, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(8, 17, 38, 0.96), rgba(5, 10, 24, 0.86));
  box-shadow: inset 0 0 40px rgba(23, 241, 255, 0.08), 0 20px 40px rgba(0, 0, 0, 0.35);
  z-index: 0;
}

.arena-cityline,
.arena-crowd,
.arena-lights,
.arena-energy-ring,
.arena-scanlines {
  position: absolute;
  inset: 0;
}

.arena-cityline {
  bottom: 18%;
  top: auto;
  height: 34%;
  background:
    linear-gradient(90deg, rgba(12, 20, 42, 0.94) 0 8%, transparent 8% 12%, rgba(12, 20, 42, 0.94) 12% 19%, transparent 19% 23%, rgba(12, 20, 42, 0.96) 23% 34%, transparent 34% 38%, rgba(12, 20, 42, 0.94) 38% 48%, transparent 48% 52%, rgba(12, 20, 42, 0.94) 52% 63%, transparent 63% 67%, rgba(12, 20, 42, 0.98) 67% 81%, transparent 81% 85%, rgba(12, 20, 42, 0.94) 85% 100%);
  opacity: 0.95;
}

.arena-cityline::after {
  content: '';
  position: absolute;
  inset: 12px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(23, 241, 255, 0.18) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(0deg, rgba(255, 42, 166, 0.1) 0 2px, transparent 2px 16px);
  mix-blend-mode: screen;
  opacity: 0.35;
}

.arena-crowd {
  inset: auto 0 12%;
  height: 16%;
  background:
    radial-gradient(circle at 8% 100%, rgba(255, 42, 166, 0.28), transparent 28%),
    radial-gradient(circle at 28% 100%, rgba(23, 241, 255, 0.22), transparent 26%),
    radial-gradient(circle at 44% 100%, rgba(255, 42, 166, 0.24), transparent 24%),
    radial-gradient(circle at 62% 100%, rgba(23, 241, 255, 0.2), transparent 26%),
    radial-gradient(circle at 84% 100%, rgba(255, 42, 166, 0.24), transparent 28%);
  opacity: 0.45;
  filter: blur(10px);
}

.arena-lights {
  background:
    radial-gradient(circle at 20% 24%, rgba(23, 241, 255, 0.22), transparent 14%),
    radial-gradient(circle at 77% 18%, rgba(255, 42, 166, 0.22), transparent 16%),
    radial-gradient(circle at 54% 30%, rgba(215, 255, 47, 0.12), transparent 12%);
  animation: arenaPulse 2.4s ease-in-out infinite alternate;
}

.arena-energy-ring {
  inset: 12% 14%;
  border: 1px solid rgba(23, 241, 255, 0.18);
  border-radius: 999px;
  filter: blur(0.2px);
  box-shadow: 0 0 30px rgba(23, 241, 255, 0.12), inset 0 0 20px rgba(255, 42, 166, 0.08);
}

.arena-scanlines {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.03)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px);
  opacity: 0.14;
  mix-blend-mode: screen;
}

.arena-floor {
  left: 7%;
  right: 7%;
  bottom: 4px;
  height: 42%;
  background:
    linear-gradient(180deg, rgba(23, 241, 255, 0.02), rgba(23, 241, 255, 0.18)),
    repeating-linear-gradient(90deg, rgba(23, 241, 255, 0.18) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(0deg, rgba(255, 42, 166, 0.15) 0 2px, transparent 2px 32px);
  border-top: 1px solid rgba(23, 241, 255, 0.35);
  transform: rotateX(78deg) translateZ(-20px);
  transform-origin: center bottom;
  opacity: 0.78;
  z-index: 0;
}

.arena-impact-burst,
.arena-speedlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.arena-impact-burst {
  inset: 16% 18% 22%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.88), rgba(23, 241, 255, 0.38) 14%, rgba(255, 42, 166, 0.18) 28%, transparent 56%);
  filter: blur(10px);
  transform: scale(0.5);
}

.arena-speedlines-player {
  background:
    linear-gradient(115deg, transparent 18%, rgba(23, 241, 255, 0.12) 32%, transparent 46%),
    linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, 0.16) 44%, transparent 58%),
    linear-gradient(121deg, transparent 42%, rgba(255, 42, 166, 0.14) 58%, transparent 70%);
}

.arena-speedlines-robot {
  background:
    linear-gradient(245deg, transparent 18%, rgba(255, 42, 166, 0.12) 32%, transparent 46%),
    linear-gradient(242deg, transparent 28%, rgba(255, 255, 255, 0.14) 44%, transparent 58%),
    linear-gradient(239deg, transparent 42%, rgba(23, 241, 255, 0.14) 58%, transparent 70%);
}

.fighter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease, filter 0.2s ease;
  z-index: 2;
}

.fighter-label {
  font-family: var(--font-arcade);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--muted);
}

.fighter-avatar {
  position: relative;
  width: 142px;
  height: 196px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transform-style: preserve-3d;
  transform: rotateY(0deg) rotateX(2deg);
  animation: fighterFloat 2.2s ease-in-out infinite alternate;
}

.fighter-illustration,
.fighter-trail,
.fighter-platform,
.fighter-glow,
.fighter-shadow {
  position: absolute;
}

.fighter-illustration {
  inset: 0 6px 22px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  filter: saturate(1.18) contrast(1.08) brightness(1.02) drop-shadow(0 18px 18px rgba(0, 0, 0, 0.42));
  transform: translateZ(30px) scale(1.06);
  clip-path: polygon(16% 2%, 82% 0, 96% 12%, 100% 38%, 94% 78%, 78% 100%, 18% 100%, 4% 84%, 0 34%);
}

.fighter-trail {
  inset: 18px 12px 24px;
  border-radius: 999px;
  filter: blur(24px);
  opacity: 0.3;
  transform: translateZ(8px);
}

.challenge-core-wrap {
  position: absolute;
  inset: 28% 18% 24%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.challenge-core-wrap::before,
.challenge-core-wrap::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  pointer-events: none;
  opacity: 0;
}

.challenge-core-wrap::before {
  width: 118px;
  height: 118px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.32);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 10%, rgba(23, 241, 255, 0.38) 22%, rgba(255, 42, 166, 0.16) 42%, transparent 70%);
  filter: blur(10px);
}

.challenge-core-wrap::after {
  width: 132px;
  height: 132px;
  transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.9) 50%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255, 42, 166, 0.85) 50%, transparent 53%),
    linear-gradient(35deg, transparent 47%, rgba(23, 241, 255, 0.82) 50%, transparent 53%),
    linear-gradient(-35deg, transparent 47%, rgba(255, 255, 255, 0.78) 50%, transparent 53%);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.24));
}

.challenge-core {
  min-width: 78px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 42, 166, 0.86), rgba(106, 53, 255, 0.88));
  color: #fff;
  font-family: var(--font-arcade);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 18px rgba(255, 42, 166, 0.28);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.challenge-shards {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.challenge-shard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 10px;
  opacity: 0;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 42, 166, 0.9));
  box-shadow: 0 0 18px rgba(255, 42, 166, 0.24);
  clip-path: polygon(0 50%, 28% 0, 100% 18%, 76% 100%, 18% 84%);
}

.fighter-trail-player {
  background: radial-gradient(circle at 50% 50%, rgba(23, 241, 255, 0.5), transparent 62%);
}

.fighter-trail-robot {
  background: radial-gradient(circle at 50% 50%, rgba(255, 42, 166, 0.48), transparent 62%);
}

.fighter-shadow {
  left: 18%;
  right: 18%;
  bottom: 6px;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.45), transparent 68%);
  filter: blur(6px);
  transform: translateZ(-8px);
}

.fighter-platform {
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(23, 241, 255, 0.48), rgba(255, 42, 166, 0.16) 52%, transparent 72%);
  box-shadow: 0 0 18px rgba(23, 241, 255, 0.18);
  transform: translateZ(-2px);
  opacity: 0.9;
}

.fighter-glow {
  inset: auto 8% 18px;
  height: 52%;
  border-radius: 999px 999px 20px 20px;
  filter: blur(20px);
  opacity: 0.62;
}

.fighter-glow-player {
  background: radial-gradient(circle, rgba(23, 241, 255, 0.46), transparent 62%);
}

.fighter-glow-robot {
  background: radial-gradient(circle, rgba(255, 42, 166, 0.44), transparent 62%);
}

.fighter-robot .fighter-avatar::before,
.fighter-player .fighter-avatar::before {
  content: '';
  position: absolute;
  inset: 12px 16px 18px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.22), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.1), transparent 24%),
    linear-gradient(135deg, rgba(23, 241, 255, 0.18), transparent 28%, transparent 62%, rgba(255, 42, 166, 0.18));
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(16% 2%, 82% 0, 96% 12%, 100% 38%, 94% 78%, 78% 100%, 18% 100%, 4% 84%, 0 34%);
}

.fighter-robot .fighter-avatar::after,
.fighter-player .fighter-avatar::after {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  box-shadow: 0 0 14px rgba(255,255,255,0.22);
  z-index: 2;
}

.arena-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-bottom: 28px;
  z-index: 2;
}

.arena-vs {
  font-family: var(--font-arcade);
  color: var(--accent-good);
  font-size: 20px;
  letter-spacing: 3px;
  text-shadow: 0 0 14px rgba(215, 255, 47, 0.35);
}

.arena-flash {
  width: 6px;
  height: 92px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(23, 241, 255, 0.08), rgba(23, 241, 255, 0.88), rgba(255, 42, 166, 0.88), rgba(255, 42, 166, 0.08));
  box-shadow: 0 0 18px rgba(23, 241, 255, 0.22);
}

.damage-popup {
  position: absolute;
  top: 18px;
  font-family: var(--font-arcade);
  font-size: 30px;
  opacity: 0;
  transform: translateY(18px) scale(0.7);
  pointer-events: none;
  text-shadow: 0 0 16px rgba(255,255,255,0.18), 0 0 24px currentColor;
  z-index: 4;
}

.damage-popup-player {
  left: 12px;
  color: var(--accent);
}

.damage-popup-robot {
  right: 12px;
  color: var(--accent-good);
}

.damage-popup.is-active {
  animation: damageFloat 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.fighter-card.is-attacking {
  animation: fighterDash3d 0.48s cubic-bezier(0.19, 1, 0.22, 1);
}

.fighter-card.is-hit .fighter-avatar {
  animation: fighterHit3d 0.52s ease-out;
}

.fighter-card.is-hit .fighter-illustration {
  filter: saturate(1.3) brightness(1.18);
}

.fighter-card.is-shattering .fighter-illustration {
  animation: fighterShatterFade 0.9s ease-out forwards;
}

.fighter-card.is-shattering .fighter-shadow,
.fighter-card.is-shattering .fighter-platform,
.fighter-card.is-shattering .fighter-glow,
.fighter-card.is-shattering .fighter-trail {
  animation: robotAfterglowFade 0.9s ease-out forwards;
}

.fighter-card.is-shattering .challenge-core {
  animation: challengeCoreBreak 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.fighter-card.is-shattering .challenge-shard {
  animation: challengeShardExplode 0.88s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.fighter-card.is-shattering .challenge-core-wrap::before {
  animation: coreNovaBurst 0.76s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.fighter-card.is-shattering .challenge-core-wrap::after {
  animation: crackRingBurst 0.82s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.fighter-card.is-shattering .challenge-shard-1 { --shatter-x: -88px; --shatter-y: -64px; --shatter-r: -32deg; }
.fighter-card.is-shattering .challenge-shard-2 { --shatter-x: -28px; --shatter-y: -92px; --shatter-r: 38deg; }
.fighter-card.is-shattering .challenge-shard-3 { --shatter-x: 74px; --shatter-y: -54px; --shatter-r: 62deg; }
.fighter-card.is-shattering .challenge-shard-4 { --shatter-x: 96px; --shatter-y: 8px; --shatter-r: 118deg; }
.fighter-card.is-shattering .challenge-shard-5 { --shatter-x: -76px; --shatter-y: 24px; --shatter-r: -124deg; }
.fighter-card.is-shattering .challenge-shard-6 { --shatter-x: 26px; --shatter-y: 88px; --shatter-r: 164deg; }

.fighter-card.is-countering {
  animation: fighterCounterDash3d 0.48s cubic-bezier(0.19, 1, 0.22, 1);
}

.battle-arena.is-impact {
  animation: arenaImpact 0.28s ease-out;
}

.battle-arena.is-impact .arena-impact-burst {
  animation: impactBurst 0.34s ease-out;
}

.battle-arena.is-finish-impact {
  animation: arenaFinisherImpact 0.56s ease-out;
}

.battle-arena.is-finish-impact .arena-impact-burst {
  animation: finisherBurst 0.82s cubic-bezier(0.19, 1, 0.22, 1);
}

.battle-arena.is-finish-impact .arena-energy-ring {
  animation: finisherRing 0.78s ease-out;
}

.battle-arena.is-finish-impact .arena-speedlines-player {
  animation: speedlinesForward 0.46s ease-out;
}

.battle-arena.is-player-strike .arena-speedlines-player {
  animation: speedlinesForward 0.42s ease-out;
}

.battle-arena.is-robot-strike .arena-speedlines-robot {
  animation: speedlinesBackward 0.42s ease-out;
}

.battle-arena.is-player-strike .fighter-trail-player,
.battle-arena.is-robot-strike .fighter-trail-robot {
  animation: trailIgnite 0.38s ease-out;
}

@keyframes arenaPulse {
  from { opacity: 0.72; transform: scale(1); }
  to { opacity: 1; transform: scale(1.02); }
}

@keyframes fighterFloat {
  from { transform: translate3d(0, 0, 0) rotateX(2deg); }
  to { transform: translate3d(0, -6px, 18px) rotateX(0deg); }
}

@keyframes fighterDash3d {
  0% { transform: translate3d(0, 0, 0) scale(1) rotateY(0deg); }
  35% { transform: translate3d(36px, -8px, 60px) scale(1.14) rotateY(-8deg); }
  60% { transform: translate3d(22px, -2px, 26px) scale(1.08) rotateY(-4deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotateY(0deg); }
}

@keyframes fighterCounterDash3d {
  0% { transform: translate3d(0, 0, 0) scale(1) rotateY(0deg); }
  35% { transform: translate3d(-36px, -8px, 60px) scale(1.14) rotateY(8deg); }
  60% { transform: translate3d(-22px, -2px, 26px) scale(1.08) rotateY(4deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotateY(0deg); }
}

@keyframes fighterHit3d {
  0% { transform: rotateY(0deg) scale(1) translate3d(0, 0, 0); filter: brightness(1); }
  18% { transform: rotateY(8deg) scale(1.05) translate3d(18px, -4px, 18px); filter: brightness(1.6); }
  42% { transform: rotateY(-10deg) scale(0.97) translate3d(-20px, 0, -16px); filter: brightness(1.2); }
  100% { transform: rotateY(0deg) scale(1) translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes arenaImpact {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(-6px, 0, 0) scale(1.012); }
  50% { transform: translate3d(7px, -2px, 0) scale(0.996); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes impactBurst {
  0% { opacity: 0; transform: scale(0.45); }
  35% { opacity: 0.95; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.55); }
}

@keyframes finisherBurst {
  0% { opacity: 0; transform: scale(0.28); filter: blur(10px); }
  30% { opacity: 1; transform: scale(1.24); filter: blur(2px); }
  100% { opacity: 0; transform: scale(1.92); filter: blur(16px); }
}

@keyframes arenaFinisherImpact {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  20% { transform: translate3d(-10px, -3px, 0) scale(1.02); }
  42% { transform: translate3d(12px, 2px, 0) scale(0.99); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes finisherRing {
  0% { opacity: 0.24; transform: scale(0.8); }
  32% { opacity: 1; transform: scale(1.14); }
  100% { opacity: 0.18; transform: scale(1.48); }
}

@keyframes speedlinesForward {
  0% { opacity: 0; transform: translateX(-24px) skewX(-10deg); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(48px) skewX(-10deg); }
}

@keyframes speedlinesBackward {
  0% { opacity: 0; transform: translateX(24px) skewX(10deg); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(-48px) skewX(10deg); }
}

@keyframes trailIgnite {
  0% { opacity: 0.22; transform: scale(0.84); }
  35% { opacity: 0.75; transform: scale(1.12); }
  100% { opacity: 0.3; transform: scale(1); }
}

@keyframes damageFloat {
  0% { opacity: 0; transform: translateY(18px) scale(0.72); }
  20% { opacity: 1; transform: translateY(0) scale(1.06); }
  100% { opacity: 0; transform: translateY(-22px) scale(1); }
}

@keyframes challengeCoreBreak {
  0% { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
  22% { opacity: 1; transform: scale(1.16) rotate(-4deg); filter: brightness(1.5); }
  100% { opacity: 0; transform: scale(0.54) rotate(18deg); filter: brightness(2); }
}

@keyframes coreNovaBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.24); }
  28% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.72); }
}

@keyframes crackRingBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(0deg); }
  28% { opacity: 1; transform: translate(-50%, -50%) scale(1.02) rotate(12deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.54) rotate(30deg); }
}

@keyframes challengeShardExplode {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--shatter-x)), calc(-50% + var(--shatter-y))) scale(0.72) rotate(var(--shatter-r));
  }
}

@keyframes fighterShatterFade {
  0% { opacity: 1; transform: translateZ(30px) scale(1.06); filter: saturate(1.2) brightness(1.18); }
  24% { opacity: 1; transform: translateZ(46px) scale(1.12) rotate(-2deg); filter: saturate(1.4) brightness(1.5); }
  100% { opacity: 0.18; transform: translateZ(18px) scale(0.82) rotate(8deg); filter: saturate(0.7) brightness(1.9) blur(3px); }
}

@keyframes robotAfterglowFade {
  0% { opacity: 1; }
  100% { opacity: 0.16; }
}

@keyframes resultRiseIn {
  0% { opacity: 0; transform: translateY(18px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes resultTitleSlam {
  0% { opacity: 0; transform: translateY(28px) scale(0.72); filter: blur(4px); }
  58% { opacity: 1; transform: translateY(-2px) scale(1.08); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes resultChipIn {
  0% { opacity: 0; transform: scale(0.78); }
  65% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 640px) {
  .app-shell {
    min-height: 100dvh;
    height: 100dvh;
    padding: 0;
  }
  #app-container {
    padding: 14px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .screen {
    padding: 16px 12px calc(18px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .panel {
    padding: 16px;
  }
  .panel-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .status-grid {
    grid-template-columns: 1fr;
  }
  .battle-arena {
    gap: 8px;
    padding: 18px 0 10px;
    min-height: 220px;
  }
  .screen-home {
    justify-content: flex-start;
  }
  .home-logo {
    margin-bottom: 0 !important;
  }
  .screen-home .game-logo h1 {
    font-size: 40px !important;
  }
  .screen-home .game-logo p {
    font-size: 14px !important;
    line-height: 1.4;
  }
  .home-stage {
    min-height: 148px !important;
    height: 148px;
  }
  .screen-home .punching-bag-container {
    min-height: 148px;
  }
  .home-actions {
    gap: 10px !important;
  }
  .home-actions button {
    min-height: 54px;
  }
  .home-actions #btn-mode-test {
    font-size: 22px !important;
    padding: 14px !important;
  }
  .home-actions #btn-mode-battle,
  .home-actions #btn-mode-pvp {
    font-size: 17px !important;
    padding: 13px !important;
  }
  .punch-instruction {
    max-width: 92%;
    font-size: 22px !important;
    line-height: 1.02;
  }
  .punch-callout {
    padding: 10px 12px;
    gap: 6px;
  }
  .punch-subcopy {
    font-size: 12px;
  }
  .punch-motion-panel {
    gap: 12px;
    min-height: auto;
  }
  .punch-stage {
    flex: 0 0 auto;
    min-height: 168px;
    height: 168px;
  }
  .punch-stage .punching-bag,
  .result-stage .punching-bag,
  .home-stage .punching-bag {
    width: 82px;
    height: 166px;
  }
  .result-title-banner {
    font-size: 30px !important;
    line-height: 1.05;
  }
  .result-stage {
    min-height: 158px;
    height: 158px;
  }
  #countdown-display {
    font-size: clamp(108px, 30vw, 148px) !important;
  }
  #countdown-display.is-punch-cue {
    width: min(96%, 340px);
    font-size: clamp(58px, 16vw, 82px) !important;
    letter-spacing: 2px;
  }
  .screen-punch-layout .punch-stage,
  .screen-result-layout .result-stage {
    min-height: 176px;
  }
  .screen-punch-layout .punch-stage {
    transform: scale(0.82) !important;
    margin-top: 4px;
  }
  .screen-punch-layout .punching-bag {
    width: 88px;
    height: 176px;
  }
  #battle-status-title {
    font-size: 30px !important;
  }
  #battle-status-phase {
    font-size: 14px !important;
  }
  #battle-status-copy {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  .result-damage-hud {
    margin-top: -10px;
    margin-bottom: 2px;
  }
  #damage-hud div:first-child {
    font-size: 18px !important;
  }
  #res-damage {
    font-size: 48px !important;
  }
  .result-rank-panel {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .result-rank-badge {
    padding: 10px 12px;
  }
  .result-meter-card {
    padding: 10px 12px;
  }
  .result-meter-label {
    font-size: 12px;
  }
  .battle-result-kicker {
    font-size: 11px;
    letter-spacing: 1.6px;
  }
  .battle-result-defeated {
    width: 100%;
    font-size: 10px;
    padding: 7px 10px;
  }
  .result-grid-panel {
    grid-template-columns: 1fr !important;
  }
  .screen-kicker {
    letter-spacing: 1.6px;
  }
  .screen-home .game-logo p {
    line-height: 1.45;
  }
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
  .result-stat-card {
    min-height: 78px;
    padding: 12px;
  }
  .result-stat-label {
    font-size: 12px;
  }
  .result-stat-value,
  #res-score,
  #res-rating,
  #res-title,
  #res-copy {
    font-size: 18px !important;
  }
  .result-stat-value-score,
  #res-score {
    font-size: 34px !important;
  }
  .screen-actions,
  .home-actions {
    margin-top: 4px;
  }
  .screen-actions button,
  .home-actions button,
  #btn-safety-ok,
  #btn-safety-home,
  #btn-result-retry,
  #btn-result-battle,
  #btn-result-home,
  #btn-battle-start,
  #btn-battle-prep-home,
  #btn-battle-next,
  #btn-battle-status-home,
  #btn-battle-restart,
  #btn-battle-result-home,
  #btn-pvp-home {
    min-height: 50px;
    padding: 12px !important;
  }
  #btn-safety-ok,
  #btn-result-retry,
  #btn-battle-start,
  #btn-battle-next,
  #btn-battle-restart {
    font-size: 18px !important;
  }
  #btn-safety-home,
  #btn-result-battle,
  #btn-result-home,
  #btn-battle-prep-home,
  #btn-battle-status-home,
  #btn-battle-result-home,
  #btn-pvp-home {
    font-size: 16px !important;
  }
  .battle-hud-panel > div {
    flex-wrap: wrap;
    justify-content: center !important;
  }
  .battle-hud-panel > div > div {
    min-width: 88px;
  }
  .fighter-avatar {
    width: 108px;
    height: 152px;
  }
  .challenge-core {
    min-width: 70px;
    font-size: 10px;
    padding: 8px 10px;
  }
  .damage-popup {
    font-size: 22px;
  }
}