:root {
  --bg: #0a0a0e;
  --surface: #17171f;
  --surface-hover: #202029;
  --border: #2a2a35;
  --text: #f0f0f3;
  --text-dim: #9a9aa8;
  --accent: #6366f1;
  --accent-hover: #7c7ff5;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(0,0,0,0.45);
  --transition: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --tabbar-height: 60px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  /* Voorkomt de "rubber band"-bounce/pull-to-refresh-flits van Safari op
     iOS bij overscrollen - voelt anders al snel als een webpagina i.p.v. app. */
  overscroll-behavior: none;
}

/* Tikbare elementen krijgen een lichte "indruk"-animatie i.p.v. niets -
   kleine tactiele touch die een interface meer als native app laat aanvoelen. */
button, .card, .pill, .epg-now-row {
  -webkit-user-select: none; user-select: none;
}
button:active, .card:active, .pill:active, .epg-now-row:active {
  transform: scale(0.96);
}

#player-root { position: fixed; inset: 0; z-index: 0; background: var(--bg); }
#player-root video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Startscherm, zichtbaar zolang de <video> geen bron heeft. */
#hero {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, var(--bg) 70%);
}
#hero.is-hidden { display: none; }
#hero-logo {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--accent), #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#hero-tagline { color: var(--text-dim); font-size: 1rem; margin: 0; }
#hero-cta {
  margin-top: 0.5rem; font-family: inherit; font-size: 1rem; font-weight: 600;
  padding: 0.85rem 1.75rem; min-height: 44px;
  background: var(--accent); color: #fff; border: none; border-radius: 999px;
  cursor: pointer; transition: background var(--transition), transform var(--transition);
}
#hero-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }

#layer-host { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#layer-host .tv-layer { pointer-events: auto; }

.tv-layer {
  position: fixed; inset: 0;
  background: rgba(10, 10, 14, 0.97);
  backdrop-filter: blur(12px);
  /* env(safe-area-inset-*) valt terug op 0 zonder notch/home-indicator
     (bv. Android/desktop), dus dit is veilig overal. */
  padding: calc(2rem + env(safe-area-inset-top)) calc(2rem + env(safe-area-inset-right))
           calc(2rem + env(safe-area-inset-bottom)) calc(2rem + env(safe-area-inset-left));
  overflow-y: auto;
  animation: layer-in var(--transition);
}
/* Iets meer diepte voor het Home-scherm, zelfde sfeer als de hero. */
.home-layer {
  background: radial-gradient(ellipse 1200px 600px at top, rgba(99,102,241,0.08), transparent 60%), rgba(10, 10, 14, 0.97);
}
@keyframes layer-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.tv-layer h1 {
  margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em;
}

/* Persoonlijke begroeting + datum, Chillio-achtige "Good morning"-header
   i.p.v. een kale schermtitel. */
.home-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem;
}
.home-date { font-size: 0.9rem; color: var(--text-dim); text-transform: capitalize; }

/* Terugknop, automatisch toegevoegd aan elke laag (zie layer-stack.js). */
.layer-back-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-bottom: 1.25rem;
  font-family: inherit; font-size: 0.95rem; font-weight: 500;
  padding: 0.6rem 1.1rem; min-height: 44px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; transition: background var(--transition), border-color var(--transition);
}
.layer-back-btn:hover, .layer-back-btn:focus-visible {
  background: var(--surface-hover); border-color: var(--accent);
}
.layer-back-btn svg { width: 18px; height: 18px; }

/* Home-scherm: horizontale categorie-pills + "onlangs bekeken"-rij +
   kanalengrid, Chillio/Netflix-achtig i.p.v. het oude 2-staps menu. */
