/* Shared presentation for the lobby, laboratories and game overlays. */
:root {
  --fantasy-bg: #1c1c1f;
  --fantasy-panel: #252528;
  --fantasy-red: #8d202b;
  --fantasy-gold: #b89a59;
  --fantasy-text: #e2d8c7;
  --fantasy-muted: #b8b1a7;
  color-scheme: dark;
  background: var(--fantasy-bg);
  color: var(--fantasy-text);
}
body { background: var(--fantasy-bg); color: var(--fantasy-text); font-family: system-ui, sans-serif; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; color: var(--fantasy-text); }
p, footer, .subtitle, .speed, .tag, .range-labels { color: var(--fantasy-muted); }
a, .eyebrow, header small, .meta, .speeds strong, .telemetry strong { color: var(--fantasy-gold); }
button, a { transition: background-color .15s, border-color .15s; }
button, nav a, .actions a, header > a {
  background: #303034; color: var(--fantasy-text); border: 1px solid #b89a5960; border-radius: 3px;
}
button:hover, nav a:hover, .actions a:hover, header > a:hover { background: #63202a; border-color: var(--fantasy-gold); }
button[aria-selected=true], button[aria-pressed=true], button.primary-action {
  background: var(--fantasy-red); border-color: var(--fantasy-gold); color: #f3e9db;
}
input, select { background: #1c1c1f; color: var(--fantasy-text); border-color: #646064; accent-color: var(--fantasy-red); }
input[type=number] { background: #1c1c1f; border-color: #646064; color: var(--fantasy-gold); }
input[type=range] { accent-color: var(--fantasy-red); }
label { color: var(--fantasy-text); }
article, .panel { background: #252528f5; border-color: #b89a5960; border-radius: 3px; box-shadow: 0 12px 35px #0004; }
.stage { background: #202023; }
.details { border-color: #b89a5940; }
.controls, .map small, .telemetry small { color: var(--fantasy-muted); }
kbd { background: #303034; border-color: #b89a5950; color: var(--fantasy-text); }
#load-error { background: var(--fantasy-panel); color: var(--fantasy-text); border: 1px solid var(--fantasy-gold); border-radius: 3px; }
#you-marker { background: var(--fantasy-panel); color: var(--fantasy-gold); border-color: var(--fantasy-gold); }
:is(a, button, input, select, summary, canvas):focus-visible { outline: 2px solid var(--fantasy-gold); outline-offset: 4px; }
[hidden] { display: none !important; }

/* No background imagery: the login is framed entirely with CSS and type. */
body.login-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100svh; padding: 48px 24px; box-sizing: border-box; overflow: auto;
  background: #1c1c1f; position: relative;
}
.login-page::before { content: ''; position: fixed; inset: 14px; border: 1px solid #b89a5970; pointer-events: none; }
.game-brand { display: block; text-align: center; margin: 0 0 36px; color: var(--fantasy-gold); }
.game-brand span { display: block; font: 20px Georgia, serif; letter-spacing: .3em; text-transform: uppercase; }
.game-brand strong { display: block; font: normal clamp(42px, 8vw, 72px) Georgia, serif; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.login-page main { width: min(480px, 100%); padding: 32px 36px; background: var(--fantasy-panel); border: 1px solid #b89a59b0; border-radius: 3px; box-shadow: 0 18px 60px #0004; }
.login-page h1 { text-align: center; font-size: 36px; letter-spacing: 0; margin: 0 0 8px; }
.login-page .login-intro { text-align: center; margin: 0 0 28px; }
.login-page label { font-size: 14px; margin: 20px 0 8px; }
.login-page :is(input, select) { background: #1c1c1f; border: 1px solid #555158; border-radius: 3px; padding: 13px 14px; }
.login-page input::placeholder { color: #9d979a; }
.login-page button { border-radius: 3px; font-size: 14px; }
.login-page .primary-action, #world-map, #arena { background: var(--fantasy-red); border-color: var(--fantasy-gold); text-transform: uppercase; letter-spacing: .12em; padding: 15px; }
.login-page .primary-action:hover, #world-map:hover, #arena:hover { background: #a52b38; }
.account-create { border-top: 1px solid #b89a5940; margin-top: 26px; padding-top: 20px; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--fantasy-muted); }
.account-create button { background: transparent; border: 0; color: var(--fantasy-gold); width: auto; padding: 6px 0; margin: 0; }
.account-create button:hover { text-decoration: underline; }
.login-page #status { color: var(--fantasy-gold); font-size: 13px; min-height: 0; }
.login-page #status:empty { display: none; }
.login-help { margin-top: 24px; border-top: 1px solid #b89a5940; padding-top: 16px; color: var(--fantasy-muted); font-size: 12px; }
.login-help summary { cursor: pointer; }
.login-help p, #menu p { font-size: 13px; }
@media (max-width: 520px) {
  body.login-page { padding: 36px 24px; }
  .login-page main { padding: 26px 22px; }
  .game-brand { margin-bottom: 24px; }
  .login-page h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { button, a { transition: none; } }

/* Unified page chrome. */
body:not(.login-page) main{color:var(--fantasy-text)}
.login-page main,article,.panel,.stage{border:1px solid #b89a5960;border-radius:3px}
.login-page input,.login-page select,.login-page button{border-radius:3px}
.login-page button{background:#303034;border-color:#b89a5960}
.login-page button.primary-action{background:var(--fantasy-red);border-color:var(--fantasy-gold)}
.login-page button:hover{background:#63202a}
.model-navigation{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px}
.model-navigation>a{padding:14px 0;text-align:center;background:#303034;border:1px solid #b89a5960;border-radius:3px;font-size:24px}
.model-page main{max-width:1150px;padding:30px}
.model-page h1{margin:12px 0;font-size:46px}
.model-page canvas{height:min(660px,65svh)}
.model-page .toolbar{margin:20px 0}
.model-page #triangle-count{margin:0;color:var(--fantasy-muted)}
.details .triangle-count{min-height:0;margin:0 0 16px}
@media(max-width:650px){.model-page main{padding:18px}.model-navigation{grid-template-columns:32px minmax(0,1fr) 32px;gap:6px}}

header>a{padding:10px 14px;text-decoration:none;display:inline-block}
.model-navigation>a{text-decoration:none}