/* AXE Model Arena — RETR0 Battle Screen */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ============================================================
   PALETTE
   Default: DMG 4-green (classic handheld original)
   .gbc class: Game Boy Color blue-teal
   ============================================================ */
:root {
  --screen-bg:   #9bbc0f;
  --screen-dark: #0f380f;
  --screen-mid:  #306230;
  --screen-lite: #8bac0f;

  --hp-green:  #0f380f;
  --hp-yellow: #306230;
  --hp-red:    #0f380f;  /* DMG has no red; pulsing signals critical */

  --font: 'Press Start 2P', monospace;
  --page-bg: #181820;
}

body.gbc {
  --screen-bg:   #c8f0c0;
  --screen-dark: #183858;
  --screen-mid:  #285080;
  --screen-lite: #80b8d8;
  --hp-green:  #00a800;
  --hp-yellow: #d0b000;
  --hp-red:    #d02000;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--page-bg);
  font-family: var(--font);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 24px 12px 40px;
  image-rendering: pixelated;
}

/* ============================================================
   PAGE WRAPPER — fills the viewport, screen dominates
   ============================================================ */
#page {
  width: 100%;
  max-width: min(96vw, 1100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   TITLE + RETR0 BADGE
   ============================================================ */
#page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  color: var(--screen-lite);
  letter-spacing: 0.12em;
  text-shadow: 2px 2px 0 var(--screen-dark);
  margin-bottom: 2px;
}
body.gbc #page-title { color: #80b8d8; text-shadow: 2px 2px 0 #183858; }

#retr0-badge {
  font-size: 6px;
  color: var(--screen-bg);
  background: var(--screen-dark);
  padding: 2px 5px;
  letter-spacing: 0.08em;
  border: 1px solid var(--screen-mid);
}

/* ============================================================
   TABS
   ============================================================ */
#tab-bar {
  display: flex;
  gap: 4px;
}
.tab {
  font-family: var(--font);
  font-size: 7px;
  padding: 5px 14px;
  background: #222;
  color: #555;
  border: 2px solid #333;
  cursor: pointer;
  image-rendering: pixelated;
}
.tab.active {
  background: var(--screen-dark);
  color: var(--screen-lite);
  border-color: var(--screen-lite);
}

/* ============================================================
   TAB PANES
   ============================================================ */
.tab-pane { display: none; width: 100%; }
.tab-pane.active { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ============================================================
   TOOLBAR
   ============================================================ */
#battle-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 6px;
  color: #666;
  width: 100%;
  max-width: 520px;
}
.toolbar-label { color: #888; }
#battle-select {
  font-family: var(--font);
  font-size: 6px;
  background: #111;
  color: #ccc;
  border: 1px solid #444;
  padding: 3px 6px;
  flex: 1;
}
#gbc-label {
  font-size: 6px;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================================
   GAME BOY OUTER FRAME — fills most of the page width
   ============================================================ */
#gb-outer {
  background: #1a1a2e;
  border: 8px solid #0d0d1a;
  border-radius: 6px;
  padding: 10px;
  box-shadow:
    0 0 0 3px #2a2a4a,
    6px 6px 0 #08080f,
    0 0 40px rgba(0,0,0,0.85);
  width: 100%;
  max-width: min(96vw, 1100px);
}

/* ============================================================
   SCREEN LCD AREA — tall enough to be immersive
   ============================================================ */
#gb-screen {
  background: var(--screen-bg);
  width: 100%;
  /* Taller aspect ratio so sprites have room to breathe */
  aspect-ratio: 4 / 3;
  /* Minimum height so it never feels squished on wide screens */
  min-height: min(56vw, 600px);
  display: flex;
  flex-direction: column;
  position: relative;
  image-rendering: pixelated;
  outline: 5px solid var(--screen-dark);
  outline-offset: -3px;
  overflow: hidden;
}

/* ============================================================
   BATTLE FIELD — 4-quadrant grid
     Q1 foe HP box    | Q2 foe sprite  (front-facing)
     Q3 player sprite | Q4 player HP box
   ============================================================ */
