html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #1e40af;
  overflow: hidden;
  cursor: crosshair;
  font-family: Georgia, "Times New Roman", serif;
  color: #f8fafc;
}

#map {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: #1e40af;
  /* Push CartoDB Positron (light gray map) toward blue. */
  filter: grayscale(1) brightness(0.55) sepia(1) hue-rotate(185deg) saturate(4);
}

.map-tint {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.35), rgba(30, 64, 175, 0.55));
  mix-blend-mode: multiply;
}

#board {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

main {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding: 1rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

h1 {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  font-style: italic;
}

p {
  font-size: clamp(1rem, 2vw, 1.4rem);
  letter-spacing: 0.05em;
  margin: 0;
  opacity: 0.95;
}

footer {
  position: fixed;
  bottom: 1.1rem;
  right: 1.3rem;
  z-index: 4;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.club {
  pointer-events: auto;
  color: rgba(248, 250, 252, 0.85);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s;
}
.club:hover {
  color: #fde047;
}

#cafe-dot {
  position: fixed;
  z-index: 3;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fde047;
  box-shadow: 0 0 0 3px rgba(253, 224, 71, 0.35), 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#cafe-dot.ready { opacity: 1; }
.cafe-dot-label {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #f8fafc;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}