/* ===========================================================================
   Pop — visual system.

   Written mobile-first: the phone layout is the base and wider screens add to
   it. Three rules hold the whole thing together:

     1. ONE accent. Ivory carries every emphasis; red means "live" and nothing
        else. The previous sheet used the cream for headings, buttons, tab
        labels and links at once, so nothing read as more important than
        anything else.
     2. WARM neutrals. The ground is a near-black with a warm bias. A cool grey
        under a cream accent makes the cream look washed out; warming the
        ground by a few degrees makes the same cream read as deliberate.
     3. Depth by LAYER, not by border. Surfaces step up in lightness and carry a
        hairline ring, rather than being outlined boxes on a flat page.
   ======================================================================== */

/* Archivo: a variable grotesque with real width and weight axes. Used for
   display type, section headings and badges — the wide cut carries the
   broadcast feel that a live-sport app wants, and the narrow cut keeps long
   Spanish fixture names on one line. Body copy stays on the system face, which
   is SF Pro here and is better hinted for small running text. */
@font-face{
  font-family:'Archivo';
  src:url('/fonts/archivo-latin.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url('/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:#0B0A09;         /* page ground */
  --ink-1:#151311;       /* cards, inputs */
  --ink-2:#1F1C19;       /* controls */
  --ink-3:#2B2723;       /* pressed / hovered control */
  --line:rgba(245,242,232,.11);
  --line-soft:rgba(245,242,232,.06);

  --ivory:#F5F2E8;       /* the one accent */
  --text:#EDEAE1;
  --text-2:#A8A398;
  --text-3:#726D66;
  --live:#E5252C;
  --error:#F0A093;

  --r-sm:9px; --r:14px; --r-lg:20px; --pill:999px;
  --pad:16px;
  --bar:52px;
  --nav:calc(56px + env(safe-area-inset-bottom));
  --top:calc(var(--bar) + env(safe-area-inset-top));

  --display:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.68,.16,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow-x:hidden}
body{
  background:var(--ink); color:var(--text);
  font:400 15px/1.45 var(--body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}
.hidden{display:none !important}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;-webkit-appearance:none}
img{max-width:100%}
::selection{background:var(--ivory);color:var(--ink)}
:focus-visible{outline:2px solid var(--ivory);outline-offset:2px;border-radius:4px}

/* Micro-label: uppercase, wide-tracked, small. Used for eyebrows, day names
   and badges — the device that makes a dense screen feel organised. */
.eyebrow{
  font-family:var(--display);font-size:10px;font-weight:650;font-stretch:105%;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}

/* ---------- gate --------------------------------------------------------- */
.gate{position:fixed;inset:0;display:grid;place-items:center;z-index:60;padding:28px;
      background:radial-gradient(120% 80% at 50% 0%,#181513 0%,var(--ink) 62%)}
.gate-box{display:flex;flex-direction:column;gap:10px;width:min(330px,100%)}
.gate-box h1{
  margin:0 0 18px;text-align:center;color:var(--ivory);
  font-family:var(--display);font-size:44px;font-weight:800;font-stretch:112%;
  letter-spacing:-.03em;line-height:1;
}
input{
  background:var(--ink-1);color:var(--text);padding:15px 16px;width:100%;
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
input::placeholder{color:var(--text-3)}
input:focus{outline:0;border-color:rgba(245,242,232,.34);background:var(--ink-2)}
.gate-box button{
  background:var(--ivory);color:var(--ink);padding:15px;border-radius:var(--r);
  font-family:var(--display);font-weight:700;font-stretch:105%;letter-spacing:.01em;
  margin-top:4px;transition:transform .12s var(--ease),opacity .18s var(--ease);
}
.gate-box button:active{transform:scale(.98)}
.error{color:var(--error);font-size:13px;min-height:1.2em;margin:4px 0 0;text-align:center}

/* ---------- header ------------------------------------------------------- */
/* Transparent over the hero, and only takes on a background once the page has
   moved. A permanently-filled bar over a cinematic still cuts the image in
   half and is the single loudest "unfinished" signal on a phone. */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;gap:12px;align-items:center;
  height:var(--top);padding:env(safe-area-inset-top) var(--pad) 0;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .28s var(--ease),border-color .28s var(--ease),
             backdrop-filter .28s var(--ease);
}
.bar.solid{
  background:rgba(11,10,9,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line-soft);
}
.brand{
  font-family:var(--display);font-size:21px;font-weight:800;font-stretch:112%;
  letter-spacing:-.025em;color:var(--ivory);line-height:1;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.spacer{flex:1}
.search{max-width:min(420px,62vw);padding:9px 14px;border-radius:var(--pill);font-size:14px}

/* ---------- bottom navigation -------------------------------------------- */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(5,1fr);
  height:var(--nav);padding-bottom:env(safe-area-inset-bottom);
  background:rgba(11,10,9,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line-soft);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--text-3);padding:6px 2px;min-height:44px;position:relative;
  transition:color .2s var(--ease);
}
.tab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;
         stroke-linecap:round;stroke-linejoin:round;
         transition:transform .24s var(--ease)}
.tab i{font-style:normal;font-family:var(--display);font-size:10px;font-weight:600;
       font-stretch:104%;letter-spacing:.02em}
.tab.active{color:var(--ivory)}
.tab.active svg{transform:translateY(-1px) scale(1.06)}
.tab:active svg{transform:scale(.9)}

/* The player and multiview are full-bleed video; the header would sit on the
   picture and collide with the floating back control. */
body.immersive .bar{display:none}

/* ---------- views -------------------------------------------------------- */
.view{
  position:relative;
  padding:var(--top) var(--pad) calc(var(--nav) + 28px);
  min-height:100vh;
  animation:enter .32s var(--ease) both;
}
@keyframes enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* A back control shaped like a chip, so it reads as pressable over artwork. */
.back{
  display:inline-flex;align-items:center;gap:5px;
  margin:0 0 14px;padding:9px 15px 9px 11px;min-height:40px;
  background:var(--ink-2);border:1px solid var(--line-soft);border-radius:var(--pill);
  color:var(--text-2);font-size:14px;font-weight:500;
  transition:background .16s var(--ease),color .16s var(--ease),transform .12s var(--ease);
}
.back:active{transform:scale(.96);background:var(--ink-3);color:var(--text)}

/* ---------- hero --------------------------------------------------------- */
/* Bleeds past the page padding and up under the transparent header, then fades
   into the page ground so there is no seam between artwork and content. */
.hero{
  position:relative;margin:calc(var(--top) * -1) calc(var(--pad) * -1) 4px;
  /* The artwork is 960x540. A frame much taller than that crops the subject
     out of its own still, so this stays close to the source ratio and only
     trades a little width for the height a hero needs on a phone. */
  aspect-ratio:4/3;max-height:66vh;overflow:hidden;background:var(--ink-1);
}
.hero .shot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .85s var(--ease);
}
.hero .shot.on{opacity:1}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(11,10,9,.55) 0%,rgba(11,10,9,0) 26%,
                    rgba(11,10,9,.55) 62%,rgba(11,10,9,.93) 84%,var(--ink) 100%),
    linear-gradient(to right,rgba(11,10,9,.5) 0%,rgba(11,10,9,0) 55%);
}
.hero-txt{
  position:absolute;left:var(--pad);right:var(--pad);bottom:20px;z-index:2;
}
.hero-txt h1{
  margin:8px 0 0;font-family:var(--display);
  font-size:clamp(28px,8.4vw,42px);font-weight:800;font-stretch:110%;
  letter-spacing:-.032em;line-height:.98;color:#fff;text-wrap:balance;
  text-shadow:0 2px 22px rgba(0,0,0,.5);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-meta{display:flex;gap:8px;align-items:center;margin:10px 0 0;flex-wrap:wrap}
.hero-meta span{font-size:12.5px;color:var(--text-2)}
.hero-meta span+span::before{content:'·';margin-right:8px;color:var(--text-3)}
.hero-btns{display:flex;gap:9px;margin-top:15px}
.hero-btns button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 20px;height:46px;border-radius:var(--pill);
  font-family:var(--display);font-size:15px;font-weight:700;font-stretch:104%;
  transition:transform .12s var(--ease),background .18s var(--ease);
}
.hero-btns button:active{transform:scale(.965)}
.hero-btns .go{background:var(--ivory);color:var(--ink);flex:1 1 auto;max-width:210px}
.hero-btns .info{
  background:rgba(30,27,24,.62);color:var(--text);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
}
.hero-btns svg{width:17px;height:17px;fill:currentColor}
/* Position ticks: which of the featured titles is showing, and how many. */
.hero-dots{position:absolute;right:var(--pad);top:calc(var(--top) + 12px);z-index:2;
           display:flex;flex-direction:column;gap:5px}
