/* Starfold — deep-space interface */
:root{
  --void:#05041a; --void-2:#0b0928; --glass:rgba(148,128,255,.07); --glass-2:rgba(148,128,255,.12);
  --edge:rgba(186,170,255,.18); --edge-hot:rgba(34,211,238,.55);
  --text:#ecebff; --dim:#a6a3cc; --faint:#706c9c;
  --violet:#8b5cf6; --lilac:#c084fc; --magenta:#f472b6; --cyan:#22d3ee; --ice:#e0f7ff;
  --r-lg:22px; --r-md:14px; --r-sm:10px; --rail:248px;
  --ff-display:"Sora",ui-sans-serif,system-ui,sans-serif; --ff-text:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font:400 16px/1.65 var(--ff-text);background-color:var(--void);
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 72% 9%,#fff9 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 64%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 88% 52%,#fff7 50%,transparent 51%),
    radial-gradient(1px 1px at 56% 86%,#fff5 50%,transparent 51%),radial-gradient(1.5px 1.5px at 22% 92%,#fff6 50%,transparent 51%),
    radial-gradient(900px 600px at 85% -10%,rgba(139,92,246,.28),transparent 60%),
    radial-gradient(700px 500px at -5% 45%,rgba(244,114,182,.14),transparent 60%),
    radial-gradient(800px 600px at 60% 110%,rgba(34,211,238,.12),transparent 60%);
  background-attachment:fixed;background-size:420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,auto,auto,auto}
a{color:var(--cyan);text-underline-offset:3px}
a:hover{color:var(--ice)}
svg,canvas{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.skip-link{position:fixed;left:12px;top:-60px;z-index:50;background:var(--cyan);color:#041018;padding:8px 14px;border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}

/* ---------- console rail ---------- */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);display:flex;flex-direction:column;gap:26px;padding:26px 18px;
  background:linear-gradient(180deg,rgba(20,15,56,.78),rgba(8,6,30,.82));border-right:1px solid var(--edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:20;overflow-y:auto}
.logo{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font:700 1.3rem/1 var(--ff-display);letter-spacing:.01em}
.logo svg{width:38px;height:38px;filter:drop-shadow(0 0 10px rgba(192,132,252,.45))}
.logo small{display:block;font:500 .66rem/1.4 var(--ff-text);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.rail-label{font:600 .68rem var(--ff-display);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0 0 8px 10px}
.rail-nav{display:flex;flex-direction:column;gap:2px}
.rail-nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);color:var(--dim);text-decoration:none;font-weight:600;font-size:.95rem;border:1px solid transparent}
.rail-nav a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
.rail-nav a:hover{background:var(--glass);color:var(--text)}
.rail-nav a[aria-current="page"]{background:var(--glass-2);border-color:var(--edge);color:var(--text)}
.rail-nav a[aria-current="page"]::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.rail-foot{margin-top:auto;font-size:.78rem;color:var(--faint);line-height:1.5;padding:0 10px}
.shell{margin-left:var(--rail);min-height:100vh;display:flex;flex-direction:column}
.content{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:36px 32px 56px}

/* ---------- glass + type ---------- */
.glass{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r-lg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
h1,h2,h3{font-family:var(--ff-display);line-height:1.18;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:700}
h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:600}
h3{font-size:1.1rem;font-weight:600}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 .72rem var(--ff-display);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.eyebrow::before{content:"";width:18px;height:2px;background:linear-gradient(90deg,var(--magenta),var(--cyan));border-radius:2px}
.lead{font-size:1.1rem;color:var(--dim);max-width:60ch}
.grad{background:linear-gradient(95deg,var(--lilac),var(--magenta) 45%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  font:700 .98rem var(--ff-display);color:#0a0620;text-decoration:none;background:linear-gradient(100deg,var(--lilac),var(--magenta) 50%,var(--cyan));
  background-size:180% 100%;background-position:0 0;box-shadow:0 6px 24px -8px rgba(244,114,182,.7);transition:background-position .35s,transform .15s}
.cta:hover{color:#0a0620;background-position:100% 0}
.cta:active{transform:translateY(1px)}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);
  color:var(--text);font:600 .9rem var(--ff-text);cursor:pointer;text-decoration:none}
.chip:hover{border-color:var(--edge-hot);color:var(--ice)}
.chip:disabled{opacity:.4;cursor:not-allowed}

/* ---------- home ---------- */
.launch{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:center;padding:34px;margin-bottom:34px;overflow:hidden;position:relative}
.launch .cta{margin-right:10px}
.launch-art{position:relative;aspect-ratio:1;max-width:340px;justify-self:center;width:100%}
.launch-art svg{width:100%;height:100%}
.spin{transform-origin:50% 50%;animation:spin 18s linear infinite}
.spin.slow{animation-duration:34s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 0;padding:0}
.facts li{font-size:.84rem;color:var(--dim);padding:5px 12px;border-radius:999px;border:1px solid var(--edge);background:rgba(5,4,26,.35)}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0 0 16px}
.section-head p{margin:0;color:var(--faint);font-size:.92rem}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:44px}
.tile{display:flex;flex-direction:column;overflow:hidden;color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s}
.tile:hover{border-color:var(--edge-hot);transform:translateY(-2px);color:var(--text)}
.tile:first-child{grid-column:1/-1;flex-direction:row}
.tile:first-child .tile-art{flex:0 0 56%;border-bottom:0;border-right:1px solid var(--edge)}
.tile:first-child .tile-body{justify-content:center;padding:28px 30px;gap:10px}
.tile-art{aspect-ratio:16/9;border-bottom:1px solid var(--edge);background:#0b0920}
.tile:first-child .tile-art{aspect-ratio:16/10}
.tile-art svg{width:100%;height:100%}
.tile-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.tile-body h3{margin:0;font-size:1.15rem}
.tile:first-child .tile-body h3{font-size:1.5rem}
.tile-body p{margin:0;color:var(--dim);font-size:.93rem}
.meta{font:600 .7rem var(--ff-display);letter-spacing:.14em;text-transform:uppercase;color:var(--magenta)}
.go-line{margin-top:auto;padding-top:8px;font:700 .9rem var(--ff-display);color:var(--cyan)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:step;margin-bottom:44px;padding:0;list-style:none}
.steps li{padding:22px;counter-increment:step}
.steps li::before{content:"0" counter(step);display:block;font:700 1.9rem/1 var(--ff-display);margin-bottom:12px;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.steps p{margin:0;color:var(--dim);font-size:.94rem}
.faq{padding:8px 22px;margin-bottom:12px}
.faq details{border-bottom:1px solid var(--edge);padding:14px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font:600 1rem var(--ff-display);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0;color:var(--dim)}

/* ---------- game page ---------- */
.trail{font-size:.86rem;color:var(--faint);margin:0 0 14px}
.trail a{color:var(--dim)}
.game-intro{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;margin-bottom:18px}
.game-intro h1{margin:0}
.game-intro p{margin:0;color:var(--dim)}
.deck{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px;align-items:start;margin-bottom:34px}
.screen{position:relative;padding:10px;border-radius:var(--r-lg);background:linear-gradient(140deg,rgba(192,132,252,.35),rgba(34,211,238,.25));}
.screen-inner{position:relative;border-radius:calc(var(--r-lg) - 8px);overflow:hidden;background:#06051a}
.screen canvas{width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.screen.tall .screen-inner{display:flex;justify-content:center;background:#06051a}
.screen.tall canvas{width:min(100%,calc(72vh * .75))}
.veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,4,26,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.veil[hidden]{display:none}
.veil-box{max-width:340px;text-align:center;padding:24px 26px;border-radius:var(--r-lg);background:rgba(18,13,52,.82);border:1px solid var(--edge)}
.veil-box h2{margin:0 0 8px;font-size:1.6rem}
.veil-box p{margin:0 0 18px;color:var(--dim)}
.veil-kicker{font:600 .7rem var(--ff-display)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)!important;margin:0 0 6px!important}
.console{padding:18px;display:flex;flex-direction:column;gap:14px;position:sticky;top:20px}
.readouts{display:flex;flex-wrap:wrap;gap:10px}
.readout{flex:1 1 100px;padding:10px 12px;border-radius:var(--r-md);background:rgba(5,4,26,.5);border:1px solid var(--edge)}
.readout span{display:block;font:600 .66rem var(--ff-display);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.readout b{display:block;font:700 1.3rem/1.3 var(--ff-display);color:var(--ice);font-variant-numeric:tabular-nums}
.console-keys{margin:0;font-size:.86rem;color:var(--dim);padding:10px 12px;border-radius:var(--r-md);border:1px dashed var(--edge)}
.console-btns{display:flex;flex-wrap:wrap;gap:8px}
.console-btns:empty{display:none}
.info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-bottom:34px}
.info section{padding:24px}
.info ol{margin:0;padding-left:1.3em;color:var(--dim)}
.info li{margin-bottom:8px}
.info li::marker{color:var(--cyan);font-weight:700}
.info p{color:var(--dim);margin:0 0 12px}
.specs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.specs li{font-size:.82rem;padding:4px 10px;border-radius:999px;background:rgba(5,4,26,.5);border:1px solid var(--edge);color:var(--dim)}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.more a{display:flex;gap:12px;align-items:center;padding:10px;text-decoration:none;color:var(--text)}
.more a:hover{border-color:var(--edge-hot)}
.more .mini{width:86px;flex:none;border-radius:var(--r-sm);overflow:hidden}
.more b{display:block;font-family:var(--ff-display)}
.more span{font-size:.82rem;color:var(--faint)}

/* ---------- text pages ---------- */
.doc{max-width:780px;padding:34px 38px}
.doc h1{font-size:clamp(1.8rem,3.6vw,2.5rem)}
.doc h2{font-size:1.25rem;margin-top:1.8em;color:var(--ice)}
.doc p,.doc li{color:var(--dim)}
.doc strong{color:var(--text)}
.doc code{font-size:.88em;padding:1px 6px;border-radius:6px;background:rgba(5,4,26,.6);border:1px solid var(--edge);color:var(--ice)}
.stamp{font-size:.85rem;color:var(--faint)}
.lost{text-align:center;padding:60px 30px;max-width:620px;margin:20px auto}
.lost svg{width:160px;margin:0 auto 18px}

/* ---------- footer + notice ---------- */
.base{border-top:1px solid var(--edge);padding:22px 32px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.86rem;color:var(--faint);background:rgba(5,4,26,.5)}
.base nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.base a{color:var(--dim);text-decoration:none}
.base a:hover{color:var(--ice)}
.notice{position:fixed;right:16px;bottom:16px;z-index:40;max-width:360px;display:flex;gap:12px;align-items:center;padding:12px 14px;
  border-radius:var(--r-md);background:rgba(18,13,52,.92);border:1px solid var(--edge);box-shadow:0 12px 40px -12px #000;font-size:.86rem;color:var(--dim)}
.notice[hidden]{display:none}
.notice p{margin:0}
.notice .chip{min-height:34px;flex:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .deck{grid-template-columns:1fr}
  .console{position:static;order:-1;padding:12px}
  .readout{flex-basis:90px}
  .console-keys{display:none}
}
@media (max-width:860px){
  :root{--rail:0px}
  .rail{position:sticky;top:0;inset:auto;width:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-right:0;border-bottom:1px solid var(--edge);overflow:visible}
  .logo small,.rail-label,.rail-foot,.rail-games{display:none}
  .logo svg{width:32px;height:32px}
  .rail-nav{flex-direction:row;gap:0}
  .rail-nav a{padding:7px 9px;font-size:.88rem}
  .rail-nav a::before{display:none}
  .shell{margin-left:0}
  .content{padding:22px 16px 40px}
  .launch{grid-template-columns:1fr;padding:22px}
  .launch-art{max-width:220px;grid-row:1}
  .steps,.info,.more{grid-template-columns:1fr}
  .doc{padding:24px 18px}
  .base{padding:18px 16px}
}
@media (max-width:700px){
  .bento{grid-template-columns:1fr}
  .tile:first-child{flex-direction:column}
  .tile:first-child .tile-art{flex:none;border-right:0;border-bottom:1px solid var(--edge)}
}
@media (max-width:560px){
  .tile:first-child{flex-direction:column}
  .tile:first-child .tile-art{flex:none;border-right:0;border-bottom:1px solid var(--edge)}
  .tile:first-child .tile-body{padding:16px 18px 18px}
  .tile:first-child .tile-body h3{font-size:1.25rem}
  .readouts{gap:8px}
  .readout{flex-basis:70px;padding:7px 10px}
  .readout b{font-size:1.05rem}
  .screen{padding:5px}
  .notice{left:16px;right:16px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}