:root {
  --resin: #20211d;
  --resin-deep: #11120f;
  --resin-edge: #3b3c35;
  --steel: #c4c3b7;
  --steel-light: #e1e0d3;
  --lcd: #bbca9b;
  --lcd-ink: #1b291a;
  --lcd-dim: #53624f;
  --on: #2c9554;
  --off: #cc4239;
  --unknown: #72766e;
  --paper: #eeeee2;
  --accent-blue: #28719c;
  --accent-gold: #d8b448;
  --shadow: rgba(0,0,0,.32);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 6px),
    #151612;
  color: #131512;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button { font: inherit; }

.watch-shell {
  width: min(100%, 1000px);
  height: min(100dvh - 28px, 760px);
  overflow: hidden;
  background: var(--resin);
  display: grid;
  grid-template-rows: 58px 102px minmax(0, 1fr) 60px 34px;
  border: 10px solid var(--resin-deep);
  border-radius: 16px;
  box-shadow:
    0 0 0 2px var(--resin-edge),
    0 20px 46px rgba(0,0,0,.46),
    inset 0 0 0 2px rgba(255,255,255,.04);
}

.topbar {
  min-height: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 13px 7px;
  color: #f3f3e9;
  background: linear-gradient(180deg, #32332e, #1e1f1b);
  border-bottom: 3px solid #090a08;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}
.brand {
  font-weight: 900;
  font-size: 23px;
  letter-spacing: .1em;
  line-height: .95;
  text-shadow: 1px 1px 0 #050605;
}
.subbrand {
  margin-top: 4px;
  color: var(--accent-gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.signal {
  min-width: 54px;
  text-align: center;
  padding: 6px 7px 5px;
  border: 2px solid #090a08;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 1px 0 rgba(255,255,255,.15);
}
.signal-live { background: #76b771; color: #152514; }
.signal-cache { background: #d6b65c; color: #382f10; }
.signal-error { background: #d7675f; color: #331211; }
.signal-wait { background: #c5c5b8; color: #262722; }

.lcd {
  margin: 9px 10px 8px;
  padding: 8px 12px;
  background: var(--lcd);
  color: var(--lcd-ink);
  border: 4px solid #10110e;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #77856c, inset 0 0 18px rgba(42,58,43,.18), 0 1px 0 rgba(255,255,255,.14);
}
.lcd-row { display: flex; align-items: baseline; gap: 10px; }
.lcd-main {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(30px, 7vw, 47px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: .9;
}
.lcd-label { font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.lcd-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px 14px;
  margin-top: 7px;
  color: var(--lcd-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .025em;
}

.map-wrap {
  position: relative;
  min-height: 0;
  margin: 0 10px 9px;
  border: 5px solid #0d0e0c;
  border-radius: 5px;
  overflow: hidden;
  contain: size layout paint;
  background: #c9c9bd;
  box-shadow: inset 0 0 0 2px #606158, 0 1px 0 rgba(255,255,255,.1);
}
#map { width: 100%; height: 100%; min-height: 0; }
.leaflet-tile-pane { filter: grayscale(.85) saturate(.42) contrast(.95) brightness(1.08); }
.leaflet-control-zoom a { color: #eef0e8 !important; background: #292a25 !important; border-color: #10110f !important; }
.leaflet-control-attribution { font-size: 8px !important; background: rgba(243,241,232,.86) !important; }

.wallace-marker { background: transparent; border: 0; }
.pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #151612;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 2px 3px var(--shadow);
}
.pin-on { background: var(--on); }
.pin-off { background: var(--off); }
.pin-unknown { background: var(--unknown); }
.pin-user {
  width: 20px;
  height: 20px;
  background: #1f5e9e;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px #1d2b38, 0 2px 5px rgba(0,0,0,.25);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip { background: var(--paper); color: #161813; }
.leaflet-popup-content-wrapper { border-radius: 0; border: 3px solid #22241f; box-shadow: 4px 4px 0 rgba(0,0,0,.2); }
.leaflet-popup-content { margin: 11px 12px; min-width: 205px; font-family: inherit; }
.popup-status { font-weight: 900; font-size: 11px; letter-spacing: .08em; }
.popup-title { margin: 5px 0 3px; font-size: 15px; line-height: 1.15; }
.popup-meta { font-size: 10px; line-height: 1.35; color: #4f534a; }
.popup-route {
  display: block;
  margin-top: 10px;
  text-decoration: none;
  text-align: center;
  color: #f5f4ed;
  background: #20221d;
  padding: 8px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .06em;
}
.status-on { color: var(--on); }
.status-off { color: var(--off); }
.status-unknown { color: var(--unknown); }

.map-notice {
  position: absolute;
  z-index: 800;
  left: 8px;
  right: 8px;
  top: 8px;
  padding: 8px 10px;
  background: rgba(25,27,23,.9);
  color: #f1efe7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  pointer-events: none;
}
.nearest-card {
  position: absolute;
  z-index: 750;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  border: 3px solid #1e201b;
  background: rgba(184,195,165,.95);
  color: #1d281e;
  text-align: left;
  padding: 8px 10px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.18);
  cursor: pointer;
}
.nearest-card strong { display: block; margin-top: 2px; font-size: 12px; }
.nearest-card > span:last-child { display: block; margin-top: 2px; font-size: 10px; }
.nearest-kicker { font-size: 9px; font-weight: 900; letter-spacing: .08em; color: #4c5a4c; }

.controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 10px 8px;
}
.key {
  min-height: 0;
  border: 2px solid #090a08;
  border-radius: 4px;
  background: linear-gradient(180deg, #464741, #242520);
  color: #f0f1e8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 2px 0 #0c0d0a;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.key:first-child { border-bottom-color: #7e221e; }
.key:nth-child(2) { border-bottom-color: var(--accent-blue); }
.key:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 #0c0d0a; }
.key span { display: block; font-size: 11px; letter-spacing: .09em; }
.key small { display: block; margin-top: 2px; font-size: 8px; color: #bcbdb1; }

.legend {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 7px;
  color: #dcddd2;
  background: #292a25;
  border-top: 2px solid #0d0e0c;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
  overflow-x: auto;
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 3px; border: 1px solid #21231e; }
.dot-on { background: var(--on); }
.dot-off { background: var(--off); }
.dot-unknown { background: var(--unknown); }
.refresh-link { margin-left: auto; border: 0; background: none; color: var(--accent-gold); padding: 5px 0 5px 8px; font-size: 9px; font-weight: 900; text-decoration: underline; cursor: pointer; }

.list-dialog {
  width: min(680px, calc(100vw - 18px));
  max-height: min(82dvh, 760px);
  padding: 0;
  border: 5px solid #20221d;
  border-radius: 0;
  background: #d1cfba;
  color: #161813;
  box-shadow: 8px 8px 0 rgba(0,0,0,.24);
}
.list-dialog::backdrop { background: rgba(15,16,14,.62); }
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border-bottom: 3px solid #20221d;
}
.dialog-head strong { display: block; font-size: 15px; }
.dialog-head span { display: block; margin-top: 2px; font-size: 9px; color: #65675e; }
.close-btn { width: 38px; height: 38px; border: 3px solid #20221d; background: #e1dfcf; font-size: 25px; line-height: 1; cursor: pointer; }
.fountain-list { overflow: auto; max-height: calc(82dvh - 64px); }
.list-item {
  width: 100%;
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 10px 11px;
  border: 0;
  border-bottom: 1px solid #909083;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.list-item:hover, .list-item:focus { background: #dedccb; outline: none; }
.list-status { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #1e201c; }
.list-title { display: block; font-size: 12px; font-weight: 900; }
.list-meta { display: block; margin-top: 2px; font-size: 9px; color: #5e6158; }
.list-distance { font-size: 10px; font-weight: 900; }

@media (min-width: 820px) {
  body { padding: 14px; }
  .watch-shell {
    height: min(calc(100dvh - 28px), 760px);
    border-width: 12px;
    border-radius: 18px;
  }
  .controls { gap: 8px; }
}

@media (max-width: 560px) {
  .watch-shell {
    width: 100%;
    height: 100dvh;
    border-width: 7px;
    border-radius: 0;
  }
  .brand { font-size: 21px; }
  .subbrand { font-size: 8px; }
  .lcd-label { font-size: 10px; }
  .lcd-meta { font-size: 9px; }
  .controls { gap: 4px; padding-inline: 7px; }
  .key span { font-size: 10px; letter-spacing: .04em; }
  .key small { font-size: 7px; }
  .legend { gap: 8px; padding-inline: 7px; font-size: 8px; }
  .map-wrap { margin-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}