/* =====================================================================
   home.css — the homepage: the game-first hero with the three ways to watch (FILMS · 3D REPLAYS · LIVE),
   "Now in Films" (a film is never cropped), the UNDERDOG TV sections, the reworked game sections and the footer.
   The top bar, the phone tab bar and the menu sheet are the site's shared bar (css/topbar.css, from
   Tools/monologic-site/shared-nav); this file only leaves the page room for them (--tb-h, --tab-h).
   Same visual language as UNDERDOG TV (Oswald display / Inter UI / JetBrains Mono numbers, red #ff3838,
   gold #e9b949, near-black). Breakpoints: 760 (phone: the tab bar under the page).
   ===================================================================== */

:root{
  --nav-h:var(--tb-h);
  --tb-maxw:var(--maxw-wide);   /* the shared bar follows the page's grid */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tile-h:clamp(178px,22vh,280px);
}
html{scroll-padding-top:calc(var(--tb-h) + 8px)}
#view-privacy{padding-top:var(--nav-h)}

/* ---------- utilities ---------- */
/* the hidden attribute always wins over a component's display (menus, sheet, fallbacks) */
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:16px;top:-64px;z-index:500;padding:11px 18px;border-radius:12px;background:var(--gold);color:#16120a;
  font-weight:700;font-size:14px;transition:top .15s var(--ease)}
.skip-link:focus{top:12px}
#app:focus{outline:none}
/* decorative glows and full-bleed backgrounds may reach past the window edge: never a sideways scroll */
#app{overflow-x:clip}
.lbl-short{display:none}
button{font-size:inherit}

/* ---------- buttons (additions) ---------- */
.btn .ic{width:19px;height:19px}
.btn-glass{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:#fff;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-glass:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
.btn-xl{padding:17px 30px;font-size:16px}
.btn-yt{background:#ff1f3d;color:#fff}
.btn-yt:hover{background:#ff3d57;transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* the shared bar sits over the page (css/topbar.css); on phones its tab bar takes the bottom of the window */
@media(max-width:760px){
  body{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
}

/* =====================================================================
   HERO: brand + "Now in Films" + the three ways to watch
   ===================================================================== */
.hx{display:block;min-height:0;padding:0}
.hx .hero-bg::after{background:
    linear-gradient(90deg,rgba(8,9,12,.9) 0%,rgba(8,9,12,.62) 32%,rgba(8,9,12,.28) 62%,rgba(8,9,12,.5) 100%),
    linear-gradient(180deg,rgba(8,9,12,.55) 0%,rgba(8,9,12,0) 22%,rgba(8,9,12,.15) 52%,rgba(8,9,12,.86) 80%,var(--void) 100%)}
.hx-in{position:relative;z-index:4;max-width:var(--maxw-wide);min-height:100svh;margin:0 auto;display:flex;flex-direction:column;
  gap:clamp(18px,3.2vh,40px);padding:calc(var(--tb-h) + clamp(10px,3vh,44px)) var(--pad-x) clamp(22px,3.4vh,44px)}
.hx-top{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,96px)}
.hx-brand{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.hx .hero-badge{margin-bottom:clamp(14px,2.4vh,26px)}
.hx h1{font-size:clamp(54px,min(8.4vw,12vh),156px);margin:0}
.hx .hero-tag{margin-top:clamp(16px,2.6vh,28px);max-width:44ch;font-size:clamp(16px,1.2vw,21px);color:rgba(255,255,255,.8);text-wrap:pretty}
.hx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(20px,3.4vh,36px)}
.hx-play{padding:17px 30px;font-size:16px}
.hx-play .ic{width:22px;height:22px}
.hx-sec{padding:16px 22px}
.hx-now{flex:none;align-self:center}
.hx-now:empty{display:none}
/* entrance */
.hx-brand>*,.hx-choice,.hx-now{animation:hxUp .8s var(--ease-out) both}
.hx-brand>:nth-child(2){animation-delay:.08s}.hx-brand>:nth-child(3){animation-delay:.18s}.hx-brand>:nth-child(4){animation-delay:.26s}
.hx-now{animation-delay:.3s}.hx-choice{animation-delay:.36s}
@keyframes hxUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* the umbrella wordmark: small, never the label a visitor has to decode */
.tvmark{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.86);white-space:nowrap}
.tvmark b{display:inline-grid;place-items:center;height:18px;padding:0 5px;border-radius:5px;background:var(--red);color:#fff;font-size:11.5px;letter-spacing:.08em;box-shadow:0 0 14px var(--red-glow)}
.tvmark-sm{font-size:11px}
.tvmark-sm b{height:17px;font-size:10.5px}
.eyebrow .tvmark{margin-right:2px}
.eyebrow:has(.tvmark)::before{display:none}

/* the three ways to watch */
.hx-choice{flex:none}
.hx-choice-h{display:flex;align-items:center;gap:14px;margin:0 0 12px;font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.hx-choice-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent)}
.hx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,22px)}
.tile{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:var(--tile-h);padding:clamp(18px,1.5vw,28px);
  border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#171a22,#0b0c10);border:1px solid rgba(255,255,255,.13);
  box-shadow:0 22px 56px rgba(0,0,0,.5);color:#fff;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.tile:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.3);box-shadow:0 30px 76px rgba(0,0,0,.6)}
.tile:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.tile-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.tile-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,9,12,.94) 0%,rgba(8,9,12,.76) 38%,rgba(8,9,12,.08) 72%,rgba(8,9,12,0) 100%),
             linear-gradient(0deg,rgba(8,9,12,.72) 0%,rgba(8,9,12,0) 55%)}
