/* Radio-D – nyilvános lejátszó, v4.4: „klasszikus csöves rádió” felület.
 * A rádiódoboz (dió) mindkét témában sötét; a lap háttere világos témában krém fal, sötétben tinta.
 * Betűk saját kiszolgálásból (fonts/, OFL), külső betűszolgáltatás nélkül. */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/big-shoulders-display-latin-700-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; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/big-shoulders-display-latin-ext-700-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: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/big-shoulders-display-latin-800-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; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/big-shoulders-display-latin-ext-800-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: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-sans-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; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-sans-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: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/instrument-sans-latin-600-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; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/instrument-sans-latin-ext-600-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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500-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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-ext-500-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; }

/* a varázsszem éke folyamatosan nyílik/zárul (ahol a böngésző ismeri; máshol ugrik) */
@property --nyilas { syntax: "<angle>"; inherits: true; initial-value: 120deg; }

:root {
  /* lap (témafüggő) */
  --bg: #ece3d3; --kartya: #f8f2e7; --kartya-aktiv: #fffaf0; --szoveg: #241a12; --halvany: #6b5a47; --vonal: #d6c8b1; --link: #8a4b0f; --aktiv-keret: #b07a1e;
  /* rádiódoboz (mindig sötét) */
  --doboz-szoveg: #f4ead8; --doboz-halvany: #c9b89c; --doboz-cimke: #e2c48c; --rez: #f0c46a; --rez-mely: #8a5a1c;
  --mutato: #b3261e; --tinta: #2b1a0c; --skala-feny: #ffefc6;
  --kijelzo: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --dekor: "Big Shoulders Display", "Avenir Next Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
  --test: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #17110d; --kartya: #211710; --kartya-aktiv: #3a2718; --szoveg: #f4ead8; --halvany: #a8977c; --vonal: #3b2a1d; --link: #f0c46a; --aktiv-keret: #f0c46a; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--szoveg); font: 16px/1.5 var(--test); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--link); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rez); outline-offset: 3px; border-radius: 6px; }

/* ---------------- fejléc ---------------- */
.fejlec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; width: 100%; max-width: 1180px; margin: 0 auto;
          padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--szoveg);
        font: 800 30px/1 var(--dekor); letter-spacing: .06em; text-transform: uppercase; }
.logo svg { width: 40px; height: 40px; }
.logo b { color: var(--link); font-weight: 800; }
.logo-kor, .logo-belso { fill: none; stroke: var(--link); stroke-width: 3; } .logo-belso { stroke-dasharray: 3 4; } .logo-pont { fill: var(--link); }
.szlogen { margin: 0; color: var(--halvany); font-size: 15px; }
.ugro { text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--vonal); color: var(--szoveg); }
@media (max-width: 640px) { .szlogen { display: none; } .logo { font-size: 26px; } .logo svg { width: 34px; height: 34px; } }

.elrendezes { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 6px max(12px, env(safe-area-inset-right)) 28px max(12px, env(safe-area-inset-left)); }

