/* szinpad-runtime.css — réteges színpad runtime v0.19.1 (HUD-bőr + téma-pajzs, 2026-10-20 · claude/hud_bor_kanon_v1.md v1.1) · v0.18-u (runtime-utómunka: olvasható sáv, 2026-10-20) · v0.17 (HUD-váz v0.3 + pilot-viselkedés v0.4 + translate v0.5 + light v0.8 + hívó-gyűrű v0.15–v0.16 + kar-rig v0.17, 2026-10-19) */

.szr-root { position: relative; width: 100%; height: 100%; background: #12354E; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.szr-stage { position: absolute; overflow: hidden; contain: layout paint; }

/* díszlet-pár: mindkét plate bent van, az arc opacitással vált — a fény/árnyék váltás egyetlen compositor-művelet */
.szr-plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; will-change: opacity; }
.szr-plate-shadow { opacity: 0; transition: opacity .6s ease; }
.szr-stage.is-shadow .szr-plate-shadow { opacity: 1; }

.szr-layer { position: absolute; inset: 0; }
.szr-shadows { pointer-events: none; }
.szr-geo { pointer-events: none; }

/* sprite-burkoló: horgony = alsó-közép */
.szr-sprite { position: absolute; width: max-content; transform: translate(-50%, -100%); transform-origin: 50% 100%; }
.szr-sprite-img { display: block; width: auto; max-width: none; pointer-events: none; }
.szr-hit { position: absolute; inset: 0; cursor: pointer; }
.szr-sprite.is-swap { opacity: 0; transition: opacity .18s ease; }
.szr-sprite { transition: opacity .22s ease; }

/* figyelem-státusz: alvó (nincs osztály) / hívó — a hívás szaliencia, nem korlát */
@keyframes szr-hivo { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18) drop-shadow(0 0 6px rgba(255,235,180,.55)); } }
.szr-sprite.is-hivo .szr-sprite-img { animation: szr-hivo 2.4s ease-in-out infinite; }
/* v0.15–v0.16 (Csaba): hívó-gyűrű minden hívott tárgyon és hotspoton — világos vonal sötét szegéllyel, világos és sötét
   háttéren is látszik; a tágulás (--g0 → --g1) és a csúcs-opacitás (--gop) a mérettel fordítottan arányos (a runtime írja) */
.szr-hivo-gyuru { position: absolute; z-index: 5; pointer-events: none; border-radius: 50%; box-sizing: border-box; opacity: 0;
  border: 2px solid rgba(255, 240, 205, .95);
  box-shadow: 0 0 0 1.5px rgba(22, 14, 6, .5), inset 0 0 0 1.5px rgba(22, 14, 6, .35), 0 0 12px 2px rgba(255, 226, 160, .55);
  animation: szr-gyuru 2.4s ease-out infinite; }
@keyframes szr-gyuru { 0% { transform: scale(var(--g0, .72)); opacity: 0; } 18% { opacity: var(--gop, .95); } 70% { opacity: .35; }
  100% { transform: scale(var(--g1, 1.3)); opacity: 0; } }
.szr-geo .szr-hivo-gyuru { z-index: auto; }
@keyframes szr-nudge { 0% { transform: scale(1); } 35% { transform: scale(1.03); } 100% { transform: scale(1); } }
.szr-gesztus.is-nudge { animation: szr-nudge .32s ease-out; transform-origin: 50% 100%; }

