/* ═══════════════════════════════════════════════════════════════════════
   „טיילתי בארץ” — layout and motion.

   TWO RULES ABOVE THE REST.

   The map is the product. Israel is 1:2.7, so it stands as a tall column and
   everything else — score, the players, the two actions — lives in the width
   the country cannot use. That is what keeps the map at 55–65% of the useful
   screen while Home also carries a scoreboard.

   The map never moves. No pan, no zoom, no country-scale animation, ever. All
   motion in this product happens to the DATA on the map, never to the map.

   Motion is one system, not a per-component decision. Every duration and every
   curve below comes from the tokens; nothing invents its own. Arrivals
   decelerate, departures accelerate and are shorter, and exactly one gentle
   spring exists — a visited point landing, and the score settling after it.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bt-on: #9C3F16;
  --bt-on-deep: #71290B;
  --bt-on-soft: rgba(156, 63, 22, .12);
  --bt-off: #9C8B6C;
  --bt-tile: rgba(249, 241, 221, .74);
  --bt-row-h: 60px;
  --bt-head: 67px;              /* the Masa banner, measured at runtime */

  /* ── motion tokens ──────────────────────────────────────────────── */
  --m-instant:   110ms;
  --m-fast:      160ms;
  --m-standard:  220ms;
  --m-sheet-in:  320ms;
  --m-sheet-out: 230ms;
  --m-modal-in:  200ms;
  --m-modal-out: 160ms;
  --m-scrim:     240ms;
  --m-dot-in:    520ms;
  --m-dot-out:   360ms;
  --m-ring:      700ms;
  --m-score:     420ms;
  --m-settle:    180ms;

  --e-out:    cubic-bezier(.2, 0, 0, 1);
  --e-in:     cubic-bezier(.3, 0, .8, .2);
  --e-std:    cubic-bezier(.2, 0, .2, 1);
  --e-spring: cubic-bezier(.22, 1.12, .36, 1);
  --e-press:  cubic-bezier(0, 0, .2, 1);

  /* ── map density, swapped by data-density on the map root ───────── */
  --bt-off-o: .34;
  --bt-halo-o: .19;
}

.bt-body { min-height: 100svh; overflow-x: hidden; -webkit-text-size-adjust: 100% }
.bt-banner { position: sticky; top: 0; z-index: 40 }
.bt-app { display: block }
.bt-screen { display: block }
.bt-screen[hidden] { display: none }

/* ── type ────────────────────────────────────────────────────────────── */
.bt-h1 {
  font-family: var(--font-display);
  font-size: clamp(31px, 9vw, 44px); line-height: 1.12;
  color: var(--ink); text-wrap: balance; margin-bottom: 14px;
}
.bt-lede { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 30ch; margin-bottom: 30px }
.bt-fine { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 18px }
.bt-hint { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); margin: 0 2px 12px }

/* ── buttons: one press language everywhere ──────────────────────────
   Press is fast and slightly darker; release is twice as long. No shadows —
   this is a paper system, and a lifting card would be a different product. */
.bt-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 54px;
  font-family: inherit; font-size: 16.5px; font-weight: 700;
  border-radius: 14px; border: 1.5px solid transparent; cursor: pointer;
  padding: 14px 18px; text-align: center;
  transition: transform var(--m-standard) var(--e-out),
              background-color var(--m-fast) var(--e-std),
              border-color var(--m-fast) var(--e-std),
              color var(--m-fast) var(--e-std),
              opacity var(--m-fast) var(--e-std);
}
.bt-btn svg { width: 19px; height: 19px; flex: none }
.bt-btn:active { transform: scale(.97); transition-duration: var(--m-instant); transition-timing-function: var(--e-press) }
.bt-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px }
.bt-btn[disabled] { opacity: .42; cursor: default }
.bt-btn[aria-busy="true"] { opacity: .7; pointer-events: none }
.bt-btn-primary { background: var(--sienna); color: #FDF7E8 }
.bt-btn-primary:not([disabled]):hover { background: var(--sienna-deep) }
.bt-btn-primary:active { background: var(--sienna-deep) }
.bt-btn-share { background: var(--paper-hi); color: var(--sienna-deep); border-color: var(--sienna) }
.bt-btn-share:hover, .bt-btn-share:active { background: var(--bt-on-soft) }
.bt-btn-quiet { background: transparent; color: var(--ink-soft); min-height: 48px; font-size: 15px; font-weight: 600 }
.bt-btn-quiet:hover { color: var(--sienna) }
.bt-btn-danger { background: #A4271A; color: #FDF7E8 }
.bt-btn-danger:hover, .bt-btn-danger:active { background: #86200F }
.bt-btn + .bt-btn { margin-top: 10px }

/* ── welcome ─────────────────────────────────────────────────────────── */
.bt-welcome {
  min-height: calc(100svh - var(--bt-head) - 40px);
  display: flex; flex-direction: column; justify-content: center;
  max-width: 440px; margin: 0 auto; padding: 24px 20px 44px;
}
.bt-label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px }
.bt-input {
  display: block; width: 100%; min-height: 56px;
  font-family: inherit; font-size: 18px; color: var(--ink);
  background: var(--paper-hi); border: 1.5px solid var(--rule); border-radius: 14px;
  padding: 12px 16px; margin-bottom: 16px;
  transition: border-color var(--m-fast) var(--e-std), box-shadow var(--m-fast) var(--e-std);
}
.bt-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 100, 104, .18) }

