/* ===== V4 "Picture Palace" restyle (fm-v48, 24 Oct 2026) =====
   Loaded last on every page so all pages inherit it. Dark cinema palette (velvet #6E1420, charcoal) with neon character accents:
   The Pros cyan #2DE2FF, The Punters pink #FF3EC9, Buzz purple #A64DFF. Type: Archivo (modern grotesk, headlines/slogan/numbers) + Oswald (condensed labels),
   Inter for body copy and UI. Gold kept for a few data colours only. */
:root{--bg:#100b0c;--bg2:#170f11;--card:#1d1416;--line:rgba(176,138,74,.2);--txt:#f3ece2;--mut:#b9ab9c;
 --gold:#c9a25a;--gold2:#e03a86;--cyan:#35c6e2;--blue:#35c6e2;--red:#d9475c;--good:#3fc9b0;--r:8px;
 --velvet:#6e1420;--velvet2:#3a0d14;--gilt:#b08a4a;--gilt2:#d8b46a;--beam:#e8d3a8;--ink:#1a1216;--buzz:#a64dff;
 --display:'Oswald','Arial Narrow',Impact,sans-serif;--serif:'Playfair Display',Georgia,'Times New Roman',serif}
html{background:#100b0c}
body{background:
  radial-gradient(120% 70% at 50% -10%,rgba(110,20,32,.42),transparent 62%),
  radial-gradient(60% 40% at 100% 0,rgba(232,211,168,.06),transparent 70%),
  linear-gradient(#120c0d,#0d090a) fixed;
 color:var(--txt)}
::selection{background:rgba(176,138,74,.45);color:#fff}
/* no neon glow anywhere: flat ink and light */
h1,h2,h3,.tagline,.tagline em,.hero h1,.sh h2,.hh-num,.num,.logo{text-shadow:none!important}
/* ---- type ---- */
.hero h1,.hero.short h1{font-family:var(--serif);font-weight:900;letter-spacing:-.01em;line-height:.92;font-size:clamp(48px,8.4vw,112px)}
.sh h2,section h2{font-family:var(--serif);font-weight:800;letter-spacing:-.005em;line-height:1.02;font-size:clamp(30px,4.2vw,50px)}
.sh h2::after{content:"";display:block;width:56px;height:2px;margin-top:12px;background:linear-gradient(90deg,var(--gilt2),transparent)}
h3{font-family:var(--serif);font-weight:700;letter-spacing:0}
.eyebrow{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.26em;color:var(--gilt2)}
.eyebrow:before{background:var(--gilt);height:1px}
.logo{font-family:var(--display);font-weight:600;letter-spacing:.16em;font-size:22px;text-transform:uppercase}
.btn,.nav ul a,button{font-family:inherit}
/* home hero lines: condensed caps over a gilt serif italic (fitted to the column by polish.js) */
.hx .hx-l1{font-family:var(--display);font-weight:600;letter-spacing:.01em;text-transform:uppercase;color:var(--txt)}
.hx .hx-l2{font-family:var(--serif);font-weight:900;font-style:italic;letter-spacing:-.01em;color:var(--gilt2);
  background:linear-gradient(180deg,#f0d796 0%,#c9a25a 55%,#8e6a32 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero.home.hx .tagline.hx-h{line-height:.95}
.hx-sub,.hero .sub,.hero-line{font-family:var(--serif);font-style:italic;font-weight:700;color:#e6dccd}
/* ---- nav ---- */
.nav.solid,.nav{background:linear-gradient(rgba(16,11,12,.94),rgba(16,11,12,.86));backdrop-filter:blur(10px);border-bottom:1px solid rgba(176,138,74,.28)}
.nav ul a{border-radius:3px;color:#c9bcab}
.nav ul a:hover,.nav ul a.on{color:#fff;background:rgba(110,20,32,.55);box-shadow:inset 0 -2px 0 var(--gilt)}
/* ---- buttons, chips, cards: sharper corners, gilt hairlines, velvet fills ---- */
.btn{border-radius:3px;letter-spacing:.04em}
.btn.pri{background:linear-gradient(180deg,#dcb86e,#a8823f);color:var(--ink);box-shadow:0 1px 0 rgba(255,240,200,.35) inset,0 6px 16px -8px rgba(0,0,0,.7)}
.btn.pri:hover{background:linear-gradient(180deg,#e8c67c,#b58c45);box-shadow:0 1px 0 rgba(255,240,200,.4) inset,0 8px 20px -8px rgba(0,0,0,.8)}
.btn.ghost{border:1px solid rgba(176,138,74,.5);background:rgba(110,20,32,.18);color:var(--txt)}
.btn.ghost:hover{background:rgba(110,20,32,.4)}
.card,.rcard,.sn-card,.mv-card,.m-card,.wt,.panel{border-radius:var(--r)}
.pst{border-radius:4px}
.hx-card .pst,.hx-fc .pst{border-radius:4px;box-shadow:0 12px 28px rgba(0,0,0,.6),0 0 0 1px rgba(176,138,74,.35)}
.hx-card:hover .pst,.hx-fc:hover .pst{box-shadow:0 12px 28px rgba(0,0,0,.6),0 0 0 2px var(--gilt2)}
/* hero backdrop: velvet + beam instead of neon haze */
.hero::before{background:
  linear-gradient(0deg,var(--bg) 2%,rgba(16,11,12,.5) 45%,rgba(16,11,12,.2) 70%,rgba(16,11,12,.75)),
  linear-gradient(90deg,rgba(16,11,12,.92) 0%,rgba(16,11,12,.35) 60%,transparent)}
.hero.short,.hero.home{background:radial-gradient(90% 120% at 80% 0,rgba(110,20,32,.45),transparent 60%),radial-gradient(40% 60% at 70% 0,rgba(232,211,168,.08),transparent 70%)}
/* ---- painted V4 banners (all page heroes) ---- */
.ha-v4 .ha-art img{object-fit:cover;object-position:50% 45%;filter:saturate(.96) contrast(1.03);
  -webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 58%,transparent 100%)}
@media(min-width:900px){.hero.has-ha:not(.home) .wrap>.ha-v4{top:-18px}}
/* ---- home hero scene: V4 trio painting, Spore Score ring held in the projector beam (top centre) ---- */
.hh{aspect-ratio:16/9}
.hh-art{filter:blur(6px) saturate(.6) brightness(.75)}
.hh-flat img{display:block;width:100%;height:100%;object-fit:cover}
.hh-ring{left:40.5%;top:2.5%;width:19%;color:var(--txt)}
.hh-ring::before{inset:-10%;background:radial-gradient(circle,rgba(16,11,12,.92) 52%,rgba(232,211,168,.18) 62%,transparent 72%);opacity:1}
.hh-ring svg{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.hh-track{stroke:rgba(232,211,168,.16)}
.hh-num{font-family:var(--serif);font-weight:900;font-size:40cqw;letter-spacing:-.02em}
.hh-ring small{font-family:var(--display);font-weight:500;color:var(--beam);letter-spacing:.22em}
.hh-tag{font-family:var(--display);font-weight:500;letter-spacing:.2em;border-radius:2px;background:rgba(16,11,12,.82)}
.hh-tag-pro{left:26%;color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(53,198,226,.7)}
.hh-tag-pun{left:72%;color:#ef7fae;box-shadow:inset 0 0 0 1px rgba(224,58,134,.75)}
.hh-sp circle{opacity:.7}
/* ---- rings and score numbers ---- */
.ring .num,.num{font-family:var(--serif);font-weight:900;letter-spacing:-.02em}
/* ---- Spore News: V4 character medallions on story pictures ---- */
.sn-stk{width:70px;height:70px;border-radius:50%;transform:rotate(0);bottom:-14px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.m-post .sn-stk{width:70px}.m-stk .sn-stk{width:84px;height:84px;transform:none}
@media(min-width:900px){.sn-stk{width:66px;height:66px}}
.sn-ph{background:#241a1b}
.sn-pw{background:radial-gradient(120% 140% at 100% 0,rgba(110,20,32,.55),transparent 55%),radial-gradient(120% 140% at 0 100%,rgba(176,138,74,.16),transparent 55%),#1d1416}
.sn-card h3,.sn-card h2{font-family:var(--serif);font-weight:800;text-transform:none;letter-spacing:-.005em;line-height:1.12}
/* film grain over everything, very light (pure CSS, no image request) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(max-width:640px){
 .hero h1,.hero.short h1{font-size:clamp(44px,13vw,64px)}
 .sh h2,section h2{font-size:clamp(28px,8vw,36px)}
 .hh{aspect-ratio:16/10}
 .hh-ring{left:38%;top:1%;width:24%}
 .logo{font-size:18px;letter-spacing:.12em}
}
@media(prefers-reduced-motion:reduce){.hh-sp{display:none}}
/* ---- round 2 ---- */
.wt{--wg:#d8b46a}
.wt-yt.btn.pri{background:linear-gradient(180deg,#dcb86e,#a8823f);color:var(--ink);box-shadow:0 6px 16px -8px rgba(0,0,0,.7)}
.wt-btn{background:rgba(16,11,12,.78);box-shadow:0 0 0 1px rgba(216,180,106,.7)}
.wt-play:hover .wt-btn{box-shadow:0 0 0 1px var(--gilt2),0 0 0 8px rgba(176,138,74,.18)}
.wt h2{font-family:var(--serif);font-weight:800}
.gw-rib img{border-radius:50%;width:36px;height:36px}
.gw-rib{border-color:rgba(176,138,74,.45)!important;background:linear-gradient(90deg,rgba(110,20,32,.55),rgba(29,20,22,.9),rgba(110,20,32,.55))!important}
@media(max-width:640px){.nav .wrap>.logo,.logo{font-size:17px!important;letter-spacing:.05em!important;gap:7px}}
/* film-art placeholders (no poster yet): velvet + gilt instead of per-film neon hues */
.art-ph,[style*="--h1:hsla"]{--h1:rgba(110,20,32,.7)!important;--h2:rgba(176,138,74,.28)!important}
/* segmented toggles: velvet + gilt instead of purple-pink neon */
.seg button.on,.sn-seg button.on,.fltoggle a.on{background:linear-gradient(135deg,#7a1a26,#a3283a)!important;color:#f3ece2!important;box-shadow:inset 0 0 0 1px rgba(201,162,90,.55)!important}
.pst{background:radial-gradient(70% 50% at 50% 45%,rgba(110,20,32,.35),transparent 70%),linear-gradient(160deg,#2a1d1f,#140d0e)!important}

/* ===================== round 3 (Fuzzy Mushroom, 24 Oct evening): modern title-card type, neon hints back, ring clear of the characters ===================== */
:root{--head:'Archivo','Helvetica Neue',Arial,sans-serif;--serif:var(--head);--cyan:#2de2ff;--pink:#ff3ec9;--neon-c:45,226,255;--neon-p:255,62,201;
 --line:rgba(255,255,255,.09)}
/* headlines: bold clean grotesk, tight tracking, never italic */
.hero h1,.hero.short h1{font-family:var(--head);font-weight:800;font-style:normal;letter-spacing:-.035em;line-height:.92}
.sh h2,section h2,.wt h2,.sn-card h3,.sn-card h2,h3{font-family:var(--head);font-style:normal;letter-spacing:-.02em}
.sh h2,section h2,.wt h2{font-weight:800}
.sh h2::after{width:44px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 0 10px rgba(var(--neon-p),.5)}
/* home slogan: two clean lines, white then neon cyan-to-pink, high contrast */
.hx .hx-l1{font-family:var(--head);font-weight:800;font-stretch:100%;letter-spacing:-.03em;text-transform:uppercase;color:#fff}
.hx .hx-l2{font-family:var(--head);font-weight:900;font-style:normal;font-stretch:100%;letter-spacing:-.03em;text-transform:uppercase;color:var(--pink);
  background:linear-gradient(90deg,#2de2ff 0%,#8fb8ff 45%,#ff3ec9 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(var(--neon-p),.35))}
.hx-sub,.hero .sub,.hero-line{font-family:var(--body,Inter),system-ui,sans-serif;font-style:normal;font-weight:600;letter-spacing:-.005em;color:#ece6de}
.eyebrow{color:var(--cyan);text-shadow:0 0 10px rgba(var(--neon-c),.45)!important}
.eyebrow:before{background:var(--pink);box-shadow:0 0 6px rgba(var(--neon-p),.7)}
/* numbers in rings: grotesk, with a soft neon glow */
.ring .num,.num,.hh-num{font-family:var(--head)!important;font-weight:800;letter-spacing:-.04em}
.hh-num{text-shadow:0 0 16px rgba(255,255,255,.28)!important}
.hh-ring svg{filter:drop-shadow(0 0 5px rgba(var(--neon-c),.55)) drop-shadow(0 0 12px rgba(var(--neon-p),.35))}
.ring svg{filter:drop-shadow(0 0 4px rgba(var(--neon-p),.35))}
/* less gold: neutral hairlines, neon for focus/active */
.nav.solid,.nav{border-bottom:1px solid rgba(255,255,255,.08)}
.nav ul a:hover,.nav ul a.on{background:rgba(255,255,255,.07);box-shadow:inset 0 -2px 0 var(--pink),0 6px 12px -8px rgba(var(--neon-p),.8)}
.btn.pri,.wt-yt.btn.pri{background:linear-gradient(135deg,#ff3ec9,#c43cff);color:#fff;box-shadow:0 0 18px -4px rgba(var(--neon-p),.65)}
.btn.pri:hover{background:linear-gradient(135deg,#ff5ad3,#cf55ff);box-shadow:0 0 24px -2px rgba(var(--neon-p),.75)}
.btn.ghost{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.btn.ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(var(--neon-c),.6)}
.hx-card .pst,.hx-fc .pst{box-shadow:0 12px 28px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1)}
.hx-card:hover .pst,.hx-fc:hover .pst{box-shadow:0 12px 28px rgba(0,0,0,.6),0 0 0 2px var(--cyan),0 0 16px rgba(var(--neon-c),.4)}
.wt{--wg:#2de2ff}
.wt-btn{box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 18px rgba(var(--neon-c),.45)}
.gw-rib{border-color:rgba(var(--neon-p),.45)!important;box-shadow:0 0 18px -6px rgba(var(--neon-p),.6)}
.seg button.on,.sn-seg button.on,.fltoggle a.on{background:linear-gradient(135deg,#ff3ec9,#a64dff)!important;color:#fff!important;box-shadow:0 0 12px -2px rgba(var(--neon-p),.6)!important}
.hh-tag-pro{color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(var(--neon-c),.85),0 0 14px rgba(var(--neon-c),.4)}
.hh-tag-pun{color:#ff7fda;box-shadow:inset 0 0 0 1px rgba(var(--neon-p),.85),0 0 14px rgba(var(--neon-p),.4)}
.hh-tag{font-family:var(--display);font-weight:600}
/* ---- home scene: headroom band above the painting; the ring sits in it, centred over the beam, clear of every character at every width.
   Painting stays full 16:9 (no side crop) so the tags line up with The Pro (30%) and The Punter (72%). ---- */
html .hh{aspect-ratio:16/11}
html .hh .hh-stage{-webkit-mask-image:none;mask-image:none}
html .hh .hh-art,html .hh .hh-fx{top:auto;bottom:0;height:auto;aspect-ratio:16/9;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
html .hh .hh-fx{-webkit-mask-image:none;mask-image:none}
html .hh .hh-ring{left:41.5%!important;top:.5%!important;width:17%!important}
html .hh .hh-ring::before{inset:-8%}
html .hh .hh-tag{bottom:3%}
html .hh .hh-tag-pro{left:30%}
html .hh .hh-tag-pun{left:72%}
@media(max-width:640px){html .hh{aspect-ratio:16/11}html .hh .hh-ring{left:39%!important;top:0!important;width:22%!important}html .hh .hh-tag{font-size:9px;padding:.5em .7em}}
.hero .tagline em,.hx .hx-l2{-webkit-text-stroke:0!important}
.hx .hx-l2{font-stretch:78%;letter-spacing:-.02em}
.hero:not(.home) h1{font-size:clamp(44px,6.4vw,92px)}
/* ---- fm-v49 (24 Oct 2026): V4 brand mark, Halloween banner ---- */
/* brand mark: ink + cel-shaded split cap; neon hint = cyan rim on the Pro half, pink on the Punter half (no blur flicker, no gold glow) */
.logo .mush,.nav .wrap>.logo .mush{filter:drop-shadow(-1px 0 3px rgba(45,226,255,.55)) drop-shadow(1px 0 3px rgba(255,62,201,.5));animation:none}
.logo .mush .fz{animation:none!important}
.neo-logo .mush{filter:drop-shadow(-1px 0 2px rgba(45,226,255,.45)) drop-shadow(1px 0 2px rgba(255,62,201,.4))}
.pst.ph>svg.mush{opacity:.8;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
/* Halloween: painted V4 costume banner replaces the cut-out stickers, moon and bats */
.gw-hwhero{background:radial-gradient(90% 120% at 80% 0,rgba(110,20,32,.45),transparent 60%),radial-gradient(50% 60% at 75% 100%,rgba(255,138,40,.10),transparent 70%)}
.gw-hwhero .gw-hwc{display:none}
@media (max-width:560px){.gw-hwhero .wrap{padding-bottom:0}}
.ha-v4.ha-pg-halloween .ha-art img{object-position:50% 0}

/* ===== fm-v50 (Fuzzy Mushroom 24 Oct 23:59): nothing cut off on phones (checked 360/375/390/430) ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* coming-soon card badge row: was a fixed 36px nowrap row with overflow hidden, so "5 DAYS" and "HEATING UP" were sliced
   off both sides in the 2-column grid. Now it wraps: countdown first, the trend shroom + label drop under it when there is no room */
html .pcard.soon .cb{height:auto;min-height:36px;overflow:visible;flex-wrap:wrap;row-gap:2px;column-gap:8px;padding:2px 0;max-width:100%}
html .pcard.soon .cb .cdn,html .pcard.soon .cb .trend{white-space:nowrap;flex:0 0 auto;max-width:100%}
@media(max-width:600px){
  html .pcard.soon .cb .trend{gap:5px;font-size:11px;letter-spacing:.04em}
  html .pcard.soon .cb .trend svg{width:26px;height:24px;max-height:24px}
  html .pcard.soon .cb .cdn{font-size:11.5px;letter-spacing:.05em}
  /* release / out date line wraps instead of ending in "…" */
  html .pcard .yr{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
}
/* Box office: the little Spore Score ring sat half outside its 64px poster and was clipped */
html .mny-p .pst .flpb{right:3px;top:3px;bottom:auto;left:auto}
/* phone tab row: even spacing with room to spare, and a soft edge fade whenever a row really does scroll (fl.js adds .fm-ovf) */
@media(max-width:479px){
  html .nav-b .nav .wrap>ul.tabs5{justify-content:space-between;gap:0;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  html .nav-b .nav .wrap>ul.tabs5 li{flex:0 1 auto;min-width:0}
  html .nav-b .nav .wrap>ul.tabs5 a{font-size:clamp(11.5px,3.25vw,13px)!important;padding:7px clamp(2px,.9vw,5px)!important;letter-spacing:0}
}
html .fm-ovf{--fl:0px;--fr:28px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)!important}
html .fm-ovf.fm-mid,html .fm-ovf.fm-end{--fl:22px}
html .fm-ovf.fm-end{--fr:0px}

/* ===== fm-v51 (Fuzzy Mushroom 25 Oct 08:46): How it works intro, tagline + lead paragraph above the three steps ===== */
.how-intro{padding-bottom:0}
.how-intro .hi-card{position:relative;padding:22px 24px 20px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid rgba(201,162,90,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.how-intro .hi-card::before{content:"";position:absolute;left:24px;top:0;width:56px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#2de2ff,#c9a25a 55%,#ff3ec9)}
.how-intro .hi-tag{margin:4px 0 12px;font-size:clamp(22px,5.6vw,32px);line-height:1.15;overflow-wrap:break-word}
.how-intro .hi-lead{margin:0;font-size:clamp(15.5px,4vw,17.5px);line-height:1.6;color:#e6dccd;max-width:68ch;overflow-wrap:break-word}
@media(max-width:600px){.how-intro .hi-card{padding:18px 16px 16px}.how-intro .hi-card::before{left:16px}}