:root {
  --bg: #f5f7fb;
  --paper: #ffffff;
  --paper-soft: #f9fbfe;
  --ink: #101828;
  --muted: #667085;
  --quiet: #98a2b3;
  --line: #d9e4f2;
  --line-soft: #edf2f7;
  --blue: #2563eb;
  --green: #0f9f6e;
  --red: #e5484d;
  --yellow: #f59e0b;
  --teal: #14b8a6;
  --violet: #8b5cf6;
  --shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
  --soft-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  --radius: 8px;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: linear-gradient(180deg, #fbfcff 0%, var(--bg) 34rem);
  color: var(--ink);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  width: min(1340px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 22px 28px;
}

.topbar {
  display: grid;
  grid-template-columns: 240px minmax(280px, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 7px;
  border-radius: var(--radius);
  background: #101828;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.18);
  flex: 0 0 auto;
}

.brand-mark span {
  border-radius: 4px;
}

.brand-mark span:nth-child(1) { background: #2563eb; }
.brand-mark span:nth-child(2) { background: #ef4444; }
.brand-mark span:nth-child(3) { background: #10b981; }
.brand-mark span:nth-child(4) { background: #f59e0b; }

.brand-name {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 23px;
  font-weight: 850;
  line-height: 1;
}

.brand-sub {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 6px 7px 6px 16px;
  border: 1px solid #cbd7ea;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.10);
}

.search-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  background: #edf4ff;
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
  flex: 0 0 auto;
}

.search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 680;
}

.search input::placeholder {
  color: #697586;
  opacity: 1;
}

.key-hint {
  position: absolute;
  top: 50%;
  right: 92px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--soft-shadow);
  color: var(--quiet);
  font-size: 11px;
  font-weight: 720;
  line-height: 1;
  pointer-events: none;
}

.search:focus-within .key-hint {
  display: none;
}

.go,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 820;
  white-space: nowrap;
}

.go {
  min-width: 72px;
  border: 0;
  background: #101828;
  color: #ffffff;
}

.button {
  min-width: 78px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  color: #243044;
}

.button,
.go {
  transition: transform 120ms ease;
}

.button:hover,
.go:hover {
  transform: translateY(-1px);
}

/* keyboard travelers get the same clear landmark everywhere */
.button:focus-visible,
.go:focus-visible,
.tone-dot:focus-visible,
.avatar-swatch:focus-visible,
.home-floor-tab:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.button.primary,
.button.dark {
  border-color: #101828;
  background: #101828;
  color: #ffffff;
}

.button.compact {
  min-width: 0;
  min-height: 34px;
  padding: 0 11px;
  font-size: 12px;
}

.top-actions {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
}

.suggest {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 30;
  display: none;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.suggest.open {
  display: grid;
  gap: 2px;
  max-height: min(68vh, 560px);
  overflow-y: auto;
}

.suggest-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
}

.magic-result-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #344054;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.magic-result-icon.is-world { background: #0f766e; }
.magic-result-icon.is-resident { background: #b45309; }
.magic-result-icon.is-activity { background: #6d28d9; }
.magic-result-icon.is-project { background: #1d4ed8; }
.magic-result-icon.is-route { background: #be123c; }
.magic-result-copy { display: grid; min-width: 0; gap: 2px; }
.magic-result-detail { overflow: hidden; color: #667085; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.magic-result-action { max-width: 82px; overflow: hidden; padding: 4px 6px; border-radius: 5px; background: #edf1f5; color: #344054; font-size: 9px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }

.suggest-item.selected,
.suggest-item:hover {
  background: #edf4ff;
}

.suggest-domain {
  overflow: hidden;
  max-width: 180px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
}

.town-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 16px;
  align-items: start;
  margin-top: 18px;
}

.game-stage,
.district-panel,
.dock {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.game-stage {
  padding: 14px;
}

.stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.stage-actions {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
}

.errand-pill {
  border-color: #cddcf5;
  background: #edf4ff;
  color: #1d4ed8;
}

.errand-pill.all-done {
  border-color: #bbe7c8;
  background: #ecfdf1;
  color: #087443;
}

.coin-pill {
  border-color: #f2d28a;
  background: #fff8e1;
  color: #8a5a00;
}

.coin-pill.earned {
  animation: coin-pop 520ms ease;
}

@keyframes coin-pop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-2px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

.errand-drop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: none;
  width: min(300px, 84vw);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.errand-drop.open {
  display: grid;
  gap: 4px;
}

.errand-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #f9fbfe;
  color: #243044;
  text-align: left;
  font-size: 13px;
  font-weight: 760;
}

.errand-row:hover {
  border-color: #bdcbe0;
}

.errand-row.done {
  opacity: 0.62;
  text-decoration: line-through;
}

.errand-check {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1.5px solid #98a2b3;
  border-radius: 6px;
  background: #ffffff;
  color: #087443;
  font-size: 12px;
  font-weight: 900;
}

.errand-row.done .errand-check {
  border-color: #12b76a;
  background: #ecfdf1;
}

.errand-note {
  margin: 4px 2px 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

.kicker {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 840;
}

h1,
h2,
p {
  margin-top: 0;
}

.stage-head h1,
.panel-head h2 {
  margin: 0;
  color: var(--ink);
  line-height: 1.05;
}

.stage-head h1 {
  font-size: clamp(22px, 2.2vw, 31px);
}

.town-map {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(420px, 56vh, 560px);
  border: 1px solid #c7d6e7;
  border-radius: var(--radius);
  outline: 0;
  background: #f5f7fa;
  touch-action: none;
}

.game-loader {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: #f8fafc;
  color: #1d2939;
  opacity: 1;
  transition: opacity 160ms ease;
}
.game-loader.ready { opacity: 0; pointer-events: none; }
.game-loader[hidden] { display: none; }
.game-loader-avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 96px;
  background-image: url("assets/characters/gen/postboy_s0_h1.png");
  background-position: -48px 0;
  background-repeat: no-repeat;
  background-size: 144px 384px;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 3px rgba(15, 23, 42, 0.24));
  animation: loader-avatar-step 760ms steps(1) infinite;
}
.game-loader-copy { display: grid; width: min(230px, 58vw); gap: 4px; }
.game-loader-copy strong { font-size: 16px; }
.game-loader-copy > span:not(.game-loader-track) { color: #667085; font-size: 11px; font-weight: 700; }
.game-loader-track { height: 5px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: #e1e7ef; }
.game-loader-track span { display: block; width: var(--load-progress, 8%); height: 100%; border-radius: inherit; background: #16866f; transition: width 120ms linear; }
.game-loader-recovery {
  display: grid;
  justify-items: start;
  gap: 7px;
  margin-top: 7px;
}
.game-loader-recovery[hidden] { display: none; }
.game-loader-recovery span {
  max-width: 230px;
  color: #475467;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}
.game-loader-recovery .button { min-height: 38px; }
.game-loader-spinner {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 3px solid #d9e2ec;
  border-top-color: #23395d;
  border-radius: 50%;
  animation: loader-spin 700ms linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-avatar-step {
  0%, 100% { background-position: 0 0; }
  34% { background-position: -48px 0; }
  67% { background-position: -96px 0; }
}

/* an open room needs more vertical space than the stroll view, so every
   site card and the EXIT stay on screen (narrow-width rules further down
   override this with their own :has values). Arcade booths get the same
   treatment — without it the game iframe was only ~424px tall and 2048 /
   Falling Sand were mostly below the fold (July 11 arcade QA). */
.town-map:has(.interior.open),
.town-map:has(.arcade.open) {
  height: clamp(520px, 82vh, 760px);
}

.interaction-prompt {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  min-height: 38px;
  padding: 6px 12px 6px 7px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 7px;
  background: rgba(16, 24, 40, 0.94);
  color: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.28);
  font: 800 13px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  animation: interaction-in 140ms ease-out;
}

.interaction-prompt[hidden] { display: none; }

.interaction-prompt__key {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-bottom-width: 3px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 10px;
  text-transform: uppercase;
}

.interaction-prompt__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interaction-prompt.is-urgent { background: rgba(15, 118, 110, 0.96); }

.mobile-controls,
.mobile-directory-toggle,
.mobile-sheet-close { display: none; }

@keyframes interaction-in {
  from { opacity: 0; transform: translate(-50%, 5px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 900px), (pointer: coarse) {
  body { overscroll-behavior: none; }

  .mobile-directory-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 36;
    display: block;
    min-width: 54px;
    min-height: 36px;
    padding: 7px 10px;
    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 7px;
    background: rgba(16, 24, 40, 0.9);
    color: #fff;
    font: 850 12px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0;
  }

  .mobile-controls {
    position: absolute;
    inset: auto 12px 12px;
    z-index: 35;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    pointer-events: none;
  }

  .mobile-controls button { pointer-events: auto; touch-action: none; user-select: none; }
  .mobile-dpad {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(2, 52px);
    gap: 3px;
  }
  .mobile-dpad button {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(16, 24, 40, 0.72);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.22);
  }
  .mobile-dpad button.active { background: rgba(15, 118, 110, 0.94); transform: scale(0.94); }
  .mobile-dpad [data-mobile-move="w"] { grid-column: 2; grid-row: 1; }
  .mobile-dpad [data-mobile-move="a"] { grid-column: 1; grid-row: 2; }
  .mobile-dpad [data-mobile-move="s"] { grid-column: 2; grid-row: 2; }
  .mobile-dpad [data-mobile-move="d"] { grid-column: 3; grid-row: 2; }
  .mobile-action {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 6px 5px 0;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #e34856;
    color: #fff;
    font: 900 23px/1 Inter, system-ui, sans-serif;
    box-shadow: 0 5px 16px rgba(95, 26, 35, 0.28);
  }
  .interaction-prompt { bottom: 126px; }
  .town-map:has(.interior.open) .mobile-controls,
  .town-map:has(.interior.open) .mobile-directory-toggle { display: none; }
}

@media (max-width: 520px) {
  .interaction-prompt {
    bottom: 10px;
    min-height: 42px;
    font-size: 12px;
  }
  .interaction-prompt__key { font-size: 0; }
  .interaction-prompt__key::after { content: "Tap"; font-size: 10px; }
}

.town-map canvas {
  display: block;
  border-radius: calc(var(--radius) - 1px);
}

.vr-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(8, 10, 22, 0.22) 100%);
}

body.immersed .game-stage {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px;
  border-radius: 0;
}

body.immersed .town-map {
  flex: 1;
  height: auto;
}

body.immersed .vr-vignette {
  background: radial-gradient(ellipse at center, transparent 52%, rgba(8, 10, 22, 0.4) 100%);
}

body.immersed .control-strip {
  margin-top: 8px;
}

.town-map .night-tint {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  transition: background 1200ms ease;
}

.map-hud {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 8;
  width: 154px;
  padding: 7px;
  border: 1px solid rgba(16, 24, 40, 0.38);
  border-radius: 8px;
  background: rgba(250, 252, 255, 0.82);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.16);
  backdrop-filter: blur(8px);
  color: #101828;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.96);
  transform-origin: left bottom;
  transition: opacity 160ms ease, transform 160ms ease;
}

.map-hud.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.map-hud__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.map-hud__status {
  max-width: 72px;
  overflow: hidden;
  color: #536277;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-hud__field {
  position: relative;
  height: 74px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, 0.28);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 9%, rgba(34, 197, 94, 0.2), transparent 16%),
    radial-gradient(circle at 92% 50%, rgba(14, 165, 233, 0.18), transparent 14%),
    radial-gradient(circle at 8% 50%, rgba(245, 158, 11, 0.18), transparent 14%),
    radial-gradient(circle at 50% 91%, rgba(139, 92, 246, 0.18), transparent 16%),
    #dcebcf;
}

.map-hud__field[data-zone="estate"] {
  background:
    linear-gradient(90deg, #4f9fdd 0 18%, transparent 18%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.62) 0 36%, transparent 36%),
    #9ccf81;
}

.map-hud__field[data-zone="sea"] {
  background:
    linear-gradient(180deg, #f2d68f 0 76%, #4f9fdd 76%),
    #f2d68f;
}

.map-hud__field::before,
.map-hud__field::after {
  content: "";
  position: absolute;
  background: rgba(158, 121, 69, 0.48);
  pointer-events: none;
}

.map-hud__field::before {
  top: 47%;
  left: 0;
  width: 100%;
  height: 8px;
}

.map-hud__field::after {
  top: 0;
  left: 48%;
  width: 8px;
  height: 100%;
}

.map-hud__field[data-zone="estate"]::before,
.map-hud__field[data-zone="estate"]::after,
.map-hud__field[data-zone="sea"]::before,
.map-hud__field[data-zone="sea"]::after {
  display: none;
}

.map-dot,
.map-player {
  position: absolute;
  translate: -50% -50%;
  border-radius: 999px;
}

.map-dot[hidden] {
  display: none; /* display:grid below would otherwise defeat the hidden attribute */
}

.map-dot {
  z-index: 2;
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border: 1px solid #101828;
  background: var(--dot-color, #2563eb);
  color: #ffffff;
  font-size: 6.5px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, 0 2px 4px rgba(16, 24, 40, 0.18);
  cursor: pointer;
}

.map-dot--landmark {
  cursor: default;
}

.map-dot--exit {
  width: 15px;
  height: 15px;
  border-color: rgba(16, 24, 40, 0.62);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.52), 0 2px 5px rgba(16, 24, 40, 0.18);
}

.map-dot--building {
  width: 9px;
  height: 9px;
  border-color: rgba(16, 24, 40, 0.58);
  font-size: 0;
}

.map-dot--building::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
}

.map-dot.active {
  z-index: 4;
  transform: scale(1.22);
  box-shadow: 0 0 0 3px rgba(255, 215, 102, 0.72), 0 3px 8px rgba(16, 24, 40, 0.28);
}

.map-dot--building.active {
  width: 13px;
  height: 13px;
  font-size: 6.5px;
}

.map-dot--building.active::after {
  content: none;
}

.map-player {
  z-index: 5;
  width: 10px;
  height: 10px;
  border: 2px solid #101828;
  background: #ffd766;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 3px 7px rgba(16, 24, 40, 0.32);
}

.control-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #f9fbfe;
}

.key-cluster {
  display: grid;
  width: 92px;
  grid-template-columns: repeat(3, 28px);
  gap: 4px;
}

.key {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #cbd7ea;
  border-radius: 6px;
  background: #ffffff;
  color: #344054;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 2px 0 #d9e4f2;
}

.key.active {
  border-color: #101828;
  background: #101828;
  color: #ffffff;
  box-shadow: 0 2px 0 #667085;
}

.key-up {
  grid-column: 2;
}

.avatar-tools {
  display: grid;
  gap: 16px;
  min-width: 0;
}

@media (max-width: 720px) {
  .avatar-swatch {
    width: 26px;
    height: 26px;
    background-size: 78px 208px;
    background-position: -26px -3px;
  }

  .tone-dot {
    width: 18px;
    height: 18px;
  }
}

/* Phone game shell: keep the world in the first viewport and move the web directory to a sheet. */
@media (max-width: 720px) {
  .app-shell { padding: 8px; }
  .topbar {
    position: relative;
    z-index: 20;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 8px;
  }
  .brand-sub { display: none; }
  .brand-mark { width: 34px; height: 34px; }
  .search { grid-column: 2; min-height: 42px; }
  .top-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .top-actions .button { flex: 1 0 auto; min-height: 36px; padding: 7px 10px; }
  .town-layout { display: block; }
  .game-stage { padding: 8px; }
  .stage-head { margin-bottom: 7px; }
  .stage-head h1 { font-size: 20px; }
  .stage-actions { gap: 4px; }
  .stage-actions .button { width: auto; min-height: 32px; padding: 6px 8px; font-size: 10px; }
  #immerseButton, #centerPlayer { display: none; }
  .town-map {
    height: clamp(470px, calc(100svh - 235px), 640px);
    min-height: 470px;
    border-radius: 6px;
  }
  .town-map:has(.interior.open),
  .town-map:has(.arcade.open) { height: min(82svh, 720px); min-height: 560px; }
  .control-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 7px 0 0;
  }
  .control-strip .avatar-tools,
  .control-strip .touch-hint,
  .control-strip #enterButton,
  .control-strip #openDefaultButton,
  .control-strip #randomStopButton { display: none; }
  .control-strip .button { width: 100%; min-width: 0; padding: 6px 3px; font-size: 9px; }
  .dock { display: none; }

  .district-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 84;
    display: block;
    width: 100%;
    max-height: 72svh;
    overflow-y: auto;
    padding: 42px 12px 14px;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #fff;
    box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.22);
    transform: translateY(105%);
    transition: transform 220ms ease;
  }
  body.mobile-directory-open .district-panel { transform: translateY(0); }
  body.mobile-directory-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 83;
    background: rgba(16, 24, 40, 0.34);
  }
  .mobile-sheet-close {
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #f4f6fa;
    color: #253044;
  }
  .category-strip { position: sticky; top: -1px; z-index: 2; background: #fff; }
  .adventure-panel { top: 112px; bottom: auto; left: 14px; width: min(300px, calc(100vw - 86px)); }
  .rewards-drawer { width: 100vw; padding: 14px; }
}

@media (max-width: 400px) {
  .town-map { min-height: 440px; height: clamp(440px, calc(100svh - 225px), 590px); }
  .mobile-dpad { grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); }
  .mobile-dpad button { width: 48px; height: 48px; }
  .mobile-action { width: 62px; height: 62px; }
}

.picker-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.avatar-swatch {
  box-sizing: content-box;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 8px;
  background-color: #dcefdb;
  background-repeat: no-repeat;
  background-size: 96px 256px;
  background-position: -32px -4px;
  image-rendering: pixelated;
  box-shadow: 0 0 0 1px var(--line), 0 2px 0 #d9e4f2;
}

.avatar-swatch.active {
  box-shadow: 0 0 0 2px #101828, 0 3px 0 #d9e4f2;
}

.avatar-swatch[data-value="crab"] {
  background-color: #dff0fa;
  background-position: -32px -34px; /* the crab lives in the lower half of the frame */
}

/* identity ring on YOUR avatar inside interiors */
.dom-avatar:not(.keeper)::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 4px;
  height: 12px;
  border: 2px solid rgba(255, 201, 74, 0.95);
  border-radius: 50%;
  animation: mering 0.9s ease-in-out infinite;
}

@keyframes mering {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 201, 74, 0.5); opacity: 0.95; }
  50% { box-shadow: 0 0 0 4px rgba(255, 201, 74, 0.06); opacity: 0.6; }
}

.tone-dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--dot, #ccc);
  box-shadow: 0 0 0 1px var(--line);
}

.tone-dot.active {
  box-shadow: 0 0 0 2px #101828;
}

.avatar-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 24, 40, 0.42);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 182;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 24, 40, 0.42);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.profile-modal.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.profile-card {
  width: min(700px, calc(100vw - 28px));
  max-height: min(720px, calc(100dvh - 28px));
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.3);
}

.profile-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.profile-menu-head h2 {
  margin: 0;
  font-size: 22px;
}

.profile-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-option {
  min-width: 0;
  min-height: 132px;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #172033;
  text-align: left;
  cursor: pointer;
}

.profile-option strong,
.profile-option span,
.profile-option small {
  display: block;
}

.profile-option strong {
  font-size: 16px;
}

.profile-option span {
  margin-top: 4px;
  color: #177f73;
  font-size: 11px;
  font-weight: 850;
}

.profile-option small {
  margin-top: 8px;
  color: #55657a;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.42;
}

.profile-option.active {
  border-color: #172033;
  background: #eef8f4;
  box-shadow: 0 0 0 2px rgba(23, 127, 115, 0.16);
}

.profile-safety {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  color: #5b6472;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.45;
}

.experience-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -8px 0 12px;
  padding: 8px 10px;
  border: 1px solid #d7b65c;
  border-radius: 6px;
  background: #fff8d8;
  color: #4e411d;
  font-size: 12px;
  font-weight: 700;
}

.experience-banner[hidden] {
  display: none;
}

.experience-banner span {
  min-width: 0;
  flex: 1;
}

body[data-profile="family"] .town-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-profile="family"] .district-panel,
body[data-profile="family"] .dock,
body[data-profile="family"] #directoryToggle,
body[data-profile="family"] #friendsButton,
body[data-profile="family"] #workshopButton,
body[data-profile="family"] #editButton,
body[data-profile="family"] #feedbackButton,
body[data-profile="family"] #openDefaultButton {
  display: none !important;
}

body[data-profile="focus"] #friendsButton,
body[data-profile="focus"] #coinPill {
  display: none !important;
}

.avatar-modal.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.avatar-card {
  width: min(560px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.3);
}

.avatar-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.avatar-menu-head h2 { margin: 0; font-size: 22px; }

.avatar-preview {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 96px;
  padding: 10px 14px;
  border: 1px solid #cbd7ea;
  border-radius: 8px;
  background: #eef8ee;
}

.avatar-preview-sprite {
  display: block;
  width: 64px;
  height: 72px;
  background-repeat: no-repeat;
  background-position: -64px -8px;
  background-size: 192px 512px;
  image-rendering: pixelated;
}

