[hidden] { display: none !important; }

html, body, #map { height: 100%; margin: 0; }
body { font-family: system-ui, sans-serif; }

#topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex;
  align-items: center; gap: 10px; padding: 10px 14px; background: rgba(15,17,21,.88); color: #eee; }
#brand-stack { display: flex; align-items: baseline; gap: 10px; flex: 1; }
#brand { font-weight: 800; font-size: 20px; color: #d4382c; white-space: nowrap; }
#tagline { color: #9aa; font-size: 13px; }
/* Phone: brand row full width (tagline inline), actions get their own row
 * below. A squeezed brand column wraps the tagline into a tall sliver. */
@media (max-width: 640px) {
  #topbar { gap: 6px 10px; padding: 8px 10px; flex-wrap: wrap; }
  #brand-stack { flex: 1 1 100%; align-items: baseline; gap: 8px; min-width: 0; }
  #tagline { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #topbar button, #topbar .btn { padding: 6px 10px; font-size: 13px; }
  #me-handle { flex: 1; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
#me-handle { color: #9aa; font-size: 13px; }
#topbar button.ghost { background: transparent; border: 1px solid #555; color: #ccc; }
#report-btn { background: #d4382c; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 16px; font-weight: 700; cursor: pointer; }

#pick-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 9; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  background: rgba(15,17,21,.92); color: #eee; padding: 10px 14px; border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.45); font-size: 14px; }
#pick-hint button.ghost { background: transparent; border: 1px solid #555; color: #ccc;
  border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.modal { position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; }
.modal .card { background: #1b1e26; color: #eee; border-radius: 12px; padding: 22px;
  width: min(420px, 92vw); display: flex; flex-direction: column; gap: 10px; }
.card h2 { margin: 0; }
.card input, .card select, .card textarea { background: #0f1115; color: #eee;
  border: 1px solid #333; border-radius: 8px; padding: 10px; font-size: 15px; }
.card textarea { min-height: 90px; resize: vertical; }
.card button { background: #d4382c; color: #fff; border: 0; border-radius: 8px;
  padding: 10px; font-weight: 700; cursor: pointer; }
.card button.ghost, #event-popup button.ghost { background: transparent; border: 1px solid #555; color: #ccc; }
.row { display: flex; gap: 8px; }
.err { color: #ff8787; font-size: 13px; margin: 0; }
.card ul.rules { margin: 0 0 14px; padding-inline-start: 20px; color: #ccc;
  font-size: 14px; line-height: 1.55; }
.fine { color: #778; font-size: 12px; margin: 0; }
.file-label { color: #9aa; font-size: 14px; }

#event-popup { position: absolute; z-index: 8; right: 12px; top: 60px; width: min(360px, 90vw);
  background: #1b1e26; color: #eee; border-radius: 12px; padding: 16px; }
#event-popup #p-type { background: #d4382c; border-radius: 4px; padding: 2px 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; }
#event-popup h3 { margin: 10px 0 4px; }
#p-meta { color: #9aa; font-size: 13px; margin-bottom: 8px; }
#p-photos img { width: 100%; border-radius: 8px; margin: 6px 0; }
#p-body { line-height: 1.5; white-space: pre-wrap; }
#event-popup button { background: #d4382c; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 10px; font-weight: 600; cursor: pointer; flex: 1; }
#event-popup .row { margin: 8px 0; }
#popup-close { position: absolute; top: 8px; right: 10px; background: none; color: #9aa; font-size: 20px; }

.marker-dot { width: 16px; height: 16px; border-radius: 50%; background: #d4382c;
  border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(212,56,44,.35); }
.marker-dot.unconfirmed { background: #f0b429; box-shadow: 0 0 0 3px rgba(240,180,41,.35); }

.sub-row { justify-content: space-between; align-items: center; color: #ccc; font-size: 14px; }
.sub-row button { flex: 0 0 auto; padding: 4px 10px; }
#alerts-btn { background: transparent; color: #ccc; border: 1px solid #555; border-radius: 8px;
  padding: 8px 14px; cursor: pointer; }

#feed-status { position: fixed; bottom: 16px; right: 8px; z-index: 6; font-size: 11px;
  color: #ffb74d; background: rgba(15,17,21,.85); padding: 4px 8px; border-radius: 6px; }
#build-tag { position: fixed; bottom: 4px; left: 6px; font-size: 10px; color: #556;
#build-tag a { color: #556; pointer-events: auto; }
  z-index: 5; pointer-events: none; }

/* Tester feedback modal + toast (2026-09-25) */
.chips { display: flex; gap: 8px; margin: 6px 0 10px; }
/* must out-specify .card button, which paints every card button red */
.card button.chip { padding: 6px 14px; border-radius: 16px; border: 1px solid #555;
  background: transparent; color: #ccc; font-size: 13px; cursor: pointer; }
.card button.chip.sel { background: #d4382c; border-color: #d4382c; color: #fff; }
#toast { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%);
  z-index: 20; background: rgba(15,17,21,.95); color: #eee; padding: 10px 16px;
  border-radius: 10px; font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.45); }