/* v0.4 hordozó-verem (D-165): burkoló → gesztus → slot → test; minden szint egy transzform */
.szr-gesztus, .szr-slot { transform-origin: 50% 100%; }
.szr-test { position: relative; width: max-content; }
.szr-test > .szr-sprite-img { position: relative; z-index: 1; }
.szr-test > .szr-kep-b { position: absolute; left: 0; top: 0; z-index: 1; }
.szr-reteg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* v0.17 kar-rig (Mérleg): a tartó kép rejtve — a látványt a rétegek adják; a kép a méretet és a fény-motor árnyékát adja */
.szr-sprite.is-rig .szr-test > .szr-sprite-img { opacity: 0 !important; }
.szr-sprite-glow, .szr-sprite-sweep, .szr-sprite-sotet { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.szr-sprite-glow { opacity: 0; mix-blend-mode: screen; }
.szr-sprite-sotet { opacity: 0; background: rgb(18, 12, 6); }   /* v0.8: glow:oscillate — a belső fény alácsúszása */
.szr-sprite-sweep { overflow: hidden; mix-blend-mode: screen; }
.szr-sprite-sweep-sav { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; }
.szr-sprite-halo { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; z-index: 0; opacity: 0; pointer-events: none; }
.szr-feltar { position: absolute; overflow: hidden; z-index: 2; pointer-events: none; }
.szr-feltar-belso { position: absolute; }
.szr-feltar-kep { display: block; max-width: none; }
.szr-szikra { position: absolute; z-index: 4; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; pointer-events: none;
  background: #ffe2a8; box-shadow: 0 0 6px 2px rgba(255,190,110,.75); }
.szr-hit:focus-visible { outline: 2px solid #ffd15c; outline-offset: 2px; border-radius: 6px; }
.szr-tone-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.szr-felulet { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.szr-szint { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.szr-szint-viz { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(205,228,255,.55), rgba(150,190,235,.35)); transform: translateY(100%); }
.szr-szint-viz::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.85); box-shadow: 0 0 6px rgba(220,240,255,.9); }   /* a felszín */

/* hotspot-festés (D-169): a plate fölött, az árnyékok és a sprite-ok alatt */
.szr-paint { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.szr-paint-multiply { mix-blend-mode: multiply; }
.szr-paint-screen { mix-blend-mode: screen; }
/* D-A7: a mozgást a tanuló kapcsolója vezérli, nem az OS „kevesebb mozgás” jelzése (a v0 @media-blokkja kivezetve, v0.4.1) */
html[data-animacio="ki"] .szr-plate-shadow, html[data-animacio="ki"] .szr-sprite { transition: none; }

/* hotspot-polygonok: láthatatlanok, csak érintésre villannak; debugban körvonal */
.szr-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.szr-hot { fill: rgba(255,255,255,0); stroke: none; pointer-events: auto; cursor: pointer; transition: fill .25s ease; }
.szr-hot.is-hit { fill: rgba(255,240,200,.18); }
.szr-hot.is-hivo { animation: szr-hot-hivo 2.4s ease-in-out infinite; }
@keyframes szr-hot-hivo { 0%, 100% { fill: rgba(255,240,200,0); } 50% { fill: rgba(255,240,200,.10); } }
.szr-hot.is-debug { stroke: rgba(240,160,75,.7); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 3; }
.szr-cell { position: absolute; transform: translate(-50%,-50%); border: 1px dashed rgba(255,255,255,.45); color: rgba(255,255,255,.6); font: 10px/1 sans-serif; padding: 2px; box-sizing: border-box; }

/* HUD — v0.3 váz (szinlap_hud_kanon_v1 · D-170, D-170 rev.) · v0.19 bőr (claude/hud_bor_kanon_v1.md v1.1, Csaba 10-20)
   STACKED: a sáv a gyökér teteje, a jelenet alatta tapad; a runtime a lemért magasságot vonja le a letterbox előtt.
   A bőr EGYSÉGES keret: a honlap színei, rendszer-font, világonként nem változik — a HUD a racionális tanító réteg, nem az
   élmény része. Minden szín egy helyen, a tokenekben. A sávtipográfia és a sorszám a v0.18-u-é (D-170 rev.), változatlan. */
.szr-root {
  --hud-hatter: #12354E;            /* a honlap háttere — a letterbox is ez */
  --hud-szoveg: #f8ffdb;            /* 12,4:1 */
  --hud-kiemel: #f7e7b5;            /* a honlap kiemelő színe (rámutatás, kiemelt állapot) — 10,4:1 */
  --hud-halvany: #9caea3;           /* nyugalmi felirat, másodlagos szöveg — 5,5:1 */
  --hud-inaktiv: #7a908d;           /* zárt elem — 3,8:1 (ikon-küszöb 3:1) */
  --hud-maszk-inaktiv: #6e8686;     /* a nem aktív arc a maszk-páron — 3,3:1 */
  --hud-vonal: rgba(248, 255, 219, .16);
  --hud-szegely-sotet: #0b2233;     /* a hívó-gyűrű sötét szegélye */
  --szr-sav-fs: 16px; --szr-sav-lh: 1.5; --szr-sor: calc(var(--szr-sav-fs) * var(--szr-sav-lh));
  --szr-pad: 8px; --szr-gap: 4px; --szr-ikon: 44px; --szr-maszk-w: 56px;
  --szr-sav-sorok: 3;                                  /* tartalék — a runtime méri és felülírja (savSorok, D-170 rev.) */
  --szr-hud-belso: calc(var(--szr-sor) * var(--szr-sav-sorok));
  background: var(--hud-hatter);
}
/* v0.18-u (Csaba, 10-20): a sávszöveg betűmérete soha nem csökken — idősebb olvasók. Telefonon 16 px, ahol bőven van hely
   18 / 20 px; sorköz 1,5 (WCAG 1.4.8 / 1.4.12); sorhossz legfeljebb ~66 karakter (WCAG 1.4.8: ≤ 80). */
@media (min-width: 600px) and (min-height: 500px) { .szr-root { --szr-sav-fs: 18px; } }
@media (min-width: 1100px) and (min-height: 700px) { .szr-root { --szr-sav-fs: 20px; } }
.szr-root.is-allo {
  --szr-sav-sorok: 4;
  --szr-hud-belso: calc(var(--szr-ikon) + var(--szr-gap) + var(--szr-sor) * var(--szr-sav-sorok));
}
.szr-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 900; box-sizing: border-box;
  height: calc(env(safe-area-inset-top, 0px) + var(--szr-pad) * 2 + var(--szr-hud-belso));
  padding: calc(env(safe-area-inset-top, 0px) + var(--szr-pad)) calc(env(safe-area-inset-right, 0px) + 12px) var(--szr-pad) calc(env(safe-area-inset-left, 0px) + 12px);
  display: grid; column-gap: var(--szr-gap); row-gap: var(--szr-gap); align-items: center;
  grid-template-columns: var(--szr-ikon) var(--szr-ikon) var(--szr-ikon) minmax(0, 1fr) var(--szr-ikon) var(--szr-ikon) var(--szr-maszk-w);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "vissza elozo kovetkezo sav beall musor maszk";
  background: var(--hud-hatter); border-bottom: 1px solid var(--hud-vonal); color: var(--hud-szoveg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; }
.szr-root.is-allo .szr-hud { grid-template-rows: var(--szr-ikon) minmax(0, 1fr);
  grid-template-areas: "vissza elozo kovetkezo . beall musor maszk" "sav sav sav sav sav sav sav"; }
.szr-hud > .szr-hang { display: none; }   /* a hang-adapter gombja: rejtve, a beállítás-panel hang-sora kapcsolja (D-187) */

/* sáv-szöveg: a sorszámot a runtime méri; a betű nem csökken (D-170 rev.); ami így sem fér ki, csonka + olvasó-lap (D-183) */
.szr-sav { grid-area: sav; align-self: stretch; overflow: hidden; display: flex; min-width: 0; padding: 0 0 0 10px; }
.szr-root.is-allo .szr-sav { padding-left: 4px; }
/* a szövegtömb és a lenyitó jel: a jel a szöveg jobb alsó sarkánál ül (nagy képernyőn sem vándorol a sáv túlsó végére) */
.szr-sav-test { position: relative; box-sizing: border-box; flex: 1 1 auto; min-width: 0; padding-right: 30px;
  max-width: calc(66 * 1ch + 30px); font-size: var(--szr-sav-fs); display: flex; align-items: center; }
.szr-root.is-allo .szr-sav-test { align-items: flex-start; }
.szr-sav-szoveg { margin: 0; max-width: 66ch; font-size: var(--szr-sav-fs); line-height: var(--szr-sav-lh); color: var(--hud-szoveg);
  transition: opacity .2s ease, transform .2s ease; }
.szr-sav-szoveg.is-ki { opacity: 0; transform: translateY(-3px); }
.szr-sav.is-nyugalom .szr-sav-szoveg { color: var(--hud-halvany); font-size: calc(var(--szr-sav-fs) * 1.1); font-weight: 600; letter-spacing: .02em; }
.szr-sav-szoveg[data-fajta="zaro"] { font-style: italic; }
/* D-183: a lenyitó jel — csak ha van több (korábbi mondat vagy csonka szöveg); az egész sáv érinthető */
.szr-sav.is-tobb { cursor: pointer; }
.szr-sav-gomb { position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; border: 0; padding: 0; border-radius: 8px;
  background: var(--hud-hatter); color: var(--hud-halvany); display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; -webkit-tap-highlight-color: transparent; }
.szr-sav.is-tobb .szr-sav-gomb { opacity: 1; pointer-events: auto; }
.szr-sav.is-csonka .szr-sav-gomb { color: var(--hud-szoveg); }
.szr-sav.is-nyitva .szr-sav-gomb { transform: rotate(180deg); }

/* ikonok — egy készlet (24 px rács, 1,75 vonal); alapban a szöveg színe, rámutatásra és kiemelve a kiemelő szín */
.szr-ikon { position: relative; width: var(--szr-ikon); height: var(--szr-ikon); border: 0; padding: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; background: transparent; color: var(--hud-szoveg);
  cursor: pointer; text-decoration: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.szr-ikon svg { display: block; }
.szr-vissza { grid-area: vissza; } .szr-elozo { grid-area: elozo; } .szr-kovetkezo { grid-area: kovetkezo; }
.szr-beall { grid-area: beall; } .szr-musorfuzet { grid-area: musor; } .szr-mask { grid-area: maszk; width: var(--szr-maszk-w); }
@media (hover: hover) { .szr-ikon:hover { color: var(--hud-kiemel); } }
.szr-ikon:focus-visible, .szr-sav-gomb:focus-visible, .szr-beall-sor:focus-visible { outline: 2px solid var(--hud-szoveg); outline-offset: 2px; }
.szr-ikon[data-allapot="rejtett"] { visibility: hidden; pointer-events: none; }     /* a hely foglalt — a rács nem ugrik */
.szr-ikon[data-allapot="zarva"] { color: var(--hud-inaktiv); cursor: default; }
.szr-beall[aria-expanded="true"] { color: var(--hud-kiemel); }

/* maszk-pár: az aktív arc a szöveg színével, enyhe kitöltéssel; a másik halvány (állandó állapot-jelző) */
.szr-mask .szr-maszk-k, .szr-mask .szr-maszk-t { transition: stroke .3s ease; }
.szr-mask .szr-maszk-arc { transition: fill .3s ease; }
.szr-mask .szr-maszk-k { stroke: currentColor; }
.szr-mask .szr-maszk-k .szr-maszk-arc { fill: rgba(248, 255, 219, .16); }
.szr-mask .szr-maszk-t { stroke: var(--hud-maszk-inaktiv); }
.szr-mask .szr-maszk-t .szr-maszk-arc { fill: none; }
.szr-root.is-shadow .szr-mask .szr-maszk-k { stroke: var(--hud-maszk-inaktiv); }
.szr-root.is-shadow .szr-mask .szr-maszk-k .szr-maszk-arc { fill: none; }
.szr-root.is-shadow .szr-mask .szr-maszk-t { stroke: currentColor; }
.szr-root.is-shadow .szr-mask .szr-maszk-t .szr-maszk-arc { fill: rgba(248, 255, 219, .16); }

/* ikon-állapotok — a jelenet hívó-nyelve a kereten is: táguló gyűrű, világos vonal sötét szegéllyel (D-172 v0.16).
   hívó (maszk-hívás): a gyűrű a válaszig ismétel · kiemelt (Műsorfüzet, Következő — D-182): két hullám, utána csendes pont */
.szr-ikon[data-allapot="hivo"], .szr-ikon[data-allapot="kiemelt"] { color: var(--hud-kiemel); }
.szr-ikon[data-allapot="hivo"]::before, .szr-ikon[data-allapot="kiemelt"]::before { content: ""; position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px;
  border-radius: 50%; border: 1.5px solid var(--hud-kiemel); box-shadow: 0 0 0 1.5px var(--hud-szegely-sotet); opacity: 0; pointer-events: none;
  animation: szr-ikon-gyuru 2.4s ease-out infinite; }
.szr-ikon[data-allapot="kiemelt"]::before { animation-iteration-count: 2; }
@keyframes szr-ikon-gyuru { 0% { transform: scale(.78); opacity: 0; } 18% { opacity: .95; } 70% { opacity: .35; } 100% { transform: scale(1.18); opacity: 0; } }
.szr-ikon[data-allapot="kiemelt"]::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--hud-kiemel); box-shadow: 0 0 0 2px var(--hud-hatter); pointer-events: none; }
html[data-animacio="ki"] .szr-ikon[data-allapot="hivo"]::before { animation: none; opacity: .85; transform: none; }
html[data-animacio="ki"] .szr-ikon[data-allapot="kiemelt"]::before { animation: none; opacity: 0; }   /* kiemelve elég a pont */
html[data-animacio="ki"] .szr-sav-szoveg, html[data-animacio="ki"] .szr-mask *, html[data-animacio="ki"] .szr-sav-gomb,
html[data-animacio="ki"] .szr-beall-gomb { transition: none; }

/* beállítás-panel (D-186, D-187): hang · animáció · teljes képernyő — kapcsoló-sorok, a beállítás-gomb alatt */
.szr-beall-panel { position: absolute; top: calc(100% + 2px);
  right: calc(env(safe-area-inset-right, 0px) + 12px + var(--szr-maszk-w) + var(--szr-ikon) + var(--szr-gap) * 2);
  z-index: 945; min-width: 236px; padding: 6px; border-radius: 12px; box-sizing: border-box;
  background: var(--hud-hatter); border: 1px solid var(--hud-vonal); box-shadow: 0 8px 24px rgba(5, 18, 28, .45); }
.szr-root.is-allo .szr-beall-panel { top: calc(env(safe-area-inset-top, 0px) + var(--szr-pad) + var(--szr-ikon) + 6px);
  right: calc(env(safe-area-inset-right, 0px) + 12px); }   /* állóban a jobb ikoncsoport alatt — 320 px-en is a képen belül */
.szr-beall-panel[hidden] { display: none; }
.szr-beall-sor { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--hud-szoveg); font: inherit; font-size: 16px; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.szr-beall-sor[hidden] { display: none; }
@media (hover: hover) { .szr-beall-sor:hover { background: rgba(248, 255, 219, .06); } }
.szr-beall-ikon { position: relative; flex: none; width: 22px; height: 22px; }
.szr-beall-ikon svg { position: absolute; left: 0; top: 0; }
.szr-beall-cimke { flex: 1 1 auto; }
.szr-beall-sor .szr-ikon-athuz { visibility: hidden; }
.szr-beall-sor[aria-checked="false"] .szr-ikon-athuz { visibility: visible; }
.szr-beall-sor[aria-checked="false"] .szr-ikon-be { visibility: hidden; }
.szr-beall-sor[aria-checked="false"] .szr-beall-ikon, .szr-beall-sor[aria-checked="false"] .szr-beall-cimke { color: var(--hud-halvany); }
/* kapcsoló-jel: sín + gomb; bekapcsolva a kiemelő szín */
.szr-beall-jel { position: relative; flex: none; width: 40px; height: 22px; border-radius: 11px; box-sizing: border-box;
  border: 1.5px solid var(--hud-halvany); }
.szr-beall-gomb { position: absolute; left: 3px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--hud-halvany);
  transition: transform .2s ease, background .2s ease; }
.szr-beall-sor[aria-checked="true"] .szr-beall-jel { border-color: var(--hud-kiemel); background: rgba(247, 231, 181, .18); }
.szr-beall-sor[aria-checked="true"] .szr-beall-gomb { transform: translateX(18px); background: var(--hud-kiemel); }

/* olvasó-lap (D-183) — a sáv alatt, a jelenet fölött; a teljes mondat és a látogatás korábbi mondatai */
.szr-olvaso { position: absolute; left: 0; right: 0; z-index: 940; box-sizing: border-box; max-height: 70%; overflow-y: auto;
  padding: 6px calc(env(safe-area-inset-right, 0px) + 12px) 18px calc(env(safe-area-inset-left, 0px) + 16px);
  background: var(--hud-hatter); border-bottom: 1px solid var(--hud-vonal); box-shadow: 0 12px 28px rgba(5, 18, 28, .5);
  color: var(--hud-szoveg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  animation: szr-olvaso-be .2s ease-out; }
.szr-olvaso[hidden] { display: none; }
@keyframes szr-olvaso-be { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
html[data-animacio="ki"] .szr-olvaso { animation: none; }
.szr-olvaso-fej { display: flex; align-items: center; justify-content: space-between; }
.szr-olvaso-cim { font-size: 14px; letter-spacing: .04em; color: var(--hud-halvany); }
.szr-olvaso-most { margin: 2px 0 0; max-width: 62ch; font-size: calc(var(--szr-sav-fs) * 1.15); line-height: var(--szr-sav-lh); }
.szr-olvaso-most.is-nyugalom { color: var(--hud-halvany); font-weight: 600; }
.szr-olvaso-alcim { margin: 18px 0 6px; font-size: 14px; letter-spacing: .04em; color: var(--hud-halvany); }
.szr-olvaso-lista { margin: 0; padding: 0; list-style: none; max-width: 66ch; }
.szr-olvaso-lista li { padding: 8px 0; border-top: 1px solid var(--hud-vonal); font-size: var(--szr-sav-fs); line-height: var(--szr-sav-lh); color: var(--hud-halvany); }

/* v0.19.1 — téma-pajzs (élő oldal): a színpad a téma tartalom-dobozában él, és a téma `.entry-content p`, `ul`, `button`,
   `a:hover` típusú szabályai (pl. a bekezdés alsó margója) a HUD elemeire is ráesnének — a sáv szövege így függőlegesen
   elcsúszott (a margó a középre igazítást is eltolja, a mérés viszont nem látja). Az #szinpad-stage hatókör a téma
   osztály+elem szabályainál erősebb; csak a téma által jellemzően állított tulajdonságokat rögzíti. */
#szinpad-stage .szr-sav-szoveg, #szinpad-stage .szr-olvaso p, #szinpad-stage .szr-olvaso ul, #szinpad-stage .szr-olvaso li {
  margin: 0; padding: 0; text-indent: 0; text-transform: none; letter-spacing: normal; word-spacing: normal; font-family: inherit; }
#szinpad-stage .szr-sav-szoveg { font-size: var(--szr-sav-fs); line-height: var(--szr-sav-lh); font-weight: 400; }
#szinpad-stage .szr-sav.is-nyugalom .szr-sav-szoveg { font-size: calc(var(--szr-sav-fs) * 1.1); font-weight: 600; letter-spacing: .02em; }
#szinpad-stage .szr-olvaso-most { margin-top: 2px; font-size: calc(var(--szr-sav-fs) * 1.15); line-height: var(--szr-sav-lh); }
#szinpad-stage .szr-olvaso-lista { list-style: none; }
#szinpad-stage .szr-olvaso-lista li { padding: 8px 0; font-size: var(--szr-sav-fs); line-height: var(--szr-sav-lh); }
#szinpad-stage .szr-olvaso-lista li::before, #szinpad-stage .szr-olvaso-lista li::marker { content: none; }
#szinpad-stage .szr-ikon, #szinpad-stage .szr-sav-gomb, #szinpad-stage .szr-beall-sor {
  margin: 0; box-shadow: none; text-transform: none; letter-spacing: normal; text-decoration: none; min-width: 0; }
#szinpad-stage .szr-ikon, #szinpad-stage .szr-ikon:hover, #szinpad-stage .szr-ikon:focus, #szinpad-stage .szr-ikon:active { background: transparent; }
#szinpad-stage .szr-sav-gomb, #szinpad-stage .szr-sav-gomb:hover, #szinpad-stage .szr-sav-gomb:focus { background: var(--hud-hatter); }
#szinpad-stage .szr-beall-sor, #szinpad-stage .szr-beall-sor:focus, #szinpad-stage .szr-beall-sor:active { background: transparent; color: var(--hud-szoveg); }
@media (hover: hover) {
  #szinpad-stage .szr-ikon:hover { color: var(--hud-kiemel); }
  #szinpad-stage .szr-beall-sor:hover { background: rgba(248, 255, 219, .06); }
}
#szinpad-stage .szr-ikon:not(:hover)[data-allapot="alap"] { color: var(--hud-szoveg); }
#szinpad-stage .szr-ikon[data-allapot="zarva"] { color: var(--hud-inaktiv); }
#szinpad-stage .szr-beall[aria-expanded="true"] { color: var(--hud-kiemel); }

/* debug */
.szr-debug { position: fixed; left: 8px; bottom: 8px; z-index: 960;   /* v0.3: a .szr-hud-ban él (hang-adapter), de a nézet alján */
  background: rgba(0,0,0,.6); color: #ddd; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; padding: 6px 8px; border-radius: 4px; max-width: calc(100% - 16px); }
.szr-debug-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.szr-debug-btn { font: inherit; font-size: 11px; background: #333; color: #eee; border: 1px solid #555; border-radius: 3px; padding: 3px 7px; cursor: pointer; }

/* előnézet-oldal */
html.szr-preview, .szr-preview body { margin: 0; height: 100%; background: #12354E; }
.szr-preview #szinpad-stage { position: fixed; inset: 0; }

/* küszöb — a hang-unlock gesztusa (előnézet; a navigációs szál felülírhatja) */
.szr-kuszob { position: absolute; inset: 0; z-index: 950; border: 0; cursor: pointer; background: rgba(18,53,78,.72); color: #f8ffdb;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: opacity .4s ease;
  font: 500 22px/1.2 system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.szr-kuszob-al { font-size: 13px; opacity: .7; letter-spacing: .04em; }
.szr-kuszob.is-ki { opacity: 0; pointer-events: none; }
.szr-kuszob:focus-visible { outline: 2px solid #f8ffdb; outline-offset: -6px; }

/* hang-kapcsoló: a hang-adapter a .szr-hud végére fűzi — v0.19: rejtve, a beállítás-panel hang-sora kapcsolja (D-187) */
.szr-debug-hang { color: #9fd3a8; }
html[data-animacio="ki"] .szr-kuszob { transition: none; }

/* animáció-kapcsoló: v0.19 — a beállítás-panel animáció-sora (AranyAnimacio.beallit, D-187); a HUD-ban nincs külön gomb */
html[data-animacio="ki"] .szr-sprite.is-hivo .szr-sprite-img, html[data-animacio="ki"] .szr-gesztus.is-nudge { animation: none; }
html[data-animacio="ki"] .szr-hivo-gyuru { animation: none; opacity: .85; }

/* v0.5 — út (translate, D-174): az árnyék-doboz a tárggyal együtt mozog; a tether-vonal (vágott réteg nélkül) */
.szr-arnyek-ut { position: absolute; inset: 0; pointer-events: none; }
.szr-tether { position: absolute; left: 0; top: 0; width: 1px; height: 1.5px; background: rgba(240, 236, 226, .85);
  transform-origin: 0 50%; pointer-events: none; opacity: 0; z-index: 99; }