:root {
  --bg: #07070d;
  --panel: rgba(18, 18, 32, 0.55);
  --panel-border: rgba(255, 255, 255, 0.12);
  --accent: #ff3b3b;
  --accent-2: #ffd23f;
  --text: #f2f2f7;
  --muted: #9a9ab0;
  --hp: linear-gradient(90deg, #ffd23f, #ff7a1a);
  --hp-low: linear-gradient(90deg, #ff3b3b, #a80000);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', system-ui, sans-serif;
  user-select: none;
}

#game-container { position: fixed; inset: 0; }
#game-container canvas { display: block; }
/* Vignette over the 3D view (below the HUD): edges darken, the eye goes to the fight. */
#game-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 55%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
}

.hidden { display: none !important; }

/* ---------- Menu screens ---------- */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  padding: 16px;
  overflow-y: auto; /* tall panels (character select on a portrait phone) scroll */
  background: radial-gradient(ellipse at center, rgba(7, 7, 13, 0.2), rgba(7, 7, 13, 0.85));
  z-index: 10;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(420px, 100%);
  padding: 36px 28px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  margin: auto 0; /* centres vertically, but never pushes the top off-screen */
}

.logo {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 6vw, 32px);
  letter-spacing: 2px;
  margin-bottom: 12px;
  text-shadow: 0 0 18px rgba(255, 59, 59, 0.6);
}
.logo span { color: var(--accent); }

h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  letter-spacing: 1px;
}

.btn {
  width: 100%;
  padding: 14px 18px;
  font: 700 18px 'Rajdhani', sans-serif;
  letter-spacing: 1px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 59, 59, 0.9), rgba(170, 20, 20, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(0.98); }
.btn.secondary { background: rgba(255, 255, 255, 0.08); }

.status { color: var(--muted); min-height: 1.2em; text-align: center; }

.room-code {
  font-family: 'Press Start 2P', monospace;
  font-size: 34px;
  letter-spacing: 6px;
  color: var(--accent-2);
  padding: 10px 0;
}

.code-input {
  width: 100%;
  padding: 12px;
  font: 24px 'Press Start 2P', monospace;
  text-align: center;
  letter-spacing: 6px;
  color: var(--accent-2);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  outline: none;
}
.code-input:focus { border-color: var(--accent-2); }

/* ---------- Character select ---------- */
.panel.wide { width: min(780px, 100%); }
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  width: 100%;
}
.char-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  text-align: left;
  color: var(--text);
  font: 500 15px 'Rajdhani', sans-serif;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid var(--panel-border);
  border-top: 6px solid var(--char-color);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
}
.char-card:hover, .char-card:focus-visible { border-color: var(--char-color); transform: translateY(-2px); outline: none; }
.char-card .name { font: 16px 'Press Start 2P', monospace; color: var(--char-color); filter: brightness(1.4); }
.char-card .desc { color: var(--muted); }
.char-card .special-name { font-size: 12px; line-height: 1.25; color: var(--char-color); filter: brightness(1.5); }
.stat { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 8px; font-size: 13px; }
.stat .bar { height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--char-color); filter: brightness(1.3); }

