:root {
  --bg: #0b0b14;
  --bg2: #13131e;
  --bg3: #1a1a28;
  --bg4: #212134;
  --gold: #c9a84c;
  --gold2: #e8c56a;
  --gold3: rgba(201,168,76,0.15);
  --gold4: rgba(201,168,76,0.06);
  --silver: #a0a0b8;
  --white: #f0f0f8;
  --dimmed: rgba(240,240,248,0.5);
  --muted: rgba(240,240,248,0.25);
  --border: rgba(255,255,255,0.05);
  --border2: rgba(255,255,255,0.1);
  --red: #e84855;
  --green: #52d98e;
  --player-h: 56.25vw;
  --overlay-dark: rgba(0,0,0,0.6);
  --overlay-darker: rgba(0,0,0,0.85);
  --overlay-light: rgba(255,255,255,0.1);
}
html[data-theme='light'] {
  --bg: #f4f6fb;
  --bg2: #ffffff;
  --bg3: #eef2fb;
  --bg4: #dfe5f2;
  --gold: #9a7220;
  --gold2: #b78929;
  --gold3: rgba(154,114,32,0.13);
  --gold4: rgba(154,114,32,0.06);
  --silver: #5a6780;
  --white: #1a2233;
  --dimmed: rgba(26,34,51,0.75);
  --muted: rgba(26,34,51,0.5);
  --border: rgba(12,22,38,0.08);
  --border2: rgba(12,22,38,0.16);
  --red: #c23a48;
  --green: #2f8e5f;
  --overlay-dark: rgba(12,22,38,0.6);
  --overlay-darker: rgba(12,22,38,0.85);
  --overlay-light: rgba(255,255,255,0.12);
}
html[data-theme='light'] header{background:var(--bg2)}
html[data-theme='light'] .player-wrap{background:var(--bg4)}
html[data-theme='light'] .prayer-hero{background:var(--bg3)}
/* Light mode: .screen inherits root light vars (dark text on light backgrounds) */
html[data-theme='light'] #bottom-nav{
  --muted:rgba(245,247,255,0.62);
  --gold:#d8b25b;
  --border2:rgba(255,255,255,0.26);
  background:rgba(7,12,24,0.82);
  border-top-color:rgba(255,255,255,0.2);
}
html[data-theme='light'] .screen .sec-title,
html[data-theme='light'] .screen .hero-title,
html[data-theme='light'] .screen .ch-sidebar-hdr h2,
html[data-theme='light'] .screen .radio-now,
html[data-theme='light'] .screen .w-temp,
html[data-theme='light'] .screen .info-overlay-title,
html[data-theme='light'] .screen .md-title{
  color:var(--white);
}
html[data-theme='light'] .screen .hero-meta,
html[data-theme='light'] .screen .it-desc,
html[data-theme='light'] .screen .mt-sub,
html[data-theme='light'] .screen .mv-sub,
html[data-theme='light'] .screen .ctrl-ch-num,
html[data-theme='light'] .screen .epg-empty,
html[data-theme='light'] .screen .w-desc,
html[data-theme='light'] .screen .w-city,
html[data-theme='light'] .screen .msg-empty,
html[data-theme='light'] .screen .mci-time,
html[data-theme='light'] .screen .mci-body,
html[data-theme='light'] .screen .pw-item-time,
html[data-theme='light'] .screen .pw-item-name,
html[data-theme='light'] .screen .player-status{
  color:var(--dimmed);
}
html[data-theme='light'] .screen .ch-card,
html[data-theme='light'] .screen .info-tile,
html[data-theme='light'] .screen .svc-tile,
html[data-theme='light'] .screen .prayer-tile,
html[data-theme='light'] .screen .station-card,
html[data-theme='light'] .screen .w-current,
html[data-theme='light'] .screen .w-fc-day,
html[data-theme='light'] .screen .wifi-card,
html[data-theme='light'] .screen .radio-player,
html[data-theme='light'] .screen .msg-card-inbox,
html[data-theme='light'] .screen .info-overlay-panel,
html[data-theme='light'] .screen .md-card{
  box-shadow:0 2px 12px rgba(4,10,24,0.08);
}
html[data-theme='light'] .screen .vod-search-input{border-color:var(--border2)}
html[data-theme='light'] .screen .ig-btn,
html[data-theme='light'] .screen .filter-chip,
html[data-theme='light'] .screen .country-tab,
html[data-theme='light'] .screen .ch-group-btn,
html[data-theme='light'] .screen .theme-toggle,
html[data-theme='light'] .screen .msg-mark-all,
html[data-theme='light'] .screen .epg-btn,
html[data-theme='light'] .screen .ctrl-btn{
  border-color:var(--border2);
}
html[data-theme='light'] .screen .ig-btn:hover,
html[data-theme='light'] .screen .filter-chip:hover,
html[data-theme='light'] .screen .country-tab:hover,
html[data-theme='light'] .screen .ch-group-btn:hover,
html[data-theme='light'] .screen .msg-mark-all:hover,
html[data-theme='light'] .screen .epg-btn:hover,
html[data-theme='light'] .screen .ctrl-btn:hover{
  border-color:var(--gold);
  color:var(--white);
}
/* Light-mode fixes: elements outside .screen that have hardcoded dark-mode colours */
html[data-theme='light'] #screensaver{background:#0b0b14}
html[data-theme='light'] .hdr-msg-btn{background:var(--bg3);border-color:var(--border2)}
html[data-theme='light'] .hdr-msg-btn:hover{background:var(--bg4);border-color:var(--gold)}
html[data-theme='light'] #top-nav.style-pill .nav-btn:hover{background:var(--bg3)}
html[data-theme='light'] #top-nav.style-icon .nav-btn:hover{background:var(--bg3)}
/* Hardcoded white colors that need explicit light-mode overrides */
html[data-theme='light'] .ch-epg-next{color:var(--muted)}
html[data-theme='light'] .ch-row-name{color:var(--white)}
html[data-theme='light'] .ch-name{color:var(--white)}
html[data-theme='light'] .mv-title{color:var(--white)}
html[data-theme='light'] .h-nav-btn{background:var(--bg2);color:var(--gold);border-color:var(--border2)}
html[data-theme='light'] .h-nav-btn:hover{background:var(--bg3)}
html[data-theme='light'] .msg-mark-all{background:var(--bg3);border-color:var(--border2);color:var(--dimmed)}
html[data-theme='light'] .msg-mark-all:hover{background:var(--bg4);border-color:var(--gold);color:var(--white)}
html[data-theme='light'] .mb-body{color:var(--dimmed)}
html[data-theme='light'] .mb-close{color:var(--muted)}
html[data-theme='light'] .mb-close:hover{color:var(--white)}
/* Promo slides and full-screen welcome sit on dark image overlays — keep white text */
html[data-theme='light'] .promo-slide-title{color:#f0f4ff}
html[data-theme='light'] .promo-slide-sub{color:rgba(240,244,255,0.75)}
html[data-theme='light'] .welcome-full-content .welcome-title{color:#f0f4ff}
html[data-theme='light'] .welcome-full-content .welcome-msg{color:rgba(240,244,255,0.8)}
html[data-theme='light'] .welcome-full-content .welcome-hotel{color:var(--gold)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--white);font-family:'Outfit',sans-serif;overflow:hidden}

/* ─── SPLASH ─────────────────────────────────────────────────────────────── */
#splash{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity .8s;gap:16px}
#splash.hide{opacity:0;pointer-events:none}
.splash-logo{font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:300;color:var(--white);letter-spacing:12px;text-transform:uppercase}
.splash-logo span{color:var(--gold)}
.splash-sub{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:4px;text-transform:uppercase}
.splash-bar{width:200px;height:1px;background:var(--border);margin-top:8px;overflow:hidden}
.splash-progress{height:100%;background:var(--gold);width:0;animation:loadBar 1.4s ease forwards}
@keyframes loadBar{to{width:100%}}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
#root{height:100vh;display:flex;flex-direction:column;opacity:0;transition:opacity .5s}
#root.visible{opacity:1}

/* ─── HEADER ─────────────────────────────────────────────────────────────── */
header{flex-shrink:0;height:64px;background:linear-gradient(to bottom,var(--bg2),transparent);padding:0 40px;display:flex;align-items:center;gap:40px;position:relative;z-index:100}
.hdr-logo{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;letter-spacing:6px;color:var(--gold);text-transform:uppercase;flex-shrink:0}
nav{display:flex;gap:4px;flex:1}
.nav-btn{padding:8px 18px;border-radius:6px;border:none;background:transparent;color:var(--muted);font-family:'Outfit',sans-serif;font-size:13px;font-weight:400;cursor:pointer;transition:.2s;letter-spacing:.5px}
.nav-btn:hover{color:var(--white);background:var(--bg3)}
.nav-btn.active{color:var(--gold);background:var(--gold4)}
.hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
/* ── Unified header chips (theme · room · messages · time) ── */
.theme-toggle,#hdr-room,.hdr-msg-btn,.hdr-time{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;height:26px;
  border-radius:20px;border:1px solid var(--border2);
  background:var(--bg3);
  font-size:11px;font-family:'DM Mono',monospace;letter-spacing:.7px;
  white-space:nowrap;line-height:1;color:var(--dimmed);
  box-sizing:border-box;
}
/* Theme toggle — interactive */
.theme-toggle{cursor:pointer;transition:border-color .15s,color .15s}
.theme-toggle:hover{color:var(--white);border-color:var(--gold)}
/* Room — gold accent */
#hdr-room{color:var(--gold);border-color:rgba(201,168,76,0.3);background:rgba(201,168,76,0.1)}
/* Time — silver, not interactive */
.hdr-time{color:var(--silver)}
/* Message button — interactive, badge anchor */
.hdr-msg-btn{cursor:pointer;position:relative;transition:border-color .15s,color .15s}
.hdr-msg-btn:hover{color:var(--white);border-color:var(--border2)}
.hdr-weather{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dimmed)}
.hdr-weather .temp{font-family:'DM Mono',monospace;color:var(--gold);font-size:14px}

/* ─── MAIN ───────────────────────────────────────────────────────────────── */
main{flex:1;overflow:hidden;position:relative}
.screen{position:absolute;inset:0;overflow-y:auto;display:none;opacity:0;transition:opacity .3s;pointer-events:none}
.screen.active{display:block;pointer-events:auto}
.screen.show{opacity:1}
/* FIX: TV screen needs flex layout — must not be overridden by .screen.active{display:block} */
#screen-tv.active,#screen-tv.show{display:flex !important}

/* ─── HOME ───────────────────────────────────────────────────────────────── */
#screen-home{padding:0}
.hero-banner{position:relative;height:42vh;background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 50%,var(--bg) 100%);overflow:hidden;display:flex;align-items:flex-end;padding:40px 48px}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,var(--bg) 0%,transparent 60%,var(--bg) 100%)}
.hero-bg{position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="g" cx="70%" cy="40%"><stop offset="0%" stop-color="%23c9a84c" stop-opacity="0.08"/><stop offset="100%" stop-color="transparent"/></radialGradient></defs><rect fill="url(%23g)" width="100" height="100"/></svg>');background-size:cover}
.hero-content{position:relative;z-index:2}
.hero-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--gold);letter-spacing:3px;text-transform:uppercase;margin-bottom:12px}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:300;line-height:1.1;margin-bottom:12px}
.hero-meta{font-size:13px;color:var(--dimmed);display:flex;gap:20px;margin-bottom:20px}
.hero-btns{display:flex;gap:12px}
.btn-hero{padding:10px 24px;border-radius:6px;border:none;cursor:pointer;font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;transition:.2s;display:flex;align-items:center;gap:8px}
.btn-hero-primary{background:var(--gold);color:#000}
.btn-hero-primary:hover{background:var(--gold2)}
.btn-hero-ghost{background:var(--overlay-light);color:var(--white);border:1px solid var(--border2)}
.btn-hero-ghost:hover{background:var(--overlay-light);opacity:0.8}

.home-section{padding:28px 48px 0}
.sec-header{display:flex;align-items:baseline;gap:16px;margin-bottom:20px}
.sec-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;letter-spacing:.5px}
.sec-count{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted)}
.sec-link{margin-left:auto;font-size:12px;color:var(--gold);cursor:pointer;text-decoration:none}
.sec-link:hover{color:var(--gold2)}

/* Horizontal scroll row */
.h-scroll-wrap{position:relative}
.h-scroll{display:flex;gap:16px;overflow-x:auto;padding:4px 44px 16px;scrollbar-width:none;scroll-behavior:smooth}
.h-scroll::-webkit-scrollbar{display:none}
.h-nav-btn{position:absolute;top:50%;transform:translateY(-52%);z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--border2);background:rgba(6,8,14,.85);color:var(--gold);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.h-nav-btn:hover{background:rgba(12,16,26,.95);border-color:var(--gold);color:var(--gold2)}
.h-nav-btn.left{left:6px}
.h-nav-btn.right{right:6px}

/* Channel Card */
.ch-card{flex-shrink:0;width:178px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:.2s;position:relative}
.ch-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.ch-card:hover .ch-play{opacity:1}
.ch-img{width:100%;height:88px;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:28px}
.ch-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:36px;height:36px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:0;transition:.2s}
.ch-info{padding:10px 10px 12px}
.ch-name{font-size:12px;font-weight:500;margin-bottom:2px;line-height:1.25;min-height:30px;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ch-num{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted)}
.ch-epg-now{font-size:10px;color:var(--gold,#c9a86c);line-height:1.25;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px}
.ch-epg-next{font-size:10px;color:rgba(255,255,255,.62);line-height:1.25;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px}
.ch-epg-time-red{color:#ff4d5a;font-family:'DM Mono',monospace;font-weight:700;margin-right:4px}

/* Movie Card */
.mv-card{flex-shrink:0;width:174px;cursor:pointer;transition:.2s}
.mv-card:hover{transform:scale(1.04)}
.mv-poster{width:100%;height:252px;background:var(--bg3);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:48px;margin-bottom:8px;border:1px solid var(--border);position:relative}
.mv-poster img{width:100%;height:100%;object-fit:cover}
.mv-badge{position:absolute;top:8px;right:8px;background:var(--overlay-dark);border-radius:4px;padding:2px 7px;font-size:10px;font-family:'DM Mono',monospace;color:var(--gold)}
.mv-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-sub{font-size:11px;color:var(--muted);margin-top:2px}

/* ─── TV CHANNEL LIST ────────────────────────────────────────────────────── */
#screen-tv{display:flex;height:100%}
.ch-sidebar{width:320px;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;background:var(--bg2)}
.ch-sidebar-hdr{padding:20px;border-bottom:1px solid var(--border)}
.ch-sidebar-hdr h2{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:400;margin-bottom:12px}
.ch-search{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 14px;color:var(--white);font-family:'Outfit',sans-serif;font-size:13px;outline:none;transition:.2s}
.ch-search:focus{border-color:var(--gold)}
.ch-groups-wrap{position:relative;display:flex;align-items:center;gap:0}
.ch-grp-arrow{flex-shrink:0;width:24px;height:28px;background:transparent;border:none;color:var(--dimmed);font-size:18px;line-height:1;cursor:pointer;padding:0;transition:.15s;display:flex;align-items:center;justify-content:center}
.ch-grp-arrow:hover{color:var(--white)}
.ch-grp-arrow:first-child{padding-left:8px}
.ch-grp-arrow:last-child{padding-right:8px}
.ch-grp-arrow.hidden{opacity:0;pointer-events:none}
.ch-groups{flex:1;display:flex;gap:6px;overflow-x:auto;padding:10px 4px 0;scrollbar-width:none}
.ch-groups::-webkit-scrollbar{display:none}
.ch-group-btn{flex-shrink:0;padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--dimmed);font-size:11px;cursor:pointer;transition:.15s}
.ch-group-btn:hover{border-color:var(--border2);color:var(--white)}
.ch-group-btn.active{background:var(--gold3);border-color:var(--gold);color:var(--gold)}
.ch-group-favs{border-color:rgba(220,80,100,.4);color:rgba(220,80,100,.8)}
.ch-group-favs:hover{border-color:rgba(220,80,100,.8);color:rgb(220,80,100)}
.ch-group-favs.active{background:rgba(220,80,100,.15);border-color:rgb(220,80,100);color:rgb(220,80,100)}
.ch-favs-badge{background:rgb(220,80,100);color:#fff;border-radius:10px;padding:1px 5px;font-size:9px;margin-left:4px;font-family:'DM Mono',monospace;vertical-align:middle}
.ch-list{flex:1;overflow-y:auto;padding:8px}
.ch-list::-webkit-scrollbar{width:3px}
.ch-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.ch-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:.15s;border:1px solid transparent}
.ch-row:hover{background:var(--bg3)}
.ch-row.playing{background:var(--gold4);border-color:var(--gold)}
.ch-row-logo{width:40px;height:40px;background:var(--bg4);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;overflow:hidden}
.ch-mono-lbl{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:'DM Mono',monospace;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.5px}
.ch-row-info{flex:1;min-width:0}
.ch-row-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-row-num{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted)}
.ch-row-epg{font-size:10px;color:var(--gold,#c9a86c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ch-row-live{font-size:9px;background:var(--red);color:#fff;padding:1px 6px;border-radius:3px;font-family:'DM Mono',monospace;letter-spacing:1px;flex-shrink:0}
.ch-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.ch-fav-btn{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;padding:0;transition:.18s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.ch-fav-btn:hover,.ch-fav-btn.active{color:rgb(220,80,100)}
.ch-fav-btn.active svg{fill:rgb(220,80,100);stroke:rgb(220,80,100)}
.ch-fav-btn svg{fill:none;stroke:currentColor;stroke-width:2;transition:.18s}

/* Now-playing info bar (mobile YouTube style — hidden on desktop) */
.tv-now-bar{display:none;padding:12px 14px 10px;background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0}
.tnb-title{font-size:15px;font-weight:600;line-height:1.3;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnb-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tnb-group{font-size:12px;color:var(--muted);font-family:'DM Mono',monospace}

.tv-player-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.player-wrap{position:relative;background:#000;aspect-ratio:16/9;max-height:60%}
.player-wrap video{width:100%;height:100%;object-fit:contain}
.player-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:var(--overlay-dark)}
.player-channel-logo{font-size:48px}
.player-channel-name{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;letter-spacing:2px}
.player-status{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:2px}
.player-controls{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:linear-gradient(transparent,var(--overlay-darker));display:flex;align-items:center;gap:14px;opacity:0;transition:opacity .3s;pointer-events:none}
.player-wrap:hover .player-controls,.player-wrap.controls-show .player-controls{opacity:1;pointer-events:auto}
.ctrl-btn{background:var(--overlay-light);border:none;color:var(--white);width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.15s}
.ctrl-btn:hover{background:var(--border2)}
.ctrl-btn.play{background:var(--gold);color:#000;width:42px;height:42px}
.ctrl-btn.play:hover{background:var(--gold2)}
.ctrl-ch-info{flex:1;min-width:0;overflow:hidden;margin-left:8px}
.ctrl-ch-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden}
.ctrl-ch-num{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Channel name marquee — scrolls when text is wider than container */
@keyframes ctrl-name-marquee{
  0%,15%  {transform:translateX(0)}
  85%,100%{transform:translateX(var(--marquee-dist,-60px))}
}
.ctrl-ch-name.marquee{animation:ctrl-name-marquee 9s ease-in-out infinite}
.ch-epg{flex:1;overflow-y:auto;padding:20px}
.ch-epg h3{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:400;margin-bottom:14px}
.epg-empty{text-align:center;color:var(--muted);font-size:13px;padding:40px 0}

/* ─── VOD ────────────────────────────────────────────────────────────────── */
#screen-vod{padding:0 40px 24px}
.vod-top-nav{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--border);margin-bottom:28px;position:sticky;top:0;background:var(--bg1);z-index:10;padding:0}
.vod-top-tab{flex:1;padding:16px 8px;background:none;border:none;color:var(--dimmed);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.2s;position:relative;border-bottom:3px solid transparent;margin-bottom:-1px}
.vod-top-tab:hover{color:var(--white)}
.vod-top-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.vod-search-bar{position:relative;display:flex;align-items:center;margin-bottom:24px}
.vod-search-bar .vod-search-icon{position:absolute;left:16px;color:var(--muted);pointer-events:none}
.vod-search-input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:28px;padding:12px 44px 12px 48px;color:var(--white);font-size:15px;outline:none;transition:.2s}
.vod-search-input:focus{border-color:var(--gold);background:var(--bg2)}
.vod-search-clear{position:absolute;right:14px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;padding:4px;line-height:1;transition:.15s}
.vod-search-clear:hover{color:var(--white)}
.vod-search-hint{opacity:.5}
.vod-genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.vod-genre-card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:20px 16px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.vod-genre-card:hover{border-color:var(--gold);background:var(--gold3);transform:translateY(-3px)}
.vgc-name{font-size:14px;font-weight:600;color:var(--white)}
.vgc-count{font-size:11px;color:var(--muted);font-family:'DM Mono',monospace}
.vod-genre-back{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.vod-genre-back-btn{background:none;border:1px solid var(--border);border-radius:20px;padding:6px 16px;color:var(--dimmed);font-size:13px;cursor:pointer;transition:.15s}
.vod-genre-back-btn:hover{color:var(--white);border-color:var(--border2)}
.vod-genre-back-title{font-size:16px;font-weight:600;color:var(--white)}
.filter-chip{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--dimmed);font-size:12px;cursor:pointer;transition:.15s;white-space:nowrap}
.filter-chip:hover{border-color:var(--border2);color:var(--white)}
.filter-chip.active{background:var(--gold3);border-color:var(--gold);color:var(--gold)}
.fav-chip{border-color:rgba(220,80,100,.35);color:rgba(220,80,100,.7)}
.fav-chip:hover{border-color:rgba(220,80,100,.7);color:rgb(220,80,100)}
.fav-chip.active{background:rgba(220,80,100,.15);border-color:rgb(220,80,100);color:rgb(220,80,100)}
.fav-count{background:rgb(220,80,100);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;margin-left:2px;font-family:'DM Mono',monospace}
.movie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px}
.movie-tile{cursor:pointer;transition:.2s;position:relative}
.movie-tile:hover{transform:translateY(-6px)}
.movie-tile:hover .mt-overlay{opacity:1}
.mt-poster{width:100%;aspect-ratio:2/3;background:var(--bg3);border-radius:10px;overflow:hidden;margin-bottom:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:48px;position:relative}
.mt-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mt-overlay{position:absolute;inset:0;background:var(--overlay-dark);display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;border-radius:10px}
.mt-play-btn{width:48px;height:48px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px}
.mt-rating{position:absolute;top:8px;right:8px;background:var(--overlay-dark);border-radius:4px;padding:2px 7px;font-size:10px;font-family:'DM Mono',monospace;color:var(--gold)}
.mt-fav-btn{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.45);font-size:14px;z-index:2;transition:.2s;backdrop-filter:blur(4px);line-height:1;padding:0}
.mt-fav-btn:hover,.mt-fav-btn.active{color:rgb(220,80,100);background:rgba(220,80,100,.2)}
.mt-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-sub{font-size:11px;color:var(--muted)}
.mt-price{font-size:11px;color:var(--gold);margin-top:2px}
.vod-empty{grid-column:1/-1;padding:60px 20px;text-align:center;color:var(--muted);font-size:15px}
.btn-hero-fav{background:rgba(220,80,100,.15);border:1px solid rgba(220,80,100,.6);color:rgb(220,80,100)}
.btn-hero-fav:hover{background:rgba(220,80,100,.25)}

/* Movie Detail Panel */
.movie-detail{position:fixed;inset:0;background:var(--overlay-darker);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.movie-detail.open{display:flex}
.md-card{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;width:680px;max-width:92vw;max-height:85vh;overflow-y:auto;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.md-backdrop{height:200px;background:linear-gradient(135deg,var(--bg3),var(--bg4));display:flex;align-items:center;justify-content:center;font-size:80px;position:relative;overflow:hidden;border-radius:16px 16px 0 0}
.md-backdrop::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,var(--bg2))}
.md-body{padding:28px}
.md-title{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;line-height:1.1;margin-bottom:8px}
.md-meta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.md-meta span{font-size:12px;color:var(--dimmed);font-family:'DM Mono',monospace}
.md-meta .hl{color:var(--gold)}
.md-desc{font-size:14px;color:var(--dimmed);line-height:1.7;margin-bottom:24px}
.md-actions{display:flex;gap:12px}
.md-close{position:absolute;top:16px;right:16px;background:var(--overlay-dark);border:none;color:var(--white);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.md-card{position:relative}

/* ── Series tile badge ── */
.mt-series-badge{position:absolute;top:8px;right:8px;background:rgba(30,80,200,.75);border-radius:4px;padding:2px 7px;font-size:10px;font-family:'DM Mono',monospace;color:#a8c8ff;letter-spacing:.3px}
.mt-ep-count{font-size:11px;color:var(--muted);margin-top:2px}

/* ── Series detail — seasons + episode list ── */
.sd-seasons{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 10px}
.sd-season-tab{padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--dimmed);font-size:12px;cursor:pointer;transition:.15s;white-space:nowrap;font-family:'Outfit',sans-serif}
.sd-season-tab:hover{border-color:var(--border2);color:var(--white)}
.sd-season-tab.active{background:var(--gold3);border-color:var(--gold);color:var(--gold)}
.sd-ep-list{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow-y:auto;padding-right:4px}
.sd-ep-list::-webkit-scrollbar{width:4px}
.sd-ep-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.ep-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:.15s;border:1px solid transparent}
.ep-row:hover{background:var(--bg3);border-color:var(--border)}
.ep-num{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);min-width:28px;text-align:right;flex-shrink:0}
.ep-thumb{width:72px;height:42px;border-radius:6px;background:var(--bg3);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--border)}
.ep-thumb img{width:100%;height:100%;object-fit:cover}
.ep-info{flex:1;min-width:0}
.ep-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-runtime{font-size:11px;color:var(--muted);margin-top:2px}
.ep-play-btn{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--gold);border:none;color:#000;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s}
.ep-play-btn:hover{background:var(--gold2);transform:scale(1.08)}

/* ─── VOD PLAYER MODAL ───────────────────────────────────────────────────── */
/* ─── VOD PLAYER — VLC style ─────────────────────────────────────────────── */
#vod-player-modal{position:fixed;inset:0;background:#000;z-index:5500;display:none}
#vod-player-modal.open{display:block}

/* News ticker + bottom nav hidden while VOD is playing */
body.vod-active #news-ticker,
body:has(#vod-player-modal.open) #news-ticker{display:none !important}
/* Bottom nav hidden — player has its own controls */
body.vod-active #bottom-nav,
body:has(#vod-player-modal.open) #bottom-nav{display:none !important}
/* Root padding resets — nav + ticker gone while player is open */
body.vod-active #root,
body:has(#vod-player-modal.open) #root{padding-bottom:0 !important}
/* Emergency ticker (z:8000) already above player — no override needed */
#vod-player-modal>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;cursor:pointer}
#vod-prev-btn,#vod-next-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:600;
  background:transparent;
  border:none;border-radius:50%;
  width:88px;height:88px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  cursor:pointer;
  color:rgba(255,255,255,.92);
  transition:opacity .35s,background .2s,color .2s;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.95));
}
#vod-prev-btn{left:20px}
#vod-next-btn{right:20px}
#vod-prev-btn:hover,#vod-next-btn:hover{background:rgba(255,255,255,.13);color:#fff}
#vod-prev-btn:active,#vod-next-btn:active{background:rgba(255,255,255,.22)}
.vod-nav-lbl{font-family:'Outfit',sans-serif;font-size:10px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;opacity:.8;line-height:1}
.vlc-bar{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(10,10,10,.98) 38%);padding:0 20px 18px;transition:opacity .35s,pointer-events .35s}
/* ── seek row ── */
.vlc-seek-row{display:flex;align-items:center;gap:10px;padding:10px 0 6px}
.vlc-cur{font-family:'DM Mono',monospace;font-size:12px;color:rgba(255,255,255,.8);min-width:46px;white-space:nowrap}
.vlc-dur{font-family:'DM Mono',monospace;font-size:12px;color:rgba(255,255,255,.4);min-width:46px;white-space:nowrap;text-align:right}
.vlc-track{flex:1;position:relative;height:18px;display:flex;align-items:center;cursor:pointer}
.vlc-track-bg{position:absolute;inset:0;margin:auto;height:3px;background:rgba(255,255,255,.18);border-radius:2px;pointer-events:none;transition:height .15s}
.vlc-track-buf{position:absolute;left:0;top:50%;transform:translateY(-50%);height:3px;background:rgba(255,255,255,.28);border-radius:2px;pointer-events:none;transition:width .5s}
.vlc-track-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:3px;background:var(--gold);border-radius:2px;pointer-events:none}
.vlc-track-thumb{position:absolute;width:13px;height:13px;background:#fff;border-radius:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 1px 4px rgba(0,0,0,.6)}
.vlc-track:hover .vlc-track-bg{height:5px}
.vlc-track:hover .vlc-track-thumb{opacity:1}
.vlc-track input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
/* ── controls row ── */
.vlc-controls{display:flex;align-items:center;gap:6px}
.vlc-left{display:flex;align-items:center;gap:6px;flex:1}
.vlc-right{display:flex;align-items:center;gap:6px;flex:1;justify-content:flex-end}
.vlc-center{display:flex;align-items:center;gap:2px}
/* generic button */
.vlc-btn{background:none;border:none;color:rgba(255,255,255,.75);cursor:pointer;border-radius:6px;padding:7px 9px;font-size:15px;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;line-height:1}
.vlc-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
/* skip buttons — VLC circular-arrow style */
.vlc-skip{background:none;border:none;color:rgba(255,255,255,.8);cursor:pointer;border-radius:8px;padding:4px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:color .15s,background .15s;min-width:44px}
.vlc-skip:hover{color:#fff;background:rgba(255,255,255,.1)}
.vlc-skip svg{display:block}
.vlc-skip-lbl{font-family:'DM Mono',monospace;font-size:9px;color:rgba(255,255,255,.5);letter-spacing:.5px;line-height:1}
/* play button — large center circle */
.vlc-play{width:52px;height:52px;border-radius:50%;background:var(--gold);border:none;color:#000;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s;flex-shrink:0;margin:0 10px;line-height:1}
.vlc-play:hover{background:var(--gold2);transform:scale(1.07)}
.vlc-play:active{transform:scale(.95)}
/* volume */
.vlc-vol{width:72px;height:3px;accent-color:var(--gold);cursor:pointer;border-radius:2px}
/* title */
.vlc-title{font-size:12px;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;font-family:'DM Mono',monospace}
/* loading spinner */
.vod-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:13px;pointer-events:none}

/* ─── RADIO ──────────────────────────────────────────────────────────────── */
#screen-radio{padding:24px 40px}
.radio-player{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:32px;text-align:center;margin-bottom:32px;position:relative;overflow:hidden}
.radio-player::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(201,168,76,0.05) 0%,transparent 70%);pointer-events:none}
.radio-vinyl{width:100px;height:100px;background:conic-gradient(var(--bg4) 0deg,#1a1a30 90deg,var(--bg4) 180deg,#1a1a30 270deg);border-radius:50%;margin:0 auto 20px;border:3px solid var(--border2);position:relative;transition:.3s}
.radio-vinyl.spinning{animation:spin 4s linear infinite}
.radio-vinyl::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:var(--bg);border-radius:50%;border:2px solid var(--border2)}
@keyframes spin{to{transform:rotate(360deg)}}
.radio-now{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;margin-bottom:4px}
.radio-sub{font-size:13px;color:var(--muted)}
.radio-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.r-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--white);width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:.2s}
.r-btn:hover{border-color:var(--gold);color:var(--gold)}
.r-btn.play{background:var(--gold);border-color:var(--gold);color:#000;width:54px;height:54px;font-size:20px}
.r-btn.play:hover{background:var(--gold2)}
.country-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:20px;scrollbar-width:none;padding-bottom:4px}
.country-tabs::-webkit-scrollbar{display:none}
.country-tab{flex-shrink:0;padding:7px 16px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--dimmed);font-size:12px;cursor:pointer;transition:.15s}
.country-tab:hover{color:var(--white)}
.country-tab.active{background:var(--gold3);border-color:var(--gold);color:var(--gold)}
.station-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.station-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:14px}
.station-card:hover{border-color:var(--border2);background:var(--bg3)}
.station-card.playing{border-color:var(--gold);background:var(--gold4)}
.st-icon{width:44px;height:44px;background:var(--bg3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.st-name{font-size:13px;font-weight:500}
.st-meta{font-size:11px;color:var(--muted);margin-top:2px}

/* ─── WEATHER ────────────────────────────────────────────────────────────── */
#screen-weather{padding:40px}
.weather-card{max-width:700px;margin:0 auto}
.w-current{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:40px;margin-bottom:24px;text-align:center;position:relative;overflow:hidden}
.w-current::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(201,168,76,0.04) 0%,transparent 60%)}
.w-icon-big{font-size:80px;margin-bottom:12px}
.w-temp{font-family:'Cormorant Garamond',serif;font-size:80px;font-weight:300;line-height:1;color:var(--white)}
.w-deg{font-size:40px;color:var(--gold)}
.w-desc{font-size:16px;color:var(--dimmed);margin:8px 0}
.w-city{font-family:'DM Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-bottom:24px}
.w-details{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.w-detail{background:var(--bg3);border-radius:10px;padding:14px;text-align:center}
.w-detail-val{font-size:20px;font-weight:500;margin-bottom:4px}
.w-detail-lbl{font-size:10px;color:var(--muted);font-family:'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase}
.w-forecast{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.w-fc-day{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center}
.w-fc-name{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.w-fc-icon{font-size:28px;margin-bottom:8px}
.w-fc-temps{display:flex;gap:8px;justify-content:center;font-size:14px}
.w-fc-hi{color:var(--white);font-weight:500}
.w-fc-lo{color:var(--muted)}

/* ─── INFO PAGES ─────────────────────────────────────────────────────────── */
#screen-info{padding:28px 40px}
.info-groups{display:flex;gap:8px;margin-bottom:28px;overflow-x:auto;scrollbar-width:none}
.info-groups::-webkit-scrollbar{display:none}
.ig-btn{flex-shrink:0;padding:7px 18px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--dimmed);font-size:12px;cursor:pointer;transition:.15s}
.ig-btn:hover{color:var(--white)}
.ig-btn.active{background:var(--gold3);border-color:var(--gold);color:var(--gold)}
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.info-tile{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;cursor:pointer;transition:.2s}
.info-tile:hover{border-color:var(--border2);transform:translateY(-3px)}
.it-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.it-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;margin-bottom:8px}
.it-desc{font-size:13px;color:var(--dimmed);line-height:1.6}

/* ─── TOAST ──────────────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:12px 24px;font-size:13px;z-index:9000;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ─── SCROLLBAR ──────────────────────────────────────────────────────────── */
.screen::-webkit-scrollbar{width:4px}
.screen::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* ─── REGISTRATION SCREEN ───────────────────────────────────────────────── */
#register-screen{
  position:fixed;inset:0;background:var(--bg);z-index:8000;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:0;
}
#register-screen.hidden{display:none}
.reg-card{
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:20px;padding:52px 48px;width:420px;max-width:92vw;
  text-align:center;position:relative;overflow:hidden;
}
.reg-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,0.07) 0%,transparent 70%);
  pointer-events:none;
}
.reg-logo{
  font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;
  color:var(--gold);letter-spacing:8px;text-transform:uppercase;margin-bottom:6px;
}
.reg-sub{
  font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:40px;
}
.reg-label{
  font-size:13px;color:var(--dimmed);margin-bottom:12px;
}
.reg-input{
  width:100%;background:var(--bg3);border:1px solid var(--border2);
  border-radius:12px;padding:16px 20px;color:var(--white);
  font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;
  text-align:center;outline:none;letter-spacing:6px;
  transition:.2s;margin-bottom:20px;
}
.reg-input:focus{border-color:var(--gold);background:var(--bg4);}
.reg-input::placeholder{color:var(--muted);font-size:28px;letter-spacing:4px}
.reg-btn{
  width:100%;background:var(--gold);color:#000;border:none;
  border-radius:12px;padding:15px;font-family:'Cormorant Garamond',serif;
  font-size:18px;font-weight:600;letter-spacing:2px;cursor:pointer;
  transition:.2s;margin-bottom:12px;
}
.reg-btn:hover{background:var(--gold2);}
.reg-btn:disabled{background:var(--bg4);color:var(--muted);cursor:not-allowed;}
.reg-error{
  font-size:13px;color:#e84855;min-height:20px;
  transition:opacity .2s;margin-top:4px;
}
.reg-hint{
  font-size:11px;color:var(--muted);margin-top:16px;line-height:1.6;
}
/* numpad for TV remote / touchscreen */
.reg-numpad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-bottom:20px;
}
.reg-numpad button{
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:10px;padding:14px 0;color:var(--white);
  font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;
  cursor:pointer;transition:.15s;
}
.reg-numpad button:hover,.reg-numpad button:active{
  background:var(--bg4);border-color:var(--gold);color:var(--gold);
}
.reg-numpad .key-del{font-size:16px;color:var(--muted);}
.reg-numpad .key-0{grid-column:2}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

/* Hamburger — hidden by default (desktop) */
.hdr-hamburger{display:none}

/* Nav drawer — off-screen by default */
.hdr-nav-drawer{
  position:fixed;
  top:64px;left:0;right:0;
  background:var(--bg2);
  border-bottom:1px solid var(--border2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  z-index:95;
  padding:16px 24px 20px;
  display:flex;flex-wrap:wrap;gap:10px;
  transform:translateY(-110%);
  opacity:0;
  pointer-events:none;
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .22s;
}
.hdr-nav-drawer.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:all;
}
.hdr-nav-drawer .nav-btn{
  flex:0 0 auto;
  padding:11px 20px;
  font-size:14px;
  border-radius:8px;
  background:var(--bg3);
  border:1px solid var(--border);
  color:var(--muted);
}
.hdr-nav-drawer .nav-btn:hover{color:var(--white);background:var(--bg4)}
.hdr-nav-drawer .nav-btn.active{color:var(--gold);background:rgba(201,168,76,0.12);border-color:rgba(201,168,76,0.3)}