.avatar-preview-sprite[data-value="crab"] { background-position: -64px -68px; }
.avatar-preview-copy span,
.avatar-preview-copy strong,
.avatar-preview-copy small { display: block; }
.avatar-preview-copy span { color: var(--muted); font-size: 11px; font-weight: 800; }
.avatar-preview-copy strong { margin-top: 2px; color: var(--ink); font-size: 20px; }
.avatar-preview-copy small { margin-top: 4px; color: #475467; font-size: 12px; font-weight: 700; }

.avatar-option-list { display: grid; gap: 14px; }
.avatar-option-group { min-width: 0; margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line-soft); }
.avatar-option-group legend { padding: 0 8px 0 0; color: #344054; font-size: 12px; font-weight: 850; }
.avatar-card .avatar-swatch { width: 42px; height: 42px; background-size: 126px 336px; background-position: -42px -5px; }
.avatar-card .avatar-swatch[data-value="crab"] { background-position: -42px -45px; }
.avatar-card .tone-dot { width: 30px; height: 30px; }

@media (max-width: 720px) {
  .avatar-modal { place-items: end stretch; padding: 0; }
  .avatar-card {
    width: 100%;
    max-height: min(86dvh, 700px);
    padding: 14px max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }
  .avatar-preview { grid-template-columns: 64px minmax(0, 1fr); min-height: 82px; padding: 7px 10px; }
  .avatar-preview-sprite { transform: scale(0.84); transform-origin: center; }
}

@media (max-width: 720px) {
  .profile-modal { place-items: end stretch; padding: 0; }
  .profile-card {
    width: 100%;
    max-height: min(86dvh, 700px);
    padding: 14px max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }
  .profile-options { grid-template-columns: 1fr; }
  .profile-option { min-height: 0; }
  .experience-banner { margin: -3px 0 8px; }
}

.touch-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 230px;
  min-height: 34px;
  max-width: 360px;
  padding: 7px 10px;
  border: 1px solid #cbd7ea;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 2px 0 #d9e4f2;
}

@media (pointer: coarse) {
  .key-cluster { display: none; }
}

@media (max-width: 520px) {
  .key-cluster {
    display: none;
  }

  .touch-hint {
    order: -1;
    flex-basis: 100%;
    max-width: none;
  }

  .avatar-tools {
    justify-content: center;
    width: 100%;
  }
}

.district-panel {
  overflow: hidden;
}

.panel-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.district-icon,
.site-icon,
.quick-icon {
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--accent, var(--blue));
  box-shadow: inset 0 -12px 20px rgba(0, 0, 0, 0.16);
  font-weight: 900;
}

.district-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  font-size: 16px;
}

.panel-head h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 26px;
}

.panel-head p:last-child {
  overflow: hidden;
  margin: 5px 0 0;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.district-desc {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.default-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px;
  padding: 11px;
  border: 1px solid #cddcf5;
  border-radius: var(--radius);
  background: #edf4ff;
}

.default-label {
  padding: 4px 7px;
  border-radius: 6px;
  background: #ffffff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
}

.default-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.category-strip {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 12px 12px;
  scrollbar-width: thin;
}

.category-chip {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 9px 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #344054;
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
}

.category-chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--chip-accent);
}

.category-chip.active {
  border-color: var(--chip-accent);
  background: color-mix(in srgb, var(--chip-accent) 10%, #ffffff);
}

.site-list {
  display: grid;
  gap: 7px;
  padding: 0 12px 12px;
}

.site-row {
  display: grid;
  grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: #ffffff;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.site-row:hover {
  border-color: #bdcbe0;
  background: #f8fbff;
  transform: translateY(-1px);
}

.site-row.is-default {
  border-color: color-mix(in srgb, var(--accent) 42%, #d9e4f2);
  background: color-mix(in srgb, var(--accent) 7%, #ffffff);
}

.site-row.is-custom .rank {
  background: #fff7ed;
  color: #c2410c;
}

.rank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: #f1f5f9;
  color: #647084;
  font-size: 12px;
  font-weight: 900;
}

.site-icon,
.quick-icon {
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  font-size: 12px;
}

.favicon {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16%;
  border-radius: inherit;
  background: #ffffff;
  object-fit: contain;
}

.site-copy {
  min-width: 0;
}

.site-name,
.site-note,
.domain {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-name {
  display: block;
  color: #243044;
  font-size: 14px;
  font-weight: 860;
}

.site-note {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.site-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.site-mini {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: #4d5b70;
  font-size: 11px;
  font-weight: 820;
}

.site-mini.dark {
  border-color: #101828;
  background: #101828;
  color: #ffffff;
}

.site-mini.danger {
  border-color: #fee2e2;
  background: #fff5f5;
  color: #b42318;
}

.site-mini.favorite-action {
  width: 30px;
  padding: 0;
  justify-content: center;
  border-color: #f2c94c;
  background: #fffbea;
  color: #9a6700;
  font-size: 17px;
  line-height: 1;
}

.site-row.is-favorite { box-shadow: inset 3px 0 0 #f2c94c; }

.site-mini[disabled] {
  opacity: 0.58;
  cursor: default;
}

.add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 8px;
  padding: 0 12px 14px;
}

.add-form input {
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: 0;
  background: #ffffff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 680;
}

.add-form input:focus {
  border-color: #8fb4f8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.dock {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  padding: 14px;
}

#favoritesDock { grid-column: 1 / -1; }
#favoritesDock .quick-row { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }

.quick-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.quick-tile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--soft-shadow);
}

.quick-tile:hover {
  border-color: #bdcbe0;
}

.quick-icon {
  width: 34px;
  height: 34px;
  font-size: 11px;
}

.quick-copy {
  min-width: 0;
}

.quick-name,
.quick-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-name {
  color: #243044;
  font-size: 12px;
  font-weight: 860;
}

.quick-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  max-width: min(360px, calc(100vw - 40px));
  padding: 12px 14px;
  border: 1px solid #cddcf5;
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
  color: #243044;
  font-size: 13px;
  font-weight: 760;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.credits-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 24, 40, 0.46);
}

.credits-modal.open {
  display: flex;
}

.credits-card {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.credits-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.credits-head .button { flex: 0 0 auto; width: auto; min-width: 72px; }

.credits-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
}

.credits-copy {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.credits-list {
  display: grid;
  gap: 8px;
}

.credits-list p {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #f9fbfe;
  color: #344054;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.45;
}

.credits-list code {
  font-size: 12px;
  font-weight: 800;
}


.edit-mode .site-mini[data-action="default"] {
  border-color: var(--accent, var(--blue));
  color: var(--accent, var(--blue));
}

@media (max-width: 1120px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .town-layout {
    grid-template-columns: 1fr;
  }

  .district-panel {
    order: 2;
  }

  .dock {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 12px;
  }

  .brand-name {
    font-size: 20px;
  }

  .search {
    min-height: 50px;
    gap: 8px;
    padding-left: 12px;
  }

  .search input {
    font-size: 14px;
  }

  .key-hint {
    display: none;
  }

  .go {
    min-width: 64px;
  }

  .town-map {
    height: 360px;
  }

  .town-map:has(.interior.open),
  .town-map:has(.arcade.open) {
    height: min(78vh, 680px);
    min-height: 520px;
  }

  .map-hud {
    width: 144px;
    padding: 7px;
  }

  .map-hud__field {
    height: 74px;
  }

  .map-hud__status {
    max-width: 56px;
  }




  .control-strip {
    align-items: stretch;
  }

  .site-row {
    grid-template-columns: 24px 34px minmax(0, 1fr);
  }

  .site-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .add-form {
    grid-template-columns: 1fr;
  }

  .quick-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .top-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .button {
    width: 100%;
  }

  .search .go {
    width: auto;
    flex: 0 0 64px;
  }

  .stage-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .town-map {
    height: 340px;
  }

  .town-map:has(.interior.open),
  .town-map:has(.arcade.open) {
    height: min(80vh, 650px);
    min-height: 500px;
  }

  .map-hud {
    left: 8px;
    bottom: 8px;
    width: 126px;
  }

  .map-hud__head {
    font-size: 9px;
  }

  .map-hud__status {
    display: none;
  }

  .map-dot {
    width: 12px;
    height: 12px;
    font-size: 5.5px;
  }

  .map-dot--building {
    width: 9px;
    height: 9px;
    font-size: 0;
  }

  .map-dot--building.active {
    width: 12px;
    height: 12px;
    font-size: 5.5px;
  }

  .map-dot--exit {
    width: 14px;
    height: 14px;
  }

  .quick-row {
    grid-template-columns: 1fr;
  }
}

.friends-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(430px, 96vw);
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: #ffffff;
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.14);
  transform: translateX(105%);
  transition: transform 200ms ease;
}

.friends-drawer.open {
  transform: translateX(0);
}

.workshop-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  display: flex;
  flex-direction: column;
  width: min(560px, 96vw);
  padding: 18px;
  border-left: 1px solid var(--line);
  background: #f8fafc;
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.18);
  transform: translateX(105%);
  transition: transform 200ms ease;
}

.workshop-drawer.open { transform: translateX(0); }

