/* /play, the games board: the city's name sprayed huge across the wall, "Your games" as slips, a strip of days, then
   each day's games pasted up as slips (m.css .feed, .feed-card). Only page layout lives here; colours, type and the
   shared pieces come from m.css. */

@media (prefers-reduced-motion: no-preference) {
  html:has(.board) { scroll-behavior: smooth; }
}

/* ---------- the city: a giant screen-print, pink and cyan plates slipping under the paper one ---------- */

.board__kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash);
}
.board__city { margin-top: 2px; }
.board__pick {
  display: inline-flex; align-items: flex-end; gap: 10px; max-width: 100%; padding: 4px 0;
  text-align: left; color: var(--paper);
}
.board__name {
  min-width: 0;
  font-family: var(--poster); font-weight: 900; font-stretch: 50%; text-transform: uppercase;
  font-size: clamp(64px, 21vw, 128px); line-height: 0.84; letter-spacing: -0.01em;
  overflow-wrap: anywhere; text-wrap: balance;
  text-shadow: -5px 4px 0 var(--pink), 5px -3px 0 var(--cyan);
}
.board__name[data-long] { font-size: clamp(44px, 13.5vw, 92px); }
.no-narrow .board__name { font-size: clamp(42px, 13vw, 84px); letter-spacing: -0.04em; }
.no-narrow .board__name[data-long] { font-size: clamp(30px, 9vw, 60px); }
[data-view="pick"] .board__name { color: var(--ash); text-shadow: none; }
/* The app's lettered name (city-art.js): its plates are in the art, so no text shadow; never wider than the line. */
.board__name[data-art] { display: block; line-height: 0; text-shadow: none; }
.board__art {
  display: block; width: auto; height: clamp(60px, 18vw, 100px);
  max-width: calc(100vw - 2 * var(--gutter) - 46px); object-fit: contain; object-position: left bottom;
}
.board__name[data-brush="about"] .board__art { height: clamp(72px, 21vw, 120px); }
.board__town::before { content: " · "; }
.board__chevron {
  flex: none; width: 30px; height: 30px; margin-bottom: 0.12em; color: var(--lime);
  transition: transform var(--fast) var(--pop);
}
.board__pick[aria-expanded="true"] .board__chevron { transform: rotate(180deg); }
.board__pick:active .board__name { transform: translate(2px, 2px); }
@media (hover: hover) {
  .board__pick:hover .board__chevron { transform: translateY(4px); }
  .board__pick[aria-expanded="true"]:hover .board__chevron { transform: rotate(180deg) translateY(4px); }
}

.board__caption {
  margin-top: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash);
}
.board__caption:empty { display: none; }
.board__home { margin-top: 6px; font-size: 14px; }
.board__home .link, .board__note .link { min-height: 44px; color: var(--lime); }
.board__note { margin-top: 10px; font-size: 14px; color: var(--ash); }

.board__search { max-width: 520px; margin-top: 4px; animation: rise var(--normal) var(--out) both; }
.board__search .field__label { color: var(--paper); }
.board__search .field__hint { color: var(--ash); }
.board__search .field__hint:empty { display: none; }
.board__search .field__hint[data-tone="bad"] { color: var(--pink); }

/* ---------- your games: slips in a row you can swipe ---------- */

.mine { margin-top: 30px; }
.mine__title {
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime);
}
.mine__list {
  display: flex; gap: 14px; margin: 8px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) 14px;
  list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.mine__list::-webkit-scrollbar { display: none; }
