/* Binged & Flixed — CDN Control
   Base ported from the design export. Layout lives as inline styles in app.js,
   so mobile overrides need !important to win. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#0b0d11;color:#eef1f4;font-family:'Geist',-apple-system,'Helvetica Neue',Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#8fd8cd;text-decoration:none}
a:hover{color:#b6e8e0}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.11);border-radius:9px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);background-clip:padding-box}
.norail::-webkit-scrollbar{height:0;width:0}
.norail{scrollbar-width:none;-ms-overflow-style:none}
input,button,select,textarea{font-family:inherit}
input::placeholder{color:#61666e}
input:focus,textarea:focus{outline:none}
@keyframes softin{from{opacity:0}to{opacity:1}}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(60px,-40px,0) scale(1.12)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* hover states (were style-hover="…" in the export) */
.h-soft:hover{background:rgba(255,255,255,.07)!important}
.h-mid:hover{background:rgba(255,255,255,.12)!important;color:#eef1f4!important}
.h-strong:hover{background:rgba(255,255,255,.16)!important}
.h-bright:hover{background:rgba(255,255,255,.22)!important}
.h-13:hover{background:rgba(255,255,255,.13)!important}
.h-14:hover{background:rgba(255,255,255,.14)!important}
.h-teal:hover{background:#b6e8e0!important}
.h-out:hover{background:rgba(226,146,132,.14)!important;color:#e9a99b!important;border-color:rgba(226,146,132,.24)!important}
.h-lift{transition:transform .34s cubic-bezier(.2,.8,.2,1),border-color .3s}
.h-lift:hover{transform:translateY(-6px);border-color:rgba(143,216,205,.42)}
.h-lift16{transition:transform .34s cubic-bezier(.2,.8,.2,1),border-color .3s}
.h-lift16:hover{transform:translateY(-5px);border-color:rgba(143,216,205,.4)}

.sp{width:16px;height:16px;border:2px solid rgba(255,255,255,.14);border-top-color:#8fd8cd;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.boot-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:12px;color:#9aa0a8;position:relative;z-index:10}
.brand-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(150deg,rgba(143,216,205,.5),rgba(143,216,205,.12));border:1px solid rgba(143,216,205,.34);display:flex;align-items:center;justify-content:center}
.brand-mark svg{width:22px;height:22px;fill:none;stroke:#d6f2ec;stroke-width:2;stroke-linejoin:round}
.skip-link{position:absolute;left:-9999px}

/* ── poster card hover: rating + popularity ─────────────────────── */
.bf-card{position:relative}
.bf-meta{
  position:absolute;left:0;right:0;bottom:0;padding:10px 11px 11px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.9) 55%);
  opacity:0;transform:translateY(6px);
  transition:opacity .22s ease,transform .22s ease;pointer-events:none;
}
.bf-card:hover .bf-meta,.bf-card:focus-within .bf-meta{opacity:1;transform:none}
.bf-meta-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bf-star{font:600 12px/1 'Geist',sans-serif;color:#ffd479}
.bf-pop{font:400 10px/1 'Geist Mono',monospace;color:#b9bfc6}
.bf-ov{margin-top:6px;font:400 10.5px/1.4 'Geist',sans-serif;color:#c3c8ce;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* completion bar on series tiles */
.bf-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.55)}
.bf-prog i{display:block;height:100%;background:#8fd8cd}
.bf-prog.full i{background:#7ee0a8}

/* ── MOBILE ─────────────────────────────────────────────────────── */
@media(max-width:900px){
  .bf-aside{transform:translateX(-320px)!important;opacity:0!important;
    width:min(84vw,270px)!important;left:8px!important;top:8px!important;bottom:8px!important}
  .bf-aside.show{transform:none!important;opacity:1!important;z-index:140!important}
  .bf-main{margin-left:0!important;padding-bottom:96px!important}

  /* every inline-padded shell gets sane phone padding */
  .bf-pad{padding:12px 12px 0!important;max-width:100%!important}

  /* topbar wraps instead of running off-screen */
  .bf-top{margin:8px!important;padding:10px 12px!important;flex-wrap:wrap!important;
    min-height:0!important;row-gap:9px!important;position:static!important}
  .bf-top .bf-hidemob{display:none!important}
  .bf-search{width:100%!important;order:9!important;flex:1 1 100%!important}

  /* stat strip: 5 across is unreadable on a phone */
  .bf-strip{grid-template-columns:1fr 1fr!important;border-radius:16px!important}
  .bf-strip>div{padding:15px 14px 17px!important;border-right:none!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important}
  .bf-strip>div>div:nth-child(2){font-size:23px!important;margin-top:12px!important}

  .bf-two{grid-template-columns:1fr!important;gap:14px!important}
  .bf-panel{padding:18px 16px!important;border-radius:16px!important}

  /* denser poster grid */
  .bf-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))!important;
    gap:15px 10px!important;margin-top:16px!important}
  /* touch has no hover — always show the meta strip */
  .bf-meta{opacity:1;transform:none;padding:7px 8px 8px}
  .bf-ov{display:none}

  /* filter row scrolls horizontally */
  .bf-filters{overflow-x:auto!important;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap!important;scrollbar-width:none}
  .bf-filters::-webkit-scrollbar{display:none}
  .bf-filters button{flex:0 0 auto!important;white-space:nowrap!important}

  /* detail + player go full screen */
  .bf-detail{padding:0!important}
  .bf-detail>div{max-height:100vh!important;border-radius:0!important;width:100%!important}
  .bf-player{border-radius:0!important}

  /* ops cards stack */
  .bf-ops{grid-template-columns:1fr!important}
}
@media(max-width:520px){
  .bf-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))!important;gap:13px 8px!important}
  .bf-strip{grid-template-columns:1fr!important}
  .bf-pad{padding:10px 9px 0!important}
}

/* floating menu button so the rail is reachable on touch */
.bf-mobtn{display:none}
@media(max-width:900px){
  .bf-mobtn{display:flex!important;position:fixed;left:12px;bottom:16px;z-index:150;
    width:48px;height:48px;border-radius:50%;align-items:center;justify-content:center;
    gap:4px;flex-direction:column;background:rgba(143,216,205,.94);
    border:1px solid rgba(143,216,205,.5);color:#0c1614;
    box-shadow:0 14px 34px -8px rgba(0,0,0,.85);cursor:pointer}
  .bf-mobtn span{display:block;width:17px;height:2px;border-radius:2px;background:currentColor}
  .bf-scrim{position:fixed;inset:0;z-index:135;background:rgba(0,0,0,.5);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
}