/* BiswaGames: one dark theme for every page. Tokens from the spec's Visual system. */
[hidden]{display:none!important}
:root{
  --bg:#0f1720;--surface:#1b2633;--raised:#243244;--line:#2a3a4d;--line-ui:#71839a;
  --text:#eaf0f6;--muted:#a3b1c2;--brand:#ff3355;--brand-hover:#ff5c7a;--brand-press:#ff3d5e;
  --on-brand:#0f1720;--brand-text:#ff6b85;--link:#3fa9f5;--focus:#ffd23f;
  --ok:#4ade80;--warn:#ffb020;--err:#ff6b6b;
  --accent:var(--link);
  --dur-micro:100ms;--dur-fast:160ms;--dur-base:240ms;--dur-sheet:320ms;
  --ease-out:cubic-bezier(.2,0,0,1);--ease-in:cubic-bezier(.4,0,1,1);
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --font-display:"Montserrat","Montserrat Fallback",var(--font-body);
  --r-btn:8px;--r-card:16px;--r-pill:999px;
  --gutter:16px;--container:1200px;
  color-scheme:dark;
}
[data-game="beyond-putt"]{--accent:#4ade80}
[data-game="bowling-blitz"]{--accent:#2ef2e2}
[data-game="championship-clash"]{--accent:#f2a65a}
[data-game="twist-and-roll"]{--accent:#ffd23f}
@media (min-width:640px){:root{--gutter:24px}}

@font-face{font-family:"Montserrat";src:url(/fonts/montserrat-latin-var.woff2) format("woff2");font-weight:600 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat Fallback";src:local("Arial");size-adjust:113%;ascent-override:85%;descent-override:22%;line-gap-override:0%}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 var(--font-body);text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:var(--link);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.25rem,5vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.2vw,2rem)}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--focus);color:var(--bg);padding:12px 16px;border-radius:var(--r-btn);font-weight:600}
.skip:focus{top:12px}
.eyebrow{display:block;font:700 .8125rem/1.2 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.section{padding-block:64px}
.section--alt{background:var(--surface)}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.section-head h2{margin:0}
.stack>*+*{margin-top:16px}

/* Placeholder slot: visibly not real data (build rule 8). */
.slot{display:inline;border:1px dashed var(--line-ui);border-radius:6px;padding:0 6px;color:var(--muted);font:500 .875em/1.5 var(--font-body);background:rgba(113,131,154,.08)}
.slot-box{position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;background:
  repeating-linear-gradient(135deg,rgba(113,131,154,.07) 0 12px,transparent 12px 24px),var(--surface);
  border:1px dashed var(--line-ui);border-radius:var(--r-card);color:var(--muted);padding:16px;font-size:.875rem}
.slot-box span{max-width:32ch}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 24px;border-radius:var(--r-btn);
  font:600 1rem/1.2 var(--font-body);text-decoration:none;border:0;cursor:pointer;text-align:center;
  transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.btn:active{transform:scale(.98)}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:active{background:var(--brand-press)}
.btn-secondary{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-ui)}
.btn-secondary:active{background:var(--raised)}
@media (hover:hover){.btn-primary:hover{background:var(--brand-hover)}.btn-secondary:hover{background:var(--surface)}}
.btn-sm{min-height:40px;padding:8px 16px;font-size:.9375rem}
.btn-lg{min-height:56px}
.btn-store{min-height:56px;padding:8px 24px;flex-direction:row}
.btn-store .lbl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.btn-store .sub{font-size:.8125rem;font-weight:500}
.btn-store .sub .slot{color:var(--on-brand);border-color:rgba(15,23,32,.5);background:rgba(15,23,32,.08)}
.btn[aria-disabled="true"]{background:var(--raised);color:var(--muted);cursor:not-allowed}
.text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--link);font-weight:600;text-decoration:none}
.text-link:hover{text-decoration:underline}
.text-link--brand{color:var(--brand-text)}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--text);border:0;cursor:pointer}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{background:var(--raised)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 12px;border-radius:var(--r-pill);background:var(--surface);color:var(--text);font:600 .8125rem/1.2 var(--font-body);box-shadow:inset 0 0 0 1px var(--accent)}
.chip--accent{color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:639px){.actions--stack{flex-direction:column;align-items:stretch}.actions--stack .btn{width:100%}}

/* Header */
.hdr{position:sticky;top:0;z-index:50;height:64px;background:var(--surface);border-bottom:1px solid var(--line);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast)}
.hdr--over{position:fixed;inset:0 0 auto 0;background:transparent;border-color:transparent}
.hdr--over.is-scrolled{background:var(--surface);border-color:var(--line)}
.hdr .container{height:100%;display:flex;align-items:center;gap:24px}
.logo{display:inline-flex;align-items:center;min-height:44px;font:800 1.375rem/1 var(--font-display);color:var(--text);text-decoration:none;letter-spacing:-.01em}
.logo b{color:var(--brand-text);font-weight:800}
.nav{display:none;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--text);text-decoration:none;font-weight:500;border-bottom:2px solid transparent}
.nav a[aria-current="page"]{border-color:var(--brand)}
.nav a:hover{color:#fff;text-decoration:underline}
.hdr-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.lang{position:relative}
.lang summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--r-btn);cursor:pointer;color:var(--text);font-weight:500}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{width:20px;height:20px}
.lang summary:hover{background:var(--raised)}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:8px;list-style:none;background:var(--raised);border-radius:12px;min-width:220px;box-shadow:0 0 0 1px var(--line)}
.lang li a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--text);text-decoration:none}
.lang li a:hover{background:var(--surface)}
.lang li a[aria-current="true"]{font-weight:700}
.hdr .hdr-cta{display:none}
.menu-btn{background:transparent}
@media (min-width:960px){.nav{display:flex}.hdr .hdr-cta{display:inline-flex}.menu-btn{display:none}}
@media (max-width:959px){.lang .lang-name{display:none}}

