@font-face { font-family: 'Green-Sky'; src: url('/assets/game-text.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('/assets/cinzel-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('/assets/cinzel-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root { --game-font-size: clamp(14px, 2vw, 20px); --header-gap: 24px; }
html, body { margin: 0; min-height: 100%; background: #0b130d; color: #9ad284; font: 12px/1.6 monospace; }
body { min-height: 100dvh; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
[hidden] { display: none !important; }
a { color: #c7f5ae; }
#site-header { position: sticky; top: 0; z-index: 3; background: #0b130d; box-sizing: border-box; width: 100%; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #354537; }
#navigation-controls { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; overflow-x: auto; }
#site-header nav { display: flex; flex-shrink: 0; align-self: stretch; white-space: nowrap; font: var(--game-font-size)/1 'Green-Sky', monospace; text-transform: uppercase; }
#site-header nav a { display: grid; place-items: center; padding: 0 12px; text-decoration: none; transition: color 150ms ease, background-color 150ms ease; }
#site-header nav a[aria-current], #site-header nav a:not([aria-current]):hover { color: #0b130d; background-color: #f2ead8; }
#site-header .github-link { display: grid; place-items: center; flex-shrink: 0; padding: 8px; }
#developer-mode { flex-shrink: 0; }
#top-controls { flex: 0 0 auto; margin-inline: auto; }
#top-controls button { flex-shrink: 0; }
#top-controls, .control-group, #debug-tools { display: flex; align-items: center; gap: 4px; }
#top-controls { padding: 4px 0; }
#top-controls > .control-group { gap: 12px; }
.control-group { flex-shrink: 0; }
.control-group + .control-group { margin-left: 8px; padding-left: 12px; border-left: 1px solid #354537; }
#site-header button { box-sizing: border-box; width: 32px; height: 32px; font-size: 16px; line-height: 1; padding: 0; }
#site-header button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: middle; }
#volume { width: 80px; min-width: 48px; margin: 0 4px; accent-color: #9ad284; }
#site-header button[aria-pressed="true"] { background: #354537; border-color: #d6f897; }
button { font: inherit; background: #142019; color: #b6e6a4; border: 1px solid #567; padding: 5px 9px; cursor: pointer; }
button:focus-visible, textarea:focus-visible { outline: 2px solid #d6f897; }
.reading-page [id] { scroll-margin-top: 120px; }
#play { max-width: 100%; }
.reading-page { box-sizing: border-box; width: min(1100px, 100%); margin-top: var(--header-gap); padding: 42px 60px; position: relative; background: #f2ead8; color: #202b42; font: 19px/1.5 Georgia, serif; }
.reading-page::before { content: ""; position: absolute; inset: 12px; border: 6px double #202b42; pointer-events: none; }
.reading-page a { color: inherit; text-underline-offset: 3px; }
.reading-page a:focus-visible, #site-header a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.reading-page h1, .reading-page h2, #about .play-button { font-family: 'Cinzel', Georgia, serif; }
.reading-page h1 { margin: 0; font-size: clamp(36px, 5.5vw, 66px); line-height: 1.1; font-weight: 400; letter-spacing: -.035em; }
.ad-heading { text-align: center; }
.computer-line { font: 12px/1.6 monospace; text-transform: uppercase; letter-spacing: .08em; }
.ad-images { display: grid; grid-template-columns: .85fr 1.3fr; gap: 50px; align-items: center; margin: 38px 0; }
#about figure { margin: 0; }
#about img { display: block; max-width: 100%; height: auto; }
.box-front img { width: 300px; margin: auto; transform: rotate(-4deg); box-shadow: 5px 9px 12px #202b4240; }
/* The box photographs have gently bowed edges as well as rounded corners. */
.monitor, #canvas-box { clip-path: url(#screen-outline); }
.monitor { padding: 3.5%; background: #000; }
.monitor img { width: 100%; image-rendering: pixelated; }
#about figcaption { margin-top: 14px; font-size: 14px; line-height: 1.35; font-variant: small-caps; }
.ad-copy { display: flow-root; max-width: 730px; margin: auto; }
.ad-copy p { margin: 0 0 16px; }
.ad-action { text-align: center; margin: 26px 0; }
#about .play-button { display: block; width: fit-content; margin: 0 auto 12px; padding: 10px 70px; background: #202b42; color: #f2ead8; font-size: 30px; font-weight: 700; letter-spacing: .12em; text-decoration: none; border: 4px double #f2ead8; outline: 2px solid #202b42; }
.ad-action > a:not(.play-button) { display: block; margin-top: 8px; font-size: 16px; }
.archive-download[aria-disabled="true"] { opacity: .7; }
.reading-page h2 { font-size: 25px; margin: 24px 0 12px; }
.box-back { float: right; width: 150px; margin: 0 0 18px 24px !important; }
.extras, #links ul { list-style: none; padding: 0; }
.extras li { margin: 5px 0; }
#links li { margin: 0 0 14px; }
@media (max-width: 899px) {
  .reading-page { padding: 30px 26px; font-size: 17px; }
  .ad-images { grid-template-columns: 1fr; gap: 32px; margin: 32px 0; }
  .box-front img { width: min(270px, 90%); }
  #site-header { padding: 8px 4px; column-gap: 4px; }
  #site-header nav a { padding: 0 6px; }
  .box-back { width: 110px; margin-left: 16px !important; }
}