/* ============= BUGHING — Retro Office Brawler ============ */
:root {
  --bg-0: #0b0d18;
  --bg-1: #141828;
  --bg-2: #1f2540;
  --ink: #e8ecf5;
  --muted: #8b94b3;
  --neon: #6df1c5;
  --hot: #ff5277;
  --warn: #ffd166;
  --espresso: #b97a4a;
  --moka: #5a2f1f;
  --watch: #4ad174;
  --grid: rgba(120, 140, 200, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--ink);
  font-family: 'VT323', 'Courier New', monospace;
  overflow: hidden;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

#root { height: 100vh; width: 100vw; position: relative; }

.stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 0%, #1a2042 0%, #0b0d18 60%),
    var(--bg-0);
}

/* CRT scanlines + slight chromatic vignette overlay */
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.18) 3px,
      rgba(0,0,0,0) 4px
    ),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
  z-index: 10000;
}

/* ============ TITLE SCREEN ============ */
.title {
  position: relative;
  text-align: center;
  padding: 40px;
}
.title-mark {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(34px, 8vw, 84px);
  letter-spacing: 4px;
  color: var(--neon);
  text-shadow:
    0 0 0 #000,
    6px 6px 0 #1a3a30,
    8px 8px 0 var(--hot);
  margin-bottom: 8px;
  line-height: 1;
}
.title-mark .b { color: var(--hot); text-shadow: 6px 6px 0 #4a1825, 8px 8px 0 var(--neon); }
.title-sub {
  font-size: clamp(12px, 3vw, 28px);
  color: var(--ink);
  letter-spacing: clamp(2px, 1vw, 6px);
  margin-bottom: clamp(10px, 4vh, 50px);
  opacity: 0.85;
}
.title-sub::before, .title-sub::after { content: " ▸ "; color: var(--neon); }

.title-press {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 1.4vw, 16px);
  color: var(--ink);
  margin-top: clamp(10px, 4vh, 60px);
  animation: blink 1s infinite step-end;
}
@keyframes blink { 50% { opacity: 0; } }

.title-cast {
  display: flex;
  gap: clamp(12px, 5vw, 60px);
  justify-content: center;
  align-items: flex-end;
  margin: clamp(6px, 2vh, 30px) 0;
}
.title-cast img {
  height: 180px;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.5));
  animation: bob 1.4s infinite ease-in-out;
}
.title-cast img:nth-child(2) { animation-delay: 0.3s; }
.title-cast img:nth-child(3) { animation-delay: 0.6s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  background: var(--neon);
  color: #0b0d18;
  border: 0;
  padding: 16px 28px;
  cursor: pointer;
  letter-spacing: 2px;
  box-shadow: 6px 6px 0 #000;
  transform: translate(0, 0);
  transition: transform 0.06s, box-shadow 0.06s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #000; }
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 #000; }
.btn.alt { background: var(--hot); color: white; }
.btn.ghost { background: transparent; color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--neon); }

/* ============ CHARACTER SELECT ============ */
.cs {
  width: min(1100px, 95vw);
  text-align: center;
  padding: 20px;
}
.cs-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  color: var(--neon);
  letter-spacing: 4px;
  margin-bottom: 30px;
}
.cs-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding: 12px 10px 14px;
  scroll-snap-type: x mandatory;
}
.cs-grid::-webkit-scrollbar { height: 6px; }
.cs-grid::-webkit-scrollbar-track { background: #0b0d18; }
.cs-grid::-webkit-scrollbar-thumb { background: #2a3258; border-radius: 3px; }
.cs-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 4px solid var(--bg-2);
  padding: 22px 14px;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s, border-color 0.12s;
  text-align: center;
}
.cs-card:hover { transform: translateY(-6px); border-color: var(--muted); z-index: 1; }
.cs-card.selected {
  border-color: var(--neon);
  box-shadow: 0 0 0 4px var(--neon), 0 0 30px rgba(109, 241, 197, 0.4);
  z-index: 2;
}
.cs-card .portrait {
  height: clamp(110px, 22vh, 200px);
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 24px),
    radial-gradient(circle at center, #2a3258 0%, #141828 70%);
  border: 2px solid #2a3258;
  margin-bottom: 14px;
}
.cs-card .portrait img { height: 160px; }
.cs-card .name {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 8px;
}
.cs-card .role {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.cs-card .stats { display: flex; flex-direction: column; gap: 4px; padding: 0 8px; }
.cs-card .stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--muted);
}
.cs-card .stat .label { width: 64px; text-align: left; text-transform: uppercase; letter-spacing: 1px; }
.cs-card .bar { flex: 1; height: 8px; background: #0b0d18; border: 1px solid #2a3258; position: relative; }
.cs-card .bar > i {
  position: absolute; inset: 0;
  background: var(--neon);
  display: block;
}
.cs-card .stat.atk .bar > i { background: var(--hot); }
.cs-card .stat.spd .bar > i { background: var(--warn); }
.cs-card .stat.hp  .bar > i { background: var(--neon); }

.cs-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

/* ============ MOBILE RESPONSIVE ============ */
@media (max-height: 520px) and (pointer: coarse) {
  .stage { align-items: flex-start; overflow-y: auto; }
  .title { padding: 4px 16px; }
  .title-mark { font-size: 38px; }
  .title-sub { font-size: 11px; margin-bottom: 5px; }
  .title-cast { gap: 14px; margin: 4px 0; }
  .title-press { font-size: 7px; margin-top: 7px; }
  .cs { padding: 4px 8px; }
  .cs-title { font-size: 10px; letter-spacing: 1px; margin-bottom: 4px; }
  .cs-grid { gap: 6px; margin-bottom: 4px; padding: 8px 6px 10px; justify-content: center; }
  .cs-card { flex: 0 0 90px; padding: 5px 4px; }
  .cs-card .portrait { height: clamp(50px, 11vh, 75px); margin-bottom: 5px; }
  .cs-card .name { font-size: 8px; margin-bottom: 2px; }
  .cs-card .role { font-size: 10px; margin-bottom: 2px; }
  .cs-card .stats { display: none; }
  .cs-foot { gap: 6px; }
  .btn { font-size: 11px; padding: 8px 14px; }
  .endcard-inner { padding: 12px 16px; }
  .endcard h1 { font-size: 28px; letter-spacing: 2px; margin-bottom: 8px; }
  .endcard .victor { margin: 6px 0 8px; }
  .endcard .actions { margin-top: 10px; gap: 8px; }
}

/* ============ PORTRAIT LOCK ============ */
.portrait-lock {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: #0b0d18;
  align-items: center; justify-content: center;
}
@media screen and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .portrait-lock { display: flex; }
}