#battle-field {
  flex: 1;
  display: grid;
  grid-template-columns: 55% 45%;
  grid-template-rows: 45% 55%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

#foe-hpbox {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  margin: 8px 0 0 8px;
  z-index: 2;
}

#foe-sprite-zone {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 4px 8px 0 0;
  overflow: hidden;
}

#player-sprite-zone {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 6px 12px;
  overflow: hidden;
}

#player-hpbox {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  margin: 0 8px 4px 0;
  z-index: 2;
}

/* ============================================================
   SPRITE WRAPPERS
   The wrapper carries all movement animations.
   The canvas inside is never directly animated — avoids
   fights between CSS animation declarations.
   ============================================================ */
.sprite-wrap {
  display: inline-flex;
  align-items: flex-end;
  image-rendering: pixelated;
}

#foe-canvas, #player-canvas {
  image-rendering: pixelated;
  display: block;
}

/* ---- IDLE BOB — continuous gentle 2-frame step ---- */
/* Foe bobs up 3px on steps(2) loop */
@keyframes idle-bob-foe {
  0%, 49%  { transform: translateY(0px); }
  50%, 100%{ transform: translateY(-3px); }
}
#foe-sprite-wrap.idle {
  animation: idle-bob-foe 1.0s steps(2) infinite;
}

/* Player bobs slightly slower, offset phase */
@keyframes idle-bob-player {
  0%, 49%  { transform: translateY(0px); }
  50%, 100%{ transform: translateY(-3px); }
}
#player-sprite-wrap.idle {
  animation: idle-bob-player 1.3s steps(2) infinite;
  animation-delay: 0.35s;
}

/* ---- PLAYER ATTACK LUNGE — hops toward upper-right ---- */
@keyframes player-lunge {
  0%   { transform: translate(0px,   0px); }   /* start  */
  18%  { transform: translate(-5px,  3px); }   /* crouch wind-up */
  19%  { transform: translate(-5px,  3px); }
  42%  { transform: translate(20px, -10px); }  /* lunge peak */
  43%  { transform: translate(20px, -10px); }
  68%  { transform: translate(10px, -5px); }   /* settle */
  100% { transform: translate(0px,   0px); }   /* return */
}
#player-sprite-wrap.lunge {
  animation: player-lunge 0.55s steps(5) forwards;
}

/* ---- FOE ATTACK LUNGE — hops toward lower-left ---- */
@keyframes foe-lunge {
  0%   { transform: translate(0px,   0px); }
  18%  { transform: translate(5px,  -3px); }
  19%  { transform: translate(5px,  -3px); }
  42%  { transform: translate(-16px, 8px); }
  43%  { transform: translate(-16px, 8px); }
  68%  { transform: translate(-8px,  4px); }
  100% { transform: translate(0px,   0px); }
}
#foe-sprite-wrap.lunge {
  animation: foe-lunge 0.55s steps(5) forwards;
}

/* ---- FOE HIT RECOIL — horizontal shake + white flash ---- */
@keyframes foe-recoil {
  0%   { transform: translateX(0px);  filter: brightness(1); }
  12%  { transform: translateX(9px);  filter: brightness(10) saturate(0); }
  13%  { transform: translateX(9px);  filter: brightness(10) saturate(0); }
  28%  { transform: translateX(-7px); filter: brightness(5); }
  45%  { transform: translateX(5px);  filter: brightness(2.5); }
  62%  { transform: translateX(-3px); filter: brightness(1.5); }
  78%  { transform: translateX(2px);  filter: brightness(1); }
  100% { transform: translateX(0px);  filter: brightness(1); }
}
#foe-sprite-wrap.recoil {
  animation: foe-recoil 0.48s steps(7) forwards;
}