/* ── the first marking session ───────────────────────────────────────── */
.bt-screen-flow { padding-bottom: calc(150px + env(safe-area-inset-bottom)) }
.bt-tickbar {
  position: sticky; top: var(--bt-head); z-index: 30;
  background: var(--paper); padding: 13px 20px 12px;
  box-shadow: 0 6px 14px -11px rgba(46, 32, 20, .4);
}
.bt-tickbar-in { display: flex; align-items: baseline; gap: 8px; max-width: 640px; margin-inline: auto }
.bt-tick-n {
  font-family: var(--font-display); font-size: 32px; line-height: 1;
  color: var(--bt-on); font-variant-numeric: tabular-nums;
  transition: transform var(--m-settle) var(--e-spring);
}
.bt-tick-n.settle { transform: scale(1.04) }
.bt-tick-w { font-size: 14px; font-weight: 700; color: var(--ink-soft) }
.bt-pickwrap { max-width: 640px; margin: 0 auto; padding: 16px 20px 0 }
/* The first session is the one place worth slowing down: a little more height,
   a little more air and a slightly larger name, because every row there is a
   name somebody has to actually recognise. The selector stays denser. */
#pick-rows { --bt-row-h: 64px; gap: 10px }
#pick-rows .bt-row-name { font-size: 17px }

.bt-dock {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 35;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 68%, rgba(242, 231, 206, 0));
}
.bt-dock > * { max-width: 440px; margin-inline: auto }
.bt-dock-note { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin-top: 9px }

/* ── one place per row ───────────────────────────────────────────────
   Finger-down is CSS :active with no JavaScript in the path, because a parent
   marking twenty places in twenty seconds must never wait for a frame budget. */
.bt-rows { display: grid; gap: 8px }
.bt-row {
  display: flex; align-items: center; gap: 13px; width: 100%;
  min-height: var(--bt-row-h); padding: 10px 14px;
  font-family: inherit; font-size: 16.5px; font-weight: 600; line-height: 1.3;
  text-align: right; color: var(--ink);
  background: var(--bt-tile); border: 1.5px solid var(--rule); border-radius: 14px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  transition: transform var(--m-standard) var(--e-out),
              background-color var(--m-fast) var(--e-std),
              border-color var(--m-fast) var(--e-std),
              color var(--m-fast) var(--e-std);
}
.bt-row:active {
  transform: scale(.975); background: rgba(196, 168, 118, .34);
  transition-duration: var(--m-instant); transition-timing-function: var(--e-press);
}
.bt-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px }
/* A marked row is COLLECTED, not "checkbox enabled": the outline drops away and
   the tile fills in. The border stays in the layout and only loses its colour,
   and the weight stays at 600 — the previous jump to 700 re-measured the text on
   every tap, which is exactly the jitter a fast thumb notices. */
.bt-row[aria-pressed="true"] {
  background: rgba(156, 63, 22, .16); border-color: transparent; color: var(--bt-on-deep);
}
/* THE AFTERGLOW. For just over half a second a freshly marked row sits a shade
   warmer, then decays INTO the solid collected tile — never back through an
   outline. Two adjacent rows can be mid-glow at once, which is what gives a fast
   run down the list its short warm trail. Nothing coordinates them: each row
   removes its own class on its own timer, so a thumb never queues.
   Unmarking has no afterglow — a correction should be quieter than a choice. */
.bt-row.just-on { background: rgba(156, 63, 22, .21); transition-duration: var(--m-instant) }

.bt-row-name { flex: 1; min-width: 0 }

/* ── the marker ──────────────────────────────────────────────────────
   The same visual vocabulary as a point on the map: a quiet dot when unvisited,
   a sienna disc with a soft halo when visited. No tick — a check mark says
   "form field", and this list is a map you are filling in. The 22px box is the
   layout slot and never changes size, so nothing around it can move. */
.bt-check {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 0;
}
.bt-mark {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bt-off); opacity: .55;
  box-shadow: 0 0 0 5px rgba(156, 63, 22, 0);
  transition: width var(--m-fast) var(--e-spring),
              height var(--m-fast) var(--e-spring),
              background-color var(--m-fast) var(--e-std),
              opacity var(--m-fast) var(--e-std),
              box-shadow var(--m-fast) var(--e-std);
}
.bt-row[aria-pressed="true"] .bt-mark {
  width: 12px; height: 12px; background: var(--bt-on); opacity: 1;
  box-shadow: 0 0 0 5px rgba(156, 63, 22, .19);
  animation: bt-mark-in var(--m-fast) var(--e-spring) both;
}
@keyframes bt-mark-in { from { transform: scale(.65) } to { transform: scale(1) } }

/* ── HOME ────────────────────────────────────────────────────────────── */
.bt-home {
  max-width: 460px; margin: 0 auto;
  padding: 6px 18px calc(16px + env(safe-area-inset-bottom));
  min-height: calc(100svh - var(--bt-head));
  display: flex; flex-direction: column;
}
.bt-homehead { flex: none; text-align: center }
.bt-chip {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 38px; padding: 6px 12px; border-radius: 999px;
  background: transparent; border: 1.5px solid transparent; cursor: pointer; color: var(--ink-soft);
  transition: border-color var(--m-fast) var(--e-std), color var(--m-fast) var(--e-std),
              transform var(--m-standard) var(--e-out);
}
.bt-chip:hover { border-color: var(--rule); color: var(--sienna) }
.bt-chip:active { transform: scale(.97); transition-duration: var(--m-instant) }
.bt-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px }
.bt-chip svg { width: 16px; height: 16px; flex: none }
.bt-chip-name { font-size: 15.5px; font-weight: 800; color: var(--ink); max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bt-hello {
  font-family: var(--font-display); font-size: 20px; line-height: 1.25;
  color: var(--sienna); margin: 2px 0; text-wrap: balance;
  opacity: 0; transition: opacity var(--m-standard) var(--e-out);
}
.bt-hello.is-in { opacity: 1 }

/* The stage: the country on the left, everything else in the column it leaves
   empty. That column is why Home can carry a scoreboard without the map
   giving up a single pixel. */
.bt-stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 4px 0 8px;
}
.bt-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px }
.bt-score { text-align: center }
.bt-score-n {
  font-family: var(--font-display);
  font-size: clamp(46px, 13.5vw, 62px); line-height: .95;
  color: var(--bt-on); font-variant-numeric: tabular-nums;
  transition: transform var(--m-settle) var(--e-spring);
}
.bt-score-n.settle { transform: scale(1.04) }
.bt-score-of { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 5px }
.bt-score-pct {
  font-size: 13px; color: var(--ink-soft); margin-top: 3px;
  opacity: 0; transition: opacity var(--m-standard) var(--e-out);
}
.bt-score-pct.is-in { opacity: 1 }
/* Quiet on purpose. It must be findable and must never look like it is
   competing with the two actions at the bottom of the screen. */
/* The persistent comparison. One line, no container, and deliberately smaller
   than the percentage above it — the player's own score stays the headline. */
.bt-vs {
  font-size: 12.5px; font-weight: 700; color: var(--teal);
  margin-top: 5px; font-variant-numeric: tabular-nums;
}
.bt-vs[hidden] { display: none }

.bt-statlink {
  display: inline-block; margin-top: 7px; padding: 4px 8px;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(111, 90, 59, .4);
  transition: color var(--m-fast) var(--e-std), text-decoration-color var(--m-fast) var(--e-std);
}
.bt-statlink:hover { color: var(--sienna); text-decoration-color: var(--sienna) }
.bt-statlink:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px }

/* ── the visible scoreboard ──────────────────────────────────────────
   The player loop used to live behind a dropdown, which made the whole social
   half of the product a settings screen. It is on Home now, in the empty
   column, compact enough that the map never notices. */
.bt-crew { text-align: right }
.bt-crew-h {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--ink-soft);
  margin-bottom: 5px; text-align: center;
}
.bt-crew-h[hidden] { display: none }
/* ONE comparison unit, not a stack of cards. The rows share a single quiet
   panel and a single hairline between them; a per-player border turned a
   scoreboard back into profile metadata. */
.bt-crew-list:not(:empty) {
  display: grid; background: rgba(249, 241, 221, .6);
  border: 1px solid var(--rule); border-radius: 11px; overflow: hidden;
}
.bt-crew-row {
  display: flex; align-items: baseline; gap: 5px; width: 100%; text-align: right;
  padding: 7px 9px; background: transparent; border: 0;
  border-top: 1px solid rgba(196, 168, 118, .5);
  font-family: inherit; cursor: pointer; color: var(--ink-soft);
  font-size: 12.5px; line-height: 1.35;
  transition: background-color var(--m-fast) var(--e-std);
}
.bt-crew-row:first-child { border-top: 0 }
.bt-crew-row:active { background: rgba(196, 168, 118, .28) }
.bt-crew-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px }
.bt-crew-row.is-me { background: var(--bt-on-soft) }
.bt-crew-name {
  flex: 0 1 auto; min-width: 0; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bt-crew-row.is-me .bt-crew-name { color: var(--bt-on-deep) }
.bt-crew-dash { flex: none; opacity: .55 }
.bt-crew-score {
  flex: 1 1 auto; font-weight: 700; color: var(--bt-on);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The top score gets weight. Not a medal, not an ordinal, not a word. */
.bt-crew-row.is-lead .bt-crew-score { font-weight: 800; font-size: 13.5px }
.bt-tick-me { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--bt-on); display: grid; place-items: center; align-self: center }
.bt-tick-me svg { width: 7px; height: 7px; stroke: #FDF7E8 }
.bt-crew-more {
  display: block; width: 100%; margin-top: 6px; padding: 8px 4px;
  background: transparent; border: 0; cursor: pointer; border-radius: 9px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--sienna); text-align: center;
  transition: color var(--m-fast) var(--e-std);
}
.bt-crew-more:hover { color: var(--sienna-deep) }
.bt-crew-more:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px }

.bt-map { flex: none; display: block }
.bt-map-home { height: min(56svh, 500px); max-height: 100%; aspect-ratio: 367.2 / 1000 }
.bt-map-svg { display: block; width: 100%; height: 100% }
.bt-land { fill: #EBDCB6; stroke: #B79B68; stroke-width: 1.6 }
.bt-water { fill: #CFE0E1; stroke: #B79B68; stroke-width: .9; stroke-opacity: .5 }

/* ── density bands ───────────────────────────────────────────────────
   Six of two hundred should read as a country full of possibility; a hundred
   and twenty should read as warmth rather than mud. The unvisited field steps
   back as the visited one fills in. No region fills, ever. */
.bt-map-svg { transition: none }
.bt-map-svg[data-density] .bt-dot:not(.is-on) { transition: fill-opacity 280ms var(--e-std) }
.bt-map-svg[data-density] .bt-halo { transition: fill-opacity 280ms var(--e-std) }
.bt-map-svg[data-density="low"]  { --bt-off-o: .34; --bt-halo-o: .19 }
.bt-map-svg[data-density="mid"]  { --bt-off-o: .30; --bt-halo-o: .19 }
.bt-map-svg[data-density="high"] { --bt-off-o: .25; --bt-halo-o: .15 }

.bt-dot { fill: var(--bt-off); fill-opacity: var(--bt-off-o) }
.bt-dot.is-on { fill: var(--bt-on); fill-opacity: 1 }
.bt-halo { fill: var(--bt-on); fill-opacity: var(--bt-halo-o) }

/* Arrival: one restrained spring, ~6% overshoot. Not the old 1.75× pop —
   that read as an arcade, and this is a map. */
.bt-dot.rise, .bt-halo.rise {
  animation: bt-dot-in var(--m-dot-in) var(--e-spring) both;
  transform-box: fill-box; transform-origin: center;
}
@keyframes bt-dot-in {
  0%   { transform: scale(.5); opacity: 0 }
  60%  { opacity: 1 }
  100% { transform: scale(1); opacity: 1 }
}
/* Departure: accelerating, shorter, no spring. A correction, not an event. */
.bt-dot.fell {
  animation: bt-dot-out var(--m-dot-out) var(--e-in) both;
  transform-box: fill-box; transform-origin: center;
}
@keyframes bt-dot-out {
  0%   { transform: scale(2.13); fill: var(--bt-on); fill-opacity: 1 }
  100% { transform: scale(1); fill: var(--bt-off); fill-opacity: var(--bt-off-o) }
}
.bt-halo.falling { animation: bt-halo-out var(--m-dot-out) var(--e-in) both }
@keyframes bt-halo-out { 0% { opacity: 1 } 100% { opacity: 0 } }

/* The ring is only ever drawn for a beat of one or two arrivals; at scale the
   group of new halos is the signal and rings would be noise. */
.bt-pulse { fill: none; stroke: var(--bt-on); stroke-width: 2.4; animation: bt-ring var(--m-ring) var(--e-out) forwards }
@keyframes bt-ring {
  0%   { r: 6.4; opacity: .7;  stroke-width: 2.6 }
  100% { r: 22;  opacity: 0;   stroke-width: .9 }
}
/* Player switch: the country holds absolutely still and only the data changes. */
.bt-dots-off, .bt-halos, .bt-dots-on { transition: opacity 280ms var(--e-std) }
.bt-map-svg.swapping .bt-halos, .bt-map-svg.swapping .bt-dots-on { opacity: 0 }

.bt-actions { flex: none; padding-top: 2px }

/* ── sheets ──────────────────────────────────────────────────────────── */
.bt-scrim {
  position: fixed; inset: 0; z-index: 55; background: rgba(46, 32, 20, .42);
  opacity: 0; transition: opacity var(--m-scrim) var(--e-std);
}
.bt-scrim.is-in { opacity: 1 }
.bt-scrim[hidden] { display: none }

.bt-sheet { position: fixed; z-index: 60; background: var(--paper) }
.bt-sheet[hidden] { display: none }

.bt-sheet-full {
  inset: 0; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--m-sheet-in) var(--e-out), transform var(--m-sheet-in) var(--e-out);
}
.bt-sheet-full.is-in { opacity: 1; transform: none }
.bt-sheet-full.is-out {
  opacity: 0; transform: translateY(16px);
  transition-duration: var(--m-sheet-out); transition-timing-function: var(--e-in);
}

.bt-sheet-bottom {
  inset-inline: 0; bottom: 0; max-height: 86svh; display: flex; flex-direction: column;
  border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(46, 32, 20, .2);
  transform: translateY(100%);
  transition: transform var(--m-sheet-in) var(--e-out);
  touch-action: none;
}
.bt-sheet-bottom.is-in { transform: none }
.bt-sheet-bottom.is-out { transform: translateY(100%); transition-duration: var(--m-sheet-out); transition-timing-function: var(--e-in) }
.bt-sheet-bottom.dragging { transition: none }

/* A real grip, not a decoration: it drags the sheet and throws it closed. */
.bt-grab {
  flex: none; padding: 10px 0 4px; display: grid; place-items: center;
  cursor: grab; touch-action: none;
}
.bt-grab::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--rule) }
.bt-grab:active { cursor: grabbing }