/* ============ GAME ============ */
.game-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0b0d18;
}
/* Office background — drawn with CSS gradients (no SVG illustrations) */
.bg-far, .bg-mid, .bg-near, .bg-ground {
  position: absolute;
  left: 0;
  width: 200%;
  pointer-events: none;
}
.bg-far {
  /* sky w/ window grid */
  top: 0;
  height: 60%;
  background:
    /* monitor glow specks */
    radial-gradient(2px 2px at 12% 80%, #6df1c5aa 0, transparent 100%),
    radial-gradient(2px 2px at 32% 50%, #ffd16688 0, transparent 100%),
    radial-gradient(2px 2px at 65% 70%, #ff527788 0, transparent 100%),
    radial-gradient(2px 2px at 85% 40%, #6df1c588 0, transparent 100%),
    /* window panes */
    repeating-linear-gradient(90deg, #1a2042 0 200px, transparent 200px 220px),
    repeating-linear-gradient(0deg, #1a2042 0 140px, transparent 140px 160px),
    linear-gradient(180deg, #0b0d18 0%, #1a2042 80%);
}
.bg-mid {
  /* desks line */
  bottom: 18%;
  height: 24%;
  background:
    /* desk lamps */
    radial-gradient(40px 16px at 12% 20%, #ffd16640 0, transparent 100%),
    radial-gradient(40px 16px at 38% 20%, #ffd16640 0, transparent 100%),
    radial-gradient(40px 16px at 64% 20%, #ffd16640 0, transparent 100%),
    radial-gradient(40px 16px at 90% 20%, #ffd16640 0, transparent 100%),
    /* monitors */
    repeating-linear-gradient(90deg,
      transparent 0, transparent 80px,
      #2a3258 80px, #2a3258 180px,
      transparent 180px, transparent 220px),
    /* desk surface */
    linear-gradient(180deg, transparent 35%, #2a1a14 36%, #4a2a1c 40%, #2a1a14 100%);
}
.bg-near {
  /* floor pattern */
  bottom: 0;
  height: 18%;
  background:
    repeating-linear-gradient(90deg, #1a1410 0 60px, #2a1d18 60px 62px),
    linear-gradient(180deg, #2a1d18 0%, #0a0604 100%);
  border-top: 4px solid #4a2a1c;
}

/* HUD */
.hud {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  z-index: 100;
  pointer-events: none;
}
.hud-side {
  background: rgba(11, 13, 24, 0.9);
  border: 3px solid var(--neon);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 280px;
}
.hud-side.right { border-color: var(--hot); align-items: flex-end; }
.hud-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--neon);
  letter-spacing: 2px;
}
.hud-side.right .hud-name { color: var(--hot); }
.hud-hp {
  width: 100%;
  height: 16px;
  background: #2a0a0a;
  border: 2px solid #000;
  position: relative;
  overflow: hidden;
}
.hud-hp > i {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #6df1c5 0%, #2da888 100%);
  transition: width 0.3s;
}
.hud-side.right .hud-hp > i {
  background: linear-gradient(180deg, #ff89a3 0%, #c83353 100%);
}
.hud-row { display: flex; gap: 10px; align-items: center; font-size: 18px; color: var(--muted); letter-spacing: 1px; }
.hud-icons { display: flex; gap: 6px; align-items: center; }
.hud-icon {
  width: 28px;
  height: 28px;
  background: #1f2540;
  border: 2px solid #2a3258;
  display: grid;
  place-items: center;
  position: relative;
  font-size: 16px;
  color: var(--muted);
}
.hud-icon.active {
  border-color: var(--warn);
  box-shadow: 0 0 8px var(--warn);
  color: var(--warn);
}
.hud-icon .cd {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0;
  background: var(--neon);
  opacity: 0.6;
}
.hud-center {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.hud-round {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 2px;
}
.hud-timer {
  font-family: 'Press Start 2P', monospace;
  font-size: 36px;
  color: var(--ink);
  text-shadow: 4px 4px 0 #000;
}
.hud-timer.critical { color: var(--hot); animation: blink 0.5s infinite step-end; }

/* fighters */
.fighter {
  position: absolute;
  bottom: 18%;
  width: 200px;
  height: 240px;
  pointer-events: none;
  transform-origin: bottom center;
}
.fighter img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 240px;
  width: auto;
}
.fighter.flip img { transform: translateX(-50%) scaleX(-1); }
.fighter.shake { animation: shake 0.3s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(6px, -3px); }
  60% { transform: translate(-4px, 2px); }
  80% { transform: translate(4px, -2px); }
}

.hit-flash {
  filter: brightness(2.5) saturate(0) sepia(1) hue-rotate(330deg) saturate(8);
}

.fx {
  position: absolute;
  pointer-events: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 24px;
  color: var(--warn);
  text-shadow: 3px 3px 0 #000;
  animation: fxfly 0.7s ease-out forwards;
}
.fx.crit { color: var(--hot); font-size: 36px; }
@keyframes fxfly {
  0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
  20% { transform: translate(-50%, -10px) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -80px) scale(1); opacity: 0; }
}

.bubble {
  position: absolute;
  background: white;
  color: black;
  border: 3px solid black;
  padding: 6px 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  white-space: nowrap;
  animation: pop 0.4s ease-out;
  box-shadow: 4px 4px 0 #000;
  z-index: 50;
}
.bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 30px;
  border: 8px solid transparent;
  border-top-color: black;
}
@keyframes pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Pickup items on floor */
.pickup {
  position: absolute;
  bottom: 18%;
  width: 56px;
  height: 56px;
  pointer-events: none;
  animation: floatpickup 1.4s infinite ease-in-out;
  z-index: 5;
}
.pickup img { width: 100%; height: 100%; object-fit: contain; }
.pickup::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 10%; right: 10%;
  height: 6px;
  background: rgba(109, 241, 197, 0.4);
  border-radius: 50%;
  filter: blur(3px);
}
@keyframes floatpickup {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Buff aura */
.fighter.aura-speed::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, transparent 50%, var(--warn) 80%, transparent 100%);
  animation: aura 0.4s infinite alternate;
  opacity: 0.5;
}
.fighter.aura-attack::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, transparent 50%, var(--hot) 80%, transparent 100%);
  animation: aura 0.4s infinite alternate;
  opacity: 0.5;
}
@keyframes aura {
  from { opacity: 0.3; transform: scale(0.95); }
  to { opacity: 0.7; transform: scale(1.05); }
}

/* End-of-round overlay */
.endcard {
  position: absolute;
  inset: 0;
  background: rgba(11, 13, 24, 0.85);
  display: grid;
  place-items: center;
  z-index: 200;
  animation: fade-in 0.5s;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.endcard-inner { text-align: center; padding: 40px; }
.endcard h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 64px;
  color: var(--neon);
  letter-spacing: 6px;
  text-shadow: 6px 6px 0 #000, 8px 8px 0 var(--hot);
  margin-bottom: 30px;
  animation: slam 0.4s ease-out;
}
.endcard h1.lose { color: var(--hot); text-shadow: 6px 6px 0 #000, 8px 8px 0 var(--neon); }
@keyframes slam {
  from { transform: scale(3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.endcard .victor { height: 220px; margin: 20px 0 30px; animation: bob 1s infinite; }
.endcard .actions { display: flex; gap: 20px; justify-content: center; margin-top: 30px; }

/* Controls hint */
.controls-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  font-size: 16px;
  color: var(--muted);
  z-index: 100;
  letter-spacing: 1px;
  background: rgba(11, 13, 24, 0.8);
  padding: 6px 16px;
  border: 2px solid #2a3258;
}
.key {
  display: inline-block;
  padding: 2px 8px;
  background: #1f2540;
  border: 2px solid #2a3258;
  border-bottom-width: 4px;
  border-radius: 2px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--ink);
  margin-right: 4px;
}

@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes auraPulse {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(1); opacity: 0.7; }
}

.cs-card.locked .name { color: var(--muted) !important; }

/* DEBUG / Reference panel */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
}
.ref-cell {
  background: var(--bg-1);
  padding: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.ref-cell img { height: 80px; display: block; margin: 0 auto 6px; }

/* Tweaks panel niceties */
[data-tweaks-panel] { font-family: 'VT323', monospace !important; }