/* The Little Burg — atlas-plate look */
:root {
  --paper: #f2e8d5;
  --paper-hi: #f9f2e3;
  --ink: #2a241d;
  --ink-soft: #5c5344;
  --brick: #b8452c;
  --river: #8fb4bc;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --mono: 'SFMono-Regular', 'DejaVu Sans Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; overflow: hidden; background: var(--paper); }

#map {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  cursor: grab;
  touch-action: none; /* we handle pan + pinch ourselves */
}
#map.dragging { cursor: grabbing; }
#map.hovering { cursor: pointer; }

/* ---------- masthead ---------- */
#masthead {
  position: fixed; top: 18px; left: 18px;
  background: var(--paper-hi);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink), inset 0 0 0 4px var(--paper-hi), inset 0 0 0 5px var(--ink-soft);
  padding: 14px 18px 12px;
  font-family: var(--serif);
  color: var(--ink);
  max-width: 320px;
  user-select: none;
}
#masthead h1 {
  font-size: 28px;
  letter-spacing: 0.5px;
  font-weight: 700;
  line-height: 1;
}
#masthead .sub {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 5px 0 10px;
}
#masthead .row {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--ink-soft);
  padding-top: 9px;
}
#clock {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1px;
  min-width: 96px;
}
#speeds { display: flex; gap: 4px; }
#speeds button, #unfollow {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 3px 7px;
  cursor: pointer;
}
#speeds button:hover, #unfollow:hover { background: var(--ink); color: var(--paper-hi); }
#speeds button.on { background: var(--brick); border-color: var(--brick); color: var(--paper-hi); }
#speeds button:focus-visible, #unfollow:focus-visible, #cardClose:focus-visible {
  outline: 2px solid var(--brick); outline-offset: 1px;
}
#unfollow { margin-top: 9px; width: 100%; }

/* ---------- selection card ---------- */
#card {
  position: fixed; top: 18px; right: 18px;
  width: 262px;
  background: var(--paper-hi);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 14px 16px;
  font-family: var(--serif);
  color: var(--ink);
}
#cardClose {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none;
  font-size: 18px; color: var(--ink-soft);
  cursor: pointer; font-family: var(--serif);
}
#cardClose:hover { color: var(--brick); }
#card h2 { font-size: 19px; line-height: 1.1; padding-right: 16px; }
#cardRole {
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brick);
  margin: 4px 0 8px;
}
#cardThought {
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.45;
}
#cardThought:not(:empty)::before { content: '\201C'; }
#cardThought:not(:empty)::after { content: '\201D'; }
#cardDest {
  font-size: 11.5px;
  font-family: var(--mono);
  margin-top: 9px;
  border-top: 1px dashed var(--ink-soft);
  padding-top: 7px;
  color: var(--ink);
}

/* ---------- news ticker ---------- */
#ticker {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.6px;
  padding: 7px 16px 8px;
  white-space: nowrap;
  overflow: hidden;
}
#tickText { display: inline-block; animation: slidein 420ms cubic-bezier(0.16,1,0.3,1); }
#tickText b { color: #e8a03c; font-weight: 700; }
@keyframes slidein {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #tickText { animation: none; }
}

/* ---------- credit ---------- */
#credit {
  position: fixed; left: 16px; bottom: 34px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 10.5px;
  color: var(--ink-soft);
  opacity: 0.85;
  user-select: none;
}

@media (max-width: 640px) {
  #masthead { max-width: 240px; padding: 10px 12px; }
  #masthead h1 { font-size: 21px; }
  #card { width: 210px; }
}