/* Baltz Street: The street map: lots, houses, roads, doors, cars, badges. */

.map-wrap {
  position: fixed;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-top: calc(env(safe-area-inset-top, 0px) + 76px + var(--urg, 0px));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow-x: hidden;
  scrollbar-width: none;
}

.map-wrap::-webkit-scrollbar {
  display: none;
}

.cell {
  grid-row: var(--a) / var(--ae);
  grid-column: var(--l) / var(--le);
  min-width: 0;
  position: relative;
}

.xstreet {
  background: var(--asphalt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.xstreet span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f4f6f8;
  opacity: 0.9;
  position: relative;
  top: var(--nudge);
}

.road {
  background: var(--asphalt);
  /* dashes at the strength they had showing through the label (15%) */
  --dash: color-mix(in srgb, var(--lane) 15%, var(--asphalt));
  background-image: linear-gradient(var(--dash) 50%, transparent 0);
  background-size: 2px 24px;
  background-repeat: repeat-y;
  background-position: center top;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.road-name {
  display: none;
  writing-mode: vertical-rl;
  background: var(--asphalt);
  padding: 12px 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 246, 248, 0.85);
}

/* no separate parking strip: cars park on the road, which runs right up to the old curb line */
.park {
  background: var(--asphalt);
}

.cars {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 1;
}

.car {
  width: 16px;
  height: 36px;
  border-radius: 6px;
  background: var(--car);
  position: relative;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s;
}

.car::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 7px;
  height: 8px;
  border-radius: 3px 3px 1px 1px;
  background: var(--win, rgba(20, 30, 40, 0.55));
}

.car::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 6px;
  height: 5px;
  border-radius: 1px 1px 3px 3px;
  background: var(--win2, rgba(20, 30, 40, 0.45));
}

.car:hover {
  transform: scale(1.12);
}

.car.hit {
  box-shadow:
    0 0 0 2px var(--mark),
    0 0 0 4px var(--mark-ink);
}

/* lots: outlines are drawn inside the box so they never shift layout */
.house {
  margin: 8px 0 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  background: var(--lot);
  outline: 1.5px solid var(--lot-edge);
  outline-offset: -1.5px;
  border-radius: 4px;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s,
    box-shadow 0.2s;
}

.house.away {
  position: relative;
}

.awayclip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--ground) 55%, transparent);
  z-index: 1;
}

.awaybar {
  position: absolute;
  left: -25%;
  right: -25%;
  top: 50%;
  height: 22px;
  margin-top: -11px;
  transform: rotate(-32deg);
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding-top: var(--nudge);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.house.away .mine-dot,
.house.away .bday {
  z-index: 2;
}

.awaybanner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 4px 0 8px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--awaybg);
  color: var(--paper);
  flex-wrap: wrap;
}

.aw-ic {
  font-size: 20px;
  line-height: 24px;
}

.aw-main {
  flex: 1;
  min-width: 0;
}

.aw-main b {
  display: block;
  font-weight: 800;
  font-size: 16px;
  line-height: 24px;
  padding-top: var(--nudge);
}

.aw-main p {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.aw-main small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  opacity: 0.7;
}

.aw-acts {
  flex-basis: 100%;
  display: flex;
  gap: 8px;
  padding-left: 32px;
}

.aw-acts .pill {
  background: color-mix(in srgb, var(--paper) 16%, transparent);
  color: var(--paper);
}

.aw-acts .pill.acc {
  background: var(--paper);
  color: var(--ink);
}

.house.odd {
  margin-right: 8px;
}

.house.even {
  margin-left: 8px;
  flex-direction: row-reverse;
}

.house.unk {
  background: var(--lot-empty);
  outline: 1.5px dashed var(--lot-empty-edge);
}

.house:hover {
  transform: translateY(-2px);
}

.house:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.house.sel,
.house.unk.sel {
  background: var(--mark);
  outline: 1.5px solid var(--mark-ink);
  box-shadow: var(--shadow);
  transform: scale(1.04);
  z-index: 2;
}

.house.sel .face {
  box-shadow: 0 0 0 2px var(--mark);
}

.house.dim {
  opacity: 0.28;
}

/* a residence that spans more than one lot: the door sits over the lot named by doorAlong (--dp = its position, 0..1 along the street) */
.house.wide .door {
  position: absolute;
  right: 12px;
  top: calc(var(--dp) * (100% + 8px) - 16px);
}

.house.wide.even .door {
  right: auto;
  left: 12px;
}

/* one avatar per house on phones; "+N" is a small circle on its upper right. Every avatar keeps 8px beside it for the circle, so they all line up */
.fstack {
  position: relative;
  display: inline-flex;
  flex: none;
  margin-right: 8px;
}

.house.even .fstack {
  margin-right: 8px;
}

.face.extra {
  display: none;
}

