/* One stylesheet, no framework. Dark by default because the map is dark and a
   white page around a black map is unreadable at night, which is when this
   server is played. */
:root {
  --bg: #14171c;
  --panel: #1c2027;
  --panel-2: #232833;
  --line: #2e343f;
  --text: #e6e9ee;
  --muted: #98a1b0;
  --green: #6fbf4f;
  --amber: #e3b23c;
  --red: #d9534f;
  --blue: #5aa9e6;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* The whole page's show/hide is `el.hidden = true/false`, and the browser's own
   rule for that is `[hidden] { display: none }` - at USER-AGENT specificity,
   which any class selector in this file beats. `.gate` and `.modal` below both
   set `display: grid`, so `<div id="config-modal" class="modal" hidden>` rendered
   anyway: opening the panel showed an empty "Config" dialog over a black page,
   with the real app sitting underneath three stacked full-screen overlays.
   Found by opening it rather than by reading it. tests\page.test.mjs asserts this
   line still exists, and names the classes that would break without it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1 { font-size: 1.4rem; margin: 0 0 .5rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; letter-spacing: .01em; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
a { color: var(--blue); }
.muted { color: var(--muted); font-size: .88rem; }
.error { color: var(--red); }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ gates */
.gate {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg); z-index: 50; padding: 1rem;
}
.gate .card { max-width: 26rem; width: 100%; }

/* ---------------------------------------------------------------- header */
header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .6rem; }
.brand strong { display: block; line-height: 1.1; }
.cube {
  width: 26px; height: 26px; border-radius: 4px;
  background: linear-gradient(#5b8c3f 0 55%, #6b4a2f 55% 100%);
  box-shadow: inset 0 0 0 1px #0006;
}
.head-status { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

nav { display: flex; gap: .25rem; flex-wrap: wrap; }
nav button {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: .35rem .7rem; border-radius: var(--radius); cursor: pointer; font: inherit;
}
nav button:hover { color: var(--text); background: var(--panel-2); }
nav button.on { color: var(--text); background: var(--panel-2); border-color: var(--line); }

/* ----------------------------------------------------------------- tabs */
main { padding: 1rem; max-width: 1500px; margin: 0 auto; }
.tab { display: none; }
.tab.on { display: block; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem;
}
.card.wide { max-width: 60rem; width: 100%; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

/* ------------------------------------------------------------------ map */
#tab-map.on { display: grid; grid-template-columns: 1fr 20rem; gap: 1rem; align-items: start; }
@media (max-width: 900px) { #tab-map.on { grid-template-columns: 1fr; } }
.map-wrap { position: relative; height: min(75vh, 800px); }
#map-frame {
  width: 100%; height: 100%; border: 1px solid var(--line);
  border-radius: var(--radius); background: #0b0d10;
}
.map-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: 2rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.cards { display: flex; flex-direction: column; gap: .6rem; }
.pcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .8rem;
}
.pcard .name { font-weight: 600; }
.pcard .line { font-size: .85rem; color: var(--muted); }

/* ---------------------------------------------------------------- chips */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: .15rem .6rem; font-size: .82rem;
}
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted); }
.dot.up { background: var(--green); }
.dot.warn { background: var(--amber); }
.dot.down { background: var(--red); }

/* --------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: var(--panel); }
.scroll { max-height: 24rem; overflow: auto; }

/* ------------------------------------------------------------- chat log */
#chat-log .row { padding: .2rem 0; border-bottom: 1px solid #ffffff08; font-size: .88rem; }
#chat-log time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: .5rem; }
.who { font-weight: 600; }
.ev-death { color: #e79c9c; }
.ev-advancement { color: #b9e79c; }
.ev-join { color: var(--green); }
.ev-leave { color: var(--muted); }
.console { font-family: Consolas, "Cascadia Mono", monospace; font-size: .8rem; white-space: pre-wrap; }
.console .row { padding: 0; border: 0; }

/* ----------------------------------------------------------------- mods */
.mod {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem .8rem; margin-bottom: .5rem; background: var(--panel-2);
}
.mod summary { cursor: pointer; list-style: none; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.mod summary::-webkit-details-marker { display: none; }
.mod .cat { font-size: .78rem; color: var(--muted); }
.mod dl { display: grid; grid-template-columns: 9rem 1fr; gap: .3rem .8rem; margin: .7rem 0 0; font-size: .88rem; }
.mod dt { color: var(--muted); }
.mod dd { margin: 0; }

/* ---------------------------------------------------------------- forms */
label { display: block; margin: .6rem 0; font-size: .9rem; color: var(--muted); }
input, textarea, select {
  width: 100%; margin-top: .25rem; padding: .45rem .55rem;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; font: inherit;
}
textarea { font-family: Consolas, "Cascadia Mono", monospace; font-size: .85rem; }
.hp { position: absolute; left: -9999px; }
button {
  background: var(--blue); color: #06121c; border: 0; border-radius: 6px;
  padding: .45rem .9rem; font: inherit; font-weight: 600; cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 400; }
button.ghost:hover { color: var(--text); }
button.danger { background: var(--red); color: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }

/* ---------------------------------------------------------------- modal */
.modal {
  position: fixed; inset: 0; background: #000a; z-index: 60;
  display: grid; place-items: center; padding: 1rem; overflow: auto;
}
.modal .card { max-width: 26rem; width: 100%; }
.modal .card.wide { max-width: 60rem; }

pre {
  background: #0f1216; border: 1px solid var(--line); border-radius: 6px;
  padding: .6rem .7rem; overflow: auto; font-size: .82rem;
}
code { background: #0f1216; padding: 0 .25rem; border-radius: 3px; font-size: .88em; }
.md h3 { margin-top: .8rem; }
.md ul { padding-left: 1.2rem; }
.md table { margin: .5rem 0; }