/* OKTAGON HUD — bojova arena (16.8.2026, spec docs/superpowers/specs/2026-08-16-oktagon-design.md
   sekcia 6.2). Cierna + zlta, uppercase, ostre hrany.

   POZOR: stranka /kantina.html je ZDIELANA s rezimom KANTINA. VSETKY selektory tu MUSIA byt
   pod `body.oktagon`, inak prebiju krcmu. Trieda sa prepina cez body.classList.toggle('oktagon').
   Ziadne externe fonty ani assety (CSP) — condensed pocit robime letter-spacingom a vahou.
   border-radius 0 vsade (DR design language). Drzi aj na 360px sirke. */

body.oktagon {
  --o-bg: #0A0A0A;
  --o-panel: #121212;
  --o-line: #2A2A2A;
  --o-yellow: #FFD200;
  --o-yellow-dim: rgba(255, 210, 0, 0.35);
  --o-red: #D32F2F;
  --o-blue: #1976D2;
  --o-text: #E8E8E8;
  --o-text-hi: #FFFFFF;
  --o-muted: #8A8A8A;

  background: var(--o-bg);
  color: var(--o-text);
}

body.oktagon * { border-radius: 0 !important; }

/* ── HLAVICKA / TOPIC ── */
body.oktagon header { border-bottom: 2px solid var(--o-yellow); }
body.oktagon header h1 {
  color: var(--o-yellow);
  letter-spacing: 6px;
  font-weight: 800;
  text-transform: uppercase;
}
body.oktagon header a { color: var(--o-muted); }
body.oktagon header a:hover { color: var(--o-yellow); }

body.oktagon #topic-bar {
  color: var(--o-text-hi);
  background: var(--o-panel);
  border-bottom: 2px solid var(--o-yellow);
  border-left: 4px solid var(--o-red);
  padding: 7px 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── SCENA (klietka) ── */
/* AUDIT 17.8.: kantina-hud.css ma na #scene-wrap `border ... !important`, a !important
   prebije akukolvek specificitu — zlty ram klietky sa nikdy nezobrazil (ostal DR fialovy
   aj s fialovym inset lemom). Preto !important aj tu + explicitny reset box-shadow. */
body.oktagon #scene-wrap {
  border: 2px solid var(--o-yellow) !important;
  box-shadow: none !important;
  background: var(--o-bg);
}

/* ── FEED = zaznam zapasu ── */
body.oktagon #feed {
  border: 2px solid var(--o-line);
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.85), rgba(10, 10, 10, 0.95));
  box-shadow: none;
  padding: 12px 14px !important;
}
body.oktagon .ln { color: var(--o-text); }
body.oktagon .ln .spk {
  color: var(--o-yellow);
  text-shadow: none;
  letter-spacing: 1.5px;
  font-weight: 800;
  text-transform: uppercase;
}
body.oktagon .ln-replika { border-left: 2px solid var(--o-line); padding-left: 8px; }
body.oktagon .ln-scena {
  color: var(--o-muted) !important;
  border-left: 2px solid var(--o-line);
  background: none;
  opacity: 0.9;
}
body.oktagon .ln-raul {
  border-left: 3px solid var(--o-red);
  background: rgba(211, 47, 47, 0.07);
  padding-left: 8px;
}
body.oktagon .ln-raul .spk { color: var(--o-red); }

/* ── SKORE (rozhodca medzi kolami) ── */
body.oktagon .ln-skore {
  border: 2px solid var(--o-yellow);
  background: rgba(255, 210, 0, 0.06);
  padding: 8px 10px;
  margin: 10px 0;
  color: var(--o-text-hi);
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: pre-wrap;
  word-break: break-word;
}
body.oktagon .ln-skore .spk { display: none; }

/* ── VERDIKT (kind=zhrnutie) = karta na konci zapasu ── */
body.oktagon .ln-zhrnutie {
  border: 4px solid var(--o-yellow) !important;
  background: #0D0D0D !important;
  box-shadow: none !important;
  color: var(--o-text-hi) !important;
  padding: 14px 14px 16px !important;
  margin: 14px 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}