/* ---- PLAYER HIT RECOIL ---- */
@keyframes player-recoil {
  0%   { transform: translateX(0px);   filter: brightness(1); }
  12%  { transform: translateX(-9px);  filter: brightness(10) saturate(0); }
  13%  { transform: translateX(-9px);  filter: brightness(10) saturate(0); }
  28%  { transform: translateX(7px);   filter: brightness(5); }
  45%  { transform: translateX(-5px);  filter: brightness(2.5); }
  62%  { transform: translateX(3px);   filter: brightness(1.5); }
  78%  { transform: translateX(-2px);  filter: brightness(1); }
  100% { transform: translateX(0px);   filter: brightness(1); }
}
#player-sprite-wrap.recoil {
  animation: player-recoil 0.48s steps(7) forwards;
}

/* ---- FOE FAINT — slides down behind the HP box ---- */
@keyframes foe-faint {
  0%   { transform: translateY(0px);  opacity: 1; }
  40%  { transform: translateY(8px);  opacity: 0.7; }
  70%  { transform: translateY(22px); opacity: 0.3; }
  100% { transform: translateY(52px); opacity: 0; }
}
#foe-sprite-wrap.faint {
  animation: foe-faint 0.7s steps(8) forwards;
}

/* ---- VICTORY HOP — player celebrates ---- */
@keyframes victory-hop {
  0%   { transform: translateY(0px); }
  22%  { transform: translateY(-11px); }
  45%  { transform: translateY(0px); }
  67%  { transform: translateY(-7px); }
  88%  { transform: translateY(0px); }
  100% { transform: translateY(-2px); }
}
#player-sprite-wrap.victory {
  animation: victory-hop 0.75s steps(5) 2 forwards;
}

/* ============================================================
   HP BOX — the signature RETR0 battle element
   ============================================================ */
.hpbox {
  background: var(--screen-bg);
  border: 3px solid var(--screen-dark);
  border-radius: 6px;
  padding: clamp(4px, 1%, 10px) clamp(8px, 2%, 18px);
  min-width: clamp(120px, 22%, 220px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 4px 4px 0 var(--screen-dark);
}

.hb-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}
.hb-name {
  font-size: clamp(7px, 1.2vw, 11px);
  color: var(--screen-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
.hb-level {
  font-size: clamp(6px, 1.0vw, 10px);
  color: var(--screen-dark);
  white-space: nowrap;
}

.hb-bar-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hb-hp-label {
  font-size: 5px;
  color: var(--screen-dark);
  flex-shrink: 0;
}

.hb-track {
  flex: 1;
  height: clamp(6px, 1.1vw, 10px);
  background: var(--screen-dark);
  border: 1px solid var(--screen-dark);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
/* Classic segment dividers */
.hb-track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to right,
    transparent 0px, transparent 5px,
    rgba(0,0,0,0.25) 5px, rgba(0,0,0,0.25) 6px
  );
  pointer-events: none;
}

/* NO CSS transition — JS drives each tick for the stepped drain */
.hb-fill {
  height: 100%;
  width: 100%;
  background: var(--hp-green);
  transition: none;
}
.hb-fill.yellow { background: var(--hp-yellow); }
.hb-fill.red    {
  background: var(--hp-red);
  animation: hp-critical 0.5s steps(1) infinite;
}
@keyframes hp-critical { 50% { opacity: 0.35; } }

/* Player-only numeric display */
.hb-nums-row {
  display: flex;
  justify-content: flex-end;
}
.hb-nums {
  font-size: clamp(7px, 1.2vw, 11px);
  color: var(--screen-dark);
}

/* ============================================================
   MESSAGE BOX — full-width bottom, double-border
   ============================================================ */
#msg-box {
  height: clamp(52px, 9%, 90px);
  background: var(--screen-bg);
  border-top: 4px solid var(--screen-dark);
  outline: 3px solid var(--screen-dark);
  outline-offset: -6px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
}

#msg-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#msg-text {
  font-size: clamp(7px, 1.3vw, 12px);
  color: var(--screen-dark);
  line-height: 1.6;
  flex: 1;
}

.blink-cursor {
  font-size: 7px;
  color: var(--screen-dark);
  animation: cur-blink 0.7s steps(1) infinite;
  flex-shrink: 0;
  margin-left: 6px;
}
@keyframes cur-blink { 50% { opacity: 0; } }

/* ============================================================
   SUPER-EFFECTIVE BANNER
   ============================================================ */
