/* =========================
   HISTORICKÁ VÝPRAVA – TÉMA: NEBULA / TAJOMNO
   – Temné, živé pozadie (CSS len, bez videa)
   – Sklenené karty s jemným „glow“
   – Tlačidlá: animovaný gradient + „sheen“
   – Hlavné CTA animuje neustále, sekundárne iba na :hover
   – „Historická výprava“ bez UPPERCASE a bez letter-spacing je rešpektované
   ========================= */

:root{
  /* Paleta – hlboká fialovo-modrá + akcenty */
  --nebula-900:#0b0f1a;
  --nebula-800:#0f1423;
  --nebula-700:#151a2b;
  --nebula-600:#1b2136;
  --nebula-500:#232b45;
  --accent-1:#8a5cff;   /* fialový akcent */
  --accent-2:#5cc8ff;   /* svetlomodrý akcent */
  --accent-3:#8ffdcb;   /* jemne zelenkavý akcent – success */
  --accent-4:#ff8d8d;   /* jemne červený – error */

  --text-100:#f5f7ff;
  --text-300:#cbd2e2;
  --text-500:#9aa3ba;

  --card-bg: rgba(21,26,43,0.65);
  --card-bd: rgba(140,160,255,0.15);
  --card-glow: 0 10px 30px rgba(86,120,255,0.15);

  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;

  --btn-radius: 12px;
  --btn-shadow: 0 8px 26px rgba(0,0,0,0.35);

  --focus-ring: 0 0 0 3px rgba(92,200,255,0.35);

  /* Sheen časovanie */
  --sheen-duration: 5s;
}

/* =========================
   GLOBÁL
   ========================= */
html,body{
  height:100%;
}

body.theme-nebula{
  margin:0;
  padding:0 20px 40px;
  color:var(--text-100);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  line-height:1.55;
  /* Viacvrstvové pozadie: gradient + hviezdy + hmla (pseudoelementy nižšie) */
  background: radial-gradient(1200px 800px at 75% 10%, rgba(90,54,158,0.35), transparent 60%),
              radial-gradient(900px 600px at 20% 80%, rgba(35,108,186,0.30), transparent 60%),
              linear-gradient(180deg, var(--nebula-900), var(--nebula-700) 40%, var(--nebula-800));
  overflow-x:hidden;
}

/* Pohyblivé hviezdy / hmla cez pseudo-elementy: ultraľahké */
body.theme-nebula::before,
body.theme-nebula::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

/* Vrstvy „hviezd“ – drobné bodky s pomalým parallax posunom */
body.theme-nebula::before{
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 85% 65%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,0.7), transparent 60%);
  animation: driftStars 60s linear infinite;
  opacity:.75;
}
@keyframes driftStars{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-80px,-40px,0); }
}

/* Jemná „hmla“ – veľké rozmazané škvrny s veľmi pomalým pohybom */
body.theme-nebula::after{
  background:
    radial-gradient(220px 220px at 80% 20%, rgba(138,92,255,0.15), transparent 60%),
    radial-gradient(260px 260px at 15% 75%, rgba(92,200,255,0.12), transparent 60%),
    radial-gradient(180px 180px at 55% 60%, rgba(143,253,203,0.10), transparent 60%);
  filter: blur(14px);
  animation: mistFloat 80s ease-in-out infinite alternate;
  opacity:.85;
}
@keyframes mistFloat{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(30px,-20px,0) scale(1.05); }
}

/* Uhladené nadpisy */
h1,h2{
  margin: 90px auto 14px; /* rezerva pre fixed top bar */
  text-align:center;
  letter-spacing: 0;      /* rešpekt: bez letter-spacing */
  text-transform: none;   /* rešpekt: bez uppercase */
}
h1{
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  color: var(--text-100);
  text-shadow: 0 2px 20px rgba(92,200,255,0.12);
  margin-top: 88px; /* prvý nadpis trochu nižšie pod top barom */
}
h2{
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  color: var(--text-300);
}

/* Pomocné */
.hidden{ display:none !important; }

/* =========================
   TOP BAR
   ========================= */
.top-bar{
  position: fixed;
  top:0; left:0; right:0;
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:10px 16px;
  background: linear-gradient(180deg, rgba(6,9,18,0.85), rgba(6,9,18,0.35));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(140,160,255,0.1);
  z-index:1000;
}

.top-bar a{
  color: var(--text-100);
  text-decoration:none;
  padding:8px 12px;
  border-radius:10px;
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
  opacity:.95;
}
.top-bar a:hover{
  background: rgba(140,160,255,0.08);
  transform: translateY(-1px);
  opacity:1;
}

/* =========================
   KARTY / SEKCIÁ
   ========================= */
.section{
  max-width: 980px;
  margin: 18px auto 26px;
  padding: 18px 16px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  box-shadow: var(--card-glow);
  backdrop-filter: blur(10px);
}