body.oktagon .ln-zhrnutie::before {
  content: 'VERDIKT';
  display: block;
  background: var(--o-yellow);
  color: #0A0A0A;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  padding: 3px 8px;
  margin: -14px -14px 12px;
}
body.oktagon .ln-zhrnutie .spk { display: none; }

/* ── TLACIDLA ── */
body.oktagon button {
  background: #161616;
  border: 2px solid var(--o-line);
  color: var(--o-text);
  box-shadow: none;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
}
body.oktagon button:hover { background: #1F1F1F; border-color: var(--o-yellow); color: var(--o-yellow); transform: none; }
body.oktagon button:active { transform: translate(1px, 1px); }
body.oktagon button.hot {
  background: var(--o-yellow);
  border-color: var(--o-yellow);
  color: #0A0A0A;
}
body.oktagon button.tgl.on { border-color: var(--o-yellow); color: var(--o-yellow); }

/* AUDIT 17.8.: kantina-hud.css ma vetvu `#controls button` (specificita s ID), ktora prebila
   `body.oktagon button` — spodna lista mala fialove ramy, pixel tien a oranzovy glow na
   zapnutych toggloch. Preto ta ista uroven ID aj pre oktagon. */
body.oktagon #controls button {
  border: 2px solid var(--o-line);
  box-shadow: none;
}
body.oktagon #controls button:hover { border-color: var(--o-yellow); box-shadow: none; transform: none; }
body.oktagon #controls button:active { box-shadow: none; transform: translate(1px, 1px); }
body.oktagon #controls button.on,
body.oktagon #controls button.tgl.on {
  border-color: var(--o-yellow);
  color: var(--o-yellow);
  box-shadow: none;
}

/* ── SETUP / CAST ── */
body.oktagon #setup label { color: var(--o-muted); letter-spacing: 2px; text-transform: uppercase; }
body.oktagon #setup textarea,
body.oktagon #setup input[type=number],
body.oktagon #sayrow input {
  background: var(--o-panel);
  border: 2px solid var(--o-line);
  color: var(--o-text-hi);
}
body.oktagon #setup textarea:focus,
body.oktagon #sayrow input:focus { outline: none; border-color: var(--o-yellow); }

/* AUDIT 17.8.: kantina-hud.css ma na `#say` farbu/ram s !important a oranzovy focus glow —
   input v klietke pisal matrix-zelenym na fialovom rame a po fokuse svietil oranzovo.
   !important tu je jediny sposob ako to prebit. */
body.oktagon #sayrow input#say {
  color: var(--o-text-hi) !important;
  caret-color: var(--o-yellow);
  border: 2px solid var(--o-line) !important;
  box-shadow: none !important;
}
body.oktagon #sayrow input#say:focus {
  border-color: var(--o-yellow) !important;
  box-shadow: none !important;
}
body.oktagon .cast-chip { border: 2px solid var(--o-line); color: var(--o-muted); letter-spacing: 1px; text-transform: uppercase; }
body.oktagon .cast-chip.on { border-color: var(--o-yellow); color: var(--o-yellow); }

/* ── OSTATNE HUD prvky ── */
body.oktagon #controls { border-top: 2px solid var(--o-line); }
body.oktagon #status, body.oktagon #hints { color: var(--o-muted); }
body.oktagon #saved { border-top: 2px solid var(--o-line); }
body.oktagon .saved-head { color: var(--o-muted); letter-spacing: 2px; text-transform: uppercase; }
body.oktagon .saved-row { border: 2px solid var(--o-line); }
body.oktagon .saved-row:hover { border-color: var(--o-yellow); }
body.oktagon .saved-topic { color: var(--o-text-hi); }
body.oktagon .saved-meta { color: var(--o-muted); }
body.oktagon .saved-zaver { color: var(--o-muted); border-left: 2px solid var(--o-yellow); }
body.oktagon .badge { border-width: 2px; letter-spacing: 2px; }
body.oktagon .badge.done { color: var(--o-yellow); border-color: var(--o-yellow); }
body.oktagon .badge.live { color: var(--o-red); border-color: var(--o-red); }
body.oktagon .badge.dohoda { color: var(--o-blue); border-color: var(--o-blue); }
body.oktagon #dohoda { border: 2px solid var(--o-yellow); }
body.oktagon .dohoda-label { color: var(--o-yellow); letter-spacing: 2px; text-transform: uppercase; }
body.oktagon #dohoda-status { color: var(--o-text-hi); }
body.oktagon .cursor::after { color: var(--o-yellow); }

