/*
 * Web-spesifikke overstyringer. style.css er TV-designet (1920×1080);
 * denne fila legger på nettleser-tilpasningen — resten arves uendret.
 */

/* Svart bakgrunn i letterbox-feltene rundt den skalerte scenen. */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;            /* ingen scroll — scenen skaleres til vinduet */
}

/* Skalerings-scenen: fast lerret, transform settes av platform/web.js. */
#stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  overflow: hidden;
}

/* Splash sentreres på VINDUET (flyttet ut av #stage → ikke skalert). Overstyr
   TV-designets faste 1920×1080 → fyll viewport, logo forblir sentrert (flex). */
#splash { width: 100%; height: 100%; }

/* Motor-badge er kun et TV-testelement — skjul i web. */
#engine-badge { display: none !important; }

/* rx-video skal fylle spiller-overlayet. */
.rx-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Peker-vennlighet: vis at fokuserbare elementer er klikkbare (web bruker mus i
   tillegg til tastatur). Tastatur-fokus-ringen fra style.css beholdes. */
.card, .sidebar-menu [role="menuitem"], button, .channel { cursor: pointer; }

/* Nedlastinger-liste (offline) */
#downloads { padding: 60px 80px; overflow-y: auto; }
.dl-list { margin-top: 24px; }
.dl-row {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 24px; margin-bottom: 12px;
  background: rgba(255,255,255,0.06); border-radius: 12px;
}
.dl-info { flex: 1; min-width: 0; }
.dl-title { font-size: 30px; font-weight: 600; }
.dl-sub { font-size: 22px; opacity: 0.7; margin-top: 6px; }
.dl-row .det-btn { flex: 0 0 auto; }

/* rx-player html-tekstspor: rendrer «veldig stort» som standard. Sett en fornuftig
   størrelse. Desktop: #rx-text-track er 1920×1080 (skaleres med scenen) → px i 1080p-
   rom. Mobil: #rx-text-track er 100dvh → proporsjonal vh. Kalibrer ved behov. */
.rxp-texttrack-p, .rxp-texttrack-span { font-size: 44px !important; line-height: 1.3 !important; }
body.mobile .rxp-texttrack-p, body.mobile .rxp-texttrack-span { font-size: 4.4vh !important; }

/* Lukk-knapp i Lyd/Tekst-menyen (mobil/tablett uten Esc; også klikkbart på web) */
.tm-close {
  position: absolute; top: 14px; right: 48px; z-index: 5;
  background: rgba(255,255,255,0.16); color: #fff; border: 0;
  padding: 11px 22px; border-radius: 10px; font-size: 24px; font-weight: 600;
  cursor: pointer; touch-action: manipulation;
}
.tm-close:hover { background: rgba(255,255,255,0.28); }
.tm-grp-head, .tm-item { cursor: pointer; touch-action: manipulation; }

/* «Last ned»-knapp i arkivrad (web) */
.ar-event-dl {
  margin-left: auto; flex: 0 0 auto; align-self: center;
  padding: 8px 16px; border-radius: 8px; border: 0;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 20px; cursor: pointer;
}
.ar-event-dl:hover { background: rgba(255,255,255,0.24); }

/* «Ingen nett»-skjerm: handlingsknapper (Prøv igjen / Se nedlastinger).
   ◀▶ flytter fokus, OK aktiverer. Klikkbare på mus/touch. */
.nn-actions { margin-top: 30px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.nn-btn {
  display: inline-block; font-size: 26px; font-weight: 700; padding: 14px 34px;
  border-radius: 10px; background: rgba(255,255,255,0.14); color: #fff;
  cursor: pointer; touch-action: manipulation;
}
.nn-btn.focused { background: #fff; color: #0a1733; }
.nn-btn:hover { background: rgba(255,255,255,0.26); }

/* Spiller-kontrollrad (knapp/SVG — ◀▶ fokus, OK aktiver) */
.osd-controls {
  display: flex; gap: 22px; justify-content: center; align-items: center;
  margin-top: 30px;
}
.ctrl-btn {
  width: 78px; height: 78px; border-radius: 50%;
  border: 3px solid transparent; background: rgba(255,255,255,0.14);
  color: #fff; padding: 19px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s ease, background 0.1s ease;
}
.ctrl-btn svg { width: 100%; height: 100%; display: block; }
.ctrl-btn:hover { background: rgba(255,255,255,0.26); }
/* webOS-TV (klasse settes av platform/webos.js): kompaktere rad — 78px-knappene
   ruvet for mye på TV (samme justering som Tizen-porten, 4ae104d). */
body.platform-webos .osd-controls { gap: 14px; margin-top: 16px; }
body.platform-webos .ctrl-btn { width: 54px; height: 54px; padding: 13px; border-width: 2px; }
body.platform-webos .ctrl-btn.focused { box-shadow: 0 0 0 3px rgba(255,255,255,0.28); }
.ctrl-btn.focused {
  background: #fff; color: #030C2C;   /* navy ikon på hvit når fokusert */
  border-color: #fff; transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.28);
}

/* ===== Mobil/tablett (v1: landskap-først) ===== */
/* Touch: fjern 300ms tap-delay + dempet tap-highlight. */
@media (pointer: coarse) {
  button, .card, .col-card, .menu-item, .ctrl-btn, .det-btn, .ar-event, .ar-chan,
  .ar-event-dl, .dl-row .det-btn, .focusable {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255,255,255,0.12);
  }
}

/* Portrett-telefon → be om landskap (scenen er 16:9-designet; portrett blir bittelite). */
#rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 640px) {
  #stage { display: none !important; }
  #rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 9999;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; text-align: center; padding: 40px;
    background: #030C2C; color: #fff;
  }
  .rotate-icon  { font-size: 72px; line-height: 1; }
  .rotate-title { font-size: 30px; font-weight: 700; }
  .rotate-sub   { font-size: 18px; opacity: 0.78; max-width: 320px; line-height: 1.4; }
}

/* ===== Fase 2: mobil reflow (body.mobile settes av fitStage ≤1024px) =====
   Bryter ut av den faste 1920×1080-scenen → fluid layout som fyller skjermen.
   Kun body.mobile → null desktop/TV-regresjon. */
body.mobile #stage {
  position: absolute; inset: 0; width: 100%; height: 100vh; height: 100dvh;
  transform: none !important; overflow: hidden;
}
body.mobile .screen, body.mobile #home-view { width: 100%; height: 100%; }
/* Notch/safe-area (iPhone landskap: innhold klarer «øret»). */
body.mobile .screen { padding: 14px 16px; padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }

/* Video + tekstspor fyller viewport (var fast 1920×1080). */
body.mobile .rx-video,
body.mobile #rx-text-track { width: 100vw; height: 100vh; height: 100dvh; }

/* ---- Hjem ---- */
body.mobile .sidebar { width: 60px; padding: 12px 0; padding-left: env(safe-area-inset-left); box-sizing: content-box; }
body.mobile .sidebar-logo { height: 26px; margin-bottom: 12px; }
body.mobile .menu-item { height: 46px; margin: 4px 8px; border-radius: 10px; }
body.mobile .menu-icon { width: 24px; height: 24px; }
body.mobile #home-main { padding: 12px 16px 0; padding-right: calc(16px + env(safe-area-inset-right)); }
body.mobile .section-title { font-size: 22px; margin-bottom: 8px; }
body.mobile .hero { margin-bottom: 10px; }
body.mobile .hero-title { font-size: 26px; margin-bottom: 6px; }
body.mobile .hero-channel { font-size: 15px; }
body.mobile .hero-badge { font-size: 12px; padding: 3px 9px; }
body.mobile .hero-desc { font-size: 15px; }
body.mobile .hero-progress { width: 190px; margin-top: 10px; }
body.mobile .home-grid { gap: 12px; padding: 6px 0 10px; }
body.mobile .col-card { width: 200px; border-width: 2px; }
body.mobile .col-img { height: 113px; }
body.mobile .col-title { font-size: 16px; }
body.mobile .col-sub { font-size: 13px; }
body.mobile .col-meta { padding: 8px 10px 10px; }
body.mobile .ch-logo { height: 20px; max-width: 64px; padding: 3px 6px; }
body.mobile .status { margin: 8px 16px 0; font-size: 14px; }

/* ---- Spiller ---- */
body.mobile .osd { left: 12px; right: 12px; bottom: 12px; min-height: 0; padding: 12px 16px; }
body.mobile .osd-channel { font-size: 18px; }
body.mobile .osd-prog { font-size: 17px; margin-top: 6px; }
body.mobile .osd-pos { font-size: 13px; padding: 3px 10px; }
body.mobile .osd-timeline { gap: 10px; margin-top: 10px; }
body.mobile .osd-t-start, body.mobile .osd-t-end { font-size: 12px; min-width: 44px; }
body.mobile .osd-live { font-size: 13px; }
body.mobile .osd-logo, body.mobile .osd-hint { display: none; }   /* TV-elementer skjules på touch */
body.mobile .osd-controls { gap: 14px; margin-top: 16px; }
body.mobile .ctrl-btn { width: 58px; height: 58px; padding: 14px; }