.mine__list > li { flex: none; scroll-snap-align: start; }
.slip {
  --tone: var(--cyan); --tilt: -0.6deg;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 8px; width: 204px; height: 100%; padding: 10px 12px 11px;
  color: var(--ink); text-decoration: none; background: var(--paper);
  border: var(--edge) solid var(--ink); border-radius: 3px; box-shadow: 4px 4px 0 var(--tone); transform: rotate(var(--tilt));
  transition: transform var(--fast) var(--out), box-shadow var(--fast) var(--out);
}
.mine__list > li:nth-child(even) .slip { --tilt: 0.5deg; }
.slip[data-tone="host"] { --tone: var(--lime); }
.slip[data-tone="off"] { --tone: rgba(242, 240, 234, 0.3); }
.slip__when {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--alarm);
}
.slip__sticker {
  grid-column: 2; padding: 2px 6px; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--lime); border: 2px solid var(--ink); transform: rotate(3deg);
}
.slip__name {
  grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--brand); font-weight: 800; font-size: 16px; letter-spacing: -0.04em;
}
.slip__status {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(16, 16, 20, 0.62);
}
.slip:active { transform: translate(2px, 2px) rotate(var(--tilt)); box-shadow: 1px 1px 0 var(--tone); }
.slip:focus-visible { outline-offset: 5px; }
@media (hover: hover) {
  .slip:hover { transform: translateY(-3px) rotate(0deg); box-shadow: 6px 7px 0 var(--tone); }
}

.board__tape { margin-top: 34px; margin-bottom: 18px; }

/* ---------- the days: two weeks of chips, pinned to the top while the games scroll under ---------- */

.days {
  position: sticky; top: 0; z-index: 6;
  margin: 0 calc(-1 * var(--gutter)); padding: calc(4px + env(safe-area-inset-top)) var(--gutter) 10px;
  background: var(--ink); border-bottom: 2px solid var(--pink);
}
.days__list { display: flex; gap: 8px; padding-top: 8px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.days__list::-webkit-scrollbar { display: none; }
.days__list > li { flex: none; }
.days__chip {
  position: relative; display: grid; place-items: center; align-content: center; width: 54px; height: 56px;
  color: var(--paper); text-decoration: none; background: var(--tarmac); border-radius: 7px;
  transition: transform var(--fast) var(--pop), background-color var(--fast);
}
.days__chip small { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
.days__chip b { font-family: var(--poster); font-weight: 900; font-stretch: 50%; font-size: 26px; line-height: 0.95; }
.days__chip[data-empty] { opacity: 0.4; }
.days__chip[data-today] { color: var(--ink); background: var(--paper); box-shadow: inset 0 4px 0 var(--pink); }
.days__chip[data-today] small { color: rgba(16, 16, 20, 0.6); }
.days__count {
  position: absolute; top: -7px; right: -5px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px;
  font-family: var(--mono); font-size: 10px; font-weight: 800; color: var(--ink);
  background: var(--lime); border: 1.5px solid var(--ink); border-radius: 999px;
}
button.days__chip { padding: 0; font: inherit; border: 0; cursor: pointer; }
.days__chip[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--lime); }
.days__chip:active { transform: translate(1px, 2px); }
@media (hover: hover) {
  a.days__chip:hover { transform: translateY(-2px) rotate(-2deg); background: var(--lime); color: var(--ink); }
  a.days__chip:hover small { color: rgba(16, 16, 20, 0.6); }
  button.days__chip:hover { opacity: 0.75; }
  button.days__chip[aria-pressed="true"]:hover { opacity: 1; }
}

/* A picked day with no games: one dashed line under the chips, over the map and the list. */
.days__note {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 6px 4px 6px 14px;
  font-size: 14px; font-weight: 600; color: var(--paper);
  border: 1.5px dashed rgba(242, 240, 234, 0.3); border-radius: 10px;
  animation: day-note-in var(--fast) var(--out);
}
.days__note:empty { display: none; }
.days__note-text { flex: 1 1 auto; }
.days__note .feed__host { flex: none; white-space: nowrap; }
.days__note-close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  font-size: 22px; line-height: 1; color: var(--ash); background: none; border: 0; cursor: pointer;
}
.days__note-close:hover { color: var(--paper); }
@keyframes day-note-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .days__note { animation: none; } }