/* Phone menu sheet */
.sheet{margin:0 0 0 auto;padding:0;border:0;width:min(420px,100%);max-width:100%;height:100%;max-height:100%;background:var(--surface);color:var(--text)}
.sheet::backdrop{background:rgba(5,10,15,.6)}
.sheet[open]{animation:sheet-in var(--dur-sheet) var(--ease-out)}
@keyframes sheet-in{from{transform:translateX(100%)}to{transform:none}}
.sheet-inner{display:flex;flex-direction:column;height:100%;padding:12px var(--gutter) calc(16px + env(safe-area-inset-bottom,0px))}
.sheet-top{display:flex;justify-content:space-between;align-items:center;height:52px}
.sheet nav a{display:flex;align-items:center;min-height:56px;font:700 1.25rem/1 var(--font-display);color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.sheet .sheet-cta{margin-top:auto}
.sheet .sheet-cta .btn{width:100%}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;background:var(--surface)}
@media (min-width:960px){.hero{min-height:80vh}}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media .slot-box{position:absolute;inset:0;border-radius:0;border:0;align-content:start;padding-top:96px}
@media (min-width:960px){.hero-media .slot-box{justify-items:end;padding-right:8%;align-content:center;padding-top:0}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(15,23,32,.9) 0%,rgba(15,23,32,.35) 22%,rgba(15,23,32,0) 45%),linear-gradient(to right,rgba(15,23,32,.82) 0%,rgba(15,23,32,.55) 32%,rgba(15,23,32,0) 58%)}
.hero-body{width:100%;padding-block:120px 96px}
.hero h1{font-size:clamp(2.5rem,7vw,4.5rem);max-width:12ch;margin-bottom:16px}
.hero .lede{max-width:46ch;font-size:1.125rem;margin-bottom:24px}
.hero .actions{margin-bottom:12px}
.media-bar{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-inline:var(--gutter);pointer-events:none}
.media-bar>*{pointer-events:auto}
.pill{display:inline-block;background:rgba(15,23,32,.85);color:var(--text);border-radius:var(--r-pill);padding:6px 12px;font-size:.8125rem;line-height:1.3}

/* Cards and grids */
.grid{display:grid;gap:16px}
.grid-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:960px){.grid-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.grid-2{grid-template-columns:1fr}
@media (min-width:768px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.grid-3{grid-template-columns:1fr}
@media (min-width:768px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-card);overflow:hidden;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.card:hover,.card:focus-within{box-shadow:0 0 0 1px var(--accent)}
@media (hover:hover){.card--lift:hover{transform:translateY(-4px)}}
.card-body{display:flex;flex-direction:column;gap:8px;padding:16px;flex:1}
.card h3{margin:0}
.card .stretch::after{content:"";position:absolute;inset:0}
.card .card-foot{margin-top:auto;position:relative;z-index:1}
.ratio-4x5{aspect-ratio:4/5}.ratio-16x9{aspect-ratio:16/9}.ratio-9x16{aspect-ratio:9/16}.ratio-1{aspect-ratio:1}
.card .media{position:relative;background:var(--raised)}
.card .media img,.card .media video{width:100%;height:100%;object-fit:cover}
.card .media .slot-box{position:absolute;inset:0;border-radius:0;border:0;border-bottom:1px dashed var(--line-ui)}
.tile-line{font-weight:600;line-height:1.35}
.meta-line{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;color:var(--muted);font-size:.875rem}

/* Game page */
.spec-strip{background:var(--surface);border-block:1px solid var(--line)}
.spec-strip dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0}
@media (min-width:768px){.spec-strip dl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.spec-strip .cell{padding:16px 12px;border-bottom:1px solid var(--line)}
.spec-strip dt{font-size:.8125rem;color:var(--muted);font-weight:600;letter-spacing:.02em;margin-bottom:2px}
.spec-strip dd{margin:0;font-weight:600;font-size:.9375rem;line-height:1.4}
.spec-strip .cell--wide{grid-column:1/-1}
.passthrough{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin-top:8px}
.passthrough svg{width:100%;height:auto;color:var(--muted)}
.passthrough svg .course{color:var(--accent)}
.passthrough figcaption{grid-column:1/-1;font-size:.875rem;color:var(--muted)}
.price-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;color:var(--muted);font-size:.9375rem;margin-top:12px}
.rating-badge{display:inline-grid;place-items:center;min-width:68px;min-height:68px}
.trigger{display:grid;gap:24px;align-items:center}
@media (min-width:960px){.trigger{grid-template-columns:5fr 7fr;gap:48px}}
.trigger h2{font-size:clamp(1.75rem,4vw,2.75rem)}
.video-frame{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--raised)}
.video-frame .slot-box{position:absolute;inset:0}
.sets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-block:24px}
.set{background:var(--bg);border-radius:12px;padding:16px;box-shadow:inset 0 0 0 1px var(--line)}
.section--alt .set{background:var(--bg)}
.set b{display:block;font:800 clamp(1.5rem,4vw,2.25rem)/1 var(--font-display);color:var(--accent)}
.set span{display:block;margin-top:6px;font-weight:600;font-size:.9375rem}
.env-list{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 16px;list-style:none}
.residue{position:relative;isolation:isolate;overflow:hidden;min-height:70vh;display:flex;align-items:flex-end}
.residue .hero-media .slot-box{align-content:start;padding-top:32px}
.residue h2{font-size:clamp(1.75rem,4.5vw,3rem);max-width:20ch}
.residue .container{padding-block:64px}
.quote{border-left:3px solid var(--accent);padding-left:16px}
.shots{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.shots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.faq{max-width:65ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--font-body);color:var(--muted)}
.faq details[open] summary::after{content:"−"}
.faq details>div{padding-bottom:16px;color:var(--text)}
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;height:64px;padding:8px var(--gutter);padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));height:auto;background:var(--surface);border-top:1px solid var(--line);transform:translateY(110%);transition:transform var(--dur-base) var(--ease-out)}
.sticky-bar.is-shown{transform:none}
.sticky-bar .name{font-weight:700;line-height:1.2;flex:1;min-width:0}
.sticky-bar .btn{min-height:48px;padding-inline:16px}
@media (min-width:960px){.sticky-bar{display:none}}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px}
label{font-weight:600;font-size:.9375rem}
input[type=email],input[type=text],input[type=url],select,textarea{width:100%;min-height:48px;padding:10px 14px;background:var(--surface);color:var(--text);border:1px solid var(--line-ui);border-radius:var(--r-btn);font:inherit}
.section--alt input,.section--alt select,.section--alt textarea{background:var(--bg)}
textarea{min-height:140px;resize:vertical}
.check{display:flex;align-items:flex-start;gap:10px;min-height:44px;font-weight:500}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--brand)}
fieldset{border:0;padding:0;margin:0}
legend{font-weight:600;margin-bottom:6px;font-size:.9375rem}
.checks{display:flex;flex-wrap:wrap;gap:4px 20px}
.err{color:var(--err);font-size:.875rem}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.newsletter{max-width:720px;margin-inline:auto;text-align:center}
.newsletter form{display:grid;gap:16px;text-align:left;margin-top:24px}
.news-row{display:grid;gap:12px}
@media (min-width:640px){.news-row{grid-template-columns:1fr auto;align-items:end}}

