:root {
  --orange:#FF6B00; --dark:#0a0a0a; --dark2:#111; --dark3:#1a1a1a;
  --grey:#2a2a2a; --grey2:#333; --grey-light:#555;
  --text:#e8e8e8; --text-dim:#aaa;
  --green:#4ade80; --red:#f87171; --blue:#60a5fa; --yellow:#facc15;
}
body.light {
  --dark:#f0f0f0; --dark2:#ffffff; --dark3:#e8e8e8;
  --grey:#cccccc; --grey2:#bbbbbb; --grey-light:#999;
  --text:#111111; --text-dim:#555555;
}
body.light .hdr { background:rgba(240,240,240,.97); }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--dark); color:var(--text); font-family:'Rajdhani',sans-serif; font-weight:500; min-height:100vh; }

/* ── HEADER ── */
.hdr {
  position:sticky; top:0; z-index:100; background:var(--dark2);
  border-bottom:1px solid rgba(255,107,0,.25);
  padding:0 2rem; height:60px; display:flex; align-items:center; justify-content:space-between;
}
.hdr-brand { font-family:'Bebas Neue',sans-serif; font-size:1.4rem; letter-spacing:.08em; color:var(--orange); }
.hdr-brand span { color:var(--text); }
.hdr-right { display:flex; align-items:center; gap:.8rem; }