/* ---------- the feed ---------- */

.feed { margin-top: 26px; }
/* A jump from the day strip lands just under it. */
.feed__day { scroll-margin-top: calc(96px + env(safe-area-inset-top)); }
.feed__label::after { content: ""; flex: 1 1 24px; align-self: center; height: 2px; background: rgba(242, 240, 234, 0.18); }
.feed__label[data-today] { color: var(--lime); }
.board__skeleton-label { width: 46%; margin-bottom: 18px; }

.feed-card__host { font-size: 12.5px; font-weight: 700; color: rgba(16, 16, 20, 0.74); }
.feed-card__who { display: flex; align-items: center; min-height: 30px; }
.feed-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.feed-card__format {
  padding: 4px 7px; font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lime); background: var(--ink); border: 2px solid var(--ink); transform: rotate(2deg);
}

/* Today with nothing on: one quiet line and a way to fix it. */
.feed__none {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--ash);
  border: 1.5px dashed rgba(242, 240, 234, 0.3); border-radius: 10px;
}
.feed__host {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: var(--lime); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--pink);
  transition: transform var(--fast) var(--out);
}
.feed__host:active { transform: translate(2px, 2px); box-shadow: none; }

.feed__empty p { margin-top: 4px; }

/* Nothing on the board: one compact hosting call between the day chips and the map. */
.board__nothing:empty { display: none; }
.board__nothing { margin-top: 14px; }
.board-empty {
  display: grid; gap: 8px; padding: 14px 16px 16px;
  border: 2px dashed rgba(255, 45, 149, 0.7); border-radius: 12px;
  animation: paste var(--normal) var(--out) both;
}
.board-empty__sticker {
  justify-self: start; padding: 3px 7px;
  font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: var(--lime); border: 2px solid var(--ink); transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--pink);
}
.board-empty__title {
  font-family: var(--brand); font-weight: 800; font-size: clamp(18px, 5vw, 22px); line-height: 1.08;
  letter-spacing: -0.04em; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance;
}
.board-empty__lede { max-width: 52ch; font-size: 14px; color: var(--ash); }
.board-empty__cta { margin-top: 4px; min-height: 46px; font-size: 15px; }
main[data-empty] .feed { display: none; }

.board__error p { margin: 6px 0 18px; }
.board__retry { max-width: 260px; margin-inline: auto; }

/* ---------- under the feed: host your own ---------- */

.board__cta { margin-top: 52px; padding: 24px 20px; border: 2px dashed rgba(242, 240, 234, 0.3); }
.board__cta-title { font-family: var(--brand); font-weight: 800; font-size: 19px; line-height: 1.1; letter-spacing: -0.04em; text-transform: uppercase; }
.board__cta-lede { margin: 8px 0 20px; font-size: 15px; color: var(--ash); }

@media (min-width: 560px) {
  .board__cta .btn { max-width: 360px; }
  /* Words on the left, the button on the right. */
  .board-empty { grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center; padding: 16px 22px; }
  .board-empty > :not(.board-empty__cta) { grid-column: 1; }
  .board-empty__cta { grid-column: 2; grid-row: 1 / span 3; width: auto; margin-top: 0; padding: 0 26px; }
}

/* ---------- a laptop: one wide wall, the games in columns ---------- */

