/* Staging polish (filmlayout-ring) */
.evid{margin:10px 0 0;font-size:13px;color:var(--mut,#b4acd6);letter-spacing:.01em}
.evid .ev-n{color:#f4efff;font-weight:700}
.wefix{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:10px 0 0;padding:8px 12px;border-radius:12px;background:rgba(45,226,255,.07);border:1px solid rgba(45,226,255,.22);font-size:13px;color:#cfc8ea;width:fit-content;max-width:100%}
.wefix .wf-l{font-weight:800;color:#2de2ff;letter-spacing:.04em}
.wefix i{font-style:normal;opacity:.6;margin:0 2px}.wefix .fx{color:#ff8be0}
.grow{margin:14px 0 0;max-width:340px}.grow .gspark{width:100%;height:64px;display:block}.grow .gspark path{stroke:#c77dff}
.card .cb .cdn{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#2de2ff;white-space:nowrap}
.card .cb{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.clar.wait{white-space:nowrap}
/* Daily Fuzz poster duel */
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:14px 0 8px}
.duel .vs{font-family:'Bebas Neue',Impact,sans-serif;font-size:28px;color:#ff3ec9;text-shadow:0 0 18px rgba(255,62,201,.6)}
.dpost{position:relative;display:flex;flex-direction:column;gap:8px;padding:0;background:none;border:0;color:inherit;cursor:pointer;text-align:left;border-radius:16px;transition:transform .18s}
.dpost:not([disabled]):hover{transform:translateY(-3px) rotate(-.4deg)}
.dpost .pst{width:100%!important;max-width:none!important;aspect-ratio:2/3;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.dpost .dt b{display:block;font-size:15px;line-height:1.2}.dpost .dt small{color:#b4acd6;font-size:12px}
.dpost .dtap{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:99px;background:rgba(8,6,26,.75);border:1px solid rgba(199,125,255,.5);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.dpost .dring > small{display:none}
.dpost.won .pst{box-shadow:0 0 0 3px #2de2ff,0 0 34px rgba(45,226,255,.55)}
.dpost.mine::after{content:"Your pick";position:absolute;left:10px;top:10px;padding:3px 9px;border-radius:99px;background:#ff3ec9;color:#08061a;font-size:11px;font-weight:800}
.dpost.shown:not(.won) .pst{filter:saturate(.55) brightness(.75)}
#h2hbox .dbtn{display:flex;flex-direction:column;align-items:center;gap:6px}#h2hbox .dbtn .pst{width:92px}
/* Money rows: poster + ring + big ×budget */
.mny-li2{display:grid!important;grid-template-columns:64px 1fr auto;gap:14px;align-items:center}
.mny-p{position:relative;width:64px}.mny-p .pst{width:64px!important}
.mny-p .flpb{position:absolute;right:-8px;bottom:-8px}
.mny-li2 .mny-li-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.mny-li2 .mny-li-v{font-size:13px;opacity:.9}
.mny-x{text-align:right}.mny-x b{display:block;font-family:'Bebas Neue',Impact,sans-serif;font-size:40px;line-height:.9;background:linear-gradient(90deg,#2de2ff,#c77dff,#ff3ec9);-webkit-background-clip:text;background-clip:text;color:transparent}
.mny-x small{font-size:11px;color:#b4acd6;text-transform:uppercase;letter-spacing:.08em}
/* Top 100 podium: poster first, ring on the corner */
.podium.pf .pod{display:flex;flex-direction:column;align-items:center;gap:8px}
.podium.pf .podp{position:relative;width:100%;max-width:200px}
.podium.pf .podp .pst{width:100%!important;max-width:none!important}
.podium.pf .podp .pr{position:absolute;left:8px;top:8px;z-index:2}
.podium.pf .podr{position:absolute;right:-14px;bottom:-14px;width:46%;z-index:2}
.podium.pf .podr .ring{width:100%!important;height:auto!important}
.fzexp{max-width:640px;margin:10px 0 0;color:#cfc8ea}
.rawfix{color:#2de2ff;font-weight:700}
/* Pick of the week + sponsor note outside the pick */
.sponsnote{margin:8px 4px 0;opacity:.8}
/* cookie bar: one slim line */
.cc.slim{left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);padding:8px 10px 8px 14px;display:flex;align-items:center;gap:10px;border-radius:14px;max-width:560px;margin:0 auto}
.cc.slim p{margin:0;font-size:13px;flex:1;line-height:1.3}.cc.slim div{display:flex;gap:6px;flex:none}.cc.slim .btn{padding:7px 12px;font-size:13px;min-height:0}
@media (min-width:900px){.cc.slim{bottom:16px}}
.howbuzz{display:flex;gap:10px;align-items:center}.howbuzz .trend{flex:none}
.xgrid.n1{grid-template-columns:1fr}.xgrid.n2{grid-template-columns:repeat(2,1fr)}
/* 404 */
.nf404{min-height:80vh;display:flex;align-items:center}.nf404 h1{font-size:clamp(48px,10vw,110px)}
.nfbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.nfshroom{margin-top:30px;opacity:.9;animation:nfbob 3s ease-in-out infinite}
@keyframes nfbob{50%{transform:translateY(-8px) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.nfshroom{animation:none}.dpost{transition:none}}
@media (max-width:560px){.duel{gap:8px}.duel .vs{font-size:22px}.dpost .dring{width:64px}.mny-x b{font-size:32px}.podium.pf .podr{right:-8px;bottom:-8px}}
.evid.in-tile{margin:6px 0 0;text-align:center;font-size:12px;line-height:1.3}
.hero.film .wefix{margin-top:12px}
.hero.film .wefix{grid-column:1/-1}
section.dfirst{padding-top:92px}
.podium.pf .podr{background:radial-gradient(circle,rgba(8,6,26,.92) 58%,rgba(8,6,26,0) 72%);border-radius:50%}
.dpost .dring{position:absolute;top:8px;right:8px;width:auto;background:rgba(8,6,26,.82);border-radius:50%;padding:4px;box-shadow:0 0 22px rgba(255,62,201,.45);animation:dpop .5s cubic-bezier(.2,1.6,.4,1) both}
.dpost .dring .rbg{transform:scale(1.6);transform-origin:top right;margin:0}
@keyframes dpop{from{transform:scale(.3);opacity:0}}
#dshare{margin-top:6px}

/* ===== Homepage hero variants (?hero=wide|centred|split, default wide). Palette unchanged; type fitted with container units. ===== */
:root{color-scheme:dark}
.hx{--k1:6.6;--k2:5.7}                       /* line width in em for Bebas Neue (measured); JS refits if the font differs */
.hero.home.hx{min-height:0}
.hx .hx-in{position:relative;z-index:2;container-type:inline-size}
.hx .hx-txt{position:relative;z-index:2;container-type:inline-size;min-width:0}
.hero.home.hx .tagline.hx-h{max-width:none;margin:8px 0 14px;line-height:.84;letter-spacing:.005em;text-wrap:nowrap;font-size:inherit}
.hx .hx-l1,.hx .hx-l2{display:block;white-space:nowrap;width:max-content}
.hx .hx-l1{font-size:var(--f1);animation:hxIn .55s cubic-bezier(.2,.8,.2,1) both}
.hx .hx-l2{font-size:var(--f2);animation:hxIn .55s .12s cubic-bezier(.2,.8,.2,1) both}
.hx .hx-sub{animation:hxUp .5s .3s both}
@keyframes hxIn{from{opacity:0;transform:translateX(-4%);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes hxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* posters with rings (shared) */
.hx-card,.hx-fc{display:grid;grid-template-areas:"p" "t";color:inherit;text-decoration:none;container-type:inline-size;min-width:0}
.hx-card .pst,.hx-fc .pst{grid-area:p;width:100%;aspect-ratio:2/3;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(199,125,255,.22)}
.hx-r{grid-area:p;align-self:end;justify-self:end;margin:0 5% 5% 0;z-index:3}
.hx-r .ring.hx{width:46cqw;border-radius:50%;background:radial-gradient(circle,rgba(8,6,26,.9) 56%,rgba(8,6,26,0) 72%)}
.hx-r .ring.hx .num{font-size:40cqw;line-height:1}   /* .ring is a size container */
.hx-t{grid-area:t;margin-top:8px;font-weight:700;font-size:clamp(12px,1.05vw,15px);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-card:hover .pst,.hx-fc:hover .pst{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 2px var(--gold2),0 0 22px rgba(255,62,201,.35)}
.hx-card:focus-visible,.hx-fc:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:12px}
/* ---- B) Wide: two lines fill the column edge to edge ---- */
.hero.home.hx-wide{padding:calc(84px + env(safe-area-inset-top)) 0 30px}
.hx-wide .hx-in{width:min(100% - 2 * max(18px,env(safe-area-inset-left),env(safe-area-inset-right)),1840px)}
.hx-wide{--f1:min(calc(98.8cqw / var(--k1)),31vh);--f2:min(calc(98.8cqw / var(--k2)),31vh)}
.hx-wide .hx-sub{max-width:none;margin:0}
.hx-strip-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:clamp(16px,2.4vh,28px) 0 10px;animation:hxUp .5s .35s both}
.hx-strip-h a{font-size:14px;color:var(--mut);white-space:nowrap}
.hx-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.3vw,22px)}
.hx-card{animation:hxUp .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--i) * .06s)}
@media(max-width:640px){
 .hx-strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:30%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
   margin-inline:calc(-1 * max(18px,env(safe-area-inset-left)));padding:0 max(18px,env(safe-area-inset-left)) 6px;scroll-padding-inline:max(18px,env(safe-area-inset-left))}
 .hx-strip::-webkit-scrollbar{display:none}.hx-card{scroll-snap-align:start}
 .hx-t{font-size:12px}
 .hx-strip-h .eyebrow{letter-spacing:.12em;font-size:11px}
 .hero.home.hx-wide{padding-top:calc(78px + env(safe-area-inset-top))}
}
@media(min-width:641px) and (max-width:900px){.hx-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.hx-strip>.hx-card:nth-child(n+5){display:none}}
@media(max-height:520px) and (orientation:landscape){.hero.home.hx-wide{padding-top:calc(74px + env(safe-area-inset-top))}.hx-wide{--f1:min(calc(98.8cqw / var(--k1)),31vh);--f2:min(calc(98.8cqw / var(--k2)),31vh)}
 .hx-wide .hx-sub .tl2{display:inline;margin-left:.3em;font-size:1.25em}.hx-wide .updated,.hx-wide .upd{display:none}}
/* ---- fanned stack (A centred, C split) ---- */
.hx-fan{position:relative;width:100%;aspect-ratio:1/.8;margin-inline:auto}
.hx-fc{position:absolute;top:4%;left:50%;width:44%;transform:translateX(calc(-50% + var(--dx))) rotate(var(--rot));transform-origin:50% 90%;
  animation:hxFan .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.1s + var(--i) * .07s)}
.hx-fc:nth-child(1){--dx:-62%;--rot:-9deg;z-index:1}.hx-fc:nth-child(2){--dx:0%;--rot:0deg;z-index:3;width:48%;top:0}.hx-fc:nth-child(3){--dx:62%;--rot:9deg;z-index:2}
@keyframes hxFan{from{opacity:0;transform:translateX(-50%) translateY(10%) rotate(0)}to{opacity:1}}
/* A) Centred */
.hero.home.hx-centred{padding:calc(90px + env(safe-area-inset-top)) 0 30px;text-align:center}
.hx-centred .hx-txt{display:flex;flex-direction:column;align-items:center}
.hx-centred{--f1:min(calc(86cqw / var(--k1)),150px);--f2:min(calc(86cqw / var(--k2)),160px)}
.hx-centred .hx-l1,.hx-centred .hx-l2{margin-inline:auto}
.hx-centred .hx-sub{margin-inline:auto;text-align:center}
.hx-centred .hx-fan{width:min(560px,92%);margin-top:14px}
/* C) Split */
.hero.home.hx-split{padding:calc(100px + env(safe-area-inset-top)) 0 40px}
.hx-split .hx-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:clamp(18px,3vw,48px);align-items:center}
.hx-split{--f1:calc(99cqw / var(--k1));--f2:calc(99cqw / var(--k2))}
.hx-split .tagline.hx-h{line-height:.8;letter-spacing:-.005em}
.hx-split .hx-fan{max-width:480px}
@media(max-width:700px){
 .hx-split .hx-in{display:block}
 .hx-split .hx-txt{padding-top:92px}
 .hx-split .hx-fan{position:absolute;right:-8px;top:-6px;width:180px;z-index:1;opacity:.95}
 .hx-split .hx-fc .hx-t{display:none}
 .hx-centred .hx-fan{width:min(330px,88%)}
}
/* reduced motion: everything static (rings draw one still frame in fl.js) */
@media(prefers-reduced-motion:reduce){.hx .hx-l1,.hx .hx-l2,.hx .hx-sub,.hx-strip-h,.hx-card,.hx-fc{animation:none!important}}
/* safe areas (notch / home bar) for the fixed nav and page gutters */
.nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.wrap{width:min(1240px,100% - 2 * max(20px,env(safe-area-inset-left),env(safe-area-inset-right)))}

/* ===== Film hero, layout A (Kenrick 20 Oct): verdict + agreement bar span the full width under the poster/ring row;
   poster and ring tile equal height; tablet/desktop get the same idea in 3 columns instead of a stranded poster. ===== */
.fltug{container-type:inline-size}
.fltug .tugn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:8px;font-size:clamp(11px,3.1vw,13px)}
.fltug .tugn>span{white-space:nowrap}
.fltug .tugn>span:first-child{text-align:left;color:#7fefff}.fltug .tugn>span:last-child{text-align:right;color:#ff8fe0}
.fltug .tugn .tmid{text-align:center;overflow:hidden;text-overflow:ellipsis}
.fltug .tshort{display:none}
@container (max-width:470px){.fltug:not(.mini) .tlong{display:none}.fltug:not(.mini) .tshort{display:inline}}
.fltug.mini .tugn{display:flex}
@media(max-width:699px){
  body.fl-a .hero.film .hero-grid>div:first-child{grid-template-areas:"eb eb" "h1 h1" "po sp" "hk hk" "cl cl" "pr pu" "sh sh";grid-template-rows:none}
  body.fl-a .hero.film .pst.lg{align-self:stretch;height:auto}
  body.fl-a .hero.film .pst.lg img{width:100%;height:100%;object-fit:cover}
  body.fl-a .hero.film .tri.fair{align-self:stretch;justify-content:center}
  body.fl-a .hero.film .quip{font-size:clamp(14px,3.95vw,18px);text-wrap:balance;margin-top:4px;max-width:none;letter-spacing:-.005em}
  body[class*="fl-"] .hero.film .flwrap{grid-column:1/-1;width:100%;align-items:stretch}
  body.fl-a .hero.film .flv{font-size:clamp(18px,6vw,26px);text-wrap:balance}
}
@media(min-width:700px){
  body.fl-a .hero.film .hero-grid>div:first-child{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr) minmax(0,1fr);column-gap:16px;row-gap:12px;align-items:start;
    grid-template-areas:"eb eb eb" "h1 h1 h1" "po sp sp" "po pr pu" "hk hk hk" "cl cl cl" "sh sh sh"}
  body.fl-a .hero.film .trio{display:contents}
  body.fl-a .hero.film .eyebrow{grid-area:eb;margin:0}
  body.fl-a .hero.film h1{grid-area:h1;margin:0}
  body.fl-a .hero.film .pst.lg{grid-area:po;width:100%;max-width:none;margin:0;align-self:stretch;height:auto}
  body.fl-a .hero.film .pst.lg img{width:100%;height:100%;object-fit:cover}
  body.fl-a .hero.film .tri:not(.fair):nth-child(1){grid-area:pr}
  body.fl-a .hero.film .tri:not(.fair):nth-child(2){grid-area:pu}
  body.fl-a .hero.film .tri:not(.fair){min-height:0;padding:14px 12px;align-self:stretch;justify-content:center}
  body.fl-a .hero.film .tri.fair{grid-area:sp;display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:0;padding:14px 10px;align-self:stretch}
  body.fl-a .hero.film .quip{grid-area:hk;margin:0;max-width:none;font-size:clamp(16px,1.6vw,19px);text-wrap:balance}
  body.fl-a .hero.film .clarrow{grid-area:cl;margin:0}
  body.fl-a .hero.film .flwrap{grid-area:cl;display:flex;flex-direction:column;gap:8px;width:100%}
  body.fl-a .hero.film .fmsh-open{grid-area:sh;justify-self:start;margin:0}
}
/* Install-the-app: slim bar, only after scrolling, never over the "We fixed it" box / share / verdict blocks */
#fm-install.slim{padding:8px 10px;gap:10px;border-radius:14px;bottom:calc(10px + env(safe-area-inset-bottom));opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .25s,transform .25s}
#fm-install.slim.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
#fm-install.slim img{width:28px;height:28px;border-radius:7px}
#fm-install.slim b{display:inline;font-size:14px}#fm-install.slim small{display:inline;font-size:12px;margin-left:6px}
#fm-install.slim div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#fm-install.slim .btn{padding:6px 12px;font-size:13px}
@media(prefers-reduced-motion:reduce){#fm-install.slim{transition:none}}
/* 320px: X cards never force a 2-up / 330px-min grid wider than the screen */
.xgrid{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
@media(max-width:560px){.xgrid,.xgrid.n2{grid-template-columns:minmax(0,1fr)}}
@media(max-width:340px){.nav .wrap{gap:4px}.nav ul a{padding:6px 3px;font-size:11.5px}.nav .more summary{padding:6px 3px;font-size:11.5px}.cm-hbtn{padding:5px 8px;font-size:11px}.logo .mush{width:24px;height:24px}}

/* ===== Home alignment (Kenrick, iPhone 390): Buzzing next + New this week + Coming soon cards on one internal grid ===== */
/* Buzzing next: rank sits inline before the title; mushroom row, date and bar+number share the title's left edge */
.bz h3 .bzr{position:static;display:inline-block;margin-right:.18em;font-size:inherit;line-height:inherit;vertical-align:baseline}
.bz .trend{align-self:flex-start;margin-left:-5px}                 /* the cap's own side-bearing; icon unchanged */
.bzm{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;width:100%;min-width:0}
.bzm .bmeter{width:auto!important;min-width:0;margin:0}
.bzm b{line-height:1;font-size:24px;min-width:2ch;text-align:right}
@media(max-width:560px){
  .buzzrow{grid-auto-columns:min(80vw,300px)}
  .buzzrow .bz{grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto;column-gap:14px;row-gap:6px;padding:14px;align-items:start}
  .buzzrow .bz>.pst{grid-row:1/6}
  .buzzrow .bz>h3{grid-row:1;font-size:clamp(22px,6.4vw,26px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .buzzrow .bz>.trend{grid-row:2}
  .buzzrow .bz>.small{grid-row:4;align-self:end}
  .buzzrow .bz .bzm{grid-row:5;align-self:end}
}
/* New this week: same card height, poster and text top-aligned, title clamped to 2 lines, real status instead of "…" */
.nw .nwst{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7fefff;line-height:1.2}
.nw .nwst.ann{color:#d9a6ff}
.nw .nwt{font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.nwrow{align-items:stretch}
@media(max-width:560px){
  .nwrow .nw{width:min(78vw,280px);grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto 1fr;row-gap:6px;align-content:start;padding:14px}
  .nwrow .nw>.pst{align-self:start}
  .nwrow .nw>b,.nwrow .nw>.nwst,.nwrow .nw>.mbg{grid-row:1;justify-self:start;align-self:start}
  .nwrow .nw>.nwt{grid-row:2}
  .nwrow .nw>small{grid-row:3;align-self:end}
}
/* Coming soon: countdown row the same height on every card */
.pcard.soon .cb{display:flex;align-items:center;justify-content:center;gap:8px;min-height:32px}

/* ===== Brand audit: neon line icons, the key, popovers, full card tags ===== */
.neo{width:1.25em;height:1.17em;vertical-align:-.22em;overflow:visible;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.neo .c1{stroke:#2de2ff;filter:drop-shadow(0 0 2px rgba(45,226,255,.45))}.neo .c2{stroke:#ff3ec9;filter:drop-shadow(0 0 2px rgba(255,62,201,.45))}
.neo .c3{stroke:#c77dff;filter:drop-shadow(0 0 2px rgba(199,125,255,.45))}.neo .c4{stroke:#8f7bb8}.neo .sp{stroke:#7cffd9;stroke-width:2.2}
.bzi .neo,.bzi .trend svg{width:30px;height:28px}.bzi .trend .tl{display:none}.bzi .neo-logo .mush{width:28px;height:28px}
.neo-logo{display:inline-flex;vertical-align:-.18em}.neo-logo .mush{width:1.05em;height:1.05em}
.hero-line .tl2 .neo-logo .mush{width:.95em;height:.95em}
.mny-li-v .neo,.mny-stats .neo{width:1.3em;height:1.2em}
/* the key */
.fmkey{padding:clamp(18px,3vw,30px);border-radius:24px;background:linear-gradient(160deg,rgba(21,16,54,.85),rgba(8,6,26,.9));border:1px solid rgba(199,125,255,.28)}
.fmkey-h{font-family:var(--display);font-weight:400;font-size:clamp(38px,6vw,64px);line-height:.95;margin:6px 0 6px}.fmkey-h em{font-style:normal;color:var(--gold)}
.fmkey-sub{margin:0 0 18px}
.kgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.kgrid{grid-template-columns:minmax(0,1fr)}}
.kcol{padding:18px;border-radius:18px;background:rgba(14,10,38,.7);border:1px solid rgba(199,125,255,.22);min-width:0}
.kcol h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1;margin:0}
.keb{margin:4px 0 14px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.kring-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;margin-bottom:12px}
.kringbox .ring{width:104px}.kringbox .ring .num{font-size:40px}.kringbox .ring .lbl{display:none}
.kex{color:#7fefff}
.kbands{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.kbands li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px}
.kbands i{height:8px;border-radius:99px;box-shadow:0 0 6px currentColor}.kbands span{color:var(--mut);font-variant-numeric:tabular-nums}
.kclar .clar{margin:4px 0 6px}.kclar p.small{margin:0 0 10px}
.kbar{margin-top:6px}.kbar .kex{margin:4px 0 0;font-size:12px}
.kshrooms{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.kshrooms li{display:grid;grid-template-columns:44px auto minmax(0,1fr);gap:10px;align-items:center}
.kshrooms .trend svg{width:40px;height:38px}.kshrooms .trend .tl{display:none}
.kshrooms .kn{font-family:var(--display);font-weight:400;font-size:34px;line-height:1;min-width:1.4ch}
.kshrooms div{display:flex;flex-direction:column;gap:2px}.kshrooms div .small{margin:0;line-height:1.3}
.kof{margin:12px 0 0;color:#7fefff}
/* tappable symbols */
[data-k]{cursor:help}
[data-k]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:99px}
/* popover */
.fmpop{position:absolute;z-index:300;width:min(380px,calc(100vw - 24px));max-height:min(80vh,560px);overflow:auto;padding:16px 16px 14px;border-radius:18px;
  background:rgba(12,8,34,.98);border:1px solid rgba(199,125,255,.5);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 18px rgba(199,125,255,.18)}
.fmpop.sheet{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));top:auto;width:auto;max-height:72vh;border-radius:20px}
.fmpop .kcol{padding:0;background:none;border:0}
.fmpop-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--txt);font-size:22px;line-height:1;cursor:pointer}
.fmpop-more{display:inline-block;margin-top:12px;font-weight:700;color:var(--gold)}
@media(prefers-reduced-motion:no-preference){.fmpop{animation:hxUp .18s ease-out}}
/* full card tags stay tidy at 360px */
.cb .clar.kfull,.nw .clar.kfull{white-space:normal;text-align:left;line-height:1.15;font-size:11px;letter-spacing:.03em;padding:5px 10px;max-width:100%}
.cb{flex-wrap:wrap;row-gap:6px}
@media(max-width:400px){.cb .clar.kfull{font-size:10.5px;padding:4px 8px;gap:6px}}

/* ===== Lower white levels on the Spore Score (Kenrick, 20 Oct): soft lilac off-white numbers, lighter glow, tinted track ===== */
:root{--sp-num:#e6e0f2}
html .ring .num,html .rbg b,html .mbg b,html .catl .rbg.in-row b{color:var(--sp-num)}
html .ring .num{text-shadow:0 1px 0 rgba(8,6,26,.55),0 0 3px rgba(199,125,255,.22)}
html .rbg b,html .card .badge.mbg-host .rbg b{text-shadow:0 0 2px rgba(8,6,26,.9),0 0 3px rgba(199,125,255,.2)}
html .card .badge.mbg-host .mbg b{text-shadow:0 0 2px rgba(8,6,26,.8),0 0 3px rgba(199,125,255,.2)}
html .ring .track{stroke:rgba(199,125,255,.10)}
html .ring.flbeam-on .track{stroke:rgba(199,125,255,.09)}
/* full card tag = ONE pill: dot + one text run that may wrap inside the pill; verdict never splits ("must-see") */
.clar.kfull{display:inline-flex;align-items:center;gap:6px;max-width:100%;white-space:normal}
.clar.kfull .ctx{display:inline;min-width:0;background:none;border:0;padding:0}
.clar.kfull .cvd{white-space:nowrap;display:inline;background:none;border:0;padding:0;color:inherit}
/* lower whites on the bright tags (Kenrick): lilac/cyan tint instead of pure white */
html .clar.c2.c-crystal{background:linear-gradient(135deg,#e6ddf8,#c4e6f3);color:#0b0a1f}
html .clar.c2.c-clear{background:linear-gradient(135deg,#ddd1f2,#b6d2e4);color:#0b0a1f}

/* ===== Film page vertical rhythm (Kenrick, 20 Oct: "a lot of wasted space") ===== */
body[data-page=film] .hero.film{min-height:0;padding-bottom:28px}
body[data-page=film] main>section.tight,body[data-page=film] section.tight{padding-bottom:32px}
body[data-page=film] section.tight>.wrap>details.maths:first-child{margin-top:0}
body[data-page=film] .sh{margin-bottom:16px}
@media(min-width:900px){body[data-page=film] .hero.film{padding-bottom:40px}body[data-page=film] section.tight{padding-bottom:48px}}
/* We fixed it: title row, then aligned rows with numbers in a right-hand column */
.hero.film .wefix{display:grid;grid-template-columns:1fr auto auto auto;align-items:baseline;column-gap:8px;row-gap:4px;width:100%;padding:10px 14px}
.hero.film .wefix .wf-l{grid-column:1/-1;display:flex;align-items:center;gap:6px}
.hero.film .wefix .wf-row{display:contents}
.hero.film .wefix .wf-who{font-weight:700;color:#e6e0f2}
.hero.film .wefix .wf-a,.hero.film .wefix .fx{text-align:right;font-variant-numeric:tabular-nums;min-width:2ch}
.hero.film .wefix i{margin:0}
@media(min-width:700px){.hero.film .wefix{width:fit-content;min-width:340px}}
/* Buy or rent: one compact row */
.fl-buy .wrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025)}
.fl-buy .wrow h2{font-size:clamp(20px,5.5vw,26px);margin:0;line-height:1}
.fl-buy .wbuy{padding:8px 14px;font-size:14px;min-height:40px}
.fl-buy .aff{margin-left:4px}
.fl-buy p.small{margin:8px 2px 0}

/* Install prompt: in the page flow above the footer, never fixed over content (21 Oct) */
#fm-install.inline{position:static;left:auto;bottom:auto;transform:none;margin:8px auto 28px;width:min(560px,calc(100% - 32px));opacity:1;pointer-events:auto}
#fm-install.inline small{display:block}

/* ===== Card row alignment (Kenrick, 21 Oct): fixed title block, fixed pill area, bar pinned to the bottom ===== */
html .grid>a.pcard{height:100%}
html .pcard h3{line-height:.95;min-height:1.9em;max-height:1.9em;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
@media(max-width:430px){html .pcard h3{font-size:clamp(17px,5.2vw,21px);letter-spacing:0}}
html .pcard .yr{min-height:1.25em}
html .pcard .pwrap{flex:none}
html .pcard:not(.soon) .cb{margin-top:auto;display:grid;grid-template-rows:minmax(36px,auto) auto;align-items:center;justify-items:stretch;row-gap:6px;min-height:0}
html .pcard:not(.soon) .cb>.clar{align-self:center;justify-self:stretch;justify-content:center;text-align:center}
html .pcard:not(.soon) .cb>.fltug{margin-top:0;align-self:end}
@media(max-width:400px){html .pcard:not(.soon) .cb{grid-template-rows:minmax(34px,auto) auto}}
html .pcard.soon .cb{margin-top:auto}
/* hero strip: the same Pros vs Punters bar under each top Spore Score poster */
.hx-card{grid-template-areas:"p" "t" "b"}
.hx-card .hx-bar{grid-area:b;margin-top:6px;display:grid;row-gap:5px;min-width:0}
.hx-card .hx-bar .fltug.mini{margin-top:0;min-width:0}
.hx-card .hx-bar .clar{display:none;justify-content:center;text-align:center;font-size:11px;padding:4px 8px}
@container (min-width:170px){.hx-card .hx-bar .clar{display:inline-flex}}
.hx-card .hx-bar .fltug.mini .tugn{font-size:10px}
html .pcard.soon .cb{height:36px;min-height:36px;flex-wrap:nowrap;overflow:hidden}html .pcard.soon .cb .trend svg{max-height:30px}
html .pcard:not(.soon) .cb>.clar{align-self:stretch;display:inline-flex;align-items:center;min-height:34px}
html .pcard.soon .cb{flex-direction:row;align-items:center;justify-content:center}
html .pcard h3{line-height:1;min-height:2.1em;max-height:2.1em;padding-bottom:.05em}
html .pcard:not(.soon) .cb>.clar.wait{align-self:stretch!important;margin:0!important;justify-self:stretch}
html .pcard:not(.soon) .cb{grid-template-rows:minmax(36px,auto) 9px}
@media(max-width:400px){html .pcard:not(.soon) .cb{grid-template-rows:minmax(34px,auto) 9px}}
/* touch: no long-press drag / stuck hover lift (ring) */
a.card,a.pcard,.hx-card,.hx-fc,.rcard,.post,.feature,.trow,.catl a,.card img,.pcard img,.hx-card img,.pst img,.pwrap img{-webkit-touch-callout:none;-webkit-user-drag:none;user-drag:none}
a.card,a.pcard,.hx-card,.hx-fc,.rcard{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (hover:none),(pointer:coarse){
 .card:hover .art,.pcard:hover .pst img,.post:hover,.feature:hover,.rcard:hover,.trow:hover,.prov:hover,.spons:hover,.bz:hover,.bzt:hover,.xrow:hover,.tug:hover,.mny2:hover,.dpost:not([disabled]):hover,.heat td:hover,.btn.pri:hover,.vframe:hover .play{transform:none!important}
 .card:hover,.hx-card:hover .pst,.hx-fc:hover .pst{box-shadow:none}
 a.card:active,a.pcard:active,.hx-card:active,.hx-fc:active,.rcard:active{filter:brightness(.9);transition:filter .08s}
}
/* Top 100 podium: Pros vs Punters bar only (no clarity tag by design) */
.pod .pod-bar{display:block;width:min(100%,200px);margin:10px auto 0}
.pod .pod-bar .fltug.mini{margin-top:0}
.pod .pod-bar .fltug.mini .tugn{font-size:10px}
/* ===== Split clarity tag (.ctag2), Kenrick 21 Oct 09:01: outer pill = clarity words, right half-pill = verdict ===== */
html .clar.kfull.ctag2{display:inline-flex;flex-direction:row;align-items:stretch;justify-content:space-between;gap:0;padding:3px;border-radius:99px;
  min-height:30px;max-width:100%;min-width:0;line-height:1.08;text-align:left;font-size:11px;letter-spacing:.01em;white-space:normal;box-sizing:border-box}
html .clar.kfull.ctag2>i{display:none}
html .clar.kfull.ctag2 .ctx{display:flex;align-items:center;flex:1 1 auto;min-width:0;padding:0 7px 0 9px;font-weight:800;white-space:normal;overflow-wrap:normal;word-break:normal;text-align:left}
html .clar.kfull.ctag2 .cnm{display:block}
html .clar.kfull.ctag2 .cvd{display:flex;align-items:center;justify-content:center;flex:0 0 auto;white-space:nowrap;padding:0 9px;border-radius:99px;font-weight:700;line-height:1}
/* tints: lilac -> cyan with lowered white; verdict half a step darker */
html .clar.c2.c-crystal.ctag2{background:linear-gradient(135deg,#e2d8f6,#bfe2f1);color:#0b0a1f;border:0}
html .clar.c2.c-crystal.ctag2 .cvd{background:rgba(52,32,112,.16);box-shadow:inset 0 0 0 1px rgba(52,32,112,.2);color:#130f2e}
html .clar.c2.c-clear.ctag2{background:linear-gradient(135deg,#d7caef,#b0cde0);color:#0b0a1f;border:0}
html .clar.c2.c-clear.ctag2 .cvd{background:rgba(52,32,112,.18);box-shadow:inset 0 0 0 1px rgba(52,32,112,.22);color:#130f2e}
html .clar.c2.c-fuzzy.ctag2,html .clar.c2.c-murky.ctag2{background:rgba(118,92,178,.36);border:1px solid rgba(200,180,255,.36);color:#eee6ff;filter:none;text-shadow:none;padding:2px}
html .clar.c2.c-fuzzy.ctag2 .cvd,html .clar.c2.c-murky.ctag2 .cvd{background:rgba(16,10,40,.62);box-shadow:inset 0 0 0 1px rgba(200,180,255,.3);color:#f1ebff}
/* fixed card pill row: tag fills it so every card's tag is the same height */
html .pcard:not(.soon) .cb>.clar.ctag2{align-self:stretch;justify-self:stretch;width:100%;min-height:34px}
@media(max-width:400px){html .clar.kfull.ctag2{font-size:10.5px}html .clar.kfull.ctag2 .ctx{padding:0 5px 0 8px}html .clar.kfull.ctag2 .cvd{padding:0 7px}}
@media(max-width:340px){html .clar.kfull.ctag2{font-size:10px;letter-spacing:0}html .clar.kfull.ctag2 .ctx{padding:0 4px 0 7px}html .clar.kfull.ctag2 .cvd{padding:0 6px}}
/* hero strip (only when wide enough) */
.hx-card .hx-bar .clar.ctag2{min-height:28px;font-size:10.5px;width:100%}
@container (min-width:170px){.hx-card .hx-bar .clar.ctag2{display:inline-flex}}
/* popover key examples */
.fmpop .clar.ctag2{min-height:30px;max-width:300px}
html .hx-card .hx-bar .clar.kfull.ctag2{display:none}
@container (min-width:170px){html .hx-card .hx-bar .clar.kfull.ctag2{display:inline-flex}}
/* split tag: verdict half fills the full pill height and takes the right half, like the original */
html .clar.kfull.ctag2,html .pcard:not(.soon) .cb>.clar.kfull.ctag2,html .hx-card .hx-bar .clar.kfull.ctag2{align-items:stretch}
html .clar.kfull.ctag2 .cvd{align-self:stretch;flex:0 0 auto;min-width:50%;font-size:1.06em;font-weight:800;padding:0 9px}
html .clar.kfull.ctag2 .ctx{flex:1 1 0;justify-content:center;text-align:center}
html .clar.c2.c-crystal.ctag2 .cvd{background:rgba(52,32,112,.22)}
html .clar.c2.c-clear.ctag2 .cvd{background:rgba(52,32,112,.25)}
@media(max-width:400px){html .clar.kfull.ctag2 .cvd{padding:0 6px;min-width:48%}}
@media(max-width:340px){html .clar.kfull.ctag2 .cvd{padding:0 5px;font-size:1em}}
/* ===== Header (Kenrick 21 Oct 09:09): bigger logo; header edges = page content edges ===== */
.nav .wrap{height:72px}
.nav .wrap>.logo{font-size:clamp(28px,1.2vw + 22px,40px);gap:clamp(10px,.6vw,14px);letter-spacing:.05em;line-height:1}
.nav .wrap>.logo .mush{width:clamp(32px,1.2vw + 26px,44px);height:clamp(32px,1.2vw + 26px,44px)}
/* home (Wide hero): header uses the hero's container, so logo left = headline left and nav right = "All films" / last poster right */
body:has(.hero.home.hx-wide) .nav .wrap{width:min(100% - 2 * max(18px,env(safe-area-inset-left),env(safe-area-inset-right)),1840px)}
body:has(.hero.home.hx-wide) .nav{padding-left:0;padding-right:0}
/* nav links end exactly on the container edge */
.nav .wrap>:last-child{margin-right:0}
@media(max-width:1023px){.nav .wrap>.logo{font-size:32px}.nav .wrap>.logo .mush{width:34px;height:34px}}
@media(max-width:560px){.nav .wrap{height:64px}.nav .wrap>.logo .mush{width:34px;height:34px}}
@media(max-width:380px){.nav .wrap>.logo .mush{width:31px;height:31px}}
@media(max-width:340px){.nav .wrap>.logo .mush{width:28px;height:28px}}
/* ===== Film page, desktop/tablet-landscape (Kenrick 21 Oct 09:07): one 1240px container, balanced header ===== */
@media(min-width:1024px){
  body[data-page=film] .hero.film .hero-grid{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
  body[data-page=film] .hero.film .mnyslot:empty{display:none}
  body.fl-a .hero.film .hero-grid>div:first-child{grid-template-columns:clamp(220px,21%,290px) minmax(0,1fr) minmax(0,1fr) minmax(300px,1.3fr);column-gap:20px;row-gap:14px;
    grid-template-areas:"eb eb eb eb" "h1 h1 h1 h1" "po sp sp hk" "po sp sp wf" "po pr pu sh" "cl cl cl cl";grid-template-rows:auto auto auto 1fr auto auto}
  body.fl-a .hero.film .quip{align-self:start;font-size:clamp(18px,1.5vw,22px);line-height:1.3}
  body.fl-a .hero.film .wefix{grid-area:wf;align-self:start;justify-self:stretch;width:auto;max-width:none;margin:0}
  body.fl-a .hero.film .fmsh-open{grid-area:sh;align-self:end;justify-self:start;margin:0}
  body[class*="fl-"] .hero.film .flwrap{grid-area:cl;width:100%;margin-top:6px}
  body.fl-a .hero.film .tri.fair{padding:18px 12px}
  /* every section below uses the same container as the header, so left edges line up */
  body[data-page=film] section .wrap.narrow{max-width:none;width:min(1240px,100% - 40px)}
  body[data-page=film] .vids{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  /* one video: explainer + "Show the numbers" on the left, the video on the right, no empty grid */
  body[data-page=film] .wrap.narrow:has(>.vids>.vid:only-child){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:32px;align-items:start}
  body[data-page=film] .wrap.narrow:has(>.vids>.vid:only-child)>*{grid-column:1}
  body[data-page=film] .wrap.narrow:has(>.vids>.vid:only-child)>.vids{grid-column:2;grid-row:1 / span 6;grid-template-columns:1fr;margin-bottom:0}
}
@media(min-width:1024px){body.fl-a .hero.film .wefix{width:100%;box-sizing:border-box;grid-template-columns:minmax(0,1fr) auto auto auto}body.fl-a .hero.film .wefix .wf-who{min-width:0;overflow-wrap:anywhere}}
@media(min-width:1024px){body.fl-a .hero.film .wefix{min-width:0}}

/* ===== 21 Oct 2026: 5-tab nav (Just landed tab) + "More" moved out of the top row (fl.js nav). A = default, B = ?nav=b ===== */
.subnav,.tabbar,.tbsheet{display:none}
.nav .more .mic{display:none}
.nav ul.tabs5 a{white-space:nowrap}
/* desktop ≥1024 (both layouts): top row = logo, 5 tabs, Log in; More's pages in a slim second row */
@media(min-width:1024px){
  .nav .wrap>.more{display:none}
  .nav .subnav{display:block;border-top:1px solid rgba(199,125,255,.14);background:rgba(8,6,26,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .nav .subnav .wrap{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:2px 4px;height:auto;min-height:34px;padding:3px 0}
  .nav .subnav a{font-size:12.5px;color:var(--mut);padding:4px 10px;border-radius:99px;white-space:nowrap;transition:.2s}
  .nav .subnav a:hover,.nav .subnav a.on{color:#fff;background:rgba(199,125,255,.14)}
  body{padding-top:36px}   /* room for the second row; on body (not the hero) so the Loading screen already has it = no layout shift */
  .tabbar{display:none!important}}
/* phones + tablets <1024 */
@media(max-width:1023px){
  .nav .wrap{flex-wrap:nowrap}
  .nav .wrap>.logo .dk{display:inline}.nav .wrap>.logo .mb{display:none}
  .nav .wrap>.logo{font-size:clamp(22px,5.4vw,32px)!important;flex:0 1 auto;min-width:0}
  .nav .wrap>.logo .mush{width:clamp(28px,7vw,34px)!important;height:clamp(28px,7vw,34px)!important}
  .cm-hbtn{margin-left:auto}}
/* A: bottom tab bar + More sheet */
@media(max-width:1023px){
  .nav-a .nav .wrap>ul.tabs5,.nav-a .nav .wrap>.more{display:none}
  .nav-a .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;justify-content:space-around;align-items:stretch;gap:0;
    padding:6px max(4px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
    background:rgba(8,6,26,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(199,125,255,.32);box-shadow:0 -3px 14px rgba(157,77,255,.12)}
  .nav-a .tabbar>a,.nav-a .tabbar>button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 1px 4px;border-radius:12px;
    font:600 10.5px/1.1 var(--body);letter-spacing:0;color:var(--mut);background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-shadow:none}
  .nav-a .tabbar span{white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%}
  .nav-a .tabbar .mb{display:none}.nav-a .tabbar .dk{display:inline}
  .nav-a .tabbar i{display:block;width:24px;height:24px;font-style:normal}
  .nav-a .tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .nav-a .tabbar svg .ac{stroke:#ff3ec9}
  .nav-a .tabbar>.on{color:#fff;background:rgba(199,125,255,.13);box-shadow:inset 0 0 0 1px rgba(199,125,255,.35)}
  .nav-a .tabbar>.on svg{stroke:#2de2ff;filter:drop-shadow(0 0 3px rgba(45,226,255,.45))}
  .nav-a body:has(> .tabbar){padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .nav-a .tbsheet:not([hidden]){display:flex;position:fixed;inset:0;z-index:95;align-items:flex-end;background:rgba(4,3,14,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  .nav-a .tbs-in{width:100%;max-height:80vh;overflow-y:auto;padding:16px max(16px,env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    background:#0c0822;border-top:1px solid rgba(199,125,255,.45);border-radius:22px 22px 0 0;isolation:isolate;box-shadow:0 -6px 24px rgba(157,77,255,.2);animation:tbsUp .22s ease-out}
  .nav-a .tbs-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.nav-a .tbs-h b{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.04em}
  .nav-a .tbs-x{width:40px;height:40px;border-radius:50%;border:1px solid rgba(199,125,255,.4);background:none;color:var(--txt);font-size:22px;cursor:pointer}
  .nav-a .tbs-g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .nav-a .tbs-g a{padding:13px 12px;border-radius:12px;background:rgba(21,16,54,.7);border:1px solid rgba(199,125,255,.2);font-size:14px;color:var(--txt)}
  .nav-a .tbs-g a.on{border-color:#ff3ec9}
  .nav-a.tbs-open .tabbar{z-index:96}
  .nav-a .cc{bottom:calc(76px + env(safe-area-inset-bottom))}
  .nav-a #fm-install{bottom:calc(78px + env(safe-area-inset-bottom))}
  .nav-a .tsbox{bottom:calc(78px + env(safe-area-inset-bottom))}
  .nav-a .cm-toast{bottom:calc(80px + env(safe-area-inset-bottom))}
  .nav-a .fmpop.sheet{bottom:calc(74px + env(safe-area-inset-bottom));z-index:97}}
@media(max-width:359px){.nav-a .tabbar .dk{display:none}.nav-a .tabbar .mb{display:inline}.nav-a .tabbar>a,.nav-a .tabbar>button{font-size:10px}}
@keyframes tbsUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.nav-a .tbs-in{animation:none}}
/* B: two-row header (logo · ☰ More · Log in / 5 tabs) */
@media(max-width:1023px){
  .nav-b .nav .wrap{flex-wrap:wrap;height:auto!important;row-gap:0;padding-top:4px}
  .nav-b .nav .wrap>.logo{height:58px}
  .nav-b .nav .wrap>.more{order:2;margin-left:auto}.nav-b .cm-hbtn{order:3;margin-left:6px}
  .nav-b .nav .more summary{display:flex;align-items:center;gap:6px;padding:7px 11px!important;border:1px solid rgba(199,125,255,.35);border-radius:99px;font-size:13px!important}
  .nav-b .nav .more summary::after{content:none}.nav-b .nav .more .mic{display:inline;font-size:15px;line-height:1}
  .nav-b .nav .wrap>ul.tabs5{order:4;flex:1 0 100%;display:flex;justify-content:space-between;gap:2px;overflow:visible;-webkit-mask:none;mask:none;padding:0 0 6px;margin:0}
  .nav-b .nav .wrap>ul.tabs5 li{flex:1 1 auto;display:flex}
  .nav-b .nav .wrap>ul.tabs5 a{flex:1;text-align:center;padding:7px 4px!important;font-size:13.5px!important}
  .nav-b .nav .wrap>ul.tabs5 .dk{display:inline}.nav-b .nav .wrap>ul.tabs5 .mb{display:none}
  .nav-b .nav{background:rgba(8,6,26,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav-b #tbsheet+*{margin-top:44px}}
@media(max-width:359px){.nav-b .nav .wrap>ul.tabs5 a{font-size:12px!important;padding:7px 2px!important}.nav-b .nav .more .mtx{display:none}}