/* ── USER BADGE + ROLE ── */
.user-badge {
  font-family:'Share Tech Mono',monospace; font-size:.65rem; color:var(--text-dim);
  letter-spacing:.1em; border:1px solid var(--grey); padding:.25rem .6rem;
}
.role-chip {
  font-family:'Share Tech Mono',monospace; font-size:.65rem; letter-spacing:.1em;
  padding:.2rem .5rem; text-transform:uppercase; font-weight:700;
}
.role-owner   { background:var(--orange); color:#000; }
.role-editor  { background:var(--blue);   color:#000; }
.role-reporter{ background:var(--green);  color:#000; }
.role-player  { background:var(--yellow); color:#000; }
.role-taktiker{ background:#a855f7;       color:#fff; }

/* ── THEME TOGGLE ── */
.theme-toggle-wrap {
  display:flex; align-items:center; gap:.5rem;
  font-family:'Share Tech Mono',monospace; font-size:.6rem; color:var(--text-dim); letter-spacing:.1em;
}
.theme-toggle {
  background:var(--grey); border:1px solid var(--grey); border-radius:20px;
  width:44px; height:24px; position:relative; cursor:pointer; transition:background .3s; flex-shrink:0;
}
.theme-toggle::after {
  content:''; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:var(--orange); transition:transform .3s;
}
body.light .theme-toggle::after { transform:translateX(20px); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem; font-family:'Bebas Neue',sans-serif;
  font-size:.9rem; letter-spacing:.12em; padding:.45rem 1.2rem; border:none; cursor:pointer;
  transition:opacity .2s,transform .15s; text-decoration:none; white-space:nowrap;
}
.btn:hover { opacity:.85; transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--orange); color:#000; }
.btn-ghost   { background:transparent; border:1px solid var(--grey); color:var(--text); }
.btn-sm { font-size:.7rem; padding:.3rem .8rem; font-family:'Share Tech Mono',monospace; letter-spacing:.08em; }

/* ── LAYOUT ── */
.main { max-width:1360px; margin:0 auto; padding:2.5rem 2rem; }
.page-title {
  font-family:'Bebas Neue',sans-serif; font-size:2.2rem; letter-spacing:.08em;
  color:var(--text); display:flex; align-items:center; gap:1rem; margin-bottom:.3rem;
}
.page-title::after { content:''; flex:1; height:1px; background:var(--grey); }
.page-sub {
  font-family:'Share Tech Mono',monospace; font-size:.65rem; color:var(--text-dim);
  letter-spacing:.15em; text-transform:uppercase; margin-bottom:1.5rem;
}

/* ── DEMO SELECTOR ── */
.demo-selector-row { margin-bottom:1.5rem; }
.demo-selector-row select {
  background:var(--dark3); border:1px solid var(--grey); color:var(--text);
  font-family:'Rajdhani',sans-serif; font-size:.95rem; padding:.5rem .8rem;
  outline:none; cursor:pointer; min-width:340px; appearance:none;
  transition:border-color .2s;
}
.demo-selector-row select:focus { border-color:var(--orange); }

/* ── REPLAY LAYOUT ── */
.replay-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:1rem;
  align-items:start;
}
@media(max-width:900px) {
  .replay-layout { grid-template-columns:1fr; }
  .info-col { order:-1; }
}

/* ── CANVAS ── */
.canvas-col { display:flex; flex-direction:column; }
#replayCanvas {
  width:100%; height:auto; display:block;
  border:1px solid var(--grey); background:#000;
}

/* ── CONTROLS BAR ── */
.controls-bar {
  padding:.5rem; border-top:1px solid var(--grey);
  background:var(--dark2);
}

/* ── ROUND TABS ── */
.round-tabs {
  display:flex; flex-wrap:wrap; gap:.25rem; margin-bottom:.5rem;
}
.round-tab {
  font-family:'Share Tech Mono',monospace; font-size:.6rem; letter-spacing:.08em;
  background:transparent; border:1px solid var(--grey2); color:var(--text-dim);
  padding:.2rem .45rem; cursor:pointer; transition:color .15s,border-color .15s;
  white-space:nowrap;
}
.round-tab:hover { border-color:var(--grey-light); color:var(--text); }
.round-tab.active {
  border-color:var(--orange); color:var(--orange); background:rgba(255,107,0,.08);
}
.round-tab.cached {
  border-color:var(--grey-light); color:var(--text);
}
.round-tab.active.cached {
  border-color:var(--orange); color:var(--orange);
}

/* ── PLAYBACK ROW ── */
.playback-row {
  display:flex; gap:.3rem; align-items:center; margin-bottom:.4rem; flex-wrap:wrap;
}
.ctrl-btn {
  font-family:'Share Tech Mono',monospace; font-size:.8rem;
  background:transparent; border:1px solid var(--grey2); color:var(--text-dim);
  padding:.3rem .55rem; cursor:pointer; transition:color .15s,border-color .15s; line-height:1;
}
.ctrl-btn:hover { border-color:var(--grey-light); color:var(--text); }
.play-btn {
  font-size:1rem; padding:.3rem .75rem; min-width:36px;
  border-color:var(--grey); color:var(--text);
}
.play-btn.playing {
  border-color:var(--orange); color:var(--orange); background:rgba(255,107,0,.08);
}

/* ── SPEED BUTTONS ── */
.speed-btns { display:flex; gap:.25rem; margin-left:.25rem; }
.speed-btn {
  font-family:'Share Tech Mono',monospace; font-size:.65rem; letter-spacing:.05em;
  background:transparent; border:1px solid var(--grey2); color:var(--text-dim);
  padding:.25rem .45rem; cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.speed-btn:hover { border-color:var(--grey-light); color:var(--text); }
.speed-btn.active { background:var(--orange); border-color:var(--orange); color:#000; }

/* ── TIMELINE ROW ── */
.timeline-row { display:flex; gap:.5rem; align-items:center; }
#timeline {
  flex:1; accent-color:var(--orange); cursor:pointer;
  height:4px; appearance:auto;
}
.time-display {
  font-family:'Share Tech Mono',monospace; font-size:.65rem; color:var(--text-dim);
  white-space:nowrap; min-width:36px; text-align:right;
}

/* ── INFO COLUMN ── */
.info-col { display:flex; flex-direction:column; gap:.75rem; }

/* ── SCORE DISPLAY ── */
.score-display {
  background:var(--dark2); border:1px solid var(--grey);
  padding:.75rem 1rem; text-align:center;
  font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:.08em;
}
.score-ct { color:#60a5fa; }
.score-sep { color:var(--text-dim); font-size:1.4rem; margin:0 .5rem; }
.score-t  { color:#fb923c; }
.score-label {
  font-family:'Share Tech Mono',monospace; font-size:.6rem; color:var(--text-dim);
  letter-spacing:.15em; display:block; margin-top:.15rem;
}

/* ── ROUND INFO + TIMER ── */
.round-info {
  background:var(--dark2); border:1px solid var(--grey);
  padding:.5rem 1rem; display:flex; align-items:center; justify-content:space-between;
}
#roundLabel {
  font-family:'Share Tech Mono',monospace; font-size:.6rem; color:var(--text-dim);
  letter-spacing:.15em;
}
#roundTimer {
  font-family:'Bebas Neue',sans-serif; font-size:1.5rem; letter-spacing:.05em;
  color:var(--text);
}

/* ── BOMB TIMER ── */
.bomb-timer {
  background:#1a0000; border:1px solid #7f1d1d;
  padding:.5rem 1rem; text-align:center;
  font-family:'Bebas Neue',sans-serif; font-size:1.4rem; letter-spacing:.08em;
  color:#f87171;
}
.bomb-timer.critical {
  animation:bombpulse .4s ease-in-out infinite alternate;
  border-color:#ef4444; color:#ef4444; background:#2a0000;
}
.bomb-timer.exploded  { color:#facc15; background:#1a0800; border-color:#b45309; }
.bomb-timer.defusing  { color:#2dd4bf; background:#001a1a; border-color:#0d9488; animation:defusepulse .7s ease-in-out infinite alternate; }
.bomb-timer.defused   { color:#4ade80; background:#001a00; border-color:#166534; }
@keyframes bombpulse   { from{opacity:.7} to{opacity:1} }
@keyframes defusepulse { from{opacity:.75} to{opacity:1} }

/* ── PLAYER LIST ── */
.player-list {
  background:var(--dark2); border:1px solid var(--grey); padding:.4rem;
  display:flex; flex-direction:column; gap:.15rem;
}
.pl-section {
  font-family:'Share Tech Mono',monospace; font-size:.58rem; color:var(--text-dim);
  letter-spacing:.15em; text-transform:uppercase; padding:.3rem .3rem .1rem;
}
.pl-t  { color:#fb923c; }
.pl-ct { color:#60a5fa; margin-top:.3rem; }

.pl-row {
  display:flex; align-items:flex-start; gap:.4rem; padding:.3rem .3rem;
  transition:opacity .2s; border-radius:2px;
}
.pl-row:hover { background:rgba(255,255,255,.03); }
.pl-row.dead  { opacity:.35; }

.pl-dot {
  width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:.3rem;
  border:1px solid rgba(0,0,0,.4);
}
.pl-dot.ct { background:#60a5fa; }
.pl-dot.t  { background:#fb923c; }

.pl-main { flex:1; min-width:0; }

.pl-top {
  display:flex; align-items:center; gap:.3rem; margin-bottom:.15rem;
}
.pl-name {
  font-family:'Share Tech Mono',monospace; font-size:.63rem; color:var(--text);
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pl-row.dead .pl-name { color:var(--text-dim); }

.pl-hp-wrap  { display:flex; align-items:center; gap:.25rem; flex-shrink:0; }
.pl-hp-bg    { width:44px; height:4px; background:var(--grey2); border-radius:2px; overflow:hidden; }
.pl-hp-bar   { height:100%; border-radius:2px; transition:width .1s, background .2s; }
.pl-hp-val   { font-family:'Share Tech Mono',monospace; font-size:.55rem; color:var(--text-dim); min-width:20px; text-align:right; }

.pl-bot {
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
}
.pl-kda {
  font-family:'Share Tech Mono',monospace; font-size:.58rem; color:var(--text-dim);
  letter-spacing:.03em;
}
.pl-cash {
  font-family:'Share Tech Mono',monospace; font-size:.58rem; color:#4ade80;
}
.pl-weapon {
  font-family:'Share Tech Mono',monospace; font-size:.55rem; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.05em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70px;
}
.pl-weapon-icon {
  width:44px; height:auto; max-height:16px;
  object-fit:contain; vertical-align:middle; opacity:.85;
  filter:brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(8deg);
}
.pl-equip-icon {
  width:18px; height:auto; max-height:16px;
  object-fit:contain; vertical-align:middle; opacity:.85;
  filter:brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(8deg);
}
.pl-armor-icon { width:24px; max-height:20px; }
.pl-c4-icon    { width:20px; max-height:18px; }
.pl-defkit { font-size:.65rem; cursor:default; }
.pl-bomb   { font-size:.65rem; cursor:default; }
.pl-armor  { font-size:.65rem; cursor:default; }

/* ── GRENADE INVENTORY PIPS ── */
.pl-nades { display:flex; flex-wrap:wrap; gap:.2rem; margin-top:.2rem; }
.pl-nade {
  font-family:'Share Tech Mono',monospace; font-size:.5rem; font-weight:700;
  color:#000; padding:1px 3px; border-radius:2px; line-height:1.4;
}

/* ── INFO TEXT ── */
.info-text {
  font-family:'Share Tech Mono',monospace; font-size:.8rem; color:var(--text-dim);
  letter-spacing:.1em; padding:2rem 0;
}

/* ── LOADING STATE ── */
.loading-overlay {
  display:flex; align-items:center; gap:.5rem;
  font-family:'Share Tech Mono',monospace; font-size:.7rem; color:var(--text-dim);
  padding:.5rem 0;
}
.spinner {
  width:14px; height:14px; border:2px solid var(--grey2);
  border-top-color:var(--orange); border-radius:50%;
  animation:spin .7s linear infinite; flex-shrink:0;
}
@keyframes spin { to { transform:rotate(360deg); } }