/* Valheim-flavoured pixel theme: carved stone, ember light, hard edges.
   Self-hosted OFL fonts, no external requests. */
@font-face {
  font-family: 'Metamorphous';
  src: url('fonts/Metamorphous.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('fonts/Silkscreen.ttf') format('truetype');
  font-display: swap;
}

:root {
  --bg: #15120e;            /* damp soil */
  --bg-2: #1b1712;
  --card: #221c16;          /* wet stone */
  --card-2: #2c2419;
  --line: #43372a;          /* mortar */
  --fg: #ecdfc6;            /* parchment */
  --muted: #9d8b6e;
  --accent: #e3a83c;        /* torchlight */
  --accent-dim: #8a6626;
  --ok: #7fa653;            /* moss */
  --warn: #d9932f;
  --bad: #c04a37;           /* blood */
  --info: #6f9cb5;          /* cold water */
  --ember: #ff8a1e;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: 'Metamorphous', 'Georgia', serif;
  --pixel: 'Silkscreen', 'Courier New', monospace;
  --px: 2px;                /* one "pixel" of the UI grid */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Faint stone grain; two offset gradients keep it from looking like stripes. */
body {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 4px),
    radial-gradient(120% 80% at 50% 0%, #241d15 0%, var(--bg) 60%);
  background-attachment: fixed;
  image-rendering: pixelated;
}
a { color: var(--accent); }
a:hover { color: var(--ember); }
code, .mono { font-family: var(--mono); font-size: .92em; color: var(--accent); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .02em; }

/* ---- header ------------------------------------------------------------- */
header { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 20px; border-bottom: var(--px) solid var(--line);
  background: linear-gradient(180deg, #241d15, #191510); flex-wrap: wrap; }
.brand { display: flex; gap: 14px; align-items: center; min-width: 0; }
.logo { display: block; height: 76px; width: auto; image-rendering: pixelated; }
h1 { margin: 0; font-size: 20px; color: var(--fg); }
.sub { color: var(--muted); font-size: 12px; font-family: var(--pixel); }
.hdr-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---- layout ------------------------------------------------------------- */
main { padding: 16px 20px 40px; max-width: 1500px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.grid + .grid { margin-top: 14px; }
/* A section whose only card is hidden (mod missing) must not leave a gap. */
.grid:not(:has(> article:not([hidden]))) { display: none; }

/* Carved stone panel: hard 2px frame, notched corners, inner bevel. */
.card { background: linear-gradient(180deg, var(--card), #1d1811);
  border: var(--px) solid var(--line); border-radius: 0; padding: 14px 16px; min-width: 0;
  box-shadow: inset 0 var(--px) 0 rgba(255,225,170,.05), inset 0 calc(var(--px) * -1) 0 rgba(0,0,0,.45),
    0 var(--px) 0 rgba(0,0,0,.35);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.card.wide { grid-column: 1 / -1; }
.card h2 { margin: 0 0 12px; font-size: 15px; letter-spacing: .06em; color: var(--accent);
  text-transform: uppercase; text-shadow: 0 var(--px) 0 rgba(0,0,0,.6); }
.card h2 code { color: var(--muted); font-size: 12px; }

/* ---- key/value and numbers ---------------------------------------------- */
.big { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 12px; }
.big > span:first-child { font-family: var(--pixel); font-size: 38px; color: var(--accent);
  line-height: 1; text-shadow: 0 0 12px rgba(227,168,60,.35), 0 var(--px) 0 #000; }
.big-sub { color: var(--muted); font-family: var(--pixel); font-size: 11px; text-transform: uppercase; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; margin: 0; }
.kv dt { color: var(--muted); font-family: var(--pixel); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.muted { color: var(--muted); } .small { font-size: 12px; }

/* ---- pills -------------------------------------------------------------- */
.pill { display: inline-block; padding: 3px 9px; font-family: var(--pixel); font-size: 10px;
  text-transform: uppercase; background: var(--card-2); border: var(--px) solid var(--line);
  color: var(--fg); }
.pill.small { font-size: 9px; padding: 2px 7px; vertical-align: middle; }
.pill.ok { color: var(--ok); border-color: var(--ok); }
.pill.warn { color: var(--warn); border-color: var(--warn); }
.pill.bad { color: var(--bad); border-color: var(--bad); box-shadow: 0 0 10px rgba(192,74,55,.35); }

/* ---- language switcher --------------------------------------------------- */
.langs { display: inline-flex; border: var(--px) solid var(--line); }
.langs button { background: none; border: 0; color: var(--muted); font-family: var(--pixel);
  font-size: 10px; padding: 4px 9px; cursor: pointer; }
.langs button + button { border-left: var(--px) solid var(--line); }
.langs button:hover { color: var(--fg); background: var(--card-2); }
.langs button.active { background: var(--accent-dim); color: #1b1610; }

/* ---- join block ---------------------------------------------------------- */
.join-row { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 8px; }
.join-item { display: flex; flex-direction: column; gap: 3px; }
.join-item .small { font-family: var(--pixel); font-size: 10px; text-transform: uppercase; }
.join-item code { font-family: var(--pixel); font-size: 17px; color: var(--accent);
  text-shadow: 0 0 10px rgba(227,168,60,.3); }
code.copy { cursor: pointer; user-select: all; border-bottom: var(--px) dashed var(--line); }
code.copy:hover { border-bottom-color: var(--accent); color: var(--ember); }
code.copied { color: var(--ok); border-bottom-color: var(--ok); }

/* ---- connect hint --------------------------------------------------------- */
.connect { margin-top: 12px; padding-top: 10px; border-top: var(--px) solid var(--line);
  display: grid; gap: 4px; font-size: 13.5px; }
.connect code { user-select: all; font-family: var(--pixel); font-size: 12px; }

/* ---- configuration chips -------------------------------------------------- */
.cfg { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg-item { background: var(--card-2); border: var(--px) solid var(--line); padding: 5px 10px;
  display: flex; flex-direction: column; gap: 2px; min-width: 96px; }
.cfg-item .k { color: var(--muted); font-family: var(--pixel); font-size: 9px;
  text-transform: uppercase; letter-spacing: .05em; }
.cfg-item .v { font-size: 13.5px; }
.cfg-item.on .v { color: var(--ok); } .cfg-item.off .v { color: var(--muted); }
.cfg-item.mod .v { color: var(--accent); }
.cfg-h { font-family: var(--pixel); font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; margin: 16px 0 8px; }

/* ---- lists and roster ----------------------------------------------------- */
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 7px 0; border-bottom: var(--px) solid var(--line);
  display: flex; justify-content: space-between; gap: 10px; }
.list li:last-child { border-bottom: 0; }
.roster li { align-items: baseline; }
.roster .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.roster .nm { display: flex; gap: 7px; align-items: baseline; }
.roster .dot { font-size: 9px; line-height: 1; }
.roster li.on .dot { color: var(--ok); text-shadow: 0 0 8px var(--ok); }
.roster li.off { opacity: .6; }
.roster li.off .dot { color: var(--muted); }
.roster .meta { font-size: 11px; color: var(--muted); }
.roster .right { text-align: right; white-space: nowrap; font-family: var(--pixel);
  font-size: 10px; color: var(--muted); }

/* ---- tables --------------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.tbl th { text-align: left; color: var(--muted); font-family: var(--pixel); font-size: 9.5px;
  text-transform: uppercase; padding: 5px 6px; border-bottom: var(--px) solid var(--line); }
.tbl td { padding: 5px 6px; border-bottom: 1px solid #332a20; font-family: var(--mono);
  font-size: 12.5px; white-space: nowrap; }
.tbl td.act { text-align: right; } .tbl .btn { padding: 2px 8px; font-size: 10px; }

/* ---- most active ----------------------------------------------------------- */
.tbl th.num, .tbl td.num { text-align: right; }
.top-tbl td { white-space: nowrap; }
.top-tbl .rank { color: var(--muted); font-family: var(--pixel); font-size: 11px; width: 1%; }
.top-tbl tr.on .nm { color: var(--fg); }
.top-tbl tr.on .dot { color: var(--ok); text-shadow: 0 0 8px var(--ok); font-size: 9px; }
.top-tbl tr:not(.on) { opacity: .75; }
/* The bar carries the ranking: reading three digits is slower than seeing a
   length, so the number sits beside it rather than on its own. */
.top-tbl .played { display: flex; align-items: center; gap: 8px; min-width: 190px; }
.top-tbl .played .bar { flex: 1; height: 8px; }
.top-tbl .played .bar > div { background: var(--accent); }
.top-tbl .dead-bar > div { background: var(--bad); }
.top-tbl td.zero { color: var(--muted); }

/* ---- chronicle -------------------------------------------------------------- */
.chips { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.chip { background: var(--card-2); border: var(--px) solid var(--line); color: var(--muted);
  font-family: var(--pixel); font-size: 9.5px; text-transform: uppercase;
  padding: 3px 8px; cursor: pointer; }
.chip:hover { color: var(--fg); }
.chip.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.chron li { align-items: baseline; gap: 10px; }
.chron time { color: var(--muted); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.chron .what { flex: 1; min-width: 0; }
.chron .mark { font-size: 11px; margin-right: 6px; }
.chron .k-death .mark { color: var(--bad); }
.chron .k-join .mark { color: var(--ok); }
.chron .k-leave .mark { color: var(--warn); }
.chron .k-wrongpw .mark { color: var(--bad); }
.chron .where { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.chron a.where:hover { color: var(--accent); }

/* ---- progress ladder + landmarks -------------------------------------------- */
.chips.wrap { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.chips.wrap .chip { cursor: default; }
.ladder { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 10px 0 0; padding: 0; }
.ladder li { flex: 1 1 130px; padding: 7px 10px; border: var(--px) solid var(--line);
  border-right: 0; background: var(--card-2); color: var(--muted);
  font-family: var(--pixel); font-size: 9.5px; text-transform: uppercase; }
.ladder li:last-child { border-right: var(--px) solid var(--line); }
.ladder li.have { color: var(--fg); background: #2a2114; border-color: var(--accent-dim); }
/* The rung actually standing on, as opposed to the ones already climbed. */
.ladder li.at { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.ladder .n { opacity: .55; margin-right: 6px; }

.boss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: var(--px) solid var(--line); }
.boss .nm { font-family: var(--display); font-size: 16px; color: var(--fg); min-width: 130px; }
.boss .sites { display: flex; flex-wrap: wrap; gap: 6px; }
.boss .site { font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: var(--px) solid var(--line); padding: 2px 7px; }
.boss .site:hover { color: var(--accent); border-color: var(--accent-dim); }
.boss .site.near { color: var(--accent); }
.landmarks li { font-size: 13px; }
.landmarks .what { font-family: var(--pixel); font-size: 9.5px; text-transform: uppercase;
  color: var(--muted); margin-right: 8px; }

.wm-gear { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wm-gear span { font-size: 11px; color: var(--muted); border: var(--px) solid var(--line);
  padding: 1px 6px; }

/* ---- meters (segmented, like a game bar) ---------------------------------- */
.meter { margin-top: 12px; }
.meter-lbl { display: flex; justify-content: space-between; font-family: var(--pixel);
  font-size: 10px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; }
.bar { height: 10px; background: #100d0a; border: var(--px) solid var(--line); overflow: hidden; }
.bar > div { height: 100%; width: 0; background: var(--ok); transition: width .4s steps(12);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 6px); }
.bar > div.warn { background-color: var(--warn); } .bar > div.bad { background-color: var(--bad); }

/* ---- webmap player cards --------------------------------------------------- */
.wm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.wm-player { background: var(--card-2); border: var(--px) solid var(--line); padding: 10px 12px; }
.wm-player.dead { border-color: var(--bad); }
.wm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.wm-head b { font-family: var(--display); font-size: 16px; font-weight: 400; }
.wm-bar { height: 8px; background: #100d0a; border: 1px solid var(--line); overflow: hidden; margin: 3px 0 8px; }
.wm-bar > div { height: 100%; transition: width .4s steps(10);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 2px, transparent 2px 6px); }
.wm-hp > div { background-color: var(--bad); } .wm-st > div { background-color: var(--warn); }
.wm-ei > div { background-color: var(--info); }
.wm-lbl { display: flex; justify-content: space-between; font-family: var(--pixel); font-size: 9.5px;
  color: var(--muted); text-transform: uppercase; }

/* ---- map ------------------------------------------------------------------- */
.map-embed { position: relative; width: 100%; height: 420px; border: var(--px) solid var(--line);
  background: #0d0b08; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-load { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent;
  border: 0; color: var(--muted); font-family: var(--pixel); font-size: 12px; cursor: pointer; }
.map-load:hover { color: var(--accent); }

/* ---- charts ---------------------------------------------------------------- */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.charts figure { margin: 0; }
.charts figcaption { color: var(--muted); font-family: var(--pixel); font-size: 9.5px;
  text-transform: uppercase; margin-bottom: 5px; display: flex; justify-content: space-between; }
.charts figcaption b { color: var(--fg); font-weight: 400; }
.charts svg { width: 100%; height: 70px; display: block; border: 1px solid #2e261d; background: #100d0a; }
.charts .grid-line { stroke: #2e261d; stroke-width: 1; }
.charts .area { fill: var(--accent); opacity: .16; }
.charts .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: miter; }
.charts .line2 { fill: none; stroke: var(--info); stroke-width: 2; stroke-linejoin: miter; }
.charts .empty { color: var(--muted); font-family: var(--pixel); font-size: 10px;
  padding: 24px 0; text-align: center; }

/* ---- events ----------------------------------------------------------------- */
.events { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.events li { padding: 3px 0; break-inside: avoid; font-size: 13.5px; }
.events time { color: var(--muted); font-family: var(--mono); font-size: 11.5px; margin-right: 8px; }
.ev-join { color: var(--ok); } .ev-leave { color: var(--warn); } .ev-error { color: var(--bad); }
.ev-save { color: var(--info); } .ev-warn { color: var(--warn); }

/* ---- log --------------------------------------------------------------------- */
.log-card { margin-top: 14px; }
.log-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.log-toolbar h2 { margin: 0; flex: 1 1 auto; font-family: var(--mono); font-size: 12px;
  text-transform: none; letter-spacing: 0; color: var(--muted); }
.log-toolbar input[type=search] { background: #100d0a; border: var(--px) solid var(--line); color: var(--fg);
  padding: 5px 9px; min-width: 200px; font-family: var(--mono); font-size: 12.5px; }
.log-toolbar label { font-family: var(--pixel); font-size: 10px; color: var(--muted);
  display: flex; gap: 6px; align-items: center; text-transform: uppercase; }
.log-toolbar button { background: var(--card-2); border: var(--px) solid var(--line); color: var(--fg);
  padding: 5px 11px; cursor: pointer; font-family: var(--pixel); font-size: 10px; text-transform: uppercase; }
#log { margin: 0; height: 60vh; min-height: 300px; overflow: auto; background: #0d0b08;
  border: var(--px) solid var(--line); padding: 10px 12px; font: 12.5px/1.55 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere; }
#log .ln { display: block; }
#log .ts { color: #6b5b45; }
#log .l-join { color: var(--ok); } #log .l-leave { color: var(--warn); } #log .l-error { color: var(--bad); }
#log .l-save { color: var(--info); } #log .l-noise { color: #5a4c3b; } #log .l-hidden { display: none; }
#log .ln.l-evt { font-weight: 700; }

/* ---- admin -------------------------------------------------------------------- */
.banner { background: linear-gradient(180deg, #4a2c0c, #33200a); border-bottom: var(--px) solid var(--warn);
  color: var(--warn); padding: 10px 20px; text-align: center; font-family: var(--pixel); font-size: 12px; }
.admin { margin-top: 14px; }
.admin-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-head h2 { margin: 0; }
#admin-login { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin input:not([type=checkbox]), .admin select, .admin textarea {
  background: #100d0a; border: var(--px) solid var(--line); color: var(--fg); padding: 6px 9px; font: inherit; }
.admin textarea { font-family: var(--mono); font-size: 12.5px; width: 100%; }
.admin input.num { width: 72px; }
.admin .grow { flex: 1 1 200px; }
.tabs { display: flex; gap: 2px; margin: 14px 0; border-bottom: var(--px) solid var(--line); flex-wrap: wrap; }
.tabs button { background: none; border: 0; border-bottom: var(--px) solid transparent; color: var(--muted);
  padding: 8px 12px; cursor: pointer; font-family: var(--pixel); font-size: 10px; text-transform: uppercase; }
.tabs button:hover { color: var(--fg); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab { display: none; } .tab.active { display: block; }
.tab h3 { font-family: var(--pixel); font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; margin: 16px 0 6px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.row label { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13.5px; }
.btn { background: linear-gradient(180deg, var(--card-2), #211a12); border: var(--px) solid var(--line);
  color: var(--fg); padding: 7px 14px; cursor: pointer; font-family: var(--pixel); font-size: 10.5px;
  text-transform: uppercase; box-shadow: 0 var(--px) 0 rgba(0,0,0,.5); }
.btn:hover { border-color: var(--muted); }
.btn:active { transform: translateY(var(--px)); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.ok { border-color: var(--ok); color: var(--ok); }
.btn.bad { border-color: var(--bad); color: var(--bad); }
.btn.warn { border-color: var(--warn); color: var(--warn); }
.lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.lists label { display: block; color: var(--muted); font-family: var(--pixel); font-size: 10px; text-transform: uppercase; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 16px; align-items: end; }
.form label { display: flex; flex-direction: column; gap: 5px; color: var(--muted);
  font-family: var(--pixel); font-size: 10px; text-transform: uppercase; }
.form label.chk { flex-direction: row; align-items: center; gap: 8px; color: var(--fg);
  font-family: inherit; font-size: 13.5px; text-transform: none; }
.form .row { grid-column: 1 / -1; }
.admin-msg { padding: 8px 12px; margin-bottom: 10px; background: var(--card-2);
  border: var(--px) solid var(--line); font-size: 13.5px; }
.admin-msg.err { border-color: var(--bad); color: var(--bad); }
.admin-msg.ok { border-color: var(--ok); color: var(--ok); }
.raw { background: #0d0b08; border: var(--px) solid var(--line); padding: 10px;
  font: 12px/1.55 var(--mono); max-height: 50vh; overflow: auto; white-space: pre-wrap;
  overflow-wrap: anywhere; margin: 10px 0; }
.job-ok { color: var(--ok); } .job-failed { color: var(--bad); } .job-running { color: var(--warn); }

footer { text-align: center; padding: 14px; border-top: var(--px) solid var(--line);
  font-family: var(--pixel); font-size: 10px; }

/* ---- narrow screens ------------------------------------------------------------ */
@media (max-width: 720px) {
  .events { columns: 1; }
  main { padding: 12px; }
  header { padding: 10px 12px; }
  .logo { height: 54px; }
  .map-embed { height: 300px; }
  .big > span:first-child { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo { animation: none; }
  .bar > div, .wm-bar > div { transition: none; }
}