#super-banner {
  display: none;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--screen-bg);
  border: 3px solid var(--screen-dark);
  color: var(--screen-dark);
  font-size: 7px;
  padding: 6px 12px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 3px 3px 0 var(--screen-dark);
  pointer-events: none;
}
#super-banner.visible {
  display: block;
  animation: banner-pop 1.5s steps(1) forwards;
}
@keyframes banner-pop {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================================
   CONTROLS
   ============================================================ */
#controls {
  display: flex;
  gap: 6px;
  align-items: center;
}
#controls button, #speed-sel {
  font-family: var(--font);
  font-size: 7px;
  background: #111;
  color: #aaa;
  border: 2px solid #333;
  padding: 5px 12px;
  cursor: pointer;
  image-rendering: pixelated;
}
#controls button:hover { color: #fff; border-color: #666; }
#speed-sel { padding: 5px 6px; }

/* ============================================================
   DEX (ROSTER) VIEW
   ============================================================ */
#tab-roster.active {
  align-items: stretch;
  padding: 8px;
  max-width: min(96vw, 1200px);
  width: 100%;
  margin: 0 auto;
}

#dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 22px;
  width: 100%;
}

.dex-card {
  background: var(--screen-bg);
  border: 4px solid var(--screen-dark);
  border-radius: 6px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 6px 6px 0 var(--screen-dark);
}

.dex-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.dex-sprite {
  flex-shrink: 0;
  image-rendering: pixelated;
  width: 104px;
  height: 104px;
}

.dex-meta { flex: 1; }
.dex-name {
  font-size: 13px;
  color: var(--screen-dark);
  margin-bottom: 6px;
}
.dex-level {
  font-size: 9px;
  color: var(--screen-mid);
  margin-bottom: 5px;
}
.dex-type {
  font-size: 8px;
  color: var(--screen-mid);
  text-transform: uppercase;
  border: 1px solid var(--screen-mid);
  padding: 3px 7px;
  display: inline-block;
}

.dex-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dex-stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dex-stat-label {
  font-size: 5px;
  color: var(--screen-dark);
  width: 56px;
  flex-shrink: 0;
}
.dex-stat-track {
  flex: 1;
  height: 5px;
  background: var(--screen-dark);
  border-radius: 1px;
  overflow: hidden;
}
.dex-stat-fill {
  height: 100%;
  background: var(--screen-mid);
}
.dex-stat-num {
  font-size: 5px;
  color: var(--screen-dark);
  width: 20px;
  text-align: right;
}

.dex-evo {
  font-size: 5px;
  color: var(--screen-mid);
  border-top: 1px solid var(--screen-mid);
  padding-top: 6px;
  line-height: 1.8;
}
.dex-evo-label {
  color: var(--screen-dark);
  margin-bottom: 3px;
}

/* REFINEMENT section */
.dex-refinement {
  border-top: 1px solid var(--screen-mid);
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dex-refinement-label {
  font-size: 5px;
  color: var(--screen-dark);
  letter-spacing: 0.06em;
}
.dex-refinement-text {
  font-size: 5px;
  color: var(--screen-mid);
  line-height: 2.0;
}

/* APEX card — Hercules 72B — gold glow border */
.dex-card-apex {
  border-color: #b8860b;
  box-shadow: 4px 4px 0 #4a3000, 0 0 0 2px #ffd700, 0 0 12px rgba(255,215,0,0.25);
}
.dex-apex-tag {
  font-size: 5px;
  color: #ffd700;
  background: #4a1800;
  padding: 1px 4px;
  margin-left: 4px;
  border: 1px solid #ffd700;
  vertical-align: middle;
}

/* ============================================================
   VS INTRO OVERLAY
   ============================================================ */
#vs-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--screen-dark);
  z-index: 20;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
#vs-overlay.visible {
  display: flex;
  animation: vs-flash 0.08s steps(1) 6 alternate;
}
@keyframes vs-flash {
  from { background: var(--screen-dark); }
  to   { background: var(--screen-bg); }
}
.vs-fighter-name {
  font-size: clamp(10px, 2vw, 18px);
  color: var(--screen-lite);
  letter-spacing: 0.12em;
  text-shadow: 3px 3px 0 var(--screen-dark);
}
.vs-badge {
  font-size: clamp(14px, 2.8vw, 24px);
  color: var(--screen-bg);
  background: var(--screen-dark);
  padding: 4px 16px;
  border: 3px solid var(--screen-lite);
  letter-spacing: 0.2em;
  animation: vs-pulse 0.5s steps(2) infinite;
}
@keyframes vs-pulse {
  50% { color: var(--screen-lite); background: var(--screen-mid); }
}