.difficulty {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.difficulty .label { font: 11px 'Press Start 2P', monospace; color: var(--muted); margin-right: 4px; }
.difficulty .seg {
  flex: 1;
  padding: 10px 8px;
  font: 700 16px 'Rajdhani', sans-serif;
  letter-spacing: 1px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.difficulty .seg:hover, .difficulty .seg:focus-visible { color: var(--text); border-color: var(--accent-2); outline: none; }
.difficulty .seg.on { color: var(--bg); background: var(--accent-2); border-color: var(--accent-2); }

@media (max-width: 480px) {
  .char-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .char-card { padding: 10px; gap: 6px; }
  .char-card .name { font-size: 12px; }
  .panel.wide { padding: 24px 16px; }
  .difficulty { flex-wrap: wrap; }
  .difficulty .label { width: 100%; }
}

@media (max-height: 500px) {
  .char-grid { grid-template-columns: repeat(4, 1fr); }
  .char-card { padding: 10px; gap: 4px; }
  .panel { padding: 20px 18px; gap: 10px; }
}

/* ---------- Room lobby ---------- */
.teams { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; width: 100%; }
.team-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-border);
  border-top: 4px solid var(--team, var(--muted));
  border-radius: 10px;
}
.team-col.red { --team: #ff3b3b; }
.team-col.blue { --team: #3a8bff; }
.team-col h3 { font: 700 15px 'Rajdhani', sans-serif; letter-spacing: 2px; color: var(--team, var(--muted)); text-align: center; }
.slots { display: flex; flex-direction: column; gap: 6px; min-height: 96px; }
.chip {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 4px solid var(--char-color, transparent);
  border-radius: 6px;
}
.chip b { font: 10px 'Press Start 2P', monospace; }
.chip span { color: var(--muted); }
.chip.me { outline: 1px solid var(--accent-2); }
.chip.empty { color: var(--muted); font-style: italic; text-align: center; border-left-color: transparent; }
.btn.small { padding: 8px 6px; font-size: 14px; }
.lobby-actions { display: flex; gap: 10px; width: 100%; }
#lobby:not(.is-host) .host-only { display: none; }
#lobby-mode .seg:disabled { cursor: default; }
#lobby-mode .seg:disabled:not(.on) { opacity: 0.5; }

@media (max-width: 560px) {
  .teams { grid-template-columns: 1fr; }
  .slots { min-height: 0; }
}

/* ---------- How to play ---------- */
.panel.help { max-height: calc(100vh - 32px); overflow-y: auto; align-items: stretch; }
.panel.help h2 { text-align: center; }
.controls { width: 100%; border-collapse: collapse; font-size: 15px; }
.controls th { color: var(--muted); font-weight: 500; text-align: left; padding: 4px 8px; }
.controls td { padding: 6px 8px; border-top: 1px solid var(--panel-border); }
.controls td:first-child { font-weight: 700; white-space: nowrap; }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  font: 600 13px 'Rajdhani', sans-serif;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom-width: 3px;
  border-radius: 5px;
}
.tips { margin: 4px 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.tips b { color: var(--text); }

/* Narrow screens: drop the touch column on desktop-like layouts and vice versa. */
@media (max-width: 600px) {
  .controls { font-size: 13px; }
  .controls th:nth-child(3), .controls td:nth-child(3) { display: none; }
}
@media (pointer: fine) {
  .controls th:nth-child(4), .controls td:nth-child(4) { display: none; }
}

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.hud-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

.fighter-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.fighter-info.right { align-items: flex-end; }
.team-rows { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.frow { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.fighter-info.right .frow { align-items: flex-end; }
.frow.compact .health { height: 15px; }
.frow.compact .fighter-name { font-size: 10px; }
.frow.me .fighter-name { color: var(--accent-2); }
.frow.down { opacity: 0.45; }

/* Special-move charge under the health bar; glows when ready. */
.special {
  width: 60%;
  height: 5px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  overflow: hidden;
}
.special-fill { height: 100%; width: 100%; background: #3aa8ff; }
.special-fill.ready { background: #7fd0ff; box-shadow: 0 0 8px #7fd0ff; }
.fighter-info.right .special { display: flex; justify-content: flex-end; }

.fighter-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  text-shadow: 2px 2px 0 #000;
}

.health {
  position: relative;
  width: 100%;
  height: 22px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.health-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--hp);
  transition: width 0.12s ease-out;
}
/* Glossy highlight on the top half of the bar. */
.health-fill::after {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05));
}
/* Recent damage: a pale strip behind the bar that drains after a beat. */
.health-trail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: #fff3d6;
  transition: width 0.55s ease-in 0.35s;
}
.health-trail.instant { transition: none; }
.health-fill.low { background: var(--hp-low); animation: hp-pulse 0.8s ease-in-out infinite; }
@keyframes hp-pulse { 50% { filter: brightness(1.6); } }
.fighter-info.right .health-fill, .fighter-info.right .health-trail { inset: 0 0 0 auto; }

.round-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  gap: 6px;
  min-width: 70px;
}
#timer { font-size: 26px; color: var(--accent-2); text-shadow: 2px 2px 0 #000; }

#announcer {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(28px, 7vw, 64px);
  color: var(--accent-2);
  text-shadow: 4px 4px 0 #000, 0 0 30px rgba(255, 210, 63, 0.5);
  opacity: 0;
  transition: opacity 0.2s;
}
#announcer.show { opacity: 1; }
#announcer.blood {
  color: #e01010;
  text-shadow: 4px 4px 0 #000, 0 0 36px rgba(255, 0, 0, 0.75);
}

#hint {
  position: absolute;
  top: calc(40% + clamp(40px, 9vw, 84px));
  width: 100%;
  text-align: center;
  font: 700 clamp(16px, 2.4vw, 22px) 'Rajdhani', sans-serif;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  opacity: 0;
  transition: opacity 0.2s;
}
#hint.show { opacity: 1; }

/* Training: combo damage readout under the dummy's health bar. */
#train-info {
  position: absolute;
  top: clamp(64px, 9vh, 86px);
  right: 16px;
  font: 11px 'Press Start 2P', monospace;
  color: var(--accent-2);
  text-shadow: 2px 2px 0 #000;
}

