/* ───────────────────────────── fonts ───────────────────────────── */
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('../fonts/silkscreen.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('../fonts/silkscreen-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* ───────────────────────────── tokens ──────────────────────────── */
:root {
  --paper:   #f2ecdd;   /* cream paper */
  --paper-2: #e9e1cc;
  --ink:     #2438c9;   /* cobalt ink */
  --ink-deep:#16247d;
  --ink-soft:#8d97d8;
  --night:   #0b1030;   /* space */
  --accent:  #d96f32;   /* terracotta — the dude's sweater */
  --accent-2:#e8b04b;   /* mustard */
  --serif: 'Instrument Serif', Georgia, serif;
  --pixel: 'Silkscreen', monospace;
  --sans:  'Space Grotesk', system-ui, sans-serif;
}

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

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--night);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

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

.hidden { display: none !important; }

/* ───────────────────────────── intro ───────────────────────────── */
.intro-ui {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  text-align: center;
  padding-top: 6vh;
  pointer-events: none;
  z-index: 10;
  color: var(--paper);
  transition: opacity 0.9s ease;
}
.intro-ui.fading { opacity: 0; }
.intro-ui.fading .enter-btn { pointer-events: none; }

.intro-kicker {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
  animation: blink-slow 3s infinite;
}
@keyframes blink-slow { 0%,100% {opacity:.95} 50% {opacity:.45} }

.intro-title {
  font-family: var(--serif);
  font-size: clamp(52px, 8vw, 104px);
  line-height: 0.92;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-top: 14px;
}
.intro-title em { font-style: italic; color: var(--accent-2); }

.intro-sub {
  font-family: var(--sans);
  font-size: clamp(14px, 1.6vw, 18px);
  margin-top: 20px;
  color: #c7cdf0;
}

/* the button is parked BELOW the globe and horizontally centred. Desktop globe
   radius ≈ 21vh from centre; mobile globe radius ≈ 44vw (see intro.js + media) */
.enter-btn {
  pointer-events: auto;
  position: absolute;
  top: calc(50% + 25vh);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--pixel);
  font-size: 14px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--night);
  background: var(--paper);
  border: none;
  padding: 16px 30px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--accent), 0 0 0 2px var(--paper);
  transition: transform .12s ease, box-shadow .12s ease;
  image-rendering: pixelated;
}
.enter-btn:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 6px 0 var(--accent), 0 0 0 2px var(--paper); }
.enter-btn:active { transform: translateX(-50%) translateY(2px); box-shadow: 0 2px 0 var(--accent), 0 0 0 2px var(--paper); }

.intro-desc {
  /* pulled out of the centred stack and parked low, so it sits BELOW the
     planet instead of over it (the planet is drawn around screen centre) */
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, calc(100vw - 48px));
  margin: 0;
  padding: 0;
  text-align: center;
  pointer-events: none;
  font-family: var(--sans);
  font-size: clamp(12px, 1.2vw, 13.5px);
  line-height: 1.55;
  color: #aab2e0;
}

.intro-foot {
  position: absolute;
  bottom: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .15em;
  color: #5a64a8;
}
.intro-credit {
  pointer-events: auto;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--accent-2);
  text-decoration: none;
}
.intro-credit:hover { color: var(--paper); }

/* ───────────────────────────── HUD ─────────────────────────────── */
.hud {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 22px;
  z-index: 20;
  pointer-events: none;
  animation: hud-in 1s ease both;
}
@keyframes hud-in { from { opacity: 0; transform: translateY(-12px);} to { opacity:1; transform:none;} }

/* on desktop the wordmark lives in the left sidebar; the HUD brand is mobile-only */
.hud-brand { display: none; pointer-events: auto; user-select: none; }
.hud-logo {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  color: var(--ink);
  text-shadow: 0 1px 0 var(--paper), 0 0 14px rgba(242,236,221,.8);
}
.hud-logo em { font-style: italic; color: var(--accent); }
.hud-tag {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .65;
}

.hud-actions { display: flex; gap: 8px; pointer-events: auto; }
.hud-btn {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 7px 11px;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.hud-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.hud-btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.hud-btn.off { opacity: .55; }

.places-btn { display: none; } /* mobile only — the panel is persistent on desktop */

/* ─────────────────────── left sidebar (places) ─────────────────────── */
.cafes {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 320px;
  background: #fff;
  border-right: 2px solid var(--ink);
  box-shadow: 5px 0 0 rgba(36,56,201,.10);
  z-index: 25;
  display: flex; flex-direction: column;
  animation: sheet-in .3s ease both;
}

.cafes-brand {
  flex: none;
  padding: 22px 20px 16px;
  border-bottom: 1px solid var(--ink-soft);
}
.cafes-brand-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.cafes-logo {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}
.cafes-logo em { font-style: italic; color: var(--accent); }
.cafes-desc {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4a55a6;
}
.cafes-about {
  margin-top: 11px;
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--ink-soft);
  background: none; border: none; padding: 0;
  cursor: pointer;
}
.cafes-about:hover { color: var(--accent); }