/* Drawer scrim */
.hdr-nav-scrim{
  display:none;position:fixed;inset:0;top:64px;
  background:rgba(0,0,0,.45);
  z-index:94;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.hdr-nav-scrim.on{display:block}

/* Light theme overrides for drawer */
html[data-theme='light'] .hdr-nav-drawer{background:rgba(255,255,255,.95);border-color:var(--border2)}
html[data-theme='light'] .hdr-nav-drawer .nav-btn{background:var(--bg3);border-color:var(--border2)}

/* ── Tablet: 641px–1024px — hamburger drawer ─────────────────────────────── */
@media(min-width:641px) and (max-width:1024px){
  /* Hamburger visible */
  .hdr-hamburger{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:5px;
    width:40px;height:40px;flex-shrink:0;
    background:var(--bg3);
    border:1px solid var(--border2);
    border-radius:8px;
    cursor:pointer;
    transition:background .15s,border-color .15s;
  }
  .hdr-hamburger:hover{background:var(--bg4)}
  .hdr-hamburger span{
    display:block;width:18px;height:2px;
    background:var(--silver);border-radius:1px;
    transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s,width .2s;
  }
  .hdr-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hdr-hamburger.open span:nth-child(2){opacity:0;width:0}
  .hdr-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Hide inline top nav — items shown in drawer */
  #top-nav{display:none !important}

  /* Tighter header padding on tablet */
  header{padding:0 20px;gap:14px}

  /* Hide weather + time to keep header clean; keep theme + room + messages */
  .hdr-weather{display:none}
  .hdr-time{display:none}
}

@media(max-width:900px){
  header{padding:0 20px;gap:12px}
  .nav-btn{padding:6px 12px;font-size:12px}
  #screen-tv{flex-direction:column}
  .ch-sidebar{width:100%;height:300px;border-right:none;border-bottom:1px solid var(--border);display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden;background:var(--bg2)}
  .ch-list{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;flex-direction:row;padding:8px 12px;scrollbar-width:none;align-items:stretch}
  .ch-row{flex-shrink:0;width:150px}
  .tv-player-area{flex:1;min-height:0}
  .movie-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .w-details{grid-template-columns:repeat(2,1fr)}
  .w-forecast{grid-template-columns:repeat(2,1fr)}
}

/* ─── MOBILE NAV (phone < 640px) ─────────────────────────────────────────── */
@media(max-width:640px){
  /* Always use bottom nav on phones — hide top nav */
  #top-nav{display:none !important}
  #bottom-nav{display:flex !important}
  body #root{padding-bottom:60px}
  /* Slim header on phone */
  header{padding:0 12px;min-height:48px}
  .hdr-logo{font-size:16px;letter-spacing:3px}
  main{padding-top:0}
}

/* ── v6: EMERGENCY TICKER (top) ─────────────────────────────────────────────── */
#emergency-ticker{
  display:none;position:fixed;top:0;left:0;right:0;z-index:8000;
  background:linear-gradient(135deg,#7a0000,#c0001a);
  border-bottom:2px solid #ff4444;
  padding:7px 0;overflow:hidden;
}
#emergency-ticker.on{display:block}
.et-inner{display:flex;align-items:center;gap:0;white-space:nowrap;animation:tickerScroll 40s linear infinite}
.et-inner:hover{animation-play-state:paused}
.et-label{flex-shrink:0;background:#ff2222;color:#fff;font-family:'DM Mono',monospace;font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;padding:2px 14px;margin-right:16px}
.et-item{color:#fff;font-size:13px;padding:0 28px;border-right:1px solid rgba(255,255,255,0.2);flex-shrink:0}

/* ── v6: NORMAL NEWS TICKER (bottom) ─────────────────────────────────────────── */
#news-ticker{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:800;
  background:rgba(9,9,15,0.92);border-top:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);padding:6px 0;overflow:hidden;
}
#news-ticker.on{display:block}
.nt-inner{display:flex;align-items:center;white-space:nowrap;animation:tickerScroll 60s linear infinite}
.nt-inner:hover{animation-play-state:paused}
.nt-label{flex-shrink:0;background:var(--gold);color:#000;font-family:'DM Mono',monospace;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:2px 12px;margin-right:14px;border-radius:3px}
.nt-item{font-size:12px;padding:0 22px;border-right:1px solid rgba(255,255,255,0.07);flex-shrink:0;color:rgba(240,240,248,0.85)}
.nt-item b{color:var(--gold)}

@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── v6: MESSAGE OVERLAY (emergency full-screen) ──────────────────────────────── */
#msg-overlay{
  position:fixed;inset:0;z-index:9500;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);
}
#msg-overlay.on{display:flex}
.msg-card{
  max-width:640px;width:92%;padding:40px;border-radius:20px;
  text-align:center;animation:msgPop .3s ease;
}
.msg-card.emergency{
  background:linear-gradient(135deg,#1a0000,#2a0008);
  border:2px solid #ff4444;
  box-shadow:0 0 60px rgba(255,68,68,0.4),0 0 0 1px rgba(255,68,68,0.2);
}
.msg-card.normal{
  background:linear-gradient(135deg,#0a0a18,#0f0f22);
  border:1px solid rgba(212,168,67,0.4);
  box-shadow:0 0 40px rgba(212,168,67,0.15);
}
.msg-card.birthday{
  background:linear-gradient(135deg,#0a0012,#150020);
  border:1px solid rgba(155,123,255,0.5);
  box-shadow:0 0 50px rgba(155,123,255,0.2);
}
@keyframes msgPop{from{transform:scale(0.88);opacity:0}to{transform:scale(1);opacity:1}}
.msg-icon{font-size:52px;margin-bottom:16px;animation:iconBob 1.5s ease-in-out infinite}
@keyframes iconBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.msg-title{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:600;margin-bottom:12px}
.msg-card.emergency .msg-title{color:#ff6666}
.msg-card.normal .msg-title{color:var(--gold)}
.msg-card.birthday .msg-title{color:#c8a0ff}
.msg-body{font-size:15px;color:rgba(240,240,248,0.8);line-height:1.7;margin-bottom:24px}
.msg-dismiss{
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
  color:#fff;border-radius:10px;padding:10px 28px;font-size:14px;cursor:pointer;
  transition:.2s;font-family:'Outfit',sans-serif;
}
.msg-dismiss:hover{background:rgba(255,255,255,0.14)}
.msg-from{font-size:11px;color:rgba(255,255,255,0.35);margin-top:12px;font-family:'DM Mono',monospace;letter-spacing:1px}

/* ── v6: MESSAGE BANNER (normal — non-intrusive) ──────────────────────────────── */
#msg-banner{
  position:fixed;top:64px;left:0;right:0;z-index:600;
  display:none;align-items:center;gap:14px;
  padding:10px 22px;
  animation:bannerSlide .3s ease;
}
#msg-banner.on{display:flex}
@keyframes bannerSlide{from{transform:translateY(-100%)}to{transform:translateY(0)}}
#msg-banner.normal{background:rgba(9,9,15,0.9);border-bottom:1px solid rgba(212,168,67,0.3);backdrop-filter:blur(12px)}
#msg-banner.room{background:rgba(9,9,15,0.9);border-bottom:1px solid rgba(74,158,255,0.3);backdrop-filter:blur(12px)}
.mb-icon{font-size:20px;flex-shrink:0}
.mb-content{flex:1;min-width:0}
.mb-title{font-size:14px;font-weight:600;color:var(--gold)}
.mb-body{font-size:12px;color:rgba(240,240,248,0.65)}
.mb-close{cursor:pointer;color:rgba(255,255,255,0.4);font-size:18px;flex-shrink:0;padding:4px}
.mb-close:hover{color:#fff}

/* ── v6: BIRTHDAY BANNER ──────────────────────────────────────────────────────── */
#bday-banner{
  position:fixed;inset:0;z-index:9000;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.82);backdrop-filter:blur(6px);
}
#bday-banner.on{display:flex}
.bday-card{
  max-width:580px;width:92%;background:linear-gradient(135deg,#0d001a,#1a0030);
  border:1px solid rgba(212,168,67,0.5);border-radius:24px;padding:44px 36px;
  text-align:center;animation:msgPop .4s ease;
  box-shadow:0 0 80px rgba(212,168,67,0.15);
}
.bday-balloons{font-size:36px;margin-bottom:8px;animation:iconBob 2s ease-in-out infinite}
.bday-name{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:300;color:var(--gold);letter-spacing:2px;margin-bottom:6px}
.bday-room{font-size:13px;color:rgba(240,240,248,0.5);font-family:'DM Mono',monospace;letter-spacing:1px;margin-bottom:16px}
.bday-msg{font-size:16px;color:rgba(240,240,248,0.8);line-height:1.7;margin-bottom:24px}
.bday-close{background:rgba(212,168,67,0.12);border:1px solid rgba(212,168,67,0.3);color:var(--gold);border-radius:10px;padding:10px 28px;font-size:14px;cursor:pointer;transition:.2s}
.bday-close:hover{background:rgba(212,168,67,0.22)}

/* ── v6: VIP badge ────────────────────────────────────────────────────────────── */
.vip-badge{display:inline-block;background:linear-gradient(90deg,#d4a843,#f0c060);color:#000;font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:1px;vertical-align:middle;margin-left:4px}

/* v6: push main content down when emergency ticker visible */
body.emergency-active #root{padding-top:32px}
body.emergency-active .register-screen{padding-top:32px}


/* ── v7: SCREENSAVER ────────────────────────────────────────────────────────── */
#screensaver{
  position:fixed;inset:0;z-index:8500;
  background:var(--bg);display:none;
  align-items:center;justify-content:center;flex-direction:column;
  cursor:pointer;
}
#screensaver.on{display:flex}
.ss-time{
  font-family:'Cormorant Garamond',serif;font-size:clamp(72px,12vw,140px);
  font-weight:200;color:rgba(240,240,248,0.85);letter-spacing:-2px;
  text-shadow:0 0 80px rgba(212,168,67,0.15);
}
.ss-date{
  font-family:'DM Mono',monospace;font-size:clamp(14px,2vw,22px);
  color:rgba(240,240,248,0.3);letter-spacing:4px;text-transform:uppercase;
  margin-top:8px;
}
.ss-hotel{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;
  color:rgba(212,168,67,0.4);letter-spacing:6px;text-transform:uppercase;
}
.ss-hint{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-family:'DM Mono',monospace;font-size:10px;
  color:rgba(255,255,255,0.12);letter-spacing:2px;
}
/* Floating particles */
.ss-particle{
  position:absolute;border-radius:50%;pointer-events:none;animation:ssFloat linear infinite;
}
@keyframes ssFloat{
  0%  {transform:translate(0,100vh) scale(0);opacity:0}
  10% {opacity:.3}
  90% {opacity:.1}
  100%{transform:translate(var(--dx),0) scale(1.5);opacity:0}
}

/* ── v7: EPG OVERLAY ─────────────────────────────────────────────────────────── */
#epg-overlay{
  position:fixed;bottom:0;left:0;right:0;z-index:700;
  background:rgba(9,9,15,0.96);border-top:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(16px);padding:16px 24px 20px;
  transform:translateY(100%);transition:transform .3s ease;
}
#epg-overlay.on{transform:translateY(0)}
.epg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.epg-ch-name{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:400;color:var(--gold)}
.epg-close{background:rgba(255,255,255,0.07);border:none;color:rgba(255,255,255,0.4);border-radius:6px;padding:4px 12px;cursor:pointer;font-size:13px}
.epg-close:hover{color:#fff}
.epg-list{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.epg-list::-webkit-scrollbar{height:2px}
.epg-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:1px}
.epg-card{flex-shrink:0;width:180px;background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:12px;transition:.2s}
.epg-card.now{border-color:rgba(212,168,67,.4);background:rgba(212,168,67,.06)}
.epg-time{font-family:'DM Mono',monospace;font-size:10px;color:var(--text2);letter-spacing:1px;margin-bottom:5px}
.epg-title{font-size:13px;font-weight:500;color:var(--white);margin-bottom:3px;line-height:1.3}
.epg-cat{font-size:10px;color:var(--muted);font-family:'DM Mono',monospace}
.epg-card.now .epg-time{color:var(--gold)}
.epg-card.now .epg-title{color:var(--gold)}
.epg-progress{height:2px;background:rgba(255,255,255,0.08);border-radius:1px;margin-top:8px;overflow:hidden}
.epg-prog-fill{height:100%;background:var(--gold);border-radius:1px}
.epg-now-badge{display:inline-block;background:var(--gold);color:#000;font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:1px;margin-left:6px;vertical-align:middle}

/* ── v7: GUEST SERVICES SCREEN ───────────────────────────────────────────────── */
#screen-services{padding:28px 32px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px}
.svc-tile{
  background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:24px 20px;text-align:center;cursor:pointer;transition:.2s;
}
.svc-tile:hover{border-color:var(--gold);background:var(--bg3);transform:translateY(-2px)}
.svc-tile:active{transform:translateY(0)}
.svc-icon{font-size:38px;margin-bottom:10px}
.svc-name{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:400;color:var(--white);margin-bottom:4px}
.svc-cat{font-size:10px;color:var(--muted);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.svc-phone{font-family:'DM Mono',monospace;font-size:13px;color:var(--gold)}

/* Service modal */
.svc-modal-icon{font-size:56px;text-align:center;margin-bottom:12px}
.svc-modal-name{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;text-align:center;color:var(--white);margin-bottom:6px}
.svc-modal-desc{font-size:14px;color:var(--dimmed);text-align:center;line-height:1.6;margin-bottom:20px}
.svc-call-btn{
  display:block;width:100%;background:var(--gold);color:#000;border:none;
  border-radius:12px;padding:16px;font-family:'Cormorant Garamond',serif;
  font-size:20px;font-weight:600;letter-spacing:1px;cursor:pointer;transition:.2s;
  text-align:center;
}
.svc-call-btn:hover{background:var(--gold2)}

/* ── v7: WIFI INFO on home ────────────────────────────────────────────────────── */
.wifi-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:16px}
.wifi-ssid{font-family:'DM Mono',monospace;font-size:13px;color:var(--gold)}
.wifi-pass{font-family:'DM Mono',monospace;font-size:12px;color:var(--silver)}

/* ── v7: EPG button on player ─────────────────────────────────────────────────── */
.epg-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.7);border-radius:7px;padding:5px 12px;font-size:12px;cursor:pointer;transition:.15s}
.epg-btn:hover{background:rgba(255,255,255,0.14);color:#fff}


/* ════════════════════════════════════════════════════════════════════════
   V8 CSS
   ════════════════════════════════════════════════════════════════════════ */

/* ── Header message bell ──────────────────────────────────────────────── */
.hdr-msg-badge {
  position:absolute;top:-5px;right:-5px;
  background:var(--red);color:#fff;
  font-family:'DM Mono',monospace;font-size:9px;font-weight:700;
  min-width:16px;height:16px;border-radius:8px;
  display:none;align-items:center;justify-content:center;padding:0 3px;
  border:2px solid var(--bg);
}
.hdr-msg-badge.on{display:flex}

/* ── Messages Inbox Screen ────────────────────────────────────────────── */
#screen-messages{padding:28px 32px;max-width:820px;margin:0 auto}
.msg-inbox-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.msg-inbox-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--white)}
.msg-mark-all{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);
  color:var(--dimmed);border-radius:8px;padding:7px 16px;cursor:pointer;font-size:12px;transition:.2s}
.msg-mark-all:hover{color:var(--white);border-color:rgba(255,255,255,0.15)}

.msg-card-inbox{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:14px;padding:20px 22px;margin-bottom:12px;
  transition:.15s;cursor:pointer;position:relative;
}
.msg-card-inbox:hover{border-color:var(--border2);background:var(--bg3)}
.msg-card-inbox.unread{border-left:3px solid var(--gold)}
.msg-card-inbox.emergency{border-left:3px solid var(--red)}
.msg-card-inbox.birthday{border-left:3px solid #9b7bff}
.mci-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.mci-icon{font-size:22px;flex-shrink:0}
.mci-type{font-size:9px;font-family:'DM Mono',monospace;letter-spacing:1px;
  text-transform:uppercase;padding:2px 8px;border-radius:10px}
.mci-type.emergency{background:rgba(232,72,85,0.15);color:var(--red)}
.mci-type.normal{background:rgba(201,168,76,0.12);color:var(--gold)}
.mci-type.room{background:rgba(74,158,255,0.12);color:#4a9eff}
.mci-type.birthday{background:rgba(155,123,255,0.12);color:#9b7bff}
.mci-title{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:400;
  color:var(--white);flex:1}
.mci-time{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);flex-shrink:0}
.mci-body{font-size:13px;color:var(--dimmed);line-height:1.6}
.mci-unread-dot{position:absolute;top:18px;right:18px;width:8px;height:8px;
  border-radius:50%;background:var(--gold)}
.msg-empty{text-align:center;padding:48px 24px;color:var(--muted)}
.msg-empty-icon{font-size:48px;margin-bottom:12px}

/* ── Prayer Times Screen ──────────────────────────────────────────────── */
#screen-prayers{padding:0;display:flex;flex-direction:column;height:100%}
.prayer-hero{
  background:linear-gradient(160deg,#050510 0%,#0a0520 40%,#050010 100%);
  padding:36px 40px 28px;position:relative;overflow:hidden;flex-shrink:0;
}
.prayer-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 50%,rgba(201,168,76,0.05) 0%,transparent 70%);
}
.prayer-city{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:6px}
.prayer-date-greg{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--white)}
.prayer-date-hijri{font-family:'DM Mono',monospace;font-size:12px;color:var(--gold);
  letter-spacing:1px;margin-top:2px}
.prayer-next-lbl{font-size:11px;color:var(--muted);font-family:'DM Mono',monospace;
  letter-spacing:1px;text-transform:uppercase;margin-top:18px;margin-bottom:4px}
.prayer-next-name{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;
  color:var(--gold);letter-spacing:2px}
.prayer-countdown{font-family:'DM Mono',monospace;font-size:18px;color:var(--white);
  letter-spacing:3px;margin-top:2px}

.prayer-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;padding:24px 40px;flex:1;align-content:start;
}
.prayer-tile{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:14px;padding:20px 22px;transition:.2s;
}
.prayer-tile.next{
  border-color:rgba(201,168,76,0.5);
  background:rgba(201,168,76,0.06);
  box-shadow:0 0 30px rgba(201,168,76,0.08);
}
.prayer-tile.past{opacity:.4}
.pt-name{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pt-time{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;
  color:var(--white);letter-spacing:2px}
.pt-arabic{font-size:18px;color:var(--gold);margin-top:4px;text-align:right;
  font-family:'Arial',sans-serif}
.prayer-tile.next .pt-name{color:var(--gold)}
.prayer-tile.next .pt-time{color:var(--gold2)}

/* ── Prayer widget on home screen ──────────────────────────────────────── */
.prayer-widget{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:14px;padding:16px 20px;
  display:flex;align-items:center;gap:18px;cursor:pointer;transition:.15s;
}
.prayer-widget:hover{border-color:rgba(201,168,76,0.3)}
.pw-icon{font-size:28px;flex-shrink:0}
.pw-next-lbl{font-size:10px;color:var(--muted);font-family:'DM Mono',monospace;
  letter-spacing:1px;text-transform:uppercase;margin-bottom:2px}
.pw-next-name{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--gold)}
.pw-next-time{font-family:'DM Mono',monospace;font-size:13px;color:var(--white);margin-top:1px}
.pw-all{display:flex;gap:14px;flex:1;justify-content:flex-end;flex-wrap:wrap}
.pw-item{text-align:center}
.pw-item-name{font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);
  text-transform:uppercase;letter-spacing:1px}
.pw-item-time{font-size:13px;color:var(--dimmed);margin-top:1px}
.pw-item.next .pw-item-time{color:var(--gold)}

/* ── Prayer adhan notification ─────────────────────────────────────────── */
#prayer-notify{
  position:fixed;top:0;left:0;right:0;z-index:9200;
  display:none;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,0.95),rgba(0,0,0,0.85));
  padding:28px 40px;gap:24px;border-bottom:1px solid rgba(201,168,76,0.3);
  backdrop-filter:blur(12px);
}
#prayer-notify.on{display:flex}
.pn-crescent{font-size:44px;animation:pnPulse 2s ease-in-out infinite}
@keyframes pnPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.8}}
.pn-name{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:300;color:var(--gold);letter-spacing:3px}
.pn-arabic{font-size:22px;color:var(--white);font-family:'Arial',sans-serif}
.pn-time{font-family:'DM Mono',monospace;font-size:14px;color:var(--dimmed);margin-top:4px}
.pn-dismiss{position:absolute;top:12px;right:16px;background:rgba(255,255,255,0.06);
  border:none;color:var(--dimmed);border-radius:6px;padding:4px 12px;cursor:pointer;font-size:12px}


/* ═══ V8: DYNAMIC NAVIGATION ═══════════════════════════════════════════════════ */

/* ── Bottom nav bar ────────────────────────────────────────────────────────── */
#bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(6,6,10,0.96);border-top:1px solid rgba(255,255,255,0.07);
  backdrop-filter:blur(16px);
  display:none;
  justify-content:space-around;align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom,0);
  min-height:60px;
}
#bottom-nav.visible{display:flex}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:8px 4px;cursor:pointer;transition:.15s;
  border:none;background:transparent;color:var(--muted);
  font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.3px;
  position:relative;
}
.bn-item:hover{color:rgba(240,240,248,0.7)}
.bn-item.active{color:var(--gold)}
.bn-item.active::before{
  content:'';position:absolute;top:0;left:20%;right:20%;height:2px;
  background:var(--gold);border-radius:0 0 2px 2px;
}
.bn-icon{font-size:20px;line-height:1;transition:.15s}
.bn-item.active .bn-icon{transform:translateY(-1px)}
.bn-label{font-size:10px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px}

/* ── Top nav button styles ──────────────────────────────────────────────────── */

/* pill (default) */
#top-nav.style-pill .nav-btn{
  padding:7px 16px;border-radius:20px;border:1px solid transparent;
  background:transparent;color:var(--muted);font-family:'Outfit',sans-serif;
  font-size:13px;cursor:pointer;transition:.15s;white-space:nowrap;
}
#top-nav.style-pill .nav-btn:hover{background:rgba(255,255,255,0.06);color:var(--white)}
#top-nav.style-pill .nav-btn.active{background:rgba(201,168,76,0.15);color:var(--gold);border-color:rgba(201,168,76,0.3)}

/* flat */
#top-nav.style-flat .nav-btn{
  padding:8px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;
  background:transparent;color:var(--muted);font-family:'Outfit',sans-serif;
  font-size:13px;cursor:pointer;transition:.15s;white-space:nowrap;
}
#top-nav.style-flat .nav-btn:hover{color:var(--white)}
#top-nav.style-flat .nav-btn.active{color:var(--gold);border-bottom-color:var(--gold)}

/* boxed */
#top-nav.style-boxed .nav-btn{
  padding:7px 16px;border-radius:6px;border:1px solid var(--border);
  background:var(--bg3);color:var(--text2);font-family:'Outfit',sans-serif;
  font-size:13px;cursor:pointer;transition:.15s;white-space:nowrap;margin:0 2px;
}
#top-nav.style-boxed .nav-btn:hover{background:var(--bg4);color:var(--white)}
#top-nav.style-boxed .nav-btn.active{background:var(--gold3);color:var(--gold);border-color:rgba(201,168,76,0.4)}

/* icon */
#top-nav.style-icon .nav-btn{
  padding:6px 14px;border-radius:8px;border:none;
  background:transparent;color:var(--muted);font-family:'Outfit',sans-serif;
  font-size:12px;cursor:pointer;transition:.15s;white-space:nowrap;
  display:flex;align-items:center;gap:5px;
}
#top-nav.style-icon .nav-btn:hover{background:rgba(255,255,255,0.06);color:var(--white)}
#top-nav.style-icon .nav-btn.active{background:rgba(201,168,76,0.12);color:var(--gold)}

/* When bottom nav is active, shift main content up to not be obscured */
body.nav-bottom #root{padding-bottom:60px}
body.nav-bottom header{padding-bottom:0}
body.nav-bottom #top-nav{display:none}

/* When emergency ticker is on AND bottom nav, give extra space */
body.emergency-active.nav-bottom #root{padding-top:32px;padding-bottom:60px}

/* News ticker pushes content up so it's not hidden behind the ticker */
body.news-ticker-active #root{padding-bottom:36px}
body.news-ticker-active.nav-bottom #root{padding-bottom:calc(60px + 36px)}
/* Mobile: bottom nav is always on, so always combine */
@media(max-width:640px){
  body.news-ticker-active #root{padding-bottom:calc(60px + 36px)}
}


/* ═══ V8: PROMO SLIDES ═════════════════════════════════════════════════════════ */
#promo-slides-wrap{
  position:relative;overflow:hidden;
  background:var(--bg2);
}
/* Full-width style */
#promo-slides-wrap.style-full{
  height:46vh;min-height:260px;
}
/* Side-by-side style */
#promo-slides-wrap.style-side{
  height:28vh;min-height:180px;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
}
.promo-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
  opacity:0;transition:opacity .8s ease;pointer-events:none;
}
.promo-slide.active{opacity:1;pointer-events:auto}
.promo-slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,6,10,0.85) 0%,rgba(6,6,10,0.2) 50%,transparent 100%);
}
.promo-slide-content{
  position:relative;z-index:1;padding:28px 32px;
}
.promo-slide-title{
  font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;
  color:var(--white);margin-bottom:4px;text-shadow:0 2px 12px rgba(0,0,0,0.5);
}
.promo-slide-sub{
  font-size:13px;color:rgba(240,240,248,0.7);
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}
/* Dots */
.promo-dots{
  position:absolute;bottom:14px;right:18px;
  display:flex;gap:5px;z-index:2;
}
.promo-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.3);transition:.3s;cursor:pointer;
}
.promo-dot.active{background:var(--gold);width:18px;border-radius:3px;}
/* Side style - two visible at once */
#promo-slides-wrap.style-side .promo-slide{
  position:relative;flex-shrink:0;width:100%;height:100%;opacity:1;
}
#promo-slides-wrap.style-side .promo-slide:not(.side-a):not(.side-b){display:none}


/* ── WELCOME SECTION ─────────────────────────────────────────────────────────── */
.welcome-section{padding:32px;display:flex;align-items:center;gap:28px;
  background:linear-gradient(135deg,var(--bg2),var(--bg3));
  border-bottom:1px solid var(--border)}
.welcome-photo{width:180px;height:140px;object-fit:cover;border-radius:12px;
  flex-shrink:0;border:1px solid var(--border2)}
.welcome-text-wrap{flex:1}
.welcome-hotel{font-family:'DM Mono',monospace;font-size:10px;color:var(--gold);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:8px}
.welcome-title{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;
  color:var(--white);margin-bottom:10px;line-height:1.2}
.welcome-msg{font-size:14px;color:var(--dimmed);line-height:1.7}
/* Fullscreen welcome */
.welcome-full{position:relative;height:40vh;min-height:220px;overflow:hidden;
  background-size:cover;background-position:center;display:flex;
  align-items:flex-end;padding:32px;border-bottom:1px solid var(--border)}
.welcome-full-overlay{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,6,10,0.9) 0%,rgba(6,6,10,.3) 60%,transparent 100%)}
.welcome-full-content{position:relative;z-index:1}

/* ── SIDE-BY-SIDE: welcome left + promo right ──────────────────────────────── */
.home-split-hero{display:grid;grid-template-columns:1fr 1fr;height:46vh;min-height:260px;overflow:hidden}
.home-split-hero .split-welcome{
  display:flex;flex-direction:column;justify-content:center;padding:36px 32px;
  background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);
  border-right:1px solid var(--border);position:relative;overflow:hidden;
}
.home-split-hero .split-welcome::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(201,168,76,0.06) 0%,transparent 70%);
  pointer-events:none;
}
.home-split-hero #promo-slides-wrap{height:100% !important;min-height:unset !important}

/* ═══ CONTENT PAGE DETAIL OVERLAY ═══════════════════════════════════════════ */
.info-overlay-backdrop {
  position:fixed;inset:0;z-index:5000;
  background:rgba(0,0,0,0);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(0px);
  transition:background .3s,backdrop-filter .3s;
  pointer-events:none;
}
.info-overlay-backdrop.info-overlay-open { pointer-events:auto; }
.info-overlay-backdrop.info-overlay-visible {
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
}
.info-overlay-panel {
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:20px;width:860px;max-width:96vw;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(32px) scale(.97);opacity:0;
  transition:transform .3s ease,opacity .3s ease;
}
.info-overlay-visible .info-overlay-panel {
  transform:translateY(0) scale(1);opacity:1;
}
.info-overlay-hdr {
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px 18px;border-bottom:1px solid var(--border);
  flex-shrink:0;gap:12px;
}
.info-overlay-hdr-left { display:flex;align-items:center;gap:14px;min-width:0; }
.info-overlay-back {
  background:var(--bg3);border:1px solid var(--border2);color:var(--dimmed);
  width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s;
}
.info-overlay-back:hover { background:var(--bg4);color:var(--gold); }
.info-overlay-group {
  font-family:'DM Mono',monospace;font-size:9px;color:var(--gold);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:4px;
}
.info-overlay-title {
  font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;
  color:var(--white);line-height:1.2;
}
.info-overlay-close {
  background:var(--bg3);border:1px solid var(--border2);color:var(--white);
  width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:.15s;
}
.info-overlay-close:hover { background:var(--bg4);border-color:var(--border2);color:var(--gold); }
.info-overlay-body {
  flex:1;overflow-y:auto;padding:18px 24px 24px;
}
.info-overlay-body::-webkit-scrollbar{width:4px}
.info-overlay-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* ── Item list rows ─────────────────────────────────────────────── */
.info-list-row {
  display:flex;align-items:center;gap:16px;
  background:var(--bg3);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;margin-bottom:10px;cursor:pointer;
  transition:border-color .15s,transform .15s;
}
.info-list-row:last-child { margin-bottom:0; }
.info-list-row:hover { border-color:var(--gold);transform:translateX(4px); }
.info-list-thumb {
  width:100px;height:70px;border-radius:8px;overflow:hidden;
  background:var(--bg4);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:22px;
}
.info-list-thumb img { width:100%;height:100%;object-fit:cover;display:block; }
.info-list-text { flex:1;min-width:0; }
.info-list-title {
  font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:400;
  color:var(--white);margin-bottom:5px;line-height:1.3;
}
.info-list-desc {
  font-size:12px;color:var(--dimmed);line-height:1.5;
  overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.info-list-arrow { color:var(--gold);font-size:18px;flex-shrink:0; }

/* ── Item detail (side by side) ─────────────────────────────────── */
.info-detail-wrap {
  display:flex;gap:28px;align-items:flex-start;
}
.info-detail-photo {
  flex:0 0 42%;max-width:42%;border-radius:14px;overflow:hidden;
  background:var(--bg4);border:1px solid var(--border);
}
.info-detail-photo img {
  width:100%;display:block;object-fit:cover;max-height:420px;
}
.info-detail-photo-empty {
  height:260px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:48px;
}
.info-detail-content { flex:1;min-width:0;padding-top:4px; }
.info-detail-title {
  font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:400;
  color:var(--white);line-height:1.3;margin-bottom:16px;
}
.info-detail-desc {
  font-size:14px;color:var(--dimmed);line-height:1.85;white-space:pre-line;
}
.info-detail-html {
  font-size:14px;color:var(--dimmed);line-height:1.85;
}
.info-detail-html h1,.info-detail-html h2,.info-detail-html h3 {
  font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--white);margin:14px 0 8px;
}
.info-detail-html p { margin:0 0 10px; }
.info-detail-html ul,.info-detail-html ol { padding-left:20px;margin:0 0 10px; }
.info-detail-html li { margin-bottom:4px; }
.info-detail-html strong,.info-detail-html b { color:var(--white); }
.info-detail-html a { color:var(--gold);text-decoration:none; }

.info-empty { text-align:center;color:var(--muted);padding:48px 24px;font-size:14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TV MODE — body.tv-mode (applied by JS when ?platform=tv)
   10-foot UI: D-pad navigation, no mouse, Chromecast / Android TV.
   Sections:
     1. Global baseline (cursor, font-size)
     2. Universal focus ring
     3. Font-size floor (key readable elements ≥ 20px)
     4. Channel tile dimensions (≥ 260×150 px)
     5. Player controls always visible
     6. VLC scrubber always visible
     7. Hover neutralisation (prevents mouse-style effects on TV)
     8. Focus equivalents (what hover did, now on :focus)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Global baseline ───────────────────────────────────────────────────── */
body.tv-mode,
body.tv-mode * { cursor: none !important; }

body.tv-mode { font-size: 20px; }

/* Hamburger drawer: never shown in TV mode — D-pad drives the top-nav instead */
body.tv-mode .hdr-hamburger { display: none !important; }
body.tv-mode #top-nav       { display: flex !important; }
body.tv-mode .hdr-nav-drawer,
body.tv-mode .hdr-nav-scrim { display: none !important; }

/* Nav bar: scrollable row so items never overflow off-screen on narrow viewports */
body.tv-mode nav {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
body.tv-mode nav::-webkit-scrollbar { display: none; }
body.tv-mode .nav-btn { padding: 8px 12px; }

/* ── 2. Universal focus ring ──────────────────────────────────────────────── */
/* Force the ring on every focus event — TV navigation is always keyboard,
   so we don't want :focus-visible to suppress it. */
body.tv-mode :focus,
body.tv-mode :focus-visible,
body.tv-mode :focus:not(:focus-visible) {
  outline: 4px solid #fff !important;
  outline-offset: 4px !important;
}

/* ── 3. Font-size floor ───────────────────────────────────────────────────── */
body.tv-mode .nav-btn,
body.tv-mode .ch-name,
body.tv-mode .ch-row-name,
body.tv-mode .mv-title,
body.tv-mode .sec-title,
body.tv-mode .hero-title,
body.tv-mode .svc-title,
body.tv-mode .it-title,
body.tv-mode .btn-hero,
body.tv-mode .ctrl-btn,
body.tv-mode .filter-chip,
body.tv-mode .country-tab,
body.tv-mode .reg-btn { font-size: 20px; }

/* Secondary labels — legible on a TV but don't need full 20px */
body.tv-mode .ch-num,
body.tv-mode .ch-row-num,
body.tv-mode .ch-epg-now,
body.tv-mode .ch-epg-next,
body.tv-mode .ch-row-epg,
body.tv-mode .mv-sub,
body.tv-mode .sec-count,
body.tv-mode .ch-group-btn { font-size: 16px; }

/* ── 4. Channel tile dimensions ───────────────────────────────────────────── */
body.tv-mode .ch-card      { width: 260px; min-height: 150px; }
body.tv-mode .ch-img       { height: 110px; font-size: 42px; }

/* ── TV mode: full-screen 3×4 paginated grid ─────────────────────────────
   The sidebar expands to 100 % width; the player-area collapses to zero.
   The video element stays in the DOM so requestFullscreen() still works —
   Chrome's top-layer promotion does not require the element to be visible. */
body.tv-mode .ch-sidebar     { width: auto; flex: 1; border-right: none; }
body.tv-mode .tv-player-area { overflow: hidden; flex: 0 0 0; min-width: 0; }

/* Grid replaces the vertical scroll list */
body.tv-mode .ch-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 20px;
  padding: 20px 32px;
  overflow: hidden;   /* no scroll — page flip handles navigation */
  flex: 1;            /* fills remaining sidebar column height */
}

/* Cards fill their grid cell completely */
body.tv-mode .ch-list .ch-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-shrink: unset;
  display: flex;
  flex-direction: column;
}
body.tv-mode .ch-list .ch-img  { flex: 1; height: auto; min-height: 80px; }
body.tv-mode .ch-list .ch-info { flex-shrink: 0; }

/* Playing-state highlight for grid cards */
.ch-card.playing { border-color: var(--gold); background: var(--gold4); }

/* ── 5. Player controls always visible ────────────────────────────────────── */
/* Mouse mode fades controls on idle — TV has no hover to bring them back. */
body.tv-mode .player-wrap .player-controls { opacity: 1 !important; transition: none; }

/* ── 6. VLC scrubber always visible ──────────────────────────────────────── */
body.tv-mode .vlc-track .vlc-track-bg   { height: 5px; }
body.tv-mode .vlc-track .vlc-track-thumb { opacity: 1; }
/* Suppress the expand animation that hover normally triggers */
body.tv-mode .vlc-track:hover .vlc-track-bg   { height: 5px; }
body.tv-mode .vlc-track:hover .vlc-track-thumb { opacity: 1; }

/* ── 7. Hover neutralisation ──────────────────────────────────────────────── */
/* On real Cast/Android TV there is no pointer so :hover never fires anyway,
   but Android WebView in TV mode can have a D-pad-driven pointer; resetting
   hover here ensures no stray mouse-style highlight leaks through. */
