@font-face { font-family: "Jersey 10"; src: url("Jersey10-Regular.ttf") format("truetype"); font-display: swap; }
:root {
  --bg: #0b0e14; --surface: #131822; --raised: #1a2130; --line: #27303f;
  --ink: #eceff5; --dim: #a2acbf; --moon: #86e4f3; --ember: #f2b65e; --ok: #8fdca6;
  --radius: 10px; --wrap: 72rem;
  --pixel: "Jersey 10", ui-monospace, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1.0625rem/1.65 var(--sans); }
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--moon); text-underline-offset: .18em; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.15; font-weight: 400; margin: 0 0 .5em; }
h1, h2, .logo { font-family: var(--pixel); letter-spacing: .02em; }
h3 { font-weight: 650; font-size: 1.15rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--raised); padding: .5rem 1rem; z-index: 50; }

/* top bar */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(11, 14, 20, .92); backdrop-filter: blur(8px); transition: background .3s, transform .25s; }
.bar .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 3.5rem; }
.bar.over { margin-bottom: -3.5rem; background: none; backdrop-filter: none; }
.bar.over::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7rem; background: linear-gradient(180deg, rgba(7, 9, 20, .96) 0, rgba(7, 9, 20, .9) 45%, rgba(7, 9, 20, 0)); pointer-events: none; z-index: -1; transition: opacity .3s; }
.bar.over.past::before { opacity: 0; }
.bar.over.past { background: rgba(11, 14, 20, .92); backdrop-filter: blur(8px); }
.bar.tuck { transform: translateY(-100%); }
.wake { height: 1px; background: var(--line); position: relative; }
.bar.over:not(.past) .wake { background: transparent; }
.wake::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; transform: scaleX(var(--read, 0)); transform-origin: left; background: linear-gradient(90deg, rgba(134, 228, 243, .15), var(--moon) 85%, #fff); box-shadow: 0 0 8px rgba(134, 228, 243, .7); }
.logo { display: flex; align-items: center; gap: .55rem; font-size: 1.75rem; color: var(--ink); text-decoration: none; letter-spacing: .06em; }
.logo img { width: 32px; height: 32px; border-radius: 7px; transition: transform .25s; }
.logo:hover img { transform: rotate(-8deg) scale(1.08); }
.bar nav { position: relative; display: flex; gap: 1.4rem; margin-left: auto; padding: .35rem 0 .55rem; }
.bar nav a { color: #c3cbda; text-decoration: none; font-size: .95rem; padding: .35rem 0; white-space: nowrap; transition: color .15s; }
.bar nav a:hover, .bar nav a[aria-current], .bar nav a.on { color: #fff; }
.nav-mark { position: absolute; bottom: .2rem; left: 0; width: 0; height: 2px; background: var(--moon); box-shadow: 0 0 8px rgba(134, 228, 243, .8); opacity: 0; pointer-events: none; transition: left .32s cubic-bezier(.3, .9, .3, 1), width .32s cubic-bezier(.3, .9, .3, 1), opacity .2s; }
.nav-mark img { position: absolute; right: -24px; top: -22px; width: 24px; height: auto; max-width: none; transition: transform .2s; animation: hover-bob 1.4s ease-in-out infinite; }
.nav-mark.back img { transform: scaleX(-1); }
@keyframes hover-bob { 50% { translate: 0 -2px; } }
.bar .bar-try { min-height: 2.25rem; padding: .2rem 1rem; font-size: .95rem; flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: .55rem 1.25rem; border-radius: 8px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--moon); color: #fff; }
.btn.main { background: var(--moon); border-color: var(--moon); color: #06202a; }
.btn.main:hover { background: #b4f0fa; color: #06202a; }
.btn[disabled] { opacity: .55; cursor: default; }

/* hero */
.hero { position: relative; background: #000; overflow: hidden; }
.hero video, .hero .poster { width: 100%; aspect-ratio: 512 / 224; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,14,20,0) 45%, var(--bg) 100%); pointer-events: none; }
.hero-text { position: relative; z-index: 2; margin-top: -7rem; padding-bottom: 1rem; }
.hero-text h1 { font-size: clamp(3.5rem, 11vw, 7rem); letter-spacing: .05em; margin: 0; line-height: 1; }
.tag { font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--ink); margin: .25rem 0 1.25rem; max-width: 42rem; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.soon { color: var(--dim); font-size: .95rem; }
.motion { position: absolute; z-index: 3; right: 1rem; top: 4.5rem; min-height: 2.5rem; padding: .25rem .9rem; font-size: .9rem; background: rgba(11,14,20,.75); }

.chapters { margin-top: 1.25rem; }
.chapters .chips { margin: 0 0 .4rem; }
.now { margin: 0; min-height: 1.65em; color: var(--dim); font-size: .95rem; }

/* sections */
section.block { padding: 4rem 0 1rem; }
section.block > .wrap > h2, .lead-h { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-bottom: .2em; }
.lede { color: var(--dim); max-width: 46rem; font-size: 1.1rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 2.5rem 0 0; }
.facts div { background: var(--surface); padding: 1rem 1.1rem; }
.facts b { display: block; font: 400 2.25rem/1 var(--pixel); color: var(--moon); }
.facts span { color: var(--dim); font-size: .92rem; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
.chip { min-height: 2.5rem; padding: .3rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--dim); font: inherit; font-size: .95rem; cursor: pointer; }
.chip:hover { color: var(--ink); border-color: var(--dim); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--raised); color: var(--ink); border-color: var(--moon); }

/* boss grid */
.bosses { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.25rem, 1fr)); gap: .85rem; }
.boss { display: block; width: 100%; padding: 0; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; font: inherit; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.boss:hover, .boss:focus-visible { border-color: var(--moon); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(134, 228, 243, .14); }
.boss-art { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #05070d; }
.boss-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.boss:hover .boss-art img, .boss:focus-visible .boss-art img { transform: scale(1.07); }
.boss-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 24, 34, 0) 62%, var(--surface)); pointer-events: none; }
.boss-art i { position: absolute; z-index: 1; right: .5rem; top: .5rem; padding: .05rem .55rem; border-radius: 999px; background: var(--moon); color: #06202a; font-style: normal; font-size: .8rem; font-weight: 650; opacity: 0; transition: opacity .12s; }
.boss-art i::before { content: "▶"; font-size: .65em; margin-right: .35em; vertical-align: .1em; }
.boss:hover .boss-art i, .boss:focus-visible .boss-art i { opacity: 1; }
.boss b { display: block; padding: .15rem .7rem 0; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.boss .where { display: block; padding: .1rem .7rem .65rem; color: var(--dim); font-size: .85rem; }
.boss[hidden] { display: none; }
.reveal { margin-top: 1.5rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; color: var(--dim); }

/* boss dialog */
dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 0; width: min(58rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
dialog::backdrop { background: rgba(4, 6, 10, .8); }
dialog video { width: 100%; aspect-ratio: 512 / 224; background: #000; }
.dlg-body { padding: 1.25rem 1.5rem 1.5rem; }
.dlg-top { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.dlg-top h3 { font: 400 2.25rem/1 var(--pixel); margin: 0; }
.dlg-sub { color: var(--dim); margin: .35rem 0 1rem; }
.dlg-nav { display: flex; gap: .4rem; flex: none; }
.dlg-nav .btn { min-height: 2.6rem; padding: .25rem .8rem; }
.atk { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem .9rem; }
.atk li { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; font-size: .93rem; line-height: 1.45; }
.atk b { display: block; }

/* guns */
.guns { display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.gun-list { display: flex; flex-direction: column; gap: 2px; }
.gun-list button { text-align: left; min-height: 2.6rem; padding: .35rem .85rem; background: transparent; border: 0; border-left: 2px solid var(--line); color: var(--dim); font: inherit; cursor: pointer; }
.gun-list button:hover { color: var(--ink); }
.gun-list button[aria-selected="true"] { border-color: var(--moon); color: var(--ink); background: var(--surface); }
.gun-panel { align-self: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.gun-panel h3 { font: 400 2rem/1 var(--pixel); }
.meter { margin: .9rem 0; }
.meter label { display: flex; justify-content: space-between; color: var(--dim); font-size: .92rem; }
.meter i { display: block; height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; margin-top: .25rem; }
.meter i::after { content: ""; display: block; height: 100%; width: var(--v); background: var(--moon); }

/* demo */
.demo { position: relative; background: #05070b; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.demo canvas { width: 100%; aspect-ratio: 512 / 224; image-rendering: pixelated; touch-action: pan-y; cursor: crosshair; }
.demo.live canvas { touch-action: none; }
.demo-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 1rem; background: rgba(5, 7, 11, .78); }
.demo-start[hidden] { display: none; }
.demo-start p { margin: 0; max-width: 34rem; color: var(--ink); }
.steps { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .8rem; color: var(--dim); font-size: .95rem; }
.steps li::before { content: "○ "; }
.steps li.done { color: var(--ok); border-color: #2d5a3d; }
.steps li.done::before { content: "✓ "; }
.steps li.now { color: var(--ink); border-color: var(--moon); }
.note { color: var(--dim); font-size: .9rem; margin-top: .75rem; }

/* cards */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.card h3 { margin-bottom: .3em; }
.card p:last-child { margin: 0; }
.card p { color: var(--dim); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: .75rem; margin-top: 1.5rem; }
.shots img { border-radius: 8px; border: 1px solid var(--line); width: 100%; aspect-ratio: 512 / 224; object-fit: cover; }
.price { border-left: 3px solid var(--moon); padding: .25rem 0 .25rem 1rem; }

.npcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .85rem; margin-top: 1.5rem; }
.npc-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; color: var(--ink); text-decoration: none; }
.npc-card:hover { border-color: var(--moon); color: var(--ink); }
.npc-card b { display: block; margin-top: .5rem; line-height: 1.25; }
.npc-card span { display: block; color: var(--dim); font-size: .92rem; font-style: italic; margin-top: .25rem; }
.npc-sprite { width: 128px; height: 128px; flex: none; background-size: 1536px 128px; background-repeat: no-repeat; image-rendering: pixelated; animation: npc-idle 1.8s steps(12) infinite; }
@keyframes npc-idle { to { background-position-x: -1536px; } }
.npc { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; }
.npc-head { display: flex; gap: 1.25rem; align-items: center; }
.npc-head h2 { margin: 0 0 .1em; }
.npc-head p { margin: .25rem 0; }

.ach-tools { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; margin-bottom: 1rem; color: var(--dim); font-size: .95rem; }
.ach-tools input { flex: 1 1 14rem; min-height: 2.6rem; padding: .4rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.ach-group[hidden], tr[hidden] { display: none; }

.bitcoffee { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 1.5rem; max-width: 50rem; }
.bitcoffee .qr { width: 100%; height: auto; background: #fff; padding: 1rem; border-radius: 10px; }
.bitcoffee h3 { font: 400 2rem/1 var(--pixel); }
.bitcoffee p { color: var(--ink); }
.bitcoffee code { display: block; overflow-wrap: anywhere; user-select: all; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .6rem .8rem; font-size: .95rem; }
.copyline { display: flex; align-items: center; gap: .75rem; margin: .75rem 0; }
.copyline span { color: var(--ok); font-size: .95rem; }
@media (max-width: 40rem) { .bitcoffee { grid-template-columns: 1fr; } .bitcoffee .qr { max-width: 14rem; } }

/* footer: the night over the abbey */
.foot { margin-top: 5rem; color: var(--dim); font-size: .95rem; background: #0a0d16; }
.night { position: relative; overflow: hidden; background: #070914 url("night.png") center 22% / 1260px 720px no-repeat; image-rendering: pixelated; }
.night::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg), rgba(11, 14, 20, 0) 22%), linear-gradient(90deg, #070914, rgba(7, 9, 20, 0) 24%, rgba(7, 9, 20, 0) 76%, #070914); pointer-events: none; }
.night-in { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; min-height: 25rem; padding-top: 4rem; }
.night-say { flex: 0 1 20rem; align-self: center; padding-bottom: 1.5rem; image-rendering: auto; }
.night-title { font-family: var(--pixel); font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.05; color: var(--ink); margin: 0 0 .6rem; text-shadow: 0 2px 0 #070914; }
.night-line { margin: 0 0 1rem; min-height: 5.5rem; color: #dfe5f0; font-style: italic; transition: opacity .35s; text-shadow: 0 1px 3px #070914; }
.night-line.fade { opacity: 0; }
.night-line p { margin: 0 0 .15rem; }
.night-line cite { display: block; font-style: normal; font-size: .9rem; color: var(--moon); }
.night-play { color: #c3cbda; margin: 0 0 .8rem; text-shadow: 0 1px 3px #070914; }
.awake { display: flex; flex: none; position: relative; z-index: 1; margin-bottom: -8px; }
.awake a { position: relative; margin: 0 -14px; color: var(--ink); text-decoration: none; transition: transform .18s; }
.awake a:hover, .awake a:focus-visible { transform: translateY(-6px); }
.awake .npc-sprite { display: block; }
.awake b { position: absolute; left: 50%; top: -.5rem; translate: -50% 0; padding: .05rem .55rem; background: var(--raised); border: 1px solid var(--line); border-radius: 6px; font-size: .85rem; font-weight: 600; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.awake a:hover b, .awake a:focus-visible b { opacity: 1; }
.ledge { position: relative; height: 22px; background: repeating-linear-gradient(90deg, #2a3142 0 46px, #161b27 46px 48px); border-top: 2px solid #4a556b; box-shadow: inset 0 -8px 0 #1a1f2c; }
.stars { position: absolute; left: 0; top: 0; width: 2px; height: 2px; color: #dff6ff; box-shadow: 9vw 40px, 17vw 170px, 26vw 60px, 38vw 26px, 57vw 44px, 68vw 150px, 74vw 30px, 83vw 96px, 92vw 44px, 96vw 180px; animation: twinkle 3.4s steps(3) infinite; }
.stars.two { box-shadow: 5vw 110px, 13vw 22px, 31vw 130px, 44vw 90px, 62vw 92px, 71vw 76px, 79vw 20px, 88vw 130px, 95vw 84px; animation-delay: -1.7s; }
@keyframes twinkle { 50% { opacity: .2; } }
.flyby { position: absolute; left: -90px; top: 92px; width: 60px; height: auto; max-width: none; image-rendering: pixelated; animation: fly-by 26s linear infinite; filter: drop-shadow(-22px 0 5px rgba(134, 228, 243, .55)); }
@keyframes fly-by { 0% { transform: translate(0, 0); } 42%, 100% { transform: translate(calc(100vw + 180px), -38px); } }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-top: 2.75rem; padding-bottom: 2.25rem; }
.foot-cols h2 { font-size: 1.45rem; color: var(--ink); margin: 0 0 .5rem; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; }
.foot-cols li { margin: .3rem 0; }
.foot-cols a { color: #c3cbda; text-decoration: none; overflow-wrap: anywhere; }
.foot-cols a:hover { color: #fff; text-decoration: underline; }
.foot-end { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding-top: 1.25rem; padding-bottom: 2rem; border-top: 1px solid var(--line); }
.foot-end img { height: 48px; width: auto; border-radius: 4px; }
.foot-end p { margin: 0; flex: 1 1 16rem; font-size: .9rem; }
.to-top { color: var(--moon); text-decoration: none; white-space: nowrap; }
.to-top span { display: inline-block; transition: transform .18s; }
.to-top:hover span { transform: translateY(-3px); }

/* wiki */
.wiki { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2.5rem; align-items: start; padding-top: 2rem; }
.side { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); overflow-y: auto; padding-right: .5rem; font-size: .95rem; }
.side h4 { margin: 1.1rem 0 .25rem; color: var(--dim); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.side a { display: block; padding: .28rem .6rem; color: var(--dim); text-decoration: none; border-left: 2px solid transparent; }
.side a:hover { color: var(--ink); }
.side a[aria-current] { color: var(--ink); border-color: var(--moon); background: var(--surface); }
.search { position: relative; }
.search input { width: 100%; min-height: 2.6rem; padding: .4rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.results { display: none; position: absolute; z-index: 15; left: 0; right: -14rem; margin-top: .3rem; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; max-height: 24rem; overflow-y: auto; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.results.open { display: block; }
.results a { padding: .5rem .8rem; border: 0; }
.results a small { display: block; color: var(--dim); }
.results p { margin: 0; padding: .6rem .8rem; color: var(--dim); }
.toggle-side { display: none; }
article { min-width: 0; max-width: 50rem; }
article h1 { font-size: clamp(2.5rem, 6vw, 3.5rem); margin-bottom: .15em; }
article h2 { font-size: 2.1rem; margin: 2.25rem 0 .4em; color: var(--ink); }
article h3 { margin: 1.5rem 0 .35em; }
article ul, article ol { padding-left: 1.3rem; margin: 0 0 1em; }
article li { margin-bottom: .35em; }
article .intro { font-size: 1.15rem; color: var(--dim); }
.tip { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--moon); border-radius: 6px; padding: .75rem 1rem; margin: 1.1rem 0; }
.tip b:first-child { color: var(--moon); }
.warn { border-left-color: var(--ember); }
.warn b:first-child { color: var(--ember); }
.tablewrap { overflow-x: auto; margin: 1rem 0 1.5rem; border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .8rem; border-bottom: 1px solid var(--line); }
th { background: var(--surface); color: var(--dim); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
kbd { background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 0 .35em; font: .9em ui-monospace, monospace; }
details { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .6rem 1rem; margin: .7rem 0; }
details summary { cursor: pointer; font-weight: 600; min-height: 1.8rem; }
details[open] summary { margin-bottom: .6rem; }
.bosshead { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: center; }
.bosshead img { width: 6rem; height: 6rem; image-rendering: pixelated; border-radius: 8px; border: 1px solid var(--line); }
.bosshead h3 { margin: 0; }
.bossclip { width: 100%; aspect-ratio: 512 / 224; border-radius: 8px; margin: .75rem 0; background: #000; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.wikihome { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; margin: 1.5rem 0; }
.wikihome a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; text-decoration: none; color: var(--ink); }
.wikihome a:hover { border-color: var(--moon); }
.wikihome small { display: block; color: var(--dim); font-size: .92rem; line-height: 1.45; margin-top: .2rem; }

@media (max-width: 54rem) {
  .hero-text { margin-top: -2.5rem; }
  .hero video, .hero .poster { aspect-ratio: 16 / 9; }
  .guns { grid-template-columns: 1fr; }
  .gun-list { flex-direction: row; overflow-x: auto; gap: .4rem; padding-bottom: .4rem; }
  .gun-list button { flex: none; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
  .wiki { grid-template-columns: 1fr; gap: 1rem; padding-top: 1rem; }
  .side { position: static; max-height: none; overflow: visible; padding: 0; }
  .side .links { display: none; }
  .side.open .links { display: block; }
  .toggle-side { display: inline-flex; margin-top: .6rem; }
  .results { right: 0; }
}
@media (max-width: 62rem) {
  .bar .wrap { flex-wrap: wrap; gap: 0 1rem; padding-top: .4rem; }
  .bar .logo { margin-right: auto; }
  .bar nav { order: 3; width: 100%; margin: 0; padding: 0 0 .5rem; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; }
  .bar nav::-webkit-scrollbar { display: none; }
  .nav-mark img { display: none; }
  .bar.over { margin-bottom: -6rem; }
  .bar.over::before { height: 9rem; }
  html { scroll-padding-top: 6.5rem; }
  .motion { top: 6.5rem; }
  .night-in { flex-direction: column; align-items: stretch; padding-top: 3rem; min-height: 0; }
  .night-say { flex: none; align-self: stretch; }
  .awake { justify-content: center; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; }
}
@media (max-width: 40rem) {
  .bosses { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .night { background-size: 840px 480px; background-position: center 11rem; }
  .night::before { background: linear-gradient(180deg, #070914 13rem, rgba(7, 9, 20, 0) 18rem); }
  .night-in { padding-top: 2rem; }
  .night-line { min-height: 7rem; }
  .awake { margin-top: 10rem; }
  .awake a { margin: 0 -22px; }
  .flyby { top: 40px; width: 42px; }
}
@media (max-width: 25rem) {
  .awake a { margin: 0 -30px; }
}
@media (prefers-reduced-motion: reduce) {
  .bar, .logo img, .awake a, .to-top span, .nav-mark, .nav-mark img, .night-line { transition: none; animation: none; }
  .stars, .flyby { animation: none; }
  .flyby { display: none; }
  html { scroll-behavior: auto; }
  .boss, .boss-art img { transition: none; }
  .boss:hover .boss-art img, .boss:focus-visible .boss-art img { transform: none; }
  .npc-sprite { animation: none; }
  .boss:hover { transform: none; }
}