/* Footer */
.ftr{background:#0b121a;border-top:1px solid var(--line);padding-block:48px 32px;font-size:.9375rem}
.ftr-grid{display:grid;gap:32px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:960px){.ftr-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.ftr-brand{grid-column:1/-1}
@media (min-width:960px){.ftr-brand{grid-column:auto}}
.ftr h2{font:700 .8125rem/1.2 var(--font-body);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li a{display:inline-flex;align-items:center;min-height:36px;color:var(--text);text-decoration:none}
.ftr li a:hover{text-decoration:underline}
.ftr-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted)}
.ftr-langs{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:16px}
.ftr-langs a{color:var(--muted);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.ftr-langs a:hover{color:var(--text);text-decoration:underline}
.switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;background:none;border:0;color:var(--text);font:600 .9375rem/1 var(--font-body);cursor:pointer;padding:0}
.switch .track{position:relative;width:40px;height:24px;border-radius:12px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-ui);transition:background-color var(--dur-fast)}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--text);transition:transform var(--dur-fast) var(--ease-out)}
.switch[aria-checked="true"] .track{background:var(--brand)}
.switch[aria-checked="true"] .track::after{transform:translateX(16px);background:var(--on-brand)}

/* Long-read pages */
.prose{max-width:65ch;font-size:1.125rem;line-height:1.7}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.4em}
.breadcrumbs{font-size:.875rem;color:var(--muted);margin-bottom:16px}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.breadcrumbs li+li::before{content:"/";margin-right:6px;color:var(--line-ui)}
.breadcrumbs a{color:var(--muted)}
.page-head{padding-block:112px 32px}

/* Toast */
.toast-region{position:fixed;z-index:60;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:grid;gap:8px;pointer-events:none}
@media (min-width:960px){.toast-region{left:24px;transform:none}}
.toast{pointer-events:auto;background:var(--raised);color:var(--text);padding:12px 16px;border-radius:12px;box-shadow:0 0 0 1px var(--line);animation:toast-in var(--dur-base) var(--ease-out)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Motion: reveal start state is added by JS only, so content shows with JS off. */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important}
.motion-off .js .reveal,.motion-off .reveal{opacity:1!important;transform:none!important}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* One filled pink button per screen: the header button is an outline, except on game pages once the hero's store CTA has scrolled away. */
.hdr:not(.cta-on) .hdr-cta .btn-primary{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-ui)}
@media (hover:hover){.hdr:not(.cta-on) .hdr-cta .btn-primary:hover{background:var(--raised)}}
.container.prose{max-width:var(--container)}
.container.prose>*{max-width:65ch}
.card .media video[data-peek]{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.card .media video[data-peek].is-on{opacity:1}
.text-link svg{width:18px;height:18px;flex:none}
.card h3 a{color:var(--text);text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.media-bar{padding-inline:max(var(--gutter),calc((100% - var(--container))/2 + var(--gutter)))}
.residue>.container{width:100%}
.hero-sub{font-size:1.125rem;font-weight:600;margin:-4px 0 24px;max-width:40ch}
.newsletter .eyebrow{color:var(--brand-text)}
@media (max-width:399px){.sets{grid-template-columns:1fr}}
.socials{display:flex;flex-wrap:wrap;gap:4px 16px;margin:12px 0 0;padding:0;list-style:none}
.socials a{color:var(--text);min-height:36px;display:inline-flex;align-items:center}
.share-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block:16px}
.more{position:relative}
.more summary{list-style:none}
.more summary::-webkit-details-marker{display:none}
.more-menu{position:absolute;z-index:20;left:0;top:calc(100% + 6px);display:grid;min-width:220px;padding:8px;background:var(--raised);border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.more-menu a,.more-menu button{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--text);text-decoration:none;background:none;border:0;font:inherit;text-align:left;cursor:pointer}
.more-menu a:hover,.more-menu button:hover{background:var(--surface)}
.clip-stage{padding-block:96px 48px;background:radial-gradient(ellipse at 30% 40%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),var(--bg)}
.clip-grid{display:grid;gap:32px;align-items:center}
@media (min-width:960px){.clip-grid{grid-template-columns:400px 1fr;gap:64px}}
.clip-video{max-width:400px;width:100%;margin-inline:auto}
.clip-title{font-size:clamp(1.75rem,4vw,2.75rem)}
.clip-controls{margin-top:12px}
.corner-mark{position:absolute;right:10px;top:10px;font:700 .75rem/1 var(--font-body);background:rgba(15,23,32,.85);padding:6px 10px;border-radius:var(--r-pill)}
.answer-line{font-size:1.25rem;font-weight:600}
.reopen{font:700 clamp(1.25rem,3vw,1.75rem)/1.3 var(--font-display);margin:48px 0 16px;max-width:30ch}
.facts{display:grid;gap:0;margin:0;max-width:880px}
.fact{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.fact dt{color:var(--muted);font-weight:600;font-size:.9375rem}
.fact dd{margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.copy-btn{flex:none;background:transparent}
@media (max-width:539px){.fact{grid-template-columns:1fr;gap:2px}}
.asset-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:880px}
.asset{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;background:var(--bg);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.section:not(.section--alt) .asset{background:var(--surface)}
.asset-name{font-weight:600;flex:1;min-width:200px}
.angles{padding-left:1.25em;display:grid;gap:12px;font-size:1.125rem}
.head-split{align-items:center}
.lede{font-size:1.125rem;max-width:50ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips .chip{min-height:44px;padding-inline:16px;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-ui)}
.chips .chip.is-selected{background:var(--text);color:var(--bg);box-shadow:none}
.featured{display:grid}
@media (min-width:960px){.featured{grid-template-columns:3fr 2fr}.featured .media{height:100%;aspect-ratio:auto;min-height:320px}}
.featured h2{font-size:clamp(1.5rem,3vw,2rem)}
.rss-line{margin-top:32px}
.post-title{max-width:22ch}
.before-after{margin-top:24px}
.before-after figure{margin:0}
.post-layout{display:grid;gap:32px;padding-block:32px 64px}
@media (min-width:1100px){.post-layout{grid-template-columns:220px 1fr}}
.toc{position:sticky;top:88px;align-self:start;font-size:.9375rem}
.toc ol{padding-left:1.1em;margin:0;display:grid;gap:8px}
.next-q{font:700 1.375rem/1.35 var(--font-display)}
.product-card{display:grid}
@media (min-width:768px){.product-card{grid-template-columns:2fr 3fr;align-items:center}}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface);color:var(--text);text-decoration:none;font-weight:600;box-shadow:inset 0 0 0 1px var(--line-ui)}
.tabs a:hover{background:var(--raised)}
.notice{margin-top:16px;padding:12px 16px;border-radius:12px;background:var(--surface);font-weight:600}
.notice--ok{box-shadow:inset 3px 0 0 var(--ok)}
.notice--err{box-shadow:inset 3px 0 0 var(--err)}
.form{display:grid;gap:16px;max-width:560px}
.h3{font-size:1.25rem}
.team{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.team-photo{margin:0}
.about-line{max-width:20ch}
.t-year{font:700 1rem/1.4 var(--font-display);color:var(--accent)}
.legal{max-width:70ch}
.legal code{font-size:.9em;background:var(--surface);padding:1px 6px;border-radius:4px}
.system{min-height:60vh}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.board{width:100%;min-width:560px;border-collapse:collapse;font-size:.9375rem}
.board th,.board td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}
.board th{color:var(--muted);font-weight:600}
.lightbox{padding:0;border:0;background:transparent;max-width:min(1200px,96vw);max-height:92vh;overflow:visible}
.lightbox::backdrop{background:rgba(5,10,15,.85)}
.lightbox[open]{animation:lb-in var(--dur-base) var(--ease-out)}
@keyframes lb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lightbox figure{margin:0}
.lightbox img{max-height:84vh;width:auto;border-radius:12px}
.lightbox figcaption{color:var(--text);text-align:center;margin-top:8px;font-size:.875rem}
.lightbox .lb-prev,.lightbox .lb-next,.lightbox .lb-close{position:absolute;font-size:1.75rem;line-height:1}
.lightbox .lb-prev{left:8px;top:50%}.lightbox .lb-next{right:8px;top:50%}.lightbox .lb-close{right:8px;top:8px}
[aria-busy="true"]{cursor:progress;opacity:.85}
.trailer .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--brand);color:var(--on-brand)}
.play-big svg{width:28px;height:28px;margin-left:4px}
.video-frame:has(.play-big) img{filter:brightness(.7)}
.form .btn{justify-self:start}
.req{color:var(--err);font-weight:700}
.logo{gap:.28em}
.chips-row{display:flex;flex-wrap:wrap;gap:6px}
.age-chip{box-shadow:inset 0 0 0 1px var(--line-ui);color:var(--text)}
/* Labels in the card foot pass clicks through to the card's link; only real links and buttons there catch them. */
.card .card-foot{pointer-events:none}
.card a.card-foot,.card .card-foot a,.card .card-foot button,.card .card-foot details{pointer-events:auto}
.sample-banner{margin-top:88px;margin-bottom:-72px;box-shadow:inset 3px 0 0 var(--warn)}
.no-thumb{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--raised);color:var(--accent);font-size:.875rem}
.no-thumb svg{width:48px;height:48px}
.no-thumb span{color:var(--muted)}

/* Cover-art hero: the art keeps its baked-in logo, so it sits beside the text instead of behind it. */
.hero--cover{min-height:auto;flex-direction:column;align-items:stretch;background:var(--bg)}
.hero--cover::after{display:none}
.hero--cover .hero-media{position:relative;inset:auto;z-index:0;margin:88px var(--gutter) 0;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.hero--cover .hero-body{padding-block:32px 72px}
.hero--cover .media-bar{position:static;padding-bottom:16px}
@media (min-width:960px){
  .hero--cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);min-height:min(80vh,760px)}
  .hero--cover .hero-media{grid-column:2;grid-row:1;margin:96px 0 32px}
  .hero--cover .hero-body{grid-column:1;grid-row:1;padding-block:120px 64px}
  .hero--cover .hero-body .container{padding-inline:0 32px}
  .hero--cover .media-bar{grid-column:1 / -1;padding-inline:0}
  .hero--cover h1{font-size:clamp(2.5rem,4.6vw,4rem)}
}
.hero--cover .media-bar{display:none}
/* Heroes widened on the left so the headline sits on the extension; keep the subject in view when cropped. */
.hero-media .fx-right{object-position:60% 50%}
/* Loops sit exactly over their poster inside the box (cards, trigger frame, heroes), never below it. */
.video-frame,.card .media{position:relative;overflow:hidden}
.video-frame picture,.card .media picture,.hero-media picture{display:block;width:100%;height:100%}
.video-frame img{width:100%;height:100%;object-fit:cover}
.video-frame video,.card .media video,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Text-only trigger (no clip yet) and a residue screen without a loop. */
@media (min-width:960px){.trigger--text{grid-template-columns:1fr}}
.trigger--text h2{max-width:24ch}
.residue--plain{min-height:auto;background:var(--surface)}
/* Placeholders stay out of the public page; ?slots=1 (Development) shows them for review. */
html:not(.show-slots) .slot{display:none}
html:not(.show-slots) .slot-box>span{display:none}
/* Official wordmark (Bitcrusher, #00D4E9) from the Biswa Games logo spec, used as artwork, never re-typeset. */
.logo picture{display:block}
.logo img{display:block;height:22px;width:auto}
@media (min-width:960px){.logo img{height:24px}}
.site-footer .logo img,footer .logo img{height:26px}
.award-photo{margin:0 0 32px;max-width:720px}
.award-photo img{width:100%;height:auto;border-radius:var(--r-card)}
.award-photo figcaption{margin-top:8px}
/* Shareable clip pages */
.moment-title{font-size:clamp(1.5rem,3.5vw,2.25rem);max-width:32ch;margin:8px 0 20px}
.moment-video{max-width:960px}
.moment-actions{margin:16px 0 24px;align-items:center}
#clips-asked .card .share-row{margin-top:8px}
/* Coming-soon badge: over the home tile image and beside the game name in the hero. */
.card .media .soon-badge{position:absolute;top:12px;left:12px;z-index:2}
.soon-badge{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--brand);color:#10151c;font:800 .75rem/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.soon-badge--inline{margin-left:10px;vertical-align:middle;letter-spacing:.06em}
/* About timeline: a milestone track (horizontal from 768px, a vertical rail on phones). */
.timeline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:18px}
.tl-item{position:relative;padding-left:36px}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--accent),var(--brand))}
.tl-dot{position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--accent);box-shadow:0 0 0 4px rgba(63,169,245,.15)}
.tl-item--award .tl-dot{border-color:var(--warn);box-shadow:0 0 0 4px rgba(255,176,32,.18)}
.tl-item--soon .tl-dot{border-style:dashed;border-color:var(--brand)}
.tl-year{display:block;font:800 1.75rem/1 var(--font-display);color:var(--text);letter-spacing:-.02em;margin-bottom:10px}
.tl-item--soon .tl-year{color:var(--brand-text)}
.tl-card{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:10px;color:var(--text);text-decoration:none;transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast)}
a.tl-card:hover,a.tl-card:focus-visible{transform:translateY(-2px);border-color:var(--line-ui)}
.tl-media{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--raised)}
.tl-media img{width:100%;height:100%;object-fit:cover;display:block}
.tl-media--mark{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1d3347,#0f1720)}
.tl-media--mark img{width:78%;height:auto;object-fit:contain}
.tl-body{display:grid;gap:4px}
.tl-body b{font:700 1rem/1.3 var(--font-display)}
.tl-meta{font-size:.8125rem;color:var(--muted)}
@media (min-width:768px){
  .timeline{grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:16px;padding-top:34px;padding-bottom:6px;overflow-x:auto;scrollbar-width:thin}
  .timeline::before{left:0;right:0;top:12px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--accent),var(--warn) 45%,var(--brand))}
  .tl-item{padding-left:0;display:flex;flex-direction:column}
  .tl-dot{left:0;top:-30px}
  .tl-card{grid-template-columns:1fr;align-content:start;padding:0;overflow:hidden;flex:1}
  .tl-media{aspect-ratio:4/3;border-radius:0}
  .tl-body{padding:12px 14px 16px}
}

.about-sub{font-size:1.125rem;color:var(--muted);margin-top:12px;max-width:52ch}

/* Portrait phones crop the widened heroes hard: bias toward the subject (CC boxer weaves across x 45-84%). */
@media (max-width:767px){.hero-media .fx-right{object-position:66% 50%}}

.post-hero{max-width:960px;margin-top:8px}

