/* =========================================================
   ps5.alternative.to — PlayStation 5 storefront UI
   Single committed dark theme: the subject is a dark product UI.
   ========================================================= */

:root{
  /* ground + surfaces */
  --bg:        #060911;
  --bg-2:      #0b1020;
  --surface:   rgba(255,255,255,.055);
  --surface-2: rgba(255,255,255,.09);
  --plate:     #121829;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.20);

  /* ink — blue-biased neutrals, not flat grey */
  --ink:    #ffffff;
  --ink-2:  #a8b3c4;
  --ink-3:  #6f7d92;

  /* PlayStation blue */
  --ps:     #0070d1;
  --ps-lt:  #4fa8ff;

  /* semantic, kept apart from the accent */
  --ok:   #43d675;
  --warn: #ffb224;
  --bad:  #ff4d55;

  /* Buddy */
  --buddy: #1a67fd;

  --r:    10px;
  --r-lg: 16px;
  --ease: cubic-bezier(.2,.65,.3,1);

  --gut: clamp(18px, 4.5vw, 64px);
  --maxw: 1480px;
  --ribbon-h: 60px;

  --f-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--ribbon-h) + 20px);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-ui);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--ps-lt); outline-offset:3px; border-radius:6px; }
::selection{ background:rgba(0,112,209,.55); color:#fff; }

.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* =========================================================
   Ambient ground — the PS5 "wallpaper glow"
   ========================================================= */
.amb{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:radial-gradient(120% 80% at 50% -15%, #16294a 0%, #0a1326 45%, var(--bg) 80%); }
.amb span{ position:absolute; border-radius:50%; filter:blur(100px); }
.amb .a1{ width:60vw; height:60vw; left:-16vw; top:-22vw; background:radial-gradient(circle, rgba(0,112,209,.46), transparent 66%); }
.amb .a2{ width:52vw; height:52vw; right:-18vw; top:-6vw; background:radial-gradient(circle, rgba(94,54,200,.34), transparent 66%); }

body > *:not(.amb){ position:relative; z-index:1; }

/* =========================================================
   Ribbon — PS5 function row
   ========================================================= */
.ribbon{
  position:sticky; top:0; z-index:60; height:var(--ribbon-h);
  background:linear-gradient(to bottom, rgba(6,9,17,.95), rgba(6,9,17,.62) 72%, transparent);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
}
.ribbon-in{
  max-width:var(--maxw); margin:0 auto; height:100%;
  padding-inline:var(--gut);
  display:flex; align-items:center; gap:clamp(10px,2vw,26px);
}

.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; flex:none; }
.brand b{ font-size:19px; font-weight:800; letter-spacing:-.05em; }
.brand span{ font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); }

/* icon nav: labels expand on the active / hovered item, like PS5 */
.nav{ display:flex; align-items:center; gap:2px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent); }
.nav::-webkit-scrollbar{ display:none; }

.nav a{
  flex:none; display:inline-flex; align-items:center; gap:0;
  height:38px; padding:0 9px; border-radius:999px;
  text-decoration:none; color:var(--ink-3);
  border:1px solid transparent;
  transition:color .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), gap .22s var(--ease), padding .22s var(--ease);
}
.nav a svg{ width:19px; height:19px; flex:none; }
.nav a i{
  font-style:normal; font-size:13.5px; font-weight:500; white-space:nowrap;
  max-width:0; overflow:hidden; transition:max-width .28s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover i, .nav a[aria-current="page"] i{ max-width:150px; }
.nav a:hover, .nav a[aria-current="page"]{ gap:8px; padding:0 15px 0 12px; }
.nav a[aria-current="page"]{ color:var(--ink); background:var(--surface-2); border-color:var(--line-2); }

.ribbon-end{ display:flex; align-items:center; gap:12px; flex:none; }
.ribbon-fw{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.02em; }
.ribbon-fw b{ color:var(--ok); font-weight:600; }

/* Hosted on Buddy */
.buddy-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 15px; border-radius:999px;
  text-decoration:none; font-size:13px; font-weight:600; white-space:nowrap;
  color:#fff; background:rgba(26,103,253,.16);
  border:1px solid rgba(26,103,253,.5);
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.buddy-btn:hover{ background:var(--buddy); border-color:var(--buddy); transform:translateY(-1px); }
.buddy-btn svg{ width:15px; height:15px; flex:none; }
@media (max-width:900px){ .ribbon-fw{ display:none; } .buddy-btn i{ display:none; } .buddy-btn{ padding:0 11px; } }
@media (max-width:560px){ .brand span{ display:none; } }

/* =========================================================
   Hero
   ========================================================= */
.hero{ padding-block:clamp(34px,5.5vw,64px) clamp(26px,4vw,44px); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr); gap:clamp(24px,4vw,60px); align-items:end; }
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; align-items:start; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ps-lt); padding:5px 13px 5px 9px; border-radius:999px;
  background:rgba(0,112,209,.14); border:1px solid rgba(79,168,255,.32);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 9px var(--ok); }