.hero-dots b{display:block;width:3px;height:13px;border-radius:2px;
             background:rgba(245,242,232,.28);transition:background .3s var(--ease)}
.hero-dots b.on{background:var(--ivory)}

/* ---------- poster rows -------------------------------------------------- */
.row{margin-bottom:26px}
.row-head{
  display:flex;align-items:baseline;gap:8px;margin:0 0 10px;
  min-height:32px;
}
.row-head h2{
  margin:0;font-family:var(--display);font-size:17.5px;font-weight:700;font-stretch:106%;
  letter-spacing:-.018em;color:var(--text);
}
.row-head .more{
  margin-left:auto;color:var(--text-3);font-size:12.5px;font-weight:500;
  white-space:nowrap;transition:color .16s var(--ease)
}
.row-head:active .more{color:var(--ivory)}

.strip{
  display:flex;gap:11px;overflow-x:auto;scrollbar-width:none;
  padding:2px var(--pad) 6px;margin:0 calc(var(--pad) * -1);
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scroll-padding-left:var(--pad);
}
.strip::-webkit-scrollbar{display:none}

.card{flex:0 0 auto;width:112px;scroll-snap-align:start;position:relative;
      transition:transform .16s var(--ease)}
.card:active{transform:scale(.955)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 11px}
.grid .card{width:auto}
.art{
  position:relative;width:100%;aspect-ratio:2/3;border-radius:var(--r-sm);
  overflow:hidden;background:var(--ink-1);
  box-shadow:inset 0 0 0 1px var(--line-soft),0 6px 18px -12px rgba(0,0,0,.9);
}
.poster{width:100%;height:100%;object-fit:cover;display:block;
        opacity:0;transition:opacity .4s var(--ease)}