/* ============================================================
   WINNER BANNER
   ============================================================ */
#winner-banner {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(15,56,15,0.88);
  z-index: 21;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
#winner-banner.visible { display: flex; }
.winner-title {
  font-size: clamp(12px, 2.4vw, 20px);
  color: var(--screen-lite);
  letter-spacing: 0.14em;
  animation: winner-blink 0.6s steps(1) infinite;
}
@keyframes winner-blink { 50% { opacity: 0; } }
.winner-name {
  font-size: clamp(16px, 3vw, 28px);
  color: var(--screen-bg);
  background: var(--screen-dark);
  padding: 6px 20px;
  border: 4px solid var(--screen-lite);
  letter-spacing: 0.1em;
}

/* ============================================================
   SCREEN SHAKE
   ============================================================ */
@keyframes screen-shake {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-6px, 3px); }
  30%  { transform: translate(5px, -4px); }
  45%  { transform: translate(-4px, 2px); }
  60%  { transform: translate(3px, -2px); }
  75%  { transform: translate(-2px, 1px); }
  90%  { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}
#gb-screen.shake {
  animation: screen-shake 0.38s steps(7) forwards;
}

/* ============================================================
   CRITICAL HIT FLASH
   ============================================================ */
@keyframes crit-flash {
  0%   { filter: brightness(1); }
  15%  { filter: brightness(4) saturate(0); }
  30%  { filter: brightness(1); }
  50%  { filter: brightness(3) saturate(0); }
  70%  { filter: brightness(1); }
  100% { filter: brightness(1); }
}
#gb-screen.crit { animation: crit-flash 0.36s steps(6) forwards; }

/* ============================================================
   CHARGE WIND-UP ANIMATION
   ============================================================ */
@keyframes charge-wind {
  0%   { transform: scale(1.0); filter: brightness(1); }
  30%  { transform: scale(0.92); filter: brightness(0.7); }
  60%  { transform: scale(1.06); filter: brightness(1.5); }
  80%  { transform: scale(0.96); filter: brightness(1.2); }
  100% { transform: scale(1.0); filter: brightness(1); }
}
.sprite-wrap.charge {
  animation: charge-wind 0.7s steps(5) forwards;
}

/* ============================================================
   PARTICLE SPARKS (pure CSS, injected by JS)
   ============================================================ */
.spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--screen-lite);
  pointer-events: none;
  z-index: 15;
  animation: spark-burst 0.5s steps(5) forwards;
}
@keyframes spark-burst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  50%  { opacity: 0.8; }
  100% { transform: var(--spark-end); opacity: 0; }
}

/* ============================================================
   STATUS BANNER (CONFUSED, CHARGING)
   ============================================================ */
#status-banner {
  display: none;
  position: absolute;
  bottom: 28%;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--screen-mid);
  border: 2px solid var(--screen-dark);
  color: var(--screen-bg);
  font-size: 6px;
  padding: 4px 10px;
  white-space: nowrap;
  z-index: 11;
  box-shadow: 2px 2px 0 var(--screen-dark);
  pointer-events: none;
}
#status-banner.visible {
  display: block;
  animation: banner-pop 1.2s steps(1) forwards;
}

/* ============================================================
   CASTER LINE (above msg-text, italic flavor)
   ============================================================ */
#caster-line {
  font-size: clamp(5px, 0.9vw, 8px);
  color: var(--screen-mid);
  line-height: 1.5;
  min-height: 1em;
  font-style: normal;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   UTILITY
   ============================================================ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #333; }