/* Text v sekciách */
.section p{
  color: var(--text-300);
}

/* =========================
   TLAČIDLÁ – Gradient + Sheen
   ========================= */
.btn{
  --grad: linear-gradient(135deg, rgba(138,92,255,0.95) 0%, rgba(92,200,255,0.95) 100%);
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .5rem;
  padding: 10px 16px;
  border:0;
  border-radius: var(--btn-radius);
  cursor:pointer;
  font-weight: 600;
  color: #0b1020;
  background: var(--grad);
  box-shadow: var(--btn-shadow);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
  will-change: transform;
  isolation:isolate; /* pre sheen prekrytie */
}

/* Pôvodne: inset:-2px;  (presah) */
.btn::after{
  content:"";
  position:absolute;
  inset:0;                /* ← žiadny presah mimo tlačidla */
  border-radius: inherit;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,0.35) 35%,
      rgba(255,255,255,0) 50%);
  transform: translateX(-120%) skewX(-15deg);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;   /* ← kľúčové: sheen nikdy nezachytí klik */
}

/* Animácia sheen */
@keyframes sheenSweep{
  0%   { transform: translateX(-120%) skewX(-15deg); opacity:.0; }
  10%  { opacity:.55; }
  50%  { transform: translateX(0%) skewX(-15deg); opacity:.35; }
  90%  { opacity:.0; }
  100% { transform: translateX(120%) skewX(-15deg); opacity:.0; }
}

/* Primárne – kontinuálna animácia (každých ~5s) */
.btn-primary{
  background: var(--grad);
  color:#0b1020;
}
.btn-primary::after{
  animation: sheenSweep var(--sheen-duration) ease-in-out infinite;
  opacity:.35;
}

/* Sekundárne – neutrálna plocha, sheen iba na :hover */
.btn-secondary{
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  color: var(--text-100);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.btn-secondary:hover::after{
  animation: sheenSweep var(--sheen-duration) ease-in-out 1;
}

/* Interakcie */
.btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.btn:active{ transform: translateY(0); filter: brightness(.98); }
.btn:focus-visible{ outline:none; box-shadow: var(--focus-ring); }

/* =========================
   ŠPECIÁL – Nadpis „Historická výprava“
   (bez uppercase, bez letter-spacing – už zabezpečené v h1)
   ========================= */

/* =========================
   EVENT KARTY (Kolo 1)
   ========================= */
#event-container{
  display:flex; flex-wrap:wrap; gap:12px;
}

.event-card{
  background: rgba(12,15,28,0.6);
  border: 1px solid rgba(140,160,255,0.15);
  border-radius: var(--radius-md);
  padding: 12px;
  min-width: 220px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  color: var(--text-100);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.event-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  background: rgba(18,22,38,0.75);
}
.event-card.correct{
  border-color: rgba(143,253,203,0.45);
  background: rgba(12,38,28,0.55);
  box-shadow: 0 8px 24px rgba(143,253,203,0.18);
}
.event-card.incorrect{
  border-color: rgba(255,141,141,0.45);
  background: rgba(40,16,20,0.55);
  box-shadow: 0 8px 24px rgba(255,141,141,0.18);
}

/* Zamknuté karty po dokončení 1. kola */
#event-container.locked .event-card{
  opacity: .6;
  cursor: default;
  filter: grayscale(12%);
}
#event-container.locked .event-card.correct{
  /* nech správne zvyšky ostanú trochu výraznejšie */
  opacity: .8;
}

#timeline-message{
  margin-top: 10px;
  color: var(--text-300);
}

/* =========================
   KOLO 2 – Caesar input
   ========================= */
#cipher-text{
  color: var(--text-300);
}
#cipher-input{
  width:100%;
  padding:10px 12px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(140,160,255,0.15);
  background: rgba(8,10,20,0.55);
  color: var(--text-100);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
#cipher-input::placeholder{ color: var(--text-500); }
#cipher-input:focus{
  box-shadow: var(--focus-ring);
  border-color: rgba(92,200,255,0.45);
  background: rgba(10,14,26,0.75);
}

/* =========================
   KOLO 3 – MAP BOARD / TILE
   ========================= */
#map-board{
  display:grid;
  gap:8px;
  justify-content:center;
}
.tile{
  width:180px; height:120px;
  border-radius: var(--radius-sm);
  background-repeat:no-repeat;
  background-size: 540px 360px; /* ak sa používa sprite */
  background-position:center;
  cursor:grab;
  user-select:none;
  pointer-events:auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  border:1px solid rgba(140,160,255,0.12);
  background-color: rgba(14,16,28,0.52);
}
.tile:active{ cursor:grabbing; }
.dropzone{ outline:2px dashed rgba(140,160,255,0.35); outline-offset: 3px; }