.poster.ready{opacity:1}
.card p{
  margin:7px 0 0;font-size:12px;line-height:1.3;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Resume indicator, sitting on the artwork rather than under it. */
.card .bar{position:absolute;left:6px;right:6px;bottom:6px;height:3px;border-radius:2px;
           background:rgba(0,0,0,.55);overflow:hidden}
.card .bar i{display:block;height:100%;background:var(--live);border-radius:2px}

/* ---------- skeletons ---------------------------------------------------- */
/* Shown while a screen loads. A centred spinner over an empty page is what
   makes waiting feel like a fault; a skeleton in the shape of the thing that
   is coming makes the same wait feel like progress. */
.sk{background:var(--ink-1);border-radius:var(--r-sm);position:relative;overflow:hidden}
.sk::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(245,242,232,.055),transparent);
  animation:sweep 1.5s infinite;
}
@keyframes sweep{100%{transform:translateX(100%)}}
.sk-h{height:19px;width:44%;margin-bottom:12px;border-radius:5px}
.sk-hero{aspect-ratio:4/3;max-height:66vh;border-radius:0;
         margin:calc(var(--top) * -1) calc(var(--pad) * -1) 18px}
.sk-row{width:112px;flex:0 0 auto;aspect-ratio:2/3}
.sk-line{height:56px;margin-bottom:9px;border-radius:var(--r-sm)}

/* ---------- title detail ------------------------------------------------- */
.detail-art{
  position:relative;margin:calc(var(--top) * -1) calc(var(--pad) * -1) 0;
  aspect-ratio:16/9;background:var(--ink-1);
}
.detail-art img{width:100%;height:100%;object-fit:cover;display:block}
.detail-art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(11,10,9,.4) 0%,rgba(11,10,9,0) 38%,
             rgba(11,10,9,.86) 88%,var(--ink) 100%);
}
/* Floating over the artwork, so the detail page opens on the image rather than
   on a bar of chrome. */
