/* Ashen Covenant: the Lab page around the game. The shared top bar (from
   /embed.js) sits above the game stage and the privacy footer below it; the
   stage takes the rest of the window, so on a desktop everything fits on one
   screen. The game's own styles are in game.css, scoped to #ashen-stage. */

/* The Lab's pixel font, used by the shared top bar (preloaded in <head>). */
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("/press-start-2p.woff2") format("woff2"); }
@font-face { font-family: "Press Start 2P Fallback"; src: local("Courier New"); size-adjust: 166.64%; ascent-override: 60%; descent-override: 0%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  --ashen-bg: #0b1511;
  --ashen-ink: #ded7c5;
  --ashen-dim: #9aa295;
  --ashen-gold: #cfb57b;
  --ashen-line: #a5946538;
}

html { background: var(--ashen-bg); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ashen-bg);
  color: var(--ashen-ink);
  font: 14px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: -48px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ashen-gold);
  color: #0b1511;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.skip-link:focus-visible { transform: translateY(60px); }

/* Shown only when the shared chrome is missing (it hides this header and
   moves the EN/TR switch into the Lab top bar). */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px;
}
.site-header .brand { flex-basis: 100%; }
.site-header .wordmark { margin: 0; font: 400 22px/1.2 Georgia, 'Times New Roman', serif; letter-spacing: 6px; }
.site-header .tagline { margin: 2px 0 0; color: var(--ashen-dim); font-style: italic; }
.lab-link { color: var(--ashen-gold); text-decoration: none; font-weight: 700; }

main {
  position: relative;
  flex: 1 0 auto;
  min-height: min(560px, 100vh);
  min-height: min(560px, 100dvh);
}

/* The game stage: the canvas, the game's DOM overlay and its loading screen
   are positioned inside it. It is a size container, so the game's compact
   layouts and vh-based sizes follow the stage (see game.css). Absolute
   positioning gives it a definite height, which container units need (a
   flex-stretched size container resolves cqh to 0 in Chrome). */
.ashen-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  container: ashen / size;
  background: #0d1512;
}

/* Embedded in umutkorkmaz.net (?embed=1): the frame grows with its content,
   so the stage sets its own height. */
html[data-embed="1"] .ashen-stage {
  position: relative;
  inset: auto;
  height: clamp(520px, 62.5vw, 820px);
}

#ashen-stage #loading-screen .loading-note { font-size: 10px; }

.site-footer {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--ashen-line);
  text-align: center;
  color: var(--ashen-dim);
  font-size: 12px;
  line-height: 1.55;
}
.site-footer p { max-width: 1040px; margin: 0 auto 4px; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--ashen-gold); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid #e1c18b; outline-offset: 2px; }