/* ===== Székely Play — TV-párosítás (/kijelzo/) =====
   Az önálló oldalak CSS-e a pluginban van (a /play.css mintájára). Fibonacci méretek (px: 1, 3, 5, 8, 13, 21, 34, 55, 89,
   144, 233, 377, 610), mozgás csak opacity / transform, 233–610 ms, prefers-reduced-motion. A színek a lejátszó változói
   (--szoveg, --halvany, --buborek, --kiemel, --hatter), a QR mindig fekete fehéren.
   Nagy távolság: a QR a képernyő magasságának ~55 %-a (233–610 px), a kód 34–89 px. docs/PLAY-PAIR.md, 4. szakasz. */

:root {
  --par-qr: clamp(233px, 55vh, 610px);          /* a QR csempéje */
  --par-panel: calc(var(--par-qr) + 144px);     /* a panel szélessége */
}

[hidden] { display: none !important; }

/* Kioszk: a /kijelzo/-n nincs vissza a főoldalra és nincs megosztás */
body.tv #haza,
body.tv #haza + .elvalaszto,
body.tv #megosztGomb { display: none; }

/* --- Párosító panel: a vetítés mellett jobbra, addig látszik, amíg a telefon nem párosít --- */
.parositas {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 21px;
  width: var(--par-panel);
  padding: 34px;
  text-align: center;
  background: var(--buborek);
  border-left: 1px solid var(--halvany);
  animation: par-be 610ms cubic-bezier(.21, .55, .34, 1) both;
}

.parositas__qr {
  width: var(--par-qr);
  height: var(--par-qr);
  padding: 13px;
  border-radius: 21px;
  background: #fff;
}
.parositas__qr svg { display: block; width: 100%; height: 100%; }

.parositas__kod {
  font-size: clamp(34px, 7vh, 89px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: clamp(3px, 1vh, 8px);
  font-variant-numeric: tabular-nums;
  color: var(--szoveg);
}

.parositas__szoveg {
  max-width: var(--par-qr);
  font-size: clamp(21px, 3vh, 34px);
  line-height: 1.3;
  color: var(--szoveg);
  opacity: .89;
}
.parositas__szoveg b { font-weight: 700; color: var(--kiemel); }

/* A vetítés a panel mellett marad (nem takarja el): a színpad jobb széle a panel előtt ér véget. */
body.par-nyitva #szinpad { padding-right: calc(var(--par-panel) + 3vw); }

/* Párosítva, de még nincs beállítás: kis jelzés a sarokban */
.parositas-jelzes {
  position: fixed;
  left: 3vw; bottom: 3vh;
  z-index: 6;
  padding: 8px 21px;
  border-radius: 34px;
  font-size: clamp(13px, 2.2vh, 21px);
  color: var(--szoveg);
  background: var(--buborek);
  animation: par-be 610ms cubic-bezier(.21, .55, .34, 1) both;
}

@keyframes par-be {
  from { opacity: 0; transform: translateX(21px); }
  to   { opacity: 1; transform: none; }
}

/* --- Álló vagy keskeny képernyő: a panel alul fut, kisebb QR-ral --- */
@media (max-width: 986px), (orientation: portrait) {
  :root { --par-qr: clamp(144px, 34vw, 233px); }
  .parositas {
    top: auto; left: 0;
    width: auto;
    flex-direction: row;
    justify-content: center;
    padding: 21px;
    border-left: 0;
    border-top: 1px solid var(--halvany);
  }
  .parositas__kod { font-size: clamp(21px, 5vw, 55px); }
  .parositas__szoveg { max-width: 233px; font-size: clamp(13px, 2.6vw, 21px); }
  body.par-nyitva #szinpad { padding-right: 6vw; padding-bottom: calc(var(--par-qr) + 89px); }
}

/* --- P gomb / hosszú OK menü --- */
.tv-menu__hatter {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(0, 0, 0, .55);
}

.tv-menu {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: min(610px, 90vw);
  padding: 34px;
  border-radius: 21px;
  transform: translate(-50%, -50%);
  background: var(--hatter);
  color: var(--szoveg);
  border: 1px solid var(--halvany);
  box-shadow: 0 8px 34px rgba(0, 0, 0, .55);
}
.tv-menu__cim { font-size: clamp(21px, 4vh, 34px); line-height: 1.3; }
.tv-menu__info { font-size: clamp(13px, 3vh, 21px); color: var(--halvany); }
.tv-menu__gomb {
  min-height: 55px;
  padding: 8px 21px;
  border: 3px solid transparent;
  border-radius: 13px;
  font: inherit;
  font-size: clamp(21px, 3.4vh, 34px);
  text-align: left;
  color: var(--szoveg);
  background: var(--buborek);
  cursor: pointer;
}
.tv-menu__gomb:focus { outline: 0; border-color: var(--kiemel); }   /* távirányítón a fókusz a "kurzor" */
.tv-menu__gomb--veszely:focus { border-color: #ff8a80; }
.tv-menu__uzenet { min-height: 21px; font-size: clamp(13px, 3vh, 21px); color: var(--halvany); }

/* --- Üzenet a telefonról (docs/PLAY-PAIR.md, 18. szakasz) ---
   Fordított színpár (a háttér színe a szöveg, a szöveg színe a háttér): bármelyik témán és egyedi háttéren kontrasztos.
   "normal": nagy sáv a vetítés fölött, a vetítés alatta fut tovább; "teljes": az egész képernyőt betölti (vészüzenet).
   Mozgás csak opacity / transform, 377 ms be, 233 ms csere (a JS-ben). Betűméret: a hosszhoz igazodó három fokozat. */
.tv-uzenet {
  position: fixed;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--hatter);
  background: var(--szoveg);
  opacity: 0;
  transition: opacity 377ms cubic-bezier(.21, .55, .34, 1), transform 377ms cubic-bezier(.21, .55, .34, 1);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tv-uzenet.tv-uzenet--be { opacity: 1; transform: none; }

.tv-uzenet__cimke {
  font-size: clamp(13px, 2.2vh, 21px);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .66;
}
.tv-uzenet__szoveg {
  font-weight: 700;
  line-height: 1.3;
  white-space: pre-line;
}

.tv-uzenet--normal {
  top: 0; left: 0; right: 0;
  max-height: 89vh;
  padding: 21px 5vw 34px;
  border-bottom: 8px solid var(--kiemel);
  box-shadow: 0 8px 34px rgba(0, 0, 0, .34);
  transform: translateY(-34px);
  overflow: hidden;
}
.tv-uzenet--normal .tv-uzenet__szoveg { font-size: clamp(34px, 6.5vh, 89px); }
.tv-uzenet--normal.tv-uzenet--kozepes .tv-uzenet__szoveg { font-size: clamp(34px, 7vh, 89px); }
.tv-uzenet--normal.tv-uzenet--rovid .tv-uzenet__szoveg { font-size: clamp(55px, 9vh, 144px); }

.tv-uzenet--teljes {
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 55px 8vw;
  text-align: center;
  box-shadow: inset 0 0 0 13px var(--kiemel);
  transform: translateY(21px);
  overflow: hidden;
}
.tv-uzenet--teljes .tv-uzenet__szoveg { font-size: clamp(34px, 7.5vh, 89px); }
.tv-uzenet--teljes.tv-uzenet--kozepes .tv-uzenet__szoveg { font-size: clamp(55px, 10vh, 144px); }
.tv-uzenet--teljes.tv-uzenet--rovid .tv-uzenet__szoveg { font-size: clamp(89px, 15vh, 233px); }

/* A normál sáv alá tolja a vetítést: a body osztálya (JS) a sávot a folyamba teszi (flex-oszlop, a sáv elöl), a színpad a maradék helyet kapja.
   Eltűnéskor az osztály azonnal lekerül, a sáv a kiengedés (377 ms) alatt újra fölötte lebeg. */
body.tv-uzenet-sav { display: flex; flex-direction: column; }
body.tv-uzenet-sav #szinpad { flex: 1 1 0; height: auto; min-height: 0; }
body.tv-uzenet-sav .tv-uzenet--normal { position: relative; order: -1; flex: none; }

/* Álló vagy keskeny képernyő (telefonon próbált /kijelzo/): kisebb sáv-betű */
@media (max-width: 986px), (orientation: portrait) {
  .tv-uzenet--normal { padding: 13px 21px 21px; }
  .tv-uzenet--normal .tv-uzenet__szoveg { font-size: clamp(21px, 4.2vw, 34px); }
  .tv-uzenet--normal.tv-uzenet--kozepes .tv-uzenet__szoveg { font-size: clamp(21px, 5.5vw, 55px); }
  .tv-uzenet--normal.tv-uzenet--rovid .tv-uzenet__szoveg { font-size: clamp(34px, 8vw, 89px); }
  .tv-uzenet--teljes { padding: 34px 21px; }
  .tv-uzenet--teljes .tv-uzenet__szoveg { font-size: clamp(34px, 6.5vw, 89px); }
  .tv-uzenet--teljes.tv-uzenet--kozepes .tv-uzenet__szoveg { font-size: clamp(34px, 9vw, 144px); }
  .tv-uzenet--teljes.tv-uzenet--rovid .tv-uzenet__szoveg { font-size: clamp(55px, 13vw, 233px); }
}

/* --- A szünet kis jelzése (a lejátszó a body-ra teszi a "szunet" osztályt; billentyűzetes és telefonos szünetnél is) --- */
.tv-szunet {
  position: fixed;
  left: 3vw; bottom: 3vh;
  z-index: 8;
  display: none;
  align-items: baseline;
  gap: 8px;
  padding: 8px 21px;
  border-radius: 34px;
  font-size: clamp(21px, 3vh, 34px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--hatter);
  background: var(--szoveg);
  box-shadow: 0 3px 21px rgba(0, 0, 0, .34);
}
body.szunet .tv-szunet { display: flex; animation: par-szunet 377ms cubic-bezier(.21, .55, .34, 1) both; }
.tv-szunet__ido { font-size: .66em; font-weight: 400; opacity: .89; }
.tv-szunet__ido:empty { display: none; }
@keyframes par-szunet {
  from { opacity: 0; transform: translateY(13px); }
  to   { opacity: 1; transform: none; }
}

/* --- Pihenő (ütemezés): fekete képernyő. A TV-t böngészőből nem lehet kikapcsolni, ez csak fekete kép. A kis, fél-átlátszó jel beégés ellen
   óránként más helyre ugrik (a JS az óra szerinti --h0 … --h7 osztályt állítja; nincs inline stílus). Fibonacci méretek, 610 ms be- és kiúszás. --- */
.tv-pihenjo {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 11;
  background: #000;
  opacity: 0;
  transition: opacity 610ms cubic-bezier(.21, .55, .34, 1);
}
.tv-pihenjo--be { opacity: 1; }
.tv-pihenjo__jel {
  position: absolute;
  padding: 8px 21px;
  font-size: clamp(21px, 3vh, 34px);
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(244, 241, 234, .21);
}
.tv-pihenjo__jel--h0 { top: 8%;  left: 8%; }
.tv-pihenjo__jel--h1 { top: 21%; left: 55%; }
.tv-pihenjo__jel--h2 { top: 55%; left: 13%; }
.tv-pihenjo__jel--h3 { top: 34%; left: 34%; }
.tv-pihenjo__jel--h4 { top: 13%; left: 55%; }
.tv-pihenjo__jel--h5 { top: 55%; left: 55%; }
.tv-pihenjo__jel--h6 { top: 89%; left: 21%; }
.tv-pihenjo__jel--h7 { top: 89%; left: 55%; }
body.tv-pihen { cursor: none; }

@media (prefers-reduced-motion: reduce) {
  .tv-pihenjo { transition: none; }
  body.szunet .tv-szunet { animation: none; }
  .parositas, .parositas-jelzes { animation: none; }
  .tv-uzenet { transition: none; transform: none; }
}