/* ── ROHY: farebne odlisenie bojovnikov v HUD zoznamoch ── */
body.oktagon .corner-red { color: var(--o-red) !important; border-color: var(--o-red) !important; }
body.oktagon .corner-blue { color: var(--o-blue) !important; border-color: var(--o-blue) !important; }
body.oktagon .out { opacity: 0.35; text-decoration: line-through; }

/* ── POZICIE editor (pred gongom) ── */
body.oktagon .poz-row { border: 2px solid var(--o-line); padding: 8px; margin-bottom: 8px; }
body.oktagon .poz-row .poz-name { color: var(--o-yellow); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
body.oktagon .poz-row textarea { width: 100%; margin-top: 6px; background: var(--o-panel); border: 1px solid var(--o-line); color: var(--o-text-hi); font: inherit; padding: 6px; }

/* ── VERDIKT MUSI BYT CITATELNY (vizualny nalez 17.8.) ──────────────────────────
   Na uzkom/nizkom displeji zabrala scena 45vh a na feed ostal jeden riadok — po zapase
   bolo z verdiktu vidno posledne slovo ("dorucit."). Verdikt je pointa celeho rezimu,
   takze feed dostane minimalnu vysku a scena sa stiahne. Stranka radsej scrolluje, nez
   by sa zaver nedal precitat. Scoped na body.oktagon — kantina layout ostava nedotknuty. */
@media (max-width: 760px), (max-height: 760px) {
  body.oktagon #feed { min-height: 32vh; }
  /* flex-shrink MUSI byt 0: #feed s min-height inak scenu stlacil na ~70px pasik
     (prve kolo opravy). Stranka radsej scrolluje. */
  body.oktagon #scene-wrap { height: 32vh; flex: 0 0 32vh; }
}

/* ── MOBIL (Fold 340-360px): nic sa nesmie pretiect ── */
@media (max-width: 380px) {
  body.oktagon header h1 { font-size: 13px; letter-spacing: 3px; }
  body.oktagon #topic-bar { letter-spacing: 0.5px; padding: 6px 8px; }
  body.oktagon #feed { padding: 8px 9px !important; font-size: 13px; }
  body.oktagon .ln-skore { font-size: 12px; letter-spacing: 0; padding: 6px 8px; }
  body.oktagon .ln-zhrnutie { padding: 10px 10px 12px !important; }
  body.oktagon .ln-zhrnutie::before { margin: -10px -10px 10px; letter-spacing: 3px; font-size: 11px; }
  body.oktagon button { letter-spacing: 1px; padding: 7px 9px; }
  body.oktagon .poz-row .poz-name { letter-spacing: 1px; }
}

/* ── POZAPASOVY ROZHOVOR (spec 7b) ───────────────────────────────────────────
   Po verdikte sa Raul moze pytat z rohu a bojovnici odpovedaju. Otazka je
   `kind=anketa`, odpovede `kind=odpoved` — ani jedno NIE JE uder, takze skore
   sa nehne. Vizualne to preto NESMIE vyzerat ako kolo zapasu: ziadne zlte
   ramy ako ma skorekarta, len tiche pokracovanie po gongu. */
body.oktagon .ln-anketa {
  color: var(--o-yellow) !important;
  border-left: 3px solid var(--o-red);
  background: rgba(211, 47, 47, 0.07);
  padding: 6px 10px;
  margin: 10px 0 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 800;
}
body.oktagon .ln-odpoved {
  border-left: 2px solid var(--o-line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--o-text);
  padding: 8px 10px;
  margin: 4px 0;
}
body.oktagon .ln-odpoved .spk {
  color: var(--o-text-hi);
  letter-spacing: 2px;
  font-weight: 800;
  text-transform: uppercase;
}