:root {
  color-scheme: dark;
  --ink: #e8e2d5;
  --muted: #a9a193;
  --gold: #c9a76a;
  --gold-soft: #7a6039;
  --panel: #111214;
  --panel-light: #1b1a18;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(ellipse at 50% 4%, #27313b 0%, #17191c 44%, #0b0c0e 100%);
  font: 15px/1.5 "Segoe UI", system-ui, sans-serif;
}

button { font: inherit; }
body.playing { overflow: hidden; background: #000; }

.page { width: min(1200px, calc(100% - 36px)); margin: 0 auto; padding: 28px 0 18px; }
body.playing .page { width: 100vw; height: 100vh; height: 100dvh; margin: 0; padding: 0; }
body.playing .masthead, body.playing .toolbar { display: none; }

.masthead { display: flex; align-items: center; gap: 14px; min-height: 58px; margin-bottom: 18px; }
.brand-mark {
  display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto;
  border: 1px solid var(--gold-soft); border-radius: 50%; color: #f0d89d;
  background: radial-gradient(circle at 35% 30%, #443a2c, #151414 70%);
  box-shadow: 0 0 0 3px #100f0e, 0 0 18px #b38c4833; font: 700 14px Georgia, serif;
}
.eyebrow { margin: 0 0 2px; color: var(--gold); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
h1 { font-size: 23px; letter-spacing: .02em; }
.local-badge { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 12px; }
.local-badge i { width: 7px; height: 7px; border-radius: 50%; background: #9fc58d; box-shadow: 0 0 9px #9fc58d99; }

.game-shell {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden; border: 1px solid #695837; border-radius: 9px;
  background: #07090c; box-shadow: 0 22px 70px #0008, inset 0 0 0 4px #15120e;
}
.game-shell::before { content: ""; position: absolute; z-index: 2; inset: 5px; border: 1px solid #a6895238; border-radius: 5px; pointer-events: none; }
#canvas { width: 100%; height: 100%; flex: none; display: block; background: #090b0e; outline: none; }
body.playing .game-shell, .game-shell:fullscreen {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; aspect-ratio: auto;
  border: 0; border-radius: 0; background: #000;
}
body.playing .game-shell #canvas, .game-shell:fullscreen #canvas {
  width: min(100vw, 177.77778vh); height: auto; aspect-ratio: 16 / 9;
}
body.playing .game-shell::before, .game-shell:fullscreen::before { display: none; }
.welcome { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; background: radial-gradient(ellipse at center, #20252b 0%, #111316 58%, #090a0c 100%); }
.welcome[hidden] { display: none; }
.sigil { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 22px; border: 1px solid #93784d; border-radius: 50%; color: #e4ca8c; background: radial-gradient(circle, #383022 0%, #171513 68%); box-shadow: 0 0 0 7px #171513, 0 0 0 8px #57462e, 0 0 32px #d4a95d30; }
.sigil span { font-size: 30px; }
h2 { margin: 3px 0 10px; font-size: clamp(29px, 4vw, 42px); }
.intro { max-width: 520px; margin: 0 0 24px; color: #c0bbb1; }
.primary, .secondary { cursor: pointer; border-radius: 4px; transition: filter .15s ease, border-color .15s ease, transform .15s ease; }
.primary { min-width: 190px; padding: 12px 24px; border: 1px solid #e0c182; color: #16130e; background: linear-gradient(#e0c98e, #ab8446); box-shadow: 0 3px 14px #b8914738; font-weight: 700; }
.primary:hover, .secondary:hover:not(:disabled) { filter: brightness(1.12); }
.primary:active { transform: translateY(1px); }
.hint { margin: 17px 0 0; color: #847e73; font-size: 12px; }
.error[hidden] { display: none; }
.error { position: absolute; z-index: 4; left: 50%; bottom: 22px; width: min(620px, calc(100% - 40px)); padding: 12px 16px; border: 1px solid #a45c54; border-radius: 5px; color: #f0d1ca; background: #291512ed; transform: translateX(-50%); }
.game-controls { position: absolute; z-index: 5; top: 12px; right: 12px; display: flex; gap: 8px; opacity: .18; transition: opacity .15s ease; }
.game-controls:hover, .game-controls:focus-within { opacity: 1; }
body:not(.playing) .game-controls { display: none; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 58px; color: #918a7e; font-size: 12px; }
.toolbar p { margin: 0; }
.secondary { padding: 8px 12px; border: 1px solid #514638; color: #d6cbb7; background: #171614; font-size: 12px; }
.secondary:disabled { cursor: default; opacity: .45; }

@media (max-width: 700px) {
  .page { width: min(100% - 20px, 1200px); padding-top: 16px; }
  .masthead { margin-bottom: 12px; }
  .brand-mark { width: 42px; height: 42px; }
  h1 { font-size: 19px; }
  .local-badge { font-size: 0; }
  .game-shell { aspect-ratio: 16 / 9; }
  .toolbar { align-items: flex-start; padding: 12px 2px; }
  .game-controls { top: 8px; right: 8px; }
}

/* Download screen: the South Era loading the game itself draws (ServerLoading.cpp, single image): the art
   covering the screen, the bar and its two labels at the same places and in the same colours, so the page
   and the game show one continuous loading. */
.boot { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(100%, 177.77778vh); aspect-ratio: 16 / 9; overflow: hidden; transform: translate(-50%, -50%); background: #000; }
.boot[hidden] { display: none; }
.boot-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.boot-text { position: absolute; left: 5.5%; right: 5.5%; top: 86.9%; display: flex; justify-content: space-between; margin: 0; color: #eee2c8; font-size: clamp(11px, 1.5vw, 15px); text-shadow: 0 1px 3px #000; }
.boot-gauge { position: absolute; left: 5.5%; right: 5.5%; top: 92.3%; height: max(3px, .6%); background: #292e2b; }
.boot-gauge i { display: block; width: 0; height: 100%; background: #c9a159; transition: width .2s linear; }