/* ===========================
   Cloudtodo // GAMEshow – App Styles
   =========================== */

/* --- Design-Variablen --- */
:root{
  --bg:#090b10; --panel:#0c1016; --card:#0f141c;
  --text:#e8eef6; --muted:#9aa7b8; --line:#17202b;
  --accent:#7ccfff; --ok:#30d28f; --err:#ff5d66; --badge:#1b2a3b;
  --radius:16px; --nav-blur:12px;
  --shadow: 0 5px 14px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,.04);
  --modal-z: 1200;
  --modal-max-w: min(720px, 92vw);
  --modal-max-h: min(84vh, 100dvh - 6rem);
  --modal-bg: var(--card, #12141a);
  --modal-border: color-mix(in oklab, #fff 12%, transparent);
  --modal-shadow: 0 20px 60px rgba(0,0,0,.45), 0 2px 12px rgba(0,0,0,.25);	
	
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fb; --panel:#ffffff; --card:#ffffff;
    --text:#0e1520; --muted:#5c6b7a; --line:#e6ecf2; --badge:#eef6ff;
    --shadow: 0 5px 14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.6);
  }
}

/* --- Base --- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: var(--bg); color:var(--text);
  font:15.5px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ===========================
   Navigation + Drawer
   =========================== */
.nav{
  position:sticky; top:0; z-index:100;
  background: rgba(10,12,16,.45);
  backdrop-filter: blur(var(--nav-blur));
  border-bottom:1px solid var(--line);
}
.navin{
  max-width:1280px;margin:0 auto;padding:12px 16px;
  display:flex;gap:16px;align-items:center;justify-content:space-between
}
.brand{font-weight:1000;letter-spacing:.3px;display:flex;align-items:center;gap:10px; font-size:24px}
.links{display:flex;gap:16px;flex-wrap:wrap}
.hamb{
  display:none; appearance:none; border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--text); border-radius:12px; padding:10px; cursor:pointer; line-height:0; z-index:101;
}
.hamb svg{display:block}
.hamb svg rect{stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round}
@media (max-width: 920px){
  .links{display:none}
  .hamb{display:inline-flex; align-items:center; justify-content:center}
}
/* Drawer */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(82vw,320px);
  background:var(--panel);
  border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .25s ease;
  z-index:120; display:flex; flex-direction:column; padding:18px; gap:6px
}
.drawer.open{transform:none}
.drawer a{padding:12px 6px; font-weight:800}
.scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px); opacity:0; pointer-events:none;
  transition:opacity .2s; z-index:110
}
.scrim.show{opacity:1; pointer-events:auto}

.live{background:#e11d48;color:#fff;padding:6px 10px;border-radius:999px;font-size:16px;font-weight:900; border:2px solid #880000}

/* ===========================
   HERO mit Blur-Hintergrund
   =========================== */
.hero{
  position:relative; height:45vh; min-height:280px;
  isolation:isolate; border-bottom:1px solid var(--line); overflow:hidden;
}
#heroBg{
  position:absolute; inset:0; width:100%; height:100%;
  background:#000 center/cover no-repeat;
  filter: blur(18px) brightness(0.6);
  transform: scale(1.08);
  opacity:.9; z-index:0;
  transition: background-image .25s ease-out, opacity .25s ease-out, transform .5s ease;
}
.hero-inner{
  position:relative; z-index:2;
  max-width:1280px; height:100%;
  margin:0 auto; padding:18px 16px;
  display:grid; place-items:center; gap:12px; text-align:center;
}

/* ===========================
   Player
   =========================== */
.player-shell{
  position:relative; width:65vh; max-width:min(1100px, 92vw);
  aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  border:1px solid var(--line);
  background:#000;
  box-shadow:var(--shadow);
}

#player{width:100%;height:100%;pointer-events:none}
.overlay{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity .2s; z-index:2
}
.overlay.show{opacity:1;pointer-events:auto}
.ctrls{
  position:absolute;right:18px;bottom:52px;display:flex;gap:8px;
  opacity:0;pointer-events:none;transition:opacity .2s; z-index:3
}
.ctrls.show{opacity:1;pointer-events:auto}
.chip{
  border:1px solid var(--line);background:rgba(0,0,0,.35);backdrop-filter:blur(6px);
  color:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:800;
  min-width:42px;min-height:42px;display:inline-flex;align-items:center;justify-content:center
}
.btn{
  appearance:none;border:1px solid var(--line);
  padding:14px 20px;border-radius:999px;
  background:rgba(255,255,255,.06); color:#fff;
  font-weight:900;cursor:pointer; backdrop-filter:blur(6px)
}
.btn:hover{background:rgba(255,255,255,.12)}
.btn-sm{
  font-size:12px;padding:6px 10px;border-radius:8px;
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer
}