@media (min-width:1100px){.post-layout--single{grid-template-columns:1fr}}
.post-layout--single .prose{margin-inline:auto}
.post-hero{margin-inline:auto}

/* Japanese and Korean headlines: wrap at phrase boundaries, not mid-word. */
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3{word-break:auto-phrase}
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3{word-break:keep-all}

/* Cards with a share row: let the More menu extend past the card (the media keeps its own rounded clip). */
.card:has(.share-row){overflow:visible}
.card:has(.share-row) .media{border-radius:var(--r-card) var(--r-card) 0 0}
.share-row .more[open]{z-index:30}
/* Near the right edge of the page, open the menu leftwards. */
.card .share-row .more-menu{left:auto;right:0}
/* ---- Home, matched to Concept_Mockups_v2/01_Home ---- */
.hero-features{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.hero-features li{display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--text)}
.hero-features svg{width:22px;height:22px;flex:none;color:var(--text);opacity:.9}
.section-aside{max-width:36ch;margin:0;text-align:right}
@media (max-width:767px){.section-aside{text-align:left}}
.card .media .tile-stage{position:absolute;left:12px;bottom:12px;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.35);background:rgba(15,23,32,.82)}
.meta-line--icon svg{width:18px;height:18px;flex:none}
.beat-grid{display:grid;gap:20px}
@media (min-width:960px){.beat-grid{grid-template-columns:1fr 1fr}}
.beat-card{position:relative;isolation:isolate;overflow:hidden;min-height:240px;display:flex;align-items:stretch;border-radius:var(--r-card);background:var(--surface);box-shadow:0 0 0 1px var(--line);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.beat-card:hover,.beat-card:focus-within{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-ui)}
.beat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:-2}
.beat-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,23,32,.97) 0%,rgba(15,23,32,.9) 38%,rgba(15,23,32,.25) 75%,rgba(15,23,32,.1) 100%)}
.beat-body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px 24px;max-width:62%}
@media (max-width:560px){.beat-body{max-width:100%}.beat-card::before{background:linear-gradient(0deg,rgba(15,23,32,.97) 35%,rgba(15,23,32,.35))}.beat-card{min-height:300px;align-items:flex-end}}
.beat-body h3{font-size:1.375rem;line-height:1.2;margin:0}
.beat-body h3 a{color:var(--text);text-decoration:none}
.beat-sum{color:var(--muted);margin:0;font-size:.9375rem;line-height:1.5}
.beat-body .btn{margin-top:auto;pointer-events:none}
.beat-play{position:absolute;right:22%;top:50%;transform:translate(50%,-50%);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#0f1720;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.beat-play svg{width:24px;height:24px;margin-left:3px}
@media (max-width:560px){.beat-play{right:50%;top:34%}}
.news-banner{position:relative;isolation:isolate;overflow:hidden;max-width:none;padding:44px 24px;border-radius:var(--r-card);box-shadow:0 0 0 1px var(--line);background:#152230}
.news-banner::before{content:"";position:absolute;inset:0;z-index:-2;background:url("/media/beyond-putt/shot2.webp") center/cover no-repeat;opacity:.35;filter:saturate(1.1)}
.news-banner::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(15,23,32,.55),rgba(15,23,32,.92) 75%)}
.news-banner form{max-width:640px;margin-inline:auto}
.news-sub{color:var(--muted);margin:8px auto 0;max-width:52ch}
.ftr-tagline{color:var(--muted);margin:12px 0 16px;max-width:34ch}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.social-btn{display:grid!important;place-items:center;width:40px;height:40px;min-height:40px!important;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.social-btn:hover{background:var(--raised);text-decoration:none!important}
.social-btn svg{width:20px;height:20px}
/* Latest cards: the image sits on the right and fades in, so text never sits on the image's own lettering. */
.beat-bg{left:auto;width:62%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.beat-card::before{background:linear-gradient(90deg,rgba(21,31,43,1) 0%,rgba(21,31,43,.85) 42%,rgba(21,31,43,0) 70%)}
@media (max-width:560px){.beat-bg{width:100%;-webkit-mask-image:none;mask-image:none}}
/* Newsletter banner: one clean line (email + button); game picks and the age check stay, smaller. */
.news-banner .news-row{grid-template-columns:1fr auto}
.news-banner .news-row .field{gap:0}
.news-banner input[type=email]{min-height:48px}
.news-banner fieldset legend,.news-banner .check{font-size:.875rem}
.news-banner::before{opacity:.5}


/* ---- Colour and depth pass (matched to Concept_Mockups_v2): fewer flat panels, livelier images ---- */
:root{--mint:#3ee6b0;--glow-pink:rgba(255,51,85,.14);--glow-blue:rgba(63,169,245,.10)}
body{background:
  radial-gradient(1100px 520px at 88% 0%,var(--glow-pink),transparent 62%),
  radial-gradient(900px 600px at -8% 38%,var(--glow-blue),transparent 60%),
  radial-gradient(1000px 600px at 105% 78%,rgba(255,51,85,.08),transparent 60%),
  linear-gradient(180deg,#0f1823 0%,#0c141d 100%);background-color:#0e1620}
.section--alt{background:linear-gradient(180deg,rgba(27,38,51,.75),rgba(18,27,38,.75))}
/* Images: richer colour and contrast, as in the concept renders */
.media img,.media video,.hero-media img,.hero-media video,.beat-bg,.tl-media img,.shots img{filter:saturate(1.22) contrast(1.08) brightness(1.03)}
/* Cards: gradient surface with a soft edge highlight instead of a flat panel */
.card,.beat-card,.tl-card{background:linear-gradient(180deg,#22313f 0%,#17212d 100%);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 12px 32px rgba(0,0,0,.35)}
.card .card-body{background:transparent}
@media (hover:hover){.card--lift:hover,.beat-card:hover{box-shadow:0 0 0 1px rgba(255,51,85,.55),0 18px 44px rgba(0,0,0,.5),0 0 32px rgba(255,51,85,.18)}}
/* Status pills filled with colour */
.chip--accent{background:var(--accent);color:#0c141d;box-shadow:none;font-weight:700}
.card [data-game] .chip--accent,.card .chip--accent{background:var(--accent);color:#0c141d}
.tile-stage{background:var(--mint)!important;color:#0c141d!important}
.chip{background:rgba(255,255,255,.06)}
/* Brand pink carries the links and section labels */
.text-link{color:var(--brand-text)}
.section .section-head .eyebrow{color:#eaf0f6;letter-spacing:.24em}
/* Newsletter banner: let the image show */
.news-banner::before{opacity:.75;filter:saturate(1.25) contrast(1.05)}
.news-banner::after{background:radial-gradient(ellipse at center,rgba(15,23,32,.45),rgba(15,23,32,.85) 78%)}
/* Hero: lighter scrim so the scene stays vivid on the right */
.hero::after{background:linear-gradient(to top,rgba(12,20,29,.85) 0%,rgba(12,20,29,.25) 20%,rgba(12,20,29,0) 40%),linear-gradient(to right,rgba(12,20,29,.8) 0%,rgba(12,20,29,.45) 30%,rgba(12,20,29,0) 55%)}
/* Footer: deeper base with a faint glow */
.ftr{background:radial-gradient(800px 300px at 15% 0%,rgba(63,169,245,.07),transparent 70%),#0a1118}

/* Tighter rhythm between home sections, as in the concept (no large empty dark bands). */
.section{padding-block:44px}
@media (min-width:960px){.section{padding-block:52px}}
#games + .section,.section + #updates{padding-top:16px}

.chip.chip--accent{background:var(--accent);color:#0c141d;box-shadow:none}

/* ---- Home games: 3D carousel ---- */
.games-car{position:relative;isolation:isolate;overflow:hidden}
.car{position:relative}
.car-amb{position:absolute;inset:-160px -10vw -80px;z-index:-1;pointer-events:none}
.car-amb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(48px) saturate(1.6) brightness(.75);transform:scale(1.15);transition:opacity .8s var(--ease-out)}
.car-amb img.is-on{opacity:.55}
.car-amb::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(14,22,32,.15),rgba(14,22,32,.9) 75%),linear-gradient(180deg,#0e1620 0%,transparent 18%,transparent 82%,#0e1620 100%)}
.car-track{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:960px){.car-track{grid-template-columns:repeat(4,minmax(0,1fr))}}
.car-card{position:relative;display:block;aspect-ratio:4/5;border-radius:20px;overflow:hidden;color:var(--text);text-decoration:none;background:#15202b;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 60px rgba(0,0,0,.55)}
.car-card picture,.car-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.22) contrast(1.08)}
.car-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,24,0) 35%,rgba(10,16,24,.65) 62%,rgba(10,16,24,.96) 100%)}
.car-stage{position:absolute;left:16px;top:16px}
.car-info{position:absolute;left:0;right:0;bottom:0;display:grid;gap:8px;padding:20px}
.car-name{font:800 1.5rem/1.1 var(--font-display);letter-spacing:-.01em}
.car-line{font-weight:600;line-height:1.35;color:#e6eef6}
.car-meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:.8125rem;color:var(--muted)}
.car-headset{display:inline-flex;align-items:center;gap:6px}
.car-headset svg{width:16px;height:16px}
.car-cta{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-weight:700;color:var(--brand-text)}
.car-cta svg{width:16px;height:16px}
.car-controls{display:none}
.js .car.is-ready .car-track{display:block;position:relative;height:clamp(440px,62vw,600px);perspective:1400px;transform-style:preserve-3d}
.js .car.is-ready .car-slide{position:absolute;left:50%;top:0;width:clamp(260px,34vw,400px);transform-style:preserve-3d;transition:transform .7s var(--ease-out),opacity .7s var(--ease-out),filter .7s var(--ease-out);will-change:transform}
.js .car.is-ready .car-slide[data-pos="0"]{transform:translateX(-50%) translateZ(0) rotateY(0);z-index:5;opacity:1}
.js .car.is-ready .car-slide[data-pos="1"]{transform:translateX(18%) translateZ(-220px) rotateY(-38deg);z-index:4;opacity:.9;filter:brightness(.7)}
.js .car.is-ready .car-slide[data-pos="-1"]{transform:translateX(-118%) translateZ(-220px) rotateY(38deg);z-index:4;opacity:.9;filter:brightness(.7)}
.js .car.is-ready .car-slide[data-pos="2"],.js .car.is-ready .car-slide[data-pos="-2"]{transform:translateX(-50%) translateZ(-520px) rotateY(0);z-index:1;opacity:.35;filter:brightness(.5) blur(2px)}
.js .car.is-ready .car-slide:not(.is-active) .car-line,.js .car.is-ready .car-slide:not(.is-active) .car-meta,.js .car.is-ready .car-slide:not(.is-active) .car-cta{opacity:0}
.js .car.is-ready .car-slide:not(.is-active){cursor:pointer}
.js .car.is-ready .car-slide.is-active .car-card{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 80px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--accent) 35%,transparent)}
.js .car.is-ready .car-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.car-controls .icon-btn{width:48px;height:48px;font-size:1.75rem;line-height:1;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.car-dots{display:flex;gap:8px}
.car-dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer}
.car-dot[aria-current="true"]{width:28px;border-radius:5px;background:var(--brand)}
@media (max-width:640px){
  .js .car.is-ready .car-slide{width:68vw}
  .js .car.is-ready .car-slide[data-pos="1"]{transform:translateX(8%) translateZ(-260px) rotateY(-30deg)}
  .js .car.is-ready .car-slide[data-pos="-1"]{transform:translateX(-108%) translateZ(-260px) rotateY(30deg)}
  .js .car.is-ready .car-track{height:calc(68vw * 1.25 + 8px)}
}
@media (prefers-reduced-motion:reduce){.js .car.is-ready .car-slide,.car-amb img{transition:none}}
.motion-off .car.is-ready .car-slide,.motion-off .car-amb img{transition:none}
/* Carousel: fit the track to the card height; stronger colour wash from the active game. */
.js .car.is-ready .car-track{height:calc(clamp(260px,34vw,400px) * 1.25 + 24px)}
@media (max-width:640px){.js .car.is-ready .car-track{height:calc(68vw * 1.25 + 12px)}}
.car-amb img.is-on{opacity:.85}
.car-amb img{filter:blur(56px) saturate(1.8) brightness(.85)}
.car-amb::after{background:radial-gradient(ellipse at 50% 50%,rgba(14,22,32,0),rgba(14,22,32,.78) 80%),linear-gradient(180deg,#0e1620 0%,transparent 22%,transparent 80%,#0e1620 100%)}
/* Carousel: centre-card loop, soft side cards (no hard edges), pause button */
.car-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease-out);filter:saturate(1.2) contrast(1.06)}
.car-slide.is-playing .car-video{opacity:1}
.js .car.is-ready .car-slide:not(.is-active) .car-card{box-shadow:0 24px 60px rgba(0,0,0,.45)}
.js .car.is-ready .car-slide[data-pos="-1"] .car-card{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);mask-image:linear-gradient(90deg,transparent 0%,#000 45%)}
.js .car.is-ready .car-slide[data-pos="1"] .car-card{-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 45%);mask-image:linear-gradient(270deg,transparent 0%,#000 45%)}
.js .car.is-ready .car-slide[data-pos="2"],.js .car.is-ready .car-slide[data-pos="-2"]{opacity:0;pointer-events:none}
.car-amb{inset:-200px -20vw -120px}
.car-pause{width:40px!important;height:40px!important}
.car-pause svg{width:18px;height:18px}
.games-car{padding-top:32px}

/* ---- Carousel v3: landscape cards, flat neighbours, no colour wash (overrides the 3D rules above) ---- */
.car-amb{display:none}
.car-card{aspect-ratio:16/9;border-radius:18px}
.car-track{grid-template-columns:repeat(2,minmax(0,1fr))}
.js .car.is-ready .car-track{perspective:none;transform-style:flat;height:calc(min(62vw,880px) * 9 / 16 + 8px)}
.js .car.is-ready .car-slide{width:min(62vw,880px);transform-style:flat;filter:none;transition:transform .6s var(--ease-out),opacity .6s var(--ease-out)}
.js .car.is-ready .car-slide .car-card{-webkit-mask-image:none!important;mask-image:none!important}
.js .car.is-ready .car-slide[data-pos="0"]{transform:translateX(-50%) scale(1);opacity:1;z-index:5;filter:none}
.js .car.is-ready .car-slide[data-pos="1"]{transform:translateX(42%) scale(.74);opacity:.5;z-index:3;filter:none}
.js .car.is-ready .car-slide[data-pos="-1"]{transform:translateX(-142%) scale(.74);opacity:.5;z-index:3;filter:none}
.js .car.is-ready .car-slide[data-pos="2"],.js .car.is-ready .car-slide[data-pos="-2"]{transform:translateX(-50%) scale(.6);opacity:0;z-index:1;pointer-events:none;filter:none}
.js .car.is-ready .car-slide:not(.is-active):hover{opacity:.75}
.js .car.is-ready .car-slide.is-active .car-card{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 28px 70px rgba(0,0,0,.55)}
.js .car.is-ready .car-slide:not(.is-active) .car-name{font-size:1.25rem}
.car-info{padding:24px 28px;max-width:70%}
.car-name{font-size:clamp(1.5rem,2.6vw,2.25rem)}
.car-line{font-size:1.0625rem}
.car-shade{background:linear-gradient(90deg,rgba(10,16,24,.85) 0%,rgba(10,16,24,.45) 45%,rgba(10,16,24,0) 70%),linear-gradient(0deg,rgba(10,16,24,.75) 0%,rgba(10,16,24,0) 55%)}
.games-car{overflow:hidden}
@media (max-width:760px){
  .js .car.is-ready .car-slide{width:88vw}
  .js .car.is-ready .car-track{height:calc(88vw * 9 / 16 + 8px)}
  .js .car.is-ready .car-slide[data-pos="1"]{transform:translateX(52%) scale(.8)}
  .js .car.is-ready .car-slide[data-pos="-1"]{transform:translateX(-152%) scale(.8)}
  .car-info{max-width:100%;padding:16px 18px;gap:4px}
  .car-meta{display:none}
}
/* Home hero panels follow the carousel; non-lead panels use an h2 styled like the h1. */
.hero .hero-h{font-size:clamp(2.5rem,7vw,4.5rem);max-width:12ch;margin:0 0 16px;line-height:1.05}
.hf-num{font:800 1.125rem/1 var(--font-display);color:var(--accent);margin-right:2px}
.hero--home{animation:hero-in .45s var(--ease-out)}
@keyframes hero-in{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero--home{animation:none}}