.bt-sheet-head {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: calc(7px + env(safe-area-inset-top)) 12px 7px;
  border-bottom: 1px solid var(--rule); background: var(--paper-hi);
}
.bt-sheet-head-b { padding-top: 0; background: transparent; border-bottom: 0 }
.bt-sheet-head-b .bt-sheet-title { flex: 1; font-family: var(--font-display); font-size: 21px }
.bt-sheet-title { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums }
/* Isolated as a bidi run and given room for three digits, so the header never
   reflows as the count crosses 9 or 99 — the number changes, nothing moves. */
.bt-num { unicode-bidi: isolate; display: inline-block; min-width: 2.4ch; text-align: center }
#mark-n { transition: transform var(--m-settle) var(--e-spring) }
#mark-n.settle { transform: scale(1.04) }
.bt-x {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 12px; cursor: pointer; color: var(--ink);
  transition: background-color var(--m-fast) var(--e-std), transform var(--m-standard) var(--e-out);
}
.bt-x:hover { background: rgba(196, 168, 118, .3) }
.bt-x:active { transform: scale(.94); transition-duration: var(--m-instant) }
.bt-x:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px }
.bt-x svg { width: 21px; height: 21px }
.bt-sheet-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 16px calc(28px + env(safe-area-inset-bottom));
}
.bt-sheet-body > * { max-width: 640px; margin-inline: auto }
.bt-sheet-full .bt-dock { position: static; background: var(--paper); border-top: 1px solid var(--rule) }
/* The completion CTA floats over the list so it is reachable at any scroll
   position, and clears Safari's bottom chrome via the safe-area inset. */
.bt-sheet-full .bt-dock-float {
  position: absolute; inset-inline: 0; bottom: 0; border-top: 0;
  background: linear-gradient(to top, var(--paper) 72%, rgba(242, 231, 206, 0));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.bt-sheet-body-dock { padding-bottom: calc(100px + env(safe-area-inset-bottom)) }

/* ── search + region chips ───────────────────────────────────────────── */
.bt-searchwrap { position: relative; flex: none; padding: 8px 16px; background: var(--paper-hi); border-bottom: 1px solid var(--rule) }
.bt-search {
  width: 100%; max-width: 640px; margin-inline: auto; display: block;
  min-height: 46px; font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--rule); border-radius: 12px;
  padding: 9px 44px 9px 40px;
  transition: border-color var(--m-fast) var(--e-std), box-shadow var(--m-fast) var(--e-std);
}
.bt-search:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 100, 104, .18) }
.bt-search::-webkit-search-cancel-button { display: none }
.bt-search-ico { position: absolute; inset-inline-start: 26px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--ink-soft); pointer-events: none }
.bt-search-x {
  position: absolute; inset-inline-end: 22px; top: 50%; width: 36px; height: 36px;
  display: grid; place-items: center; background: transparent; border: 0; cursor: pointer;
  color: var(--ink-soft); border-radius: 9px;
  transform: translateY(-50%) scale(1); opacity: 1;
  transition: opacity var(--m-fast) var(--e-std), transform var(--m-fast) var(--e-out);
}
.bt-search-x[hidden] { display: grid; opacity: 0; transform: translateY(-50%) scale(.8); pointer-events: none }
.bt-search-x svg { width: 16px; height: 16px }

