/* BLACKLINE: Dustfall - 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 #blackline-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;
  --bl-bg: #141711;
  --bl-ink: #eeeee5;
  --bl-dim: #a7ae9b;
  --bl-accent: #efb354;
  --bl-line: rgba(231, 236, 215, 0.14);
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bl-bg);
  color: var(--bl-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(--bl-accent);
  color: #161a12;
  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: 900 22px/1.2 Impact, 'Arial Narrow', Arial, sans-serif; letter-spacing: 3px; }
.site-header .tagline { margin: 2px 0 0; color: var(--bl-dim); letter-spacing: 1px; }
.lab-link { color: var(--bl-accent); 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 3D canvas, the menus, the HUD and the overlays are
   positioned inside it. It is a size container, so the game's compact
   layouts 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). Isolation keeps the game's layers
   (z-index up to 35) inside the stage. */
.blackline-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  container: blackline / size;
}

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

.site-footer {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--bl-line);
  text-align: center;
  color: var(--bl-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(--bl-accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }