/* ============================================================
   CENZOR — štýl
   Paleta vychádza priamo zo štúdia podcastu:
   tma miestnosti, červený neón ON AIR, modré svetlo terária,
   džungľa rastlín, bambusový stôl, papierovo biele bubliny reči.
   ============================================================ */

/* ---------- font ---------- */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokeny ---------- */
:root {
  --ink:     #0b0b12;   /* tma štúdia */
  --ink-2:   #15121d;   /* panel s fialovým nádychom */
  --line:    #2a2438;
  --neon:    #ff3355;   /* ON AIR červená */
  --neon-dim:#8f1f33;
  --blue:    #3fa8ff;   /* modré svetlo terária */
  --gold:    #ffc64b;   /* slová sponzora */
  --paper:   #f4efe4;   /* bublina reči */
  --paper-ink:#15131c;
  --leaf:    #2e7d5b;
  --leaf-2:  #1e4d3a;
  --bamboo:  #c89b5e;
  --muted:   #9b93ad;

  --display: "Anton", "Arial Narrow", sans-serif;
  --body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- základ ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; }

/* Hra beží vždy v portréte (na výšku). Na širokej obrazovke je to
   centrovaný stĺpec s pomerom ako telefón a tmavými bokmi. */
body { background: #000; }

#app {
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, calc(100dvh * 0.58));
  height: 100dvh;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, .7);
  background:
    radial-gradient(120% 90% at 50% 110%, #171226 0%, transparent 55%),
    var(--ink);
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
  text-align: center;
}
.screen[hidden] { display: none; }

/* ---------- tlačidlá ---------- */
.btn {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(17px, 2.4vh, 21px);
  border-radius: 14px;
  padding: 15px 30px;
  border: 2px solid var(--neon);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: scale(.96); }
.btn--primary {
  background: var(--neon);
  color: var(--ink);
  box-shadow: 0 0 24px rgba(255, 51, 85, .45), 0 0 64px rgba(255, 51, 85, .2);
}
.btn--ghost { border-color: var(--line); color: var(--muted); }
.btn:focus-visible, .icon-btn:focus-visible, .word:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.icon-btn {
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: rgba(21, 18, 29, .8);
  color: var(--paper);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  display: grid; place-items: center;
}

/* ============================================================
   ÚVODNÁ OBRAZOVKA
   ============================================================ */
#screen-start {
  background:
    linear-gradient(rgba(11, 11, 18, .82), rgba(11, 11, 18, .92) 72%, var(--ink)),
    url("../img/studio.jpg") center 22% / cover no-repeat;
}
.brand-sign {
  font-family: var(--display);
  font-size: clamp(11px, 1.6vh, 14px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--neon);
  border: 2px solid var(--neon);
  border-radius: 8px;
  padding: 7px 14px 6px 18px;
  box-shadow: 0 0 18px rgba(255, 51, 85, .5), inset 0 0 12px rgba(255, 51, 85, .25);
  animation: signPulse 2.6s ease-in-out infinite;
}
h1.title {
  font-family: var(--display);
  font-size: clamp(64px, 17vw, 132px);
  line-height: .95;
  margin: 18px 0 4px;
  letter-spacing: .02em;
  color: var(--paper);
  text-shadow: 0 6px 0 #000, 0 0 42px rgba(63, 168, 255, .25);
}
h1.title .bar {
  display: inline-block;
  background: var(--neon);
  color: var(--ink);
  padding: 0 .12em;
  border-radius: .08em;
  transform: rotate(-2deg);
  box-shadow: 0 0 26px rgba(255, 51, 85, .55);
}
.tagline {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: clamp(14px, 2vh, 17px);
  max-width: 40ch;
  line-height: 1.45;
}

.howto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  font-size: clamp(13px, 1.9vh, 16px);
}
.howto-row { display: flex; align-items: center; gap: 12px; text-align: left; }
.howto-row span { color: var(--muted); }
.chip {
  flex: none;
  font-weight: 700;
  font-size: .92em;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: 0 3px 0 rgba(0,0,0,.4);
}
.chip--gold { background: var(--gold); }
.chip--bleeped {
  background: var(--paper-ink);
  color: var(--neon);
  letter-spacing: .1em;
}

/* potvrdenie veku nad tlačidlom */
.agegate {
  max-width: 40ch;
  margin: 0 0 16px;
  padding: 11px 15px;
  font-size: clamp(12px, 1.65vh, 13.5px);
  line-height: 1.5;
  color: var(--paper);
  background: rgba(255, 51, 85, .1);
  border: 1px solid var(--neon-dim);
  border-radius: 12px;
}
.agegate em {
  font-style: normal;
  font-weight: 700;
  color: var(--neon);
  white-space: nowrap;
}

.best-note { margin-top: 16px; color: var(--muted); font-size: 14px; }
.best-note strong { color: var(--gold); font-family: var(--display); letter-spacing: .06em; }
.credit {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.credit strong {
  color: var(--paper);
  font-weight: 700;
  white-space: nowrap;
}
.foot {
  position: absolute;
  bottom: max(12px, env(safe-area-inset-bottom));
  font-size: 12px;
  color: #5c5570;
}
.start-tools { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; }

/* ============================================================
   HERNÁ OBRAZOVKA
   ============================================================ */
#screen-game { padding: 0; justify-content: flex-start; }

.hud {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  position: relative;
  z-index: 30;
}
.score-box { text-align: left; }
.score-label {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.score-row { display: flex; align-items: baseline; gap: 8px; }
#score {
  font-family: var(--display);
  font-size: clamp(24px, 4vh, 34px);
  letter-spacing: .04em;
}
#combo {
  font-family: var(--display);
  font-size: clamp(13px, 2vh, 17px);
  color: var(--gold);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .15s, transform .15s;
}
#combo.show { opacity: 1; transform: none; }
#combo.bump { animation: comboBump .22s ease; }
@keyframes comboBump { 50% { transform: scale(1.35); } }

/* neónový nápis — rozhodca celej hry */
#onair {
  font-family: var(--display);
  font-size: clamp(16px, 4.4vw, 25px);
  letter-spacing: .3em;
  padding: 8px 14px 7px 20px;
  color: var(--neon);
  border: 2.5px solid var(--neon);
  border-radius: 10px;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(255, 51, 85, .55), inset 0 0 14px rgba(255, 51, 85, .3);
  animation: signPulse 2.2s ease-in-out infinite;
  white-space: nowrap;
}
#onair.hit { animation: signFlicker .5s steps(2, end) 2; }
#onair.dead {
  color: #4a4358;
  border-color: #4a4358;
  box-shadow: none;
  animation: none;
}
@keyframes signPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,51,85,.55), inset 0 0 14px rgba(255,51,85,.3); }
  50%      { box-shadow: 0 0 34px rgba(255,51,85,.8),  inset 0 0 20px rgba(255,51,85,.45); }
}
@keyframes signFlicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

.hud-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.strikes { display: flex; gap: 5px; }
.strike {
  width: 15px; height: 15px;
  border-radius: 4px;
  border: 2px solid var(--neon-dim);
  transform: rotate(45deg);
  transition: background .2s, box-shadow .2s;
}
.strike.used {
  background: var(--neon);
  border-color: var(--neon);
  box-shadow: 0 0 10px rgba(255, 51, 85, .8);
}

/* hranica éteru pod HUD-om */
.ether-line {
  position: relative;
  z-index: 25;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--neon-dim) 0 14px, transparent 14px 26px);
  opacity: .55;
}

/* ---------- scéna ---------- */
.stage {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* kulisy štúdia — reálna fotka na výšku, kryje celú scénu */
.set { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }

.studio-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
}

/* prekrytie: tmavšie hore (za HUD) a jemne dole, aby biele bubliny vynikli,
   stred ostáva čistý — fotku dobre vidno */
.studio-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(11, 11, 18, .78) 0%,
    rgba(11, 11, 18, .34) 12%,
    rgba(11, 11, 18, .08) 30%,
    rgba(11, 11, 18, .08) 66%,
    rgba(11, 11, 18, .34) 100%);
}