@media (min-width: 960px) {
  main.board { display: block; padding-top: 34px; }
  .board__name { font-size: clamp(120px, 11vw, 168px); text-shadow: -7px 5px 0 var(--pink), 7px -4px 0 var(--cyan); }
  .board__name[data-long] { font-size: clamp(76px, 7vw, 112px); }
  .board__art { height: 136px; max-width: 70vw; }
  .board__name[data-brush="about"] .board__art { height: 160px; }
  .no-narrow .board__name { font-size: clamp(72px, 7vw, 108px); }
  .no-narrow .board__name[data-long] { font-size: clamp(48px, 4.6vw, 72px); }
  .board__chevron { width: 40px; height: 40px; }
  .mine__list { margin-inline: 0; padding-inline: 4px; scroll-padding-inline: 4px; }
  .slip { width: 232px; }
  .days { margin-inline: 0; padding-inline: 14px; border-radius: 6px 6px 0 0; }
  .feed { margin-top: 34px; }
  .feed__day { scroll-margin-top: 110px; }
  .board__cta {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); align-items: center; column-gap: 40px;
    padding: 30px 32px;
  }
  .board__cta .btn { grid-column: 2; grid-row: 1 / span 2; }
  .board__cta-lede { margin-bottom: 0; }
}

/* ---------- the map: one plain dark city, games standing on it as pills, courts as dots (after CSFC's map) ---------- */

.map {
  /* The basemap's land: OpenFreeMap dark's own background, so nothing flashes before the streets land. */
  --map-land: rgb(12, 12, 12);
  --map-control: rgba(16, 16, 20, 0.9);
  --map-edge: rgba(242, 240, 234, 0.14);
  margin-top: 22px;
}

/* The legend: one compact row over the map; it scrolls sideways when it doesn't fit. */
.map__bar {
  display: flex; align-items: center; gap: 8px; margin: 0 calc(-1 * var(--gutter)) 10px; padding: 4px var(--gutter) 6px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.map__bar::-webkit-scrollbar { display: none; }

/* The legend is the filter: each chip switches its kind of pin off and on. */
.map__legend { flex: none; display: flex; gap: 6px; }
.map-key {
  --key: var(--paper);
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px 0 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--paper); background: var(--tarmac); border: 2px solid var(--key); border-radius: 999px;
  transition: opacity var(--fast), transform var(--fast) var(--pop), background-color var(--fast);
}
.map-key[data-tone="lime"] { --key: var(--lime); }
.map-key[data-tone="cyan"] { --key: var(--cyan); }
.map-key[data-tone="pink"] { --key: var(--pink); }
.map-key[data-tone="ash"] { --key: var(--ash); }
.map-key__dot { flex: none; width: 10px; height: 10px; background: var(--key); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--key); }
.map-key[data-kind="games"] .map-key__dot { width: 18px; height: 11px; border-radius: 999px; background: var(--ink); box-shadow: 0 0 0 2px var(--paper); border: 0; }
.map-key[data-kind="paid"] .map-key__dot { border-radius: 2px; transform: rotate(45deg) scale(0.85); }
.map-key__count { color: var(--ash); }
.map-key[aria-pressed="false"] { opacity: 0.5; border-color: rgba(242, 240, 234, 0.2); }
.map-key[aria-pressed="false"] .map-key__dot { background: transparent; }
.map-key[aria-pressed="false"] > span:nth-child(2) { text-decoration: line-through; text-decoration-thickness: 2px; }
.map-key:active { transform: translate(1px, 2px); }
.map-key:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
@media (hover: hover) {
  .map-key:hover { transform: rotate(-2deg); background: rgba(242, 240, 234, 0.08); }
}

/* On a phone the map sits on top of the list, a framed window about two fifths of the screen tall. Its own stacking
   box, so MapLibre's canvas and markers never cover the day strip or the tabs. */
.map__stage {
  position: relative; z-index: 0; overflow: hidden;
  height: 42vh; height: 42svh; min-height: 260px; max-height: 480px;
  background: var(--map-land); border: 2px solid var(--map-edge); border-radius: 14px; box-shadow: 5px 5px 0 var(--pink);
}
/* Two classes, so MapLibre's own .maplibregl-map { position: relative } (its stylesheet loads later) can't shrink it. */
.map__stage .map__canvas { position: absolute; inset: 0; }
.map .map__stage .maplibregl-map { background: var(--map-land); font-family: var(--body); }
.map .map__stage .maplibregl-canvas:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }

/* Zoom: small and dark, bottom right, over the credit. MapLibre's icons are dark grey, so they're turned light here. */
.map .map__stage .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { margin: 0 10px 6px 0; }
.map .map__stage .maplibregl-ctrl-group {
  overflow: hidden; background: var(--map-control); border: 1px solid var(--map-edge); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.map .map__stage .maplibregl-ctrl-group button { width: 30px; height: 30px; background-color: transparent; }
.map .map__stage .maplibregl-ctrl-group button + button { border-top: 1px solid var(--map-edge); }
.map .map__stage .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1); }
.map .map__stage .maplibregl-ctrl-group button:not(:disabled):hover,
.map .map__stage .maplibregl-ctrl-group button:focus-visible { background-color: var(--lime); }
.map .map__stage .maplibregl-ctrl-group button:not(:disabled):hover .maplibregl-ctrl-icon,
.map .map__stage .maplibregl-ctrl-group button:focus-visible .maplibregl-ctrl-icon { filter: none; }
.map .map__stage .maplibregl-ctrl-group button:focus-visible { box-shadow: none; outline: 2px solid var(--cyan); outline-offset: -2px; }

/* The credit (OpenFreeMap, © OpenMapTiles, OpenStreetMap): MapLibre's compact one, open until the map is first dragged,
   then an (i) to open it again. Dark, small, always there. */
.map .map__stage .maplibregl-ctrl.maplibregl-ctrl-attrib { color: var(--ash); background: rgba(16, 16, 20, 0.78); font-size: 9.5px; line-height: 16px; }
.map .map__stage .maplibregl-ctrl-attrib a { color: rgba(242, 240, 234, 0.8); }
.map .map__stage .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 16px; margin: 0 10px 8px 0; padding: 2px 26px 2px 8px; }
.map .map__stage .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { padding: 0; }
/* Its (i): a light disc with a dark mark, inverted to a dark disc with a light one. */
.map .map__stage .maplibregl-ctrl-attrib-button { background-color: rgba(239, 239, 235, 0.9); filter: invert(1); }
.map .map__stage .maplibregl-ctrl-attrib-button:focus-visible { outline: 2px solid var(--cyan); }

/* ---------- pins: each a MapLibre marker with no size at its point; the pin stands on that point ---------- */

.pin-wrap { width: 0 !important; height: 0 !important; }
/* Game pills over court dots; the one you hover, focus or open over them all. The markers' layer is its own stack, so
   none of that reaches over the zoom buttons and the credit. */
.map .map__stage .maplibregl-canvas-container { isolation: isolate; }
.pin-wrap--court { z-index: 1; }
.pin-wrap--game { z-index: 2; }
.pin-wrap:hover, .pin-wrap:focus-visible, .pin-wrap.is-active { z-index: 3; }
.pin-wrap:focus { outline: none; }
.pin { position: absolute; left: 0; }

/* A game: a dark pill (the court, then its one game's date and time or a lime count) on a thin stem, the dot on the
   court. Picked, it turns lime. */
