/* Mode toggle — bottom-right, B&W to match the ASCII look. */
#mode-toggle {
  position: fixed;
  right: 12px;
  bottom: 10px;
  z-index: 50;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  text-decoration: none;
  padding: 5px 9px;
  letter-spacing: 0.3px;
}
#mode-toggle:hover { background: #000; color: #fff; }

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #000000;
}

#map {
  display: block;
  width: 100vw;
  height: 100vh;
  touch-action: none;
  background: #ffffff;
}

/* Intro panel — DOM (not canvas) so clicks don't fall through to the map.
   Two visible states: .open shows the full panel; .closed shows just a tiny
   corner handle. On mobile, .open is rendered as a centered modal. */
#intro {
  position: fixed;
  z-index: 50;
  font-family: inherit;
  color: #000;
  font-size: 11px;
  line-height: 1.5;
}
#intro.open  { top: 20px; left: 20px; }
#intro.closed { top: 20px; left: 20px; }
#intro.open #intro-handle { display: none; }
#intro.closed #intro-content,
#intro.closed #intro-close { display: none; }

#intro-content {
  background: #fff;
  border: 1px solid #000;
  padding: 14px 16px 12px;
  width: 280px;
  position: relative;
}

#intro-title {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.5px;
  border-bottom: 1px dashed #000;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.intro-section { margin-bottom: 10px; }
.intro-section p { margin-bottom: 4px; }
.intro-section .intro-h { font-weight: bold; letter-spacing: 0.5px; }
.intro-section ol { padding-left: 18px; margin-top: 4px; }
.intro-section li { margin-bottom: 2px; }

#intro-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  color: #000;
  border: 1px solid #000;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 16px;
  border-radius: 0;
}
#intro-close:hover { background: #000; color: #fff; }

#intro-ok,
#intro-handle {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  font: inherit;
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  letter-spacing: 0.3px;
  border-radius: 0;
  margin-top: 6px;
}
#intro-ok:hover,
#intro-handle:hover { background: #000; color: #fff; }

/* Mobile: when open, show as a centered modal with a faint white-out
   behind it. When collapsed, behaves like desktop (small corner handle). */
@media (max-width: 768px) {
  #intro.open {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #intro.open #intro-content {
    width: calc(100vw - 32px);
    max-width: 320px;
    box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.78);
  }
}

/* Comments popup — anchored flush to the bottom of the story card so it
   reads as an extension of the card. Distinct light-grey background +
   dashed top border separate it from the card's white body without
   feeling like a totally different popup. Width set inline by JS to
   match the card (clamped to a usable min/max). */
#comments {
  position: fixed;
  z-index: 10;
  background: #f4f4f4;            /* visual difference from card's white body */
  border: 1px dashed #000;        /* all-dashed frame distinguishes the panel from the solid card */
  padding: 8px 10px 10px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: inherit;
  color: #000;
}
#comments[hidden] { display: none; }
.comments-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px dashed #000;
  padding-bottom: 6px;
}
#comments-close {
  background: transparent;
  border: 1px solid #000;
  color: #000;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 1px 6px;
  line-height: 1;
}
#comments-close:hover { background: #000; color: #fff; }
#comments-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  line-height: 1.4;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 2px;
}
#comments-list:empty::before {
  content: "no comments yet — be the first";
  color: #888;
  font-style: italic;
}
.comment-item {
  border-left: 2px solid #000;
  padding: 2px 6px;
}
.comment-author {
  font-weight: bold;
  letter-spacing: 0.3px;
}
.comment-text { display: block; margin-top: 1px; }
#comments input,
#comments textarea {
  background: #fff;
  border: 1px solid #000;
  color: #000;
  padding: 5px 7px;
  font: inherit;
  font-size: 12px;
  resize: none;
  outline: none;
  border-radius: 0;
}
#comments input::placeholder,
#comments textarea::placeholder { color: #888; }
#comments input:focus,
#comments textarea:focus { background: #f4f4f4; }
#comments-submit {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 6px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.5px;
  border-radius: 0;
}
#comments-submit:hover { background: #000; color: #fff; }

/* Writer popup — pure B&W, ASCII-flavored. */
#writer {
  position: fixed;
  z-index: 10;
  background: #ffffff;
  border: 1px solid #000;
  padding: 10px;
  width: 260px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: inherit;
  color: #000;
}

#writer[hidden] { display: none; }

.writer-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #000;
  border-bottom: 1px dashed #000;
  padding-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#writer-close {
  background: transparent;
  border: 1px solid #000;
  color: #000;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  padding: 1px 6px;
}
#writer-close:hover { background: #000; color: #fff; }

#writer input,
#writer textarea {
  background: #fff;
  border: 1px solid #000;
  color: #000;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  resize: none;
  outline: none;
  border-radius: 0;
}

#writer input::placeholder,
#writer textarea::placeholder { color: #888; }

#writer input:focus,
#writer textarea:focus { background: #f4f4f4; }

#writer-submit {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 7px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.5px;
}
#writer-submit:hover { background: #000; color: #fff; }

#camera-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#camera-preview {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 1px solid #000;
  border-radius: 0;
  transform: scaleX(-1);
}
#camera-preview[hidden] { display: none; }

#camera-snap { display: none; }

#camera-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid #000;
  border-radius: 0;
}
#camera-thumb[hidden] { display: none; }

#camera-controls { display: flex; gap: 8px; }

#camera-controls button {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 4px 10px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  border-radius: 0;
}
#camera-controls button:hover { background: #000; color: #fff; }

/* Confirm overlay (close-without-saving prompt) — ASCII flavored */
#writer-confirm {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  z-index: 1;
}
#writer-confirm[hidden] { display: none; }

.writer-confirm-text {
  color: #000;
  font-size: 13px;
  text-align: center;
  line-height: 1.55;
}
.writer-confirm-sub { color: #555; font-size: 11px; }

.writer-confirm-buttons { display: flex; gap: 8px; }
.writer-confirm-buttons button {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 0;
}
.writer-confirm-buttons button:hover { background: #000; color: #fff; }
#writer-confirm-yes { background: #000 !important; color: #fff !important; }
#writer-confirm-yes:hover { background: #fff !important; color: #000 !important; }