.workshop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workshop-head h2 { margin: 0; color: #1d2939; font-size: 22px; }
.workshop-head > div { min-width: 0; }
.workshop-head .button { flex: 0 0 auto; width: auto; }
.workshop-intro, .workshop-footnote { color: #59677a; font-size: 11px; font-weight: 650; line-height: 1.5; }
.workshop-intro { margin: 10px 0 12px; }
.workshop-footnote { margin: 10px 0 0; }

.workshop-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #edf1f5;
}

.workshop-filters button {
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #5a667a;
  font: 800 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.workshop-filters button.active { background: #fff; color: #101828; box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12); }
.workshop-list { display: grid; gap: 8px; min-height: 0; overflow-y: auto; padding-right: 2px; }

.workshop-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #d7deea;
  border-left: 4px solid var(--workshop-accent);
  border-radius: 8px;
  background: #fff;
}

.workshop-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: var(--workshop-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.workshop-copy { display: grid; min-width: 0; gap: 3px; }
.workshop-copy > strong { color: #1d2939; font-size: 14px; }
.workshop-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.workshop-status, .workshop-owner { padding: 3px 5px; border-radius: 4px; font-size: 9px; font-weight: 850; }
.workshop-status.is-live { background: #dcfce7; color: #166534; }
.workshop-status.is-beta { background: #fef3c7; color: #92400e; }
.workshop-owner { background: #e9eef6; color: #344054; }
.workshop-domain, .workshop-detail, .workshop-placement { color: #657286; font-size: 10px; line-height: 1.35; }
.workshop-detail b { color: #344054; }
.workshop-placement { color: #8a5410; font-weight: 750; }
.workshop-open { align-self: center; }

.routes-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  width: min(540px, 96vw);
  overflow-y: auto;
  padding: 18px;
  border-left: 1px solid var(--line);
  background: #f8fafc;
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.18);
  transform: translateX(105%);
  transition: transform 200ms ease;
}

.routes-drawer.open { transform: translateX(0); }
.routes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.routes-head > div { min-width: 0; }
.routes-head h2 { margin: 0; color: #1d2939; font-size: 22px; }
.routes-head .button { flex: 0 0 auto; width: auto; }
.routes-intro { margin: 10px 0 14px; color: #59677a; font-size: 11px; font-weight: 650; line-height: 1.5; }
.routes-section + .routes-section { margin-top: 16px; }
.routes-section h3 { margin: 0 0 8px; color: #344054; font-size: 12px; }
.saved-routes, .route-templates { display: grid; gap: 8px; }
.route-empty { margin: 0; padding: 12px; border: 1px dashed #b8c3d3; border-radius: 8px; color: #657286; font-size: 11px; line-height: 1.5; }

.route-card, .route-template {
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #fff;
}

.route-card { padding: 11px; }
.route-card.active { border-color: #2d8f83; box-shadow: inset 3px 0 0 #2d8f83; }
.route-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.route-card-copy { display: grid; min-width: 0; gap: 2px; }
.route-card-copy strong { color: #1d2939; font-size: 14px; }
.route-card-copy small { color: #667085; font-size: 10px; font-weight: 750; }
.route-card > p { margin: 7px 0 9px; color: #667085; font-size: 10px; line-height: 1.4; }
.route-remove { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid #d7deea; border-radius: 6px; background: #fff; color: #667085; font-weight: 850; }
.route-steps { display: grid; gap: 5px; }
.route-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 38px; padding: 5px; border-radius: 6px; background: #f5f7fa; }
.route-step > span { color: #344054; font-size: 11px; font-weight: 700; line-height: 1.3; }
.route-step.done > span { color: #718096; text-decoration: line-through; }
.route-check { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #b8c3d3; border-radius: 6px; background: #fff; color: transparent; font-weight: 900; }
.route-check[aria-pressed="true"] { border-color: #16866f; background: #dff7ed; color: #146c5a; }
.route-step .button { width: auto; min-width: 48px; }
.route-template { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; }
.route-template-copy { display: grid; min-width: 0; gap: 3px; }
.route-template-copy strong { color: #1d2939; font-size: 12px; }
.route-template-copy small { color: #667085; font-size: 10px; line-height: 1.35; }
.route-template .button { width: auto; }

.taste-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 160;
  display: flex;
  flex-direction: column;
  width: min(1040px, 100vw);
  padding: 20px;
  overflow: hidden;
  border-left: 1px solid #d9d5c9;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 222, 159, 0.45), transparent 26%),
    radial-gradient(circle at 88% 92%, rgba(112, 196, 185, 0.2), transparent 30%),
    #fffdf7;
  box-shadow: -24px 0 70px rgba(31, 41, 55, 0.22);
  transform: translateX(105%);
  transition: transform 220ms ease;
}

.taste-drawer.open { transform: translateX(0); }
.taste-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.taste-head > div { min-width: 0; }
.taste-head h2 { margin: 0; color: #1e2b2b; font: 850 28px/1.1 Georgia, serif; letter-spacing: -0.02em; }
.taste-head p:not(.kicker) { margin: 5px 0 0; color: #5f6d69; font-size: 12px; font-weight: 650; }
.taste-head .button { width: auto; flex: 0 0 auto; }
.taste-view-tabs { display: grid; grid-template-columns: 1fr 1fr; width: min(320px, 100%); gap: 5px; margin-bottom: 12px; padding: 4px; border: 1px solid #d5ddd9; border-radius: 8px; background: #f3f7f5; }
.taste-view-tabs button { min-height: 38px; padding: 7px 12px; border: 0; border-radius: 6px; background: transparent; color: #5d6965; font-size: 11px; font-weight: 850; cursor: pointer; }
.taste-view-tabs button[aria-selected="true"] { background: #fff; color: #176d64; box-shadow: 0 1px 4px rgba(31, 44, 41, 0.14); }
.taste-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr); gap: 16px; min-height: 0; flex: 1; }
.taste-layout[hidden], .briefing-view[hidden] { display: none !important; }
.taste-main, .taste-passport { min-height: 0; border: 1px solid #d9d5c9; border-radius: 14px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 5px 18px rgba(63, 73, 68, 0.08); }
.taste-main { display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow-y: auto; }
.taste-passport { padding: 14px; overflow-y: auto; }

.taste-guide { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.taste-guide-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: 2px solid color-mix(in srgb, var(--taste-accent) 70%, #fff); border-radius: 50%; background: color-mix(in srgb, var(--taste-accent) 18%, #fff); color: color-mix(in srgb, var(--taste-accent) 75%, #182220); font: 900 18px/1 Georgia, serif; box-shadow: 0 3px 0 color-mix(in srgb, var(--taste-accent) 28%, #ccd4d1); }
.taste-guide > span:nth-child(2) { display: grid; }
.taste-guide small { color: #6c7774; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.taste-guide strong { color: #1f2c29; font: 850 18px/1.15 Georgia, serif; }
.taste-local { margin-left: auto; padding: 5px 7px; border: 1px solid #bdded6; border-radius: 999px; background: #effaf7; color: #287366; font-size: 9px; font-weight: 800; }

.taste-domains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.taste-domains button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; padding: 6px; border: 1px solid #d8ddda; border-radius: 8px; background: #f8faf9; color: #4b5a56; font: 800 10px/1.1 Inter, system-ui, sans-serif; cursor: pointer; }
.taste-domains button span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px; background: color-mix(in srgb, var(--taste-accent) 16%, #fff); color: var(--taste-accent); font-size: 9px; }
.taste-domains button.active { border-color: var(--taste-accent); background: color-mix(in srgb, var(--taste-accent) 10%, #fff); color: #202c29; box-shadow: inset 0 -2px 0 var(--taste-accent); }

.taste-signal-form { display: grid; gap: 5px; }
.taste-signal-form label { color: #43514d; font-size: 10px; font-weight: 850; }
.taste-signal-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.taste-signal-form input { min-width: 0; min-height: 42px; padding: 9px 11px; border: 1px solid #bfc9c5; border-radius: 8px; background: #fff; color: #1f2c29; font: 650 12px/1.3 Inter, system-ui, sans-serif; box-shadow: inset 0 1px 2px rgba(31, 44, 41, 0.05); }
.taste-signal-form input:focus { outline: 3px solid rgba(35, 142, 131, 0.2); border-color: #238e83; }
.taste-signal-form .button { width: auto; min-height: 42px; }
.taste-starters { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: #75817d; font-size: 9px; font-weight: 750; }
.taste-starters button { min-height: 28px; padding: 4px 8px; border: 1px solid #d9d5c9; border-radius: 999px; background: #fffaf0; color: #755123; font: 800 9px/1 Inter, system-ui, sans-serif; cursor: pointer; }

.taste-deck { display: grid; gap: 9px; min-height: 0; flex: 1; }
.taste-card { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 12px 16px; min-height: 330px; padding: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--taste-accent) 45%, #d9d5c9); border-radius: 16px; background:
  linear-gradient(145deg, color-mix(in srgb, var(--taste-accent) 15%, #fff) 0 34%, rgba(255,255,255,0.94) 34% 100%);
  box-shadow: 0 10px 24px rgba(37, 50, 46, 0.12), inset 0 0 0 5px rgba(255, 255, 255, 0.42);
  touch-action: pan-y;
  user-select: none;
  transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}
.taste-card::after { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 1px dashed color-mix(in srgb, var(--taste-accent) 23%, transparent); border-radius: 11px; }
.taste-card.dragging { transition: none; cursor: grabbing; box-shadow: 0 18px 36px rgba(37, 50, 46, 0.18); }
.taste-card-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 1; }
.taste-card-meta span { padding: 5px 8px; border-radius: 999px; background: var(--taste-accent); color: #fff; font-size: 9px; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.taste-card-meta small { color: #5e6a67; font-size: 9px; font-weight: 800; }
.taste-card-mark { display: grid; place-items: center; align-self: start; width: 96px; height: 132px; position: relative; z-index: 1; border: 1px solid color-mix(in srgb, var(--taste-accent) 55%, #fff); border-radius: 10px; background:
  repeating-linear-gradient(135deg, transparent 0 13px, rgba(255,255,255,0.22) 13px 14px),
  var(--taste-accent);
  color: #fff; font: 900 31px/1 Georgia, serif; letter-spacing: -0.04em; box-shadow: 5px 6px 0 color-mix(in srgb, var(--taste-accent) 23%, #e5e7e5); }
.taste-card-copy { min-width: 0; position: relative; z-index: 1; }
.taste-card-copy > p:first-child { margin: 0 0 3px; color: #6b7773; font-size: 10px; font-weight: 750; }
.taste-card-copy h3 { margin: 0; color: #192421; font: 850 clamp(24px, 4vw, 38px)/1.02 Georgia, serif; letter-spacing: -0.03em; }
.taste-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 9px 0; }
.taste-card-tags span { padding: 4px 6px; border-radius: 5px; background: color-mix(in srgb, var(--taste-accent) 11%, #f4f5f4); color: color-mix(in srgb, var(--taste-accent) 64%, #29322f); font-size: 8px; font-weight: 850; }
.taste-card-note { margin: 0; color: #3f4c48; font-size: 11px; font-weight: 650; line-height: 1.55; }
.taste-card-why { margin: 10px 0 0; padding: 8px 9px; border-left: 3px solid var(--taste-accent); background: rgba(255,255,255,0.62); color: #55615e; font-size: 10px; line-height: 1.45; }
.taste-card-why strong { color: #25312e; }
.taste-learn { grid-column: 2; justify-self: start; position: relative; z-index: 2; color: var(--taste-accent); font-size: 10px; font-weight: 850; text-decoration: none; }
.taste-learn:hover, .taste-learn:focus-visible { text-decoration: underline; }
.taste-swipe-hint { grid-column: 1 / -1; justify-self: center; position: relative; z-index: 1; color: #7a8581; font-size: 8px; font-weight: 750; }
.taste-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.taste-actions button { min-height: 42px; padding: 7px; border: 1px solid #ccd4d1; border-radius: 8px; background: #fff; color: #45534f; font: 800 9px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.taste-actions button:hover, .taste-actions button:focus-visible { border-color: #7d8c87; background: #f6f8f7; }
.taste-actions .taste-like { border-color: #238e83; background: #e9f7f4; color: #176d64; }
.taste-empty { display: grid; place-items: center; align-content: center; min-height: 260px; padding: 24px; border: 1px dashed #abb8b3; border-radius: 14px; text-align: center; color: #5f6b67; }
.taste-empty strong { color: #26332f; font: 850 22px/1.1 Georgia, serif; }
.taste-empty p { max-width: 420px; font-size: 11px; line-height: 1.5; }

.taste-passport-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.taste-passport-head h3 { margin: 0; color: #24312d; font: 850 21px/1.1 Georgia, serif; }
.taste-passport > p { margin: 9px 0 12px; color: #65716d; font-size: 10px; line-height: 1.5; }
.taste-map { position: relative; min-height: 210px; margin-bottom: 15px; overflow: hidden; border: 1px solid #d8dedb; border-radius: 12px; background:
  linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
  radial-gradient(circle at center, #d7f0e9 0 3%, transparent 4%),
  #f3f7f5;
}
.taste-map::before, .taste-map::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 76%; height: 1px; background: #cbd8d3; transform-origin: left center; }
.taste-map::before { transform: rotate(28deg) translateX(-50%); }
.taste-map::after { transform: rotate(-34deg) translateX(-50%); }
.taste-map-center, .taste-map-node { position: absolute; z-index: 1; display: grid; place-items: center; min-width: 54px; min-height: 34px; padding: 6px 8px; border: 1px solid #aabbb4; border-radius: 999px; background: #fff; color: #31413c; font-size: 9px; font-weight: 850; text-align: center; box-shadow: 0 3px 8px rgba(41, 58, 52, 0.1); }
.taste-map-center { left: 50%; top: 50%; min-width: 60px; min-height: 60px; transform: translate(-50%, -50%); border-color: #238e83; background: #e4f7f2; color: #176d64; font: 900 15px/1 Georgia, serif; }
.taste-map-node.node-1 { left: 7%; top: 12%; }
.taste-map-node.node-2 { right: 7%; top: 12%; }
.taste-map-node.node-3 { left: 3%; bottom: 14%; }
.taste-map-node.node-4 { right: 3%; bottom: 14%; }
.taste-map-node.node-5 { left: 50%; top: 5%; transform: translateX(-50%); }
.taste-map-node.node-6 { left: 50%; bottom: 5%; transform: translateX(-50%); }
.taste-map-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #7b8883; font-size: 10px; font-weight: 750; }
.taste-map:has(.taste-map-empty)::before, .taste-map:has(.taste-map-empty)::after { display: none; }
.taste-saved-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid #e0e5e2; color: #33413d; font-size: 11px; }
.taste-saved-head span { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: #edf3f1; font-size: 9px; }
.taste-saved { display: grid; gap: 5px; margin-top: 7px; }
.taste-saved > p { margin: 0; padding: 10px; border: 1px dashed #ccd4d1; border-radius: 8px; color: #7a8581; font-size: 9px; }
.taste-saved article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 8px; border: 1px solid #dde3e0; border-radius: 8px; background: #fff; }
.taste-saved article > span { display: grid; min-width: 0; }
.taste-saved small { color: #76817d; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.taste-saved strong { overflow: hidden; color: #2a3733; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.taste-saved em { overflow: hidden; color: #7a8581; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.taste-saved a, .taste-saved button { display: grid; place-items: center; min-width: 32px; min-height: 32px; border: 1px solid #d1d9d6; border-radius: 6px; background: #fff; color: #4d5c57; font: 800 9px/1 Inter, system-ui, sans-serif; text-decoration: none; }
.taste-saved-paused { padding: 5px; color: #7a8581; font-size: 8px; font-weight: 800; }
.taste-link-paused { color: #697571; }
.taste-privacy { margin-top: 12px !important; padding: 9px; border-radius: 8px; background: #f0f5f3; color: #61706b !important; font-size: 9px !important; }

.briefing-view { min-height: 0; overflow-y: auto; padding: 16px; border: 1px solid #d9d5c9; border-radius: 8px; background: rgba(255, 255, 255, 0.9); }
.briefing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.briefing-head h3 { margin: 0; color: #1f2c29; font: 850 25px/1.1 Georgia, serif; }
.briefing-head p:not(.kicker) { max-width: 660px; margin: 5px 0 0; color: #65716d; font-size: 11px; line-height: 1.5; }
.briefing-date { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #bdded6; border-radius: 6px; background: #effaf7; color: #287366; font-size: 10px; font-weight: 850; }
.briefing-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.briefing-item { display: flex; min-width: 0; flex-direction: column; gap: 9px; padding: 12px; border: 1px solid color-mix(in srgb, var(--briefing-accent) 45%, #d9d5c9); border-top: 5px solid var(--briefing-accent); border-radius: 8px; background: #fff; box-shadow: 0 5px 14px rgba(37, 50, 46, 0.08); }
.briefing-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.briefing-item-meta span { color: var(--briefing-accent); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.briefing-item-meta small { color: #78827f; font-size: 8px; font-weight: 750; }
.briefing-item-copy { min-width: 0; flex: 1; }
.briefing-item-copy > p:first-child { margin: 0 0 2px; color: #77827e; font-size: 9px; font-weight: 750; }
.briefing-item-copy h4 { margin: 0; color: #1f2a27; font: 850 20px/1.12 Georgia, serif; overflow-wrap: anywhere; }
.briefing-item-copy > p:not(:first-child) { margin: 7px 0 0; color: #4c5955; font-size: 10px; line-height: 1.5; }
.briefing-item-copy .briefing-why { padding: 7px 8px; border-left: 3px solid var(--briefing-accent); background: #f7f9f8; color: #64706c; font-size: 9px; }
.briefing-why strong { color: #34413d; }
.briefing-destinations, .briefing-reactions { display: grid; gap: 6px; }
.briefing-destinations { grid-template-columns: 1fr 1fr; }
.briefing-reactions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.briefing-destinations a, .briefing-destinations button, .briefing-reactions button { display: grid; min-width: 0; min-height: 42px; place-items: center; padding: 7px; border: 1px solid #cbd4d0; border-radius: 6px; background: #fff; color: #3e4c47; font: 800 9px/1.25 Inter, system-ui, sans-serif; text-align: center; text-decoration: none; cursor: pointer; }
.briefing-destinations a { border-color: var(--briefing-accent); background: color-mix(in srgb, var(--briefing-accent) 9%, #fff); color: color-mix(in srgb, var(--briefing-accent) 72%, #25312e); }
.briefing-destinations button:hover, .briefing-destinations a:hover, .briefing-reactions button:hover { border-color: var(--briefing-accent); }
.briefing-reactions button:disabled { cursor: default; opacity: 0.55; }
.briefing-paused { display: grid; min-height: 42px; place-items: center; padding: 7px; border: 1px dashed #cbd4d0; border-radius: 6px; color: #6d7874; font-size: 9px; font-weight: 800; text-align: center; }
.briefing-reaction-status { min-height: 14px; margin: 0; color: #287366; font-size: 9px; font-weight: 750; line-height: 1.4; }
.briefing-item[data-reaction] { background: #fbfdfc; }
.briefing-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0e5e2; color: #68736f; font-size: 9px; font-weight: 750; }
.briefing-footer .button { width: auto; flex: 0 0 auto; }
.town-briefing-callout { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 12px; border: 1px solid #b9d8d1; border-left: 5px solid #238e83; border-radius: 8px; background: #f1faf7; }
.town-briefing-callout h3 { margin: 0; color: #25332f; font-size: 16px; }
.town-briefing-callout p:not(.kicker) { margin: 4px 0 0; color: #5c6b66; font-size: 10px; line-height: 1.45; }
.town-briefing-callout .button { width: auto; flex: 0 0 auto; }

@media (max-width: 820px) {
  .taste-drawer { width: 100vw; padding: 14px 12px max(14px, env(safe-area-inset-bottom)); overflow-y: auto; }
  .taste-layout { grid-template-columns: 1fr; overflow: visible; }
  .taste-main, .taste-passport { overflow: visible; }
  .taste-passport { min-height: 360px; }
  .briefing-view { overflow: visible; }
  .briefing-list { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .taste-head h2 { font-size: 24px; }
  .taste-head p:not(.kicker) { font-size: 10px; }
  .taste-main, .taste-passport { padding: 10px; border-radius: 10px; }
  .taste-local { display: none; }
  .taste-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taste-signal-form > div { grid-template-columns: 1fr; }
  .taste-signal-form .button { width: 100%; }
  .taste-card { grid-template-columns: 72px minmax(0, 1fr); min-height: 360px; padding: 13px; gap: 10px; }
  .taste-card-mark { width: 68px; height: 96px; font-size: 22px; }
  .taste-card-copy h3 { font-size: 25px; }
  .taste-card-note { font-size: 10px; }
  .taste-learn { grid-column: 1 / -1; }
  .taste-actions { grid-template-columns: 1fr 1fr; }
  .taste-map { min-height: 200px; }
  .taste-view-tabs { width: 100%; }
  .briefing-view { padding: 10px; }
  .briefing-head h3 { font-size: 22px; }
  .briefing-footer, .town-briefing-callout { align-items: stretch; flex-direction: column; }
  .briefing-footer .button, .town-briefing-callout .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .taste-drawer, .taste-card { transition: none; }
}

.mayor-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 145;
  display: flex;
  flex-direction: column;
  width: min(560px, 96vw);
  overflow-y: auto;
  padding: 18px;
  border-left: 1px solid #d9d5c9;
  background: #fffdf7;
  box-shadow: -18px 0 48px rgba(31, 41, 55, 0.2);
  transform: translateX(105%);
  transition: transform 200ms ease;
}

.mayor-drawer.open { transform: translateX(0); }
.mayor-head,
.mayor-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mayor-head > div,
.mayor-section-head > div { min-width: 0; }
.mayor-head h2 { margin: 0; color: #243047; font-size: 22px; }
.mayor-head .button { flex: 0 0 auto; width: auto; }
.mayor-content { display: grid; gap: 18px; margin-top: 14px; }
.today-board {
  display: grid;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ded8ca;
}
.today-board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.today-board-head > div { min-width: 0; }
.today-board-head h3 { margin: 0; color: #243047; font-size: 18px; }
.today-date {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid #cbd6e5;
  border-radius: 6px;
  background: #f5f8fc;
  color: #56657a;
  font-size: 9px;
  font-weight: 800;
}
.today-note { margin: 0; color: #586474; font-size: 11px; line-height: 1.5; }
.today-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.today-item {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(42px, 1fr) auto;
  align-items: start;
  min-width: 0;
  min-height: 176px;
  padding: 11px;
  border: 1px solid #d8dee8;
  border-top: 3px solid #64748b;
  border-radius: 7px;
  background: #fff;
}
.today-item.today-purpose { border-top-color: #16866f; }
.today-item.today-route { border-top-color: #3d63a8; }
.today-item.today-discovery,
.today-item.today-resident { border-top-color: #b7791f; }
.today-item.today-play { border-top-color: #a0446e; }
.today-item.complete { background: #f0faf5; }
.today-kind {
  margin-bottom: 5px;
  color: #6b7585;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}
.today-item > strong { color: #243047; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.today-item > p { margin: 5px 0 10px; color: #657286; font-size: 10px; line-height: 1.45; }
.today-item > .button { justify-self: start; width: auto; min-width: 70px; }
.mayor-inauguration { padding: 2px 0 14px; border-bottom: 1px solid #e4ded0; }
.mayor-inauguration h3,
.mayor-section-head h3 { margin: 0; color: #243047; font-size: 16px; }
.mayor-inauguration > p:last-child,
.mayor-welcome { margin: 7px 0 0; color: #586474; font-size: 12px; line-height: 1.55; }
.mayor-welcome { padding: 10px 12px; border-left: 4px solid #16866f; background: #eef9f4; }
.mayor-priority-tag,
.mayor-selection-count {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid #d6c584;
  border-radius: 6px;
  background: #fff7d6;
  color: #765b05;
  font-size: 10px;
  font-weight: 850;
}
.mayor-brief { border-top: 3px solid #23395d; border-bottom: 1px solid #d8dee8; }
.mayor-brief > .mayor-section-head { padding: 11px 4px; }
.mayor-brief-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 10px 4px;
  border-top: 1px solid #e0e5ec;
}
.mayor-brief-row.complete { background: #f0faf5; }
.mayor-row-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #23395d;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.mayor-brief-row.complete .mayor-row-mark { background: #16866f; }
.mayor-row-copy { display: grid; min-width: 0; gap: 2px; }
.mayor-row-copy small { color: #7b8493; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.mayor-row-copy strong { color: #243047; font-size: 12px; line-height: 1.35; }
.mayor-row-copy span { color: #657286; font-size: 10px; line-height: 1.4; }
.mayor-brief-row > .button { width: auto; min-width: 58px; }
.mayor-priority-section { display: grid; gap: 10px; }
.mayor-priorities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mayor-priority {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: flex-start;
  gap: 8px;
  min-height: 68px;
  padding: 10px;
  border: 1px solid #d8dee8;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.mayor-priority:hover { border-color: #9caabf; }
.mayor-priority.selected { border-color: #16866f; background: #eef9f4; box-shadow: inset 3px 0 0 #16866f; }
.mayor-priority.unavailable { opacity: 0.52; cursor: default; }
.mayor-priority input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #16866f; }
.mayor-priority > span { display: grid; gap: 3px; min-width: 0; }
.mayor-priority strong { color: #263248; font-size: 12px; }
.mayor-priority small { color: #697586; font-size: 9px; line-height: 1.35; }
.mayor-actions { display: flex; gap: 8px; }
.mayor-actions .button { width: auto; }
.mayor-pill.active { border-color: #16866f; background: #eef9f4; color: #116b59; }

@media (max-width: 720px) {
  .workshop-drawer { width: 100vw; padding: 14px 12px max(14px, env(safe-area-inset-bottom)); }
  .workshop-item { grid-template-columns: 38px minmax(0, 1fr); padding: 9px; }
  .workshop-icon { width: 36px; height: 36px; }
  .workshop-open { grid-column: 2; justify-self: start; min-width: 92px; }
  .routes-drawer { width: 100vw; padding: 14px 12px max(14px, env(safe-area-inset-bottom)); }
  .mayor-drawer { width: 100%; padding: 14px 12px max(14px, env(safe-area-inset-bottom)); }
  .today-grid { grid-template-columns: 1fr; }
  .today-item { grid-template-rows: auto auto auto auto; min-height: 0; }
  .mayor-priorities { grid-template-columns: 1fr; }
  .mayor-priority { min-height: 58px; }
  .mayor-brief-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; }
}

.rewards-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 72;
  display: flex;
  flex-direction: column;
  width: min(460px, 96vw);
  padding: 18px;
  border-left: 1px solid var(--line);
  background: #fff;
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.16);
  transform: translateX(105%);
  transition: transform 200ms ease;
}

.rewards-drawer.open { transform: translateX(0); }

.drawer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.drawer-head h2 { margin: 0; font-size: 22px; }
.drawer-balance { color: #835400; font-size: 13px; font-weight: 850; }

.reward-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f4f6fa;
}

.reward-tabs button {
  min-width: 0;
  padding: 8px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #5a667a;
  font: 800 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.reward-tabs button.active { background: #fff; color: #101828; box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12); }

.rewards-list {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.reward-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #fbfcfe;
}

.reward-item.equipped { border-color: #0f9f7f; background: #effcf7; }
.reward-preview { display: grid; place-items: center; width: 52px; height: 50px; border-radius: 6px; background: #edf1f7; overflow: hidden; }
.reward-preview img { max-width: 44px; max-height: 42px; image-rendering: pixelated; }
.reward-preview img[src*="animals"] { width: 36px; max-width: none; object-fit: none; object-position: left top; }
.reward-color { width: 30px; height: 30px; border: 4px solid #fff; border-radius: 50%; background: var(--reward-color); box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.24); }
.reward-copy { min-width: 0; }
.reward-copy strong, .reward-copy span { display: block; }
.reward-copy strong { color: #1c2738; font-size: 13px; }
.reward-copy span { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.3; }
.reward-item > button {
  min-width: 74px;
  padding: 8px;
  border: 1px solid #101828;
  border-radius: 6px;
  background: #101828;
  color: #fff;
  font: 800 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}
.reward-item > button:disabled { border-color: var(--line); background: #edf0f5; color: #7b8798; cursor: default; }

.adventure-panel {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 58;
  width: min(330px, calc(100vw - 36px));
  padding: 12px 38px 12px 13px;
  border: 1px solid #d5b45a;
  border-radius: 7px;
  background: #fffbea;
  box-shadow: 0 10px 28px rgba(60, 44, 5, 0.18);
  color: #342a12;
}

.adventure-panel[hidden] { display: none; }
.adventure-panel strong { display: block; margin-top: 8px; font-size: 14px; }
.adventure-panel p { margin: 3px 0 0; color: #665324; font-size: 12px; font-weight: 700; line-height: 1.35; }
.adventure-panel > button {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b5a2e;
  cursor: pointer;
}

.adventure-progress { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 10px; font-weight: 850; }
.adventure-progress > span:last-child { position: relative; height: 5px; overflow: hidden; border-radius: 3px; background: #eadfb8; }
.adventure-progress > span:last-child::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); background: #d29814; transition: width 220ms ease; }
.quest-pill { border-color: #dbc169; background: #fff8db; color: #604913; }

.friends-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.friends-head h2 {
  margin: 0;
  font-size: 22px;
}

.friends-list {
  display: grid;
  gap: 8px;
  max-height: 390px;
  overflow-y: auto;
  padding-right: 3px;
}

.neighbors-account,
.neighbors-circle {
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius);
  background: #f8fafc;
}

.neighbors-circle {
  margin-top: 10px;
  border-color: #b7d8d1;
  background: #f0faf7;
}

.neighbors-section-head,
.neighbors-user,
.neighbors-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.neighbors-section-head h3,
.residents-head h3 {
  margin: 0;
  color: #172033;
  font-size: 14px;
}

.neighbors-section-head p,
.residents-head p,
.neighbors-explainer,
.neighbors-privacy {
  margin: 3px 0 0;
  color: #56657a;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.4;
}

.neighbors-beta {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid #d7b65c;
  border-radius: 4px;
  background: #fff8d8;
  color: #72550b;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.neighbors-wide {
  width: 100%;
  margin-top: 10px;
}

.neighbors-user {
  margin-top: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid #dbe3ed;
}

.neighbors-user > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.neighbors-user strong,
.neighbors-user small,
.neighbors-switch strong,
.neighbors-switch small {
  display: block;
}

.neighbors-user strong,
.neighbors-switch strong {
  color: #172033;
  font-size: 12px;
}

.neighbors-user small,
.neighbors-switch small {
  margin-top: 2px;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 650;
}

.neighbors-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #177f73;
  color: #ffffff;
  box-shadow: 0 0 0 1px #94a3b8;
  font-size: 12px;
  font-weight: 900;
}

.neighbors-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.neighbors-field {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
}

.neighbors-field select {
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid #b9c5d5;
  border-radius: var(--radius);
  background: #ffffff;
  color: #172033;
  font: inherit;
}

.neighbors-switch {
  margin-top: 9px;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}

.neighbors-switch > span {
  min-width: 0;
  flex: 1;
}

.neighbors-switch input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  accent-color: #177f73;
}

.neighbors-save-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

.neighbors-save-actions .button {
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
}

.neighbors-privacy {
  padding-top: 8px;
  color: #475569;
}

.residents-head {
  margin: 15px 0 8px;
}

.neighbors-live {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.neighbors-circle-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.neighbors-live-section {
  padding-top: 7px;
  border-top: 1px solid #cfe5df;
}

.neighbors-live-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.neighbors-live-section > strong {
  display: block;
  margin-bottom: 5px;
  color: #24584f;
  font-size: 10px;
  text-transform: uppercase;
}

.neighbors-live-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  color: #334155;
  font-size: 11.5px;
  font-weight: 680;
}

.neighbors-live-item span {
  min-width: 0;
}

.neighbors-poll-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.neighbors-choice {
  padding: 5px 7px;
  border: 1px solid #8fc5ba;
  border-radius: 5px;
  background: #ffffff;
  color: #24584f;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 800;
}

.neighbors-choice.active {
  border-color: #177f73;
  background: #d9f2ec;
}

.friend-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #f9fbfe;
}

.friend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #12b76a;
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.16);
}

.friend-name {
  display: block;
  font-size: 14px;
  font-weight: 860;
  color: #243044;
}

.friend-note {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.chillvote-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #cddcf5;
  border-radius: var(--radius);
  background: #edf4ff;
}

.chillvote-card strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.chillvote-card p {
  margin: 0 0 10px;
  color: #44546c;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.chillvote-card .button[disabled] {
  width: 100%;
  opacity: 0.72;
  cursor: default;
}

.chat-log {
  flex: 0 0 auto;
  overflow-y: auto;
  margin-top: 12px;
  padding: 4px 2px;
  min-height: 60px;
  max-height: 130px;
}

.chat-line {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: #344054;
}

.chat-line strong {
  color: #101828;
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
}

.chat-form input {
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: 0;
  font-size: 13px;
  font-weight: 680;
}

.chat-form input:focus {
  border-color: #8fb4f8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.button.active {
  border-color: #101828;
  background: #eef2f9;
}


/* ------------------------------------------------------------ venue interiors */
.interior {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  /* stepping through the door: the room swings up to meet you */
  transform: scale(0.965) translateY(6px);
  transform-origin: 50% 82%;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .interior { transform: none; transition: opacity 120ms ease; }
}

/* In-world arcade booths: a self-hosted open-source game in a friendly frame */
.arcade {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  flex-direction: column;
  background: rgba(9, 12, 20, 0.94);
}

.arcade.open {
  display: flex;
}

/* While a booth is open, the game owns the screen: walking controls,
   interaction prompt, and the mobile Sites toggle all stand down. */
.town-map:has(.arcade.open) .mobile-controls,
.town-map:has(.arcade.open) .interaction-prompt,
.town-map:has(.arcade.open) .mobile-directory-toggle {
  display: none;
}

.arcade-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
}

.arcade-title {
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.arcade iframe {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #f8fafc;
  border-radius: 10px 10px 0 0;
}

.arcade-credit {
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.5;
  padding: 6px 12px;
}

.arcade-credit a {
  color: #93c5fd;
}

.interior.open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Room cards rise gently into place as the interior opens — a soft settle
   instead of an instant swap. Motion-sensitive players get the plain fade. */
.interior .room2,
.interior .room {
  transform: translateY(10px) scale(0.985);
  transition: transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.interior.open .room2,
.interior.open .room {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .interior .room2,
  .interior .room { transform: none; transition: none; }
}

/* While a room is open, world-level UI stands down everywhere (not just on
   phones): no interaction prompt, Sites toggle, or arrival banner piling on
   top of the shop — one thing on screen at a time. */
.town-map:has(.interior.open) .interaction-prompt,
.town-map:has(.interior.open) .mobile-directory-toggle,
body.room-open .world-arrival {
  display: none;
}

.room2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.35);
  pointer-events: auto;
}

.room2-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--room-accent, #2563eb) 7%, #ffffff);
}

.room2-head .district-icon {
  width: 44px;
  height: 44px;
  font-size: 14px;
}

/* the head's button group (Rewards / Design / Leave) lives in one flex cell
   so extra buttons wrap INSIDE it instead of falling into a stray grid row
   (the shop's Leave button was clipping off-screen on phones) */
.room2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.room2-title h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.05;
}

.home-floor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.home-floor-tab {
  min-width: 88px;
  padding: 5px 8px;
  border: 1.5px solid #d8e0ec;
  border-radius: 7px;
  background: #ffffff;
  color: #243044;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(16, 24, 40, 0.08);
}

.home-floor-tab span,
.home-floor-tab small {
  display: block;
  white-space: nowrap;
}

.home-floor-tab span {
  font-size: 10.5px;
  font-weight: 900;
}

.home-floor-tab small {
  margin-top: 1px;
  color: #64748b;
  font-size: 9px;
  font-weight: 750;
}

.home-floor-tab.active {
  border-color: #101828;
  background: #fff7d6;
  box-shadow: 0 0 0 3px rgba(255, 215, 102, 0.22);
}

.room2-body {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr); /* site list left, shop floor right */
  grid-template-rows: minmax(0, 1fr); /* children never outgrow the room */
  gap: 0;
  overflow: hidden;
  /* game-interior bones: dark back wall band + baseboard + plank floor */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--room-accent, #2563eb) 30%, #352d44), color-mix(in srgb, var(--room-accent, #2563eb) 16%, #453c58)) top / 100% 88px no-repeat,
    linear-gradient(#101828, #101828) 0 88px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, #b98d5f 0 44px, #a87f54 44px 46px, #c2966a 46px 90px, #a87f54 90px 92px);
  background-color: #b98d5f;
}

.home-room .room2-body {
  background:
    linear-gradient(180deg, #2b4258, #445b68) top / 100% 92px no-repeat,
    linear-gradient(#13202e, #13202e) 0 92px / 100% 3px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.08)),
    repeating-linear-gradient(45deg, #8a6543 0 34px, #6f4d32 34px 37px, #9b7450 37px 70px, #6f4d32 70px 73px);
  background-color: #8a6543;
}

.home-room .room2-body[data-home-floor="0"] {
  background:
    linear-gradient(180deg, #1f2937, #374151) top / 100% 92px no-repeat,
    linear-gradient(#0f172a, #0f172a) 0 92px / 100% 3px no-repeat,
    radial-gradient(ellipse at 58% 52%, rgba(96, 165, 250, 0.12), transparent 48%),
    repeating-linear-gradient(45deg, #4b5563 0 34px, #374151 34px 37px, #5b6472 37px 70px, #374151 70px 73px);
}

.home-room .room2-body[data-home-floor="2"] {
  background:
    linear-gradient(180deg, #4b3a5f, #6f5b75) top / 100% 92px no-repeat,
    linear-gradient(#2d243a, #2d243a) 0 92px / 100% 3px no-repeat,
    repeating-linear-gradient(45deg, #94785d 0 34px, #72533a 34px 37px, #a88a68 37px 70px, #72533a 70px 73px);
}

.home-room .room2-body[data-home-floor="3"] {
  background:
    linear-gradient(180deg, #0e7490, #5ea6bb) top / 100% 92px no-repeat,
    linear-gradient(#134e4a, #134e4a) 0 92px / 100% 3px no-repeat,
    radial-gradient(ellipse at 28% 58%, rgba(103, 232, 249, 0.18), transparent 42%),
    repeating-linear-gradient(45deg, #7aa78d 0 34px, #5f8b74 34px 37px, #92baa0 37px 70px, #5f8b74 70px 73px);
}

.home-room .room2-body[data-home-floor="4"] {
  background:
    linear-gradient(180deg, #0f3f66, #3b82a0) top / 100% 92px no-repeat,
    linear-gradient(#083344, #083344) 0 92px / 100% 3px no-repeat,
    radial-gradient(ellipse at 74% 22%, rgba(254, 240, 138, 0.3), transparent 22%),
    repeating-linear-gradient(45deg, #86a68c 0 34px, #6c8e74 34px 37px, #9fbe9b 37px 70px, #6c8e74 70px 73px);
}

/* ---- Zombie mode: a sickly green pall falls over the world while it's on ---- */
body[data-zombie="on"] .vr-vignette {
  background: radial-gradient(ellipse at center, rgba(70, 130, 44, 0.05) 38%, rgba(16, 44, 14, 0.58) 100%);
  animation: zombiePulse 2.6s ease-in-out infinite;
}
@keyframes zombiePulse {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}
#zombieButton[aria-pressed="true"] {
  background: #3a6b2a;
  border-color: #5a9a3e;
  color: #eafbe0;
  box-shadow: 0 0 0 1px rgba(120, 200, 90, 0.4), 0 0 14px rgba(90, 170, 60, 0.5);
}

/* ---- Welcome ribbon: one slim line so the house itself is what you see ---- */
.home-room .home-ribbon {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 8px;
  padding: 7px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2b2333, #201a2a);
  border: 1px solid rgba(255, 210, 150, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.home-room .ribbon-greeting {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  min-width: 0;
  flex: 1 1 220px;
}
.home-room .ribbon-kicker {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffcf9a;
  font-weight: 800;
}
.home-room .ribbon-text {
  min-width: 0;
  color: #e6dccd;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-room .ribbon-chips { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.home-room .ribbon-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 240, 220, 0.08);
  border: 1px solid rgba(255, 220, 180, 0.16);
}
.home-room .home-nook-button { flex: 0 0 auto; }
.home-room .ribbon-count { opacity: 0.75; font-weight: 700; }
@media (max-width: 720px) {
  .home-room .ribbon-greeting { flex-basis: 100%; }
  .home-room .ribbon-chip .keepsake-value { font-size: 12px; }
}

/* ---- The hearth nook: a place you step into, then step back out of ---- */
.home-room .home-nook {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
}
.home-room .home-nook[hidden] { display: none; }
.home-room .home-nook-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 16, 0.62);
  backdrop-filter: blur(2px);
}
.home-room .home-nook-card {
  position: relative;
  width: min(760px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 12px 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #251e2e, #191424);
  border: 1px solid rgba(255, 210, 150, 0.26);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.home-room .home-nook-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.home-room .home-nook-title {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #ffcf9a; font-weight: 800;
}
.home-room .home-nook .home-hearth { margin: 0; }
.home-room .home-nook .home-mantel { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .home-room .home-nook-backdrop { backdrop-filter: none; }
}

/* ---- The bedside: rest, or let the dream come ---- */
.home-room .home-nook-card--bed { width: min(520px, 100%); }
.home-room .home-bedside { display: grid; gap: 10px; }
.home-room .bedside-line {
  margin: 0; font-size: 14px; line-height: 1.5; color: #f3e6d4;
}
.home-room .bedside-warn {
  margin: 0; font-size: 12px; line-height: 1.5; font-style: italic;
  color: #b9a9c8; border-left: 2px solid rgba(140, 190, 120, 0.45); padding-left: 10px;
}
.home-room .bedside-choices { display: grid; gap: 8px; margin-top: 2px; }
.home-room .bedside-choices .button {
  display: grid; grid-template-columns: 28px 1fr; align-items: center;
  gap: 2px 10px; width: 100%; text-align: left; padding: 10px 12px; height: auto;
}
.home-room .bedside-glyph { grid-row: 1 / span 2; font-size: 20px; line-height: 1; }
.home-room .bedside-label { font-size: 13px; font-weight: 700; }
.home-room .bedside-choices small {
  font-size: 11px; line-height: 1.4; color: #b9aec4; font-weight: 400;
}
.home-room .bedside-sleep {
  border-color: rgba(140, 190, 120, 0.4);
  background: linear-gradient(180deg, rgba(52, 66, 46, 0.9), rgba(30, 34, 28, 0.9));
}
.home-room .bedside-sleep:hover { border-color: rgba(160, 210, 130, 0.7); }
/* the warm dream sits beside the wrong one, and has to look like the opposite
   of it at a glance - amber lamplight instead of sickly green. */
.home-room .bedside-seek {
  border-color: rgba(240, 190, 120, 0.4);
  background: linear-gradient(180deg, rgba(72, 58, 40, 0.9), rgba(36, 30, 24, 0.9));
}
.home-room .bedside-seek:hover { border-color: rgba(255, 214, 150, 0.75); }

/* Falling asleep should read as falling asleep, not as a jump cut: the veil
   covers leaving the house, the metro ride and the horde switching on. */
.dream-veil {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, #14210f, #05070a 70%);
  opacity: 0; pointer-events: none;
  transition: opacity 900ms ease;
}
.dream-veil.is-falling { opacity: 1; pointer-events: auto; }
.dream-veil[hidden] { display: none; }
.dream-veil-line {
  margin: 0; font-size: 15px; letter-spacing: 0.14em; text-transform: lowercase;
  color: #9fbb8c; opacity: 0; transition: opacity 700ms ease 300ms;
}
.dream-veil.is-falling .dream-veil-line { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .dream-veil, .dream-veil-line { transition-duration: 120ms; transition-delay: 0ms; }
}

/* Hide & seek gets the same vignette treatment as the zombies, in the opposite
   temperature: warm lamplight closing in instead of cold rot, and no pulse,
   because nothing here is hunting you. */
body[data-seek="on"] .vr-vignette {
  background: radial-gradient(ellipse at center, rgba(255, 214, 150, 0.05) 40%, rgba(70, 44, 16, 0.5) 100%);
}

/* The bed is how you get INTO a dream, so there has to be one obvious way out
   that does not involve finding the menu again. Shown only while a dream runs. */
.dream-chip {
  position: fixed; z-index: 88;
  left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  padding: 8px 14px; height: auto;
  font: 700 12px/1.2 Inter, sans-serif; letter-spacing: 0.02em;
  color: #fff6e6; cursor: pointer;
  border-radius: 999px;
  border: 1px solid rgba(255, 214, 150, 0.5);
  background: linear-gradient(180deg, rgba(58, 44, 30, 0.94), rgba(28, 22, 18, 0.94));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.dream-chip:hover { border-color: rgba(255, 226, 180, 0.85); }
.dream-chip:focus-visible { outline: 2px solid #ffd79a; outline-offset: 2px; }
.dream-chip[hidden] { display: none; }
.dream-chip[data-dream="zombie"] {
  color: #eafbe0;
  border-color: rgba(120, 200, 90, 0.5);
  background: linear-gradient(180deg, rgba(38, 54, 32, 0.94), rgba(20, 28, 18, 0.94));
}

/* ---- Welcome Home hearth: the house greets you by the hour ---- */
.home-room .home-hearth {
  position: relative;
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr;
  gap: 16px;
  align-items: stretch;
  margin: 2px 0 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    radial-gradient(120% 150% at 10% 0%, rgba(255, 214, 150, 0.26), transparent 55%),
    linear-gradient(180deg, #2b2333, #1f1a28);
  border: 1px solid rgba(255, 210, 150, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 30px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.home-room .hearth-window {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 120px;
  border: 3px solid rgba(58, 43, 30, 0.9);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}
.home-room .hearth-window .sky { position: absolute; inset: 0; transition: background 1.2s ease; }
.home-hearth[data-sky="dawn"] .sky { background: linear-gradient(180deg, #ffd6a5, #ffb3a7 55%, #cdd9ff); }
.home-hearth[data-sky="day"] .sky { background: linear-gradient(180deg, #8fc7ff, #cfe9ff 70%, #eaf6ff); }
.home-hearth[data-sky="dusk"] .sky { background: linear-gradient(180deg, #392b57, #c96f8a 60%, #ffb27a); }
.home-hearth[data-sky="night"] .sky { background: linear-gradient(180deg, #0b1030, #1b2450 72%, #2a2f57); }
.home-room .hearth-window .sun-moon {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  left: 22px; top: 22px; background: #fff4cf;
  box-shadow: 0 0 22px 6px rgba(255, 240, 190, 0.55);
}
.home-hearth[data-sky="dusk"] .sun-moon { left: auto; right: 22px; top: 46px; background: #ffd7a0; box-shadow: 0 0 20px 6px rgba(255, 190, 140, 0.5); }
.home-hearth[data-sky="night"] .sun-moon { background: #e8ecff; box-shadow: 0 0 16px 4px rgba(210, 220, 255, 0.4); }
.home-room .hearth-window .stars {
  position: absolute; inset: 0; opacity: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 66% 22%, #fff, transparent),
    radial-gradient(1px 1px at 82% 52%, #fff, transparent),
    radial-gradient(1px 1px at 40% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 52% 40%, #fff, transparent);
  transition: opacity 1.2s ease;
}
.home-hearth[data-sky="night"] .stars { opacity: 0.9; }
.home-room .hearth-window .rain {
  position: absolute; inset: -8px 0 0; opacity: 0;
  background: repeating-linear-gradient(105deg, rgba(200, 220, 255, 0.35) 0 1px, transparent 1px 7px);
}
.home-hearth[data-weather="rain"] .rain { opacity: 0.5; animation: hearthRain 0.55s linear infinite; }
.home-room .hearth-window .sill { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(#7c5b3e, #5a3f24); }
@keyframes hearthRain { from { transform: translateY(-7px); } to { transform: translateY(0); } }

.home-room .hearth-fire { position: absolute; right: 16px; bottom: 12px; width: 46px; height: 40px; pointer-events: none; }
.home-room .hearth-fire .log { position: absolute; bottom: 0; left: 4px; right: 4px; height: 8px; border-radius: 5px; background: linear-gradient(#6b4a2f, #49301f); }
.home-room .hearth-fire .flame {
  position: absolute; bottom: 6px; left: 50%; width: 16px; height: 26px; margin-left: -8px;
  border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
  background: linear-gradient(#ffe37a, #ff8a3c 60%, #ff5a2c);
  transform-origin: 50% 92%; animation: hearthFlame 1.1s ease-in-out infinite;
}
.home-room .hearth-fire .flame.f2 { width: 9px; height: 16px; margin-left: -4px; background: linear-gradient(#fff2b0, #ffb04a); animation-duration: 0.8s; }
.home-room .hearth-fire .glow { position: absolute; inset: -30px -34px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 160, 80, 0.26), transparent 70%); animation: hearthGlow 3s ease-in-out infinite; }
@keyframes hearthFlame { 0%, 100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.14) scaleX(0.9); } }
@keyframes hearthGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }

.home-room .hearth-copy { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.home-room .hearth-kicker { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #ffcf9a; font-weight: 800; }
.home-room .hearth-greeting { margin: 0; color: #f6efe4; font-size: 15px; line-height: 1.42; font-weight: 600; }
.home-room .hearth-shelf { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.home-room .keepsake { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 240, 220, 0.08); border: 1px solid rgba(255, 220, 180, 0.16); }
.home-room .keepsake-icon { font-size: 13px; line-height: 1; }
.home-room .keepsake-value { color: #ffe9c9; font-weight: 800; font-size: 13px; white-space: nowrap; }
.home-room .keepsake-label { color: #cdbfad; font-size: 12px; }
@media (max-width: 720px) {
  .home-room .home-hearth { grid-template-columns: 1fr; }
  .home-room .hearth-window { min-height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-room .hearth-fire .flame,
  .home-room .hearth-fire .glow,
  .home-hearth[data-weather="rain"] .rain { animation: none; }
}

/* ---- Memory Wall: framed postcards of the worlds you've explored ---- */
.home-room .home-mantel {
  margin: 0 0 14px;
  padding: 14px 16px 12px;
  border-radius: 0 0 18px 18px;
  margin-top: -12px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #241d2b, #1c1725);
  border: 1px solid rgba(255, 210, 150, 0.16);
  border-top: 0;
}
.home-room .mantel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.home-room .mantel-title { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #ffcf9a; font-weight: 800; }
.home-room .mantel-count { font-size: 12px; color: #cdbfad; font-weight: 700; }
.home-room .postcard-wall { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-start; }
.home-room .postcard {
  width: 78px; flex: 0 0 auto; transform: rotate(var(--tilt, 0deg));
  transition: transform 0.18s ease, filter 0.18s ease;
  cursor: default;
}
.home-room .postcard:hover { transform: rotate(0deg) translateY(-3px) scale(1.05); z-index: 2; }
.home-room .pc-scene {
  position: relative; height: 58px; border-radius: 7px; overflow: hidden;
  background: linear-gradient(160deg, var(--from, #8fb0c8), var(--to, #33465a));
  border: 4px solid #f4ece0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  display: grid; place-items: center;
}
.home-room .pc-emoji { font-size: 26px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.home-room .pc-star {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, #ffe37a, #ffb02e); color: #6b3c00; font-size: 12px; line-height: 20px; text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.home-room .pc-label {
  margin-top: 6px; font-size: 10.5px; line-height: 1.15; text-align: center; color: #efe6d6; font-weight: 700;
  max-width: 78px; overflow: hidden; text-overflow: ellipsis;
}
.home-room .postcard.locked .pc-scene {
  background: repeating-linear-gradient(135deg, #2c2733 0 6px, #262130 6px 12px);
  border-color: #4a4353; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.home-room .postcard.locked .pc-lock { font-size: 22px; color: #6a6276; font-weight: 800; }
.home-room .postcard.locked .pc-label { color: #7c7488; font-style: italic; font-weight: 600; }
.home-room .postcard.locked:hover { transform: rotate(0deg) translateY(-1px); }
.home-room .mantel-note { margin: 12px 0 0; font-size: 12px; color: #b3a9be; }
@media (max-width: 720px) {
  .home-room .postcard { width: 64px; }
  .home-room .pc-scene { height: 48px; }
  .home-room .pc-emoji { font-size: 22px; }
  .home-room .pc-label { max-width: 64px; }
}

.home-room .room2-head {
  background:
    linear-gradient(90deg, rgba(224, 102, 154, 0.14), rgba(79, 159, 221, 0.12)),
    #ffffff;
}

/* warm light pool over the counter + darker corners */
.room2-body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 320px 150px at 50% 70px, rgba(255, 240, 200, 0.17), transparent 70%),
    radial-gradient(ellipse at 50% 58%, transparent 52%, rgba(18, 12, 30, 0.3) 100%);
}

/* the whole catalog lives on the left, sized so it ALWAYS fits the room —
   1 sub-column up to 6 sites, 2 beyond, compact rows beyond 8 */
.home-room .room2-body::after {
  background:
    radial-gradient(ellipse 360px 160px at 58% 72px, rgba(255, 239, 186, 0.19), transparent 70%),
    radial-gradient(ellipse 260px 110px at 78% 74%, rgba(79, 159, 221, 0.16), transparent 72%),
    radial-gradient(ellipse at 50% 58%, transparent 57%, rgba(10, 15, 25, 0.26) 100%);
}

.home-room-zone {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  border: 2px solid rgba(16, 24, 40, 0.74);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
    var(--zone-bg, #d7b98e);
  box-shadow:
    inset 0 0 0 3px rgba(255, 253, 246, 0.2),
    0 4px 0 rgba(16, 24, 40, 0.18);
  pointer-events: none;
}

.home-room-zone::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1.5px dashed rgba(16, 24, 40, 0.24);
  border-radius: 5px;
}

.home-room-zone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 36px;
  height: 15px;
  transform: translateX(-50%);
  border: 2px solid rgba(16, 24, 40, 0.7);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgba(255, 253, 246, 0.82);
}

.home-room-zone span {
  position: absolute;
  left: 8px;
  top: 6px;
  z-index: 1;
  padding: 2px 6px;
  border: 1.5px solid rgba(16, 24, 40, 0.74);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.9);
  color: #172033;
  font-size: 8.5px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(16, 24, 40, 0.12);
}

.home-room-zone--night { --zone-bg: linear-gradient(135deg, #172554, #111827); }
.home-room-zone--play { --zone-bg: linear-gradient(135deg, #312e81, #0f766e); }
.home-room-zone--warm { --zone-bg: linear-gradient(135deg, #c08457, #a16207); }
.home-room-zone--rose { --zone-bg: linear-gradient(135deg, #f0abfc, #fb7185); }
.home-room-zone--water { --zone-bg: linear-gradient(135deg, #67e8f9, #2563eb); }
.home-room-zone--ocean { --zone-bg: linear-gradient(135deg, #0e7490, #1e3a8a); }
.home-room-zone--cream { --zone-bg: linear-gradient(135deg, #fde68a, #f8fafc); }
.home-room-zone--gold { --zone-bg: linear-gradient(135deg, #fcd34d, #b45309); }
.home-room-zone--library { --zone-bg: linear-gradient(135deg, #7c2d12, #334155); }
.home-room-zone--garden { --zone-bg: linear-gradient(135deg, #86efac, #15803d); }
.home-room-zone--gallery { --zone-bg: linear-gradient(135deg, #f8fafc, #93c5fd); }
.home-room-zone--suite { --zone-bg: linear-gradient(135deg, #fbcfe8, #7c3aed); }
.home-room-zone--study { --zone-bg: linear-gradient(135deg, #cbd5e1, #475569); }
.home-room-zone--music { --zone-bg: linear-gradient(135deg, #fef3c7, #7c2d12); }
.home-room-zone--sky { --zone-bg: linear-gradient(135deg, #bae6fd, #38bdf8); }
.home-room-zone--studio { --zone-bg: linear-gradient(135deg, #fff7ed, #60a5fa 52%, #f87171); }

.home-feature {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  image-rendering: pixelated;
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.home-feature.is-active {
  filter: brightness(1.16) saturate(1.15);
  transform: translateY(-1px);
}

/* you are standing on it - the house answers your feet, not just your mouse */
.home-feature.stand-near,
.iprop-feature.stand-near {
  filter: brightness(1.2) saturate(1.2);
  box-shadow: 0 0 0 3px rgba(255, 233, 168, 0.85), 0 0 16px rgba(255, 196, 84, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .home-feature { transition: none; }
}

.home-feature--rug {
  border: 3px solid #43281d;
  border-radius: 48% 48% 12px 12px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 247, 210, 0.22), transparent 34%),
    linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, 0.18) 42% 45%, transparent 45% 55%, rgba(255, 255, 255, 0.18) 55% 58%, transparent 58%),
    repeating-linear-gradient(0deg, #7f1d1d 0 16px, #9f3f2f 16px 19px, #14532d 19px 34px, #0f3f28 34px 37px);
  box-shadow: inset 0 0 0 4px rgba(255, 239, 186, 0.22), 0 7px 0 rgba(16, 24, 40, 0.26);
  opacity: 0.88;
}

.home-feature--hearth {
  border: 3px solid #13202e;
  border-bottom-width: 7px;
  border-radius: 6px 6px 3px 3px;
  background:
    radial-gradient(circle at 50% 76%, #ffd36a 0 7px, #ef4444 8px 15px, transparent 16px),
    linear-gradient(90deg, #6b3f2a 0 16px, #f2dcc0 16px 60px, #6b3f2a 60px);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.35);
  animation: home-firelight 1.2s ease-in-out infinite;
}

.home-feature--hearth::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 8px;
  height: 20px;
  border: 2px solid #13202e;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: #2a1d19;
}

.home-feature--theater {
  border: 3px solid #13202e;
  border-radius: 6px;
  background:
    radial-gradient(circle at 28% 76%, #ef4444 0 6px, transparent 7px),
    radial-gradient(circle at 50% 76%, #ef4444 0 6px, transparent 7px),
    radial-gradient(circle at 72% 76%, #ef4444 0 6px, transparent 7px),
    linear-gradient(180deg, #020617 0 58%, #7f1d1d 59% 75%, #450a0a 76%);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.38);
}

.home-feature--theater::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 8px;
  height: 22px;
  border: 2px solid #e2e8f0;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.32), transparent 54%),
    #0f172a;
  animation: home-screen 3.6s steps(4) infinite;
}

.home-feature--terrace {
  border: 3px solid #13202e;
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 0 46%, #13202e 46% 49%, transparent 49%),
    linear-gradient(180deg, #bfe3ff 0 43%, #4f9fdd 44% 66%, #74b85d 67%);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.32);
}

.home-feature--bar {
  border: 3px solid #13202e;
  border-radius: 7px;
  background:
    radial-gradient(circle at 24px 15px, #60a5fa 0 4px, transparent 5px),
    radial-gradient(circle at 46px 13px, #fbbf24 0 4px, transparent 5px),
    radial-gradient(circle at 68px 16px, #22c55e 0 4px, transparent 5px),
    linear-gradient(180deg, #f8fafc 0 14px, #6b3f2a 15px 100%);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.34);
}

.home-feature--bar::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 8px;
  height: 8px;
  border-radius: 4px;
  background: #3a2518;
  box-shadow: 0 -12px 0 rgba(255, 255, 255, 0.16);
}

.home-feature--gallery {
  border: 3px solid #13202e;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 0 22%, #13202e 22% 24%, transparent 24% 48%, #13202e 48% 50%, transparent 50% 74%, #13202e 74% 76%, transparent 76%),
    linear-gradient(180deg, #f8ead1 0 55%, #d6b285 56%);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.34);
}

.home-feature--gallery::before {
  content: "";
  position: absolute;
  inset: 7px 11px 14px;
  background:
    radial-gradient(circle at 18% 42%, #f43f5e 0 8px, transparent 9px),
    radial-gradient(circle at 51% 40%, #4f9fdd 0 9px, transparent 10px),
    radial-gradient(circle at 82% 42%, #22c55e 0 8px, transparent 9px);
}

.home-feature--aquarium {
  border: 4px solid #13202e;
  border-radius: 8px;
  background:
    radial-gradient(circle at 25% 55%, #fbbf24 0 4px, transparent 5px),
    radial-gradient(circle at 62% 44%, #fb7185 0 4px, transparent 5px),
    radial-gradient(circle at 78% 63%, #22c55e 0 3px, transparent 4px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 3px, transparent 3px 12px),
    linear-gradient(180deg, #93c5fd, #38bdf8);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.3);
  animation: home-water 2.4s linear infinite;
}

.home-feature--aquarium::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  height: 8px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.2);
}

.home-feature--aquarium::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 14px;
  height: 7px;
  border-radius: 50% 65% 65% 50%;
  background: #f97316;
  box-shadow: 42px 7px 0 #eab308, 78px -2px 0 #ef4444;
  animation: home-fish 4.5s ease-in-out infinite;
}

.home-feature--terrace::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 8px;
  height: 2px;
  background: #ffffff;
  box-shadow: 0 -10px 0 rgba(255, 255, 255, 0.75), 0 -20px 0 rgba(255, 255, 255, 0.55);
}

.home-feature--pool {
  border: 4px solid #f8fafc;
  border-radius: 9px;
  background:
    linear-gradient(90deg, transparent 0 31%, rgba(255, 255, 255, 0.55) 31% 33%, transparent 33% 64%, rgba(255, 255, 255, 0.55) 64% 66%, transparent 66%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0 4px, transparent 4px 13px),
    #4f9fdd;
  box-shadow: 0 4px 0 #93c5fd, 0 10px 14px rgba(16, 24, 40, 0.25);
  animation: home-water 2.8s linear infinite;
}

.home-feature--spa {
  border: 4px solid #e2e8f0;
  border-radius: 15px;
  background:
    radial-gradient(circle at 26% 44%, rgba(255, 255, 255, 0.82) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 58%, rgba(255, 255, 255, 0.75) 0 3px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 6px, transparent 6px 16px),
    #38bdf8;
  box-shadow: 0 4px 0 #94a3b8, 0 8px 13px rgba(16, 24, 40, 0.24);
}

.home-feature--spa::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -16px;
  height: 16px;
  background:
    radial-gradient(ellipse at 24% 100%, rgba(255, 255, 255, 0.66) 0 5px, transparent 7px),
    radial-gradient(ellipse at 54% 100%, rgba(255, 255, 255, 0.58) 0 5px, transparent 8px),
    radial-gradient(ellipse at 78% 100%, rgba(255, 255, 255, 0.54) 0 4px, transparent 7px);
  animation: home-steam 2s ease-in-out infinite;
}

.home-feature--piano {
  border: 3px solid #13202e;
  border-radius: 35px 16px 14px 12px;
  background:
    linear-gradient(90deg, #ffffff 0 35px, #101828 35px 38px, #ffffff 38px 46px, #101828 46px 49px, #ffffff 49px 58px, #101828 58px 61px, #ffffff 61px),
    linear-gradient(145deg, #111827 0 62%, #374151 63%);
  background-size: 70px 13px, auto;
  background-position: 8px 32px, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.4);
}

.home-feature--piano::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 16px;
  bottom: -11px;
  height: 8px;
  border-left: 3px solid #13202e;
  border-right: 3px solid #13202e;
}

.home-feature--library {
  border: 3px solid #13202e;
  border-radius: 6px;
  background:
    linear-gradient(90deg, #f97316 0 7px, #f8fafc 7px 11px, #2563eb 11px 17px, #22c55e 17px 24px, #facc15 24px 31px, #e0669a 31px 38px, #8b5cf6 38px 45px, #f8fafc 45px 49px, #14b8a6 49px 56px, #ef4444 56px 64px, #f97316 64px 72px, #f8fafc 72px),
    linear-gradient(180deg, transparent 0 13px, #13202e 13px 16px, transparent 16px 28px, #13202e 28px 31px, transparent 31px),
    #6b3f2a;
  background-size: 76px 12px, auto, auto;
  background-position: 8px 8px, 0 0, 0 0;
  background-repeat: repeat-x, no-repeat, no-repeat;
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.36);
}

.home-feature--library::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 7px;
  border-radius: 4px;
  background: #3a2518;
}

.home-feature--marina {
  border: 3px solid #13202e;
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 24%, #fff7d6 0 8px, transparent 9px),
    linear-gradient(180deg, #bde7ff 0 42%, #4f9fdd 43% 72%, #0f3f66 73%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 8px, transparent 8px 23px);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.34);
  overflow: hidden;
}

.home-feature--marina::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 22px;
  width: 54px;
  height: 15px;
  border-radius: 60% 70% 45% 45%;
  background:
    linear-gradient(90deg, #f8fafc 0 68%, #e2e8f0 69%),
    #f8fafc;
  box-shadow: 0 3px 0 #ef4444, 22px -10px 0 -4px #dbeafe;
}

.home-feature--marina::after {
  content: "";
  position: absolute;
  inset: 8px 10px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 4px;
  box-shadow: inset 36px 0 0 rgba(19, 32, 46, 0.34), inset -36px 0 0 rgba(19, 32, 46, 0.18);
}

.home-feature--pets {
  border: 3px solid #13202e;
  border-radius: 14px 14px 7px 7px;
  background:
    radial-gradient(circle at 23% 58%, #c68c59 0 8px, transparent 9px),
    radial-gradient(circle at 68% 50%, #475569 0 7px, transparent 8px),
    radial-gradient(circle at 75% 45%, #f8fafc 0 3px, transparent 4px),
    linear-gradient(180deg, #ffedd5 0 30%, #d9b26d 31%);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.32);
}

.home-feature--pets::before {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 6px;
  height: 14px;
  border-radius: 999px;
  background: #e0669a;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.36);
}

.home-feature--pets::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #13202e;
  box-shadow: 43px -1px 0 #13202e, 52px 5px 0 #13202e;
}

.home-feature--dining {
  border: 3px solid #13202e;
  border-radius: 12px;
  background:
    radial-gradient(circle at 20% 50%, #f8fafc 0 9px, transparent 10px),
    radial-gradient(circle at 50% 50%, #f8fafc 0 9px, transparent 10px),
    radial-gradient(circle at 80% 50%, #f8fafc 0 9px, transparent 10px),
    linear-gradient(90deg, transparent 0 15%, #3a2518 15% 18%, transparent 18% 82%, #3a2518 82% 85%, transparent 85%),
    linear-gradient(180deg, #8b5a2b, #5d3a1f);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.34);
}

.home-feature--dining::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  bottom: 18px;
  border: 2px solid rgba(255, 247, 214, 0.5);
  border-radius: 999px;
}

.home-feature--game {
  border: 3px solid #13202e;
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 28%, #ef4444 0 6px, transparent 7px),
    radial-gradient(circle at 46% 28%, #22c55e 0 6px, transparent 7px),
    radial-gradient(circle at 68% 28%, #3b82f6 0 6px, transparent 7px),
    linear-gradient(180deg, #111827 0 56%, #475569 57%);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.42);
}

.home-feature--game::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 13px;
  height: 24px;
  border: 2px solid #e2e8f0;
  border-radius: 5px;
  background:
    linear-gradient(90deg, #facc15 0 34%, #22c55e 34% 67%, #38bdf8 67%),
    #0f172a;
}

.home-feature--studio {
  border: 3px solid #13202e;
  border-radius: 8px;
  background:
    linear-gradient(135deg, transparent 0 48%, #13202e 48% 52%, transparent 52%),
    radial-gradient(circle at 30% 72%, #ef4444 0 7px, transparent 8px),
    radial-gradient(circle at 50% 68%, #facc15 0 7px, transparent 8px),
    radial-gradient(circle at 70% 72%, #3b82f6 0 7px, transparent 8px),
    linear-gradient(180deg, #fff7ed 0 58%, #d6b285 59%);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.34);
}

.home-feature--observatory {
  border: 3px solid #13202e;
  border-radius: 50% 50% 12px 12px;
  background:
    radial-gradient(circle at 50% 28%, #fef08a 0 7px, transparent 8px),
    radial-gradient(circle at 27% 36%, #dbeafe 0 3px, transparent 4px),
    radial-gradient(circle at 72% 46%, #dbeafe 0 3px, transparent 4px),
    linear-gradient(180deg, #172554 0 56%, #e2e8f0 57%);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.4);
}

.home-feature--observatory::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 30px;
  width: 58px;
  height: 10px;
  border-radius: 999px;
  background: #334155;
  transform: rotate(-24deg);
  box-shadow: inset 0 0 0 2px #e0f2fe;
}

.home-feature--yoga {
  border: 3px solid #13202e;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 38%, #fef08a 0 13px, transparent 14px),
    radial-gradient(ellipse at 50% 76%, rgba(255, 255, 255, 0.48), transparent 45%),
    repeating-linear-gradient(90deg, #86efac 0 20px, #6ee7b7 20px 24px);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.28);
}

.home-room-label {
  position: absolute;
  z-index: 11;
  padding: 3px 7px;
  border: 1.5px solid #101828;
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.95);
  color: #1c2740;
  font-size: 9.5px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 3px 0 rgba(16, 24, 40, 0.18);
}

.home-floor-banner {
  position: absolute;
  z-index: 12;
  width: 280px;
  padding: 6px 10px;
  border: 2px solid #101828;
  border-radius: 10px;
  background: rgba(255, 253, 246, 0.96);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.22);
  pointer-events: none;
}

.home-floor-banner strong,
.home-floor-banner span {
  display: block;
}

.home-decor-palette {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.home-decor-swatch {
  width: 23px;
  height: 23px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.18);
  cursor: pointer;
}

.home-decor-swatch.active { outline: 2px solid #101828; outline-offset: 2px; }
.home-decor-swatch--classic { background: #c59a62; }
.home-decor-swatch--coastal { background: #58b6c7; }
.home-decor-swatch--modern { background: #596273; }
.home-decor-swatch--garden { background: #5aa568; }

.home-design-button.active {
  border-color: #101828;
  background: #ffdf73;
  color: #101828;
}

.home-furniture {
  position: absolute;
  z-index: 13;
  display: grid;
  place-items: end center;
  width: 68px;
  height: 68px;
  transform: translate(-34px, -34px);
  border: 2px solid transparent;
  border-radius: 7px;
  pointer-events: none;
  touch-action: none;
}

.home-furniture img {
  max-width: 44px;
  max-height: 44px;
  image-rendering: pixelated;
  transform: scale(1.45);
  filter: drop-shadow(0 3px 2px rgba(15, 23, 42, 0.42));
  pointer-events: none;
}

.home-furniture > span {
  display: none;
  position: absolute;
  bottom: -14px;
  padding: 2px 5px;
  border-radius: 4px;
  background: #101828;
  color: #ffffff;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}

.home-furniture > button {
  display: none;
  position: absolute;
  top: -9px;
  right: -9px;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #be123c;
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
  line-height: 18px;
  cursor: pointer;
}

.home-furniture.is-designing {
  border-color: #ffffff;
  outline: 2px dashed #0f8294;
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.28);
  pointer-events: auto;
  cursor: grab;
}

.home-furniture.is-designing > span,
.home-furniture.is-designing > button { display: block; }
.home-furniture.is-dragging { cursor: grabbing; transform: translate(-34px, -34px) scale(1.06); }

.home-design-tray {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(440px, calc(100% - 20px));
  min-height: 50px;
  padding: 6px 8px;
  overflow-x: auto;
  border: 2px solid #101828;
  border-radius: 8px;
  background: rgba(255, 253, 246, 0.97);
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.25);
}

.home-design-tray > strong,
.home-design-tray > span {
  flex: 0 0 auto;
  color: #344054;
  font-size: 9px;
  font-weight: 850;
}

.home-design-tray > button {
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 40px;
  padding: 3px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}

.home-design-tray img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
}

.home-design-tray button span {
  max-width: 52px;
  overflow: hidden;
  color: #344054;
  font-size: 7px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#roomBody[data-home-theme="classic"] { --home-theme: #b7793f; --home-theme-soft: #fff3df; }
#roomBody[data-home-theme="coastal"] { --home-theme: #0f8294; --home-theme-soft: #e5fbff; }
#roomBody[data-home-theme="modern"] { --home-theme: #374151; --home-theme-soft: #eef0f3; }
#roomBody[data-home-theme="garden"] { --home-theme: #287a47; --home-theme-soft: #eaf8e9; }

#roomBody[data-home-theme] .room2-floor {
  background-color: var(--home-theme-soft);
  border-color: var(--home-theme);
}

#roomBody[data-home-theme] .home-room-zone {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--home-theme) 34%, transparent);
}

#roomBody[data-home-theme] .home-room-label {
  border-color: var(--home-theme);
}

.home-floor-banner strong {
  font-size: 12px;
  font-weight: 950;
  color: #101828;
}

.home-floor-banner span {
  margin-top: 1px;
  color: #5b6472;
  font-size: 10px;
  font-weight: 760;
}

.home-stairs {
  position: absolute;
  z-index: 14;
  width: 104px;
  height: 58px;
  border: 3px solid #13202e;
  border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.22) 0 6px, transparent 6px 12px),
    linear-gradient(135deg, #7c4a24, #c28b56);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(16, 24, 40, 0.34), 0 0 0 4px rgba(255, 215, 102, 0.12);
}

.home-stairs::before {
  content: "";
  position: absolute;
  inset: 7px 14px;
  border-left: 4px solid rgba(16, 24, 40, 0.6);
  border-right: 4px solid rgba(16, 24, 40, 0.6);
}

.home-stairs span,
.home-stairs small {
  position: relative;
  z-index: 1;
  display: block;
  text-shadow: 0 1px 0 #101828;
}

.home-stairs span {
  font-size: 12px;
  font-weight: 950;
}

.home-stairs small {
  margin-top: 1px;
  font-size: 9px;
  font-weight: 850;
}

.home-stairs--up::after,
.home-stairs--down::after {
  position: absolute;
  right: 8px;
  top: 8px;
  color: #fff7d6;
  font-size: 18px;
  font-weight: 950;
}

.home-stairs--up::after {
  content: "^";
}

.home-stairs--down::after {
  content: "v";
}

@keyframes home-firelight {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

@keyframes home-screen {
  0% { box-shadow: inset 0 0 0 0 rgba(96, 165, 250, 0.12); }
  50% { box-shadow: inset 0 0 16px rgba(96, 165, 250, 0.38); }
  100% { box-shadow: inset 0 0 0 0 rgba(96, 165, 250, 0.12); }
}

@keyframes home-water {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 24px 0, 0 18px, 0 0; }
}

@keyframes home-fish {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(14px); }
}

@keyframes home-steam {
  0%, 100% { opacity: 0.42; transform: translateY(0); }
  50% { opacity: 0.78; transform: translateY(-4px); }
}

.room2-list {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(196px, 236px));
  gap: 10px;
  align-content: start;
  padding: 96px 10px 14px 12px;
  min-height: 0;
  overflow-y: auto; /* worst case the catalog scrolls — it never pushes the EXIT away */
}

.room2-list.compact {
  gap: 7px;
  grid-template-columns: repeat(var(--cols, 1), minmax(160px, 200px));
}

.room2-list.compact .site-row {
  padding: 4px 8px;
}

.room2-list.compact .site-note {
  display: none;
}

.journal-record { color: #a16207; font-weight: 900; }

/* Book of the Day: the Library's daily featured classic, spanning the shelf */
.book-of-day {
  display: flex;
  grid-column: 1 / -1;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 2px solid #7a5230;
  border-radius: 8px;
  background: linear-gradient(120deg, #fdf3df, #f8e7c8);
  box-shadow: 0 4px 0 #7a5230;
}

.book-of-day .bod-icon { font-size: 22px; }

.book-of-day .bod-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.book-of-day .bod-kicker {
  color: #8a5a2b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.book-of-day strong { font-size: 13px; color: #2a1c0d; }

.book-of-day small { color: #6d4d28; font-size: 11px; }

/* site rows as merchandise display tables */
.room2 .site-row {
  position: relative;
  z-index: 1;
  border: 2px solid #101828;
  background: #fffdf6;
  box-shadow: 0 5px 0 #7a5230, 0 9px 12px rgba(40, 24, 8, 0.35);
  cursor: pointer;
}

.room2 .site-row .default-label {
  align-self: center;
}

/* compact 3-col grids (boardwalk): the "Default" text label crushed the
   first card's title to "S…" — show a corner star instead so the name
   keeps the whole column (July 11 tablet QA) */
.room2-list.compact .site-row .default-label {
  position: absolute;
  top: -7px;
  right: -7px;
  padding: 1px 4px;
  border: 1.5px solid #101828;
  border-radius: 999px;
  font-size: 0;
  line-height: 1;
}

.room2-list.compact .site-row .default-label::after {
  content: "★";
  font-size: 10px;
}

/* home rooms: the floating room-name pills (z 11-12) were rendering OVER
   the keeper's dialogue box and its Tip/Story/Gossip buttons on tablets —
   the active dialogue always wins, and the EXIT door still outranks it */
.home-room .dialogue-box { z-index: 16; }
.home-room .room2-exit { z-index: 17; }

.room2 .site-row.stand-near {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.room2 .site-row.zap {
  animation: rowzap 0.55s ease;
}

@keyframes rowzap {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
  35% { transform: scale(1.04); box-shadow: 0 0 0 9px rgba(59, 130, 246, 0); }
  100% { transform: scale(1); }
}

.room2-floor {
  position: relative;
}

/* runner rug across the shop floor toward the door */
.room2-floor::before {
  content: "";
  position: absolute;
  inset: 96px 16% 4px;
  border: 3px solid #6d3532;
  border-radius: 5px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 4px, transparent 4px 22px),
    #9a4f43;
  box-shadow: inset 0 0 0 2px #b8695c, 0 2px 4px rgba(40, 24, 8, 0.3);
}

.room2-exit {
  position: absolute;
  z-index: 8; /* the door outranks even the dialogue box — always findable */
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px 6px;
  border: 2px solid #101828;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #3a2a18;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 -14px 22px rgba(255, 236, 190, 0.28);
}

/* pixel furniture props + windows */
.iprop {
  position: absolute;
  image-rendering: pixelated;
  transform: scale(var(--s, 2));
  transform-origin: top left;
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(15, 23, 42, 0.4));
}

.iprop-feature {
  pointer-events: auto;
  cursor: pointer;
  border-radius: 3px;
  transition: filter 160ms ease, transform 160ms ease;
}

.iprop-feature:hover,
.iprop-feature:focus-visible,
.iprop-feature.is-active {
  filter: drop-shadow(0 3px 2px rgba(15, 23, 42, 0.4)) drop-shadow(0 0 8px rgba(255, 215, 102, 0.78));
}

.iprop-feature.is-active {
  transform: scale(var(--s, 2)) translateY(-1px);
}

.iwindow {
  position: absolute;
  top: 16px;
  z-index: 0;
  width: 36px;
  height: 30px;
  border: 3px solid #101828;
  border-radius: 4px;
  background:
    linear-gradient(transparent 0 12px, #101828 12px 15px, transparent 15px),
    linear-gradient(90deg, transparent 0 15px, #101828 15px 18px, transparent 18px),
    linear-gradient(180deg, #bfe3ff, #8fc7f2);
  box-shadow: 0 3px 0 rgba(16, 24, 40, 0.35);
  pointer-events: none;
}

.room-mat {
  position: absolute;
  width: 28px;
  height: 18px;
  border: 2px dashed #b7a888;
  border-radius: 6px;
  background: rgba(139, 92, 46, 0.08);
  pointer-events: none;
}

.room-mat.near {
  border-color: #3b82f6;
  animation: matpulse 0.9s ease-in-out infinite;
}

@keyframes matpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.05); }
}

.dom-avatar {
  position: absolute;
  z-index: 5;
  width: 44px;
  height: 88px;
  background-repeat: no-repeat;
  background-size: 132px 352px; /* 2.75x \u2014 rooms feel zoomed-in; site cards stay the same size */
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(15, 23, 42, 0.35));
}

.dom-avatar.grabbed {
  transform: scale(1.08);
}

/* the PLAYER is never hidden by anything — they render above props,
   counter, dialogue box, everything (they walk on top, never behind) */
.dom-avatar:not(.keeper) {
  z-index: 40;
}

.dom-avatar.keeper {
  pointer-events: auto;
  cursor: pointer;
}

.keeper-tag {
  position: absolute;
  z-index: 45;
  width: 148px;
  min-height: 28px;
  padding: 5px 7px;
  border: 2px solid #ffffff;
  border-radius: 6px;
  background: rgba(16, 24, 40, 0.82);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}
.keeper-tag:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }
.keeper-tag:has(+ .dialogue-box.show) { opacity: 0; pointer-events: none; }

@media (max-width: 720px), (pointer: coarse) {
  .keeper-tag {
    min-height: 42px;
    padding: 8px 9px;
    font-size: 11px;
  }
}

/* Compact game menu and the world-spanning Metro.
   The menu is available at EVERY width: the header keeps only Coins, Journal,
   and Profile, so the burger is the one honest door to everything else
   (Avatar, Errands, Quest, Town Hall, Routes, Immerse, Center...). Hiding it
   on desktop once made those controls unreachable - never again. */
.game-menu-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  margin-left: auto;
  border: 1px solid #9eabbc;
  border-radius: 6px;
  background: #fff;
  color: #1f2a3b;
  box-shadow: 0 2px 7px rgba(16, 24, 40, 0.12);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.game-menu-toggle:hover,
.game-menu-toggle:focus-visible { border-color: #16866f; background: #edf9f6; outline: 0; }

.game-menu-scrim { display: none; }

.game-menu-scrim:not([hidden]) {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 188;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(16, 24, 40, 0.46);
}

.game-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 190;
  display: block;
  width: min(370px, 94vw);
  height: 100dvh;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) 14px;
  border-left: 1px solid #aeb9c8;
  background: #f8fafc;
  box-shadow: -14px 0 36px rgba(16, 24, 40, 0.2);
  visibility: hidden;
  transform: translateX(104%);
  transition: transform 180ms ease, visibility 0s linear 180ms;
}

.game-menu-panel.open {
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}

.game-menu-help {
  margin: 14px 0 10px;
  padding: 9px 10px;
  border-left: 4px solid #d59b18;
  background: #fff8e6;
  color: #4a5568;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
}

.game-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.game-menu-grid + .game-menu-grid {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #d9e0e8;
}

.game-menu-label {
  margin: 14px 0 6px;
  padding-top: 10px;
  border-top: 1px solid #d9e0e8;
  color: #5b6b80;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.game-menu-help + .game-menu-label { border-top: 0; padding-top: 0; margin-top: 10px; }
.game-menu-label + .game-menu-grid { margin-top: 0; padding-top: 0; border-top: 0; }

.game-menu-grid button {
  min-width: 0;
  min-height: 43px;
  padding: 8px;
  border: 1px solid #bdc7d4;
  border-radius: 6px;
  background: #fff;
  color: #263248;
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.game-menu-grid button:hover,
.game-menu-grid button:focus-visible { border-color: #16866f; background: #edf9f6; outline: 0; }

.subway-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 18px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(16, 24, 40, 0.52);
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.subway-modal.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.subway-card {
  width: min(720px, 100%);
  max-height: min(86dvh, 760px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid #8e9bad;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 22px 60px rgba(16, 24, 40, 0.28);
}

.subway-menu-head,
.game-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.subway-menu-head h2,
.game-menu-head h2 { margin: 0; color: #1d2939; font-size: 21px; line-height: 1.15; }
.subway-intro { margin: 8px 0 14px; color: #5d697a; font-size: 12px; font-weight: 650; }

.game-menu-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #b6c0ce;
  border-radius: 6px;
  background: #fff;
  color: #263248;
  font-size: 18px;
  cursor: pointer;
}

.subway-destinations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.subway-destinations button {
  display: grid;
  min-width: 0;
  min-height: 64px;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #c3ccd8;
  border-left: 5px solid #16866f;
  border-radius: 7px;
  background: #fff;
  color: #263248;
  text-align: left;
  cursor: pointer;
}

.subway-destinations button:first-child { border-left-color: #d59b18; }
.subway-destinations button:hover,
.subway-destinations button:focus-visible { border-color: #16866f; background: #edf9f6; outline: 0; }
.subway-destinations button:disabled {
  border-color: #16866f;
  border-left-color: #16866f;
  background: #e5f5f1;
  color: #154f47;
  cursor: default;
}
.subway-destinations button[aria-current="location"]::after {
  content: "Current stop";
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  padding-left: 8px;
  color: #147064;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.subway-destinations button[aria-current="location"] { grid-template-columns: minmax(0, 1fr) auto; }
.subway-destinations strong { font-size: 13px; }
.subway-destinations span { color: #677487; font-size: 10px; font-weight: 650; }

.metro-ride {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #10151d;
  color: #fff;
}

.metro-ride[hidden] { display: none; }

.metro-tunnel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-block: clamp(28px, 8vh, 70px) solid #232b36;
  background: #111820;
}

.metro-light {
  position: absolute;
  top: 17%;
  width: clamp(44px, 8vw, 110px);
  height: 7px;
  border-radius: 2px;
  background: #dceef0;
  box-shadow: 0 0 18px rgba(198, 241, 241, 0.45);
  animation: metro-lights 540ms linear infinite;
}
.metro-light-one { left: 9%; }
.metro-light-two { left: 46%; animation-delay: -180ms; }
.metro-light-three { left: 82%; animation-delay: -360ms; }

.metro-rail {
  position: absolute;
  right: -4%;
  left: -4%;
  height: 5px;
  background: #677487;
  border-bottom: 2px solid #070a0e;
}
.metro-rail-one { bottom: 21%; }
.metro-rail-two { bottom: 15%; }

.metro-car {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr 1fr 1fr;
  align-items: center;
  width: clamp(270px, 52vw, 610px);
  height: clamp(96px, 21vh, 170px);
  padding: clamp(12px, 2vw, 24px);
  gap: clamp(8px, 1.6vw, 18px);
  border: 5px solid #0f5f58;
  border-bottom-width: 14px;
  border-radius: 8px 8px 4px 4px;
  background: #e8eceb;
  box-shadow: 0 18px 0 #090d12;
  transform: translate(-50%, -56%);
  animation: metro-car-ride 850ms ease-in-out both;
}

.metro-window,
.metro-door {
  display: block;
  width: 100%;
  height: 66%;
  border: 4px solid #20313c;
  border-radius: 3px;
  background: #75a9bb;
}
.metro-door { height: 92%; background: #cbd5d6; }

.metro-ride p {
  position: relative;
  z-index: 2;
  align-self: end;
  display: grid;
  gap: 3px;
  margin: 0 16px max(22px, env(safe-area-inset-bottom));
  padding: 8px 14px;
  border: 1px solid #5f6d7c;
  border-radius: 6px;
  background: #121923;
  text-align: center;
}
.metro-ride p span { color: #74d6c8; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.metro-ride p strong { font-size: clamp(14px, 3.8vw, 20px); }

@keyframes metro-lights {
  from { transform: translateX(18vw); }
  to { transform: translateX(-42vw); }
}

@keyframes metro-car-ride {
  0% { transform: translate(-88%, -56%); }
  30%, 70% { transform: translate(-50%, -56%); }
  100% { transform: translate(-12%, -56%); }
}

@media (max-width: 900px) {
  .stage-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
  }

  .game-menu-toggle { width: 44px; height: 44px; font-size: 23px; }

  .stage-actions,
  .control-strip { display: none !important; }

  .game-menu-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #9eabbc;
    border-radius: 6px;
    background: #fff;
    color: #1f2a3b;
    box-shadow: 0 2px 7px rgba(16, 24, 40, 0.12);
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
  }

  .game-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 188;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(16, 24, 40, 0.46);
  }

  .game-menu-scrim:not([hidden]) { display: block; }

  .game-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 190;
    display: block;
    width: min(370px, 94vw);
    height: 100dvh;
    overflow-y: auto;
    padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) 14px;
    border-left: 1px solid #aeb9c8;
    background: #f8fafc;
    box-shadow: -14px 0 36px rgba(16, 24, 40, 0.2);
    visibility: hidden;
    transform: translateX(104%);
    transition: transform 180ms ease, visibility 0s linear 180ms;
  }

  .game-menu-panel.open {
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
  }

  body.mobile-game-menu-open { overflow: hidden; }
  .game-menu-help {
    margin: 14px 0 10px;
    padding: 9px 10px;
    border-left: 4px solid #d59b18;
    background: #fff8e6;
    color: #4a5568;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
  }

  .game-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .game-menu-grid + .game-menu-grid {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #d9e0e8;
  }

  .game-menu-grid button {
    min-width: 0;
    min-height: 43px;
    padding: 8px;
    border: 1px solid #bdc7d4;
    border-radius: 6px;
    background: #fff;
    color: #263248;
    font-size: 11px;
    font-weight: 800;
    overflow-wrap: anywhere;
    cursor: pointer;
  }

  .game-menu-grid button:hover,
  .game-menu-grid button:focus-visible { border-color: #16866f; background: #edf9f6; outline: 0; }

  .town-map {
    height: clamp(340px, calc(100dvh - 176px), 650px);
    min-height: 340px;
  }
}

@media (max-width: 720px) {
  .town-map { height: clamp(340px, calc(100dvh - 140px), 700px); min-height: 340px; }
}

@media (min-width: 721px) and (max-width: 900px) {
  .town-map { height: clamp(390px, calc(100dvh - 160px), 820px); min-height: 390px; }
}

@media (max-width: 900px) and (max-height: 600px) {
  .app-shell { padding-block: 6px; }
  .topbar { margin-bottom: 5px; }
  .game-stage { padding: 7px; }
  .stage-head { margin-bottom: 5px; }
  .stage-head .kicker { display: none; }
  .stage-head h1 { font-size: 17px; }
  .game-menu-toggle { width: 36px; height: 36px; font-size: 20px; }
  .town-map { height: clamp(245px, calc(100dvh - 126px), 390px); min-height: 245px; }
}

@media (max-width: 600px) {
  .subway-modal { place-items: end stretch; padding: 0; }
  .subway-card {
    width: 100%;
    max-height: 88dvh;
    padding: 14px max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }
  .subway-menu-head h2 { font-size: 18px; }
  .subway-destinations { grid-template-columns: 1fr; }
  .subway-destinations button { min-height: 56px; }
}

/* Zelda-style bottom dialogue box: speaker stays visible, text never covers them */
.dialogue-box {
  position: absolute;
  bottom: 8px;
  right: 10px;
  left: auto;
  max-width: min(340px, 46%); /* docked bottom-right, near the clerk; list + EXIT stay clear */
  z-index: 7;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 2.5px solid #101828;
  border-radius: 10px;
  background: rgba(252, 250, 242, 0.97);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.35), inset 0 0 0 2px rgba(16, 24, 40, 0.08);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.dialogue-box.show {
  z-index: 50;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dlg-portrait {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 2px solid #101828;
  border-radius: 8px;
  background-color: #dcefdb;
  background-repeat: no-repeat;
  background-size: 132px 352px; /* sheet at 2.75x: head crop */
  background-position: -44px -3px;
  image-rendering: pixelated;
}

.dlg-copy {
  flex: 1;
  min-width: 0;
}

.dlg-name {
  display: block;
  margin-bottom: 2px;
  color: #6b4b12;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dialogue-box .kb-text {
  font-size: 13px;
  font-weight: 720;
  color: #1c2740;
  line-height: 1.35;
}

.dialogue-box .kb-chips {
  flex: 0 0 auto;
  flex-direction: column;
  margin-top: 0;
}

.keeper-bubble {
  position: absolute;
  top: -12px;
  z-index: 7;
  width: 230px;
  padding: 8px 10px;
  border: 1.5px solid #101828;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
  color: #1c2740;
  font-size: 12.5px;
  font-weight: 720;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.keeper-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.kb-text {
  display: block;
}

.kb-chips {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 7px;
}

.kb-chips button {
  padding: 3px 9px;
  border: 1.5px solid #101828;
  border-radius: 999px;
  background: #f1f5ff;
  color: #1c2740;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.kb-chips button:hover {
  background: #dbe7ff;
}

.friend-tier {
  margin-left: 5px;
  color: #7c5cff;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

.weather-rain {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  pointer-events: none;
  background:
    repeating-linear-gradient(105deg, transparent 0 9px, rgba(180, 205, 235, 0.28) 9px 10px, transparent 10px 23px),
    linear-gradient(180deg, rgba(40, 52, 80, 0.16), rgba(40, 52, 80, 0.1));
  animation: rainfall 0.5s linear infinite;
}

body.raining .weather-rain {
  display: block;
}

@keyframes rainfall {
  from { background-position: 0 0, 0 0; }
  to { background-position: -18px 64px, 0 0; }
}

.room2-hint {
  margin: 0;
  padding: 7px 12px;
  border-top: 1px solid var(--line-soft);
  background: #f9fbfe;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 720px) {
  .home-room .room2-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 6px 8px;
  }

  .home-room .room2-head .district-icon,
  .home-room .room2-title .kicker {
    display: none;
  }

  .home-room .room2-title h2 {
    font-size: 15px;
  }

  .home-floor-tabs {
    gap: 4px;
  }

  .home-floor-tab {
    flex: 1 1 58px;
    min-width: 56px;
    padding: 3px 5px;
  }

  .home-floor-tab span {
    overflow: hidden;
    font-size: 8.5px;
    text-overflow: ellipsis;
  }

  .home-floor-tab small {
    display: none;
  }

  .home-room .room2-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 58px minmax(0, 1fr);
  }

  /* phones: the room stacks — full-width readable site list on top, the
     shop floor (keeper, counter, EXIT) as a strip below. Site names are the
     whole point of the room, so they get the width. */
  .interior:not(.home-room) .room2-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 150px;
  }

  .interior:not(.home-room) .room2-floor {
    grid-row: 2;
    min-height: 0;
  }

  .interior:not(.home-room) .room2-floor::before {
    inset: 10px 14% 6px;
  }

  .home-room .room2-list,
  .room2-list,
  .room2-list.compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 96px 8px 10px 8px;
  }

  .home-room .room2-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(92px, 112px);
    grid-template-columns: none;
    align-content: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 7px;
  }

  .home-room .room2-floor {
    grid-row: 2;
    min-height: 0;
  }

  .home-room-zone {
    border-width: 1.5px;
  }

  .home-room-zone span,
  .home-room-label {
    font-size: 8px;
  }

  .home-floor-banner {
    width: 176px;
    padding: 5px 8px;
  }

  .home-floor-banner span {
    display: none;
  }

  .home-stairs {
    width: 88px;
    height: 50px;
  }

  .home-design-tray {
    right: 6px;
    bottom: 6px;
    left: 6px;
    max-width: none;
    min-height: 44px;
    padding: 4px 6px;
  }

  .home-design-tray > button { flex-basis: 48px; min-height: 36px; }
  .home-furniture { transform: translate(-30px, -30px) scale(0.88); }
  .home-furniture.is-dragging { transform: translate(-30px, -30px) scale(0.95); }

  /* phones: notes wrap to two lines instead of ellipsizing after ~3 words
     ("Make music by playi…" → full sentence) */
  .room2-list .site-note,
  .room2-list.compact .site-note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    line-height: 1.25;
  }

  .room2-actions {
    gap: 4px;
  }

  .room2-actions .button.compact {
    min-height: 30px;
    padding: 0 9px;
    font-size: 11px;
  }

  .room2-list .site-row {
    padding: 4px 8px;
  }

  .room2 .site-row {
    grid-template-columns: 24px 34px minmax(0, 1fr) auto;
  }

  .room2-hint {
    display: none;
  }

  /* full-width dialogue dock: portrait + text share the top row,
     chips get their own full-width row underneath */
  .dialogue-box {
    right: 8px;
    bottom: 34px;
    left: 8px;
    flex-wrap: wrap;
    max-width: none;
    gap: 8px;
  }

  .dialogue-box .kb-chips {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0;
  }

  .dialogue-box .dlg-copy {
    flex: 1 1 0;
  }
}

.room-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px;
  padding: 5px 10px;
  border: 2px solid #101828;
  border-radius: 8px;
  background: color-mix(in srgb, var(--room-accent, #2563eb) 84%, #101828);
  box-shadow: 0 6px 16px rgba(10, 14, 24, 0.4);
  pointer-events: auto;
}

.room-strip .room-kicker {
  margin: 0 0 2px;
}

.room-strip h2 {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(16, 24, 40, 0.55);
}

.room-strip .room-kicker {
  font-size: 10px;
}

.interior .room-hint {
  margin: 8px;
  border: 0;
  border-radius: 7px;
  pointer-events: none;
}

.interior .room {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 6px;
  overflow: hidden;
  border: 3px solid #101828;
  border-radius: 6px;
  image-rendering: pixelated;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 24px),
    linear-gradient(180deg, #c59a6b, #b98d5f);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14), inset 0 -40px 60px rgba(63, 36, 12, 0.18);
}

.room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 3px solid #101828;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 14px, transparent 14px 28px),
    color-mix(in srgb, var(--room-accent, #2563eb) 82%, #101828);
}

.room-kicker {
  margin: 0 0 3px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.room-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(16, 24, 40, 0.55);
}

.room-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  align-content: start;
  overflow-y: auto;
  padding: 14px;
}

.poster {
  position: relative;
  display: grid;
  gap: 5px;
  justify-items: center;
  padding: 12px 8px 10px;
  border: 3px solid #101828;
  border-radius: 6px;
  background: linear-gradient(180deg, #fffdf5, #f3ead6);
  box-shadow: 0 3px 0 #7a5230, 0 6px 10px rgba(63, 36, 12, 0.25);
  text-align: center;
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.poster:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #7a5230, 0 10px 14px rgba(63, 36, 12, 0.3);
}

.poster-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid #101828;
  border-radius: 8px;
  background: var(--accent, #2563eb);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 -10px 14px rgba(0, 0, 0, 0.2);
}

.poster-name {
  overflow: hidden;
  max-width: 100%;
  color: #24180c;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 870;
}

.poster-note {
  overflow: hidden;
  max-width: 100%;
  color: #6d5334;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 680;
}

.poster-star {
  position: absolute;
  top: -9px;
  right: -6px;
  padding: 2px 6px;
  border: 2px solid #101828;
  border-radius: 999px;
  background: #ffd766;
  color: #4d3305;
  font-size: 9.5px;
  font-weight: 900;
}

.room-hint {
  margin: 0;
  padding: 8px 12px;
  border-top: 3px solid #101828;
  background: rgba(16, 24, 40, 0.82);
  color: #e8ecf5;
  font-size: 11.5px;
  font-weight: 720;
  text-align: center;
}

@media (max-width: 720px) {
  .app-shell { padding: 8px; }
  .topbar { grid-template-columns: auto minmax(0, 1fr); }
  .top-actions { grid-column: 1 / -1; display: flex; }
  .town-map { height: clamp(470px, calc(100svh - 235px), 640px); min-height: 470px; }
  .town-map:has(.interior.open),
  .town-map:has(.arcade.open) { height: min(82svh, 720px); min-height: 560px; }
}

@media (max-width: 400px) {
  .town-map { height: clamp(440px, calc(100svh - 225px), 590px); min-height: 440px; }
}

/* Resident conversations */
.dialogue-panel {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 160;
  width: min(380px, calc(100vw - 28px));
  padding: 14px;
  border: 3px solid #101828;
  border-radius: 8px;
  background: #fffdf6;
  box-shadow: 0 10px 0 rgba(16, 24, 40, 0.25), 0 22px 50px rgba(16, 24, 40, 0.25);
}

.dialogue-panel[hidden] { display: none; }
.dialogue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dialogue-head h2 { margin: 0; font-size: 20px; }
.dialogue-head .kicker { margin-bottom: 2px; }
.dialogue-head > button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e8edf4;
  color: #101828;
  font-weight: 900;
  cursor: pointer;
}

.dialogue-bond {
  margin: 3px 0 0;
  font-size: 10px;
  font-weight: 800;
  color: #9a3d63;
  letter-spacing: 0.01em;
}

.dialogue-bond .bond-hearts { letter-spacing: 2px; margin-right: 5px; }

.dialogue-memory {
  margin: 9px 0;
  padding: 7px 9px;
  border-left: 3px solid #0f8294;
  background: #e9faf9;
  color: #476071;
  font-size: 10px;
  font-weight: 720;
}

.dialogue-response {
  min-height: 58px;
  margin: 10px 0;
  color: #1d2939;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.dialogue-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 7px; }

/* The consolidated HUD: the play surface keeps Coins, Journal, and Profile.
   Everything else lives one tap away in the game menu - the buttons stay in
   the DOM as the menu's functional targets, they just no longer shout. */
.stage-actions .hud-menu-only { display: none; }

/* Desktop declutter (owner request, July 20): the topbar tool row and the
   under-map control strip retire at EVERY width, not just mobile. The game
   menu carries all of them, logically grouped. Permanent chrome is only:
   search, the three chips (Coins / Journal / Profile), and the burger. */
.top-actions,
.control-strip { display: none; }

/* Shelf Sort: the Curator's Desk and its small daily deck */
.curator-desk {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 1.5px dashed #b07f1d; border-radius: 7px;
  background: #fff8e8; color: #7a5410; text-align: left; cursor: pointer;
}
.curator-desk:hover, .curator-desk:focus-visible { border-color: #7a5410; background: #fdefcf; }
.shelf-sort {
  position: absolute; inset: 0; z-index: 8; display: flex;
  align-items: center; justify-content: center;
  background: rgba(15, 20, 32, 0.45);
  pointer-events: auto; /* .interior disables pointer events; the desk re-enables like .room2 does */
}
.shelf-sort[hidden] { display: none; }
.shelf-card {
  position: relative; width: min(340px, 86vw);
  display: grid; gap: 8px; padding: 18px 16px 14px;
  border: 2px solid #101828; border-radius: 12px; background: #fffdf6;
  box-shadow: 0 12px 30px rgba(10, 14, 24, 0.35);
}
.shelf-close { position: absolute; top: 8px; right: 8px; border: none; background: none; font-size: 14px; cursor: pointer; color: #52616e; }
.shelf-count { color: #7c8a96; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.shelf-name { font-size: 18px; color: #101828; }
.shelf-note { color: #45525e; font-size: 11px; font-weight: 700; }
.shelf-blurb { margin: 0; padding: 8px 10px; border-left: 3px solid #b07f1d; background: #fff6df; color: #4b3a12; font-size: 11px; line-height: 1.45; }
.shelf-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.shelf-actions button {
  min-height: 42px; padding: 6px; border-radius: 7px; cursor: pointer;
  border: 1.5px solid #b7c3d4; background: #ffffff; color: #27364d;
  font-size: 10px; font-weight: 850;
}
.shelf-actions [data-shelf-action="pass"]:hover { border-color: #9a3412; background: #fff1eb; }
.shelf-actions [data-shelf-action="shelve"]:hover { border-color: #166534; background: #ecfdf3; }
.shelf-actions [data-shelf-action="more"]:hover { border-color: #b07f1d; background: #fff8e8; }
.shelf-undo {
  justify-self: start; padding: 4px 8px; border: 1px solid #8a97a5;
  border-radius: 999px; background: #f3f6f9; color: #38434e;
  font-size: 10px; font-weight: 800; cursor: pointer;
}
.shelf-done { text-align: center; }
.shelf-done strong { font-size: 15px; color: #101828; }
.shelf-done small { color: #5b6d76; }

.exhibit-panel {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center;
  background: rgba(15, 20, 32, 0.5);
}
.exhibit-panel[hidden] { display: none; }
.exhibit-card {
  position: relative; width: min(380px, 88vw); max-height: 84vh; overflow-y: auto;
  display: grid; gap: 9px; padding: 18px 16px 14px;
  border: 2px solid #3d3423; border-radius: 12px; background: #fbf7ea;
  box-shadow: 0 12px 30px rgba(10, 14, 24, 0.4);
}
.exhibit-close { position: absolute; top: 8px; right: 8px; border: none; background: none; font-size: 14px; cursor: pointer; color: #6b6350; }
.exhibit-kicker { color: #8a7d5c; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.exhibit-title { font-size: 17px; color: #241d12; }
.exhibit-fact { margin: 0; padding: 9px 11px; border-left: 3px solid #b07f1d; background: #fff8e4; color: #443719; font-size: 12px; line-height: 1.55; }

/* the doorstep - one question, eight doors, no numbers anywhere */
.doorstep-card { width: min(420px, 92vw); }
.doorstep-doors { display: grid; gap: 6px; }
.doorstep-door {
  display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px;
  padding: 8px 10px; text-align: left; cursor: pointer;
  border: 2px solid #ded2b4; border-left: 4px solid var(--door, #8a7f6d);
  border-radius: 9px; background: #fffdf5; color: #241d12;
}
.doorstep-door:hover, .doorstep-door:focus-visible { background: #fff6dd; border-color: var(--door, #8a7f6d); }
.doorstep-icon {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: var(--door, #8a7f6d); color: #fffdf5; font-size: 10px; font-weight: 800;
}
.doorstep-text { display: grid; gap: 1px; }
.doorstep-text strong { font-size: 12px; }
.doorstep-text small { color: #6b6350; font-size: 10px; line-height: 1.45; }
.doorstep-onopen {
  margin-top: 2px; padding: 7px 9px; cursor: pointer; font-size: 10px; font-weight: 700;
  border: 2px dashed #ded2b4; border-radius: 8px; background: none; color: #6b6350;
}
.doorstep-onopen[aria-pressed="true"] { border-style: solid; background: #fff6dd; color: #443719; }
.exhibit-question { margin: 2px 0 0; color: #241d12; font-size: 12px; font-weight: 800; }
.exhibit-options { display: grid; gap: 6px; }
.exhibit-options button {
  min-height: 40px; padding: 7px 10px; border-radius: 7px; cursor: pointer;
  border: 1.5px solid #c3b998; background: #ffffff; color: #33301f;
  font-size: 11px; font-weight: 800; text-align: left;
}
.exhibit-options button:hover { border-color: #b07f1d; background: #fff8e8; }
.exhibit-options button.wrong { border-color: #b3462c; background: #fdefe9; color: #7c2d12; }
.exhibit-feedback { margin: 0; min-height: 14px; color: #8a4b12; font-size: 10.5px; font-weight: 700; }
.exhibit-stamped { margin: 2px 0 0; color: #14532d; font-size: 12px; font-weight: 850; }

/* Two sides of the exhibit card. The forward turn is the quiet primary thing
   in the panel; the way back is deliberately quieter still but never hidden,
   because the whole point is that re-reading costs nothing and nobody is
   keeping track of how often you do it. */
.exhibit-turn {
  justify-self: start; padding: 6px 12px; border-radius: 8px;
  border: 1.5px solid #d8c79a; background: #fff8e4;
  color: #6b4f14; font-size: 11px; font-weight: 800;
  font-family: inherit; cursor: pointer;
}
.exhibit-turn:hover { border-color: #b07f1d; background: #fdf0d0; }
.exhibit-turn[data-exhibit-reread] {
  border-color: #e2ddcd; background: transparent;
  color: #8a7d5c; font-weight: 700;
}
.exhibit-turn[data-exhibit-reread]:hover { border-color: #c9bd9a; background: #fbf7ec; }
.exhibit-source { justify-self: start; color: #275b8a; font-size: 10.5px; font-weight: 800; text-decoration: none; }
a.exhibit-source:hover { text-decoration: underline; }
span.exhibit-source { color: #6b6350; }

/* The classroom counter, on the Campus Green. Same card as the museum plinth,
   a shade cooler, because this one is a conversation rather than a placard.
   There is no score line and no feedback line here by design - a miss is
   answered by the visitor in their own words, not by the interface. */
.classroom-card { width: min(420px, 90vw); }
.classroom-lead { margin: 0; color: #6b6350; font-size: 11px; font-weight: 700; }
.classroom-symptom {
  margin: 0; padding: 10px 12px; border-radius: 8px;
  background: #f1ece0; border: 1.5px solid #ddd2b8;
  color: #33301f; font-size: 12.5px; line-height: 1.5; font-style: italic;
}
.classroom-ask { margin: 2px 0 0; color: #241d12; font-size: 11.5px; font-weight: 800; }
.classroom-bridge { margin: 0; color: #2d4a3a; font-size: 12.5px; line-height: 1.5; font-weight: 700; }
.classroom-quiet { margin: 0; color: #8a7d5c; font-size: 10.5px; font-weight: 700; }
.campus-courses { display: grid; gap: 9px; margin: 2px 0 0; padding: 0; list-style: none; }
.campus-course { display: grid; gap: 2px; padding-left: 10px; border-left: 3px solid #b07f1d; }
.campus-course a, .campus-course strong { color: #275b8a; font-size: 12px; font-weight: 850; text-decoration: none; }
.campus-course a:hover { text-decoration: underline; }
.campus-course strong { color: #241d12; }
.campus-course-from { color: #8a7d5c; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.campus-course-note { color: #55503c; font-size: 11px; line-height: 1.45; }

/* The Practice Hall. The keys are the title of this room, so they are set in a
   mono face at title size - a shortcut written in the body font reads as prose
   and stops looking like something you press. */
.practice-keys { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.5px; }
.practice-specimen {
  width: 100%;
  min-height: 62px;
  margin: 2px 0 0;
  padding: 9px 10px;
  border: 2px solid #b07f1d;
  border-radius: 7px;
  background: #fffdf5;
  color: #241d12;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}
.practice-specimen:focus-visible { outline: 3px solid #f0c04a; outline-offset: 1px; }
.practice-show {
  justify-self: start;
  min-height: 34px;
  padding: 6px 12px;
  border: 1.5px solid #c9bda0;
  border-radius: 6px;
  background: #fbf7ec;
  color: #55503c;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.practice-show:hover, .practice-show:focus-visible { border-color: #b07f1d; background: #fff6df; color: #241d12; }
/* Keycaps, not menu buttons. The little bottom edge is the whole illusion. */
.practice-caps button {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border-radius: 7px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16);
}
.practice-caps button:active { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16); transform: translateY(1px); }
/* The wall notice. Never a button, and styled so it can never be mistaken for
   one: no border to press, no hover state, nothing to point at. */
.practice-wall { margin-top: 4px; padding: 8px 10px; border-left: 3px solid #a8462f; background: #fdf2ee; border-radius: 0 6px 6px 0; }
.practice-wall-head { display: block; color: #8c3a26; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.4px; }
.practice-wall-note { margin: 3px 0 0; color: #55503c; font-size: 11px; line-height: 1.45; }
.practice-a11y { margin: 0; color: #55503c; font-size: 11px; line-height: 1.5; }
.practice-a11y strong { color: #241d12; }
.practice-source { margin: 0; color: #8a7d5c; font-size: 10px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .practice-caps button:active { transform: none; } }

/* The Hidden Curriculum. The third door on the high school. The sentence on
   the desk is a real one somebody received, so it is set as a letter - paler
   paper, a rule down the left, roman rather than italic - and the options are
   plain-English meanings, which run long. They stack rather than sitting in a
   row, because a meaning cut off mid-clause is the exact failure this room is
   about. The take-away block is warm and always present: it is handed over on
   a miss exactly as on a hit, so it may never be styled as a prize. */
.curriculum-card { width: min(460px, 92vw); }
.curriculum-heard {
  margin: 0; padding: 11px 13px; border-left: 3px solid #c9b78a;
  background: #fbf7ec; border-radius: 0 8px 8px 0;
  color: #33301f; font-size: 12.5px; line-height: 1.55;
}
.curriculum-options { grid-template-columns: 1fr; }
.curriculum-options button { text-align: left; line-height: 1.45; }
.curriculum-take {
  margin-top: 2px; padding: 9px 11px; border-radius: 8px;
  background: #eef5ee; border: 1.5px solid #cfe0cf;
}
.curriculum-take-head {
  display: block; color: #2d4a3a; font-size: 10px;
  font-weight: 850; text-transform: uppercase; letter-spacing: 0.4px;
}
.curriculum-take-line { margin: 4px 0 0; color: #24301f; font-size: 12px; line-height: 1.5; }

/* The Sound Booth. Sixteen pads on a dark plate, because every other card in
   this game is paper and this one is equipment. Note what is NOT styled here:
   there is no state for a strike that arrived too soon. A settled strike gets
   no class, no shake and no colour, because the instant the deck reacts to
   your speed it is measuring it. If a future edit wants a "too fast" flash,
   the answer is no. */
.booth-card { width: min(430px, 92vw); }
.booth-strip {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 8px;
  background: #f4f1e6; border: 1.5px solid #ddd5bd;
}
.booth-step {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 5px;
  border: 1.5px solid #cdc3a6; background: #fffdf6;
  color: #6b6144; font-size: 11px; font-weight: 850;
}
.booth-step[data-booth-played] { border-color: #9ec49c; background: #eaf5e9; color: #2f5c36; }
.booth-step[data-booth-here] { border-color: #b07f1d; background: #fdf0d0; color: #6b4f14; }
.booth-arrow { color: #b8ae92; font-size: 10px; }
.booth-deck {
  display: grid; gap: 5px; padding: 9px;
  border-radius: 10px; background: #2b2a33; border: 2px solid #17161d;
  outline: none;
}
.booth-deck:focus-visible { border-color: #b07f1d; }
.booth-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.booth-pad {
  display: grid; align-content: center; justify-items: center; gap: 1px;
  min-height: 44px; padding: 4px 2px; border-radius: 6px;
  border: 1.5px solid #4a4855; background: #3a3946;
  color: #cfc9dd; font-family: inherit; cursor: pointer;
  transition: background 90ms linear, border-color 90ms linear;
}
.booth-pad:hover { background: #464555; }
.booth-pad-key { font-size: 12px; font-weight: 850; letter-spacing: 0.4px; }
.booth-pad-label { font-size: 7.5px; font-weight: 750; letter-spacing: 0.3px; color: #948da8; }
.booth-pad[data-booth-next] { border-color: #d9a53c; background: #4a4234; }
.booth-pad[data-booth-next] .booth-pad-key { color: #ffd888; }
.booth-pad[data-booth-lit] { border-color: #8fd0a0; background: #354a3b; }
.booth-weight { margin: 0; color: #8a7d5c; font-size: 10.5px; line-height: 1.5; }
.booth-mislabel {
  margin: 0; padding: 9px 11px; border-radius: 8px;
  background: #f4f1e6; border: 1.5px solid #ddd5bd;
  color: #4a4432; font-size: 11.5px; line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  .booth-pad { transition: none; }
}

/* Madame Halcyon's booth. Deeper and cooler than the museum plinth on purpose:
   every other card in this game is a placard, and this one is a fortune. The
   reading is set large because it IS the room - everything else on the card is
   furniture arranged around one sentence. */
.fortune-card {
  width: min(400px, 90vw);
  border-color: #4c3a63;
  background: #f7f2fb;
}
.fortune-panel .exhibit-kicker { color: #7a5aa6; letter-spacing: 0.6px; }
.fortune-panel .exhibit-title { color: #2e1065; }
.fortune-panel .exhibit-close { color: #6b5a86; }
.fortune-reading {
  margin: 2px 0 0;
  padding: 13px 14px;
  border-left: 3px solid #a855f7;
  border-radius: 0 8px 8px 0;
  background: #fffdf6;
  color: #2c2340;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 650;
}
/* Not a reward button and not a retry. She has no cost and no cooldown, so the
   control is quiet link-weight rather than a call to action. */
.fortune-again {
  justify-self: start;
  min-height: 34px;
  padding: 6px 12px;
  border: 1.5px solid #cbb9e2;
  border-radius: 6px;
  background: #fdfaff;
  color: #5b3f86;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.fortune-again:hover, .fortune-again:focus-visible { border-color: #a855f7; background: #f6edff; color: #2e1065; }
/* The spike of old cards. Small, dim, and below the fold of attention: it is a
   keepsake you can look back at, never a collection with a hole in it. */
.fortune-spike { margin-top: 4px; padding-top: 9px; border-top: 1px dashed #d6c9e6; }
.fortune-spike-head { display: block; color: #8a7aa4; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.fortune-cards { display: grid; gap: 7px; margin: 7px 0 0; padding: 0; list-style: none; }
.fortune-cards li {
  padding: 7px 9px;
  border-radius: 6px;
  background: #f1eaf9;
  color: #55496b;
  font-size: 11px;
  line-height: 1.5;
}

/* ------------------------------------------------------------ the penny press
   Copper, not purple. The coin itself is the hero of this panel - it is set
   large, centred and slightly warm, because the whole point of a pressed penny
   is that it is a physical object you are holding up to the light. */
.penny-card { max-width: 380px; border-color: #e3cdb2; background: #fffaf4; }
.penny-panel .exhibit-kicker { color: #b07a3f; }
.penny-panel .exhibit-title { color: #4a2f14; }
.penny-panel .exhibit-close { color: #a1815e; }
.penny-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 116px;
  height: 84px;
  margin: 10px auto 2px;
  border-radius: 58px / 42px;
  background: radial-gradient(circle at 38% 30%, #e6a76b 0%, #c07c3f 52%, #94551f 100%);
  box-shadow: inset 0 2px 4px rgba(255, 226, 195, 0.55), inset 0 -3px 6px rgba(74, 40, 12, 0.45), 0 3px 7px rgba(74, 40, 12, 0.22);
  color: #fdf1e2;
  text-shadow: 0 1px 0 rgba(74, 40, 12, 0.7);
  animation: penny-drop 420ms cubic-bezier(0.22, 1.4, 0.4, 1) 1;
}
.penny-face-a, .penny-face-b {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  line-height: 1.25;
  text-align: center;
}
.penny-new .penny-face-a { font-size: 13px; }
.penny-new .penny-face-b { font-size: 10px; opacity: 0.88; }
@keyframes penny-drop {
  0% { transform: translateY(-14px) rotate(-9deg) scale(0.86); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.penny-line { margin: 8px 0 0; color: #4a3524; font-size: 14px; line-height: 1.6; }
/* Quiet, link-weight, and honest about what it does: the crank always turns.
   It is not a reward button and there is nothing behind it being rationed. */
.penny-again {
  align-self: flex-start;
  margin-top: 9px;
  padding: 5px 11px;
  border: 1px solid #e3cdb2;
  border-radius: 999px;
  background: #fff4e8;
  color: #8a5a2b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.penny-again:hover, .penny-again:focus-visible { border-color: #c07c3f; background: #ffe9d3; color: #5b3410; }
/* The folder. It shows ONLY the pennies you have. There is deliberately no
   empty slot, no silhouette and no "8 of 18" - a grid with holes in it is a
   list of things you have failed to do, and this game does not do that. */
.penny-folder { margin-top: 4px; padding-top: 9px; border-top: 1px dashed #e3cdb2; }
.penny-folder-head { display: block; color: #a1815e; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.penny-coins { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.penny-coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 68px;
  height: 50px;
  border-radius: 34px / 25px;
  background: radial-gradient(circle at 38% 30%, #dfa066 0%, #b8763c 55%, #8d5220 100%);
  box-shadow: inset 0 1px 2px rgba(255, 226, 195, 0.5), inset 0 -2px 4px rgba(74, 40, 12, 0.4);
  color: #fdf1e2;
  text-shadow: 0 1px 0 rgba(74, 40, 12, 0.6);
  cursor: default;
}
.penny-coin .penny-face-a { font-size: 8px; }
.penny-coin .penny-face-b { font-size: 7px; opacity: 0.85; }
.penny-coin.is-fresh { box-shadow: inset 0 1px 2px rgba(255, 240, 220, 0.7), inset 0 -2px 4px rgba(74, 40, 12, 0.35), 0 0 0 2px #f0a868; }
@media (prefers-reduced-motion: reduce) {
  .penny-new { animation: none; }
}

/* ------------------------------------------------------------ the almanac
   The notice board panel. --almanac-accent is set inline from whatever today
   is, so the panel is tinted by the date the same way the painted board on the
   green is. The pages list shows ONLY the pages that have been written: there
   is no greyed-out row for a milestone not reached and no date beside any of
   them, because a dated row is a day you can be told you missed. See rule 4 in
   almanac-system.js. */
.almanac-card { border-top: 4px solid var(--almanac-accent, #a3b18a); max-width: 380px; }
.almanac-panel .exhibit-kicker { color: #7a8b62; }
.almanac-panel .exhibit-title { color: #2f3a24; }
.almanac-panel .exhibit-close { color: #7a8b62; }
.almanac-line { margin: 8px 0 0; color: #3f4a33; font-size: 13px; line-height: 1.5; }
.almanac-fresh {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1.5px solid var(--almanac-accent, #a3b18a);
  background: rgba(163, 177, 138, 0.12);
}
.almanac-fresh strong { display: block; color: #2f3a24; font-size: 12px; font-weight: 800; letter-spacing: 0.2px; }
.almanac-fresh span { display: block; margin-top: 4px; color: #4a5540; font-size: 12px; line-height: 1.45; }
.almanac-pages { margin-top: 14px; border-top: 1px solid rgba(120, 130, 100, 0.25); padding-top: 9px; }
.almanac-pages-head { display: block; color: #8a9670; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.almanac-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; max-height: 210px; overflow-y: auto; }
.almanac-page { padding: 7px 9px; border-radius: 7px; background: rgba(163, 177, 138, 0.1); }
.almanac-page strong { display: block; color: #3a4630; font-size: 11.5px; font-weight: 800; }
.almanac-page span { display: block; margin-top: 3px; color: #56604a; font-size: 11.5px; line-height: 1.4; }
.almanac-page.is-fresh { background: rgba(163, 177, 138, 0.24); box-shadow: 0 0 0 1.5px var(--almanac-accent, #a3b18a); }

/* ------------------------------------------------------------ the photo booth
   The strip is a canvas, painted from the flat list of rectangles photo-booth.js
   returns, and it is pixel art, so it must never be smoothed on the way up.
   There is deliberately no grid of empty frames here and no class for one: the
   booth cannot produce a strip with a gap in it, so a style for a gap would be a
   style for a thing that does not exist. See rule 3 in photo-booth.js. */
.photo-card { border-top: 4px solid #b4485f; max-width: 460px; }
.photo-panel .exhibit-kicker { color: #a8697c; }
.photo-panel .exhibit-title { color: #3a2630; }
.photo-panel .exhibit-close { color: #a8697c; }
.photo-body { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; }
.photo-strip {
  flex: 0 0 auto;
  padding: 6px;
  border-radius: 6px;
  background: #2b2028;
  box-shadow: 0 4px 12px rgba(50, 30, 40, 0.28);
}
.photo-canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-height: 300px;
  width: auto;
  border-radius: 3px;
}
.photo-side { flex: 1 1 auto; min-width: 0; }
.photo-captions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.photo-captions li {
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(180, 72, 95, 0.09);
  color: #4b3540;
  font-size: 11.5px;
  line-height: 1.4;
}
.photo-line { margin: 12px 0 0; color: #6b4a56; font-size: 12px; font-style: italic; line-height: 1.45; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.photo-keep,
.photo-again {
  border: 0;
  border-radius: 8px;
  padding: 8px 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.photo-keep { background: #b4485f; color: #fff4f6; }
.photo-again { background: rgba(180, 72, 95, 0.14); color: #8d3349; }
.photo-keep:hover,
.photo-again:hover { transform: translateY(-1px); filter: brightness(1.06); }
.photo-keep:focus-visible,
.photo-again:focus-visible { outline: 2px solid #8d3349; outline-offset: 2px; }
.photo-shoebox { display: block; margin-top: 10px; color: #9c8490; font-size: 10.5px; letter-spacing: 0.2px; }
@media (max-width: 520px) {
  .photo-body { flex-direction: column; align-items: center; }
  .photo-side { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-keep,
  .photo-again { transition: none; }
}

@keyframes journal-glint {
  0%, 100% { box-shadow: none; }
  40% { box-shadow: 0 0 0 3px rgba(255, 201, 74, 0.55); }
}
.glint { animation: journal-glint 1.5s ease; }
@media (prefers-reduced-motion: reduce) { .glint { animation: none; } }
.dialogue-choices button,
.dialogue-complete {
  min-height: 38px;
  padding: 7px 9px;
  border: 1.5px solid #b7c3d4;
  border-radius: 6px;
  background: #ffffff;
  color: #27364d;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.dialogue-choices button:hover,
.dialogue-choices button:focus-visible { border-color: #0f8294; background: #e9faf9; }
.dialogue-choices button.chip-live { border-color: #8cbdb9; background: #f1fbf9; color: #164e54; }
.dialogue-choices button.chip-live:hover,
.dialogue-choices button.chip-live:focus-visible { border-color: #0f8294; background: #e3f7f4; }
.dialogue-choices button.chip-goal { border-color: #d9a53f; background: #fff8e8; color: #7a5410; }
.dialogue-choices button.chip-goal:hover,
.dialogue-choices button.chip-goal:focus-visible { border-color: #b07f1d; background: #fdefcf; }
.dialogue-complete { width: 100%; margin-top: 8px; border-color: #166534; background: #dcfce7; color: #14532d; }

.dialogue-ai {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.dialogue-ai[hidden] { display: none; }
.dialogue-ai-question {
  margin: 0;
  padding: 6px 8px;
  border-left: 3px solid #0f8294;
  background: #ffffff;
  color: #35515a;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}
.dialogue-ai-question[hidden] { display: none; }
.dialogue-ai[aria-busy="true"] ~ .dialogue-choices,
.dialogue-panel:has(.dialogue-ai[aria-busy="true"]) .dialogue-choices { opacity: 0.5; pointer-events: none; }
.dialogue-ai-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.dialogue-ai-row.has-mic { grid-template-columns: auto minmax(0, 1fr) auto; }
.dialogue-mic {
  min-width: 42px; border: 1.5px solid #8cbdb9; border-radius: 7px;
  background: #ffffff; color: #164e54; font-size: 15px; cursor: pointer;
  touch-action: none; /* press-and-hold must not scroll the panel */
}
.dialogue-mic.listening { border-color: #b91c1c; background: #fef2f2; animation: mic-pulse 1.1s ease infinite; }
@keyframes mic-pulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.18); } }
@media (prefers-reduced-motion: reduce) { .dialogue-mic.listening { animation: none; } }
.dialogue-ai-row input {
  min-width: 0;
  min-height: 40px;
  padding: 8px 9px;
  border: 1.5px solid #91a9b5;
  border-radius: 6px;
  background: #fff;
  color: #172b32;
  font: inherit;
  font-size: 12px;
}
.dialogue-ai-row input:focus { border-color: #0f8294; outline: 2px solid rgba(15, 130, 148, 0.16); }
.dialogue-ai-row button {
  min-width: 52px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1.5px solid #075e68;
  border-radius: 6px;
  background: #087f78;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.dialogue-ai-row button:disabled { min-width: 82px; cursor: wait; opacity: 0.72; }
.dialogue-ai[aria-busy="true"] .dialogue-ai-row button::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  vertical-align: -1px;
  animation: sim-thinking 0.8s linear infinite;
}
@keyframes sim-thinking { to { transform: rotate(360deg); } }
.dialogue-ai small { color: #5b6d76; font-size: 9px; font-weight: 650; line-height: 1.35; }

@media (max-width: 720px) {
  .dialogue-panel { right: 8px; bottom: 92px; left: 8px; width: auto; padding: 11px; }
  .dialogue-response { min-height: 44px; margin: 8px 0; }
  .dialogue-memory { max-height: 44px; overflow: hidden; }
  .dialogue-ai { padding: 8px; }
  .dialogue-ai-row input,
  .dialogue-ai-row button { min-height: 44px; }
}

/* Each destination keeps the same UI, with a distinct world signature. */
.game-stage { --world-accent: #f2c94c; --world-glow: rgba(242, 201, 76, 0.2); }
.game-stage[data-world="estate"] { --world-accent: #e0669a; --world-glow: rgba(224, 102, 154, 0.2); }
.game-stage[data-world="sea"] { --world-accent: #19a7b8; --world-glow: rgba(25, 167, 184, 0.2); }
.game-stage[data-world="north"] { --world-accent: #4b9b58; --world-glow: rgba(75, 155, 88, 0.2); }
.game-stage[data-world="south"] { --world-accent: #8b5cf6; --world-glow: rgba(139, 92, 246, 0.2); }
.game-stage[data-world="reef"] { --world-accent: #0e7490; --world-glow: rgba(14, 116, 144, 0.22); }

.game-stage {
  position: relative;
  border-color: color-mix(in srgb, var(--world-accent) 62%, #d3dce8);
  box-shadow: 0 0 0 3px var(--world-glow), var(--soft-shadow);
  transition: border-color 280ms ease, box-shadow 280ms ease;
}

.game-stage::before {
  content: "";
  position: absolute;
  z-index: 90;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--world-accent);
  pointer-events: none;
}

.world-arrival {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 210;
  display: grid;
  min-width: min(360px, calc(100vw - 32px));
  padding: 16px 22px;
  transform: translate(-50%, -42%) scale(0.96);
  border: 3px solid #ffffff;
  border-radius: 8px;
  background: rgba(16, 24, 40, 0.94);
  color: #ffffff;
  text-align: center;
  opacity: 0;
  box-shadow: 0 16px 50px rgba(16, 24, 40, 0.36);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}

.world-arrival[hidden] { display: none; }
.world-arrival.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.world-arrival span { color: #9bdedb; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.world-arrival strong { margin-top: 3px; font-size: 23px; letter-spacing: 0; }
.world-arrival small { margin-top: 4px; color: #d8e0ec; font-size: 11px; font-weight: 700; }
.world-traveling .game-stage { filter: saturate(0.88); }

@media (prefers-reduced-motion: reduce) {
  .world-arrival,
  .game-stage { transition: none; }
}

@media (max-width: 720px) {
  .dock { display: none; }

  .adventure-panel {
    top: 132px;
    right: auto;
    bottom: auto;
    height: auto;
    max-height: 124px;
    overflow: hidden;
  }

  .district-panel {
    visibility: hidden;
    opacity: 0;
    transform: none;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
  }

  body.mobile-directory-open .district-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
}

/* Responsive launch hardening. Keep the game usable from small phones to wide desktops. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.town-layout,
.game-stage,
.district-panel,
.stage-head,
.stage-actions,
.control-strip,
.town-map {
  min-width: 0;
}

.town-map canvas {
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
}

@media (max-width: 900px) {
  .app-shell {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left));
  }

  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 8px;
  }

  .brand-sub { display: none; }
  .brand-mark { width: 36px; height: 36px; }
  .search { grid-column: 2; min-height: 42px; }

  .top-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    overflow: visible;
    padding: 0;
  }

  .top-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 7px 4px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .town-layout { margin-top: 8px; }
  .game-stage { padding: 10px; }
  .stage-actions { flex-wrap: wrap; justify-content: flex-end; }
  .dock { display: none; }

  .mobile-directory-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 36;
    display: block;
    min-width: 54px;
    min-height: 36px;
    padding: 7px 10px;
    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 7px;
    background: rgba(16, 24, 40, 0.9);
    color: #fff;
    font: 850 12px/1 Inter, system-ui, sans-serif;
  }

  .district-panel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 84;
    display: block;
    width: 100%;
    max-height: min(76dvh, 760px);
    overflow-y: auto;
    padding: 42px 12px max(14px, env(safe-area-inset-bottom));
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }

  body.mobile-directory-open .district-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
  }

  body.mobile-directory-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 83;
    background: rgba(16, 24, 40, 0.34);
  }

  .mobile-sheet-close {
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #f4f6fa;
    color: #253044;
  }

  .category-strip { position: sticky; top: -1px; z-index: 2; background: #fff; }
}

@media (max-width: 720px) {
  .brand-name { font-size: 19px; }
  .search-icon { display: none; }
  .search { padding-left: 10px; }
  .search input { font-size: 13px; }
  .go { min-width: 58px; }

  .stage-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-bottom: 7px;
  }

  .stage-head h1 { font-size: 19px; }
  .stage-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
  }

  .stage-actions .button {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
  }

  .town-map {
    height: clamp(430px, calc(100dvh - 250px), 620px);
    min-height: 430px;
  }

  .mobile-controls {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
  }

  .interaction-prompt {
    bottom: 118px;
    max-width: calc(100% - 24px);
  }

  .stage-pill-extra { display: none; }

  .town-map:has(.interior.open) .interaction-prompt { bottom: 12px; max-width: calc(100% - 24px); }

  .map-hud {
    top: 52px;
    bottom: auto;
    left: 8px;
  }

  .dialogue-panel {
    top: auto;
    right: 8px;
    bottom: calc(122px + env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
  }

  .adventure-panel {
    right: 12px;
    bottom: calc(126px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
  }
}

@media (max-width: 360px) {
  .top-actions { gap: 4px; }
  .top-actions .button { padding-inline: 2px; font-size: 9px; }
  .mobile-dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); }
  .mobile-dpad button { width: 44px; height: 44px; }
  .mobile-action { width: 58px; height: 58px; }
  .interaction-prompt { bottom: 108px; max-width: calc(100% - 20px); }
}

@media (min-width: 721px) and (max-width: 900px) {
  .town-map { height: clamp(420px, calc(100dvh - 250px), 560px); }
  .control-strip { padding: 8px; gap: 8px; }
}

@media (pointer: coarse) and (min-width: 721px) {
  .interaction-prompt { bottom: 126px; }
  .map-hud { top: 54px; bottom: auto; }
}

@media (max-height: 520px) and (min-width: 721px) and (max-width: 1000px) {
  .topbar {
    grid-template-columns: 150px minmax(230px, 1fr) auto;
    align-items: center;
  }

  .brand-name { font-size: 18px; }
  .search { grid-column: auto; }
  .top-actions {
    grid-column: auto;
    display: grid;
    width: auto;
  }
  .town-map { height: 360px; min-height: 360px; }
}

/* Production beta surfaces */
.beta-badge {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  margin-left: 5px;
  padding: 2px 5px;
  border: 1px solid #12756b;
  border-radius: 4px;
  background: #e7f8f4;
  color: #10665e;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  vertical-align: 3px;
}

.top-actions > a.button { text-decoration: none; }

.journal-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 96;
  width: min(430px, 94vw);
  height: 100dvh;
  overflow-y: auto;
  padding: 18px;
  border-right: 1px solid var(--line);
  background: #f8fafc;
  box-shadow: 12px 0 34px rgba(16, 24, 40, 0.18);
  transform: translateX(-105%);
  transition: transform 180ms ease;
}

.journal-drawer.open { transform: translateX(0); }

.journal-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 14px;
  padding: 4px;
  border-radius: 7px;
  background: #e8edf3;
}

.journal-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #526074;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.journal-tabs button[aria-selected="true"] { background: #fff; color: #1d2939; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14); }

.journal-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #b9ddd7;
  border-radius: 8px;
  background: #ecf9f6;
  color: #164e48;
}

.journal-summary strong { font-size: 13px; }
.journal-summary span { flex: 0 0 auto; color: #3d6864; font-size: 11px; font-weight: 750; }
.journal-list { display: grid; gap: 8px; }
.journal-list.passport-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.passport-stamp {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 104px;
  padding: 10px;
  border: 1px dashed #b7c1cf;
  border-radius: 8px;
  background: #f3f5f8;
}

.passport-stamp.unlocked { border-style: solid; border-color: #8fcbb6; background: #f1fbf6; }
.passport-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 48px;
  border: 2px solid #9aa6b6;
  border-radius: 50%;
  background: #e4e8ee;
  color: #788596;
  font-size: 11px;
  font-weight: 900;
  transform: rotate(-4deg);
}
.passport-stamp.unlocked .passport-mark { border-color: #16866f; background: #dff5eb; color: #116b59; box-shadow: inset 0 0 0 3px #f1fbf6; }
.passport-copy { display: grid; min-width: 0; gap: 3px; }
.passport-copy strong { color: #263248; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.passport-copy small { color: #697586; font-size: 9px; line-height: 1.35; }
.passport-copy em { color: #7b8796; font-size: 8px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.passport-stamp.unlocked .passport-copy em { color: #16866f; }

.journal-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 92px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.journal-item.complete { border-color: #8fd0b6; background: #f1fbf6; }
.journal-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; background: #263248; color: #fff; font-weight: 900; }
.journal-copy { min-width: 0; }
.journal-copy strong, .journal-copy span, .journal-copy small { display: block; }
.journal-copy strong { color: #1d2939; font-size: 13px; }
.journal-copy span { margin-top: 2px; color: #667085; font-size: 11px; font-weight: 700; }
.journal-copy small { margin-top: 5px; color: #526074; font-size: 10px; line-height: 1.3; }
.journal-meter { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: #e5eaf0; }
.journal-meter span { height: 100%; border-radius: inherit; background: #198878; }
.journal-badge { padding: 5px 7px; border-radius: 5px; background: #edf1f5; color: #536173; font-size: 10px; font-weight: 850; }
.journal-item.complete .journal-badge { background: #d8f4e5; color: #17623e; }

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.about-actions > .button { text-decoration: none; }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.about-grid section { padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.about-grid strong { color: #1f2a3b; font-size: 12px; }
.about-grid p { margin: 5px 0 0; color: #5f6d7e; font-size: 11px; font-weight: 600; line-height: 1.45; }
.credits-details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.credits-details summary { color: #344054; font-size: 12px; font-weight: 800; cursor: pointer; }

@media (max-width: 720px) {
  .journal-drawer { width: 100vw; padding: 14px 12px max(14px, env(safe-area-inset-bottom)); }
  .journal-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-actions { display: grid; grid-template-columns: 1fr; }
  .about-actions > .button { width: 100%; text-align: center; }
  .credits-head { align-items: flex-start; }
  .credits-head h2 { line-height: 1.05; }
}

@media (max-width: 380px) {
  .journal-list.passport-list { grid-template-columns: 1fr; }
  .journal-item { grid-template-columns: 36px minmax(0, 1fr); }
  .journal-icon { width: 34px; height: 34px; }
  .journal-badge { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .game-loader-avatar,
  .game-loader-spinner { animation: none; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Final responsive shell: touch-first by default, optional buttons in Menu. */
@media (max-width: 900px) {
  .top-actions,
  .stage-actions,
  .control-strip,
  .mobile-directory-toggle { display: none !important; }

  .stage-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
  }

  .game-menu-toggle { width: 44px; height: 44px; font-size: 23px; }

  .town-map {
    height: clamp(340px, calc(100dvh - 190px), 650px);
    min-height: 340px;
  }

  body:not(.touch-controls-enabled) .mobile-controls { display: none !important; }
  body:not(.touch-controls-enabled) .interaction-prompt {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  body:not(.touch-controls-enabled) .dialogue-panel,
  body:not(.touch-controls-enabled) .adventure-panel {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 720px) {
  .town-map { height: clamp(340px, calc(100dvh - 140px), 700px); min-height: 340px; }
}

@media (min-width: 721px) and (max-width: 900px) {
  .town-map { height: clamp(390px, calc(100dvh - 160px), 820px); min-height: 390px; }
}

@media (max-width: 900px) and (max-height: 600px) and (orientation: landscape) {
  .app-shell { padding-block: 6px; }
  .topbar { margin-bottom: 5px; }
  .game-stage { padding: 7px; }
  .stage-head { margin-bottom: 5px; }
  .stage-head .kicker { display: none; }
  .stage-head h1 { font-size: 17px; }
  .game-menu-toggle { width: 36px; height: 36px; font-size: 20px; }
  .town-map { height: clamp(245px, calc(100dvh - 126px), 390px); min-height: 245px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-menu-panel,
  .subway-modal { transition: none; }
  .metro-light,
  .metro-car { animation: none; }
}

.doorstep-invite {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent, #8a7f6d);
  background: rgba(138, 127, 109, 0.1);
  border-radius: 0 8px 8px 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #4a4437;
}