:root {
  color-scheme: dark;
  --ground: #0b0c1c;
  --panel: #1b1d3a;
  --panel-2: #252850;
  --panel-3: #30346a;
  --edge: #07081a;
  --line: #3d4280;
  --text: #fff3d6;
  --muted: #a9acd6;
  --gold: #ffcd4a;
  --gold-dark: #b8791f;
  --o2: #6ff0f0;
  --pink: #f28bb5;
  --violet: #b48cf0;
  --font-ui: "Rubik", "Trebuchet MS", system-ui, sans-serif;
  --font-display: "Press Start 2P", "Courier New", monospace;
  --font-logo: var(--font-display);
  --wide: 1120px;
  --corners: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
html:lang(zh-Hans) { --font-ui: "Rubik", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; --font-logo: "Press Start 2P", "Noto Sans SC", monospace; }
html:lang(zh-Hant) { --font-ui: "Rubik", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Source Han Sans TC", sans-serif; --font-logo: "Press Start 2P", "Noto Sans TC", monospace; }
html:lang(ja) { --font-ui: "Rubik", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif; --font-logo: "DotGothic16", "Press Start 2P", monospace; }
html:lang(ko) { --font-ui: "Rubik", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Source Han Sans KR", sans-serif; --font-logo: "Press Start 2P", "Noto Sans KR", monospace; }
.cjk { --font-display: var(--font-ui); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 17px/1.6 var(--font-ui);
  color: var(--text);
  background-color: var(--ground);
  background-image:
    radial-gradient(1px 1px at 23px 41px, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 131px 97px, #73eff7 99%, transparent),
    radial-gradient(1px 1px at 187px 23px, #c9d6e8 99%, transparent),
    radial-gradient(1px 1px at 67px 173px, #ffcd75 99%, transparent),
    radial-gradient(1px 1px at 211px 151px, #ffffff 99%, transparent);
  background-size: 240px 240px;
  overflow-x: hidden;
}
a { color: var(--o2); text-underline-offset: 3px; }
a:hover { color: #b8fbfb; }
:focus-visible { outline: 3px solid var(--o2); outline-offset: 3px; }
img { max-width: 100%; }
.px, .f-heroes, .cta-heroes, .lost img { image-rendering: pixelated; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
p { text-wrap: pretty; }
.lb-open { overflow: hidden; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 8px 14px; background: var(--gold); color: #2a1a05; font-weight: 600; }
.skip:focus { top: 8px; }
.spr {
  display: inline-block; flex: none;
  width: calc(var(--w) * var(--s) * 1px);
  height: calc(var(--h) * var(--s) * 1px);
  background-repeat: no-repeat;
  background-size: calc(var(--w) * var(--n) * var(--s) * 1px) calc(var(--h) * var(--s) * 1px);
  image-rendering: pixelated;
}
.spr.anim { animation: spr-frames calc(var(--n) * .4s) steps(var(--n)) infinite; }
@keyframes spr-frames { to { background-position-x: calc(var(--w) * var(--n) * var(--s) * -1px); } }
.btn {
  font: 600 17px/1.2 var(--font-ui);
  color: var(--text); background: var(--panel-2);
  border: 0; padding: 11px 18px 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.12), inset 0 0 0 3px var(--edge);
  clip-path: var(--corners);
  transition: filter .08s, transform .08s;
}
a.btn:hover { filter: brightness(1.18); color: var(--text); }
a.btn:active { transform: translateY(2px); }
.btn-gold { background: var(--gold); color: #2a1a05; }
a.btn-gold:hover { color: #2a1a05; }
.btn-big { font-size: 20px; padding: 14px 28px 16px; }
.btn-small { font-size: 14px; padding: 7px 12px 9px; }
.btn.is-soon { filter: saturate(.55) brightness(.8); cursor: default; }
.btn small {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; background: rgba(7,8,26,.45); color: var(--text);
}
.btn-gold small { background: rgba(42,26,5,.2); color: #2a1a05; }
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,12,28,.88); backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--edge);
}
.top-in { max-width: var(--wide); margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold); text-decoration: none; font: 400 12px/1.3 var(--font-display); margin-right: auto; }
.cjk .brand { font: 700 16px/1.3 var(--font-ui); }
.brand img { image-rendering: pixelated; flex: none; }
.brand:hover { color: var(--gold); }
.nav { display: flex; gap: 18px; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--text); }
@media (max-width: 900px) { .nav { display: none; } }
.langs { position: relative; }
.langs summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: var(--panel-2); color: var(--text); font-size: 15px; font-weight: 500;
  box-shadow: inset 0 0 0 3px var(--edge); clip-path: var(--corners); white-space: nowrap;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: "▾"; color: var(--muted); font-size: 12px; }
.langs ul {
  position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 2px;
  background: var(--panel); border: 3px solid var(--edge); box-shadow: 0 12px 30px rgba(0,0,0,.5);
  max-height: 70vh; overflow: auto;
}
.langs a { display: block; padding: 7px 10px; color: var(--text); text-decoration: none; font-size: 15px; white-space: nowrap; }
.langs a:hover { background: var(--panel-2); }
.langs a[aria-current] { color: var(--gold); }
@media (max-width: 420px) { .langs ul { grid-template-columns: 1fr; } .brand span { display: none; } }
.hero {
  position: relative; overflow: hidden;
  min-height: min(90vh, 780px);
  display: grid; place-items: center;
  padding: 64px 16px 88px;
  background: var(--ground) center 30% / cover no-repeat;
  image-rendering: pixelated;
  border-bottom: 4px solid var(--edge);
}
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,12,28,.1), rgba(11,12,28,.25) 55%, var(--ground)); pointer-events: none; }
.hero-in { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; gap: 22px; max-width: 900px; }
.eyebrow {
  margin: 0; color: var(--o2); letter-spacing: .12em; text-transform: uppercase; font-size: 15px; font-weight: 600;
  text-shadow: 0 2px 0 var(--edge);
}
.cjk .eyebrow { letter-spacing: .04em; font-size: 17px; }
.logo {
  margin: 0; display: grid; line-height: 1.3;
  font: 400 clamp(30px, 8.4vw, 80px)/1.3 var(--font-logo);
  color: var(--gold);
  text-shadow: 0 .06em 0 var(--gold-dark), 0 .12em 0 var(--edge), 0 0 30px rgba(255,205,74,.25);
}
.logo span:last-child { color: var(--pink); text-shadow: 0 .06em 0 #8a3f66, 0 .12em 0 var(--edge), 0 0 30px rgba(242,139,181,.25); }
.release { margin: 0; }
.pill {
  display: inline-block; padding: 6px 14px 7px; font-weight: 600; font-size: 16px;
  background: rgba(27,29,58,.9); color: var(--text); box-shadow: inset 0 0 0 3px var(--edge); clip-path: var(--corners);
}
.stores { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.platforms { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.platforms li { font-size: 13px; font-weight: 500; color: var(--muted); padding: 2px 10px; background: rgba(11,12,28,.7); box-shadow: inset 0 0 0 2px var(--line); }
.floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.floaters > * { position: absolute; animation: bob 3.6s ease-in-out infinite; }
.floaters .spr.anim { animation: spr-frames calc(var(--n) * .4s) steps(var(--n)) infinite, bob 3.6s ease-in-out infinite; }
.f1 { left: 9%; top: 16%; }
.f2 { right: 12%; top: 58%; animation-delay: -1.2s !important; }
.f3 { right: 22%; top: 12%; animation-delay: -2s !important; }
.f4 { left: 18%; top: 52%; animation-delay: -.6s !important; }
.f5 { right: 6%; top: 24%; animation-delay: -2.8s !important; }
.f-heroes { left: 5%; bottom: 10%; width: 160px; height: 160px; }
@keyframes bob { 50% { translate: 0 -10px; } }
@media (max-width: 760px) {
  .f2, .f4 { display: none; }
  .f-heroes { width: 96px; height: 96px; left: 2%; bottom: 2%; }
  .f1 { left: 4%; top: 6%; } .f3 { right: 6%; top: 6%; } .f5 { right: 4%; top: auto; bottom: 6%; }
}
.section { max-width: var(--wide); margin: 0 auto; padding: 80px 16px 0; }
section[id] { scroll-margin-top: 60px; }
h2 {
  margin: 0 0 22px; color: var(--gold);
  font: 400 clamp(17px, 2.6vw, 24px)/1.5 var(--font-display);
  text-shadow: 0 3px 0 var(--edge);
}
.cjk h2 { font: 700 clamp(24px, 3.4vw, 34px)/1.35 var(--font-ui); }
h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; font-weight: 700; }
.lead { color: var(--muted); max-width: 70ch; margin: -8px 0 28px; font-size: 18px; }
.frame, .card {
  background: var(--panel);
  box-shadow: inset 0 0 0 4px var(--edge), inset 0 -8px 0 rgba(0,0,0,.18), inset 0 7px 0 rgba(255,255,255,.04);
  clip-path: var(--corners);
}
.card { padding: 22px 22px 20px; }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; }
.grid { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.video { padding: 4px; background: var(--edge); }
.video video, .video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 0; }
.yt { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; }
.yt::before { content: ""; position: absolute; inset: 0; background: rgba(11,12,28,.35); transition: background .15s; }
.yt:hover::before { background: rgba(11,12,28,.15); }
.yt-play {
  position: relative; width: 96px; height: 68px; background: var(--gold); clip-path: var(--corners);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.3);
}
.yt-play::after { content: ""; position: absolute; left: 39px; top: 20px; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #2a1a05; }
.yt:hover .yt-play { filter: brightness(1.12); }
.about { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.about-text p { font-size: 18px; margin: 0 0 16px; }
.story { margin: 0; padding: 26px; display: flex; gap: 20px; align-items: flex-end; }
.story blockquote { margin: 0; display: grid; gap: 10px; }
.story blockquote p {
  margin: 0; padding: 10px 14px; background: var(--panel-2); font-size: 15.5px; line-height: 1.5;
  box-shadow: inset 0 0 0 3px var(--edge); clip-path: var(--corners);
}
@media (max-width: 860px) { .about { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 480px) { .story { flex-direction: column; align-items: flex-start; padding: 20px; } }
.features { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.feat .spr { display: block; margin: calc(48px - var(--h) * var(--s) * 1px) 0 14px; }
.slimes { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.slime { text-align: center; }
.slime-art { height: 104px; display: grid; place-items: center; margin: -4px -4px 12px; background: radial-gradient(closest-side, rgba(111,240,240,.12), transparent); }
.slime h3 { font-size: 17px; }
.slime p { font-size: 14.5px; }
.slime.is-golden { background: #2c2440; box-shadow: inset 0 0 0 4px var(--gold-dark), inset 0 -8px 0 rgba(0,0,0,.18); }
.slime.is-golden h3 { color: var(--gold); }
.slime.is-golden .slime-art { background: radial-gradient(closest-side, rgba(255,205,74,.28), transparent); }
.sectors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.sector {
  position: relative; min-height: 210px; padding: 22px;
  display: flex; flex-direction: row-reverse; align-items: center; gap: 16px;
  background: var(--ground) center / cover no-repeat; image-rendering: pixelated;
  box-shadow: inset 0 0 0 4px var(--edge); clip-path: var(--corners);
}
.sector::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(11,12,28,.94) 0, rgba(11,12,28,.82) 55%, rgba(11,12,28,.2)); }
.sector > * { position: relative; }
.sector-body { flex: 1; min-width: 0; }
.sector-body p { margin: 0 0 8px; color: var(--muted); font-size: 15.5px; }
.sector h3 { font: 400 13px/1.6 var(--font-display); color: var(--gold); margin-bottom: 10px; }
.cjk .sector h3 { font: 700 19px/1.4 var(--font-ui); }
.sector .num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-right: 6px; background: var(--panel-3); color: var(--text); font: 600 14px/1 var(--font-ui); vertical-align: 2px; }
.boss-line { color: var(--text) !important; }
.boss-line b { color: var(--pink); font-weight: 600; }
.sector.deep::before { background: linear-gradient(to right, rgba(11,12,28,.96), rgba(11,12,28,.7)); }
@media (max-width: 560px) {
  .sector { flex-direction: column; align-items: stretch; }
  .sector-art { align-self: flex-end; margin: -6px -4px -34px 0; }
}
.shots { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.shots figure { margin: 0; }
.shots a[data-shot] { display: block; padding: 4px; background: var(--edge); clip-path: var(--corners); }
.shots img { display: block; width: 100%; height: auto; transition: filter .15s; }
.shots a[data-shot]:hover img { filter: brightness(1.12); }
.shots figcaption { margin-top: 8px; color: var(--muted); font-size: 14.5px; }
.facts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.facts li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--panel); box-shadow: inset 0 0 0 3px var(--edge); clip-path: var(--corners); font-weight: 500; }
.cta { margin-top: 96px; text-align: center; padding: 44px 24px 48px; display: grid; justify-items: center; gap: 4px; }
.section.cta { max-width: calc(var(--wide) - 32px); }
.cta-heroes { width: 128px; height: 128px; margin-bottom: 8px; }
.cta p { color: var(--muted); max-width: 56ch; margin: 0 0 20px; font-size: 18px; }
.foot { margin-top: 96px; padding: 36px 16px 44px; border-top: 4px solid var(--edge); background: #08091a; text-align: center; display: grid; gap: 18px; justify-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; }
.foot-links a { color: var(--text); font-weight: 500; }
.foot-langs { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; margin: 0; padding: 0; list-style: none; max-width: 900px; }
.foot-langs a { color: var(--muted); font-size: 14px; text-decoration: none; }
.foot-langs a:hover, .foot-langs a[aria-current] { color: var(--gold); }
.copy { margin: 0; color: var(--muted); font-size: 14px; }
.press { max-width: var(--wide); margin: 0 auto; padding: 0 16px; }
.page-title { margin: 56px 0 14px; color: var(--gold); font: 400 clamp(22px, 4vw, 34px)/1.4 var(--font-display); text-shadow: 0 4px 0 var(--edge); }
.cjk .page-title { font: 700 clamp(30px, 5vw, 42px)/1.3 var(--font-ui); }
.press .lead { margin: 0 0 32px; }
.press .section { padding: 64px 0 0; }
.press .section p { max-width: 75ch; }
.factsheet { padding: 26px 28px 20px; }
.factsheet h2 { margin-bottom: 16px; }
.factsheet dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 0; }
.factsheet dt { color: var(--muted); font-weight: 500; }
.factsheet dd { margin: 0; }
@media (max-width: 560px) { .factsheet dl { grid-template-columns: 1fr; gap: 2px; } .factsheet dd { margin-bottom: 10px; } }
.bullets { margin: 0; padding-left: 22px; display: grid; gap: 10px; max-width: 80ch; list-style: square; }
.bullets li::marker { color: var(--gold); }
.downloads { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.logos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.logos li { padding: 22px; display: grid; gap: 14px; justify-items: center; text-align: center; background: var(--panel-2); }
.logos img { max-height: 120px; width: auto; }
.lost { text-align: center; padding: 64px 16px 0; }
.lost img { width: 128px; height: 128px; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(5,6,16,.94); padding: 16px; }
.lightbox figure { margin: 0; display: grid; gap: 10px; justify-items: center; }
.lightbox img { max-width: min(94vw, 1920px); max-height: 82vh; width: auto; height: auto; box-shadow: 0 0 0 4px var(--edge); }
.lightbox figcaption { color: var(--muted); font-size: 15px; }
.lb-btn {
  position: fixed; width: 48px; height: 48px; display: grid; place-items: center;
  font: 600 28px/1 var(--font-ui); color: var(--text); background: var(--panel-2); border: 0; cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.35), inset 0 0 0 3px var(--edge); clip-path: var(--corners);
}
.lb-btn:hover { filter: brightness(1.2); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: calc(50% - 24px); }
.lb-next { right: 16px; top: calc(50% - 24px); }
@media (max-width: 600px) { .lb-prev, .lb-next { top: auto; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spr.anim, .floaters > *, .floaters .spr.anim { animation: none; }
}