/* Kolo 3 – bezpečný layout tlačidiel */
#mcq-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 16px;                    /* väčší gap */
  align-items: stretch;
  position: relative;
}

#mcq-options .btn {
  display: block;
  width: 100%;
  min-height: 52px;             /* väčší hitbox */
  padding: 0.75rem 1rem;
  border-radius: 14px;
  position: relative;
  z-index: 1;                   /* nad pozadím */
  touch-action: manipulation;
  user-select: none;
}

#mcq-options .btn:disabled {
  opacity: .65;
  pointer-events: none;
}

#mcq-result {
  margin-top: 12px;
  min-height: 1.25em;       /* aby text nižšie neprekrýval tlačidlá */
}

/* vizuálne stavy, ktoré už používaš */
.btn-correct { background-color: #28a745 !important; color: #fff !important; }
.btn-wrong   { background-color: #dc3545 !important; color: #fff !important; }

#mcq-options .btn:active {
  transform: scale(0.98);   /* klik feedback */
}
#mcq-options .btn:disabled {
  opacity: .6;
  pointer-events: none;
}

@media (max-width: 480px) {
  #mcq-options {
    grid-template-columns: 1fr; /* jeden stĺpec – veľké pohodlné hitboxy */
    gap: 10px;
  }
  #mcq-options .btn {
    padding: 0.9rem 1.1rem;
    font-size: 1.05rem;
  }
}
@media (max-width: 560px) {
  #mcq-options { grid-template-columns: 1fr; }
}


/* =========================
   KOLO 4 – Reťazenie
   ========================= */
#chain-list{
  list-style:none; padding:0; margin:0;
}
#chain-list li{
  padding:10px 12px; margin:8px 0;
  background: rgba(12,15,28,0.6);
  border:1px solid rgba(140,160,255,0.15);
  border-radius: var(--radius-md);
  color: var(--text-100);
  cursor:grab;
  transition: background .2s ease, transform .15s ease;
}
#chain-list li:hover{ background: rgba(18,22,38,0.75); transform: translateY(-1px); }
#chain-result{
  margin-top: 10px;
  color: var(--text-300);
}

/* =========================
   FINÁLE – Grid + Story
   ========================= */
#finale-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  max-width: 520px;
  margin: 0 auto;
}
#finale-grid button{
  padding: 12px;
  font-size: 18px;
  border-radius: var(--radius-md);
  border:1px solid rgba(140,160,255,0.15);
  background: rgba(12,15,28,0.65);
  color: var(--text-100);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
#finale-grid button:hover{
  transform: translateY(-1px);
  background: rgba(18,22,38,0.8);
  border-color: rgba(92,200,255,0.35);
}

/* === Finále – čistý textový režim (bez obrázkov) === */
#story-view.story-plain{
  /* rozumná šírka na čítanie */
  max-width: min(900px, 92vw);
  margin: 18px auto 28px;
  padding: clamp(16px, 2.4vw, 28px) clamp(18px, 3vw, 32px);

  /* tmavé prostredie – jemná karta */
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);

  /* typografia */
  font-family: "Merriweather", Georgia, serif;
  color: #e9e6df;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#story-view.story-plain .story-title{
  margin: 0 0 .6em 0;
  font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem);
  line-height: 1.2;
  color: #f2efe8;
}

#story-view.story-plain .story-text{
  margin: 0;
  max-width: 70ch;                 /* ideálna dĺžka riadka */
  line-height: 1.75;
  font-size: clamp(1rem, .95rem + .2vw, 1.08rem);
  color: #dcd7ce;
  white-space: pre-wrap;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  hyphens: auto;                    /* slovenčina má v <html> lang="sk" */
}

/* medzery medzi odsekmi */
#story-view.story-plain .story-text p{ margin: 0 0 .95em 0; }

/* zvýraznenia */
#story-view.story-plain .story-text b,
#story-view.story-plain .story-text strong{ color:#fff; }

/* citáty ak by sa objavili */
#story-view.story-plain .story-text blockquote{
  margin: .9em 0; padding: .6em 1em;
  border-left: 3px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.03);
  border-radius: 8px;
}

/* =========================
   RESPONSIVITA
   ========================= */
@media (max-width: 768px){
  body.theme-nebula{ padding: 0 12px 28px; }
  .section{ padding:14px 12px; }
  #finale-grid{ gap:10px; }
  .tile{ width: 42vw; height: 28vw; max-width: 180px; max-height: 120px; }
}

/* Koniec */

.btn-correct {
  background-color: #28a745 !important; /* zelená */
  color: white !important;
  transition: background-color 0.3s ease;
}

.btn-wrong {
  background-color: #dc3545 !important; /* červená */
  color: white !important;
  transition: background-color 0.3s ease;
}