.pin--game {
  --pin-bg: var(--ink); --pin-fg: var(--paper); --pin-line: var(--paper);
  bottom: -4px; display: flex; flex-direction: column; align-items: center;
  transform: translateX(-50%); transition: transform var(--fast) var(--pop);
}
.pin__pill {
  display: flex; align-items: center; gap: 6px; max-width: 280px; min-height: 30px; padding: 0 11px;
  font-family: var(--body); font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--pin-fg); background: var(--pin-bg); border: 2px solid var(--pin-line); border-radius: 999px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.6);
  transition: color var(--fast), background-color var(--fast), border-color var(--fast);
}
.pin__name { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.pin__when { flex: none; font-weight: 600; opacity: 0.78; }
.pin__when::before { content: "·"; margin-right: 6px; }
.pin__count {
  flex: none; display: grid; place-items: center; min-width: 20px; height: 20px; margin-right: -6px; padding: 0 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--ink); background: var(--lime); border-radius: 999px;
}
.pin__stem { width: 2px; height: 12px; background: var(--pin-line); }
.pin--game .pin__dot { width: 8px; height: 8px; background: var(--pin-bg); border: 2px solid var(--pin-line); border-radius: 50%; }
.pin-wrap.is-active .pin--game { --pin-bg: var(--lime); --pin-fg: var(--ink); --pin-line: var(--lime); }
.pin-wrap.is-active .pin--game .pin__dot { background: var(--ink); }
.pin-wrap.is-active .pin__count { color: var(--lime); background: var(--ink); }
.pin-wrap:focus-visible .pin__pill { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pin-wrap:focus-visible .pin--game { transform: translate(-50%, -2px); }
@media (hover: hover) {
  .pin-wrap:hover .pin--game { transform: translate(-50%, -2px); }
  .pin-wrap:not(.is-active):hover .pin__pill { border-color: var(--lime); }
}

/* A court with no game: a small dot by price (paid ones are diamonds, so colour isn't the only tell), named on hover,
   focus or tap. */
.pin--court { --dot: var(--ash); --turn: 0deg; --grow: 1; top: 0; }
.pin--court[data-tone="cyan"] { --dot: var(--cyan); }
.pin--court[data-tone="pink"] { --dot: var(--pink); --turn: 45deg; }
/* A thumb-sized target around the small dot. */
.pin--court::before { content: ""; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; }
.pin--court .pin__dot {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px;
  background: var(--dot); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 1px rgba(242, 240, 234, 0.3);
  transform: rotate(var(--turn)) scale(var(--grow)); transition: transform var(--fast) var(--pop);
}
.pin--court[data-tone="pink"] .pin__dot { border-radius: 2px; }
.pin__label {
  position: absolute; left: 0; bottom: 12px; padding: 6px 10px; pointer-events: none;
  font-family: var(--body); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
  color: var(--paper); background: var(--ink); border: 2px solid var(--dot); border-radius: 999px; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--fast), transform var(--fast) var(--out);
}
.pin-wrap:focus-visible .pin--court, .pin-wrap.is-active .pin--court { --grow: 1.35; }
.pin-wrap:focus-visible .pin__label, .pin-wrap.is-active .pin__label { opacity: 1; transform: translate(-50%, 0); }
.pin-wrap:focus-visible .pin--court .pin__dot { outline: 3px solid var(--cyan); outline-offset: 3px; }
@media (hover: hover) {
  .pin-wrap:hover .pin--court { --grow: 1.35; }
  .pin-wrap:hover .pin__label { opacity: 1; transform: translate(-50%, 0); }
}

/* Over the map: loading, a retry, or the empty call to host. */
.map__status {
  position: absolute; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px;
  text-align: center; background: rgba(11, 11, 14, 0.5);
}
.map__status p {
  max-width: 30ch; padding: 7px 11px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--pink); transform: rotate(-2deg);
}
.map__status .btn { width: auto; min-height: 50px; padding-inline: 24px; font-size: 14px; }

/* The card for the pin you opened: it slides up from the bottom of the map. */
.map-card {
  --card: var(--lime);
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1001; max-height: calc(100% - 20px); overflow-y: auto;
  padding: 16px 16px 14px; color: var(--ink); background: var(--paper);
  border: var(--edge) solid var(--ink); border-radius: 10px; box-shadow: 5px 5px 0 var(--card);
  animation: sheet var(--normal) var(--out) both;
  /* Scrolled into view clear of the sticky day strip and the phone's tab bar. */
  scroll-margin: 110px 0 calc(var(--tabbar) + 16px + env(safe-area-inset-bottom));
}
.map-card[data-tone="cyan"] { --card: var(--cyan); }
.map-card[data-tone="pink"] { --card: var(--pink); }
.map-card[data-tone="ash"] { --card: var(--ash); }
.map-card:focus { outline: none; }
.map-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.map-card__close {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 42px; height: 42px;
  font-size: 28px; line-height: 1; color: var(--ink); border-radius: 50%; transition: background-color var(--fast), transform var(--fast) var(--pop);
}
.map-card__close:hover, .map-card__close:focus-visible { background: rgba(16, 16, 20, 0.1); transform: rotate(90deg); }
.map-card__kicker {
  padding-right: 40px; font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(16, 16, 20, 0.66);
}
.map-card__title {
  margin-top: 4px; padding-right: 32px; font-family: var(--brand); font-weight: 800; font-size: 19px; line-height: 1.08;
  letter-spacing: -0.045em; overflow-wrap: anywhere;
}
.map-card__where { margin-top: 3px; font-size: 13px; color: rgba(16, 16, 20, 0.66); }
.map-card__games { display: grid; gap: 8px; margin-top: 12px; list-style: none; }
.map-card__host { margin-top: 16px; min-height: 50px; font-size: 15px; }

/* Each game in a card: a black ticket, its edge coloured like the board's cards (cyan waiting, lime on, pink full). */
.map-game {
  --tone: var(--cyan);
  display: grid; gap: 3px; padding: 9px 12px 10px; color: var(--paper); text-decoration: none;
  background: var(--ink); border-left: 6px solid var(--tone); border-radius: 2px;
  transition: transform var(--fast) var(--out);
}
.map-game[data-tone="on"] { --tone: var(--lime); }
.map-game[data-tone="full"] { --tone: var(--pink); }
.map-game__when { font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.map-game__title { font-family: var(--brand); font-weight: 800; font-size: 14px; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.map-game__tags { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: rgba(242, 240, 234, 0.8); }
.map-game__tags b { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--paper); }
.map-game:active { transform: translate(2px, 1px); }
.map-game:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
@media (hover: hover) {
  .map-game:hover { transform: translateX(4px); }
}

.map__note { margin-top: 10px; font-size: 13px; color: var(--ash); }
.map__note .link { min-height: 44px; color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .map-card { animation: none; }
  .pin--game, .pin__pill, .pin__dot, .pin__label, .map-key, .map-game { transition: none; }
}

/* ---------- a laptop: the list on the left, the map on the right, staying put while the games scroll ---------- */

@media (min-width: 960px) {
  main[data-layout="map"] .board__split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 32px; align-items: start;
  }
  /* The map column fills the screen under the day strip; the tiles take whatever the chips leave. */
  main[data-layout="map"] .map {
    grid-column: 2; grid-row: 1; position: sticky; top: 100px; margin-top: 34px;
    display: flex; flex-direction: column; height: calc(100vh - 124px); min-height: 520px; max-height: 920px;
  }
  main[data-layout="map"] .map__stage { flex: 1 1 auto; height: auto; min-height: 360px; max-height: none; }
  main[data-layout="map"] .feed { grid-column: 1; grid-row: 1; }
  main[data-layout="map"][data-empty] .map { grid-column: 1 / -1; }
  main[data-layout="map"] .feed__list { grid-template-columns: minmax(0, 1fr); }
  /* One row at laptop widths; a narrow laptop wraps it rather than hiding chips a mouse can't scroll to. */
  .map__bar { flex-wrap: wrap; row-gap: 8px; margin-inline: 0; padding-inline: 0 6px; overflow: visible; }
  .map-key { padding: 0 11px 0 9px; letter-spacing: 0.1em; }
  .map__stage { border-radius: 16px; box-shadow: 8px 8px 0 var(--pink); }
  /* Bottom left, so the zoom buttons stay in reach while a card is open. */
  .map-card { right: auto; left: 14px; bottom: 14px; width: min(360px, calc(100% - 28px)); scroll-margin-bottom: 24px; }
}