:root{
  --bg:#1f1f1f;--panel:#282828;--panel2:#333;--panel3:#3d3d3d;--text:#eee;--muted:#9a9a9a;
  --accent:#e5a00d;--accent2:#cc7b19;--danger:#e0524d;--radius:10px;--chw:300px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --font:Ubuntu,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;overflow:hidden}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button,.ch,.group,.prog,.tlabel,.player{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ch,.group,.tlabel,.controls{user-select:none;-webkit-user-select:none}
.app{height:100%;display:grid;grid-template-columns:var(--chw) 1fr;grid-template-rows:52px 1fr;grid-template-areas:"top top" "ch main"}
.top{grid-area:top;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--panel);border-bottom:1px solid #111}
.logo{height:34px}
.brand{font-weight:700;color:var(--accent);letter-spacing:1px}
.search{flex:1 1 0;min-width:0;max-width:420px}
.search input{width:100%;min-width:0;background:var(--panel2);border:1px solid #444;border-radius:20px;padding:7px 14px;outline:none}
.search input:focus{border-color:var(--accent)}
.clock{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.btn{background:var(--panel2);border:1px solid #444;border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap;min-height:38px}
.btn:hover{background:var(--panel3)}
.btn.icon{width:40px;padding:0;font-size:18px}
.btn.small{min-height:30px;padding:3px 9px}
.btn.primary{background:var(--accent);color:#111;border-color:var(--accent);font-weight:700}
.btn.active{border-color:var(--accent);color:var(--accent)}
.only-mobile{display:none}

/* channel list */
.channels{grid-area:ch;overflow-y:auto;background:var(--panel);border-right:1px solid #111;scrollbar-width:thin}
.group{position:sticky;top:0;background:#222;padding:6px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);cursor:pointer;z-index:2;border-bottom:1px solid #111}
.group::before{content:"▾ ";}
.group.collapsed::before{content:"▸ ";}
.ch{display:grid;grid-template-columns:24px 64px 1fr 40px;gap:8px;align-items:center;padding:8px 8px 8px 10px;cursor:pointer;border-left:3px solid transparent;min-height:64px}
.ch:hover{background:var(--panel2)}
.ch.active{background:var(--panel2);border-left-color:var(--accent)}
.ch .num{color:var(--muted);font-size:12px;text-align:right}
.ch img{width:64px;height:36px;object-fit:cover;border-radius:5px;background:#111}
.ch .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .now{font-size:12px;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .next{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .bar{height:3px;background:#444;border-radius:2px;margin-top:3px;overflow:hidden}
.ch .bar i{display:block;height:100%;background:var(--accent)}
.ch .fav{background:none;border:0;font-size:20px;color:#555;cursor:pointer;width:40px;height:40px;margin-right:-6px}
.ch .fav.on{color:var(--accent)}
.hidden{display:none!important}

/* player */
.main{grid-area:main;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.player{position:relative;background:#000;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.player:fullscreen{width:100%;height:100%}
.player:fullscreen video{height:100%}
.player.zoom video{object-fit:cover}
.overlay{position:absolute;left:24px;bottom:24px;display:flex;gap:14px;align-items:center;background:rgba(0,0,0,.65);padding:10px 16px;border-radius:var(--radius);opacity:0;transition:opacity .4s;pointer-events:none;max-width:70%;z-index:6}
.overlay.show{opacity:1}
.overlay img{height:48px;border-radius:6px}
.ovnum{color:var(--accent);font-weight:700;font-size:13px}
.ovname{font-weight:700;font-size:18px}
.ovtitle{color:#ddd;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spinner{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.35);color:#ddd;pointer-events:none;z-index:5}
.spinner.show{display:flex}
.spinner .buf{position:relative;width:104px;height:104px;display:flex;align-items:center;justify-content:center}
.spinner .buf img{width:72px;height:auto;max-height:72px;object-fit:contain;animation:bufPulse 1.6s ease-in-out infinite;filter:drop-shadow(0 2px 6px #000)}
.spinner .buf i{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.08);border-top-color:var(--accent);animation:spin 1.1s linear infinite}
.spinner #spinText{font-size:13px;color:#bbb;text-shadow:0 1px 3px #000}
.spinner .spin-ch{font-size:12px;color:rgba(255,255,255,.45);text-shadow:0 1px 3px #000}
@keyframes bufPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
@media (prefers-reduced-motion:reduce){.spinner .buf img,.spinner .buf i{animation:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.numpad{position:absolute;top:20px;right:24px;font-size:48px;font-weight:700;color:var(--accent);text-shadow:0 2px 8px #000;display:none;z-index:6}
.numpad.show{display:block}
.unmute{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;background:var(--accent);color:#111;border:0;border-radius:28px;padding:14px 26px;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 4px 18px #000;z-index:7;animation:unmutePulse 1.6s ease-in-out infinite}
@keyframes unmutePulse{0%,100%{box-shadow:0 4px 18px #000}50%{box-shadow:0 4px 18px #000,0 0 0 8px rgba(229,160,13,.25)}}
@media (prefers-reduced-motion:reduce){.unmute{animation:none}}
.unmute.show{display:block}
.toast{position:absolute;bottom:24px;right:24px;background:rgba(224,82,77,.9);padding:10px 16px;border-radius:8px;display:none;max-width:60%;z-index:7}
.toast.show{display:block}
.toast.info{background:rgba(40,40,40,.9)}
.controls{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border-top:1px solid #111;flex-wrap:wrap}
.controls input[type=range]{width:110px;accent-color:var(--accent)}
.nowbar{flex:1;min-width:120px;color:#ccc;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#btnLive.live{color:var(--danger);border-color:var(--danger)}

/* guide */
.guide{background:var(--panel);border-top:1px solid #111;max-height:45%;display:flex;flex-direction:column}
.guide-head{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;color:var(--muted);font-size:13px}
.grid-wrap{overflow:auto;flex:1;position:relative;scrollbar-width:thin}
.grid{position:relative;display:grid;grid-auto-rows:46px;min-width:max-content}
.grid .trow{display:contents}
.grid .tlabel{position:sticky;left:0;z-index:3;background:var(--panel);width:170px;display:flex;align-items:center;gap:6px;padding:0 8px;border-bottom:1px solid #1a1a1a;font-size:13px;cursor:pointer}
.grid .tlabel img{height:26px;border-radius:4px;flex:none}
.grid .tlabel span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid .tlabel.active{color:var(--accent)}
.grid .tcells{position:relative;border-bottom:1px solid #1a1a1a}
.grid .prog{position:absolute;top:5px;height:36px;background:var(--panel2);border:1px solid #222;border-radius:6px;padding:4px 8px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;line-height:1.2}
.grid .prog small{display:block;color:var(--muted);font-size:10px}
.grid .prog:hover{background:var(--panel3)}
.grid .prog.now{border-color:var(--accent)}
.grid .tscale{position:sticky;top:0;z-index:4;background:#222;height:26px;grid-column:1/-1;display:flex}
.grid .tscale .tl{position:sticky;left:0;width:170px;background:#222;z-index:5;flex:none}
.grid .tscale .ticks{position:relative;flex:1}
.grid .tick{position:absolute;top:0;height:26px;line-height:26px;font-size:11px;color:var(--muted);border-left:1px solid #333;padding-left:4px}
.grid .nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);z-index:2;pointer-events:none}

/* details */
.details{position:fixed;top:52px;right:0;bottom:0;width:360px;max-width:95vw;background:var(--panel);border-left:1px solid #111;padding:18px;overflow-y:auto;z-index:20;box-shadow:-6px 0 20px #000}
.details .close{position:absolute;top:10px;right:10px;z-index:1}
.chlist .err{padding:24px 16px;text-align:center;color:var(--muted);line-height:1.6}
.chlist .err .btn{display:block;margin:12px auto 0}
.details img{width:100%;max-height:220px;object-fit:cover;border-radius:var(--radius);background:#111;margin-bottom:12px}
.details img[src=""]{display:none}
.det-ch{color:var(--accent);font-size:13px;font-weight:700}
.details h2{font-size:20px;margin:6px 0}
.det-time{color:var(--muted);font-size:13px;margin-bottom:10px}
.details p{line-height:1.5;color:#ddd;margin-bottom:16px;white-space:pre-line}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10}
.scrim.show{display:block}

/* mobile */
@media (max-width:900px), (orientation:landscape) and (max-height:520px){
  .only-mobile{display:inline-block}
  .app{grid-template-columns:1fr;grid-template-rows:calc(52px + var(--sat)) 1fr;grid-template-areas:"top" "main"}
  .top{padding:var(--sat) calc(8px + var(--sar)) 0 calc(8px + var(--sal));gap:6px}
  .channels{position:fixed;top:calc(52px + var(--sat));left:0;bottom:0;width:min(85vw,340px);z-index:15;transform:translateX(-100%);transition:transform .25s;padding-bottom:var(--sab)}
  .channels.open{transform:none}
  .search{max-width:none;min-width:0;flex:1 1 auto}
  .search input{padding:8px 12px;font-size:16px}
  .brand{display:none}
  .logo{height:26px;flex:none}
  .clock{display:none}
  .controls{padding:6px calc(8px + var(--sar)) calc(6px + var(--sab)) calc(8px + var(--sal));gap:6px}
  .controls input[type=range]{display:none}
  .btn{min-height:44px;padding:6px 8px;font-size:14px}
  .btn.icon{width:44px}
  .btn.small{min-height:36px;min-width:36px}
  .group{padding:9px 12px}
  .ch{min-height:60px;padding:6px 8px 6px 10px}
  .ch .next{font-size:12px}
  .overlay{left:10px;bottom:10px;max-width:calc(100% - 20px);gap:10px;padding:8px 12px}
  .overlay img{height:36px}
  .ovname{font-size:15px}
  .ovtitle{font-size:12px}
  .ovnum{font-size:11px}
  .unmute{font-size:16px;padding:12px 22px;min-height:48px}
  .toast{left:10px;right:10px;bottom:10px;max-width:none;text-align:center;font-size:14px}
  .numpad{font-size:36px;top:10px;right:14px}
  .details{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;max-height:75vh;border-left:0;border-top:1px solid #111;border-radius:16px 16px 0 0;padding:26px 18px calc(18px + var(--sab))}
  .details::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#555}
  .details img{max-height:160px}
  .details .btn.primary{width:100%;min-height:48px}
  .guide{max-height:50%}
  .grid-wrap{min-height:0}
  .grid .tlabel,.grid .tscale .tl{width:110px}
  .grid .tlabel{padding:0 6px;font-size:12px}
  .grid .tlabel img{height:22px}
}
/* phone, portrait: video on top, channel list inline below */
@media (max-width:900px) and (orientation:portrait){
  .app{grid-template-rows:calc(52px + var(--sat)) auto minmax(0,1fr);grid-template-areas:"top" "main" "ch"}
  #btnDrawer{display:none}
  .channels{position:static;transform:none;width:auto;border-right:0;border-top:1px solid #111;transition:none}
  .main{overflow:visible}
  .player{flex:none;aspect-ratio:16/9;max-height:50vh;width:100%}
  .guide{max-height:40vh}
  .nowbar{order:10;flex-basis:100%;font-size:12px}
}
/* phone, landscape: fullscreen-like, header + controls float over the video and auto-hide */
@media (orientation:landscape) and (max-height:520px){
  .app{grid-template-rows:1fr;grid-template-areas:"main";position:relative}
  .top,.controls{position:absolute;left:0;right:0;z-index:16;border:0;opacity:0;pointer-events:none;transition:opacity .25s}
  .top{top:0;background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0));height:calc(52px + var(--sat))}
  .controls{bottom:0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75));flex-wrap:nowrap}
  .app.ui .top,.app.ui .controls{opacity:1;pointer-events:auto}
  .channels{top:0;padding-top:var(--sat);z-index:17;padding-left:var(--sal);width:min(60vw,340px)}
  .nowbar{order:0;flex:1 1 0;flex-basis:auto}
  .overlay{bottom:64px;left:calc(10px + var(--sal))}
  .toast{bottom:64px}
  .guide{position:relative;z-index:17;max-height:65%}
  .player{flex:1}
}
@media (max-width:600px){
  .brand{display:none}
}

/* fullscreen overlay: only in fullscreen, fades out after 5 s */
.fsbar{display:none;position:absolute;inset:0;flex-direction:column;justify-content:space-between;pointer-events:none;opacity:0;transition:opacity .3s;z-index:5}
.player.fs .fsbar{display:flex}
.player.fs.ui .fsbar{opacity:1}
.player.fs.ui .fsbar .fs-top,.player.fs.ui .fsbar .fs-bottom{pointer-events:auto}
.player.fs:not(.ui){cursor:none}
.player.fs .overlay,.player.fs .numpad{z-index:6}
.fs-top{display:flex;align-items:center;gap:14px;padding:calc(16px + var(--sat,0px)) calc(24px + var(--sar,0px)) 40px calc(24px + var(--sal,0px));background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}
.fs-top img{height:48px;border-radius:6px;background:#111}
.fs-top img[src=""]{display:none}
.fs-info{min-width:0;flex:1}
.fs-name{font-weight:700;font-size:20px;text-shadow:0 1px 4px #000}
.fs-title{color:#ddd;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px #000}
.fs-clock{color:#ddd;font-size:20px;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px #000}
.fs-bottom{display:flex;align-items:center;gap:10px;padding:40px calc(24px + var(--sar,0px)) calc(16px + var(--sab,0px)) calc(24px + var(--sal,0px));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.8))}
.fs-bottom .btn{background:rgba(40,40,40,.85);min-height:48px;font-size:16px}
.fs-bottom .btn.icon{width:48px;font-size:22px}
.fs-spacer{flex:1}
@media (max-width:600px){ .fs-top img{height:36px} .fs-name{font-size:16px} .fs-title{font-size:13px} .fs-clock{font-size:16px} .fs-bottom{gap:6px} .fs-bottom .btn{min-height:44px;padding:6px 8px} .fs-bottom .btn.icon{width:44px} }
/* PWA pseudo-fullscreen */
html.pfs,html.pfs body{overflow:hidden;height:100dvh}
.player.pfs{position:fixed;inset:0;z-index:50;background:#000;aspect-ratio:auto;max-height:none;height:100vh;height:100dvh;width:100vw;width:100dvw;flex:none}
.player.pfs video{width:100%;height:100%}

/* subtitles: size = browser default (~5% of video height) x S.subSize (default 110%, [ / ] keys, A-/A+ buttons; #subSizeStyle) */
video::cue{background:rgba(0,0,0,.6);color:#fff;font-family:var(--font);font-weight:500;line-height:1.3;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.8)}
video::cue(b){font-weight:700}
video::cue(i){font-style:italic}
video::-webkit-media-text-track-container{padding-bottom:calc(var(--sab) + 2%)} /* keep cues above the phone home-indicator */

/* retro CRT effect (T) – 1:1 a tvx "Vintage TV" WebGL shaderével (app.js CRT modul): a videó rejtve, a képet a canvas rajzolja a .player-en belül, így fullscreen/pseudo-fullscreen módban is működik */
.crt{display:none;position:absolute;pointer-events:none;z-index:4;background:#000}
.player.crt-on .crt{display:block}
.player.crt-on video{opacity:0}