.detail-art .back{
  position:absolute;left:var(--pad);top:calc(env(safe-area-inset-top) + 10px);z-index:3;
  margin:0;background:rgba(11,10,9,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:var(--line);color:var(--text);
}
#title-body h1{
  margin:-26px 0 0;position:relative;z-index:2;
  font-family:var(--display);font-size:27px;font-weight:800;font-stretch:108%;
  letter-spacing:-.028em;line-height:1.05;color:#fff;text-wrap:balance;
}
.meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:11px 0 0;
      color:var(--text-2);font-size:12.5px}
.meta span+span::before{content:'·';margin-right:8px;color:var(--text-3)}
.meta .imdb{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.04em;
  background:var(--ink-2);border:1px solid var(--line);color:var(--ivory);
  padding:3px 8px;border-radius:5px;
}
.meta .imdb::before{content:none}
#title-body p.plot{margin:14px 0 0;color:var(--text-2);font-size:14.5px;
                   line-height:1.55;max-width:66ch}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0 4px}
.actions button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--ink-2);color:var(--text);border:1px solid var(--line);
  padding:0 18px;height:48px;border-radius:var(--pill);flex:1 1 auto;
  font-family:var(--display);font-size:14.5px;font-weight:650;font-stretch:104%;
  transition:transform .12s var(--ease),background .18s var(--ease);
}
.actions button:active{transform:scale(.97);background:var(--ink-3)}
.actions button.primary{background:var(--ivory);color:var(--ink);border-color:transparent;
                        font-weight:700;flex:1 1 100%}
.actions button.primary:active{background:#fff}
.actions svg{width:16px;height:16px;fill:currentColor}

.season{margin-top:26px}
.season h3{
  margin:0 0 4px;font-family:var(--display);font-size:15px;font-weight:700;
  font-stretch:106%;letter-spacing:-.01em;color:var(--text);
}
.ep{
  display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line-soft);cursor:pointer;
  transition:opacity .16s var(--ease);
}
.ep:active{opacity:.6}
.ep .thumb{width:118px;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;
           background:var(--ink-1);box-shadow:inset 0 0 0 1px var(--line-soft)}
.ep img{width:100%;height:100%;object-fit:cover;display:block}
.ep b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--text)}
.ep span{display:block;margin-top:3px;color:var(--text-3);font-size:11.5px;line-height:1.35;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- fixtures & channels ------------------------------------------ */
/* Off-screen groups are not laid out at all, which is what keeps a guide of
   several hundred rows scrolling smoothly on a phone. */
.channels{display:flex;flex-direction:column;
          content-visibility:auto;contain-intrinsic-size:auto 640px}
.ch{
  display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;
  padding:12px 2px;min-height:66px;border-top:1px solid var(--line-soft);cursor:pointer;
  transition:background .14s var(--ease);
}
.ch:first-child{border-top:0}
.ch:active{background:rgba(245,242,232,.05)}

/* The time rail. A fixed column means every row starts on the same vertical
   line, which is most of what makes a long list look composed. */
.when{text-align:left;line-height:1.1}
.when b{display:block;font-family:var(--display);font-size:14px;font-weight:700;
        font-stretch:104%;font-variant-numeric:tabular-nums;color:var(--text);
        letter-spacing:-.01em}
.when i{display:block;margin-top:2px;font-style:normal;font-family:var(--display);
        font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
        color:var(--text-3)}
.when .live-dot{display:block;width:7px;height:7px;border-radius:50%;background:var(--live);
                margin:2px 0 0 4px;animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(229,37,44,.55)}
                 70%{opacity:.85;box-shadow:0 0 0 7px rgba(229,37,44,0)}}

.ch .logo{display:none;width:60px;height:34px;border-radius:6px;background:var(--ink-1);
          box-shadow:inset 0 0 0 1px var(--line-soft);flex:0 0 auto}