body.tv-mode .nav-btn:hover          { color:var(--muted);background:transparent }
body.tv-mode .theme-toggle:hover     { color:var(--dimmed);border-color:var(--border2) }
body.tv-mode .btn-hero-primary:hover { background:var(--gold) }
body.tv-mode .btn-hero-ghost:hover   { background:transparent;opacity:1 }
body.tv-mode .sec-link:hover         { color:var(--gold) }
body.tv-mode .h-nav-btn:hover        { background:rgba(6,8,14,.85);border-color:var(--border2);color:var(--gold) }
body.tv-mode .ch-card:hover          { border-color:var(--border);transform:none;box-shadow:none }
body.tv-mode .ch-card:hover .ch-play { opacity:0 }
body.tv-mode .mv-card:hover          { transform:none }
body.tv-mode .ch-group-btn:hover     { border-color:var(--border);color:var(--dimmed) }
body.tv-mode .ch-row:hover           { background:transparent }
body.tv-mode .ctrl-btn:hover         { background:transparent }
body.tv-mode .ctrl-btn.play:hover    { background:var(--gold3) }
body.tv-mode .filter-chip:hover      { border-color:var(--border);color:var(--dimmed) }
body.tv-mode .movie-tile:hover       { transform:none }
body.tv-mode .movie-tile:hover .mt-overlay { opacity:0 }
body.tv-mode .vlc-btn:hover          { color:var(--muted);background:transparent }
body.tv-mode .vlc-skip:hover         { color:var(--muted);background:transparent }
body.tv-mode .vlc-play:hover         { background:var(--gold);transform:none }
body.tv-mode .r-btn:hover            { border-color:var(--border);color:var(--dimmed) }
body.tv-mode .r-btn.play:hover       { background:var(--gold) }
body.tv-mode .country-tab:hover      { color:var(--dimmed) }
body.tv-mode .station-card:hover     { border-color:var(--border);background:var(--bg2) }
body.tv-mode .ig-btn:hover           { color:var(--muted) }
body.tv-mode .info-tile:hover        { border-color:var(--border);transform:none }
body.tv-mode .reg-btn:hover          { background:var(--gold) }
body.tv-mode .reg-numpad button:hover,
body.tv-mode .reg-numpad button:active { background:var(--bg3);border-color:var(--border) }
body.tv-mode .svc-tile:hover         { border-color:var(--border);background:var(--bg2);transform:none }
body.tv-mode .svc-call-btn:hover     { background:var(--gold) }
body.tv-mode .epg-btn:hover          { background:transparent;color:var(--dimmed) }
body.tv-mode .hdr-msg-btn:hover      { background:transparent;color:var(--dimmed) }
body.tv-mode .msg-mark-all:hover     { color:var(--dimmed);border-color:var(--border) }
body.tv-mode .msg-card-inbox:hover   { border-color:var(--border);background:var(--bg2) }
body.tv-mode .msg-dismiss:hover      { background:transparent }
body.tv-mode .mb-close:hover         { color:var(--dimmed) }
body.tv-mode .bday-close:hover       { background:transparent }
body.tv-mode .epg-close:hover        { color:var(--dimmed) }
body.tv-mode .info-overlay-back:hover  { background:var(--bg3);color:var(--dimmed) }
body.tv-mode .info-overlay-close:hover { background:var(--bg3);border-color:var(--border);color:var(--dimmed) }
body.tv-mode .info-list-row:hover    { border-color:var(--border);transform:none }
body.tv-mode .prayer-widget:hover    { border-color:rgba(201,168,76,0.1) }
body.tv-mode .bn-item:hover          { color:var(--muted) }
body.tv-mode .et-inner:hover,
body.tv-mode .nt-inner:hover         { animation-play-state:running }
/* Nav style variants */
body.tv-mode #top-nav.style-pill .nav-btn:hover,
body.tv-mode #top-nav.style-flat .nav-btn:hover,
body.tv-mode #top-nav.style-boxed .nav-btn:hover,
body.tv-mode #top-nav.style-icon .nav-btn:hover  { background:transparent;color:var(--muted) }
/* Light-theme hover overrides (specificity 0,4,1 — must match exactly to win) */
html[data-theme='light'] .screen .ig-btn:hover,
html[data-theme='light'] .screen .filter-chip:hover,
html[data-theme='light'] .screen .country-tab:hover,
html[data-theme='light'] .screen .ch-group-btn:hover,
html[data-theme='light'] .screen .msg-mark-all:hover,
html[data-theme='light'] .screen .epg-btn:hover,
html[data-theme='light'] .screen .ctrl-btn:hover { color:var(--dimmed) }

