:root {
  --bg: #1a1a2e;
  --ring-mat: #c23b3b;
  --rope: #f2d340;
  --text: #f5f5f5;
  --accent: #4fd1c5;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The fight screen (health bars + round indicator + 300px ring + two rows
   of controls) is taller than plain-vertical-centering can safely handle on
   a short mobile viewport: body's height is only a *minimum* (100vh), so
   when this screen's actual content is taller than the visible viewport,
   `align-items: center` centers it around the midpoint of that overflow --
   pushing the top of the ring (where a fighter's head sits) above y=0,
   off-screen above the fold, with no visual indication anything is cut off
   or scrollable. This was mistaken for a bad sprite crop (see Orion's idle
   pose bug) when the .ring/.fighter box math is actually fine at every
   real viewport width -- it's a vertical-centering-with-overflow bug, not
   a sizing bug. Anchoring this one screen to the top instead of centering
   means any overflow always spills below the fold (scrollable, visible)
   rather than above it (invisible, clipped-looking). Scoped to just this
   screen via :has() so other screens keep their nicer vertical centering. */
body:has(.screen-fight) {
  align-items: flex-start;
}

#app { width: 100%; max-width: 480px; padding: 16px; }

/* Fixed rather than inside any screen template -- screens replace #app's
   innerHTML on every navigation (see audio.js), so a button living inside
   one would get torn down and rebuilt on every transition instead of
   persisting like the music it controls does. */
.mute-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--text);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
}

.screen { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }

.wobble-title { font-size: 2.5rem; animation: wobble 1.4s ease-in-out infinite; }

@keyframes wobble {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.btn { font-size: 1.1rem; padding: 12px 24px; border: none; border-radius: 12px; cursor: pointer; }
.btn-primary { background: var(--accent); color: #04201d; }
.btn-secondary { background: transparent; color: var(--text); border: 2px solid var(--text); }

.character-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.character-card { padding: 20px; border-radius: 16px; border: none; font-size: 1.1rem; color: white; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5); }
.character-card:disabled { opacity: 0.4; }
.costume-card { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.costume-thumb { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; image-rendering: pixelated; }

.character-card--portrait { position: relative; padding: 0; aspect-ratio: 1; background: #05070f; overflow: hidden; }
.character-portrait { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.character-name-tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 6px 6px; border-top: 3px solid;
  background: rgba(0,0,0,0.65); font-size: 1.1rem;
}

.health-bars { display: flex; justify-content: space-between; width: 100%; gap: 8px; }
.health-bar { flex: 1; height: 18px; background: #333; border-radius: 9px; overflow: hidden; border: 2px solid var(--rope); }
.health-fill { height: 100%; width: 100%; background: #3ddc61; transition: width 0.2s ease; }

.round-indicator { font-size: 1.2rem; }

/* Illustrated ring background (angled 3/4 view, ropes, turnbuckles, packed
   crowd) -- fighters composite on top of it. background-position stays
   anchored to the bottom so the mat's near edge (where fighters stand)
   never gets cropped; only excess crowd height above gets trimmed. */
.ring {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: url('/assets/ring/background.webp') center bottom / cover no-repeat, #1c1430;
  border-radius: 8px;
}

/* bottom: 30% lands feet on the mat's actual front edge in the ring
   background image (~68% down the image), not the box's bottom edge, which
   is the arena floor/crowd barrier area in FRONT of the ring. Width is
   reduced from the old 45% so puppets fit within the taller mat area with
   their heads still inside the box instead of clipped off the top. */
.fighter { position: absolute; bottom: 30%; width: 32%; transform: translateX(-50%); }
.fighter svg, .fighter img { display: block; width: 100%; height: auto; }
.fighter-1 svg, .fighter-1 img { transform: scaleX(-1); }

/* The 3 front (camera-facing) ropes, extracted from background.webp into
   their own transparent-elsewhere layer at the exact same 960x540 canvas
   dimensions -- same background-size:cover math as .ring itself, so this
   lines up pixel-perfectly with the ropes already drawn in that image with
   no manual alignment needed. Painted after the .fighter elements in the
   DOM (see fight.js) so it renders in front of them: a fighter standing at
   the ring's fixed front depth now has these ropes crossing their body at
   chest/waist height, the way a real ring's near-side ropes would occlude
   a wrestler standing in front of them -- this is what actually sells
   "inside the ring" rather than "standing in front of a ring picture".
   pointer-events: none so it never intercepts clicks meant for the
   fighters/controls beneath it. */
.ring-front-ropes {
  position: absolute;
  inset: 0;
  background: url('/assets/ring/front-ropes.webp') center bottom / cover no-repeat;
  pointer-events: none;
}

.sprite-fighter { image-rendering: pixelated; }

@keyframes hit-flash-pulse {
  0% { filter: brightness(1); }
  30% { filter: brightness(2.5) saturate(2); }
  100% { filter: brightness(1); }
}
.hit-flash { animation: hit-flash-pulse 250ms ease-out; }

@keyframes ring-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.ring.shake { animation: ring-shake 350ms ease-in-out; }

.ko-banner {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rope);
  color: #3a2f00;
  font-size: 2rem;
  font-weight: bold;
  padding: 8px 32px;
  border-radius: 8px;
  border: 4px solid #04201d;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes ko-slam {
  0% { top: -100px; opacity: 0; }
  50% { top: 80%; opacity: 1; }
  70% { top: 82%; }
  100% { top: 80%; opacity: 1; }
}
.ko-banner.show { animation: ko-slam 600ms cubic-bezier(.2,1.4,.6,1) forwards; }

.move-name-flash {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--rope);
  font-size: 1.3rem;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes move-name-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  20% { opacity: 1; transform: translateX(-50%) scale(1.1); }
  30% { transform: translateX(-50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
.move-name-flash.show { animation: move-name-pop 1000ms ease-out forwards; }

.controls-row { display: flex; width: 100%; gap: 12px; }
.controls-group { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.controls-group + .controls-group { border-left: 2px dashed var(--rope); padding-left: 12px; }
.controls-label { font-size: 0.9rem; }
.controls-split { display: flex; flex-direction: row; gap: 8px; width: 100%; }
.move-buttons { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.controls-buttons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: auto; flex: 1; min-width: 0; }

.ctrl-btn {
  min-height: 56px;
  font-family: inherit;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #04201d;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  flex: 1;
}
.ctrl-btn:active { filter: brightness(0.8); }
.ctrl-btn-block { background: var(--rope); color: #3a2f00; }
.ctrl-btn-move { font-size: 1.3rem; }

.btn-quit { font-size: 0.9rem; padding: 8px 20px; }
.controls-hints { font-size: 0.75rem; opacity: 0.7; text-align: center; }

.winner-puppet { width: 60%; max-width: 220px; }
.winner-puppet svg { width: 100%; height: auto; }
.winner-puppet img { width: 100%; height: auto; image-rendering: pixelated; }
.winner-taunt { font-size: 1.1rem; color: var(--rope); }

.records-table { width: 100%; border-collapse: collapse; }
.records-table th, .records-table td { padding: 8px; border-bottom: 1px solid #444; }