.ch .logo img{width:100%;height:100%;object-fit:contain;display:block;padding:3px}
.ch .txt{min-width:0}
.ch .txt b{display:block;font-family:var(--display);font-size:14.5px;font-weight:650;
           font-stretch:100%;letter-spacing:-.012em;line-height:1.25;color:var(--text);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch .txt span{display:block;margin-top:3px;color:var(--text-3);font-size:12px;
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.liveTag{
  font-family:var(--display);font-style:normal;font-size:9.5px;font-weight:750;
  letter-spacing:.1em;background:var(--live);color:#fff;
  padding:4px 7px;border-radius:5px;white-space:nowrap;
}
h2.sticky{
  position:sticky;top:var(--top);z-index:10;margin:0;
  padding:14px 2px 9px;background:linear-gradient(var(--ink) 76%,rgba(11,10,9,0));
  font-family:var(--display);font-size:12px;font-weight:700;font-stretch:104%;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}
.ch.picked{background:rgba(245,242,232,.08);box-shadow:inset 3px 0 0 var(--ivory)}
.ch.picked .txt b{color:var(--ivory)}

.selbar{
  position:sticky;top:var(--top);z-index:12;display:flex;gap:8px;align-items:center;
  padding:10px 0;background:var(--ink);
}
.selbar button{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--ink-2);border:1px solid var(--line);color:var(--text);
  padding:0 17px;height:44px;border-radius:var(--pill);
  font-family:var(--display);font-size:14px;font-weight:650;font-stretch:104%;
  transition:transform .12s var(--ease),background .16s var(--ease);
}
.selbar button:active{transform:scale(.97)}
.selbar button#sel-open{background:var(--ivory);color:var(--ink);border-color:transparent;
                        font-weight:700}
.selbar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
            stroke-linecap:round;stroke-linejoin:round}

/* A fixture that has not kicked off yet. Reads as listed-but-not-yet rather
   than as a broken row, and its time is what stands out instead of a badge. */
.ch.later{opacity:.62}
.ch.later .when b{color:var(--ivory)}
.ch.later:active{background:transparent}