/* ---------------- a rádiódoboz ---------------- */
.lejatszo { color: var(--doboz-szoveg); border-radius: 30px; padding: 18px;
  background: repeating-linear-gradient(93deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 11px), linear-gradient(180deg, #5a3520, #2f1a0e);
  box-shadow: 0 26px 50px rgba(30, 15, 5, .45), inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -6px 0 rgba(0, 0, 0, .35); }
@media (max-width: 560px) { .lejatszo { border-radius: 22px; padding: 12px; } }

/* hangolóskála */
.skala-keret { display: flex; align-items: stretch; gap: 6px; padding: 8px; border-radius: 16px; background: #120c08; box-shadow: inset 0 3px 10px rgba(0, 0, 0, .8); }
.skala-lep { flex: none; width: 44px; border: 0; border-radius: 10px; background: #2a1c12; color: var(--doboz-cimke); cursor: pointer; display: grid; place-items: center; }
.skala-lep:hover { background: #3a2718; }
.skala-lep svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.skala { position: relative; flex: 1; min-width: 0; border-radius: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth;
  background: radial-gradient(ellipse at 50% 140%, var(--skala-feny) 0%, #f1cf94 45%, #c6a576 100%); box-shadow: inset 0 0 26px rgba(80, 40, 0, .35); }   /* v4.12: ~35%-kal vilagosabb (ugyanaz a szinvilag, 35% feherrel keverve) */
.skala::-webkit-scrollbar { display: none; }
.skala-sav { position: relative; display: grid; grid-template-columns: repeat(var(--db, 12), minmax(0, 1fr)); height: 176px; --oszlop: 160px;   /* v4.12: 46 px-es nevek; az oszlop a leghosszabb ket azonos soru nev (MADE IN HUNGARY, KLASSZIKUSOK) tavolsagabol */
  width: 100%; min-width: calc(var(--db, 12) * var(--oszlop, 78px)); }   /* elfér: kitölti; nem fér el: oszloponként --oszlop, görgethető */
.skala-sav::before { content: ""; position: absolute; left: 1.5%; right: 1.5%; top: 78px; height: 20px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(43, 26, 12, .6) 0 1px, transparent 1px 10px);
  border-top: 1px solid rgba(43, 26, 12, .5); border-bottom: 1px solid rgba(43, 26, 12, .5); }
.skala-gomb { position: relative; align-self: start; justify-self: center; margin-top: 2px; min-height: 66px; padding: 4px 6px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; color: var(--tinta); font: 700 46px/1 var(--dekor); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.skala-gomb:nth-of-type(even) { align-self: end; margin: 0 0 2px; }
.skala-gomb small { font: 500 10px/1.3 var(--kijelzo); letter-spacing: 0; opacity: .75; }
.skala-gomb:hover { color: #6e1209; }
.skala-gomb[aria-current="true"] { color: #6e1209; font-weight: 800; }
.mutato { position: absolute; top: 6px; bottom: 6px; left: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--mutato); pointer-events: none;
  box-shadow: 0 0 10px rgba(179, 38, 30, .8); transition: left .6s cubic-bezier(.3, .7, .2, 1); z-index: 1; }

/* doboz belseje */
.radio-test { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.hangszoro { flex: 1 1 540px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 26px; padding: 26px; border-radius: 18px;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 5px), #4a3a2c;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .6); }
.kezelo { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 22px; border-radius: 18px; background: #20160f; box-shadow: inset 0 3px 12px rgba(0, 0, 0, .6); }

/* borító: lemeztasak, mögüle kilóg a hanglemez (szól = forog) */
.lemez-tok { --m: 220px; position: relative; flex: none; width: calc(var(--m) * 1.27); height: var(--m); }
.lemez { position: absolute; right: 0; top: calc(var(--m) * .045); width: calc(var(--m) * .91); height: calc(var(--m) * .91); border-radius: 50%; display: grid; place-items: center;
  background: repeating-radial-gradient(circle, #141110 0 2px, #1f1a17 2px 4px); box-shadow: 0 6px 16px rgba(0, 0, 0, .6); }
.lemez::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 40deg, rgba(255, 255, 255, .07) 60deg, transparent 80deg 220deg, rgba(255, 255, 255, .05) 240deg, transparent 260deg); }
.lemez span { width: 35%; aspect-ratio: 1; border-radius: 50%; background: var(--mutato); color: #fbe9c8; display: grid; place-items: center; font: 700 12px/1 var(--dekor); letter-spacing: .1em; text-transform: uppercase; }
.lejatszo.szol .lemez { animation: forog 6s linear infinite; }
.borito-keret { position: absolute; left: 0; top: 0; width: var(--m); height: var(--m); border-radius: 6px; overflow: hidden; background: #2a1c12; box-shadow: 0 10px 24px rgba(0, 0, 0, .6); }
.borito-keret img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.borito-keret.van-kep img { opacity: 1; }
.borito-helyett { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; color: #fbf1dc; transition: opacity .35s;
  background: linear-gradient(150deg, hsl(var(--h, 30) 45% 32%), hsl(calc(var(--h, 30) + 24) 50% 17%)); }
.borito-keret.van-kep .borito-helyett { opacity: 0; }
.bh-betu { font: 800 calc(var(--m) * .44)/.85 var(--dekor); }
.bh-nev { font: 700 18px/1 var(--dekor); letter-spacing: .12em; text-transform: uppercase; }

.adatok { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.csatorna-nev { margin: 0; font: 800 40px/1 var(--dekor); letter-spacing: .05em; text-transform: uppercase; color: #fbf1dc; overflow-wrap: anywhere; }
.cimke { margin: 4px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--doboz-cimke); }
.cimke:empty { display: none; }
.cim { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600; color: #fff7e6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.eloado { margin: 0; font-size: 18px; color: #e8dcc6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* kezelőpanel: varázsszem – forgatógomb – csatornakijelző */
.kezelo-felso { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.jelzo { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.szem { --nyilas: 120deg; --zold: #4fae74; --feny: rgba(90, 200, 130, .35); width: 72px; height: 72px; border-radius: 50%; padding: 6px; background: #0b0806;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .9), 0 0 0 3px #6b4d2c; transition: --nyilas .5s ease; }
.szem i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(from calc(var(--nyilas) / -2), #0f1a13 0deg var(--nyilas), var(--zold) var(--nyilas) 360deg); box-shadow: 0 0 18px var(--feny); }
.szem i::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #0b0806; }
.jelzo-szoveg { font-size: 14px; font-weight: 600; color: var(--doboz-halvany); }
.jelzo[data-allapot="elo"] .szem { --nyilas: 12deg; --zold: #59e894; --feny: rgba(125, 255, 176, .7); }
.jelzo[data-allapot="elo"] .jelzo-szoveg { color: #7dffb0; }
.jelzo[data-allapot="visszahallgatas"] .szem { --nyilas: 60deg; --zold: #7ccf7a; --feny: rgba(160, 230, 140, .5); }
.jelzo[data-allapot="visszahallgatas"] .jelzo-szoveg { color: #c6f0a0; }
.jelzo[data-allapot="szunet"] .szem { --nyilas: 150deg; --zold: #3f7a52; --feny: rgba(90, 160, 110, .25); }
.jelzo[data-allapot="kapcsolodik"] .szem i { animation: kapcsolodik 1.2s ease-in-out infinite; }
.jelzo[data-allapot="technikai"] .szem { --nyilas: 100deg; --zold: #e9a640; --feny: rgba(255, 190, 90, .55); }
.jelzo[data-allapot="technikai"] .jelzo-szoveg { color: #ffc76b; }
.jelzo[data-allapot="hiba"] .szem i { background: #1c1714; box-shadow: none; }
.jelzo[data-allapot="hiba"] .jelzo-szoveg { color: #ff9f8f; }
@keyframes kapcsolodik { 50% { filter: brightness(.55); } }

/* a nagy gomb: recés forgatógomb sárgaréz sapkával. Minden réteg ABSZOLÚT a gomb közepéhez igazítva (v4.3-tól:
   a <button>-on belüli grid böngészőnként máshol tartotta a gyűrűt) – a töltésgyűrű koncentrikus (inset: -7px). */
.nagy-gomb { position: relative; flex: none; width: 128px; height: 128px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: repeating-conic-gradient(#4a3423 0 5deg, #2a1c12 5deg 10deg); box-shadow: 0 10px 22px rgba(0, 0, 0, .7);
  transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.nagy-gomb:active { transform: scale(.97) rotate(-6deg); }
.gomb-sapka { position: absolute; inset: 13%; border-radius: 50%; color: #2a1910;
  background: radial-gradient(circle at 35% 30%, #fff1c9, #e3ad4b 45%, var(--rez-mely) 100%); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .35); }
.nagy-gomb:hover .gomb-sapka { filter: brightness(1.06); }
.gomb-sapka svg { position: absolute; top: 50%; left: 50%; width: 42%; height: 42%; transform: translate(-50%, -50%); fill: currentColor; display: block; }
.gomb-sapka .ikon-play { transform: translate(-43%, -50%); }   /* optikai közép: a háromszög súlypontja balra esik */
.nagy-gomb .ikon-pause, .lejatszo.szol .nagy-gomb .ikon-play { display: none; }
.lejatszo.szol .nagy-gomb .ikon-pause { display: block; }
.porgo { position: absolute; inset: -7px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: conic-gradient(var(--rez) 0deg 110deg, transparent 110deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px)); mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px)); }
.lejatszo.tolt .porgo { opacity: 1; animation: forog .9s linear infinite; }
@keyframes forog { to { transform: rotate(360deg); } }

.kijelzo-doboz { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kijelzo { font: 500 24px/1 var(--kijelzo); color: var(--rez); padding: 12px 14px; border-radius: 8px; background: #0b0806; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .9); }
.kijelzo-cimke { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--doboz-halvany); }

/* zongorabillentyűk */
.billentyuk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 10px; background: #0b0806; }
.billentyu { min-height: 64px; border: 0; border-radius: 4px 4px 9px 9px; cursor: pointer; color: #2a1910; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; font-weight: 600; background: linear-gradient(180deg, #fbf3e2, #e4d6bb); box-shadow: 0 5px 0 #b9a582, 0 7px 10px rgba(0, 0, 0, .5);
  transition: transform .08s, box-shadow .08s; -webkit-tap-highlight-color: transparent; }
.billentyu svg { width: 20px; height: 20px; fill: currentColor; }
.billentyu svg .vonal { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.billentyu:active:not(:disabled), .billentyu[aria-pressed="true"] { transform: translateY(4px); box-shadow: 0 1px 0 #b9a582, 0 2px 4px rgba(0, 0, 0, .5); background: linear-gradient(180deg, #e9dcc0, #d2c19e); }
.billentyu:disabled { cursor: default; color: #3a352d; background: linear-gradient(180deg, #a59a86, #8c826f); box-shadow: 0 5px 0 #5a5246, 0 7px 10px rgba(0, 0, 0, .5); }
.ikon-nema, .billentyu[aria-pressed="true"] .ikon-hang { display: none; }
.billentyu[aria-pressed="true"] .ikon-nema { display: block; }

/* hangerő (iOS-en a készülék gombjai szabályoznak: ott nincs csúszka) */
.hangero { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--doboz-halvany); }
.hangero-cimke { letter-spacing: .12em; text-transform: uppercase; min-width: 72px; }
.hangero.nincs-csuszka { display: none; }
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 10px; margin: 0; border-radius: 6px; cursor: pointer;
  background: linear-gradient(to right, #e3ad4b 0 var(--v, 100%), #3b2a1d var(--v, 100%) 100%); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #2a1910;
  background: radial-gradient(circle at 35% 30%, #fff1c9, #d9a443 55%, var(--rez-mely)); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #2a1910; background: radial-gradient(circle at 35% 30%, #fff1c9, #d9a443 55%, var(--rez-mely)); }

/* idősáv (csak visszafelé tekerhető) */
.idosav { margin-top: 18px; padding: 14px 18px 12px; border-radius: 14px; background: #120c08; box-shadow: inset 0 3px 10px rgba(0, 0, 0, .8); }
.sav { position: relative; height: 26px; cursor: pointer; touch-action: none; }
.sav::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 10px; border-radius: 6px; background: #3b2a1d; }
.sav-kesz { position: absolute; left: 0; top: 8px; height: 10px; width: 0; border-radius: 6px; background: var(--rez); transition: width .25s linear; }
.sav-fej { position: absolute; top: 0; left: 0; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; border: 2px solid #2a1910; opacity: 0; transition: left .25s linear;
  background: radial-gradient(circle at 35% 30%, #fff1c9, #d9a443 55%, var(--rez-mely)); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.lejatszo.szol .sav-fej { opacity: 1; }
.sav.nem-tekerheto { cursor: default; }
.idok { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font: 500 14px/1.4 var(--kijelzo); color: var(--doboz-cimke); font-variant-numeric: tabular-nums; }
.idok-jegyzet { font: 400 13px/1.4 var(--test); color: #a8977c; text-align: center; }

.uzenet { margin: 12px 0 0; min-height: 1.5em; font-size: 14px; color: var(--doboz-halvany); text-align: center; }
.uzenet:empty { margin: 0; min-height: 0; }
.uzenet.figyel { color: #2a1406; background: #f3c76b; border-radius: 10px; padding: 8px 12px; }

/* ---------------- csatornakártyák ---------------- */
.csatornak { margin-top: 48px; min-width: 0; }
.csatornak-fej { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.csatornak h2 { margin: 0; font: 800 32px/1.1 var(--dekor); letter-spacing: .06em; text-transform: uppercase; }
.csatornak-fej p { margin: 0; color: var(--halvany); font-size: 15px; }
.csatorna-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.csatorna-lista li { min-width: 0; }
.csatorna { position: relative; width: 100%; min-height: 92px; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px; border-radius: 16px; cursor: pointer;
  background: var(--kartya); border: 2px solid var(--vonal); transition: border-color .15s, transform .1s; min-width: 0; }
.csatorna:hover { border-color: var(--link); }
.csatorna:active { transform: scale(.985); }
.csatorna[aria-current="true"] { border-color: var(--aktiv-keret); background: var(--kartya-aktiv); }
.cs-kep { position: relative; flex: none; width: 60px; height: 60px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; color: #fbf1dc;
  background: linear-gradient(150deg, hsl(var(--h, 30) 45% 32%), hsl(calc(var(--h, 30) + 24) 50% 17%)); font: 800 32px/1 var(--dekor); }
.cs-kep img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-szoveg { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cs-fej { display: flex; align-items: baseline; gap: 8px; }
.cs-szam { font: 500 12px/1 var(--kijelzo); color: var(--halvany); }
.cs-nev { font: 700 20px/1.1 var(--dekor); letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-elo { align-self: flex-start; margin: 3px 0 1px; padding: 2px 9px; border-radius: 10px; background: var(--mutato); color: #fff;
  font-size: 12.5px; font-weight: 600; line-height: 1.4; max-width: 100%; white-space: normal; }   /* v4.14: tördelődik, mindig teljesen olvasható */
.cs-elo[hidden] { display: none; }
.cs-most { display: block; font-size: 14px; color: var(--halvany); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hullam { display: none; flex: none; gap: 2px; align-items: flex-end; height: 16px; }
.hullam i { width: 3px; background: var(--link); border-radius: 1px; animation: hullam 1s ease-in-out infinite; }
.hullam i:nth-child(2) { animation-delay: -.3s; } .hullam i:nth-child(3) { animation-delay: -.6s; }
@keyframes hullam { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.csatorna.szol .hullam { display: flex; }

.lab { width: 100%; max-width: 1180px; margin: 0 auto; padding: 18px 16px max(28px, env(safe-area-inset-bottom)); font-size: 14px; color: var(--halvany); border-top: 1px solid var(--vonal); }
.lab p { margin: 4px 0; }
.lab-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; font-weight: 600; font-size: 15px; }
.lab-menu a { text-decoration: none; padding: 6px 2px; border-bottom: 1px solid transparent; }
.lab-menu a:hover { border-bottom-color: currentColor; }

/* ---------------- v4.9: Rólunk / Impresszum (párbeszédablak a rádiódoboz anyagából; a lejátszás közben szól tovább) ---------------- */
.lap-ablak { border: 0; padding: 0; background: none; color: var(--doboz-szoveg); width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.lap-ablak::backdrop { background: rgba(20, 10, 4, .62); backdrop-filter: blur(3px); }
.lap-ablak[open] { animation: lap-be .22s ease-out; }
@keyframes lap-be { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.lap-keret { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); border-radius: 26px; padding: 14px;
  background: repeating-linear-gradient(93deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 11px), linear-gradient(180deg, #5a3520, #2f1a0e);
  box-shadow: 0 30px 70px rgba(10, 4, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -6px 0 rgba(0, 0, 0, .35); }
.lap-fej { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 12px 10px; }
.lap-cim { margin: 0; font: 800 30px/1.05 var(--dekor); letter-spacing: .07em; text-transform: uppercase; color: var(--rez); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.lap-bezar { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--tinta);
  background: radial-gradient(circle at 35% 30%, #fff1c8, #e8b453 45%, #8a5a1c 100%); box-shadow: 0 3px 0 #4a2c0e, 0 6px 12px rgba(0, 0, 0, .45); }
.lap-bezar:active { transform: translateY(2px); box-shadow: 0 1px 0 #4a2c0e, 0 3px 8px rgba(0, 0, 0, .45); }
.lap-bezar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
/* a „papír”: a hangolóskála krémszíne, finom vonalazással; csak ez görgethető */
.lap-papir { overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; padding: 22px 24px 26px; color: #2b1a0c; font-size: 16.5px; line-height: 1.62;
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(138, 75, 15, .07) 27px 28px), radial-gradient(ellipse at 50% -20%, #fff6dc 0%, #f3e3bf 60%, #e9d3a6 100%);
  box-shadow: inset 0 0 0 1px rgba(80, 40, 0, .25), inset 0 0 30px rgba(120, 70, 10, .25); }
.lap-papir:focus { outline: none; }
.lap-papir p { margin: 0 0 1em; }
.lap-papir p:last-child { margin-bottom: 0; }
.lap-papir a { color: #8a4b0f; font-weight: 600; }
.lap-papir .lap-kep { float: left; width: 150px; height: 150px; object-fit: cover; margin: 4px 20px 10px 0; border-radius: 10px;
  border: 4px solid #c99a45; box-shadow: 0 0 0 1px #6b4214, 0 6px 14px rgba(60, 30, 0, .35); filter: sepia(.15); }
.lap-papir::after { content: ""; display: block; clear: both; }
/* impresszum: a régi rádiók adattáblája – címke ……… érték */
.lap-adatok { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; }
.lap-adatok dt { font: 500 13px/1.6 var(--kijelzo); letter-spacing: .06em; text-transform: uppercase; color: #6b4214; white-space: nowrap; display: flex; gap: 8px; }
.lap-adatok dt::after { content: ""; flex: 1; min-width: 24px; border-bottom: 2px dotted rgba(107, 66, 20, .45); transform: translateY(-.45em); }
.lap-adatok dd { margin: 0; font-weight: 600; }
.lap-adatok .lap-sor { grid-column: 1 / -1; }
.lap-adatok .lap-ures { grid-column: 1 / -1; height: 4px; }
.lap-betolt { color: #6b5a47; font-style: italic; }
@media (max-width: 560px) {
  .lap-keret { border-radius: 20px; padding: 10px; }
  .lap-cim { font-size: 26px; }
  .lap-papir { padding: 18px 16px 20px; font-size: 16px; }
  .lap-papir .lap-kep { float: none; display: block; margin: 0 auto 14px; }
  .lap-adatok { grid-template-columns: 1fr; gap: 2px 0; }
  .lap-adatok dt::after { display: none; }
  .lap-adatok dd { margin-bottom: 10px; }
}

/* ---------------- v4.10: a szám adatai a csatorna megjelenési beállítása szerint ----------------
 * Arányos méret: a px (admin) a --mz-px változóban; a hely szerinti egység (--mz-egyseg) és felső korlát (--mz-max) adja a
 * valódi méretet, így a régi, széles oldalra méretezett 25–35 px sem feszíti szét a dobozt. Egy sor = egy mező, levágva „…”-val;
 * a levágott sor koppintásra / Enterre kinyílik (aria-expanded). A helyköz arányos függőleges rés (--mz-koz). */
.mezok { display: flex; flex-direction: column; min-width: 0; width: 100%; --mz-egyseg: 1px; --mz-max: 34px; --mz-min: 12px; --mz-koz: .7px; }
.mz { display: block; max-width: 100%; font-family: var(--test); font-weight: 400; line-height: 1.22;
  font-size: clamp(var(--mz-min), calc(var(--mz-px, 18) * var(--mz-egyseg)), var(--mz-max));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz.mz-b { font-weight: 700; } .mz.mz-i { font-style: italic; } .mz.mz-u { text-decoration: underline; text-underline-offset: .15em; }
.mz[data-betu="szoveg"] { font-family: var(--test); }
.mz[data-betu="kijelzo"] { font-family: var(--kijelzo); }
.mz[data-betu="dekor"] { font-family: var(--dekor); letter-spacing: .03em; }
.mz[aria-expanded] { cursor: pointer; border-radius: 4px; }
.mz.nyitva { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.mz-koz { display: block; flex: none; height: calc(var(--mz-px, 0) * var(--mz-koz)); }
.adatok.van-mezok .cim, .adatok.van-mezok .eloado { display: none; }
.adatok .mezok { color: #fff7e6; }
.adatok .mezok .mz:not(.mz-b) { color: #ecdfc8; }

/* Legutóbb játszott (a hallott szám előtti 5) – a csatornakártyák anyagából */
.utolso { margin-top: 40px; min-width: 0; }
.utolso h2 { margin: 0; font: 800 32px/1.1 var(--dekor); letter-spacing: .06em; text-transform: uppercase; }
.utolso-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.ut-elem { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 12px; border-radius: 16px; background: var(--kartya); border: 2px solid var(--vonal); }
.ut-kep { width: 72px; height: 72px; }
.mezok-lista { flex: 1; --mz-egyseg: .85px; --mz-max: 22px; --mz-min: 13px; --mz-koz: .45px; color: var(--szoveg); }
.mezok-lista .mz:not(.mz-b) { color: var(--halvany); }
/* csatornakártya: kis méret; a sor két sorig törhet (a teljes adat a kártyára koppintva a lejátszón látszik) */
.mezok-kartya { --mz-egyseg: .62px; --mz-max: 16px; --mz-min: 12px; --mz-koz: .22px; color: var(--halvany); }
.mezok-kartya .mz { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.mezok-kartya .mz.mz-b { color: var(--szoveg); }

/* ---------------- v4.11: nyelvválasztó – hullámsáv-billentyűk (a régi rádiók sávváltó gombjai; a választott lenyomva marad) ---------------- */
.nyelv { display: inline-flex; gap: 3px; padding: 4px; border-radius: 10px; background: #2b1a0c; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); align-self: center; }
.nyelv-bill { min-width: 44px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 4px 4px 8px 8px; cursor: pointer; color: #2a1910;
  font: 600 14px/1 var(--kijelzo); letter-spacing: .08em; background: linear-gradient(180deg, #fbf3e2, #e4d6bb);
  box-shadow: 0 4px 0 #b9a582, 0 5px 8px rgba(0, 0, 0, .45); transform: translateY(-2px); transition: transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent; }
.nyelv-bill:hover { color: #6e1209; }
.nyelv-bill[aria-pressed="true"] { transform: translateY(2px); color: #6e1209; background: linear-gradient(180deg, #e9dcc0, #d2c19e);
  box-shadow: 0 1px 0 #b9a582, 0 1px 3px rgba(0, 0, 0, .5); cursor: default; }
.nyelv-bill:focus-visible { outline: 3px solid var(--rez); outline-offset: 2px; }

/* v4.11: a csatorna rövid leírása a lejátszón (a régi csatornaoldal szövege); legfeljebb 2 sor, a levágott kinyitható */
.cs-leiras { margin: -2px 0 2px; font: italic 400 15px/1.4 var(--test); color: #d9c9ab; max-width: 52ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-leiras.nyitva { display: block; -webkit-line-clamp: unset; overflow: visible; }
.cs-leiras[aria-expanded] { cursor: pointer; border-radius: 4px; }
.cs-leiras[aria-expanded="false"]::after { content: ""; }
.lap-papir .lap-megj { margin: 0 0 1em; padding: 8px 12px; border-radius: 8px; background: rgba(138, 75, 15, .1); color: #6b4214; font-size: 14.5px; font-style: italic; }

/* ---------------- keskeny kijelző ---------------- */
@media (max-width: 899px) {
  .radio-test { margin-top: 12px; gap: 12px; }
  .hangszoro { flex-direction: column; text-align: center; padding: 20px 16px; gap: 18px; }
  .adatok { flex: none; width: 100%; align-items: center; }
  .kezelo { padding: 16px; gap: 16px; }
}
@media (max-width: 560px) {
  /* telefonon egy oszlop, a fontos rész elöl: skála – borító és cím – idősáv – kezelők (a forgatógomb az első képernyőn) */
  .fejlec { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 8px; }
  .lejatszo { display: flex; flex-direction: column; gap: 10px; }
  .radio-test { display: contents; }
  .skala-keret { order: 1; } .hangszoro { order: 2; } .idosav { order: 3; } .kezelo { order: 4; } .uzenet { order: 5; }
  .hangszoro { padding: 16px 12px; gap: 12px; }
  .hangszoro, .kezelo { flex: none; }      /* oszlopban a flex-alap (540/340 px) magasságként hatna */
  .billentyu { min-height: 56px; }
  .skala-keret { padding: 6px; gap: 4px; }
  .skala-lep { width: 40px; }
  .skala-sav { height: 132px; --oszlop: 104px; }   /* v4.12: telefonon ugyanaz az arany kicsinyitve (30 px) */
  .skala-sav::before { top: 56px; }
  .skala-gomb { font-size: 30px; min-height: 48px; }
  .lemez-tok { --m: min(164px, 44vw); }
  .bh-nev { font-size: 15px; }
  .adatok { gap: 4px; }
  .csatorna-nev { font-size: 30px; }
  .cimke { margin-top: 2px; font-size: 12px; }
  .cim { font-size: 21px; }
  .eloado { font-size: 16px; }
  .nagy-gomb { width: 104px; height: 104px; }
  .szem { width: 58px; height: 58px; padding: 5px; }
  .kijelzo { font-size: 20px; padding: 10px; }
  .idosav { padding: 10px 14px 8px; margin-top: 0; }
  .uzenet { margin-top: 0; }
  .idok-jegyzet { display: none; }
  .csatornak { margin-top: 32px; }
  .csatornak h2 { font-size: 28px; }
  .csatorna { min-height: 80px; padding: 10px; gap: 12px; }
  .cs-kep { width: 54px; height: 54px; }
  .fejlec-gombok { gap: 6px; }
  .ugro { padding: 9px 14px; font-size: 14px; }
  .nyelv-bill { min-width: 40px; min-height: 38px; font-size: 13px; }
  .cs-leiras { font-size: 14px; }
  .adatok .mezok { --mz-egyseg: .8px; --mz-max: 26px; --mz-koz: .45px; }
  .utolso { margin-top: 28px; }
  .utolso h2 { font-size: 28px; }
  .ut-elem { padding: 10px; gap: 12px; }
  .ut-kep { width: 60px; height: 60px; }
  .mezok-lista { --mz-egyseg: .75px; --mz-max: 19px; --mz-koz: .35px; }
}
/* ---------------- PWA (v4.5): telepítés, iOS-útmutató, frissítési és hálózati jelzés ---------------- */
[hidden] { display: none !important; }
.fejlec-gombok { display: flex; flex-wrap: wrap; gap: 8px; }
.telepit { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: var(--kartya); min-height: 44px; }
.telepit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sav-jelzes { width: calc(100% - 24px); max-width: 1156px; margin: 0 auto 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 14px; padding: 10px 14px; border-radius: 14px; font-size: 15px; background: #f3c76b; color: #2a1406; box-shadow: 0 4px 14px rgba(30, 15, 5, .25); }
.sav-jelzes svg { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sav-gombok { display: flex; gap: 8px; }
.ios-tipp { flex-wrap: nowrap; } .ios-tipp > span:first-child { flex: 1; min-width: 0; }
.sav-gomb { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font-weight: 600; background: #2a1406; color: #fbf1dc; }
.sav-gomb.masodlagos { background: transparent; color: #2a1406; box-shadow: inset 0 0 0 2px #2a1406; }
.sav-bezar { width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: #2a1406; font-size: 24px; line-height: 1; }
.sav-bezar:hover { background: rgba(0, 0, 0, .08); }
@media (display-mode: standalone) {
  .fejlec { padding-top: max(14px, env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .skala { scroll-behavior: auto; } }