.more {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: calc(var(--nudge) * 2) 2px 0;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  line-height: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--lot);
}

.house.sel .more {
  box-shadow: 0 0 0 2px var(--mark);
}

/* empty parcels: plain gray, 8px clear of everything around them */
/* empty parcels line up with the house edges in their row */
.parcel {
  background: var(--line);
  border-radius: 4px;
  pointer-events: none;
}

.parcel.p-ne {
  margin: 8px 8px 0 0;
}

.parcel.p-sw {
  margin: 8px 0 8px 8px;
}

.parcel.p-1230 {
  justify-self: end;
  width: calc(50% - 8px);
  height: var(--depth);
  margin: 8px 0 0;
  align-self: start;
}

/* phone: a double house's number and faces sit in its address lot (the first 60px), level with the neighbours */
.house.wide {
  align-items: flex-start;
}

.house.wide > .plaque {
  margin-top: 20px;
}

.house.wide > .faces {
  height: 60px;
  margin-right: 16px;
}

.house.wide.even > .faces {
  margin-right: 0;
  margin-left: 16px;
}

/* corner lots front the cross streets, so they run lengthwise along them. Door faces that street. */

/* narrow corner lots: faces side by side, centred in the space the door doesn't need */
.house.corner .faces {
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.house.corner .face + .face {
  margin: 0 0 0 -4px;
}

.house.corner.x31 .faces {
  margin-bottom: 28px;
}

.house.corner.x30 .faces {
  margin-top: 28px;
}

/* the two 31st St lots share the column: each takes half, together matching the lots above */
/* house depth on a phone = (street width - 120px street band)/2 - 4px gap */
.street {
  display: grid;
  margin: 0 auto;
  max-width: 520px;
  --band: 66px;
  grid-template-columns: minmax(0, 1fr) 32px 2px 32px minmax(0, 1fr);
  grid-template-rows: 56px auto repeat(20, 68px) auto auto 56px;
  gap: 0;
  container-type: inline-size;
  --depth: calc((100cqw - var(--band)) / 2 - 8px);
}

.house.corner {
  padding: 12px 4px;
  gap: 4px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0 0;
  height: var(--depth);
}

.house.corner.x31 {
  width: calc(50% - 8px);
  margin-right: 0;
  margin-bottom: 8px;
}

.house.corner.x31.slot0 {
  justify-self: end;
  margin-right: 8px;
}

.house.corner.x31.slot1 {
  justify-self: start;
}

.house.corner.x30 {
  width: calc(50% - 8px);
  justify-self: start;
  margin-left: 8px;
  flex-direction: column-reverse;
}

/* 1232 and 1235 are addressed on the cross streets but their doors open onto Baltz */

/* phone: Baltz-facing corner doors sit at the same 12px inset as every other door on their side */
.house.corner.x31.slot0 .door {
  align-self: flex-end;
  position: absolute;
  right: 12px;
  bottom: 12px;
}

.house.corner.x30 .door {
  align-self: flex-start;
  position: absolute;
  left: 12px;
  top: 12px;
}

.house.corner.x31.slot1 .door {
  position: absolute;
  bottom: 12px;
  left: calc(50% - 6px);
}

.plaque {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 12px;
  line-height: 16px;
  background: var(--plaque);
  color: var(--plaque-ink);
  padding: calc(2px + var(--nudge)) 4px calc(2px - var(--nudge));
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--lot-edge);
  flex: none;
  font-variant-numeric: tabular-nums;
}

.faces {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.house.even .faces {
  justify-content: flex-end;
}

.face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-top: calc(var(--nudge) * 2);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--face);
  color: var(--face-ink);
  box-shadow: 0 0 0 2px var(--lot);
  flex: none;
}

.face.photo {
  background-size: cover;
  background-position: center;
  background-color: var(--paper-2);
}

.face + .face {
  margin-top: -4px;
}

.face.pend {
  background: var(--paper);
  color: var(--muted);
  border: 1.5px dashed var(--muted);
}

.house.unk .face.pend {
  background: var(--lot-empty);
  box-shadow: 0 0 0 2px var(--lot-empty);
}

.door {
  width: 12px;
  height: 24px;
  border-radius: 6px 6px 2px 2px;
  background: var(--door, var(--door-default));
  flex: none;
  position: relative;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.25);
}

.door::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--knob);
  right: 2px;
  top: 12px;
}

.house.unk .door {
  opacity: 0.55;
}

.bday {
  position: absolute;
  top: -12px;
  right: -8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow:
    var(--shadow-sm),
    inset 0 0 0 1px var(--line);
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.mine-dot {
  position: absolute;
  top: -8px;
  left: -4px;
  background: var(--mark);
  color: var(--mark-ink);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  padding: calc(2px + var(--nudge)) 8px calc(2px - var(--nudge));
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--mark-ink);
}