:root {
  --kraft:      #cdb891;
  --kraft-dark: #b89b6f;
  --paper:      #fbf8f1;
  --paper-edge: #efe9dc;
  --ink:        #40372a;   /* handwriting */
  --ink-soft:   #6d6047;   /* typewriter labels */
  --marker:     #c25b46;   /* accent red */
  --thread:     #7a8a5c;
  --danger:     #b23a2b;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Special Elite", "Courier New", monospace;
  background-color: var(--kraft);
  /* layered kraft: warm wash + fibrous grain */
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255,246,225,0.45), transparent 60%),
    radial-gradient(ellipse 90% 60% at 100% 110%, rgba(120,95,60,0.22), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 4rem env(safe-area-inset-left);
}

[hidden] { display: none !important; }

/* ---------- Masthead ---------- */
.masthead { max-width: 1100px; margin: 0 auto; padding: 3rem 1.25rem 0.5rem; text-align: center; }
.masthead h1 {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(3.2rem, 11vw, 6rem);
  line-height: 0.9;
  color: var(--ink);
  margin: 0;
  transform: rotate(-2deg);
  text-shadow: 1px 2px 0 rgba(255,255,255,0.35);
}
.underline { display: block; width: min(280px, 62%); height: 12px; margin: -0.15rem auto 0; }
.subtitle {
  margin: 0.75rem auto 0;
  max-width: 30rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- Controls / tabs ---------- */
.controls { display: flex; justify-content: center; margin: 1.5rem auto 0; }
.tabs { display: inline-flex; gap: 0; background: var(--paper); border: 1px solid var(--paper-edge);
        border-radius: 999px; padding: 4px; box-shadow: 0 4px 10px rgba(60,45,25,0.18); }
.tab {
  border: none; background: none; cursor: pointer;
  font-family: "Special Elite", monospace; font-size: 0.8rem;
  padding: 0.5rem 1.2rem; border-radius: 999px; color: var(--ink-soft);
  transition: background 0.18s ease, color 0.18s ease;
}
.tab.active { background: var(--marker); color: #fff; }
.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

main { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Dropzone (masking-tape card) ---------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  margin: 1.75rem auto 0; padding: 1.75rem 1.5rem; max-width: 640px;
  background: rgba(251,248,241,0.78);
  border: 2px dashed var(--kraft-dark);
  border-radius: 6px; cursor: pointer; text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dropzone:hover, .dropzone:focus-visible { background: #fbf8f1; border-color: var(--marker); outline: none; }
.dropzone.drag { border-color: var(--marker); background: #fff; transform: scale(1.01) rotate(-0.4deg); }
.dropzone-title { font-family: "Caveat", cursive; font-size: 1.9rem; font-weight: 700; color: var(--ink); }
.dropzone-hint { font-size: 0.72rem; color: var(--ink-soft); }

/* ---------- Status ---------- */
.status { min-height: 1.3rem; margin: 1rem 0 0; font-size: 0.75rem; color: var(--marker); text-align: center; }
.status:empty { margin: 0; }

/* ---------- Board (scattered masonry) ---------- */
.board { margin-top: 2rem; columns: 3 250px; column-gap: 1.75rem; }
@media (max-width: 640px) { .board { columns: 1; } }

/* ---------- Polaroid ---------- */
.polaroid {
  break-inside: avoid;
  position: relative;
  margin: 0 auto 2.25rem;
  width: 100%;
  background: var(--paper);
  padding: 12px 12px 0;
  border-radius: 2px;
  box-shadow: 0 10px 22px rgba(50,38,20,0.28);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  opacity: 0;
  animation: settle 0.5s ease forwards;
}
@keyframes settle { from { opacity: 0; transform: rotate(var(--rot,0deg)) translateY(12px); } to { opacity: 1; } }
.polaroid:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 18px 34px rgba(50,38,20,0.4);
  z-index: 5;
}

/* washi tape */
.polaroid::before {
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  width: 92px; height: 26px;
  transform: translateX(-50%) rotate(var(--tape-rot, -4deg));
  background: var(--tape, rgba(150,200,180,0.55));
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 6px, transparent 6px 12px);
}

.polaroid .frame { position: relative; overflow: hidden; background: #e7ddca; cursor: zoom-in; }
.polaroid img { display: block; width: 100%; height: auto; }

.caption { padding: 0.55rem 0.35rem 0.9rem; text-align: center; }
.caption .place {
  font-family: "Caveat", cursive; font-weight: 600;
  font-size: 1.5rem; line-height: 1.05; color: var(--ink);
}
.caption .place.faint { color: #a99b80; font-weight: 500; }
.caption .date {
  margin-top: 0.15rem;
  font-family: "Special Elite", monospace; font-size: 0.66rem;
  letter-spacing: 0.04em; color: var(--ink-soft);
}
.caption .date.missing { font-style: italic; color: #b0a48b; }

.polaroid .del {
  position: absolute; top: 5px; right: 5px; z-index: 10;
  width: 24px; height: 24px; border: none; border-radius: 50%;
  background: rgba(64,55,42,0.7); color: #fff; font-size: 0.95rem; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity 0.18s ease, background 0.18s ease;
}
.polaroid:hover .del, .polaroid:focus-within .del { opacity: 1; }
.polaroid .del:hover { background: var(--danger); }

/* ---------- Map ---------- */
.map-wrap { margin-top: 2rem; }
#map {
  height: 68vh; min-height: 360px; width: 100%;
  border-radius: 6px; border: 10px solid var(--paper);
  box-shadow: 0 12px 26px rgba(50,38,20,0.3);
}
.map-note { text-align: center; font-size: 0.72rem; color: var(--ink-soft); margin: 0.75rem 0 0; }
.leaflet-popup-content { font-family: "Special Elite", monospace; }
.pin-pop { text-align: center; width: 150px; }
.pin-pop img { width: 150px; height: 100px; object-fit: cover; border-radius: 3px; cursor: zoom-in; display: block; margin-bottom: 6px; }
.pin-pop b { font-family: "Caveat", cursive; font-size: 1.2rem; display: block; }
.pin-pop span { font-size: 0.62rem; color: #555; }

/* ---------- Empty ---------- */
.empty { text-align: center; padding: 3.5rem 1rem; }
.empty-title { font-family: "Caveat", cursive; font-size: 2rem; color: var(--ink); margin: 0 0 0.35rem; }
.empty-hint { font-size: 0.75rem; color: var(--ink-soft); margin: 0; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(40,32,20,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 2rem 1rem;
}
.lightbox img { max-width: min(92vw, 1000px); max-height: 74vh;
  background: var(--paper); padding: 12px 12px 40px; border-radius: 2px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6); transform: rotate(-1deg); }
.lightbox-meta { font-family: "Caveat", cursive; font-size: 1.5rem; color: #fbf8f1; text-align: center; line-height: 1.35; }
.lightbox-meta .sub { font-family: "Special Elite", monospace; font-size: 0.72rem; display: block; margin-top: 0.2rem; color: #d8cbb2; }
.lightbox-meta a { color: #f0a; color: var(--marker); text-decoration: none; border-bottom: 1px solid; }
.lightbox-close { position: absolute; top: 1rem; right: 1.25rem; background: none; border: none;
  color: #fbf8f1; font-size: 2.2rem; line-height: 1; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .polaroid { animation: none; opacity: 1; }
  .polaroid, .dropzone, .lightbox img { transition: none; }
  .polaroid:hover { transform: rotate(var(--rot,0deg)); }
}

/* ---------- Login gate ---------- */
.gate {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background-color: var(--kraft);
  background-image: radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255,246,225,0.45), transparent 60%);
}
.gate-card {
  background: var(--paper); border-radius: 6px; padding: 2rem 1.75rem;
  box-shadow: 0 12px 30px rgba(50,38,20,0.3); text-align: center;
  max-width: 320px; width: 100%; transform: rotate(-1.5deg);
}
.gate-card h2 { font-family: "Caveat", cursive; font-size: 2.4rem; margin: 0; color: var(--ink); }
.gate-card p { font-size: 0.72rem; color: var(--ink-soft); margin: 0.25rem 0 1.1rem; }
.gate-card input {
  width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--paper-edge); border-radius: 4px;
  font-family: "Special Elite", monospace; font-size: 0.85rem; margin-bottom: 0.6rem;
}
.gate-card input:focus { outline: none; border-color: var(--marker); }
.gate-card button {
  width: 100%; padding: 0.55rem; border: none; border-radius: 4px;
  background: var(--marker); color: #fff; cursor: pointer;
  font-family: "Special Elite", monospace; font-size: 0.85rem;
}
.gate-err { color: var(--danger); font-size: 0.72rem; min-height: 1rem; margin-top: 0.5rem; }

.logout {
  position: absolute; top: 1rem; right: 1.25rem; z-index: 20;
  background: rgba(251,248,241,0.6); border: 1px solid var(--kraft-dark); border-radius: 999px;
  padding: 0.3rem 0.8rem; cursor: pointer;
  font-family: "Special Elite", monospace; font-size: 0.7rem; color: var(--ink-soft);
}
.logout:hover { background: var(--paper); }