@font-face { font-family: Nation0; src: url('data/nation0.woff2') format('woff2'); font-display: block; }
:root { color-scheme: dark; background: #030605; color: #edf1dd; font: 13px/1.7 Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 1px solid #d4e7ac; outline-offset: 7px; }
#shell { position: fixed; inset: 0; background: #000; }
#screen { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; background: #000; }
#gate { position: absolute; inset: 0; z-index: 2; overflow-y: auto; text-align: center; background: #030605; transition: opacity .35s ease, visibility .35s; }
#gate.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#background { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: .47; }
.shade { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 42%, #02050355 0%, #02050380 48%, #020503e8 100%), linear-gradient(0deg, #000b, transparent 60%); }
.gate-content { position: relative; min-height: calc(100svh - 100px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 20px 24px; }
h1 { margin: 0; font: 80px/.82 Nation0, monospace; font-weight: normal; color: #fff; text-shadow: 4px 5px 0 #020603; }
h1 span { display: block; }
h1 span + span { margin-top: 9px; }
.bitmap-text { display: block; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
h1 .bitmap-text { filter: drop-shadow(4px 5px 0 #020603); }
.group .bitmap-text { filter: drop-shadow(2px 2px 0 #000); }
.group { margin: 27px 0 0; color: #fff; font: 32px/1 Nation0, monospace; text-shadow: 2px 2px 0 #000; }
.meta { margin: 8px 0 0; color: #b2bfa7; font-size: 12px; letter-spacing: .08em; }
.credits { margin: 29px 0 0; font-size: 12px; color: #bec7b3; letter-spacing: .045em; }
.credits div { display: grid; grid-template-columns: 105px 155px; gap: 17px; }
.credits dt { color: #8e9e83; text-align: right; }
.credits dd { margin: 0; text-align: left; color: #e2e7d5; }
.start { position: relative; margin-top: 38px; padding: 10px 16px; border: 0; background: none; color: #e9efda; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.start:hover { color: #c4e895; }
.start:disabled { color: #8f9e82; cursor: progress; text-decoration: none; }
.dots { display: inline-block; width: 19px; text-align: left; }
.dots::after { content: '...'; animation: dots 1.1s steps(4,end) infinite; display: inline-block; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 19px; } }
footer { position: relative; padding: 5px 20px max(20px, env(safe-area-inset-bottom)); color: #8a9a7f; font-size: 10px; letter-spacing: .1em; }
footer p { margin: 0 0 10px; }
footer .effect-links { margin: 12px 0 0; color: #cab692; }
footer .effect-links a { color: #e3d2ff; }
kbd { color: #c3d2b5; font: inherit; }
nav { display: flex; justify-content: center; gap: 25px; }
a { color: #aebf9d; text-decoration: none; }
a:hover { color: #e5efcf; }
#status { position: absolute; z-index: 4; top: max(15px, env(safe-area-inset-top)); left: 20px; right: 20px; margin: 0; color: #d9e6c8; text-align: center; font-size: 12px; text-shadow: 0 1px 5px #000; pointer-events: none; }
#status:empty { display: none; }
#hud { position: absolute; z-index: 3; bottom: max(15px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(800px, calc(100% - 28px)); padding: 12px 15px; border: 1px solid #b2c99430; border-radius: 5px; background: #051007d9; opacity: 0; transition: opacity .2s; }
#hud[hidden], [hidden] { display: none !important; }
#shell:hover #hud, #hud:focus-within, #hud.visible { opacity: 1; }
#shell:fullscreen #hud { display: none !important; }
#hud button { border: 0; background: none; padding: 5px; color: #dfe9d0; cursor: pointer; white-space: nowrap; font-size: 12px; }
#timeline { min-width: 25px; flex: 1; accent-color: #b1cb85; cursor: pointer; }
#time { color: #aabf98; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media(max-width:600px) { h1 { font-size: 48px; } .group { font-size: 24px; } .gate-content { padding-top: 35px; } #hud { gap: 8px; padding: 8px; } #fullscreen { display:none; } }
@media(max-width:370px) { h1 { font-size: 40px; } .meta { font-size: 10px; } }
@media(max-height:560px) { h1 { font-size: 48px; } .group { margin-top: 18px; font-size: 24px; } .credits { margin-top: 15px; } .start { margin-top: 16px; } .gate-content { min-height: calc(100svh - 74px); padding: 18px; } footer { padding-bottom: 10px; } }
@media(prefers-reduced-motion:reduce) { *, *::after { animation: none !important; transition: none !important; } }