/* "3 HIT COMBO" pops up on the attacker's side. */
.combo {
  position: absolute;
  top: 24%;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(14px, 2.6vw, 24px);
  line-height: 1.4;
  color: #fff;
  text-shadow: 3px 3px 0 #000, 0 0 16px rgba(255, 59, 59, 0.8);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s, transform 0.12s;
}
.combo.left { left: 6%; text-align: left; }
.combo.right { right: 6%; text-align: right; }
.combo.show { opacity: 1; transform: scale(1); }
.combo b { color: var(--accent-2); font-size: 1.6em; }

.wins { display: flex; gap: 6px; }
.fighter-info.right .wins { justify-content: flex-end; }
.wins i {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
}
.wins i.on { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }

#net-status {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-size: 14px;
  color: var(--muted);
  text-shadow: 1px 1px 0 #000;
}
#net-status.warn { color: var(--accent); }

/* ---------- Touch controls ---------- */
.touch { display: none; }

@media (pointer: coarse) {
  html, body { touch-action: none; -webkit-touch-callout: none; }
  .touch { display: block; }
  #net-status { bottom: auto; top: 96px; }
}

.tbtn {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font: 700 22px 'Rajdhani', sans-serif;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tbtn.on { background: rgba(255, 210, 63, 0.4); border-color: var(--accent-2); }

/* D-pad: 3x3 grid of 56px cells anchored bottom-left. */
.touch-pad {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 168px;
  height: 168px;
}
.touch-pad .tbtn { width: 56px; height: 56px; }
.touch-pad .up { left: 56px; top: 0; }
.touch-pad .left { left: 0; top: 56px; }
.touch-pad .right { left: 112px; top: 56px; }
.touch-pad .down { left: 56px; top: 112px; }

.touch-actions {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 190px;
  height: 160px;
}
.touch-actions .act { width: 72px; height: 72px; font-size: 13px; letter-spacing: 0.5px; }
.touch-actions .punch { right: 88px; bottom: 0; background: rgba(255, 59, 59, 0.3); }
.touch-actions .kick { right: 0; bottom: 30px; background: rgba(255, 122, 26, 0.3); }
.touch-actions .block { right: 64px; bottom: 86px; width: 60px; height: 60px; }
.touch-actions .special { right: 0; bottom: 110px; width: 56px; height: 56px; font-size: 12px; background: rgba(63, 160, 255, 0.3); }

.tbtn.menu {
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  font-size: 16px;
}

/* Special recharging: the ÖZEL button fills from the bottom and stays dim. */
.touch-actions .special.charging {
  opacity: 0.55;
  background: linear-gradient(to top, rgba(63, 160, 255, 0.45) calc(var(--charge, 1) * 100%), rgba(255, 255, 255, 0.06) 0);
}

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

/* Portrait phone mid-fight: ask to rotate (menus work upright). Dismissed by rotating. */
#rotate { display: none; }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
  body.in-fight #rotate {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    text-align: center;
    font: 700 20px 'Rajdhani', sans-serif;
    background: rgba(7, 7, 13, 0.92);
  }
  .rotate-icon { font-size: 56px; animation: rotate-hint 1.6s ease-in-out infinite; }
}
@keyframes rotate-hint { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* Short landscape screens (phones): compact HUD, menus and touch pad. */
@media (max-height: 500px) {
  .hud-bar { padding: 8px 12px; gap: 10px; }
  .team-rows { gap: 4px; }
  .frow { gap: 2px; }
  .fighter-name { font-size: 9px; }
  .health { height: 13px; border-width: 1px; }
  .frow.compact .health { height: 8px; }
  .frow.compact .fighter-name { font-size: 7px; }
  .special { height: 3px; }
  .wins i { width: 9px; height: 9px; }
  .round-info { font-size: 8px; gap: 2px; min-width: 56px; }
  #timer { font-size: 18px; }
  .tbtn.menu { top: 56px; }
  #train-info { top: 46px; font-size: 8px; }
  .combo { top: 30%; }

  .logo { font-size: 20px; margin-bottom: 4px; }
  /* Two columns of menu buttons so the whole menu fits without scrolling. */
  #menu .panel { width: min(640px, 100%); display: grid; grid-template-columns: 1fr 1fr; }
  #menu .logo, #menu .status { grid-column: 1 / -1; text-align: center; }
  .panel { padding: 16px 18px; gap: 8px; }
  .btn { padding: 9px 14px; font-size: 15px; }
  .room-code { font-size: 24px; padding: 2px 0; }
  .slots { min-height: 0; }
  .team-col { padding: 6px; gap: 5px; }
}

/* Result screen sits on top of the frozen fight. */
#result, #pause { background: rgba(7, 7, 13, 0.55); }

@media (max-width: 600px) {
  .fighter-name { font-size: 9px; }
  .health { height: 16px; }
  #timer { font-size: 18px; }
}