/* SPDX-License-Identifier: MIT */
/* Dark grey bars, light text, one orange accent. Plain Helvetica/Arial from the visitor's own
   machine: no font files. Nothing is fetched from anywhere but this site and the tile host. */
:root {
  --bar: #262626;
  --btn: #2d2d2d;
  --ink: #ececec;
  --grey: #9a9a9a;
  --off: #6c6c6c;
  --line: #444444;
  --orange: #fa9549;
  --label: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: flex; flex-direction: column; height: 100dvh;
  background: #000; color: var(--ink);
  font: 13px/1.4 var(--text);
  overflow: hidden; overscroll-behavior: none;
}
[hidden] { display: none !important; }

/* ---- top bar: name, a divider, then the game versions */
header {
  flex: 0 0 auto; display: flex; align-items: stretch;
  background: var(--bar); border-bottom: 1px solid var(--line);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 calc(14px + env(safe-area-inset-left, 0px));
  font: 700 16px/48px var(--label);
}
h1 {
  margin: 0 22px 0 0;
  font: inherit; font-size: 20px; white-space: nowrap; color: var(--orange);
}
nav { display: flex; overflow-x: auto; scrollbar-width: none; }
nav button {
  all: unset; box-sizing: border-box; height: 48px; padding: 0 13px;
  white-space: nowrap; cursor: pointer; color: var(--ink);
}
nav button[aria-current] { background: var(--orange); color: #1c1c1c; }
nav button:disabled { color: var(--off); cursor: default; }
nav button:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

/* ---- download menu, at the right end of the top bar */
header { position: relative; }
#dl { margin-left: auto; display: flex; align-items: stretch; }
#dlbtn {
  all: unset; box-sizing: border-box; height: 48px; padding: 0 14px; display: flex; align-items: center;
  white-space: nowrap; cursor: pointer; background: var(--orange); color: #1c1c1c;
}
#dlbtn:hover, #dlbtn[aria-expanded="true"] { background: #ffa968; }
#dlbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
#dlpanel {
  position: absolute; right: env(safe-area-inset-right, 0px); top: 100%; z-index: 20; width: 260px;
  background: var(--bar); border: 1px solid var(--line); border-top: 0; padding: 12px; display: grid; gap: 10px;
  font: 13px/1.4 var(--text);
}
#dlpanel label { display: grid; gap: 4px; font-size: 12px; color: var(--grey); }
#dlpanel select { font: inherit; font-size: 14px; color: var(--ink); background: var(--btn); border: 1px solid var(--line); border-radius: 0; padding: 6px 8px; }
#dlsize { font-size: 12px; color: var(--grey); }
#dlgo { display: block; text-align: center; padding: 8px; background: var(--orange); color: #1c1c1c; font-weight: 700; text-decoration: none; cursor: pointer; }
#dlgo:hover { background: #ffa968; }

/* ---- the map and what sits on it */
#stage { position: relative; flex: 1 1 auto; min-height: 0; }
#map { position: absolute; inset: 0; background: #000; }
#grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
#nojs { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--grey); }
#nojs a { color: var(--ink); }

#tools {
  position: absolute; z-index: 5; display: flex; flex-direction: column;
  right: calc(10px + env(safe-area-inset-right, 0px)); top: 10px;
  background: var(--btn); border: 1px solid var(--line);
}
#tools button {
  all: unset; box-sizing: border-box; width: 38px; height: 38px;
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
}
#tools button + button { border-top: 1px solid var(--line); }
#tools button:hover { color: var(--orange); background: #383838; }
#tools button:active { background: #444444; }
#tools button[aria-pressed="true"] { color: var(--orange); }
#tools button:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
#tools svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

#read, #bar, #note {
  position: absolute; z-index: 5; background: var(--bar); border: 0;
  color: var(--ink); font: 700 14px/1.4 var(--label); pointer-events: none;
}
#read, #bar { bottom: 10px; padding: 3px 9px; }
#read { left: calc(10px + env(safe-area-inset-left, 0px)); font-variant-numeric: tabular-nums; color: var(--orange); }
#read b { font-weight: 700; color: var(--ink); margin-left: 3px; }
#bar { right: calc(10px + env(safe-area-inset-right, 0px)); width: 172px; text-align: center; padding-bottom: 6px; }
#bar i { display: block; height: 5px; margin: 1px auto 0; max-width: 100%; border: 2px solid var(--orange); border-top: 0; }
#note { left: 50%; top: 10px; transform: translateX(-50%); padding: 5px 12px; white-space: nowrap; }

footer {
  flex: 0 0 auto; background: var(--bar); border-top: 1px solid var(--line);
  padding: 5px calc(14px + env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
  font-size: 13px; color: var(--grey);
  display: flex; align-items: center; gap: 16px;
}
footer p { margin: 0; flex: 1 1 auto; min-width: 0; }
/* Ko-fi link: its own box at the right end; the notice wraps beside it, never under it */
#kofi {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px; white-space: nowrap;
  color: var(--ink); font: 700 13px/1 var(--label); text-decoration: none;
}
#kofi img { width: 24px; height: auto; display: block; }
#kofi:hover { color: var(--orange); }
#kofi:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

@media (max-width: 640px) {
  header { flex-direction: column; line-height: 40px; }
  h1 { margin: 0; }
  nav { margin: 0 -7px; }
  nav button { height: 40px; font-size: 13px; padding: 0 7px; }
  #dl { position: absolute; right: env(safe-area-inset-right, 0px); top: env(safe-area-inset-top, 0px); }
  #dlbtn { height: 40px; font-size: 14px; }
  footer { font-size: 11px; gap: 10px; }
  #kofi { font-size: 11px; flex-direction: column; gap: 3px; }
}