h1{
  margin:0 0 14px; font-weight:800; letter-spacing:-.045em; line-height:.98;
  font-size:clamp(38px,6.4vw,82px); text-wrap:balance;
}
h1 em{ font-style:normal; color:var(--ps-lt); }
.lede{ margin:0 0 10px; font-size:clamp(17px,2vw,22px); font-weight:500; line-height:1.38; letter-spacing:-.015em; max-width:26ch; text-wrap:balance; }
.sub{ margin:0 0 26px; font-size:15.5px; color:var(--ink-2); max-width:56ch; }

.cta{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  height:46px; padding:0 24px; border-radius:999px;
  text-decoration:none; font-size:14.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer;
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn-1{ background:var(--ps); color:#fff; box-shadow:0 6px 22px rgba(0,112,209,.4); }
.btn-1:hover{ background:#0d82ea; transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,112,209,.5); }
.btn-2{ background:var(--surface); color:var(--ink); border-color:var(--line-2); }
.btn-2:hover{ background:var(--surface-2); transform:translateY(-2px); }
.btn svg{ width:15px; height:15px; }

/* status readout */
.readout{ display:grid; gap:8px; }
.ro{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 17px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
}
.ro-k{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.ro-v{ font-family:var(--f-mono); font-size:21px; font-weight:700; letter-spacing:-.02em; }
.ro-v.ok{ color:var(--ok); } .ro-v.bad{ color:var(--bad); } .ro-v.plain{ font-family:var(--f-ui); font-size:18px; }

/* =========================================================
   Sections + rails
   ========================================================= */
.sec{ padding-block:clamp(30px,4.5vw,52px); }
.sec-top{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:18px; }
.sec-top h2{ margin:0; font-size:clamp(20px,2.5vw,27px); font-weight:700; letter-spacing:-.03em; }
.sec-top p{ margin:4px 0 0; font-size:14.5px; color:var(--ink-2); }
.sec-top .more{ font-size:13.5px; font-weight:600; color:var(--ps-lt); text-decoration:none; white-space:nowrap; flex:none; }
.sec-top .more:hover{ text-decoration:underline; }

.rail{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:4px 0 18px; scrollbar-width:none;
  margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
}
.rail::-webkit-scrollbar{ display:none; }

/* PS Store tile */
.tile{
  flex:none; width:clamp(156px,17vw,200px); scroll-snap-align:start;
  text-decoration:none; color:var(--ink);
  border-radius:var(--r); overflow:hidden;
  background:var(--plate); border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tile:hover, .tile:focus-visible{
  transform:translateY(-6px) scale(1.025);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 22px 46px rgba(0,0,0,.6);
  outline:none;
}
.tile-art{
  aspect-ratio:3/4; position:relative; display:grid; place-items:center;
  background:var(--art, linear-gradient(150deg,#1b3a6b,#0c1830));
}
.tile-art::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.14), transparent 42%, rgba(0,0,0,.42)); }
.tile-art svg{ width:38%; height:38%; color:rgba(255,255,255,.82); position:relative; z-index:1;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.tile-pill{
  position:absolute; top:9px; left:9px; z-index:2;
  font-family:var(--f-mono); font-size:10px; font-weight:700; letter-spacing:.06em;
  padding:3px 8px; border-radius:5px; background:rgba(0,0,0,.6); color:#fff;
  backdrop-filter:blur(6px);
}
.tile-pill.ok{ color:#061; background:var(--ok); }
.tile-pill.bad{ color:#fff; background:var(--bad); }
.tile-body{ display:block; padding:11px 12px 13px; }
.tile-t{ display:block; font-size:14.5px; font-weight:600; letter-spacing:-.015em; line-height:1.22; }
.tile-s{ display:block; font-size:12px; color:var(--ink-3); margin-top:3px; }
.tile-art{ display:grid; }

/* art fields */
[data-art="blue"]   { --art:linear-gradient(150deg,#1d5fd6,#0a2050 70%); }
[data-art="violet"] { --art:linear-gradient(150deg,#6a3bd4,#1a1140 70%); }
[data-art="cyan"]   { --art:linear-gradient(150deg,#15a0c4,#062535 70%); }
[data-art="green"]  { --art:linear-gradient(150deg,#1ba265,#042417 70%); }
[data-art="amber"]  { --art:linear-gradient(150deg,#d08a12,#2e1a02 70%); }
[data-art="red"]    { --art:linear-gradient(150deg,#c7343f,#30070c 70%); }
[data-art="slate"]  { --art:linear-gradient(150deg,#51607a,#121826 70%); }

/* =========================================================
   Panels + generic content
   ========================================================= */
.panel{
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--surface); padding:clamp(18px,2.4vw,26px);
}
.grid{ display:grid; gap:12px; }
.g2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.g3{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

.card{ border-radius:var(--r); border:1px solid var(--line); background:var(--surface); padding:20px 22px;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.card:hover{ border-color:var(--line-2); background:var(--surface-2); transform:translateY(-2px); }
.card h3{ margin:0 0 7px; font-size:17px; font-weight:700; letter-spacing:-.022em; }
.card p{ margin:0; font-size:14.5px; color:var(--ink-2); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  padding:4px 10px; border-radius:6px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink-2);
}
.chip b{ color:var(--ink); font-weight:700; }

.badge{ font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid; white-space:nowrap; }
.badge.current{ color:var(--ok);    border-color:rgba(67,214,117,.42); background:rgba(67,214,117,.13); }
.badge.research{ color:var(--ps-lt); border-color:rgba(79,168,255,.42); background:rgba(79,168,255,.13); }
.badge.legacy{ color:var(--ink-3);  border-color:var(--line-2);         background:var(--surface); }
.badge.live{ color:var(--ok);       border-color:rgba(67,214,117,.42); background:rgba(67,214,117,.13); }
.badge.down{ color:var(--bad);      border-color:rgba(255,77,85,.42);  background:rgba(255,77,85,.13); }
.badge.scattered{ color:var(--warn);border-color:rgba(255,178,36,.42); background:rgba(255,178,36,.13); }

/* =========================================================
   Firmware table
   ========================================================= */
.fw{ display:grid; gap:8px; }
.fw-row{
  display:grid; grid-template-columns:minmax(118px,.9fr) 104px minmax(118px,.9fr) minmax(0,2.2fr);
  gap:clamp(12px,2vw,26px); align-items:center;
  padding:15px clamp(14px,2vw,22px); border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
  position:relative; overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.fw-row::before{ content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--ink-3); }
.fw-row.open::before{ background:var(--ok); }
.fw-row.patched::before{ background:var(--bad); }
.fw-row.rec{ background:linear-gradient(100deg, rgba(0,112,209,.18), var(--surface) 58%); border-color:rgba(79,168,255,.4); }
.fw-row:hover{ border-color:var(--line-2); transform:translateX(3px); }
.fw-v{ font-family:var(--f-mono); font-size:16.5px; font-weight:700; letter-spacing:-.02em; }
.fw-rec{ display:block; font-size:9.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ps-lt); margin-top:2px; }
.fw-st{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.fw-st .d{ width:7px; height:7px; border-radius:50%; }
.open .fw-st{ color:var(--ok); }   .open .fw-st .d{ background:var(--ok); box-shadow:0 0 8px var(--ok); }
.patched .fw-st{ color:var(--bad); } .patched .fw-st .d{ background:var(--bad); box-shadow:0 0 8px var(--bad); }
.fw-x{ font-size:14px; font-weight:600; }
.fw-e{ display:block; font-size:11.5px; color:var(--ink-3); font-weight:400; margin-top:1px; }
.fw-n{ font-size:13.5px; color:var(--ink-2); }
@media (max-width:820px){
  .fw-row{ grid-template-columns:1fr auto; gap:10px 16px; }
  .fw-n{ grid-column:1/-1; }
}

/* =========================================================
   Steps
   ========================================================= */
.steps{ list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:9px; }
.steps li{
  counter-increment:s; position:relative;
  padding:18px 22px 18px clamp(58px,6vw,70px);
  border-radius:var(--r); border:1px solid var(--line); background:var(--surface);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.steps li:hover{ border-color:var(--line-2); transform:translateX(3px); }
.steps li::before{
  content:counter(s); position:absolute; left:18px; top:17px;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--f-mono); font-size:13px; font-weight:700; color:var(--ps-lt);
  background:rgba(0,112,209,.17); border:1px solid rgba(79,168,255,.32);
}
.steps li.warn{ background:linear-gradient(100deg, rgba(255,178,36,.1), var(--surface) 55%); border-color:rgba(255,178,36,.3); }
.steps li.warn::before{ color:var(--warn); background:rgba(255,178,36,.15); border-color:rgba(255,178,36,.34); }
.steps h3{ margin:0 0 5px; font-size:16.5px; font-weight:700; letter-spacing:-.02em; }
.steps p{ margin:0; font-size:14.5px; color:var(--ink-2); }

/* payload strip */
.pay{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px; }
.pay div{ padding:15px 17px; border-radius:var(--r); background:rgba(0,0,0,.3); border:1px solid var(--line); position:relative; }
.pay .n{ position:absolute; top:14px; right:16px; font-family:var(--f-mono); font-size:11px; color:var(--ink-3); }
.pay code{ display:block; font-family:var(--f-mono); font-size:13.5px; font-weight:600; color:var(--ps-lt); margin-bottom:3px; }
.pay strong{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.pay p{ margin:0; font-size:13px; color:var(--ink-2); }

/* =========================================================
   Fixes
   ========================================================= */
.fixes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:10px; }
.fix{ border-radius:var(--r); border:1px solid var(--line); background:var(--surface); padding:18px 20px;
  position:relative; overflow:hidden; transition:border-color .25s var(--ease), transform .25s var(--ease); }
.fix:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.fix::before{ content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--ink-3); }
.fix.common::before{ background:var(--warn); }
.fix.gotcha::before{ background:var(--ps-lt); }
.fix.expected::before{ background:var(--ok); }
.fix-w{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.fix h3{ margin:0 0 9px; font-size:15.5px; font-weight:700; letter-spacing:-.015em; line-height:1.3; }
.fix p{ margin:0; font-size:14px; color:var(--ink-2); }

/* =========================================================
   Video
   ========================================================= */
.vids{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.vids:has(> :only-child){ grid-template-columns:minmax(0,640px); }
.vid{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--plate); }
.vid-frame{
  position:relative; aspect-ratio:16/9; width:100%; border:0; padding:0; margin:0;
  cursor:pointer; background:#000; display:block; overflow:hidden;
}
.vid-frame img{ width:100%; height:100%; object-fit:cover; opacity:.82; transition:opacity .25s var(--ease), transform .4s var(--ease); }
.vid-frame:hover img{ opacity:1; transform:scale(1.03); }
.vid-frame .play{
  position:absolute; inset:0; display:grid; place-items:center;
}
.vid-frame .play span{
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(0,0,0,.6); border:2px solid rgba(255,255,255,.9);
  backdrop-filter:blur(4px);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.vid-frame:hover .play span{ background:var(--ps); transform:scale(1.08); }
.vid-frame .play svg{ width:22px; height:22px; color:#fff; margin-left:3px; }
.vid-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid-meta{ padding:14px 17px 16px; }
.vid-ch{ font-size:10.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--bad); margin-bottom:6px; }
.vid-meta h3{ margin:0 0 6px; font-size:15.5px; font-weight:700; letter-spacing:-.018em; line-height:1.28; }
.vid-meta p{ margin:0; font-size:13.5px; color:var(--ink-2); }

/* =========================================================
   Timeline
   ========================================================= */
.tl{ position:relative; padding-left:26px; display:grid; gap:24px; }
.tl::before{ content:''; position:absolute; left:4px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(to bottom, var(--ps-lt), rgba(255,255,255,.12) 40%, transparent); }
.tl article{ position:relative; }
.tl article::before{ content:''; position:absolute; left:-26px; top:7px; width:9px; height:9px; border-radius:50%;
  background:var(--bg-2); border:2px solid var(--ink-3); }
.tl article:first-child::before{ background:var(--ps-lt); border-color:var(--ps-lt); box-shadow:0 0 12px rgba(79,168,255,.8); }
.tl time{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-3); }
.tl h3{ margin:5px 0 5px; font-size:17px; font-weight:700; letter-spacing:-.022em; }
.tl p{ margin:0; font-size:14.5px; color:var(--ink-2); max-width:68ch; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ display:grid; gap:8px; }
.faq details{ border-radius:var(--r); border:1px solid var(--line); background:var(--surface); overflow:hidden; }
.faq details[open]{ border-color:rgba(79,168,255,.3); background:var(--surface-2); }
.faq summary{ cursor:pointer; list-style:none; padding:16px 20px; font-size:15.5px; font-weight:600; letter-spacing:-.012em;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:''; flex:none; width:9px; height:9px; border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s var(--ease), border-color .25s var(--ease); }
.faq details[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px); border-color:var(--ps-lt); }
.faq p{ margin:0; padding:0 20px 18px; font-size:14.5px; color:var(--ink-2); max-width:76ch; }

/* =========================================================
   Footer
   ========================================================= */
.foot{ margin-top:clamp(40px,6vw,80px); border-top:1px solid var(--line); background:rgba(0,0,0,.34); }
.foot-in{ max-width:var(--maxw); margin:0 auto; padding:clamp(28px,4vw,46px) var(--gut) clamp(34px,4vw,52px);
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(22px,4vw,56px); }
@media (max-width:760px){ .foot-in{ grid-template-columns:1fr; } }
.foot-links{ display:flex; flex-wrap:wrap; gap:7px 20px; margin:14px 0 18px; }
.foot-links a{ font-size:13.5px; color:var(--ink-2); text-decoration:none; }
.foot-links a:hover{ color:var(--ink); text-decoration:underline; }
.foot small{ display:block; font-size:12.5px; color:var(--ink-3); line-height:1.58; max-width:62ch; }
.foot-buddy{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.foot-buddy p{ margin:0; font-size:13.5px; color:var(--ink-2); max-width:34ch; }
.foot-buddy .buddy-btn{ height:42px; padding:0 20px; font-size:13.5px; }

/* hint row */
.hints{ display:flex; justify-content:center; gap:24px; padding:10px var(--gut) 14px;
  font-size:11.5px; color:var(--ink-3); letter-spacing:.06em; border-top:1px solid var(--line); }
.hints span{ display:inline-flex; align-items:center; gap:7px; }
.hints svg{ width:11px; height:11px; opacity:.65; }
@media (max-width:620px){ .hints{ display:none; } }

/* =========================================================
   Game browser
   ========================================================= */
.browse{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:13px 15px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
  margin-bottom:18px;
}
.gsearch{ position:relative; flex:1 1 230px; min-width:0; }
.gsearch svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-3); pointer-events:none; }
.gsearch input{
  width:100%; height:40px; padding:0 14px 0 38px;
  border-radius:999px; border:1px solid var(--line);
  background:rgba(0,0,0,.34); color:var(--ink);
  font-family:var(--f-ui); font-size:14.5px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.gsearch input::placeholder{ color:var(--ink-3); }
.gsearch input:focus{ outline:none; border-color:var(--ps-lt); background:rgba(0,0,0,.5); }

.gfilters{ display:flex; flex-wrap:wrap; gap:6px; }
.gfilters button{
  height:34px; padding:0 14px; border-radius:999px; cursor:pointer;
  font-family:var(--f-ui); font-size:12.5px; font-weight:600; letter-spacing:.01em;
  color:var(--ink-2); background:transparent; border:1px solid var(--line);
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.gfilters button:hover{ color:var(--ink); border-color:var(--line-2); }
.gfilters button[aria-pressed="true"]{ color:#fff; background:var(--ps); border-color:var(--ps); }
.gcount{ font-family:var(--f-mono); font-size:12px; color:var(--ink-3); margin-left:auto; white-space:nowrap; }

.gamegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:13px; }
.game{
  border-radius:var(--r); overflow:hidden; background:var(--plate);
  border:1px solid var(--line); position:relative;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.game:hover{
  transform:translateY(-5px) scale(1.02);
  border-color:rgba(255,255,255,.7);
  box-shadow:0 0 0 1px rgba(255,255,255,.45), 0 18px 40px rgba(0,0,0,.6);
}
.game-art{
  aspect-ratio:3/4; position:relative; display:grid; place-items:center; overflow:hidden;
  background:var(--art, linear-gradient(150deg,#1b3a6b,#0c1830));
}
.game-art::after{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(255,255,255,.13), transparent 40%, rgba(0,0,0,.5)); }
.game-img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  transition:transform .4s var(--ease); }
.game:hover .game-img{ transform:scale(1.05); }
.game-mark{
  font-size:clamp(42px,7vw,64px); font-weight:800; letter-spacing:-.06em;
  color:rgba(255,255,255,.3); line-height:1; user-select:none;
  text-shadow:0 4px 18px rgba(0,0,0,.4);
}
.game-st{
  position:absolute; bottom:8px; right:8px; z-index:2;
  font-size:9.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  padding:3px 8px; border-radius:5px; backdrop-filter:blur(6px);
}
.st-runs{ background:rgba(67,214,117,.92); color:#04260f; }
.st-online{ background:rgba(255,178,36,.92); color:#2a1a00; }
.st-partial{ background:rgba(255,178,36,.92); color:#2a1a00; }
.st-blocked{ background:rgba(255,77,85,.94); color:#fff; }
.game-fw{
  position:absolute; bottom:8px; left:8px; z-index:2;
  font-family:var(--f-mono); font-size:10px; font-weight:600;
  padding:3px 7px; border-radius:4px; background:rgba(0,0,0,.62); color:#fff;
  backdrop-filter:blur(6px);
}
.game-body{ padding:10px 11px 12px; }
.game-t{ display:block; font-size:13.5px; font-weight:600; letter-spacing:-.012em; line-height:1.25; }
.game-y{ display:block; font-family:var(--f-mono); font-size:11px; color:var(--ink-3); margin-top:3px; }
.game-n{ display:block; font-size:11.5px; color:var(--ink-2); margin-top:6px; line-height:1.4; }

.gempty{ grid-column:1/-1; margin:0; padding:36px 20px; text-align:center; color:var(--ink-3); font-size:14.5px;
  border:1px dashed var(--line-2); border-radius:var(--r); }

/* legend */
.legend{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-size:12.5px; color:var(--ink-2); }
.legend span{ display:inline-flex; align-items:center; gap:7px; }
.legend i{ width:9px; height:9px; border-radius:3px; flex:none; }
.legend .l-runs{ background:var(--ok); }
.legend .l-online{ background:var(--warn); }
.legend .l-blocked{ background:var(--bad); }

/* install bands */
.bands{ display:grid; gap:9px; }
.band{
  display:grid; grid-template-columns:minmax(110px,.75fr) minmax(130px,.9fr) minmax(0,2.4fr);
  gap:clamp(12px,2vw,26px); align-items:center;
  padding:15px clamp(14px,2vw,22px); border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.band:hover{ border-color:var(--line-2); transform:translateX(3px); }
.band-fw{ font-family:var(--f-mono); font-size:14.5px; font-weight:700; color:var(--ps-lt); }
.band-w{ font-size:14px; font-weight:600; }
.band-h{ font-size:13.5px; color:var(--ink-2); }
@media (max-width:820px){
  .band{ grid-template-columns:1fr 1fr; gap:8px 16px; }
  .band-h{ grid-column:1/-1; }
}

.st-check{ background:rgba(255,178,36,.92); color:#2a1a00; }
.st-unreleased{ background:rgba(255,255,255,.82); color:#10151f; }
.gmore{
  display:block; width:100%; margin-top:16px; height:46px;
  border-radius:999px; cursor:pointer;
  font-family:var(--f-ui); font-size:14px; font-weight:600;
  color:var(--ink); background:var(--surface); border:1px solid var(--line-2);
  transition:background .22s var(--ease), border-color .22s var(--ease);
}
.gmore:hover{ background:var(--surface-2); border-color:rgba(255,255,255,.34); }
.legend .l-unreleased{ background:rgba(255,255,255,.8); }