:root {
  --bg: #ffffff;
  --text: #0f0f0f;
  --text-soft: #606060;
  --border: #e5e5e5;
  --hover: #f2f2f2;
  --thumb: #e9e9e9;
  --thumb-icon: #c7c7c7;
  --accent: #ff0000;
  --focus: #065fd4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f0f;
    --text: #f1f1f1;
    --text-soft: #aaaaaa;
    --border: #303030;
    --hover: #272727;
    --thumb: #272727;
    --thumb-icon: #4d4d4d;
    --accent: #ff0000;
    --focus: #3ea6ff;
  }
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Roboto', 'Noto Sans', Arial, sans-serif;
}

.split {
  display: flex;
  height: 100%;
  width: 100%;
}
/* Promo-only mode: hide the browsing side entirely so the promo pane
   (already flex:1 1 50%) grows to fill the full width as the only
   remaining item. Named "promo", not "ad" — see config.js's comment on
   promoManifestUrl for why: ad-blockers (including some built into smart
   TV browsers) block/hide anything whose URL, id, or class contains
   "ad"/"ads". */
.split.promo-only .browse { display: none; }

/* ---------- Left pane ---------- */
.browse {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

/* ---------- Player overlay (left pane) ---------- */
.player-wrap {
  position: relative;
  flex: 1;
  background: #000;
  display: none;
  overflow: hidden;
}
.player-wrap.active { display: block; }
/* playerFrameWrap is sized/positioned/stretched by app.js
   (fitYtIframeToContainer) so the whole video fills the pane with no
   cropping and no letterbox bars — width/height/left/top here are just a
   same-size fallback until app.js first runs. */
.player-wrap #playerFrameWrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform-origin: top left; }
.player-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Shown by app.js (fetchTrendingVideos) only when the trending fetch
   fails or returns nothing — same idea as .promo-placeholder below. */
.browse-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 13px;
  text-align: center;
  padding: 2rem;
  background: #000;
}

/* ---------- Right pane ---------- */
.promo-pane {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
}
/* The main promo source is a YouTube embed (iframe), not a plain
   video file. Both wrappers are sized/positioned/stretched by app.js
   (fitPromoIframeToContainer) the same way #playerFrameWrap is on the
   browsing side — full picture, pane fully filled, no letterbox bars —
   width/height/position here are just a same-size fallback until app.js
   first runs. See app.js's fitPromoIframeToContainer comment for why this
   is a known, explicitly-accepted crash risk on the target TV, not an
   oversight.

   There are two of these, stacked exactly on top of each other, so the
   next ad can be created, autoplay, and sit through YouTube's own
   branding-overlay delay entirely out of sight behind whichever one is
   currently showing (opacity 0 vs 1) — see app.js's "Primary source"
   comment. */
.promo-pane .promo-frame-wrap {
  position: absolute; width: 100%; height: 100%; top: 0; left: 0;
  transform-origin: top left;
  opacity: 0;
  transition: opacity .35s ease;
}
.promo-pane iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
/* #fallbackPromoVideo only plays while there's no internet (see
   config.js's promoManifestUrl) — same cover/contain split the old
   primary promo video used to have. */
.promo-pane video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 1;
  transition: opacity .4s ease;
}
.split.promo-only .promo-pane video { object-fit: contain; }
.promo-placeholder {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 13px;
  text-align: center;
  padding: 2rem;
}
/* Sits on top of whatever is currently showing in this pane (embed,
   fallback video, or placeholder) and absorbs every pointer event itself —
   the ad must not be clickable/hoverable at all (2026-10-01). This is what
   actually stops YouTube's own hover-triggered title/attribution
   overlay from ever appearing: that overlay is the embed's own JS reacting
   to the mouse genuinely moving over its iframe, which playerVars/data-
   attributes alone can't suppress (YouTube still shows a minimal "hover"
   attribution overlay even with controls:0 — confirmed directly). With
   this overlay in place the cursor never reaches the iframe's content at
   all, so that JS never fires. It also means the ad can no longer be
   clicked to pause — a now-redundant but harmless second guarantee
   alongside the auto-resume-on-pause logic in app.js. */
.promo-click-blocker {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: default;
}

/* ---------- Fullscreen control ---------- */
.fullscreen-btn {
  position: fixed;
  bottom: 12px; right: 12px;
  z-index: 10;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  opacity: .55;
}
.fullscreen-btn:hover { opacity: 1; }
:fullscreen .fullscreen-btn { display: none; }

.promo-only-btn {
  position: fixed;
  bottom: 12px; left: 12px;
  z-index: 10;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  opacity: .55;
}
.promo-only-btn:hover { opacity: 1; }
:fullscreen .promo-only-btn { display: none; }