/* KANTINA HUD — gaming UI vrstva (14.7.). Retro-RPG dialog look v DR palete
   (VA-11 Hall-A / Stardew vibe). CISTE CSS, prepisuje inline styly kantina.html.
   Ziadne externe fonty/assety (CSP). Komentare bez diakritiky. */
:root {
  --k-bg: #0F0A18;
  --k-panel: #170F26;
  --k-purple: #512D6D;
  --k-purple-lt: #7C4FA6;
  --k-lila: #C1A7E2;
  --k-orange: #FF6B35;
  --k-amber: #F5B800;
  --k-green: #00FF41;
  --k-text: #E9D5FF;
  --k-text-hi: #F5F0FF;
  --k-ink: #2A1F33;
}

/* ── TRANSCRIPT ako RPG dialog okno ── */
#feed {
  border: 2px solid var(--k-purple);
  box-shadow: inset 0 0 0 1px var(--k-ink), inset 0 0 24px rgba(81, 45, 109, 0.25);
  background: linear-gradient(180deg, rgba(23, 15, 38, 0.6), rgba(15, 10, 24, 0.85));
  padding: 12px 14px !important;
  margin-top: 8px;
}
.ln { position: relative; }
.ln-replika .spk { text-shadow: 0 0 6px currentColor; letter-spacing: 0.5px; }
.ln-replika { padding-left: 4px; }
.ln-scena {
  color: var(--k-purple-lt) !important;
  opacity: 0.85;
  padding-left: 10px;
  border-left: 2px solid rgba(124, 79, 166, 0.4);
}
.ln-raul {
  border-left: 3px solid var(--k-orange);
  padding-left: 8px;
  background: rgba(255, 107, 53, 0.05);
}
.ln-zhrnutie {
  border: 2px solid var(--k-amber) !important;
  box-shadow: 0 0 14px rgba(245, 184, 0, 0.25), inset 0 0 0 1px rgba(245, 184, 0, 0.2);
  background: linear-gradient(180deg, rgba(245, 184, 0, 0.06), rgba(15, 10, 24, 0.5)) !important;
  padding: 12px 14px !important;
}

/* ── TLACIDLA — pixel-art button ── */
#controls button, button {
  border: 2px solid var(--k-purple-lt);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2), background 120ms;
  text-transform: uppercase;
}
#controls button:hover, button:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}
#controls button:active, button:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.55);
}
#controls button.on, button.tgl.on {
  border-color: var(--k-orange);
  color: var(--k-text-hi);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55), 0 0 10px rgba(255, 107, 53, 0.5);
}
button:disabled { box-shadow: none !important; transform: none !important; }

/* ── SAY input — terminal ── */
#say, input#say {
  color: var(--k-green) !important;
  caret-color: var(--k-green);
  border: 1px solid var(--k-purple) !important;
  transition: border-color 120ms, box-shadow 120ms;
}
#say::placeholder { color: rgba(124, 79, 166, 0.7); }
#say:focus {
  border-color: var(--k-orange) !important;
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.35);
  outline: none;
}

/* ── STATUS — typewriter ── */
#status { color: var(--k-amber); }
#status:not(:empty)::before { content: '> '; color: var(--k-orange); }

/* ── TOPIC BAR — quest banner ── */
#topic-bar {
  background: linear-gradient(90deg, rgba(81, 45, 109, 0.5), rgba(124, 79, 166, 0.15) 60%, transparent);
  padding: 8px 10px !important;
  border-left: 3px solid var(--k-amber);
}
#topic-bar::before { content: '\25C6  '; color: var(--k-amber); }

/* ── DOHODA blok — slavnostny ── */
#dohoda {
  border: 2px solid var(--k-amber);
  box-shadow: inset 0 0 0 1px var(--k-ink);
  animation: kdohoda 3s ease-in-out infinite;
  padding: 10px 12px;
}
@keyframes kdohoda {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--k-ink), 0 0 8px rgba(245, 184, 0, 0.25); }
  50% { box-shadow: inset 0 0 0 1px var(--k-ink), 0 0 18px rgba(245, 184, 0, 0.5); }
}
#approve { border-color: var(--k-amber) !important; color: var(--k-amber); font-weight: 700; }

/* ── SAVED zoznam — herne menu ── */
.saved-row {
  position: relative;
  padding-left: 16px !important;
  transition: transform 120ms steps(2), background 120ms;
}
.saved-row::before {
  content: '\25B8';
  position: absolute; left: 2px;
  color: var(--k-orange);
  opacity: 0;
  transition: opacity 120ms;
}
.saved-row:hover { background: rgba(124, 79, 166, 0.14); transform: translateX(2px); }
.saved-row:hover::before { opacity: 1; }

/* ── CAST chips — character select ── */
.cast-chip { transition: transform 100ms steps(2), border-color 120ms, box-shadow 120ms; }
.cast-chip:hover { transform: translateY(-1px); border-color: var(--k-lila); }
.cast-chip.on {
  transform: translateY(-1px);
  box-shadow: 0 0 8px rgba(255, 107, 53, 0.4);
}

/* ── SCENE ram — hlbsi ── */
#scene-wrap {
  border: 2px solid var(--k-purple) !important;
  box-shadow: inset 0 0 0 1px var(--k-ink), 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* ── MOBIL: zmensi ramy/tiene ── */
@media (max-width: 500px) {
  #feed { border-width: 1px; padding: 8px 10px !important; }
  #controls button, button { box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); }
  #controls button:hover, button:hover { box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); }
  #scene-wrap { border-width: 1px !important; }
}