/* ═══════════════════════════════════════════════════════════════════════════
   Results (§13). Three panels in the brief's order: what just happened, what
   it means against your own history, and where it all lives.
   ═════════════════════════════════════════════════════════════════════════ */

/*
  How much of the screen the stats sheet occupies. Declared on the screen, not
  on the sheet, because the scene is the sheet's *sibling* — a custom property
  set on the sheet inherits downwards and would never reach it.
*/
#screen-results { --sheet-height: 64%; }

/* ── The scene ──────────────────────────────────────────────────────────── */
/*
  The neighborhood, full bleed, sitting on the ground. It is the backdrop the
  stats sheet rises over, and the thing the finished tower flies into.
*/
.result-scene {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* Ends exactly where the sheet begins. Running the scene to the bottom of
     the screen put the whole neighborhood behind the sheet — the tower landed
     somewhere the player could not see, which is the opposite of the point. */
  bottom: var(--sheet-height);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;      /* the sheet gets the gestures */
  transition: bottom 0.52s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.result-scene .neighborhood-street { pointer-events: auto; }

.result-street {
  position: relative;
  flex: 0 0 46px;
  height: 46px;
  overflow: hidden;
  pointer-events: none;
}
.result-street .street-ground { height: 40px; }

/* ── The sheet ──────────────────────────────────────────────────────────── */
.result-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  height: var(--sheet-height);
  display: flex;
  flex-direction: column;
  background: rgba(251, 245, 235, 0.95);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 34px rgba(74, 56, 38, 0.22);
  backdrop-filter: blur(10px);
  /* Starts below the fold; raiseSheet() brings it up once the tower lands. */
  transform: translateY(102%);
  transition: transform 0.52s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.result-sheet.is-up { transform: none; }

/*
  Pushed down to a peek, so the player can look at the street they just added
  to. The grip toggles it; the headline stays visible as the way back.
*/
.result-sheet.is-peeked { transform: translateY(calc(100% - 92px)); }
.result-sheet.is-peeked .sheet-scroll { overflow: hidden; }

.is-night .result-sheet {
  background: rgba(38, 32, 44, 0.94);
  box-shadow: 0 -8px 34px rgba(0, 0, 0, 0.45);
}

/* A real button: this is how the sheet gets out of the way. */
.sheet-grip {
  flex: 0 0 auto;
  width: 100%;
  padding: 10px 0 6px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
}
.sheet-grip::before {
  content: '';
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: var(--ink-faint);
  opacity: 0.45;
  transition: opacity 0.2s ease, width 0.2s ease;
}
.sheet-grip:hover::before { opacity: 0.7; width: 52px; }
.is-night .sheet-grip::before { background: var(--on-sky-soft); }

.sheet-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* Top padding clears the settings gear, which sits in the grip row. */
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Each panel rises as the sheet arrives, staggered by --rise-delay. */
.result-sheet.is-up .result-head,
.result-sheet.is-up .panel,
.result-sheet.is-up .btn-secondary {
  animation: panel-rise 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  animation-delay: var(--rise-delay, 0ms);
}
@keyframes panel-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}


/* Inline padding keeps the two-line headline out from under the gear. */
.result-head { text-align: center; max-width: 420px; padding: 0 12px; }
.result-head h2 {
  font-size: clamp(18px, 5vw, 23px);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.25;
  /* On the sheet now, not on the sky — so it follows the sheet's surface. */
  color: var(--ink);
}
.result-head p { margin-top: 4px; font-size: 13.5px; color: var(--ink-soft); }
.is-night .result-head h2 { color: var(--on-sky); }
.is-night .result-head p  { color: var(--on-sky-soft); }
.is-night .panel {
  background: rgba(253, 248, 240, 0.06);
  border-color: rgba(214, 196, 168, 0.2);
}
.is-night .panel-title,
.is-night .record dt,
.is-night .today-facts span,
.is-night .percentile-note,
.is-night .nstat { color: var(--on-sky-soft); }
.is-night .today-hero b,
.is-night .today-hero span,
.is-night .record dd,
.is-night .record-len .val,
.is-night .panel-neighborhood .panel-title { color: var(--on-sky); }
.is-night .today-facts span,
.is-night .record-len { background: rgba(253, 248, 240, 0.075); }
.is-night .btn-secondary { color: var(--on-sky); background: transparent; border-color: var(--on-sky); }