.tile-body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;max-width:min(62%,380px)}
.tile-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#ff7373}
.tile-k .ic{width:17px;height:17px}
.tile-t{font-family:var(--f-head);font-size:clamp(26px,2.15vw,42px);font-weight:700;line-height:.98;letter-spacing:.01em;text-transform:uppercase;color:#fff;text-wrap:balance}
.tile-d{font-size:clamp(14px,.92vw,16px);line-height:1.45;color:rgba(255,255,255,.8);text-wrap:pretty}
.tile-go{position:absolute;right:16px;bottom:16px;z-index:2;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:rgba(8,9,12,.5);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;transition:.25s var(--ease)}
.tile-go .ic{width:20px;height:20px}
.tile:hover .tile-go,.tile:focus-visible .tile-go{background:var(--red);border-color:var(--red);box-shadow:0 8px 24px var(--red-glow);transform:translateX(3px)}
/* FILMS: real film posters in two phones (whole frames) */
.tile-glow{position:absolute;inset:-30%;background-size:cover;background-position:center;filter:blur(46px) saturate(1.5);opacity:.4}
.tile-art-films{position:absolute;top:9%;bottom:9%;right:8%;width:52%}
.tile-phone{position:absolute;bottom:0;height:100%;aspect-ratio:9/16;border-radius:15px;overflow:hidden;background:#07080b;
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 0 5px rgba(255,255,255,.04),0 24px 50px rgba(0,0,0,.65);transition:transform .45s var(--ease)}
.tile-phone::before{content:"";position:absolute;inset:-12%;background:var(--bd,none) center/cover;filter:blur(16px) brightness(.55)}
.tile-phone img{position:relative;width:100%;height:100%;object-fit:contain}
.tile-phone:not(.is-film) img{object-fit:cover}
.tile-phone img:not([src]),.tile-phone img.is-failed{visibility:hidden}
.tile-phone-a{right:0;transform:rotate(6deg);z-index:2}
.tile-phone-b{right:31%;transform:rotate(-8deg) scale(.88);transform-origin:bottom center;opacity:.92}
.tile-films:hover .tile-phone-a{transform:rotate(3deg) translateY(-6px)}
.tile-films:hover .tile-phone-b{transform:rotate(-11deg) scale(.88) translateY(-4px)}
.is-loading .tile-phone,.tile-shot.is-loading,.r3d-frame.is-loading{background:linear-gradient(100deg,#12151c 30%,#1c2029 50%,#12151c 70%);background-size:220% 100%;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{from{background-position:120% 0}to{background-position:-20% 0}}
/* 3D REPLAYS: a real frame of a 3D fight (whole, on its own blurred light) + the orbiting camera */
.tile-shot{position:absolute;inset:0}
.tile-shot::before{content:"";position:absolute;inset:-10%;background:var(--bd,none) center/cover;filter:blur(20px) brightness(.5)}
.tile-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.tile-shot img:not([src]),.tile-shot img.is-failed{visibility:hidden}
.tile-3d .tile-shot.is-film img{left:auto;right:0;width:auto;max-width:none;aspect-ratio:16/9;object-fit:contain}
.tile-orbit{position:absolute;right:4%;bottom:14%;width:62%;height:34%;overflow:visible;pointer-events:none}
.tile-orbit ellipse{fill:none;stroke:rgba(255,255,255,.62);stroke-width:1.6;stroke-dasharray:5 7;vector-effect:non-scaling-stroke;animation:orbitDash 5s linear infinite}
.tile-orbit-cam{fill:var(--red);filter:drop-shadow(0 0 6px var(--red))}
@keyframes orbitDash{to{stroke-dashoffset:-144}}
/* LIVE: the arena + the on-air lamp (lit only when something is live) */
.tile-live .tile-shot img{object-position:60% 22%;filter:saturate(.95) brightness(.86)}
.tile-lamp{position:absolute;top:14px;right:14px;display:none;align-items:center;gap:8px;height:28px;padding:0 11px;border-radius:7px;
  border:1px solid rgba(255,255,255,.2);background:rgba(8,9,12,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.tile-lamp i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.32)}
html.is-live .tile-lamp{display:inline-flex;color:#fff;border-color:rgba(255,90,90,.8);background:rgba(230,30,30,.86);box-shadow:0 0 26px var(--red-glow)}
html.is-live .tile-lamp i{background:#fff;animation:pulse 1.4s infinite}

/* =====================================================================
   "NOW IN FILMS": the featured film, playing muted in a loop - always the WHOLE frame
   ===================================================================== */
.now{--frame-h:clamp(300px,calc(100svh - var(--tb-h) - var(--tile-h) - 262px),640px);--frame-w:calc(var(--frame-h) * 9 / 16);
  margin:0;display:flex;flex-direction:column;gap:12px;width:var(--frame-w);max-width:100%}
.now[data-shape="landscape"]{--frame-w:min(40vw,640px)}
.now-label{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-head);font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff}
.now-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red)}
.now.is-live .now-dot{animation:pulse 1.6s infinite}
.now-screen{position:relative;flex:none;width:var(--frame-w);height:var(--frame-h);perspective:1600px}
.now[data-shape="landscape"] .now-screen{height:calc(var(--frame-w) * 9 / 16)}
.now-screen::before{content:"";position:absolute;inset:-14% -34%;z-index:-1;border-radius:50%;background:var(--glow,none) center/cover;
  filter:blur(70px) saturate(1.6);opacity:.5;pointer-events:none}
.now-frame{position:absolute;inset:0;display:block;overflow:hidden;border-radius:24px;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 0 7px rgba(255,255,255,.035),0 40px 100px rgba(0,0,0,.66),0 0 110px rgba(255,56,56,.18);
  transform:rotateY(-7deg) rotateX(2deg);transform-origin:70% 50%;transition:transform .5s var(--ease)}
.now-screen:hover .now-frame{transform:rotateY(-3deg) rotateX(1deg)}
.now-poster,.now-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
.now-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 26%)}
.now-progress{position:absolute;left:0;right:0;bottom:0;z-index:2;height:3px;background:rgba(255,255,255,.1)}
.now-progress i{display:block;height:100%;background:linear-gradient(90deg,#d91f1f,var(--red));transform:scaleX(0);transform-origin:left center}
/* play (only when the film waits: reduced motion, Save-Data, paused) and sound: away from the film's brand (top left) */
.now-play{position:absolute;left:50%;top:50%;z-index:3;width:68px;height:68px;margin:-34px 0 0 -34px;display:none;place-items:center;border-radius:50%;
  background:rgba(255,56,56,.92);color:#fff;box-shadow:0 0 34px var(--red-glow)}
.now-play .ic{width:28px;height:28px}
.now.is-paused .now-play{display:grid}
.now-sound{position:absolute;right:14px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(8,9,12,.58);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;font-size:12.5px;font-weight:600;transition:background-color .16s,border-color .16s}
.now-sound .ic{width:18px;height:18px}
.now-sound:hover{background:rgba(8,9,12,.78);border-color:rgba(255,255,255,.4)}
.now-sound.is-on{border-color:rgba(255,56,56,.65)}
.now-play:focus-visible,.now-sound:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.now-meta{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0}
.now-row{display:flex;align-items:center;gap:10px;min-width:0;margin:0}
.now-dur{font-family:var(--f-mono);font-size:12.5px;font-weight:700;color:var(--tx-hi)}
.now-deck span:first-child:not(:empty)::after{content:"·";margin:0 8px;color:var(--tx-low)}
.now-title{margin:10px 0 0;font-size:21px;text-transform:uppercase;letter-spacing:.02em;line-height:1.08;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.now-deck{max-width:100%;margin:4px 0 0;font-size:13.5px;color:var(--tx-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-watch{align-self:stretch;justify-content:center;height:42px;margin-top:14px;padding:0 16px;font-size:14px;box-shadow:0 8px 22px var(--red-glow)}
.now-watch .ic{width:15px;height:15px}
/* computers: the caption stands beside the frame (a broadcast lower third), so the film can take the full height */
@media(min-width:1024px){
  .hx-now .now{--frame-h:clamp(260px,calc(100svh - var(--tb-h) - var(--tile-h) - 196px),680px);
    display:grid;grid-template-columns:minmax(0,clamp(168px,15vw,236px)) var(--frame-w);grid-template-rows:1fr auto;grid-template-areas:"label screen" "meta screen";
    column-gap:clamp(20px,2vw,30px);row-gap:14px;align-items:end;width:auto}
  .hx-now .now-label{grid-area:label;justify-self:end}
  .hx-now .now-screen{grid-area:screen}
  .hx-now .now-meta{grid-area:meta;align-items:flex-end;text-align:right}
  .hx-now .now-title{font-size:clamp(20px,1.7vw,25px);-webkit-line-clamp:3}
  .hx-now .now-watch{align-self:flex-end;height:44px;padding:0 20px}
  /* a 16:9 featured film: a smaller landscape frame with its caption under it (the brand keeps its room) */
  .hx-now .now[data-shape="landscape"]{--frame-w:min(34vw,640px);display:flex;align-items:stretch;width:var(--frame-w)}
  .hx-now .now[data-shape="landscape"] .now-label{align-self:flex-start}
  .hx-now .now[data-shape="landscape"] .now-meta{align-items:flex-start;text-align:left}
  .hx-now .now[data-shape="landscape"] .now-watch{align-self:flex-start;height:42px;padding:0 22px}
}
.now-slot-phone:empty{display:none}

/* =====================================================================
   UNDERDOG TV SECTIONS
   ===================================================================== */
.wsec{position:relative;padding-block:clamp(52px,6.4vw,110px) 0;overflow-x:hidden;overflow-x:clip}
.wsec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(18px,2.2vw,32px)}
.wsec-copy{min-width:0}
.wsec-copy h2{font-size:clamp(32px,4vw,60px);text-transform:uppercase;margin:12px 0 10px}
.wsec-copy p{max-width:62ch;font-size:clamp(15px,1.25vw,18.5px);color:var(--tx-mid)}
.wsec-nav{display:flex;align-items:center;gap:8px;flex:none}
.wsec-more{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 8px 0 14px;margin-right:6px;border-radius:12px;
  font-family:var(--f-head);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;transition:color .15s}
.wsec-more .ic{width:18px;height:18px;color:var(--red);transition:transform .2s var(--ease)}
.wsec-more:hover .ic{transform:translateX(3px)}
.wsec-more:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rail-btn{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--bd-2);background:rgba(255,255,255,.05);color:#fff;transition:background-color .15s,opacity .15s}
.rail-btn:hover:not(:disabled){background:rgba(255,255,255,.12)}
.rail-btn:disabled{opacity:.28;cursor:default}
.rail-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wsec:not(.rail-scrollable) .rail-btn{display:none}
.wsec-more-phone{display:none}

/* the latest films: own shape, the same height (9:16 made for TikTok, 16:9 for YouTube) */
.frail{margin:0 calc(-1 * var(--pad-x));padding:6px var(--pad-x) 18px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad-x);scrollbar-width:none}
.frail::-webkit-scrollbar{display:none}
.frail-track{display:flex;gap:clamp(14px,1.2vw,22px);list-style:none;margin:0;padding:0}
.fcard{--fh:clamp(280px,24vw,440px);flex:none;display:flex;flex-direction:column;width:min-content;scroll-snap-align:start}
.fcard-link{display:flex;flex-direction:column;border-radius:20px;color:inherit}
.fcard-link:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.fcard-media{position:relative;display:block;flex:none;height:var(--fh);aspect-ratio:9/16;overflow:hidden;border-radius:20px;background:#101217;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 44px rgba(0,0,0,.42);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.fcard[data-shape="landscape"] .fcard-media{aspect-ratio:16/9}
.fcard-link:hover .fcard-media{transform:translateY(-5px);border-color:rgba(255,255,255,.26);box-shadow:0 26px 60px rgba(0,0,0,.55)}
.fcard-bd{position:absolute;inset:-12%;width:124%;height:124%;max-width:none;object-fit:cover;filter:blur(22px) brightness(.5)}
.fcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.fcard-link:hover .fcard-img{transform:scale(1.025)}
.fcard-media::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;background:linear-gradient(0deg,rgba(6,7,10,.9),rgba(6,7,10,0))}
/* badges at the bottom: the film's brand sits in its top corner */
.fcard-top{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 24px)}
.fcard-bot{position:absolute;right:12px;top:auto;bottom:12px;z-index:2;display:flex;gap:6px}
.fcard[data-shape="portrait"] .fcard-top{bottom:44px}
.fcard[data-shape="portrait"] .fcard-bot{left:12px;right:auto}
.fcat{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:7px;background:rgba(8,9,12,.74);
  border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--f-head);font-size:11.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap}
.fcat .ic{width:15px;height:15px;color:var(--cat,#ff6b6b)}
[data-cat="ko-week"],[data-cat="top-month"]{--cat:var(--gold)}
[data-cat="best-week"]{--cat:#ff7a3d}
[data-cat="tournaments"]{--cat:#c9a2ff}
[data-cat="best-moments"]{--cat:#6aa3ff}
[data-cat="tutorials"]{--cat:#3ddc84}
[data-cat="updates"]{--cat:#b9f2ff}
.fnew{display:inline-grid;place-items:center;height:26px;padding:0 9px;border-radius:7px;background:var(--red);color:#fff;
  font-family:var(--f-head);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.ffmt,.fdur{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 7px;border-radius:6px;background:rgba(8,9,12,.74);
  border:1px solid rgba(255,255,255,.14);font-family:var(--f-mono);font-size:11.5px;font-weight:700;color:#fff}
.ffmt .ic{width:12px;height:12px}
.fcard-play{position:absolute;left:50%;top:50%;z-index:2;width:60px;height:60px;margin:-30px 0 0 -30px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,56,56,.93);color:#fff;box-shadow:0 0 34px var(--red-glow);opacity:0;transform:scale(.86);transition:opacity .22s,transform .22s var(--ease)}
.fcard-play .ic{width:24px;height:24px;margin-left:3px}
.fcard-link:hover .fcard-play,.fcard-link:focus-visible .fcard-play{opacity:1;transform:none}
.fcard-body{display:flex;flex-direction:column;gap:3px;padding:14px 4px 0}
.fcard-title{font-family:var(--f-head);font-size:18px;font-weight:600;letter-spacing:.03em;line-height:1.15;text-transform:uppercase;color:#fff}
.fcard-sub{font-size:13.5px;color:var(--tx-mid);line-height:1.35}
.fcard-meta{display:none}
.fcard.is-skel .fcard-media{background:linear-gradient(100deg,#111419 30%,#1a1e26 50%,#111419 70%);background-size:220% 100%;animation:skel 1.4s ease-in-out infinite;box-shadow:none}
.fcard.is-skel .fcard-media::after{display:none}
.skel-line{display:block;height:14px;width:80%;border-radius:6px;background:rgba(255,255,255,.06)}
.skel-line.short{width:50%;margin-top:6px}
.films-fallback{display:flex;align-items:center;gap:22px;padding:clamp(22px,2.6vw,36px);border-radius:22px;
  background:radial-gradient(90% 160% at 0% 0%,rgba(255,56,56,.14),transparent 60%),linear-gradient(160deg,#15181f,#0b0c10);border:1px solid var(--bd-2)}
.films-fallback>div{flex:1;min-width:0}
.films-fallback h3{font-size:clamp(22px,2vw,30px);text-transform:uppercase;margin-bottom:6px}
.films-fallback p{color:var(--tx-mid)}
.films-fallback-ic{width:64px;height:64px;display:grid;place-items:center;flex:none;border-radius:18px;background:rgba(255,56,56,.14);color:#ff6b6b}
.films-fallback-ic .ic{width:30px;height:30px}

/* 3D REPLAYS */
.r3d-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(28px,5vw,96px)}
.r3d-copy h2{font-size:clamp(36px,4.8vw,76px);text-transform:uppercase;line-height:.94;margin:14px 0 16px;text-wrap:balance}
.r3d-copy>p{max-width:46ch;font-size:clamp(15.5px,1.3vw,19px);color:var(--tx-mid)}
.r3d-feats{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 28px;padding:0;list-style:none}
.r3d-feats li{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 15px 0 12px;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid var(--bd-2);font-size:14.5px;font-weight:600;color:#fff}
.r3d-feats .ic{width:20px;height:20px;color:var(--gold)}
.r3d-copy .r3d-note{display:flex;align-items:center;gap:9px;max-width:none;margin-top:18px;font-size:14px;color:var(--tx-low)}
.r3d-note .ic{width:18px;height:18px}
.r3d-view{display:block;perspective:1800px}
.r3d-frame{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:24px;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 0 8px rgba(255,255,255,.03),0 44px 110px rgba(0,0,0,.62),0 0 130px rgba(255,56,56,.16);
  transform:rotateY(-9deg) rotateX(3deg);transform-origin:20% 50%;transition:transform .6s var(--ease)}
.r3d-view:hover .r3d-frame{transform:rotateY(-4deg) rotateX(1deg)}
.r3d-bd{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;object-fit:cover;filter:blur(24px) brightness(.5)}
.r3d-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.r3d-frame:not(.is-film) .r3d-img{object-fit:cover}
.r3d-frame img:not([src]){visibility:hidden}
.r3d-orbit{position:absolute;left:10%;right:10%;bottom:12%;height:30%;overflow:visible;pointer-events:none}
.r3d-orbit ellipse{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.8;stroke-dasharray:6 8;vector-effect:non-scaling-stroke;animation:orbitDash 6s linear infinite}
.r3d-orbit-cam{fill:var(--red);filter:drop-shadow(0 0 8px var(--red))}
.r3d-mixer{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:13px;
  background:rgba(8,9,12,.74);border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.r3d-mixer span{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:9px;
  font-family:var(--f-head);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.r3d-mixer .on{background:rgba(255,56,56,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,56,56,.62)}
.r3d-mixer .on i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}

/* LIVE + FOR CREATORS */
.duo-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.6vw,28px)}
.duo-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.6vw,42px);
  border-radius:26px;background:linear-gradient(160deg,#15181f,#0b0c10);border:1px solid var(--bd)}
.duo-card h3{font-size:clamp(28px,2.7vw,44px);text-transform:uppercase;line-height:1;margin:14px 0 12px}
.duo-card>p{max-width:52ch;color:var(--tx-mid);font-size:clamp(15px,1.1vw,17.5px)}
.duo-art{position:relative;align-self:stretch;height:clamp(130px,11vw,180px);margin-bottom:24px;overflow:hidden;border-radius:18px;border:1px solid var(--bd)}
.duo-art-live{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);
  background:radial-gradient(55% 90% at 50% 50%,rgba(255,56,56,.2),transparent 72%),url("/assets/img/bg/menu-bg.webp") center 60%/cover}
.duo-art-live::before{content:"";position:absolute;inset:0;background:rgba(8,9,12,.62)}
.duo-dev{position:relative;width:clamp(58px,5vw,74px);height:clamp(58px,5vw,74px);display:grid;place-items:center;border-radius:20px;
  background:rgba(14,16,21,.8);border:1px solid var(--bd-2);color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.duo-dev .ic{width:48%;height:48%}
.duo-dev-pc{color:#ff7373}
.duo-wave{position:relative;display:flex;align-items:center;gap:7px}
.duo-wave i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);animation:wave 1.5s ease-in-out infinite}
.duo-wave i:nth-child(2){animation-delay:.15s}.duo-wave i:nth-child(3){animation-delay:.3s}.duo-wave i:nth-child(4){animation-delay:.45s}.duo-wave i:nth-child(5){animation-delay:.6s}
@keyframes wave{0%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.15);background:#ff6b6b}}
.duo-lamp{top:12px;right:12px}
.duo-soon{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;font-size:14.5px;color:var(--tx-mid)}
.soon-chip{display:inline-grid;place-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--gold);color:#1a1200;
  font-family:var(--f-head);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.duo-cta{margin-top:auto;padding-top:0}
.duo-card>p:last-of-type,.duo-card>.cr-tags{margin-bottom:26px}
.duo-art-cr{display:grid;place-items:center;background:radial-gradient(60% 100% at 50% 50%,rgba(233,185,73,.16),transparent 70%),linear-gradient(160deg,#1a160e,#0b0c10)}
.cr-mark{font-family:var(--f-head);font-size:clamp(42px,4.6vw,80px);font-weight:700;line-height:1;letter-spacing:.01em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.6)}
.cr-mark b{color:var(--red);-webkit-text-stroke:0;text-shadow:0 0 40px var(--red-glow)}
.cr-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding:0;list-style:none}
.cr-tags li{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 10px;border-radius:999px;border:1px solid var(--bd-2);background:rgba(255,255,255,.04);font-size:14px;font-weight:600;color:#fff}
.cr-tags .ic{width:16px;height:16px;color:#ff6b6b}

/* =====================================================================
   THE GAME (reworked hierarchy)
   ===================================================================== */
.game-head{padding-top:clamp(70px,9vw,150px)}
.game-head .section-head{margin-bottom:0}
.game-head .section-head h2{font-size:clamp(34px,5.6vw,76px);text-wrap:balance}
.hero-strip .ic{width:17px;height:17px;margin-right:4px;color:var(--gold);vertical-align:-3px}
.sc-media .sc-play .ic{width:15px;height:15px;margin-left:2px}
.early .e-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(233,185,73,.12);color:var(--gold)}
.early .e-ic .ic{width:26px;height:26px}
.hub-soon{color:rgba(255,255,255,.55);font-size:15px;max-width:640px;line-height:1.5}
.newshub{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media(max-width:900px){.newshub{grid-template-columns:minmax(0,1fr)}}
.news-featured:focus-visible,.news-row:focus-visible,.season-card:focus-within{outline:2px solid var(--gold);outline-offset:3px}

/* trailer + screens */
.media-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:stretch}
.media-grid .trailer{width:100%;height:100%;aspect-ratio:16/9;padding:0;display:block;text-align:left;font:inherit;color:inherit;background:#000}
.media-grid .trailer:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.trailer .play-big span .ic{width:40%;height:40%;margin-left:5%}
.media-grid .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;grid-auto-rows:auto;gap:14px}
.media-grid .gallery-grid .shot{aspect-ratio:auto;min-height:0}
.media-sec .section-head{margin-bottom:clamp(20px,3vw,34px)}

/* a whole competitive world */
.cw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.4vw,22px)}
.cw-grid .teaser{color:inherit}
.cw-grid .teaser:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.teaser.t-career::before{background:url("/assets/img/roster/Opponent%20Avatar%2008%20Large.webp") right -10% bottom -8%/auto 108% no-repeat;opacity:.62}
.teaser.t-career:hover::before{opacity:.8}
.lb-mini{display:flex;flex-direction:column;gap:6px;margin:4px 0 14px;padding:0;list-style:none}
.lb-mini[hidden]{display:none}
.lb-mini li.is-skel{height:44px;border-radius:10px;background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 70%);background-size:220% 100%;animation:skel 1.4s ease-in-out infinite}
.lbm-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;height:44px;padding:0 12px 0 9px;border-radius:11px;background:rgba(8,9,12,.6);border:1px solid rgba(255,255,255,.08)}
.lbm-medal{width:26px;height:26px;object-fit:contain}
.lbm-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-head);font-size:15px;letter-spacing:.03em;color:#fff}
.lbm-elo{white-space:nowrap}
.lbm-elo b{font-family:var(--f-mono);font-size:14.5px;color:var(--gold)}
.lbm-elo small{font-family:var(--f-mono);font-size:10px;color:var(--tx-low)}
.lb-mini:not([hidden])+.lb-mini-note{display:none}
.lb-mini-note{font-size:14.5px;color:var(--tx-mid);margin-bottom:14px}

/* closing: play + community */
.closing-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,1.6vw,28px);align-items:stretch}
.closing{padding-bottom:clamp(20px,3vw,40px)}
.closing-play{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(30px,4vw,64px);
  border-radius:var(--radius-lg);border:1px solid rgba(255,56,56,.3);background:radial-gradient(80% 130% at 0% 0%,rgba(255,56,56,.24),transparent 62%),linear-gradient(160deg,#171a22,#0b0c10)}
.closing-play::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;background:url("/assets/img/bg/menu-bg.webp") center/cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.closing-play h2{font-size:clamp(30px,3.6vw,56px);text-transform:uppercase;line-height:1;margin:14px 0 14px;text-wrap:balance}
.closing-play p{max-width:48ch;color:var(--tx-mid);font-size:clamp(15px,1.2vw,18px);margin-bottom:26px}
.closing .community{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left}
.closing .community p{margin:14px 0 24px}
.community-cta{display:flex;flex-wrap:wrap;gap:10px}
.community .btn-yt{padding:16px 26px;font-size:16px}

/* footer */
.ft{margin-top:clamp(24px,3vw,48px)}
.ft .foot-grid{gap:40px}
.ft .foot-brand{max-width:340px}
.ft-brand{display:inline-flex;margin-bottom:16px;border-radius:8px}
.ft .tb-logo{--lw:150px}
.ft-quest{margin-top:20px}
.ft .foot-links{gap:clamp(30px,5vw,72px)}
.ft .foot-col a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(min-width:2200px){
  .tile-t{font-size:clamp(34px,1.7vw,48px)}
}
@media(max-width:1500px){
  .tile-body{max-width:min(66%,360px)}
}
@media(max-width:1440px){
  .tile{padding:14px 16px}
  .tile-body{max-width:74%;gap:5px}
  .tile-k{font-size:11.5px}
  .tile-t{font-size:clamp(20px,2.1vw,28px)}
  .tile-d{font-size:13.5px;line-height:1.4}
  .tile-go{width:40px;height:40px;right:12px;bottom:12px}
  .tile-art-films{width:58%;right:4%}
}
@media(max-width:1279px) and (min-width:761px){
  .hx-play{padding:0 26px;height:56px}
  .hx-sec{width:56px;height:56px;padding:0;justify-content:center;border-radius:16px}
  .hx-sec .ic{width:22px;height:22px}
  .hx-sec .lbl-full{display:none}
  .hx-sec .lbl-short{display:inline;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:1100px){
  .cw-grid{grid-template-columns:1fr 1fr}
  .r3d-in{grid-template-columns:1fr}
  .r3d-frame{transform:none}
  .r3d-view:hover .r3d-frame{transform:none}
}
/* tablets: the three ways to watch as three tall tiles right under the brand; the featured film moves to FILMS */
@media(max-width:1023px){
  .hx-top{grid-template-columns:1fr}
  .hx-now{display:none}
  .duo-in{grid-template-columns:1fr}
  .closing-grid{grid-template-columns:1fr}
  .media-grid{grid-template-columns:1fr}
  .media-grid .gallery-grid{grid-template-rows:none}
  .media-grid .gallery-grid .shot{aspect-ratio:16/9}
}
@media(min-width:761px) and (max-width:1023px){
  .hx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile{height:auto;min-height:clamp(290px,33vh,360px);padding:16px}
  .tile-media::after{background:linear-gradient(0deg,rgba(8,9,12,.97) 0%,rgba(8,9,12,.88) 42%,rgba(8,9,12,.25) 66%,rgba(8,9,12,0) 100%)}
  .tile-body{max-width:none;gap:6px}
  .tile-t{font-size:clamp(22px,2.9vw,28px)}
  .tile-d{font-size:13.5px;max-width:calc(100% - 40px)}
  .tile-go{width:36px;height:36px;right:12px;bottom:14px}
  .tile-art-films{top:7%;bottom:auto;height:46%;left:0;right:0;width:auto}
  .tile-phone-a{right:18%}
  .tile-phone-b{right:auto;left:18%}
  .tile-3d .tile-shot.is-film img{top:0;left:0;right:0;bottom:auto;width:100%;height:auto;aspect-ratio:16/9}
  .tile-shot img{height:62%}
  .tile-orbit{left:6%;right:6%;width:auto;top:26%;bottom:auto;height:22%}
  .tile-live .tile-shot img{object-position:60% 20%}
  /* the featured film in FILMS: the frame and its caption side by side */
  .now-slot-phone .now{--frame-h:clamp(380px,54vh,580px);display:grid;grid-template-columns:var(--frame-w) minmax(0,1fr);
    grid-template-areas:"label label" "screen meta";column-gap:28px;row-gap:14px;align-items:end;width:100%;margin-bottom:34px}
  .now-slot-phone .now-label{grid-area:label}
  .now-slot-phone .now-screen{grid-area:screen}
  .now-slot-phone .now-meta{grid-area:meta}
  .now-slot-phone .now-title{font-size:28px;-webkit-line-clamp:3}
  .now-slot-phone .now-watch{align-self:flex-start;padding:0 22px}
}
@media(max-width:760px){
  .hx-in{min-height:0;padding:calc(var(--tb-h) + 16px) 16px 22px;gap:22px}
  .hx .hero-badge{margin-bottom:12px;padding:6px 12px;font-size:11px}
  .hx h1{font-size:clamp(42px,13.6vw,62px);letter-spacing:-1px}
  .hx h1 .l2::after{height:4px}
  .hx .hero-tag{margin-top:14px;font-size:15px;line-height:1.5}
  .hx-cta{display:flex;flex-wrap:nowrap;gap:8px;width:100%;margin-top:18px}
  .hx-play{flex:1;min-width:0;justify-content:center;height:54px;padding:0 12px;font-size:15px;letter-spacing:.04em}
  .hx-sec{flex:none;width:54px;height:54px;padding:0;justify-content:center;border-radius:16px}
  .hx-sec .ic{width:22px;height:22px}
  .lbl-full{display:none}
  .hx-sec .lbl-short{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hx-now{display:none}
  .hx-choice-h{margin-bottom:10px;font-size:11.5px;letter-spacing:.2em}
  .hx-tiles{grid-template-columns:minmax(0,1fr);gap:10px}
  .tile{display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:stretch;gap:14px;height:auto;min-height:0;padding:14px;border-radius:18px}
  .tile-body{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:center;gap:6px 8px;max-width:none}
  .tile-k{white-space:nowrap}
  .tile-k{font-size:11px;letter-spacing:.16em}
  .tile-k .ic{width:15px;height:15px}
  .tile-t,.tile-d{flex:0 0 100%}
  .tile-t{order:2}
  .tile-d{order:3}
  .tile-t{font-size:clamp(20px,5.7vw,26px);white-space:nowrap}
  .tile-d{font-size:13.5px;line-height:1.4}
  .tile-media{position:relative;inset:auto;z-index:0;grid-column:2;grid-row:1;min-height:100px;border-radius:13px;background:#0b0c10;
    box-shadow:0 0 0 1px rgba(255,255,255,.12)}
  .tile-media::after{display:none}
  .tile-go{width:28px;height:28px;right:18px;bottom:18px}
  .tile-go .ic{width:14px;height:14px}
  .tile-glow{inset:-20%;opacity:.55}
  .tile-art-films{inset:8% 4%;width:auto}
  .tile-phone{top:50%;bottom:auto;width:50%;height:auto;border-radius:8px}
  .tile-phone-a{right:3%;transform:translateY(-50%) rotate(6deg)}
  .tile-phone-b{right:auto;left:3%;transform:translateY(-54%) rotate(-7deg) scale(.9);transform-origin:center}
  .tile-3d .tile-shot.is-film img{inset:0;left:0;right:0;width:100%;height:100%;aspect-ratio:auto;object-position:center}
  .tile-shot::before{filter:blur(12px) brightness(.72)}
  .tile-orbit{left:4%;right:4%;width:auto;bottom:30%;height:22%}
  .tile-lamp{top:8px;right:8px;height:20px;padding:0 7px;font-size:9.5px;letter-spacing:.14em}

  .now{--frame-h:min(calc((100vw - 32px) * 16 / 9),calc(100svh - var(--tb-h) - var(--tab-h) - 178px));width:100%;align-items:center;margin-bottom:26px}
  .now[data-shape="landscape"]{--frame-w:calc(100vw - 32px)}
  .now-label{align-self:flex-start}
  .now-screen{align-self:center}
  .now-frame,.now-sound{transform:none!important}
  .now-meta{width:100%;grid-template-columns:1fr;grid-template-areas:"row" "title" "deck" "watch"}
  .now-title{white-space:normal;font-size:22px}
  .now-watch{margin-top:14px;justify-content:center;height:52px}

  .wsec{padding-top:44px}
  .wsec-head{flex-direction:column;align-items:flex-start;gap:0}
  .wsec-nav{display:none}
  .wsec-copy h2{font-size:34px}
  .wsec-more-phone{display:flex;margin-top:12px;width:100%;justify-content:center;height:50px}
  .films-failed .wsec-more-phone{display:none}
  /* the list on phones: rows (the poster whole, on its own light) */
  .frail{margin:0;padding:0;overflow:visible}
  .frail-track{flex-direction:column;gap:10px}
  .fcard{--fh:auto;width:100%}
  .fcard-link{flex-direction:row;align-items:center;gap:14px;padding:8px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid var(--bd)}
  .fcard-media,.fcard[data-shape="landscape"] .fcard-media{width:122px;height:90px;aspect-ratio:auto;border-radius:12px;box-shadow:none}
  .fcard-link:hover .fcard-media{transform:none}
  .fcard-top,.fcard-play{display:none}
  .fcard-bot,.fcard[data-shape="portrait"] .fcard-bot{left:auto;right:6px;bottom:6px}
  .fcard .ffmt{display:none}
  .fcard-body{flex:1;min-width:0;padding:0}
  .fcard-title{font-size:16px}
  .fcard-sub{font-size:13px}
  .fcard-meta{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-family:var(--f-head);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cat,#ff6b6b)}
  .fcard-meta .ic{width:13px;height:13px}
  .fcard.is-skel .fcard-link,.fcard.is-skel{display:flex}
  .fcard.is-skel{flex-direction:row;align-items:center;gap:14px;padding:8px;border-radius:18px;background:rgba(255,255,255,.035)}
  .fcard.is-skel .fcard-media{width:122px;height:90px;aspect-ratio:auto}
  .fcard.is-skel .fcard-body{flex:1}
  .films-fallback{flex-direction:column;align-items:flex-start;gap:14px}
  .films-fallback .btn{width:100%}

  .r3d-feats li{height:38px;font-size:13.5px}
  .r3d-cta .btn{width:100%}
  .r3d-mixer span{height:26px;padding:0 8px;font-size:10.5px;letter-spacing:.1em}
  .r3d-mixer{bottom:10px}
  .duo-card{border-radius:22px}
  .duo-cta{width:100%}
  .cw-grid{grid-template-columns:1fr}
  .closing-play .btn{width:100%}
  .community-cta{width:100%}
  .community-cta .btn{flex:1}
  .ft .foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;width:100%}
  .ft .foot-col a{overflow-wrap:anywhere}
  .ft .foot-bottom{flex-direction:column;align-items:flex-start}
}
/* a phone on its side / short windows: the hero is not forced to a full screen */
@media(max-height:560px) and (min-width:761px){
  .hx-in{min-height:0}
  .tile{height:170px}
  .now{--frame-h:420px}
}

/* =====================================================================
   REDUCED MOTION: no entrance, no loops, no tilts in motion
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  .hx-brand>*,.hx-choice,.hx-now{animation:none}
  .tile,.tile-phone,.tile-go,.now-frame,.r3d-frame,.fcard-media,.fcard-img{transition:none}
  .tile:hover,.fcard-link:hover .fcard-media{transform:none}
  .tile-orbit ellipse,.r3d-orbit ellipse,.duo-wave i,.now-dot,.tile-lamp i{animation:none!important}
}