.toast {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  font-family: var(--display);
  font-size: clamp(15px, 2.6vh, 21px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(11, 11, 18, .88);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
  max-width: 88%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.show { opacity: 1; }
.toast--bad  { color: var(--neon); border-color: var(--neon-dim); }
.toast--gold { color: var(--gold); border-color: var(--gold); }

/* ---------- slová ---------- */
.word {
  position: absolute;
  left: 0; top: 0;
  z-index: 10;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  min-height: 44px;
  background: var(--paper);
  color: var(--paper-ink);
  font-weight: 700;
  font-size: clamp(15px, 2.3vh, 19px);
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .35);
  cursor: pointer;
  touch-action: manipulation;
  will-change: transform;
}
.word--sponsor {
  background: var(--gold);
  box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 22px rgba(255, 198, 75, .55);
}
.word--sponsor::before { content: "★ "; }
.word.bleeped {
  background: var(--paper-ink);
  color: var(--neon);
  font-family: var(--display);
  letter-spacing: .14em;
  animation: pop .32s ease forwards;
}
.word.fault { animation: faultPop .34s ease forwards; }
@keyframes pop {
  40%  { transform: var(--t, none) scale(1.18); opacity: 1; }
  100% { transform: var(--t, none) scale(.55); opacity: 0; }
}
@keyframes faultPop {
  30% { transform: var(--t, none) scale(1.12) rotate(4deg); }
  100% { transform: var(--t, none) scale(.6) rotate(-10deg); opacity: 0; }
}

/* ---------- prekrytia ---------- */
.flash {
  position: absolute; inset: 0;
  background: var(--neon);
  opacity: 0;
  pointer-events: none;
  z-index: 45;
}
.flash.go { animation: flash .35s ease; }
@keyframes flash { 15% { opacity: .32; } 100% { opacity: 0; } }

#app.shake { animation: shake .3s ease; }
@keyframes shake {
  20% { transform: translate(-7px, 3px); }
  45% { transform: translate(6px, -4px); }
  70% { transform: translate(-4px, 2px); }
}

.overlay {
  position: absolute; inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(8, 8, 14, .82);
  backdrop-filter: blur(3px);
}
.overlay[hidden] { display: none; }
.overlay h2 {
  font-family: var(--display);
  font-size: clamp(30px, 6vh, 46px);
  letter-spacing: .1em;
  margin: 0;
}
#countdown {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
#count-num {
  font-family: var(--display);
  font-size: clamp(90px, 22vh, 180px);
  color: var(--paper);
  text-shadow: 0 0 40px rgba(255, 51, 85, .6);
}

/* ============================================================
   KONIEC HRY
   ============================================================ */
.over-sign {
  font-family: var(--display);
  color: var(--neon);
  font-size: clamp(38px, 9.5vw, 74px);
  letter-spacing: .06em;
  line-height: 1;
  margin: 0;
  animation: signFlicker .8s steps(2, end) 3;
}
.rank {
  color: var(--gold);
  font-family: var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(15px, 2.4vh, 20px);
  margin: 10px 0 2px;
}
.final-score {
  font-family: var(--display);
  font-size: clamp(60px, 13vh, 108px);
  line-height: 1;
  margin: 4px 0 2px;
}
.final-label { color: var(--muted); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }

.stats {
  display: flex;
  gap: 26px;
  margin: 22px 0 26px;
}
.stat { min-width: 72px; }
.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 3.6vh, 30px);
}
.stat span { color: var(--muted); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }

.over-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.new-best { color: var(--gold); font-weight: 700; margin: 0; }
.new-best[hidden] { display: none; }

/* ---------- prístupnosť: menej pohybu ---------- */
@media (prefers-reduced-motion: reduce) {
  #onair, .brand-sign, .over-sign { animation: none !important; }
  #app.shake { animation: none; }
  .word.bleeped, .word.fault { animation-duration: .01s; }
  .btn, #combo { transition: none; }
}
/* ---------- nízke obrazovky (malé/staré telefóny) ---------- */
/* stlačíme rozostupy na úvode, nech sa potvrdenie aj kredit vždy zmestia */
@media (max-height: 700px) {
  #screen-start h1.title { font-size: clamp(48px, 14vw, 84px); margin: 8px 0 2px; }
  #screen-start .tagline { margin: 0 0 10px; }
  #screen-start .howto { gap: 8px; margin-bottom: 10px; }
  #screen-start .agegate { margin: 0 0 10px; padding: 9px 13px; }
  #screen-start .best-note { margin-top: 10px; }
  #screen-start .credit { margin-top: 10px; }
  #screen-start .foot { position: static; margin-top: 10px; }
}