/* Matches quake.by: slate-blue panels, Bootstrap primary blue, Roboto. */
@font-face {
  font-family: "roboto-regular";
  font-display: swap;
  src: url("/res/roboto-regular.ttf") format("truetype");
}

:root {
  color-scheme: dark;
  --bg: #10161b;
  --bg-card: #161e24;
  --bg-deep: #0b1014;
  --text: rgba(255, 255, 255, .8);
  --text-dim: rgba(255, 255, 255, .45);
  --accent: #0d6efd;
  --accent-hover: #3d8bfd;
  --accent-soft: rgba(13, 110, 253, .12);
  --border: rgba(255, 255, 255, .08);
  --display: "roboto-regular", "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 "roboto-regular", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(42, 45, 60, .9), transparent 60%),
    var(--bg);
}
button, select { font: inherit; }
a { color: rgba(255, 255, 255, .9); }
a:hover { color: #fff; }
::selection { background: rgba(13, 110, 253, .35); }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(22, 30, 36, .96);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 13px rgba(0, 0, 0, .75);
  backdrop-filter: blur(8px);
}
.nav-logo { color: rgba(255, 255, 255, .9); font: 1.25rem/1 var(--display); letter-spacing: 2px; text-decoration: none; white-space: nowrap; }
.nav-logo:hover { color: #fff; }
.nav-context { color: var(--text-dim); font: .72rem var(--mono); letter-spacing: 2px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-shell {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 24px clamp(12px, 3vw, 40px) 40px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1280px);
  justify-content: center;
  gap: 16px;
}

.control-rail {
  position: sticky;
  top: 80px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.rail-divider { height: 1px; margin: 2px 0; background: var(--border); }
.tool-button {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.tool-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool-button:hover:not(:disabled), .tool-button:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent-soft); outline: none; }
.tool-button:disabled { opacity: .35; cursor: default; }
.tool-button[data-tooltip]:hover::after, .tool-button[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 8px;
  white-space: nowrap;
  font: .75rem var(--mono);
  color: var(--text);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  pointer-events: none;
}

main { min-width: 0; }
.game-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  overflow: hidden;
}
#canvas { display: block; width: 100%; height: 100%; outline: none; }
#canvas[hidden] { display: none; }

#launcher {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: #000 center / cover no-repeat;
}
#launcher[hidden] { display: none; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(11, 16, 20, .35), rgba(11, 16, 20, .92) 75%); pointer-events: none; }
.launcher-content { position: relative; width: min(560px, 100%); text-align: center; }
.section-label { margin: 0 0 6px; color: var(--accent-hover); font: .75rem var(--mono); letter-spacing: 3px; }
h1 { margin: 0 0 10px; color: #fff; font: clamp(1.8rem, 4.5vw, 3rem)/1.05 var(--display); letter-spacing: 1px; text-shadow: 0 2px 20px rgba(0, 0, 0, .8); }
.launcher-copy { margin: 0 auto 20px; max-width: 46ch; color: var(--text); text-shadow: 0 1px 8px #000; }
.launch-panel { padding: 16px; text-align: left; background: rgba(22, 30, 36, .9); border: 1px solid var(--border); border-radius: 6px; }
.launch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 10px; }
.launch-panel label { display: block; margin-bottom: 4px; color: var(--text-dim); font: .72rem var(--mono); letter-spacing: 2px; text-transform: uppercase; }
select {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 6px;
}
select option { background: var(--bg-card); }
select:focus-visible { outline: 1px solid var(--accent); }
#play {
  width: 100%;
  height: 46px;
  margin-top: 12px;
  color: #fff;
  font: 1rem var(--display);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  transition: background .2s;
  cursor: pointer;
}
#play:hover:not(:disabled) { background: #0b5ed7; border-color: #0a58ca; }
#play:disabled { opacity: .6; cursor: progress; }
#build-info { margin: 8px 0 0; color: var(--text-dim); font: .78rem var(--mono); text-align: center; }

.runtime-status { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.status-light { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent-hover); box-shadow: 0 0 8px var(--accent); }
#status { margin: 0; color: var(--text); font: .85rem var(--mono); }
progress { width: 100%; height: 6px; margin-top: 8px; appearance: none; border: 0; background: var(--bg-deep); }
progress::-webkit-progress-bar { background: var(--bg-deep); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }
progress[hidden] { display: none; }

.key-strip { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; color: var(--text-dim); font-size: .85rem; }
kbd { display: inline-block; min-width: 22px; margin-right: 4px; padding: 0 6px; color: #fff; border-radius: 3px; font: .78rem/20px var(--mono); text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-bottom-width: 2px; }

details { margin-top: 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); }
summary { padding: 8px 12px; color: var(--text-dim); font: .8rem var(--mono); cursor: pointer; }
#log { max-height: 320px; margin: 0; padding: 10px 12px; overflow: auto; color: var(--text-dim); font: .75rem/1.5 var(--mono); white-space: pre-wrap; border-top: 1px solid var(--border); }

footer { padding: 20px clamp(16px, 4vw, 48px) 32px; color: var(--text-dim); font-size: .8rem; text-align: center; border-top: 1px solid var(--border); }
footer p { margin: 4px 0; }

@media (max-width: 700px) {
  .app-shell { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding-top: 14px; }
  .control-rail { padding: 4px; top: 68px; }
  .tool-button { width: 34px; }
  .game-frame { aspect-ratio: auto; min-height: 480px; }
  #launcher { position: relative; min-height: 480px; }
  .launch-grid { grid-template-columns: 1fr; }
  .nav-context { display: none; }
}

/* Layout: the nav scrolls away with the page instead of covering the game, the game
   frame is capped so its full height fits the viewport, and the control rail (with
   its tooltips) always stacks above the game. main isolates engine-set z-indexes. */
.site-nav { position: relative; }
.control-rail { top: 16px; z-index: 1000; }
main { position: relative; z-index: 0; }
.game-frame { width: min(100%, calc((100vh - 32px) * 16 / 9)); margin-inline: auto; }