.bt-chiprow {
  flex: none; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 7px 16px; background: var(--paper-hi); border-bottom: 1px solid var(--rule);
}
.bt-chiprow::-webkit-scrollbar { display: none }
.bt-rchip {
  flex: none; min-height: 38px; padding: 7px 14px; border-radius: 999px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; white-space: nowrap;
  color: var(--ink-soft); background: var(--paper); border: 1.5px solid var(--rule); cursor: pointer;
  transition: background-color var(--m-fast) var(--e-std), border-color var(--m-fast) var(--e-std),
              color var(--m-fast) var(--e-std), transform var(--m-standard) var(--e-out);
}
.bt-rchip:active { transform: scale(.96); transition-duration: var(--m-instant) }
.bt-rchip[aria-selected="true"] { background: var(--sienna); border-color: var(--sienna); color: #FDF7E8 }
.bt-rchip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px }

/* The list crossfades rather than blinking when the query changes. */
.bt-listwrap { transition: opacity 120ms var(--e-std) }
.bt-listwrap.is-swapping { opacity: 0 }
.bt-empty { text-align: center; color: var(--ink-soft); font-size: 15px; padding: 40px 10px; line-height: 1.6 }

/* ── המפות שלנו sheet ────────────────────────────────────────────────── */
.bt-solo { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 2px 2px 16px }
.bt-board { display: grid; gap: 9px }
.bt-boardrow {
  display: flex; align-items: center; gap: 13px; width: 100%;
  min-height: 68px; padding: 10px 14px; text-align: right;
  background: var(--bt-tile); border: 1.5px solid var(--rule); border-radius: 14px;
  font-family: inherit; cursor: pointer; color: var(--ink);
  transition: background-color var(--m-fast) var(--e-std), border-color var(--m-fast) var(--e-std),
              transform var(--m-standard) var(--e-out);
}
.bt-boardrow:active { transform: scale(.985); transition-duration: var(--m-instant) }
.bt-boardrow.is-me { border-color: var(--bt-on); background: var(--bt-on-soft) }
.bt-boardrow.is-lead { border-color: var(--bt-on); border-width: 2px }
.bt-boardrow.is-lead .bt-boardrow-score { font-size: 22px }
.bt-boardrow:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px }
.bt-mini { flex: none; width: 26px; height: 76px; margin: -8px 0; opacity: .78 }
.bt-mini svg { display: block; width: 100%; height: 100% }
.bt-mini .bt-land { stroke-width: 4 }
.bt-boardrow-body { flex: 1; min-width: 0 }
.bt-boardrow-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 15.5px; font-weight: 600; color: var(--ink-soft);
  overflow: hidden; white-space: nowrap;
}
.bt-boardrow-score {
  display: block; font-size: 19px; font-weight: 800; color: var(--bt-on);
  font-variant-numeric: tabular-nums; margin-top: 2px; letter-spacing: -.01em;
}
.bt-here { flex: none; width: 17px; height: 17px; border-radius: 50%; background: var(--bt-on); display: grid; place-items: center }
.bt-here svg { width: 10px; height: 10px; stroke: #FDF7E8 }
.bt-tools { margin-top: 18px; display: grid; gap: 2px; border-top: 1px solid var(--rule); padding-top: 12px }
.bt-tools-top { margin-top: 4px; border-top: 0; padding-top: 0 }
/* Switching is a plain list here, deliberately: the comparison lives on Home
   and a second scored board in this sheet would only be a thing to keep in step. */
.bt-switch-h {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--ink-soft);
  margin: 22px 2px 8px;
}
.bt-switch { display: grid; gap: 6px }
.bt-switch-row {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bt-tile); border: 1.5px solid var(--rule); border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--m-fast) var(--e-std);
}
.bt-switch-row:hover { border-color: var(--sienna) }
.bt-switch-go {
  flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; min-width: 0;
  text-align: right; min-height: 52px; padding: 10px 14px;
  background: transparent; border: 0; font-family: inherit; cursor: pointer; color: var(--ink);
  transition: background-color var(--m-fast) var(--e-std), transform var(--m-standard) var(--e-out);
}
.bt-switch-go:active { transform: scale(.985); transition-duration: var(--m-instant) }
.bt-switch-go:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px }
.bt-switch-del {
  flex: none; width: 46px; display: grid; place-items: center;
  background: transparent; border: 0; border-inline-start: 1px solid var(--rule);
  cursor: pointer; color: var(--ink-soft);
  transition: background-color var(--m-fast) var(--e-std), color var(--m-fast) var(--e-std);
}
.bt-switch-del:hover { background: rgba(164, 39, 26, .1); color: #A4271A }
.bt-switch-del:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px }
.bt-switch-del svg { width: 17px; height: 17px }
.bt-switch-name { flex: 0 1 auto; min-width: 0; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bt-switch-score { flex: 1 1 auto; font-size: 13.5px; font-weight: 700; color: var(--bt-on); font-variant-numeric: tabular-nums; white-space: nowrap }
.bt-linkbtn {
  background: transparent; border: 0; color: var(--ink-soft); font-family: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer; padding: 12px 4px; text-align: right;
  min-height: 48px; border-radius: 9px;
  transition: color var(--m-fast) var(--e-std);
}
.bt-linkbtn:hover { color: var(--sienna) }
.bt-linkbtn.is-danger:hover { color: #A4271A }
.bt-linkbtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px }
.bt-linkbtn.is-add { color: var(--sienna); font-weight: 700 }

/* ── הנתונים שלי ─────────────────────────────────────────────────────
   Headline → breadth → list, and nothing else. The earlier version gave the
   summary its own tinted card, the breadth its own tinted card and the list its
   own heading, so three blocks competed at the same volume and the whole thing
   read as a dashboard. Now there are no containers at all: whitespace does the
   separating and the bars carry the comparison. */
.bt-stat-head { margin: 2px 2px 16px }
.bt-stat-k {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; color: var(--ink-soft);
  margin-bottom: 4px;
}
.bt-stat-lead {
  font-family: var(--font-display); font-size: 20px; line-height: 1.25;
  color: var(--ink); text-wrap: balance;
}
.bt-stat-lead.is-empty { font-size: 17px; color: var(--ink-soft) }
.bt-stat-breadth { font-size: 13px; color: var(--ink-soft); margin-top: 6px }

.bt-stat-list { display: grid; gap: 12px }
.bt-stat-row { display: block }
/* The name leads, the percentage is the secondary emphasis, and "20 מתוך 29" is
   quiet metadata. Making the numbers and the bar both loud was the other half
   of the density problem. */
.bt-stat-name { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink); text-wrap: balance }
.bt-stat-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 2px 0 4px; line-height: 1.15;
}
.bt-stat-of { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums }
.bt-stat-pct { font-size: 13.5px; font-weight: 800; color: var(--bt-on); font-variant-numeric: tabular-nums }
.bt-stat-bar { height: 4px; border-radius: 2px; background: rgba(196, 168, 118, .42); overflow: hidden }
.bt-stat-bar span {
  display: block; height: 100%; width: 0; border-radius: 2px; background: var(--bt-on);
  transition: width var(--m-sheet-in) var(--e-out);
}
/* A region at zero recedes rather than shouting a zero in the accent colour. */
.bt-stat-row.is-zero .bt-stat-name { color: var(--ink-soft) }
.bt-stat-row.is-zero .bt-stat-pct { color: var(--ink-soft); font-weight: 600 }
.bt-stat-row.is-zero .bt-stat-bar { background: rgba(196, 168, 118, .3) }

