@font-face { font-family: 'PressStart'; src: url('/fonts/PressStart2P.ttf') format('truetype'); font-display: swap; }
:root {
  --bg: #17181c; --panel: #23252b; --panel2: #2c2f36; --line: #3a3d45;
  --grass: #5e9d34; --grass-hi: #78be46; --dirt: #86603f; --dirt-dk: #5f4430;
  --text: #ecebe6; --muted: #a3a6ad; --red: #d9534f; --gold: #f2c14e; --diamond: #4fd1c5;
  --pix: 'PressStart', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; max-width: 100%; overflow-x: hidden; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: var(--grass-hi); }
h1, h2, h3, .pix { font-family: var(--pix); font-weight: normal; letter-spacing: .5px; line-height: 1.5; }
h1 { font-size: 16px; margin: 0; } h2 { font-size: 13px; margin: 0 0 12px; } h3 { font-size: 11px; margin: 0 0 8px; }
.grassbar { height: 10px; background: linear-gradient(var(--grass) 0 50%, var(--dirt) 50% 100%); box-shadow: inset 0 -3px 0 var(--dirt-dk); }
header.top { position: sticky; top: 0; z-index: 10; background: #1d1f24; padding: calc(env(safe-area-inset-top) + 10px) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 10px; border-bottom: 3px solid #000; }
header.top img { width: 28px; height: 28px; image-rendering: pixelated; }
header.top .who { margin-left: auto; font-size: 13px; color: var(--muted); }
main { max-width: 900px; margin: 0 auto; padding: 14px max(12px, env(safe-area-inset-right)) calc(90px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.card { background: var(--panel); border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 14px; margin-bottom: 14px; }
.empty { border: 2px dashed var(--line); padding: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.empty .pix { display: block; color: var(--text); font-size: 10px; margin-bottom: 8px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); font-size: 13px; }
.pill { display: inline-block; font-family: var(--pix); font-size: 9px; padding: 5px 7px; border: 2px solid #000; background: var(--panel2); }
.pill.on { background: var(--grass); } .pill.off { background: #555; } .pill.warn { background: var(--dirt); } .pill.admin { background: var(--gold); color: #000; }
.dot { width: 10px; height: 10px; display: inline-block; border: 2px solid #000; background: #666; vertical-align: middle; }
.dot.on { background: var(--grass-hi); box-shadow: 0 0 6px var(--grass-hi); }
ul.list { list-style: none; margin: 0; padding: 0; }
ul.list li { padding: 10px 4px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
ul.list li:last-child { border-bottom: 0; }
ul.list .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.btn { font-family: var(--pix); font-size: 10px; color: #fff; background: #6b6b6b; border: 3px solid #000; box-shadow: inset -3px -3px 0 rgba(0,0,0,.35), inset 3px 3px 0 rgba(255,255,255,.25); padding: 11px 13px; cursor: pointer; min-height: 44px; }
.btn:active { box-shadow: inset 3px 3px 0 rgba(0,0,0,.35); }
.btn.green { background: var(--grass); } .btn.red { background: #a33b37; } .btn.small { font-size: 8px; padding: 7px 9px; min-height: 34px; }
.btn:disabled { opacity: .5; }
input, select, textarea { font: inherit; font-size: 16px; max-width: 100%; color: var(--text); background: #111; border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 10px; min-height: 44px; width: 100%; border-radius: 0; }
input:focus { outline: 2px solid var(--grass-hi); }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
.err { color: #ff8a80; font-size: 14px; min-height: 1.2em; margin-top: 8px; }
.ok { color: var(--grass-hi); }
nav.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; background: #1d1f24; border-top: 3px solid #000; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow-x: auto; }
nav.tabs button { flex: 1 1 0; min-width: 0; background: none; border: 0; color: var(--muted); padding: 8px 0 9px; font-family: var(--pix); font-size: 6.5px; cursor: pointer; white-space: nowrap; overflow: hidden; }
nav.tabs button .ic { display: block; font-size: 20px; font-family: system-ui; margin-bottom: 4px; }
nav.tabs button.active { color: #fff; background: var(--panel2); box-shadow: inset 0 3px 0 var(--grass-hi); }
section.view { display: none; } section.view.active { display: block; }
.progress { height: 14px; background: #111; border: 2px solid #000; position: relative; margin: 6px 0; }
.progress > div { height: 100%; background: linear-gradient(var(--grass-hi), var(--grass)); }
.progress.done > div { background: linear-gradient(var(--diamond), #2c9c92); }
.don { padding: 12px 4px; border-bottom: 1px solid var(--line); }
.don:last-child { border-bottom: 0; }
.don .name { font-weight: 600; }
.don.done .name { text-decoration: line-through; color: var(--muted); }
.contribs { font-size: 13px; color: var(--muted); margin-top: 4px; }
.contribs button { background: none; border: 0; color: #ff8a80; cursor: pointer; font-size: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mapframe { width: 100%; height: 70vh; border: 3px solid #000; background: #000; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.switch input { width: 26px; height: 26px; min-height: 0; accent-color: var(--grass); }
details { margin: 8px 0; } summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
code, .code { font-family: ui-monospace, monospace; background: #111; padding: 2px 6px; border: 1px solid var(--line); overflow-wrap: anywhere; }
.auth-wrap { max-width: 420px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 30px) max(16px, env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.auth-wrap .logo { text-align: center; margin-bottom: 18px; }
.auth-wrap .logo img { width: 72px; height: 72px; image-rendering: pixelated; }
.auth-wrap .logo h1 { margin-top: 12px; font-size: 15px; }
@media (min-width: 760px) {
  nav.tabs button { min-width: 62px; }
  nav.tabs { position: sticky; top: 51px; bottom: auto; border-top: 0; border-bottom: 3px solid #000; justify-content: center; }
  nav.tabs button { flex: 0 0 auto; padding: 10px 16px; font-size: 8px; }
  nav.tabs button .ic { display: inline; font-size: 14px; margin: 0 6px 0 0; }
  main { padding-bottom: 30px; }
}

/* iPhone home-screen tutorial video (bottom of every page) */
footer.howto { background: var(--panel); border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 14px; margin: 24px 0 14px; text-align: center; }
footer.howto p { margin: -4px 0 12px; }
footer.howto video { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 9 / 16; margin: 0 auto; background: #000; border: 3px solid #000; }

/* mobile hardening: nothing may be wider than the screen */
img, video, iframe, canvas, svg, table, pre { max-width: 100%; }
img, video { height: auto; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
table { display: block; overflow-x: auto; }
.card, .auth-wrap, main, footer.howto, ul.list li, .row > * { min-width: 0; }
.card, .muted, .err, label, h1, h2, h3, p, li, .contribs, .pill, .who { overflow-wrap: anywhere; }
.grid2 > * { min-width: 0; }
button, input, select, textarea, a { touch-action: manipulation; }
footer.howto video { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }