/* ============================================================
   RetroVideoHits — Digital fjärrkontroll (Fas 1, handhållen skin)
   Namespacad `rvhr-` för noll kollision. Skin = matt plast (vald 2026-06-04).
   Motor/beteende i remote.js. Referens: design/remote-skin.html.
   ============================================================ */
:root{
  --rvhr-accent:#ff2d78;     /* magenta — din plats */
  --rvhr-broadcast:#00e5ff;  /* cyan — struktur/broadcast */
  --rvhr-yellow:#ffe600;
  --rvhr-ink:#f2f3f5; --rvhr-ink-dim:#9aa0a6;
}

/* nav-toggle (fjärr-ikon i headern) */
.rvhr-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--text-secondary,#9aa0a6);cursor:pointer;padding:6px;position:relative}
.rvhr-toggle:hover,.rvhr-toggle[aria-expanded="true"]{color:var(--neon-pink,#ff2d78)}
.rvhr-toggle svg{display:block}

/* scrim + iframe-skydd (YT-iframe ignorerar z-index → dölj den medan panelen är öppen) */
.rvhr-scrim{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:1400;overflow:hidden}
body.rvh-remote-open .rvhr-scrim{opacity:1;visibility:visible}
/* nu-spelande videon som KRAFTIGT OSKARP, ambient färgtvätt bakom panelen (YT-iframe måste
   döljas pga z-index-gotchan). Oskärpan döljer thumbnailens låga upplösning helt → mood, ej pixlar.
   Mörk overlay (scrim::after) läggs OVANPÅ stillbilden för läsbarhet. */
.rvhr-stage{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(36px) saturate(1.3);transform:scale(1.3)}
.rvhr-scrim::after{content:"";position:absolute;inset:0;background:rgba(8,8,12,.5)}
/* Tunga full-screen-blur:en stryps på touch-enheter — mobil-GPU + dold-men-avkodande video
   gav lagg/frysningar. Den mörka scrim::after-dimmen räcker där (panelen täcker ändå det mesta). */
@media (hover:none) and (pointer:coarse){ .rvhr-stage{display:none} .rvhr-scrim::after{background:rgba(8,8,12,.62)} }
body.rvh-remote-open .channel-player iframe,
body.rvh-remote-open .live-tv-frame iframe,
body.rvh-remote-open .live-tv-player iframe,
body.rvh-remote-open .hero-player iframe{visibility:hidden}

/* ---- panelen: glider in från höger (desktop), bottom-sheet (mobil) ---- */
.rvhr{
  position:fixed;top:0;right:0;height:100%;width:340px;max-width:92vw;z-index:1500;
  display:flex;align-items:center;justify-content:center;padding:20px;
  transform:translateX(112%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
body.rvh-remote-open .rvhr{transform:translateX(0);pointer-events:auto}
@media(prefers-reduced-motion:reduce){.rvhr,.rvhr-scrim{transition:none}}

/* ---- höljet (matt plast) ---- */
.rvhr-body{
  width:300px;max-width:100%;border-radius:34px;padding:20px 18px 24px;position:relative;
  background:linear-gradient(176deg,#2a2a33 0%,#1b1b22 48%,#141419 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 34px 70px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -3px 8px rgba(0,0,0,.55);
  --btn:linear-gradient(180deg,#24242d,#17171d);--btn-rim:rgba(255,255,255,.10);
  font-family:'DM Sans',sans-serif;color:var(--rvhr-ink);
}

.rvhr-body:focus{outline:none}
.rvhr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;position:relative}
.rvhr-grille{width:42px;height:7px;border-radius:4px;background:repeating-linear-gradient(90deg,#3a3a46 0 3px,transparent 3px 6px);opacity:.42}
/* RVH = tillverkarmärket, etsat/präglat i plasten. Monokromt + dött — färg reserveras för det
   som lever (kanaler/now-playing). Absolut-centrerat oavsett grille/▼-bredd. */
.rvhr-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Space Mono',monospace;font-weight:700;font-size:11px;letter-spacing:4px;color:#55555f;text-shadow:0 -1px 1px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.06);pointer-events:none;user-select:none}
.rvhr-ib{display:grid;place-items:center;cursor:pointer;background:var(--btn);border:1px solid var(--btn-rim);color:var(--rvhr-ink);transition:transform .1s,border-color .14s,color .14s}
.rvhr-ib:active{transform:translateY(1px)}
.rvhr-ib svg{display:block}
/* Lägg-undan (▼) — ärlig "fäll ner / undanlagd, väntar"-gest (EJ power). Lätt chrome, lättare än märket. */
.rvhr-tuck{width:30px;height:30px;border-radius:8px;background:transparent;border:0;color:var(--rvhr-ink-dim);cursor:pointer;display:grid;place-items:center;transition:color .14s}
.rvhr-tuck:hover{color:#fff}
.rvhr-tuck svg{display:block}

/* display */
.rvhr-disp{border-radius:12px;padding:11px 14px 12px;margin-bottom:17px;background:linear-gradient(180deg,#0c1310,#0a0e0c);
  border:1px solid rgba(0,229,255,.20);box-shadow:inset 0 0 22px rgba(0,229,255,.06),inset 0 1px 0 rgba(255,255,255,.03)}
.rvhr-disp .l1{display:flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--rvhr-broadcast)}
.rvhr-live{width:7px;height:7px;border-radius:50%;background:var(--rvhr-broadcast);box-shadow:0 0 8px var(--rvhr-broadcast);animation:rvhr-pulse 2s infinite}
@keyframes rvhr-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.rvhr-disp .ti{font-family:'Caveat',cursive;font-weight:700;font-size:25px;line-height:1.05;margin-top:3px}
.rvhr-disp .ar{font-size:12px;color:var(--rvhr-ink-dim);margin-top:1px}

/* CHANNEL stepper + transport */
.rvhr-mid{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.rvhr-step{display:flex;align-items:center;gap:7px;border-radius:13px;background:var(--btn);border:1px solid var(--btn-rim);padding:7px 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.rvhr-step .cl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.5px;color:var(--rvhr-ink-dim);text-transform:uppercase}
.rvhr-step .rvhr-ib{width:27px;height:27px;border-radius:8px}
.rvhr-step .rvhr-ib:hover{border-color:var(--rvhr-broadcast);color:var(--rvhr-broadcast)}
.rvhr-transport{display:flex;align-items:center;gap:9px}
.rvhr-transport .rvhr-ib{width:42px;height:42px;border-radius:50%}
.rvhr-transport .rvhr-ib:hover{border-color:rgba(255,255,255,.28)}
/* Play/paus vinner på STORLEK (50 vs 42px), ej färg/halo — magenta ensam om "din plats". */
.rvhr-transport .rvhr-play{width:50px;height:50px;color:#fff}

/* CH01 flaggskepp */
.rvhr-hero{width:100%;display:flex;align-items:center;gap:12px;border-radius:13px;padding:11px 14px;margin-bottom:11px;cursor:pointer;
  background:var(--btn);border:1px solid var(--btn-rim);color:var(--rvhr-ink);transition:.14s;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);font:inherit;text-align:left}
.rvhr-hero .no{font-family:'Space Mono',monospace;font-weight:700;font-size:14px;color:var(--rvhr-ink-dim)}
.rvhr-hero .nm{font-family:'Archivo Black',sans-serif;font-size:14px;letter-spacing:.4px}
.rvhr-hero .sub{margin-left:auto;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1px;color:var(--rvhr-ink-dim);text-transform:uppercase}
.rvhr-hero:hover{border-color:rgba(0,229,255,.4)}

/* sifferpad CH02–13 (3×4) */
.rvhr-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:17px}
.rvhr-num{aspect-ratio:1/.92;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--btn);border:1px solid var(--btn-rim);color:var(--rvhr-ink);transition:transform .1s,border-color .14s,box-shadow .14s;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);font:inherit}
.rvhr-num:active{transform:translateY(1px)}
.rvhr-num .n{font-family:'Space Mono',monospace;font-weight:700;font-size:15px}
.rvhr-num .nm{font-size:9px;font-weight:500;color:#c6c6d2;max-width:80px;text-align:center;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- tre knapptillstånd (pad + hero delar) ---- */
.rvhr-sel[data-state="selected"]{
  border:1.5px solid var(--rvhr-ch,var(--rvhr-accent));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--rvhr-ch,var(--rvhr-accent)) 35%,transparent),0 0 18px 1px color-mix(in srgb,var(--rvhr-ch,var(--rvhr-accent)) 30%,transparent);
}
.rvhr-sel[data-state="selected"] .n{color:var(--rvhr-ch,var(--rvhr-accent))}
.rvhr-sel[data-state="selected"] .nm{color:#e7e7ee}
.rvhr-dimmable.rvhr-dim{opacity:.34;pointer-events:none;filter:grayscale(.4)}
/* launcher: vald kanal pulsar medan kanalsidan laddas (tune-in ~5s) — feedback att tappet tog */
/* launcher-laddning: tydligt väntetillstånd (pulsande RAM + spinner) så kallstartens ~6s
   ser ut som laddning, ej en död knapp. Highlight/display sätts synkront på klicket. */
.rvhr-tuning .rvhr-sel[data-state="selected"]{animation:rvhr-tune .9s ease-in-out infinite}
@keyframes rvhr-tune{
  0%,100%{box-shadow:0 0 0 1px var(--rvhr-ch,var(--rvhr-accent)),0 0 8px 0 color-mix(in srgb,var(--rvhr-ch,var(--rvhr-accent)) 30%,transparent)}
  50%{box-shadow:0 0 0 2px var(--rvhr-ch,var(--rvhr-accent)),0 0 22px 4px color-mix(in srgb,var(--rvhr-ch,var(--rvhr-accent)) 70%,transparent)}
}
.rvhr-spin{display:none;width:13px;height:13px;margin-left:8px;border-radius:50%;border:2px solid rgba(0,229,255,.25);border-top-color:var(--rvhr-broadcast);vertical-align:-2px;animation:rvhr-spin .7s linear infinite}
.rvhr-tuning .rvhr-spin{display:inline-block}
@keyframes rvhr-spin{to{transform:rotate(360deg)}}

/* extras */
.rvhr-extras{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.rvhr-ex{aspect-ratio:1/1;border-radius:11px;background:var(--btn);border:1px solid var(--btn-rim);color:#d8d8e2;cursor:pointer;display:grid;place-items:center;transition:transform .1s,border-color .14s,color .14s;font:inherit}
.rvhr-ex:active{transform:translateY(1px)}
.rvhr-ex:hover{border-color:rgba(255,255,255,.22);color:#fff}
.rvhr-ex.on{color:var(--rvhr-yellow);border-color:rgba(255,230,0,.45)}
.rvhr-ex.rvhr-fav.is-fav{color:var(--rvhr-accent);border-color:rgba(255,45,120,.5)}

/* mobil: kompakt remote (centrerad ~284px), glider upp nerifrån. Höjd cappad mot SMALL
   viewport (svh) + downsizad så toppen aldrig hamnar bakom iOS URL-baren, och får plats utan scroll. */
@media(max-width:520px){
  .rvhr{top:auto;bottom:0;right:0;left:0;width:100%;max-width:100%;height:auto;
    align-items:flex-end;justify-content:center;padding:0 0 calc(env(safe-area-inset-bottom, 0px) + 62px);transform:translateY(122%)}
  body.rvh-remote-open .rvhr{transform:translateY(0)}
  .rvhr-body{width:280px;max-width:90vw;max-height:92svh;overflow-y:auto;border-radius:24px;padding:12px 12px 14px}
  .rvhr-top{margin-bottom:9px}
  .rvhr-grille{width:36px;height:6px}
  .rvhr-brand{font-size:10px;letter-spacing:3px}
  .rvhr-tuck{width:28px;height:28px}
  .rvhr-disp{padding:8px 11px 9px;margin-bottom:11px}
  .rvhr-disp .ti{font-size:19px}
  .rvhr-disp .l1{font-size:10px}
  .rvhr-mid{margin-bottom:10px;gap:8px}
  .rvhr-transport .rvhr-ib{width:38px;height:38px}
  .rvhr-transport .rvhr-play{width:45px;height:45px}
  .rvhr-step .rvhr-ib{width:25px;height:25px}
  .rvhr-hero{padding:8px 11px;margin-bottom:7px}
  .rvhr-pad{gap:6px;margin-bottom:11px}
  .rvhr-num{aspect-ratio:1/.74}
  .rvhr-num .n{font-size:14px}
  .rvhr-num .nm{font-size:8.5px}
  .rvhr-extras{gap:6px}
  .rvhr-ex{border-radius:10px}
}