/* ── שאלה מ… ─────────────────────────────────────────────────────────
   A question, not a duel. Plain lines of type, the verdict carried by the words
   themselves rather than by a colour, and the two ways forward at the bottom. */
/* Two scores, read as a pair. The number is the thing being compared, so it
   sits at the end of the line where the eye can run straight down it. */
.bt-ch-scores { display: flex; flex-direction: column; gap: 6px }
.bt-ch-score {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 17px; line-height: 1.3;
}
.bt-ch-who { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bt-ch-n {
  flex: 0 0 auto; font-family: var(--font-display); font-size: 22px;
  color: var(--bt-on); font-variant-numeric: tabular-nums; unicode-bidi: isolate;
}
.bt-ch-verdict {
  font-size: 15.5px; line-height: 1.5; color: var(--ink-soft);
  margin-top: 12px; text-wrap: balance; font-variant-numeric: tabular-nums;
}
.bt-ch-actions { margin-top: 22px }

/* „מי רוצה להשוות?” — an identity question, not a table. No percentage, no
   map, no management: one tap answers it and the sheet is gone. */
.bt-who-score {
  font-family: var(--font-display); font-size: 26px; line-height: 1.2;
  color: var(--bt-on); font-variant-numeric: tabular-nums;
}
.bt-who-q { font-size: 15.5px; color: var(--ink-soft); margin-top: 14px }
.bt-who-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px }
.bt-who-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 0 16px; border-radius: 14px;
  border: 1.5px solid var(--line); background: transparent; color: inherit;
  font: inherit; text-align: start; cursor: pointer;
  transition: background var(--m-fast) var(--e-out), border-color var(--m-fast) var(--e-out),
              transform var(--m-fast) var(--e-press);
}
.bt-who-row:hover { border-color: var(--sienna) }
.bt-who-row:active { transform: scale(.985); transition-duration: var(--m-instant) }
.bt-who-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px }
.bt-who-name { flex: 1 1 auto; min-width: 0; font-size: 16.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bt-who-n { flex: 0 0 auto; font-size: 16px; font-weight: 700; color: var(--bt-on);
  font-variant-numeric: tabular-nums; unicode-bidi: isolate }

/* ── modals ──────────────────────────────────────────────────────────── */
.bt-sheet-modal {
  inset: 0; display: grid; place-items: center; padding: 22px; z-index: 70;
  background: rgba(46, 32, 20, .42);
  opacity: 0; transition: opacity var(--m-modal-in) var(--e-std);
}
.bt-sheet-modal.is-in { opacity: 1 }
.bt-sheet-modal.is-out { opacity: 0; transition-duration: var(--m-modal-out) }
.bt-modal {
  width: 100%; max-width: 400px; background: var(--paper);
  border-radius: 18px; padding: 22px 20px 18px; box-shadow: 0 12px 40px rgba(46, 32, 20, .3);
  transform: scale(.96);
  transition: transform var(--m-modal-in) var(--e-out);
}
.bt-sheet-modal.is-in .bt-modal { transform: none }
.bt-sheet-modal.is-out .bt-modal { transform: scale(.98); transition-duration: var(--m-modal-out); transition-timing-function: var(--e-in) }
.bt-modal-title { font-family: var(--font-display); font-size: 22px; line-height: 1.25; color: var(--ink); margin-bottom: 8px; text-wrap: balance }
.bt-modal-note { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 16px }
.bt-modal-btns { margin-top: 4px }

/* ── share fallback surface (desktop / no Web Share) ─────────────────── */
.bt-sharebody { display: grid; place-items: center; padding-top: 16px }
.bt-poster {
  width: 100%; max-width: 400px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper-hi);
  min-height: 260px; display: grid; place-items: center;
}
.bt-poster img { display: block; width: 100%; height: auto }
.bt-loading { font-size: 14.5px; color: var(--ink-soft); padding: 60px 10px }

/* ── toast ───────────────────────────────────────────────────────────── */
.bt-toast {
  position: fixed; inset-inline: 16px; bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 90; margin-inline: auto; max-width: 380px;
  background: var(--ink); color: #FDF7E8; border-radius: 12px;
  padding: 13px 16px; font-size: 14.5px; font-weight: 600; text-align: center;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--m-standard) var(--e-out), transform var(--m-standard) var(--e-out);
}
.bt-toast.is-on { opacity: 1; transform: none }

@media (min-width: 760px) {
  .bt-map-home { height: min(62svh, 560px) }
  .bt-score-n { font-size: 72px }
}

/* ── reduced motion ──────────────────────────────────────────────────
   Not "kill everything": meaning has to survive. Transforms go, tonal state
   feedback stays, and nothing takes longer than 150ms. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-instant: 0ms; --m-fast: 120ms; --m-standard: 140ms;
    --m-sheet-in: 140ms; --m-sheet-out: 120ms;
    --m-modal-in: 140ms; --m-modal-out: 120ms; --m-scrim: 140ms;
    --m-dot-in: 150ms; --m-dot-out: 150ms; --m-score: 0ms; --m-settle: 0ms;
  }
  .bt-btn:active, .bt-row:active, .bt-rchip:active, .bt-chip:active,
  .bt-crew-row:active, .bt-boardrow:active, .bt-x:active { transform: none }
  /* The marker still grows and still gains its halo — it just does not spring. */
  .bt-row[aria-pressed="true"] .bt-mark { animation: none }
  .bt-mark { transition-duration: 140ms; transition-timing-function: linear }
  /* The afterglow survives as colour only — the meaning has to stay visible. */
  #mark-n, #mark-n.settle { transform: none; transition: none }
  .bt-sheet-full { transform: none }
  .bt-sheet-full.is-in, .bt-sheet-full.is-out { transform: none }
  .bt-stat-bar span { transition: none }
  .bt-sheet-bottom { transform: none; opacity: 0 }
  .bt-sheet-bottom.is-in { opacity: 1 }
  .bt-sheet-bottom.is-out { opacity: 0; transform: none }
  .bt-modal, .bt-sheet-modal.is-in .bt-modal, .bt-sheet-modal.is-out .bt-modal { transform: none }
  .bt-score-n.settle, .bt-tick-n.settle { transform: none }
  .bt-pulse { display: none }
  /* Points fade rather than scale, and a newly added one keeps a ring of its
     own for a moment so it can still be identified without movement. */
  .bt-dot.rise, .bt-halo.rise { animation: bt-fade-in 150ms linear both }
  .bt-dot.fell { animation: bt-fade-off 150ms linear both }
  .bt-halo.falling { animation: bt-halo-out 150ms linear both }
  @keyframes bt-fade-in { from { opacity: 0 } to { opacity: 1 } }
  @keyframes bt-fade-off { from { fill: var(--bt-on); fill-opacity: 1 } to { fill: var(--bt-off); fill-opacity: var(--bt-off-o) } }
  .bt-dot.rm-flag { stroke: var(--bt-on); stroke-width: 2.4; paint-order: stroke }
}