.cafes-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 8px;
  flex: none;
}
.cafes-title {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--ink);
}
/* close X for the mobile places sheet — top-right, aligned with the logo */
.cafes-close {
  display: none;
  background: none; border: none; cursor: pointer;
  font-family: var(--pixel);
  font-size: 30px;
  line-height: 0.7;
  color: var(--ink);
  padding: 0;
  margin-top: -2px;
}
.cafes-close:hover { color: var(--accent); }

.cafes-search-wrap { flex: none; padding: 0 16px 10px; }
.cafes-search {
  width: 100%;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 9px 11px;
  outline: none;
}
.cafes-search::placeholder { color: var(--ink-soft); }
.cafes-search:focus { box-shadow: 2px 2px 0 var(--ink); }

.cafes-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-soft) transparent;
}
.cafes-list::-webkit-scrollbar { width: 6px; }
.cafes-list::-webkit-scrollbar-thumb { background: var(--ink-soft); }

.cafes-item { border-bottom: 1px dashed var(--ink-soft); }
.cafes-item:last-child { border-bottom: none; }

.cafes-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: none; border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background .12s;
}
.cafes-row:hover { background: var(--paper-2); }
.cafes-row[aria-expanded="true"] { background: var(--paper-2); }

.cafes-thumb {
  width: 28px; height: 28px;
  image-rendering: pixelated;
  flex: none;
}
.cafes-rowtext { min-width: 0; flex: 1; display: block; }
.cafes-name {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cafes-item.here .cafes-name::after { content: ' ☕'; font-size: 12px; }
.cafes-kind {
  display: block;
  font-family: var(--pixel);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 1px;
}
.cafes-caret {
  font-size: 11px;
  color: var(--ink-soft);
  flex: none;
  transition: transform .18s;
}
.cafes-row[aria-expanded="true"] .cafes-caret { transform: rotate(180deg); color: var(--accent); }

.cafes-drop { padding: 2px 14px 14px; }
.cafes-stars {
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--ink);
  margin-bottom: 6px;
}
.cafes-stars .stars { color: var(--accent-2); letter-spacing: 2px; }
.cafes-note {
  font-size: 13px;
  line-height: 1.45;
  color: #25307e;
  margin-bottom: 7px;
}
.cafes-goodfor {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 10px;
}
.cafes-links a { font-size: 9px; padding: 5px 8px; }

.cafes-empty {
  flex: none;
  padding: 14px 16px;
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.cafes-foot {
  flex: none;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--ink-soft);
}
.cafes-social-label {
  display: block;
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.cafes-social-links { display: flex; gap: 8px; }
.social-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  transition: transform .1s, box-shadow .1s, background .12s, color .12s;
}
.social-ico:hover {
  transform: translate(-1px,-1px);
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--ink); color: var(--paper);
}
.cafes-credit {
  margin-top: 14px;
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: .03em;
  line-height: 1.7;
  color: var(--ink-soft);
}
.cafes-credit a { color: var(--accent); text-decoration: none; }
.cafes-credit a:hover { color: var(--ink); }

/* ───────────────────────────── card ────────────────────────────── */
.card {
  position: fixed;
  left: 342px; bottom: 22px;   /* clear of the 320px left sidebar */
  width: min(360px, calc(100vw - 44px));
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink), 6px 6px 0 1px var(--paper);
  padding: 22px 24px 20px;
  z-index: 30;
  animation: card-in .25s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.97);} to { opacity:1; transform:none;} }

.card-close {
  position: absolute; top: 8px; right: 12px;
  font-family: var(--pixel); font-size: 26px;
  background: none; border: none; color: var(--ink);
  cursor: pointer; line-height: 1;
}
.card-close:hover { color: var(--accent); }

.card-pin {
  width: 14px; height: 14px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
  margin-bottom: 12px;
}

.card-kind {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent);
}

.card-name {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.02;
  font-weight: 400;
  color: var(--ink-deep);
  margin: 6px 0 4px;
}

.card-rating {
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--ink);
  margin-bottom: 10px;
}
.card-rating .stars { color: var(--accent-2); letter-spacing: 2px; }