/* iOS: Player füllt NUR den Hero (bei Toggle) */
.player-shell.iosPlayerFill{
  max-width:100% !important;
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  border-radius:0; border:0; box-shadow:none;
}
.player-shell.iosPlayerFill #player{ width:100% !important; height:100% !important; }
.hero.playerFillActive .hero-inner{ padding:0; max-width:100vw; }

/* ===========================
   Content / Cards / EPG
   =========================== */
.wrap{
  max-width:1280px;margin:0 auto;padding:16px;
  display:grid;gap:16px;grid-template-columns:1fr
}
@media(min-width:1100px){.wrap{grid-template-columns:2fr 1fr}}

.card{
  background: rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow);
}

/* Nur die zwei Top-Cards etwas heller + Akzent-Grün für Headlines */
.card--highlight{ background: rgba(255,255,255,.07); }
.card--highlight_text{ color:#00ff87; }

@media (prefers-color-scheme: light){
  .card--highlight{ background: rgba(0,0,0,.03); }
}

.head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}
.status{display:flex;align-items:center;gap:10px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%}
.title{font-weight:1000;font-size:18px;margin:0 0 12px}
.grid2{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center}
.thumb{width:64px;height:64px;border-radius:12px;object-fit:cover;background:#0b0d10;border:1px solid var(--line)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;background:var(--badge);border:1px solid var(--line)}
.muted{color:var(--muted)}

.epg{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:10px}
@media(min-width:700px){.epg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.epg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.epg-item{
  display:grid; grid-template-columns:88px 1fr; align-items:center;
  gap:12px; padding:10px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.02)
}
.epg-thumb{width:88px;height:50px;border-radius:10px;object-fit:cover;background:#0b0d10;border:1px solid var(--line)}
.epg-title{font-weight:900}

/* Footer */
.foot{grid-column:1/-1;text-align:center;color:var(--muted);padding:20px 0}

/* ===========================
   Pre-Switch Slider (nur im Player)
   =========================== */
.switcher{
  position:absolute;
  inset:0;                     /* 100% Breite + Höhe des Players */
  z-index:6;                   /* über Controls/Overlay (z-index:3/2) */
  transform: translateX(-105%);
  transition: transform .55s cubic-bezier(.22,.75,.15,1), opacity .25s ease;
  opacity:0;
  will-change: transform, opacity;
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.switcher.is-visible{
  transform: translateX(0);
  opacity:1;
}

.switcher-panel{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:20px;
  /* halbtransparenter, glasiger Hintergrund – NICHT schwarz */
  background: rgba(12,16,22,1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03) inset;
}

.switcher-inner{ max-width:min(92%,900px); text-align:center; }
.switcher .badge{
  display:inline-block; font-weight:900; font-size:12px;
  padding:4px 10px; border-radius:999px;
  background:var(--badge); border:1px solid var(--line); color:var(--accent);
  margin-bottom:8px;
}
.switcher-title{
  font-size: clamp(18px, 3.6vw, 34px);
  font-weight: 1000; line-height: 1.25; margin: 0 0 8px;
}
.switcher-meta{ color: var(--muted); font-size: 14px; }
.switcher-meta a{ color: var(--accent); text-decoration: none; }
.switcher-meta a:hover{ text-decoration: underline; }

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--modal-z);
  display: none;
}
.modal.show { display: block; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.modal__dialog {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.98);
  width: var(--modal-max-w);
  max-height: var(--modal-max-h);
  background: var(--modal-bg);
  color: inherit;
  border: 1px solid var(--modal-border);
  border-radius: 16px;
  box-shadow: var(--modal-shadow);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  opacity: 0;
  transition: transform .16s ease, opacity .16s ease;
}
.modal.show .modal__dialog {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.modal__title {
  margin: 0;
  padding: 16px 20px;
  font-size: clamp(18px, 2.2vw, 22px);
  border-bottom: 1px solid var(--modal-border);
}

.modal__body {
  padding: 16px 20px;
  overflow: auto;
  line-height: 1.55;
}
.modal__body h1, .modal__body h2, .modal__body h3 { margin-top: 1.2em; }
.modal__body img, .modal__body iframe { max-width: 100%; height: auto; }

.modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px; height: 40px;
  border: 0; border-radius: 12px;
  background: transparent;
  color: inherit;
  font-size: 28px; line-height: 40px;
  cursor: pointer;
}
.modal__close:hover { background: rgba(255,255,255,.06); }

/* Body scroll lock, wenn Modal offen */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}

/* Kleine Screens: Rand & volle Höhe */
@media (max-width: 520px) {
  .modal__dialog {
    width: min(96vw, 560px);
    max-height: min(90vh, 100dvh - 2rem);
    border-radius: 14px;
  }
}