.panel {
  width: 100%;
  max-width: 420px;
  padding: 15px 17px 16px;
  background: rgba(253, 248, 240, 0.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
}
.panel-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

/* ── TODAY ──────────────────────────────────────────────────────────────── */
/* Height is the result, so it is the only big number on the screen (§15). */
.today-hero {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.today-hero b {
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2.5px;
  font-variant-numeric: tabular-nums;
}
.today-hero span { font-size: 17px; font-weight: 650; color: var(--ink-soft); }

.today-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 9px;
}
.today-facts span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 3px 10px;
  background: #f4ece0;
  border-radius: 999px;
}
.percentile-note {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ── YOUR RECORDS ───────────────────────────────────────────────────────── */
.record-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.record {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--line);
}
.record dt { font-size: 13.5px; color: var(--ink-soft); }
.record dd {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.record-legend {
  margin-top: 11px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.record-by-length { display: flex; gap: 7px; margin-top: 6px; }
.record-len {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  background: #f4ece0;
  border-radius: 9px;
}
.record-len .len {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.record-len .val {
  display: block;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.record-len.is-empty .val { color: var(--ink-faint); font-weight: 600; }

/* ── YOUR [CITY] NEIGHBORHOOD ───────────────────────────────────────────── */
.panel-neighborhood .panel-title {
  font-size: 12.5px;
  color: var(--ink);
  letter-spacing: 0.08em;
}
.neighborhood-subtitle {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 1px;
}
.neighborhood-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 9px;
}
.nstat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-soft);
}
.nstat i { font-style: normal; font-size: 14px; }

/* The street itself, scrolling horizontally once the neighborhood outgrows
   the screen — which for a returning player is quickly. */
.neighborhood-street {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  display: flex;
  align-items: flex-end;
  /* Centred while the neighborhood is small, scrolling once it outgrows the
     screen. `safe` is what stops the centred case clipping its own start edge
     when it does overflow. */
  justify-content: safe center;
}
.neighborhood-street::-webkit-scrollbar { display: none; }

.neighborhood-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  min-height: 100%;
  /* Headroom for the "today" flag, which sits above the roofline and used to
     be clipped by the container. */
  padding: 22px 0 0;
  width: max-content;
}
.neighborhood-street::after {
  /* Pavement the row stands on. */
  content: '';
  position: sticky;
  left: 0;
  bottom: 0;
  display: block;
  height: 0;
}
.building-wrap {
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
}
.building-wrap svg { display: block; }
.building-wrap.is-today .building-flag {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-warm);
  white-space: nowrap;
}
.building-wrap.is-today { filter: drop-shadow(0 0 10px rgba(221, 162, 63, 0.55)); }

/* While the tower is in flight the slot is an empty plot, so the clone is the
   only building visible; it fills in the moment the flight ends. */
.building-wrap.is-landing { opacity: 0; }
.building-wrap.is-landing .building-flag { opacity: 0; }
.building-wrap.has-landed { animation: building-land 0.42s cubic-bezier(0.25, 1.3, 0.45, 1); }
@keyframes building-land {
  0%   { transform: scaleY(1.06) translateY(-3px); }
  55%  { transform: scaleY(0.97) translateY(0); }
  100% { transform: none; }
}

.feature-wrap { flex: 0 0 auto; line-height: 0; align-self: flex-end; }
/* The expansion is scenery, so it sits back from the buildings a little. */
.feature-expansion { opacity: 0.9; margin-left: 4px; }

.neighborhood-empty {
  align-self: center;
  margin: auto;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.neighborhood-next {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 650;
}
.days-played { margin-top: 4px; font-size: 12px; color: var(--ink-faint); }

.result-sheet .btn-secondary { margin-top: 2px; }