.card-note {
  font-size: 14.5px;
  line-height: 1.5;
  color: #25307e;
  margin-bottom: 14px;
}

.card-goodfor {
  border-top: 1px dashed var(--ink-soft);
  padding-top: 10px;
  margin-bottom: 14px;
}
.goodfor-label {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.card-goodfor p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  margin-top: 3px;
}

.card-links { display: flex; flex-wrap: wrap; gap: 8px; }
.card-links a {
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  padding: 6px 10px;
  border: 2px solid var(--ink);
  transition: background .12s, color .12s;
}
.card-links a:hover { background: var(--paper); color: var(--ink); }

/* shared minimize/close button used in the café panel head */
.player-min {
  font-family: var(--pixel); font-size: 12px;
  background: none; border: none; color: var(--ink); cursor: pointer;
}
.player-min:hover { color: var(--accent); }

/* ───────────────────────────── toast ───────────────────────────── */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  font-family: var(--pixel);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--paper);
  background: var(--night);
  border: 2px solid var(--paper);
  padding: 9px 16px;
  z-index: 40;
  animation: toast-in .3s ease both;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px);} to { opacity: 1; transform: translate(-50%, 0);} }

/* ─────────────── explore hint along the bottom of the map ─────────────── */
.map-hint {
  position: fixed;
  bottom: 20px;
  left: calc(50% + 160px);   /* centred in the map area, right of the sidebar */
  transform: translateX(-50%);
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(36,56,201,.5);
  pointer-events: none;
  user-select: none;
  z-index: 18;
  white-space: nowrap;
}

/* ───────────────────────────── about ───────────────────────────── */
.about {
  position: fixed; inset: 0;
  background: rgba(11,16,48,.66);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.about-box {
  position: relative;
  width: min(460px, calc(100vw - 40px));
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 30px 32px;
}
.about-box h2 {
  font-family: var(--serif);
  font-size: 34px; font-weight: 400;
  color: var(--ink-deep);
  margin-bottom: 14px;
}
.about-box p { font-size: 14.5px; line-height: 1.55; color: #25307e; margin-bottom: 12px; }
.about-hint { font-family: var(--pixel); font-size: 9.5px !important; line-height: 2 !important; color: var(--ink) !important; }
.about-contact {
  border-top: 1px dashed var(--ink-soft);
  padding-top: 12px;
  margin-top: 14px;
}
.about-contact .card-links { margin-top: 6px; }
.about-credit {
  font-family: var(--pixel);
  font-size: 9px !important;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin: 12px 0 0 !important;
}
.about-credit a { color: var(--accent); text-decoration: none; }
.about-credit a:hover { color: var(--ink); }

/* ─────────────────────────── responsive ────────────────────────── */
@media (max-width: 720px) {
  /* the sidebar collapses to a sheet, so the wordmark returns to the HUD */
  .hud-brand { display: block; }
  .hud-logo { font-size: 22px; }

  /* intro (mobile): kicker + title at the top, a smaller globe centred in the
     middle with clear space above and below it (sized by intro.js from the gap
     between the title and the button), then the button, the paragraph and the
     footer stacked along the bottom — the button sits ABOVE the paragraph */
  .intro-ui { justify-content: flex-start; padding-top: 5vh; }
  .intro-title { font-size: clamp(54px, 15vw, 92px); }
  .enter-btn { top: auto; bottom: 160px; }
  .intro-desc {
    top: auto; bottom: 60px;
    font-size: 11px; line-height: 1.5;
    max-width: 92vw; padding: 0 18px;
  }
  .intro-foot { bottom: 16px; }
  .card { left: 16px; bottom: auto; top: 76px; width: min(360px, calc(100vw - 32px)); }
  .toast { bottom: auto; top: 64px; max-width: calc(100vw - 32px); white-space: normal; text-align: center; }
  .map-hint { left: 50%; bottom: 12px; font-size: 8.5px; letter-spacing: .08em; }

  /* the café panel becomes a slide-in sheet, opened with the ☰ places button */
  .places-btn { display: inline-block; }
  .cafes { display: none; }
  .cafes.open {
    display: flex;
    left: 0; top: 0; bottom: 0;
    width: min(340px, calc(100vw - 36px));
    max-height: none;
    border-top: none; border-bottom: none; border-left: none;
    box-shadow: 6px 0 0 rgba(36,56,201,.25);
    z-index: 45;
    animation: sheet-in .22s ease both;
  }
  .cafes.open .cafes-close { display: block; }
}
@keyframes sheet-in { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }