*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #000000;
  --container: #091c33;
  --text: #e4e6f1;
  --link: #fcc914;
  --link-hover: #e0b010;
  --muted: #5a7a9a;
  --sp: 1.5em;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding: var(--sp);
}

.container { max-width: 900px; margin: 0 auto; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

h1 { font-size: 1.8em; margin-bottom: 0.25em; }
h2 { font-size: 1.3em; margin-bottom: 0.75em; }
h3 { font-size: 1.05em; margin-bottom: 0.4em; }

/* Top-level sections only — not nested game sections */
header, .dl-controls, .dl-section, .web-section {
  background: var(--container);
  padding: var(--sp);
  margin-bottom: var(--sp);
}

ul { list-style: none; padding: 0; }
li { margin-bottom: 0.4em; }

button {
  background: var(--container);
  color: var(--link);
  border: 1px solid var(--link);
  padding: 0.4em 1em;
  font-family: inherit;
  font-size: 1em;
  cursor: pointer;
}
button:hover { background: var(--link); color: var(--bg); }
button:focus-visible { background: var(--link); color: var(--bg); }
button:disabled { opacity: 0.5; cursor: default; }
.btn-row { display: flex; gap: 0.5em; flex-wrap: wrap; margin-bottom: 0.5em; }

#skip-link { position: absolute; top: -999px; left: 0; padding: 0.5em 1em; background: var(--container); color: var(--text); z-index: 100; }
#skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.tab-list { display: flex; gap: 0.5em; flex-wrap: wrap; list-style: none; border-bottom: 2px solid var(--muted); margin-bottom: var(--sp); padding: 0; }
.tab-list li { margin: 0; }
.tab-btn { background: none; border: none; border-bottom: 3px solid transparent; padding: 0.5em 1em; margin-bottom: -2px; cursor: pointer; font-family: inherit; font-size: 1em; color: var(--muted); }
.tab-btn:hover { color: var(--text); }
.tab-btn[aria-selected="true"] { border-bottom-color: var(--link); color: var(--link); font-weight: bold; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.game-section { margin-bottom: 1em; }
.status { font-style: italic; color: var(--muted); }
.progress { min-height: 1.4em; margin-top: 0.5em; color: var(--muted); }