.pill-row {
  display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1.5rem;
  scrollbar-width: thin;
}
.pill {
  flex-shrink: 0;
  font-family: inherit; font-size: 0.9rem; font-weight: 500;
  padding: 0.55rem 1.1rem; min-height: 40px;
  background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pill:hover { border-color: var(--accent); color: var(--text); }
.pill-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pill.is-focused { background: var(--focus-bg, #fff) !important; color: var(--focus-fg, #111) !important; }

.pill-favorites { display: inline-flex; align-items: center; gap: 0.4rem; }
.pill-favorites svg { width: 15px; height: 15px; }
.pill-favorites.pill-active svg { fill: #fff; }

.empty-hint { color: var(--text-dim); font-size: 0.9rem; padding: 1rem 0; }

.recent-section h2, .tv-layer h2 {
  font-size: 1rem; font-weight: 600; color: var(--text-dim);
  margin: 0 0 0.75rem 0; text-transform: uppercase; letter-spacing: 0.04em;
}
.recent-row { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 2rem; }
.recent-card { flex-shrink: 0; width: 160px; }

.now-playing {
  margin-top: 0.15rem; font-size: 0.72rem; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.focusable.is-focused .now-playing { color: var(--focus-fg, #111); opacity: 0.75; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* Hartje-knop, rechtsboven op elk kanaal-kaartje. Altijd zichtbaar (niet
   alleen bij hover) zodat het ook op touch-schermen zonder hover werkt. */
.fav-toggle {
  position: absolute; top: 0.4rem; right: 0.4rem; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: rgba(10,10,14,0.65);
  backdrop-filter: blur(4px);
  border: none; border-radius: 50%;
  color: #fff; cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.fav-toggle svg { width: 16px; height: 16px; }
.fav-toggle:hover { background: rgba(0,0,0,0.85); transform: scale(1.1); }
.fav-toggle.is-favorite { color: #f43f5e; }
.fav-toggle.is-favorite svg { fill: #f43f5e; }
/* Op de omgekeerde (witte) focus-stijl moet het hartje ook goed zichtbaar
   blijven i.p.v. wit-op-wit te worden. */
.focusable.is-focused .fav-toggle { background: rgba(0,0,0,0.15); color: var(--focus-fg, #111); }
.focusable.is-focused .fav-toggle.is-favorite { color: #f43f5e; }
.card:hover, .card:focus-visible {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.card img { width: 100%; height: 70px; object-fit: contain; background: #000; border-radius: var(--radius-sm); }
.card .name { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 500; }
.card .sub { margin-top: 0.2rem; font-size: 0.75rem; color: var(--text-dim); }

.search-input {
  display: block;
  width: 100%;
  max-width: 500px;
  font-family: inherit;
  font-size: 1.3rem;
  padding: 0.85rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color var(--transition);
}
.search-input::placeholder { color: var(--text-dim); }
.search-input:focus { border-color: var(--accent); outline: none; }

/* "Nu op tv" - één rij per kanaal met het huidige programma + voortgang,
   i.p.v. de vorige uren-brede tijdlijn (die bleek onhandig in gebruik). */
.epg-now-list { display: flex; flex-direction: column; gap: 0.6rem; }
.epg-now-row {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.75rem 1rem; cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}
.epg-now-row:hover, .epg-now-row:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.epg-now-logo { width: 64px; height: 40px; object-fit: contain; background: #000; border-radius: var(--radius-sm); flex-shrink: 0; }
.epg-now-info { flex: 1; min-width: 0; }
.epg-now-channel { font-size: 0.78rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; }
.epg-now-title {
  font-size: 1rem; font-weight: 600; margin-top: 0.15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.epg-now-title--empty { color: var(--text-dim); font-weight: 500; }
.epg-now-time { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.2rem; }
.epg-now-progress { height: 4px; background: var(--border); border-radius: 999px; margin-top: 0.4rem; overflow: hidden; }
.epg-now-progress-bar { height: 100%; background: var(--accent); }

/* Muis/touch-navigatiebalk - alleen zichtbaar op de root. Grote knoppen
   (min. 44px) voor comfortabel tikken op telefoon. */
#nav-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; gap: 0.5rem;
  padding: calc(1rem + env(safe-area-inset-top)) calc(1.25rem + env(safe-area-inset-right))
           1rem calc(1.25rem + env(safe-area-inset-left));
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
  transition: opacity 300ms ease;
}
#nav-bar.is-hidden { display: none; }
/* Wegfaden tijdens het kijken (zie app.js showPlaybackChrome) - opacity,
   geen display:none, zodat een tik op het beeld 'm weer kan laten verschijnen
   zonder een layout-reflow/flits. */
#nav-bar.chrome-hidden { opacity: 0; pointer-events: none; }
#nav-bar button {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: inherit; font-size: 0.95rem; font-weight: 500;
  padding: 0.65rem 1.15rem; min-height: 44px;
  background: rgba(23,23,31,0.8);
  backdrop-filter: blur(8px);
  color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
#nav-bar button svg { width: 18px; height: 18px; flex-shrink: 0; }
#nav-bar button:hover, #nav-bar button:focus-visible {
  background: var(--surface-hover); border-color: var(--accent); transform: translateY(-1px);
}

/* Pauze/hervat + kijktijd - los element rechtsboven (niet in de nav-bar,
   die op mobiel naar onderen verhuist als tabbalk). Altijd buiten bereik
   van een inkeping/Dynamic Island, die zit immers bovenin-midden. */
#player-controls {
  position: fixed; z-index: 3;
  top: calc(1rem + env(safe-area-inset-top)); right: calc(1.25rem + env(safe-area-inset-right));
  display: flex; align-items: center; gap: 0.6rem;
  transition: opacity 300ms ease;
}
#player-controls.is-hidden { display: none; }
#player-controls.chrome-hidden { opacity: 0; pointer-events: none; }
google-cast-launcher {
  --connected-color: var(--accent);
  --disconnected-color: var(--text);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23,23,31,0.8); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 50%;
  cursor: pointer;
}
#pause-toggle, #airplay-button {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: rgba(23,23,31,0.8); backdrop-filter: blur(8px);
  color: var(--text);
  border: 1px solid var(--border); border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
#pause-toggle svg, #airplay-button svg { width: 18px; height: 18px; }
#pause-toggle:hover, #pause-toggle:focus-visible,
#airplay-button:hover, #airplay-button:focus-visible { background: var(--surface-hover); border-color: var(--accent); }
#airplay-button.is-hidden { display: none; }
#elapsed-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem; font-weight: 600; color: var(--text);
  padding: 0.65rem 1rem; min-height: 44px;
  display: flex; align-items: center;
  background: rgba(23,23,31,0.8); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 999px;
}

#help-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  padding: 0.5rem calc(1.25rem + env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) calc(1.25rem + env(safe-area-inset-left));
  font-size: 0.75rem; color: var(--text-dim);
  transition: opacity 300ms ease;
}
#help-bar.chrome-hidden { opacity: 0; pointer-events: none; }

/* Kleinere schermen (telefoon): de nav-bar wordt een onderste tabbalk
   (iOS-conventie - herkenbaarder/moderner dan een bovenbalk, en ontwijkt
   meteen ook de Dynamic Island op bv. een iPhone 15 Pro, die alleen
   bovenin zit). Content krijgt onderaan ruimte gereserveerd zodat niets
   achter de tabbalk verdwijnt. */
@media (max-width: 600px) {
  .tv-layer {
    padding: 1.25rem 1.25rem calc(1.25rem + var(--tabbar-height) + env(safe-area-inset-bottom));
  }
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; }
  .card { padding: 0.5rem; }
  .card img { height: 45px; }
  .card .name { font-size: 0.78rem; }

  #nav-bar {
    top: auto; bottom: 0;
    height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: flex-start;
    background: rgba(15,15,20,0.85);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 0.4rem calc(0.5rem + env(safe-area-inset-right)) calc(0.4rem + env(safe-area-inset-bottom)) calc(0.5rem + env(safe-area-inset-left));
  }
  #nav-bar button {
    flex-direction: column; justify-content: center; gap: 0.2rem;
    flex: 1; min-width: 0;
    background: transparent; border: none; border-radius: 0;
    padding: 0.3rem; min-height: 44px;
    color: var(--text-dim);
  }
  #nav-bar button:hover, #nav-bar button:focus-visible { background: transparent; transform: none; color: var(--text); }
  #nav-bar button span { display: block; font-size: 0.65rem; font-weight: 600; }

  #player-controls { top: calc(0.75rem + env(safe-area-inset-top)); right: calc(0.75rem + env(safe-area-inset-right)); gap: 0.4rem; }
  #pause-toggle, google-cast-launcher, #airplay-button { width: 38px; height: 38px; }
  #elapsed-time { padding: 0.5rem 0.75rem; font-size: 0.78rem; min-height: 38px; }

  /* Help-bar schuift boven de tabbalk i.p.v. eronder te verdwijnen. */
  #help-bar { bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); }

  #hero-logo { font-size: 2rem; }
  .recent-card { width: 120px; }
  .pill { font-size: 0.82rem; padding: 0.45rem 0.9rem; }
}