/* ── 8. Focus equivalents ─────────────────────────────────────────────────── */
/* Each rule mirrors its :hover counterpart exactly. */
body.tv-mode .nav-btn:focus          { color:var(--white);background:var(--bg3) }
body.tv-mode .theme-toggle:focus     { color:var(--white);border-color:var(--gold) }
body.tv-mode .btn-hero-primary:focus { background:var(--gold2) }
body.tv-mode .btn-hero-ghost:focus   { background:var(--overlay-light);opacity:0.8 }
body.tv-mode .sec-link:focus         { color:var(--gold2) }
body.tv-mode .h-nav-btn:focus        { background:rgba(12,16,26,.95);border-color:var(--gold);color:var(--gold2) }
body.tv-mode .ch-card:focus          { border-color:var(--gold);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.4) }
body.tv-mode .ch-card:focus .ch-play { opacity:1 }
body.tv-mode .mv-card:focus          { transform:scale(1.04) }
body.tv-mode .ch-group-btn:focus     { border-color:var(--border2);color:var(--white) }
body.tv-mode .ch-row:focus           { background:var(--bg3) }
body.tv-mode .ctrl-btn:focus         { background:var(--border2) }
body.tv-mode .ctrl-btn.play:focus    { background:var(--gold2) }
body.tv-mode .filter-chip:focus      { border-color:var(--border2);color:var(--white) }
body.tv-mode .vod-top-tab            { font-size:22px;padding:20px 12px }
body.tv-mode .vod-top-tab:focus      { color:var(--gold);border-bottom-color:var(--gold) }
body.tv-mode .vod-genre-card:focus   { border-color:var(--gold);background:var(--gold3) }
body.tv-mode .movie-tile:focus       { transform:translateY(-6px) }
body.tv-mode .movie-tile:focus .mt-overlay { opacity:1 }
body.tv-mode .vlc-btn:focus          { color:#fff;background:rgba(255,255,255,.1) }
body.tv-mode .vlc-skip:focus         { color:#fff;background:rgba(255,255,255,.1) }
body.tv-mode .vlc-play:focus         { background:var(--gold2);transform:scale(1.07) }
body.tv-mode .r-btn:focus            { border-color:var(--gold);color:var(--gold) }
body.tv-mode .r-btn.play:focus       { background:var(--gold2) }
body.tv-mode .country-tab:focus      { color:var(--white) }
body.tv-mode .station-card:focus     { border-color:var(--border2);background:var(--bg3) }
body.tv-mode .ig-btn:focus           { color:var(--white) }
body.tv-mode .info-tile:focus        { border-color:var(--border2);transform:translateY(-3px) }
body.tv-mode .reg-btn:focus          { background:var(--gold2) }
body.tv-mode .reg-numpad button:focus { background:var(--bg4);border-color:var(--gold) }
body.tv-mode .svc-tile:focus         { border-color:var(--gold);background:var(--bg3);transform:translateY(-2px) }
body.tv-mode .svc-call-btn:focus     { background:var(--gold2) }
body.tv-mode .epg-btn:focus          { background:rgba(255,255,255,0.14);color:#fff }
body.tv-mode .hdr-msg-btn:focus      { background:rgba(255,255,255,0.09);color:var(--white) }
body.tv-mode .msg-mark-all:focus     { color:var(--white);border-color:rgba(255,255,255,0.15) }
body.tv-mode .msg-card-inbox:focus   { border-color:var(--border2);background:var(--bg3) }
body.tv-mode .msg-dismiss:focus      { background:rgba(255,255,255,0.14) }
body.tv-mode .mb-close:focus         { color:#fff }
body.tv-mode .bday-close:focus       { background:rgba(212,168,67,0.22) }
body.tv-mode .epg-close:focus        { color:#fff }
body.tv-mode .info-overlay-back:focus  { background:var(--bg4);color:var(--gold) }
body.tv-mode .info-overlay-close:focus { background:var(--bg4);border-color:var(--border2);color:var(--gold) }
body.tv-mode .info-list-row:focus    { border-color:var(--gold);transform:translateX(4px) }
body.tv-mode .prayer-widget:focus    { border-color:rgba(201,168,76,0.3) }
/* Nav style variants */
body.tv-mode #top-nav.style-pill .nav-btn:focus  { background:rgba(255,255,255,0.06);color:var(--white) }
body.tv-mode #top-nav.style-flat .nav-btn:focus   { color:var(--white) }
body.tv-mode #top-nav.style-boxed .nav-btn:focus  { background:var(--bg4);color:var(--white) }
body.tv-mode #top-nav.style-icon .nav-btn:focus   { background:rgba(255,255,255,0.06);color:var(--white) }

/* ── Fullscreen OSD ───────────────────────────────────────────────────────── */
/* Sits above .player-controls (DOM order) via pointer-events:none so clicks  */
/* still reach the video and control buttons underneath.                       */
#fs-osd {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* padding-bottom clears the .player-controls strip (~74 px) */
  padding: 56px 40px 84px;
  background: linear-gradient(transparent, rgba(0,0,0,0.84) 42%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.35s ease;
}
#fs-osd.fs-osd--visible { opacity: 1; }
.fs-osd-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.fs-osd-logo {
  width: 64px; height: 64px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.fs-osd-logo img { width: 100%; height: 100%; object-fit: contain; }
.fs-osd-info { flex: 1; min-width: 0; }
.fs-osd-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px; font-weight: 300; letter-spacing: 2px;
  color: #fff; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-osd-epg {
  font-size: 15px; color: rgba(255,255,255,0.65);
  margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-osd-time {
  font-family: 'DM Mono', monospace;
  font-size: 42px; font-weight: 300; letter-spacing: 3px;
  color: #fff; flex-shrink: 0;
}
.fs-osd-bar-wrap {
  margin-top: 14px; height: 3px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px; overflow: hidden;
}
.fs-osd-bar {
  height: 100%; width: 0%;
  background: var(--gold, #c9a84c);
  border-radius: 2px;
  transition: width 1s linear;
}

/* ── Cast button ─────────────────────────────────────────────────────────── */
.cast-btn {
  background: none;
  border: none;
  color: var(--dimmed);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .15s, background .15s;
}
.cast-btn:hover,
.cast-btn:focus { color: var(--white); background: var(--overlay-light); outline: none; }
.cast-btn--connected { color: var(--gold) !important; }
/* Visible against dark player-controls gradient */
.player-controls .cast-btn { color: rgba(255,255,255,0.75); }
.player-controls .cast-btn:hover,
.player-controls .cast-btn:focus { color: #fff; background: var(--overlay-light); }
/* Larger, lighter in the OSD overlay */
#fs-osd .cast-btn { color: rgba(255,255,255,0.55); padding: 8px; }
#fs-osd .cast-btn:hover,
#fs-osd .cast-btn:focus { color: #fff; background: rgba(255,255,255,0.12); }
#fs-osd .cast-btn--connected { color: var(--gold) !important; }

/* ── Keyboard accessibility: focus equivalents for hover-only reveals ─────
   Applied globally so desktop keyboard users benefit even without tv-mode.
   tv-mode equivalents in the tv-mode block above are more specific and take
   precedence for TV clients; these handle ordinary keyboard navigation.    */

/* 1. Player controls — reveal when any child button has keyboard focus */
.player-wrap:focus-within .player-controls { opacity: 1; }

/* 2. Channel card play-icon reveal */
.ch-card:focus .ch-play { opacity: 1; }

/* 3. VOD movie-tile overlay reveal */
.movie-tile:focus .mt-overlay { opacity: 1; }

/* 4. VOD seek bar — expand track and show scrubber thumb on focus */
.vlc-track:focus-within .vlc-track-bg    { height: 5px; }
.vlc-track:focus-within .vlc-track-thumb { opacity: 1; }

/* 5. Tickers — pause marquee when the scrolling container is focused */
.et-inner:focus,
.nt-inner:focus { animation-play-state: paused; outline: none; }


/* ── CAST QR BADGE ──────────────────────────────────────────────────────────── */
.cast-qr-badge{
  position:fixed;z-index:150;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:rgba(255,255,255,0.96);border-radius:10px;padding:8px;
  box-shadow:0 4px 24px rgba(0,0,0,0.35);pointer-events:none;
}
.cast-qr-badge canvas{border-radius:4px;display:block}
.cqr-label{
  font-size:9px;font-family:'DM Mono',monospace;
  color:#333;letter-spacing:1px;text-align:center;white-space:nowrap;
}
.cqr-pos-bottom-right{bottom:24px;right:24px}
.cqr-pos-bottom-left {bottom:24px;left:24px}
.cqr-pos-top-right   {top:80px;right:24px}
.cqr-pos-top-left    {top:80px;left:24px}

/* Cast QR inside screensaver */
#ss-cast-qr{
  position:absolute;bottom:32px;right:32px;
  display:none;flex-direction:column;align-items:center;gap:6px;
  background:rgba(255,255,255,0.95);border-radius:10px;padding:10px;
  box-shadow:0 4px 24px rgba(0,0,0,0.4);
}
#ss-cast-qr canvas{border-radius:4px;display:block}
.ss-cast-label{
  font-family:'DM Mono',monospace;font-size:10px;
  color:#333;letter-spacing:2px;text-align:center;
}

/* ── CAST FULL PAGE ─────────────────────────────────────────────────────────── */
.cast-pg{
  min-height:100%;padding:40px 48px;
  display:flex;flex-direction:column;gap:32px;
}
.cast-pg-hdr{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.cpg-title{
  font-family:'Cormorant Garamond',serif;font-size:clamp(26px,4vw,42px);
  font-weight:300;color:var(--text);letter-spacing:-0.5px;
}
.cpg-room{
  font-family:'DM Mono',monospace;font-size:13px;color:var(--gold);
  background:rgba(201,168,76,0.12);border:1px solid rgba(201,168,76,0.25);
  padding:4px 12px;border-radius:20px;letter-spacing:1px;
}
.cast-pg-body{
  display:flex;gap:48px;align-items:flex-start;flex-wrap:wrap;
}
.cpg-qr-wrap{
  display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0;
}
.cpg-qr-box{
  background:#fff;border-radius:14px;padding:14px;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.cpg-qr-box canvas{display:block;border-radius:6px}
.cpg-scan-hint{
  font-family:'DM Mono',monospace;font-size:11px;
  color:var(--muted);letter-spacing:2px;text-transform:uppercase;text-align:center;
}
.cpg-info{
  flex:1;min-width:240px;display:flex;flex-direction:column;gap:18px;padding-top:4px;
}
.cpg-steps-title{
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;
  color:var(--muted);letter-spacing:2px;text-transform:uppercase;
}
.cpg-steps{display:flex;flex-direction:column;gap:14px}
.cpg-step{
  display:flex;align-items:center;gap:14px;
  font-family:'Outfit',sans-serif;font-size:15px;color:var(--text2);line-height:1.4;
}
.cpg-step-n{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:rgba(201,168,76,0.15);border:1px solid rgba(201,168,76,0.3);
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:12px;color:var(--gold);font-weight:600;
}
.cpg-divider{height:1px;background:var(--border);margin:4px 0}
.cpg-url-label{
  font-family:'DM Mono',monospace;font-size:10px;
  color:var(--muted);letter-spacing:2px;text-transform:uppercase;
}
.cpg-url{
  font-family:'DM Mono',monospace;font-size:13px;color:var(--gold);
  background:rgba(201,168,76,0.07);border:1px solid rgba(201,168,76,0.18);
  border-radius:8px;padding:10px 14px;word-break:break-all;
}
/* Empty / unconfigured state */
.cast-pg-empty{
  min-height:60vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:40px;
}
.cpe-icon{font-size:52px;opacity:.4}
.cpe-title{
  font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;
  color:var(--text);text-align:center;
}
.cpe-sub{
  font-size:14px;color:var(--muted);text-align:center;line-height:1.6;max-width:360px;
}

/* ═══════════════════════════════════════════════════════════════════
   WORLD CLOCK SCREEN
   ═══════════════════════════════════════════════════════════════════ */
.wc-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 0 32px;
}
.wc-header {
  padding: 32px 40px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
}
.wc-header-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.wc-header-sub {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.wc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  padding: 32px 40px;
  align-content: start;
}
@media (max-width: 600px) {
  .wc-grid { padding: 20px 16px; gap: 14px; }
  .wc-header { padding: 20px 16px 16px; }
  .wc-header-title { font-size: 22px; }
}

/* Clock card */
.wc-card {
  border-radius: 18px;
  padding: 28px 24px 20px;
  border: 1px solid var(--border2);
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.wc-card:hover, .wc-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
/* Day theme */
.wc-card.wc-day {
  background: linear-gradient(140deg, var(--bg2) 0%, var(--bg3) 100%);
}
/* Night theme */
.wc-card.wc-night {
  background: linear-gradient(140deg, #0d0d1f 0%, #13132a 100%);
  border-color: rgba(120, 120, 200, 0.15);
}

.wc-city {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.wc-time-wrap {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 8px;
  line-height: 1;
}
.wc-time {
  font-family: 'DM Mono', monospace;
  font-size: 54px;
  font-weight: 300;
  color: var(--white);
  letter-spacing: -1px;
}
.wc-secs {
  font-family: 'DM Mono', monospace;
  font-size: 22px;
  font-weight: 300;
  color: var(--gold);
  padding-bottom: 8px;
  opacity: 0.7;
}
.wc-day-name {
  font-size: 14px;
  color: var(--white);
  font-weight: 400;
  margin-bottom: 2px;
}
.wc-date {
  font-size: 13px;
  color: var(--muted);
}
.wc-abbr {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  color: var(--gold);
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: 0.5px;
}
.wc-icon {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 22px;
  opacity: 0.55;
}

/* ═══════════════════════════════════════════════════════════════════
   ALARM OVERLAY
   ═══════════════════════════════════════════════════════════════════ */
.alarm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 5, 14, 0.97);
  align-items: center;
  justify-content: center;
}
.alarm-overlay.on {
  display: flex;
}
.alarm-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px;
  max-width: 500px;
  width: 100%;
}
.alarm-bell {
  font-size: 88px;
  margin-bottom: 24px;
  animation: alarm-swing 0.5s ease-in-out infinite alternate;
  transform-origin: top center;
  filter: drop-shadow(0 0 24px rgba(201,168,76,0.4));
}
@keyframes alarm-swing {
  from { transform: rotate(-18deg); }
  to   { transform: rotate(18deg);  }
}
.alarm-label {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.alarm-clock {
  font-family: 'DM Mono', monospace;
  font-size: 80px;
  font-weight: 300;
  color: var(--gold);
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: 48px;
}
.alarm-dismiss {
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: 16px;
  padding: 18px 64px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 24px rgba(201,168,76,0.35);
}
.alarm-dismiss:hover { opacity: 0.9; }
.alarm-dismiss:active { transform: scale(0.97); }

/* Admin: timezone chips */
.tz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold4);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 20px;
  padding: 5px 10px 5px 8px;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.tz-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.tz-chip button {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  transition: color .15s;
}
.tz-chip button:hover { color: var(--red, #e05); }

/* ── PMS Guest Welcome Overlay ─────────────────────────────────────────────── */
#guest-welcome {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.93);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px;
  animation: gwFadeIn .6s ease;
}
@keyframes gwFadeIn { from { opacity:0; transform:scale(.97) } to { opacity:1; transform:scale(1) } }


/* ══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Apple HIG quality — v8 refresh
   ══════════════════════════════════════════════════════════════════════ */

/* ── 900px: Tablet / landscape phone ──────────────────────────────── */
@media(max-width:900px){
  /* Header */
  header{height:54px;padding:0 24px;gap:16px}
  .hdr-logo{font-size:18px;letter-spacing:4px}
  .nav-btn{padding:6px 12px;font-size:12px}
  .hdr-weather{display:none}

  /* Home hero */
  .hero-banner{height:36vh;padding:28px 28px}
  .hero-title{font-size:36px}
  .hero-meta{gap:14px}

  /* Home sections */
  .home-section{padding:20px 24px 0}

  /* H-scroll padding */
  .h-scroll{padding:4px 18px 14px}
  .h-nav-btn{display:none}

  /* Channel cards slightly smaller */
  .ch-card{width:155px}
  .ch-img{height:78px}

  /* Movie cards */
  .mv-card{width:148px}
  .mv-poster{height:214px}

  /* Movie grid */
  .movie-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}

  /* Weather */
  .w-details{grid-template-columns:repeat(2,1fr)}
  .w-forecast{grid-template-columns:repeat(2,1fr)}

  /* VOD */
  .vod-search-input{width:100%}
  #screen-vod{padding:0 20px 24px}
  .vod-top-tab{font-size:12px;padding:14px 4px}
  .vod-genre-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
}

/* ── 640px: Mobile phones ──────────────────────────────────────────── */
@media(max-width:640px){
  /* Switch to bottom nav — already in place, enhancing: */
  #top-nav{display:none !important}
  #bottom-nav{display:flex !important}
  body #root{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}

  /* ── RSS ticker floats ABOVE the bottom nav, never hides it ── */
  #news-ticker{
    bottom:calc(64px + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(255,255,255,0.1);
    border-bottom:1px solid rgba(255,255,255,0.05);
    border-radius:0;
  }
  /* Root padding = nav + ticker combined */
  body.news-ticker-active #root{
    padding-bottom:calc(68px + 34px + env(safe-area-inset-bottom,0px)) !important;
  }


  /* ── Header ── */
  header{
    height:52px;padding:0 16px;gap:12px;
    background:rgba(11,11,20,0.92);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:100;
  }
  .hdr-logo{font-size:16px;letter-spacing:3px}

  /* ── Bottom nav — scrollable strip (handles any number of items) ── */
  #bottom-nav{
    height:calc(64px + env(safe-area-inset-bottom,0px));
    padding:0 0 env(safe-area-inset-bottom,0px);
    background:rgba(11,11,20,0.95);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-top:1px solid rgba(255,255,255,0.08);
    /* Scrollable so all items are reachable regardless of count */
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    justify-content:flex-start;
    gap:0;
  }
  #bottom-nav::-webkit-scrollbar{display:none}
  .bn-item{
    flex:0 0 72px;min-width:72px;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:4px;padding:8px 4px 4px;
    border:none;background:transparent;
    cursor:pointer;color:var(--muted);
    transition:color .18s, transform .12s;
    -webkit-tap-highlight-color:transparent;
    min-height:44px;position:relative;
  }
  .bn-item.active{color:var(--gold)}
  /* Active indicator: pill above the icon */
  .bn-item.active::before{
    content:'';
    position:absolute;top:0;
    left:50%;transform:translateX(-50%);
    width:32px;height:3px;
    background:var(--gold);
    border-radius:0 0 3px 3px;
    box-shadow:0 0 8px rgba(201,168,76,0.5);
  }
  .bn-item:active{transform:scale(0.88)}
  .bn-icon{font-size:22px;line-height:1;display:block;transition:transform .18s}
  .bn-item.active .bn-icon{transform:scale(1.08)}
  .bn-label{
    font-size:9px;font-family:'DM Mono',monospace;
    letter-spacing:.3px;text-transform:uppercase;
    line-height:1;display:block;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:68px;text-align:center;
    transition:opacity .18s;
  }
  .bn-item:not(.active) .bn-label{opacity:0.5}
  .bn-top-bar{display:none}

  /* ── Home screen ── */
  .hero-banner{height:30vh;min-height:200px;padding:20px 18px}
  .hero-title{font-size:clamp(24px,6vw,36px)}
  .hero-label{font-size:9px;letter-spacing:2px;margin-bottom:8px}
  .hero-meta{font-size:11px;gap:12px;margin-bottom:14px}
  .btn-hero{padding:9px 18px;font-size:12px}
  .hero-overlay{background:linear-gradient(to right,var(--bg) 0%,rgba(11,11,20,0.6) 70%,var(--bg) 100%)}

  .home-section{padding:16px 14px 0}
  .sec-header{margin-bottom:14px}
  .sec-title{font-size:18px}
  .sec-count{font-size:10px}

  /* Break scroll row out of section padding so cards go edge-to-edge */
  .h-scroll-wrap{margin:0 -14px}
  .h-scroll{padding:4px 14px 12px;gap:10px}
  .h-nav-btn{display:none}

  /* Channel cards on mobile — compact, no "Next" clutter */
  .ch-card{width:140px}
  .ch-img{height:70px;font-size:24px}
  .ch-name{font-size:11px;min-height:unset;-webkit-line-clamp:1;line-clamp:1}
  .ch-num{font-size:9px}
  .ch-info{padding:8px 8px 10px}
  /* Hide "Next:" program on home cards — too verbose on small screen */
  .ch-epg-next{display:none}
  /* Now-playing: single line with ellipsis */
  .ch-epg-now{
    -webkit-line-clamp:1;line-clamp:1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:block;font-size:9px;margin-top:3px;
  }
  .ch-epg-time-red{font-size:8px}

  /* ── Header chips: uniform compact size on mobile ── */
  .theme-toggle,#hdr-room,.hdr-msg-btn,.hdr-time{
    padding:3px 8px;height:24px;font-size:10px;letter-spacing:.5px;
  }
  /* Theme toggle: icon-only emoji, no text */
  .theme-toggle{font-size:0;min-width:28px;padding:3px 6px}
  html[data-theme='dark']  .theme-toggle::after{content:'🌙';font-size:13px}
  html[data-theme='light'] .theme-toggle::after{content:'☀️';font-size:13px}
  /* Message button: icon-only, always shown on mobile */
  .hdr-msg-btn{display:inline-flex;font-size:0;min-width:28px;padding:3px 6px}
  .hdr-msg-btn::before{content:'✉';font-size:13px}
  .hdr-msg-badge{font-size:9px !important;top:-4px;right:-4px}

  /* Movie cards */
  .mv-card{width:130px}
  .mv-poster{height:188px;font-size:36px}
  .mv-title{font-size:12px}
  .mv-sub{font-size:10px}

  /* ── Movie / VOD grid ── */
  .movie-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;padding:14px}
  #screen-vod{padding:0 12px 24px}
  .vod-top-nav{padding:0;margin:0 -12px;position:sticky;top:0}
  .vod-top-tab{font-size:11px;padding:12px 2px;letter-spacing:.03em}
  .vod-genre-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
  .vod-genre-card{padding:14px 12px}

  /* ── TV screen: YouTube-style (player on top, channel list below) ── */
  /* Let main handle page scrolling — remove height:100% so content is taller than screen */
  #screen-tv{
    flex-direction:column;
    height:auto;
    min-height:100%;
    overflow:visible;
  }

  /* Player area: first in visual order, takes its natural height only */
  .tv-player-area{
    order:-1;
    flex:none;            /* override base flex:1 — don't stretch */
    flex-shrink:0;
    overflow:hidden;
  }
  /* Player: full width 16:9 */
  .player-wrap{
    aspect-ratio:16/9;
    max-height:none;
    width:100%;
    border-radius:0;
  }
  /* Mobile: controls hidden by default; tap player to reveal (auto-hides after 4s) */
  .player-wrap:hover .player-controls{opacity:0;pointer-events:none}
  .player-wrap.controls-show .player-controls{opacity:1;pointer-events:auto}

  /* Hide the desktop EPG panel — now-bar replaces it on mobile */
  .ch-epg{display:none}

  /* Show the mobile now-playing bar */
  .tv-now-bar{display:block}

  /* Channel sidebar: below player, full natural height */
  .ch-sidebar{
    order:1;
    width:100%;
    height:auto;
    max-height:none;
    min-height:0;
    border-right:none;
    border-top:1px solid var(--border);
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    overflow:visible;   /* don't clip the header */
    background:var(--bg2);
  }
  /* Sidebar header: always fully visible, never shrink */
  .ch-sidebar-hdr{
    padding:10px 12px 8px;
    flex-shrink:0;
    overflow:visible;
  }
  .ch-sidebar-hdr h2{font-size:14px;margin-bottom:6px}
  .ch-search{padding:7px 10px;font-size:12px}
  /* Genre tabs: always visible */
  .ch-groups-wrap{flex-shrink:0;overflow:hidden}
  .ch-groups{padding:6px 4px 4px}
  .ch-group-btn{padding:4px 10px;font-size:10px}

  /* Channel list: vertical YouTube-style, scrolls within itself */
  .ch-list{
    display:flex;
    flex-direction:column;
    gap:0;
    overflow-x:hidden;
    overflow-y:auto;
    padding:0;
    scrollbar-width:none;
    max-height:55vh;    /* caps the list so pagination stays visible */
  }
  .ch-list::-webkit-scrollbar{display:none}

  /* Each channel row: YouTube horizontal item — thumbnail left, info right */
  .ch-row{
    flex-direction:row;
    width:100%;
    flex-shrink:0;
    height:auto;
    padding:10px 12px;
    gap:10px;
    align-items:center;
    text-align:left;
    border-radius:0;
    border-bottom:1px solid var(--border);
    box-sizing:border-box;
  }
  .ch-row:last-child{border-bottom:none}
  /* 16:9 thumbnail like YouTube */
  .ch-row-logo{
    width:96px !important;
    height:60px !important;
    border-radius:6px !important;
    font-size:22px;
    flex-shrink:0;
  }
  .ch-row-info{flex:1;min-width:0}
  .ch-row-name{
    font-size:13px;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.4;
  }
  .ch-row-num{font-size:11px;margin-top:2px}
  .ch-row-epg{font-size:10px;margin-top:2px;display:block}
  .ch-row-live{font-size:8px;align-self:flex-start}
  .ch-row-right{flex-direction:row;gap:4px;align-items:center}

  /* Pagination bar */
  .ch-sidebar > div[style*="border-top"]{padding:4px 10px;flex-shrink:0}

  /* ── Radio screen ── */
  .radio-player{padding:20px 16px}
  .radio-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:14px}
  .station-card{padding:14px 10px}

  /* ── Weather screen ── */
  .w-details{grid-template-columns:repeat(2,1fr);gap:8px;padding:14px}
  .w-forecast{grid-template-columns:repeat(2,1fr);gap:8px;padding:0 14px 14px}
  .w-current{padding:20px 16px}
  .w-temp{font-size:clamp(52px,14vw,88px)}

  /* ── World Clock screen ── */
  .wc-header{padding:16px 14px 14px}
  .wc-header-title{font-size:20px}
  .wc-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:0 14px 14px}

  /* ── Prayer times ── */
  .prayer-grid{grid-template-columns:repeat(2,1fr);gap:8px;padding:14px}
  .prayer-hero{padding:20px 16px}

  /* ── Messages ── */
  .msg-list{padding:14px}
  .msg-card-inbox{padding:14px 14px}
  .mci-subject{font-size:13px}

  /* ── Services ── */
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}
  .svc-tile{padding:18px 12px;border-radius:12px}
  .svc-icon{font-size:28px}
  .svc-name{font-size:12px}

  /* ── Info tiles ── */
  .info-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}
  .info-tile{padding:16px 12px}

  /* ── Cast screen ── */
  .cast-inner{padding:24px 16px}
  .cast-title{font-size:20px}

  /* ── EPG overlay ── */
  #epg-overlay{
    border-radius:20px 20px 0 0;
    bottom:0;top:auto;
    max-height:75vh;
  }
  .epg-header{padding:16px 16px 12px}

  /* ── Promo slides ── */
  #promo-slides-wrap.style-full{height:36vh;min-height:180px}
  #promo-slides-wrap.style-side{grid-template-columns:1fr;height:auto}
  #promo-slides-wrap.style-side .promo-slide:not(.side-a){display:none}
  .promo-slide-content{padding:16px 18px}
  .promo-slide-title{font-size:20px}

  /* ── Registration screen ── */
  .reg-card{padding:32px 20px;border-radius:20px}
  .reg-logo{font-size:28px;letter-spacing:6px}
  .reg-numpad button{height:52px;font-size:18px;border-radius:14px}

  /* ── Toasts / notifications ── */
  #prayer-notify{padding:12px 16px;gap:12px}
  .pn-name{font-size:16px}
  .pn-arabic{font-size:14px}

  /* ── Message banners ── */
  #msg-banner{padding:14px 14px;gap:10px}
  .mb-title{font-size:13px}
  .mb-body{font-size:12px}

  /* ── Screensaver ── */
  .ss-time{font-size:clamp(52px,18vw,88px)}
  .ss-date{font-size:clamp(13px,3.5vw,18px)}

  /* ── Alarm overlay ── */
  .alarm-clock{font-size:clamp(48px,14vw,80px)}
  .alarm-dismiss{padding:15px 48px;font-size:17px;border-radius:14px}

  /* ── VOD player — mobile optimised controls ── */
  .vlc-bar{
    padding:0 14px calc(14px + env(safe-area-inset-bottom,0px));
    /* Extend gradient higher so controls are readable over video */
    background:linear-gradient(transparent,rgba(6,6,10,0.97) 30%);
  }
  .vlc-seek-row{padding:12px 0 8px;gap:8px}
  .vlc-cur,.vlc-dur{font-size:11px;min-width:38px}
  /* Thicker seek track — easier to tap */
  .vlc-track{height:28px}
  .vlc-track-bg{height:4px}
  .vlc-track-thumb{width:16px;height:16px;opacity:1}
  /* Controls row: wider tap targets */
  .vlc-controls{gap:0;justify-content:space-between;padding:0 4px 4px}
  .vlc-left{gap:0;flex:1;justify-content:flex-start}
  .vlc-right{gap:0;flex:1;justify-content:flex-end}
  .vlc-center{gap:0}
  .vlc-btn{padding:10px;font-size:16px;min-width:44px;min-height:44px}
  .vlc-skip{min-width:52px;padding:6px 4px}
  .vlc-skip svg{width:28px;height:28px}
  .vlc-skip-lbl{font-size:10px}
  /* Play button: larger on mobile */
  .vlc-play{width:58px;height:58px;font-size:24px;margin:0 8px}
  /* Volume: hide on mobile (use device volume keys) */
  .vlc-vol{display:none}
  /* Title: more space */
  .vlc-title{max-width:none;flex:1;font-size:11px}
}

/* ── Landscape phones (rotated, height ≤ 560px, width ≤ 1024px) ──── */
@media (orientation:landscape) and (max-height:560px) and (max-width:1024px){
  /* Switch to compact bottom nav — frees vertical space */
  #top-nav{display:none !important}
  #bottom-nav{display:flex !important}
  /* Landscape phone width (≥641px) triggers the tablet hamburger rule — override it */
  .hdr-hamburger{display:none !important}
  .hdr-nav-drawer,.hdr-nav-scrim{display:none !important}
  body #root{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}

  /* Slim header — account for notch safe areas */
  header{height:40px;padding:0 calc(12px + env(safe-area-inset-right,0px)) 0 calc(12px + env(safe-area-inset-left,0px));gap:8px}
  .hdr-logo{font-size:13px;letter-spacing:2px}
  .hdr-weather,.hdr-time{display:none}
  .theme-toggle,#hdr-room,.hdr-msg-btn{padding:2px 6px;height:22px;font-size:9px}
  .theme-toggle{min-width:24px;padding:2px 4px}

  /* Compact bottom nav strip */
  #bottom-nav{
    height:calc(52px + env(safe-area-inset-bottom,0px));
    padding:0 calc(env(safe-area-inset-right,0px) + 4px) env(safe-area-inset-bottom,0px) calc(env(safe-area-inset-left,0px) + 4px);
    min-height:0;
    background:rgba(8,8,16,0.98);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border-top:1px solid rgba(255,255,255,0.12);
    gap:0;
  }
  .bn-item{
    flex:0 0 68px;min-width:68px;
    flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:5px 3px;min-height:48px;
    border:none;background:transparent;cursor:pointer;
    color:var(--muted);transition:color .18s;
    -webkit-tap-highlight-color:transparent;
    transform:translateZ(0);-webkit-font-smoothing:antialiased;
  }
  .bn-item.active{color:var(--gold)}
  .bn-item.active::before{
    content:'';position:absolute;top:0;
    left:50%;transform:translateX(-50%);
    width:28px;height:2px;
    background:var(--gold);border-radius:0 0 3px 3px;
    box-shadow:0 0 6px rgba(201,168,76,0.5);
  }
  .bn-icon{font-size:20px;line-height:1}
  .bn-label{font-size:10px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;line-height:1;max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bn-item:not(.active) .bn-label{opacity:0.65}
  .bn-top-bar{display:none}

  /* News ticker: sits above bottom nav */
  #news-ticker{
    bottom:calc(52px + env(safe-area-inset-bottom,0px));
    border-radius:0;
    border-top:1px solid rgba(255,255,255,0.1);
    border-bottom:none;
  }
  body.news-ticker-active #root{
    padding-bottom:calc(52px + 34px + env(safe-area-inset-bottom,0px)) !important;
  }

  /* Hide hero — takes 36vh (~130px) which is too much at 360px height */
  .hero-banner{display:none}

  /* Home sections: tighter spacing */
  .home-section{padding:8px 14px 0}
  .sec-header{margin-bottom:10px}
  .sec-title{font-size:15px}
  .h-scroll{padding:4px 14px 10px;gap:8px}

  /* Compact channel cards */
  .ch-card{width:118px}
  .ch-img{height:58px;font-size:20px}
  .ch-info{padding:6px 8px 8px}

  /* ── Live TV: side-by-side layout ── */
  /* Explicitly reset height/overflow in case portrait media query also applies */
  #screen-tv{
    flex-direction:row;
    height:100%;
    min-height:0;
    overflow:hidden;
  }

  /* Sidebar: narrow, full-height flex column */
  .ch-sidebar{
    width:220px;height:100%;
    max-height:none;min-height:0;
    border-right:1px solid var(--border);border-bottom:none;
    display:flex;flex-direction:column;
    overflow:hidden;
    flex-shrink:0;
    /* Respect notch on landscape-left phones */
    padding-left:env(safe-area-inset-left,0px);
  }
  .ch-sidebar-hdr{padding:7px 10px 5px;flex-shrink:0;border-bottom:1px solid var(--border)}
  .ch-sidebar-hdr h2{font-size:12px;margin-bottom:4px}
  .ch-search{padding:4px 8px;font-size:11px;border-radius:5px}

  /* Genre filter chips: horizontal scroll, compact */
  .ch-groups-wrap{flex-shrink:0;overflow:hidden}
  .ch-groups{padding:4px 6px 4px;gap:4px}
  .ch-grp-arrow{display:none}
  .ch-group-btn{padding:2px 8px;font-size:9px;border-radius:10px}

  /* Channel list: vertical scroll, fills remaining space */
  .ch-list{
    flex:1;min-height:0;
    display:flex !important;
    flex-direction:column !important;
    overflow-y:auto !important;overflow-x:hidden !important;
    padding:4px 6px;gap:2px;
  }
  /* Compact channel rows for narrow sidebar */
  .ch-row{
    padding:5px 6px;gap:7px;
    border-radius:6px;min-height:40px;
    width:100% !important;flex-shrink:0;
    flex-direction:row !important;
    align-items:center;text-align:left;
  }
  .ch-row-logo{width:34px;height:34px;font-size:13px;border-radius:4px;flex-shrink:0}
  .ch-row-info{flex:1;min-width:0}
  .ch-row-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:block !important;-webkit-line-clamp:unset;line-clamp:unset}
  .ch-row-num{font-size:8px}
  .ch-row-epg{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ch-row-live{font-size:7px;padding:1px 4px}

  /* Prev / Next pagination: touch-friendly buttons */
  #tv-prev-btn,#tv-next-btn{
    min-height:32px !important;
    padding:4px 6px !important;
    font-size:10px !important;
    background:var(--bg3) !important;
    color:var(--white) !important;
    border:1px solid var(--border2) !important;
    border-radius:6px !important;
    cursor:pointer;flex:1;
  }
  #tv-prev-btn:active,#tv-next-btn:active{background:var(--bg4) !important}

  /* ── Player: fill all available height ── */
  .tv-player-area{
    flex:1;min-width:0;
    display:flex;flex-direction:column;
    overflow:hidden;
    /* Respect notch on landscape-right phones */
    padding-right:env(safe-area-inset-right,0px);
  }
  .player-wrap{
    flex:1;min-height:0;
    aspect-ratio:auto;
    max-height:none;
    width:100%;
    border-radius:0;
  }
  .player-wrap video{width:100%;height:100%;object-fit:contain}
  /* Player controls always visible in landscape — no hover to trigger on touch */
  .player-wrap .player-controls{
    opacity:1 !important;pointer-events:auto !important;
    padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));
    gap:10px;
    background:linear-gradient(transparent,rgba(0,0,0,0.88));
  }
  .ctrl-btn{width:36px;height:36px;font-size:14px}
  .ctrl-btn.play{width:42px;height:42px;font-size:16px}
  .ctrl-ch-name{font-size:12px}
  .ctrl-ch-num{font-size:10px}
  /* Hide EPG program list — no room in landscape */
  .ch-epg{display:none}
  /* Also hide now-playing bar — sidebar already shows channel info */
  .tv-now-bar{display:none !important}

  /* ── Registration screen: two-column layout in landscape ── */
  #register-screen{overflow-y:auto;padding:8px}
  .reg-card{
    display:grid;
    grid-template-columns:1fr 210px;
    column-gap:18px;
    row-gap:0;
    padding:18px 22px;
    width:auto;max-width:680px;
    max-height:calc(100vh - 16px);
    overflow:hidden;
    border-radius:14px;
    text-align:left;
  }
  /* Left column: logo → sub → label → input → btn → error */
  .reg-logo{
    grid-column:1;grid-row:1;
    font-size:18px;letter-spacing:4px;margin-bottom:2px;
    align-self:end;
  }
  .reg-sub{
    grid-column:1;grid-row:2;
    font-size:8px;letter-spacing:2px;margin-bottom:10px;
  }
  .reg-label{
    grid-column:1;grid-row:3;
    font-size:11px;margin-bottom:6px;
  }
  .reg-input{
    grid-column:1;grid-row:4;
    font-size:22px;padding:8px 12px;margin-bottom:8px;
    border-radius:8px;letter-spacing:4px;text-align:center;
  }
  .reg-btn{
    grid-column:1;grid-row:5;
    padding:9px;font-size:13px;letter-spacing:1px;
    margin-bottom:4px;border-radius:8px;
  }
  .reg-error{grid-column:1;grid-row:6;font-size:10px;min-height:14px}
  .reg-hint{grid-column:1;grid-row:7;display:none}

  /* Right column: numpad spans all rows */
  .reg-numpad{
    grid-column:2;grid-row:1 / -1;
    align-self:center;
    margin:0;gap:6px;
  }
  .reg-numpad button{
    padding:9px 0;font-size:16px;border-radius:8px;
  }
  .reg-numpad .key-del{font-size:13px}
}

/* ── 400px: Very small phones ──────────────────────────────────────── */
@media(max-width:400px){
  .hero-title{font-size:22px}
  .hero-btns{flex-direction:column;gap:8px}
  .btn-hero{width:100%;justify-content:center}

  .ch-card{width:122px}
  .ch-img{height:64px}

  .mv-card{width:112px}
  .mv-poster{height:160px}

  .movie-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}

  .svc-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .info-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .prayer-grid{grid-template-columns:1fr}

  .home-section{padding:12px 10px 0}
  .h-scroll{padding:4px 8px 10px;gap:8px}

  .bn-item{flex:0 0 64px;min-width:64px}
  .bn-icon{font-size:18px}
  .bn-label{font-size:8px;max-width:60px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   VOD PLAYER — RESPONSIVE  (phones ≤ 640 px)
   Layout: 2-row control bar
     Row 1  [mute][vol][title ···················][fullscreen][close]
     ──────  seek track ──────────────────────────────────────────────
     Row 2  [‹30] [‹10]  [ ▶ / ⏸ ]  [10›] [30›]
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:640px){

  /* Prev/next buttons: scale down on phones but keep label */
  #vod-prev-btn,#vod-next-btn{width:64px;height:64px}
  #vod-prev-btn,#vod-next-btn svg{width:34px;height:34px}
  #vod-prev-btn{left:4px}
  #vod-next-btn{right:4px}

  /* Control bar: safe-area bottom, tighter side padding */
  .vlc-bar{
    padding:0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* Seek row: taller touch zone */
  .vlc-seek-row{padding:8px 0 4px;gap:8px}
  .vlc-cur,.vlc-dur{font-size:11px;min-width:36px}
  .vlc-track{height:32px}
  .vlc-track-bg,.vlc-track-buf,.vlc-track-fill{height:4px}
  /* Thumb always visible on touch — no hover available */
  .vlc-track-thumb{width:16px;height:16px;opacity:1}

  /* Controls: wrap so center skips drop to their own row */
  .vlc-controls{flex-wrap:wrap;gap:2px 4px;align-items:center}

  /* Row 1 — left: mute + slim vol + truncated title */
  .vlc-left{
    order:1;
    flex:1;
    min-width:0;
    gap:4px;
  }
  .vlc-vol{width:52px}
  .vlc-title{
    flex:1;
    min-width:0;
    max-width:none;
    font-size:11px;
  }

  /* Row 1 — right: fullscreen + close pushed to far end */
  .vlc-right{
    order:2;
    flex-shrink:0;
    gap:2px;
  }
  .vlc-right .vlc-btn{padding:9px 10px}
  .vlc-right .vlc-btn svg{width:20px;height:20px}

  /* Row 2 — center: skip controls, full width, centered */
  .vlc-center{
    order:3;
    width:100%;
    justify-content:center;
    gap:4px;
    padding:4px 0 2px;
  }

  /* Play button: bigger touch target */
  .vlc-play{
    width:58px;height:58px;
    font-size:24px;
    margin:0 8px;
  }

  /* Skip buttons: bigger touch area */
  .vlc-skip{
    min-width:46px;
    padding:5px 6px;
  }
  .vlc-skip svg{width:28px;height:28px}
  .vlc-skip-lbl{font-size:8px}

  /* Mute button */
  .vlc-btn{padding:9px 10px}
  .vlc-btn svg{width:18px;height:18px}
}

/* Very small phones (≤ 400 px): hide 30 s skips to keep row in one line */
@media(max-width:400px){
  .vlc-skip[onclick*="-30"],
  .vlc-skip[onclick*="(30)"]{display:none}
  .vlc-play{width:52px;height:52px;font-size:22px;margin:0 4px}
  .vlc-skip{min-width:42px}
}