/* ---------- toast --------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--nav) + 18px);z-index:70;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  max-width:calc(100vw - 40px);padding:13px 18px;
  background:rgba(31,28,25,.96);color:var(--text);
  border:1px solid var(--line);border-radius:var(--pill);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.95);
  font-size:13.5px;text-align:center;
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- curated sections --------------------------------------------- */
.sections{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.sec{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-1);
  aspect-ratio:561/180;box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:transform .16s var(--ease);
}
.sec:active{transform:scale(.97)}
.sec img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- player ------------------------------------------------------- */
.player{padding:0 0 var(--nav);background:#000;min-height:100vh}
.player .back{
  position:absolute;left:var(--pad);top:calc(env(safe-area-inset-top) + 10px);z-index:5;
  margin:0;background:rgba(11,10,9,.55);border-color:var(--line);color:var(--text);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.stage{position:relative;background:#000;display:grid;place-items:center;min-height:56vw}
#video{width:100%;max-height:78vh;background:#000;display:block}
.pbar{display:flex;gap:8px;flex-wrap:wrap;padding:14px var(--pad)}
.pbar button{
  background:var(--ink-2);border:1px solid var(--line);color:var(--text-2);
  font-family:var(--display);font-size:13px;font-weight:600;font-stretch:104%;
  padding:0 16px;height:42px;border-radius:var(--pill);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.pbar button.on{background:var(--ivory);color:var(--ink);border-color:transparent;font-weight:700}
#player-error{padding:0 var(--pad)}

/* Next-episode prompt: a card, not a strip of buttons. */
.nextup{
  position:fixed;left:var(--pad);right:var(--pad);bottom:calc(var(--nav) + 14px);z-index:20;
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:14px;
  background:rgba(21,19,17,.92);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.95);
  animation:rise .32s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.nextup span{flex:1 1 100%;font-size:13.5px;color:var(--text-2)}
.nextup b{color:var(--text);font-weight:600}
.nextup button{
  flex:1;height:44px;border-radius:var(--pill);background:var(--ivory);color:var(--ink);
  font-family:var(--display);font-size:14px;font-weight:700;font-stretch:104%;
}
.nextup button.secondary{background:var(--ink-2);color:var(--text-2);border:1px solid var(--line)}

/* ---------- multiview ---------------------------------------------------- */
.multi{padding:0 0 var(--nav);background:#000;min-height:100vh}
.mbar{display:flex;gap:10px;align-items:center;
      padding:calc(env(safe-area-inset-top) + 10px) var(--pad) 10px}
.mbar button{
  background:var(--ink-2);border:1px solid var(--line);color:var(--text);
  padding:0 15px;height:42px;border-radius:var(--pill);
  font-family:var(--display);font-size:13.5px;font-weight:650;font-stretch:104%;
}
.mbar span{color:var(--text-3);font-size:11.5px}
.mgrid{display:grid;gap:4px;padding:0 4px}
.mgrid.g1{grid-template-columns:1fr}
.mgrid.g2{grid-template-columns:1fr 1fr}
.mtile{position:relative;background:#0A0908;aspect-ratio:16/9;overflow:hidden;
       border-radius:var(--r-sm)}
.mtile video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.mtile .lbl{
  position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;pointer-events:none;
  font-family:var(--display);font-size:11px;font-weight:600;font-stretch:100%;
  background:linear-gradient(transparent,rgba(0,0,0,.88));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mtile.audio{box-shadow:inset 0 0 0 2px var(--ivory)}
.mtile .spk{
  position:absolute;top:6px;right:7px;background:var(--ivory);color:var(--ink);
  font-family:var(--display);font-size:9px;font-weight:750;letter-spacing:.1em;
  border-radius:4px;padding:3px 6px;
}

/* ---------- misc --------------------------------------------------------- */
.hint{color:var(--text-3);font-size:13.5px;text-align:center;padding:32px 0}
.spinner{
  position:fixed;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;z-index:50;
  border:2px solid rgba(245,242,232,.2);border-top-color:var(--ivory);border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::after,*::before{animation-duration:.001ms !important;animation-iteration-count:1 !important;
                       transition-duration:.001ms !important}
}

/* ---------- larger phones ------------------------------------------------ */
@media (min-width:400px){
  .ch{grid-template-columns:48px 60px 1fr auto}
  .ch .logo{display:block}
  .card,.sk-row{width:124px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
}
@media (min-width:560px){
  .hero{aspect-ratio:16/9}
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* ---------- desktop & landscape tablet: navigation moves into the header ---
   The breakpoint is 1000px rather than 900: the header has to fit the brand,
   five labelled tabs AND the search field on one line, and below about a
   thousand pixels the tabs and the field land on top of each other. Narrower
   than this the bottom bar is the better answer anyway. */
@media (min-width:1000px){
  :root{--pad:32px;--nav:0px}
  .bar{padding-left:var(--pad);padding-right:var(--pad)}
  /* Capped so it cannot grow back into the tab strip. */
  .search{max-width:240px}
  .tabs{
    /* Sits immediately after the brand, leaving the far right to search. */
    position:fixed;left:calc(var(--pad) + 74px);right:auto;top:0;bottom:auto;
    height:var(--top);padding:env(safe-area-inset-top) 0 0;
    grid-template-columns:repeat(5,max-content);gap:2px;
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-top:0;z-index:31;align-items:center;
  }
  .tab{flex-direction:row;gap:7px;padding:8px 13px;height:38px;min-height:38px;
       border-radius:var(--pill);transition:background .18s var(--ease),color .18s var(--ease)}
  .tab svg{width:17px;height:17px}
  .tab i{font-size:13.5px}
  .tab:hover{color:var(--text)}
  .tab.active{background:rgba(245,242,232,.1);color:var(--ivory)}
  .tab.active svg{transform:none}
  .hero{aspect-ratio:auto;height:min(78vh,620px);max-height:none}
  .hero-txt{left:var(--pad);max-width:620px;bottom:44px}
  .hero-btns .go{max-width:230px}
  .card,.sk-row{width:158px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:20px 16px}
  .card:hover{transform:translateY(-4px)}
  .card:hover .art{box-shadow:inset 0 0 0 1px rgba(245,242,232,.2),0 18px 34px -18px rgba(0,0,0,1)}
  .sections{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
  .sec:hover{transform:translateY(-3px)}
  .detail-art{aspect-ratio:21/9;max-height:64vh}
  #title-body h1{font-size:38px;margin-top:-38px}
  .actions button{flex:0 0 auto}
  .actions button.primary{flex:0 0 auto;min-width:190px}
  .ep{grid-template-columns:180px 1fr}
  .ep .thumb{width:180px}
  #video{max-height:82vh}
  .nextup{left:auto;right:var(--pad);bottom:28px;width:380px}
  .row-head .more:hover{color:var(--ivory)}
}