/* Pixel Map: a full-screen map with chunky pixel buttons. Everything sits on a 4 px grid; borders are hard 2 px,
   shadows are solid offsets (no blur), art is drawn pixelated. Font: Pixelify Sans (SIL OFL, vendor/font/OFL.txt). */
@font-face { font-family: 'Pixelify Sans'; font-weight: 400; font-display: swap; src: url(vendor/font/pixelify-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-weight: 700; font-display: swap; src: url(vendor/font/pixelify-sans-latin-700-normal.woff2) format('woff2'); }

:root {
  --ink: #1f1a33;        /* borders, text */
  --paper: #fdf8ec;      /* buttons, panels */
  --paper2: #efe5cf;     /* pressed, wells */
  --hi: #ffffff;         /* bevel light */
  --lo: #cdbf9f;         /* bevel shade */
  --muted: #6e6688;
  --accent: #ff5a36;     /* Paint */
  --accent-lo: #c23a1c;
  --accent-hi: #ff9a7a;
  --gold: #ffc425;
  --ok: #2fb35f;
  --b: 40px;             /* icon button size */
  --g: 8px;              /* gap / edge margin */
  --sw: 32px;            /* colour swatch */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #e8e4da; color: var(--ink);
  font: 16px/1.25 'Pixelify Sans', ui-monospace, monospace; -webkit-font-smoothing: none; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
p { margin: 0 0 8px; }
h2, h3, h4 { margin: 0; font-weight: 700; }
h2 { font-size: 20px; }
h3 { font-size: 16px; margin: 0 0 4px; }
h4 { font-size: 14px; margin: 8px 0 4px; color: var(--muted); }
.muted { color: var(--muted); }
.small-text { font-size: 14px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
svg { display: block; width: 100%; height: 100%; }
i[data-icon] { display: block; width: 24px; height: 24px; flex: none; }

/* ---- chunky buttons ---- */
button { font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 0; padding: 4px 12px;
  min-height: 32px; cursor: pointer; box-shadow: inset -2px -2px 0 var(--lo), inset 2px 2px 0 var(--hi), 0 2px 0 var(--ink); }
button:hover:not(:disabled) { background: #fff; }
button:active:not(:disabled), button.on { transform: translateY(2px); box-shadow: inset 2px 2px 0 var(--lo); background: var(--paper2); }
button:disabled { opacity: .45; cursor: default; }
button.small { min-height: 28px; padding: 0 8px; font-size: 14px; }
button.primary { background: var(--accent); color: #fff; box-shadow: inset -2px -2px 0 var(--accent-lo), inset 2px 2px 0 var(--accent-hi), 0 2px 0 var(--ink); }
button.primary:hover:not(:disabled) { background: #ff6c4b; }
input, select { font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 0; padding: 2px 8px; }
input[type=number] { width: 64px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
input[type=range] { accent-color: var(--accent); flex: 1; }

.ib { width: var(--b); height: var(--b); min-height: 0; padding: 0; display: grid; place-items: center; position: relative; }
.ib.sm { --b: 32px; }
.ib.sm i[data-icon] { width: 16px; height: 16px; }
.badge { position: absolute; right: -6px; bottom: -6px; min-width: 20px; height: 16px; padding: 0 4px; background: var(--ink); color: #fff;
  font-size: 12px; line-height: 16px; text-align: center; pointer-events: none; }
.coin i { color: #c98a00; }
.boost i { color: #e0a000; }

/* ---- the map: whole screen ---- */
#stage { position: fixed; inset: 0; overflow: hidden; background: #e8e4da; cursor: crosshair; touch-action: none; }
#cv { position: absolute; left: 0; top: 0; transform-origin: 0 0; image-rendering: pixelated; image-rendering: crisp-edges; box-shadow: 0 0 0 2px var(--ink); }
#tplc { position: absolute; left: 0; top: 0; transform-origin: 0 0; image-rendering: pixelated; pointer-events: none; }
#map { position: absolute; inset: 0; }
#ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
#cursor { position: absolute; pointer-events: none; border: 2px solid var(--ink); box-shadow: 0 0 0 2px #fff; display: none; }
#cursor.sel { border-style: dashed; border-color: var(--gold); }
/* Map credit (required by the tiles' licence): the small (i) above the bottom-right button, open on tap. */
.maplibregl-ctrl-attrib { font: 12px/1.2 system-ui, sans-serif; }
.maplibregl-ctrl-bottom-right { bottom: calc(var(--b) + 2 * var(--g)); right: calc(var(--g) - 10px); }
body.painting .maplibregl-ctrl-bottom-right { bottom: calc(var(--trayh, 0px) + var(--g)); }

/* ---- corners ---- */
.corner { position: fixed; z-index: 10; display: flex; flex-direction: column; gap: var(--g); }
#tl { left: var(--g); top: var(--g); align-items: flex-start; }
#tr { right: var(--g); top: var(--g); }
.seg { display: flex; }
.seg .tab { height: var(--b); display: flex; align-items: center; gap: 8px; padding: 0 12px 0 8px; white-space: nowrap; max-width: 200px; }
.seg .tab span { overflow: hidden; text-overflow: ellipsis; }
.seg .tab + .tab { margin-left: -2px; }
.seg .tab.on { background: var(--ink); color: #fff; box-shadow: inset 2px 2px 0 #000; transform: none; }
.zoom { display: flex; flex-direction: column; }
.zoom .ib + .ib { margin-top: -2px; }

/* Connection: a tiny dot while reconnecting; words only after 10 s down. */
.net { position: fixed; z-index: 11; left: 50%; top: var(--g); transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  font-size: 14px; pointer-events: none; }
.net b { width: 8px; height: 8px; background: var(--gold); box-shadow: 0 0 0 2px var(--ink); animation: blink 1s steps(2) infinite; }
.net span:not(:empty) { background: var(--paper); border: 2px solid var(--ink); padding: 0 8px; }
@keyframes blink { 50% { opacity: .2; } }

#coords { position: fixed; z-index: 9; left: 50%; top: var(--g); transform: translateX(-50%); font-size: 14px; background: var(--paper);
  border: 2px solid var(--ink); padding: 0 8px; pointer-events: none; white-space: nowrap; }
#coords:empty { display: none; }

/* ---- bottom bar: menu · Paint · boost ---- */
#bar { position: fixed; z-index: 10; left: var(--g); right: var(--g); bottom: calc(var(--g) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; transition: transform .18s steps(4); }
#bar > * { pointer-events: auto; }
#bar .boost { margin-left: auto; }
#bar #menu-btn { margin-right: auto; }
.paint { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  font-size: 20px; font-weight: 700; color: #fff; background: var(--accent); border-width: 2px;
  box-shadow: inset -2px -2px 0 var(--accent-lo), inset 2px 2px 0 var(--accent-hi), 0 4px 0 var(--ink); }
.paint:hover:not(:disabled) { background: #ff6c4b; }
.paint:active:not(:disabled) { transform: translate(-50%, 2px); background: var(--accent-lo); box-shadow: inset 2px 2px 0 rgba(0,0,0,.25), 0 2px 0 var(--ink); }
.paint .count { font-size: 16px; background: rgba(0,0,0,.25); padding: 0 8px; font-variant-numeric: tabular-nums; }
.paint.gold { outline: 2px solid var(--gold); outline-offset: 2px; }
body.painting #bar { transform: translateY(calc(100% + 16px)); }

.chip { position: fixed; z-index: 12; left: 50%; transform: translateX(-50%); bottom: calc(var(--trayh, 0px) + 72px); background: var(--ink); color: #fff;
  padding: 4px 12px; font-size: 14px; pointer-events: none; white-space: nowrap; }
body.painting .chip { bottom: calc(var(--trayh, 0px) + 8px); }

/* ---- colour tray: slides up from the bottom while painting ---- */
#tray { position: fixed; z-index: 20; left: 50%; bottom: 0; width: min(960px, 100%); transform: translate(-50%, 100%); visibility: hidden;
  transition: transform .18s steps(4), visibility 0s .18s; background: var(--paper); border: 2px solid var(--ink); border-bottom: 0;
  box-shadow: inset 2px 2px 0 var(--hi), 0 -4px 0 rgba(31,26,51,.25); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
body.painting #tray { transform: translate(-50%, 0); visibility: visible; transition: transform .18s steps(4); }
.tray-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; min-height: 32px; }
.tray-head #tray-close { margin-left: auto; }
.charges { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.charges b { font-size: 20px; }
.bar { width: 96px; height: 12px; background: var(--paper2); border: 2px solid var(--ink); }
#charge-fill { height: 100%; width: 0; background: var(--ok); }
.boost-row { display: flex; align-items: center; gap: 4px; font-size: 14px; color: #8a6200; cursor: help; white-space: nowrap; }
.boost-row i[data-icon] { width: 16px; height: 16px; color: #e0a000; }
.boost-bar { width: 48px; }
#boost-fill { height: 100%; width: 0; background: var(--gold); }

#palette { display: grid; grid-template-columns: repeat(auto-fill, var(--sw)); gap: 4px; justify-content: center; }
.sw { width: var(--sw); height: var(--sw); min-height: 0; padding: 0; border: 2px solid var(--ink); box-shadow: inset -2px -2px 0 rgba(0,0,0,.2), inset 2px 2px 0 rgba(255,255,255,.35); }
.sw:hover:not(:disabled) { filter: brightness(1.08); background-color: inherit; }
.sw.on { transform: translateY(-4px); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink), 0 4px 0 2px var(--ink); z-index: 1; position: relative; }
.sw.custom.empty { background: repeating-conic-gradient(var(--paper2) 0 25%, #fff 0 50%) 0 0 / 8px 8px; border-style: dashed; }
.sw.hexb { background: var(--paper); display: grid; place-items: center; }
.sw.hexb i[data-icon] { width: 16px; height: 16px; }
.sw-sep { display: none; }
.picker { position: fixed; left: 50%; bottom: 40px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hex-box { position: fixed; z-index: 40; background: var(--paper); border: 2px solid var(--ink); padding: 4px; box-shadow: 4px 4px 0 var(--ink); }
.hex-box input { width: 120px; }

/* ---- side panel (templates, menu, pixel info) ---- */
#panel { position: fixed; z-index: 30; right: calc(var(--b) + 2 * var(--g)); top: var(--g); width: min(320px, calc(100% - 2 * var(--g))); max-height: calc(100% - 2 * var(--g));
  display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 12px; border-bottom: 2px solid var(--ink); background: var(--paper2); }
.panel-body { overflow-y: auto; padding: 12px; display: grid; gap: 16px; align-content: start; }
.panel-body section { display: grid; gap: 8px; align-content: start; }
#panel ul { margin: 0; padding-left: 16px; }
#reports li { margin: 4px 0; }
.acts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.tpl-list { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 8px; }
.tpl-list li { background: #fff; border: 2px solid var(--ink); padding: 4px 8px; }
.tpl-name { font-weight: 700; font-size: 14px; }

/* ---- dialogs the player opens (shop, share) and the server's quick check ---- */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(31,26,51,.55); display: grid; place-items: center; padding: var(--g); }
.card { background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); width: min(400px, 100%); max-height: 100%; overflow: auto; display: grid; gap: 8px; }
.card > :not(.card-head) { margin-left: 12px; margin-right: 12px; }
.card > :last-child { margin-bottom: 12px; }
#check .card { padding: 12px; }
#check .card > * { margin: 0; }
.shop-card { width: min(520px, 100%); }
.coins-balance { font-size: 16px; padding: 4px 8px; background: #fff; border: 2px solid var(--ink); }
.coins-balance b { color: #b07800; }
button.coins-balance { display: flex; width: 100%; align-items: center; gap: 6px; text-align: left; }
button.coins-balance .get-more { margin-left: auto; font-weight: 700; }
.shop-sec { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 2px dashed var(--lo); }
.item b { display: block; }
.item .price { min-width: 88px; white-space: nowrap; flex: none; }
.price.coin { background: var(--gold); }
.price.vote { display: inline-block; text-align: center; padding: 4px 12px; background: var(--ok); color: #fff; text-decoration: none; border: 2px solid var(--ink); }
.gold { color: #b07800; }
.share-card { width: min(560px, 100%); }
.share-areas { display: flex; gap: 4px; flex-wrap: wrap; }
.share-areas:empty { display: none; }
.share-areas button { display: inline-flex; align-items: center; gap: 6px; }
.share-areas .ki { display: block; width: 16px; height: 16px; flex: none; }
.share-preview { background: repeating-conic-gradient(var(--paper2) 0 25%, #fff 0 50%) 0 0 / 16px 16px; border: 2px solid var(--ink);
  display: grid; place-items: center; min-height: 120px; max-height: 50vh; overflow: hidden; }
.share-preview img { max-width: 100%; max-height: 50vh; image-rendering: pixelated; }
.check-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.check-opts button { height: 64px; }

#toast { position: fixed; z-index: 60; left: 50%; top: calc(var(--b) + 2 * var(--g)); transform: translateX(-50%); max-width: calc(100% - 2 * var(--g));
  background: var(--ink); color: #fff; padding: 4px 12px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .15s steps(2); text-align: center; }
#toast.show { opacity: 1; }

/* ---- small screens (phones, Discord's pop-out and side panel) ---- */
@media (max-width: 560px), (max-height: 480px) {
  :root { --b: 36px; --g: 8px; --sw: 28px; }
  .seg .tab span { display: none; }
  .seg .tab { padding: 0 6px; }
  .paint { height: 44px; font-size: 18px; padding: 0 12px; }
  .bar { width: 64px; }
  #coords { display: none; }
  #panel { right: var(--g); }
}
@media (max-height: 480px) {
  .zoom { display: none; }                         /* pinch / scroll instead: keep the map clear */
  :root { --sw: 24px; }
  #palette { gap: 4px; }
  .tray-head { margin-bottom: 4px; }
  .boost-row span { display: none; }
}
@media (max-height: 360px) {
  :root { --b: 32px; }
  .paint { height: 40px; }
  #tray { padding: 4px 8px; }
}

/* ---- the map under the art: peek button (hold), art slider + labels toggle (tap) ---- */
#lmap { position: absolute; inset: 0; pointer-events: none; }
#peek-wrap { position: fixed; z-index: 11; left: var(--g); bottom: calc(2 * var(--g) + var(--b)); }
body.painting #peek-wrap { bottom: calc(var(--trayh, 0px) + var(--g)); }
#peek { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.peeking #peek { background: var(--ink); color: #fff; transform: translateY(2px); }
.art-pop { position: absolute; left: calc(100% + 8px); bottom: 0; width: 220px; display: grid; gap: 8px; padding: 8px;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.art-pop .row { flex-wrap: nowrap; }
.art-pop input[type=range] { min-width: 0; width: 100%; }
.art-pop b { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* Trial visual directions only (themes.css, ?theme=a|b|c). */
#gridref { display: none; }   /* shown by look.css */