:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #080c18;
  color: #e7edf9;
  --surface: #101726;
  --stroke: #293951;
  --muted: #a3b1c7;
  --cyan: #67e9f2;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.town { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(190px,1fr) auto; }
.top { min-height: 65px; padding: 9px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #101423; border-bottom: 1px solid #33425e; z-index: 1; }
.brand, .top-right { display: flex; align-items: center; gap: 12px; }
.brand svg { color: #ef7ecb; flex: none; }
h1 { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: .045em; }
.brand span { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.live { display: flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; color: #bed0e1; }
.live i { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 9px #67e9f28a; }
.quiet, .primary { border: 1px solid var(--stroke); border-radius: 4px; min-height: 44px; padding: 8px 15px; background: #151e30; color: #dce6f5; white-space: nowrap; font-size: 13px; }
.quiet:hover, .map-controls button:hover, .quiet[aria-pressed="true"] { border-color: #58abbc; color: var(--cyan); }
.primary { background: var(--cyan); border-color: var(--cyan); color: #072231; font-weight: 680; }
.primary:hover { background: #a4f6fb; }
.viewport { position: relative; min-height: 0; overflow: hidden; background: #0a1223; isolation: isolate; }
#map { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; image-rendering: pixelated; }
#map.drive-select { cursor: crosshair; }
#map:active { cursor: grabbing; }
.map-car-layer { position: absolute; inset: 0; pointer-events: none; }
.map-car { position: absolute; top: -18px; left: -32px; width: 64px; height: 36px; }
.map-car img { position: relative; display: block; width: 100%; height: 100%; clip-path: var(--car-body); }
.map-car::before {
  content: ""; position: absolute; left: 77%; top: 34%; width: 36%; height: 51%;
  background: radial-gradient(ellipse at 17% 50%, #ffe7a4c0, #ffe7a44d 34%, transparent 73%);
  animation: map-car-glow .85s ease-in-out infinite alternate;
}
@keyframes map-car-glow { from { opacity: .48; } to { opacity: .92; } }
@media (prefers-reduced-motion: reduce) { .map-car::before { animation: none; } }
/* Trace the car in each garage GIF so the map supplies the road. */
.map-car[data-model="porsche-911-gt3-rs"] {
  --car-body: polygon(
    11.5% 21.8%, 18.0% 21.3%, 19.8% 24.1%, 19.8% 26.9%, 22.9% 26.9%,
    28.9% 23.6%, 34.1% 22.7%, 39.3% 25.0%, 53.9% 25.0%, 55.7% 23.6%,
    56.3% 20.8%, 58.3% 20.8%, 60.2% 24.5%, 64.8% 25.9%, 70.1% 23.6%,
    74.0% 24.5%, 78.9% 29.2%, 82.3% 35.6%, 84.6% 45.8%, 85.4% 53.7%,
    85.2% 65.3%, 83.1% 73.6%, 79.9% 78.2%, 74.0% 81.0%, 67.2% 79.6%,
    36.5% 79.6%, 29.7% 80.6%, 22.1% 77.8%, 17.4% 73.1%, 15.1% 67.6%,
    13.0% 60.6%, 11.5% 59.7%
  );
}
.map-car[data-model="porsche-taycan-turbo-gt"] {
  --car-body: polygon(
    12.8% 53.2%, 14.1% 44.4%, 16.7% 37.5%, 21.6% 32.4%, 29.9% 29.2%,
    39.6% 26.4%, 50.3% 25.9%, 56.3% 26.9%, 57.3% 24.5%, 59.1% 25.0%,
    61.2% 28.2%, 67.7% 29.2%, 72.4% 29.2%, 76.6% 32.4%, 80.2% 38.9%,
    82.6% 47.2%, 84.9% 55.1%, 85.2% 62.0%, 83.9% 68.5%, 81.5% 74.1%,
    77.9% 78.2%, 71.6% 80.6%, 65.1% 78.7%, 38.8% 79.2%, 31.3% 80.6%,
    25.0% 78.7%, 19.0% 73.1%, 15.6% 66.2%, 13.3% 60.6%
  );
}
.map-car[data-model="porsche-cayenne-turbo-gt"] {
  --car-body: polygon(
    12.5% 54.2%, 13.8% 44.0%, 13.5% 35.6%, 14.3% 29.2%, 16.9% 24.5%,
    21.1% 23.1%, 24.7% 26.4%, 28.4% 24.1%, 34.6% 22.2%, 41.9% 21.8%,
    49.2% 22.2%, 54.2% 24.1%, 55.5% 21.8%, 57.8% 22.7%, 60.4% 25.9%,
    65.6% 28.2%, 70.6% 27.3%, 75.8% 28.7%, 79.7% 33.3%, 82.8% 40.3%,
    84.9% 48.6%, 85.7% 57.4%, 85.2% 67.1%, 82.8% 74.1%, 79.4% 79.2%,
    73.4% 82.9%, 68.2% 80.6%, 36.2% 81.0%, 29.4% 81.9%, 21.9% 78.7%,
    16.7% 74.5%, 13.8% 68.5%, 12.2% 61.1%
  );
}
.map-place { position: absolute; top: 17px; left: 19px; padding: 10px 13px 11px; border: 1px solid #365471; border-left: 2px solid var(--cyan); background: #111b30ed; pointer-events: none; }
.place-title { font-size: 16px; font-weight: 620; letter-spacing: .08em; }
.place-hint { font-size: 11px; margin-top: 5px; color: var(--muted); }
.time-period { display:block; margin-top:6px; font-size:10px; color:#a9e3e9; }
.viewport[data-period="late"] .time-period { color:#ffb5e8; }
.life-mode .map-place { max-width: calc(100% - 78px); }
#town-activity { display: block; margin-top: 5px; color: #bcdae5; font-size: 11px; line-height: 1.4; }
.map-controls { position: absolute; top: 17px; right: 19px; display: grid; gap: 6px; }
.map-controls button { width: 44px; height: 44px; background: #111b30ed; color: #dce6f5; border: 1px solid #3d5470; border-radius: 4px; font-size: 22px; }
.map-bottom { position: absolute; inset: auto 13px 10px; display: flex; justify-content: space-between; align-items: end; gap: 8px; pointer-events: none; color: #d4dff0; font-size: 10px; }
.map-bottom a { color: #d4dff0; text-decoration: none; padding: 4px 6px; background: #0b1423e8; pointer-events: auto; white-space: nowrap; }
#scale { display: inline-block; padding: 4px 3px 2px; text-align: center; white-space: nowrap; border: solid #aabbd5; border-width: 0 1px 1px; background: #0b1423c9; }
.loading { position: absolute; top: 47%; left: 50%; transform: translate(-50%,-50%); margin: 0; padding: 12px 17px; background: #101726; border: 1px solid #365471; color: #d8e5f7; text-align: center; }
.hud { min-height: 93px; display: grid; grid-template-columns: minmax(160px, .8fr) minmax(170px,1.5fr) auto; align-items: center; gap: 18px; padding: 12px 22px max(12px,env(safe-area-inset-bottom)); border-top: 1px solid #3d5a76; background: #111a2b; }
.resident { display: flex; align-items: center; gap: 10px; min-width: 0; }
.portrait { display: grid; place-items: center; flex: none; width: 52px; height: 55px; background: #1e2e48; border: 1px solid #47627e; overflow: hidden; }
.portrait canvas { image-rendering: pixelated; }
.resident-text, .journey { min-width: 0; }
.resident-name { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.resident-name strong { font-size: 17px; }
.resident-name span { color: var(--cyan); font-size: 10px; letter-spacing: .07em; }
.resident p, .journey p { margin: 5px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#resident-status, #journey-detail { font-size: 12px; color: var(--muted); }
#journey-title { font-size: 14px; margin-top: 0; }
.journey progress { appearance: none; display: block; width: min(100%,200px); height: 3px; margin-top: 8px; border: 0; background: #263951; }
.journey progress::-webkit-progress-bar { background: #263951; }
.journey progress::-webkit-progress-value { background: var(--cyan); }
.journey progress::-moz-progress-bar { background: var(--cyan); }
.hud-actions { display: grid; gap: 7px; }
.travel-actions { display: flex; gap: 8px; align-items: center; }
.travel-actions .primary { flex: 1; }
.transport { display: flex; gap: 4px; padding: 0; margin: 0; border: 0; min-width: 0; }
.transport label { position: relative; flex: 1; }
.transport input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.transport span { display: grid; place-items: center; min-height: 34px; padding: 5px 10px; border: 1px solid var(--stroke); border-radius: 4px; color: #b6c5db; font-size: 12px; white-space: nowrap; }
.transport input:checked + span { color: var(--cyan); background: #153344; border-color: #5badbf; }
.transport input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.transport input:disabled + span { opacity: .55; }
.itinerary { margin-top: 6px; font-size: 11px; color: #c8e5ef; }
.itinerary summary { cursor: pointer; }
.itinerary ol { padding-left: 1.5em; margin: 4px 0 0; max-height: 105px; overflow: auto; }
.itinerary li { margin: 2px 0; }
.story-entry { display: block; pointer-events: auto; margin: 8px 0 0; min-height: 44px; padding: 7px 11px; background: #312741; color: #ffd2ef; border: 1px solid #855377; border-radius: 3px; font-size: 12px; text-align: left; }
.story-entry:hover { background: #44334f; border-color: #e88bbd; }
.map-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.map-actions .story-entry { padding-inline: 8px; }
.map-actions .locate-friends { background: #18334b; border-color: #367991; color: #b6f3ff; }
.map-actions .garage-entry { background: #3b2c29; border-color: #906745; color: #ffe0a7; }
.drive-entry { min-width: 44px; color: #c1f5f8; background: #153344; border-color: #5badbf; text-align: center; font-weight: 650; }
.drive-entry:hover { background: #21485a; border-color: var(--cyan); }
.drive-entry[aria-pressed="true"] { color: #072231; background: var(--cyan); border-color: var(--cyan); }
.visits-entry { border-color: #835d81; color: #f5c7e8; }
.home-picking :is(#overview, .map-place, .map-controls, .hud > :not(.home-picker)) { display: none; }
.home-picking #map { cursor: crosshair; }
.home-picker {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 520px);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 7px 10px;
}
.home-field {
  display: grid;
  flex: 1 1 145px;
  gap: 4px;
  min-width: 0;
  color: #dce6f5;
  font-size: 12px;
}
.home-picker select {
  width: 100%;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #435773;
  border-radius: 4px;
  background: #0b1424;
  color: #e7edf9;
  font: inherit;
  font-size: 16px;
}
.home-picker select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.home-picker p { flex-basis: 100%; margin: 0; font-size: 12px; line-height: 1.45; }
.home-hint { color: var(--muted); }
.home-status { color: #b8edf0; }
.shop-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.friend-location-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.friend-location-row > .quiet:last-child { color: #a7edf2; }
.visit-actions { margin-top: 8px; }
.shop-row { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; min-height: 63px; text-align: left; white-space: normal; }
.shop-row strong { font-size: 14px; font-weight: 600; }
.shop-row small { color: #b3bdd3; font-size: 11px; grid-column: 1; }
.shop-row .mail-unread { grid-column: 2; grid-row: 1 / 3; color: #ff9da5; font-size: .8rem; }
.visit-back { margin-top: 12px; }
.story-panel { width: min(480px, calc(100% - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; background: #111a2b; color: #e7edf9; border: 1px solid #566f8a; border-radius: 6px; box-shadow: 0 18px 60px #050914bc; }
.story-panel::backdrop { background: #050914b5; }
.story-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
.story-kicker { margin: 0 0 4px; color: #eaa8d2; font-size: 11px; letter-spacing: .12em; }
.story-header h2 { margin: 0; font-size: 21px; font-weight: 650; }
.story-tabs { display: flex; gap: 7px; padding: 0 20px 12px; border-bottom: 1px solid #2c3d54; }
.story-body { padding: 17px 20px 21px; }
.story-body h3 { font-size: 17px; margin: 0 0 8px; }
.story-body p { font-size: 13px; line-height: 1.7; color: #c1cde2; margin: 0 0 13px; }
.story-body p.story-step { color: #83dce3; font-size: 11px; letter-spacing: .09em; margin-bottom: 7px; }
.story-body p.story-feedback { min-height: 24px; margin: 12px 0 0; color: #f3bfdc; }
.story-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.decor-body { padding-top: 5px; }
.decor-room { display: block; width: 100%; height: auto; border: 1px solid #444965; image-rendering: pixelated; }
.decor-stats { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; color: var(--muted); font-size: 12px; }
.decor-gold { color: #ffd088; font-size: 14px; }
.decor-activity { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; min-height: 48px; padding: 9px 10px; background: #1b2940; border-left: 2px solid var(--cyan); }
.decor-activity p { margin: 0; }
.decor-activity small { color: #a8bbd1; font-size: 11px; }
.decor-activity .quiet { padding-inline: 8px; }
.decor-items { list-style: none; margin: 10px 0 0; padding: 0; }
.decor-items li { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 55px; border-bottom: 1px solid #2d4057; padding: 4px 0; }
.decor-items strong { display: block; font-size: 14px; }
.decor-items small { display: block; margin-top: 3px; color: #a8bbd1; font-size: 11px; line-height: 1.4; }
.decor-items button { flex: none; color: #ffd088; }
.decor-items button:disabled { cursor: default; }
.decor-tag { color: #9aece8; white-space: nowrap; font-size: 12px; padding-inline: 8px; }
.decor-body .decor-notice { color: #ffc0d2; margin: 8px 0 0; }
.decor-notice:empty { display: none; }
.room-entry { margin-top: 7px; }
.room-preview { margin-top: 13px; }
.room-preview p { margin: 7px 0; }
.story-body .room-sharing { margin: 9px 0 0; font-size: 12px; }
.room-dialogue { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.room-dialogue li { display: flex; gap: 8px; padding: 6px 8px; color: #d9e6f6; background: #1b2940; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.room-dialogue strong { flex: 0 0 auto; max-width: 35%; color: #a7edf2; }
.room-dialogue li:nth-child(even) strong { color: #ffc6e6; }
.garage-panel { width: min(550px, calc(100% - 24px)); }
.garage-body { padding-top: 8px; }
.garage-balance { display: block; margin-bottom: 7px; font-size: 18px; color: #ffd088; }
.garage-cars { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.garage-car { display: grid; align-items: center; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px 12px; border: 1px solid #344964; padding: 8px; background: #19263c; }
.garage-art { position: relative; width: clamp(62px,18vw,100px); aspect-ratio: 100 / 56; background: #101a2d; image-rendering: pixelated; }
.garage-art.has-media { width: clamp(94px,29vw,154px); }
.garage-art canvas, .garage-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.garage-art picture { position: absolute; inset: 0; opacity: 0; }
.garage-art.has-preview picture { opacity: 1; }
.garage-art.has-preview canvas { visibility: hidden; }
.garage-car strong, .garage-car small { display: block; }
.garage-car strong { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.garage-car small { margin-top: 4px; color: #aec1d8; font-size: 11px; }
.garage-active { color: #9ceee8; white-space: nowrap; font-size: 12px; }
.garage-feedback:empty { display: none; }
.story-body .garage-feedback { margin: 10px 0 0; color: #ffc0d2; }
@media (max-width: 480px) {
  .garage-car { grid-template-columns: auto minmax(0,1fr); gap: 6px 10px; }
  .garage-art { grid-row: span 2; }
  .garage-car > :last-child { justify-self: start; }
}
.story-quote { margin: 0 0 14px; border-left: 2px solid #b479a5; padding: 8px 12px; background: #1c2539; color: #e8d8e6; font-size: 13px; line-height: 1.7; }
.light-board { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 12px 0; }
.light-board button { min-width: 0; min-height: 60px; padding: 5px 2px; background: #19253b; border: 1px solid #526982; color: #d7e4f6; border-radius: 4px; font-size: 12px; }
.light-board button:disabled { opacity: 1; cursor: default; }
.light-board button span { display: block; font-size: 16px; margin-bottom: 3px; }
.light-board button[data-pad="0"] { --lamp: #66e0d0; }
.light-board button[data-pad="1"] { --lamp: #f698d3; }
.light-board button[data-pad="2"] { --lamp: #ffce79; }
.light-board button[data-pad="3"] { --lamp: #89acff; }
.light-board button span { color: var(--lamp); }
.light-board button.lit, .light-board button:active:not(:disabled) { background: var(--lamp); color: #142033; border-color: var(--lamp); }
.light-board button.lit span, .light-board button:active:not(:disabled) span { color: #142033; }
.diary-list { list-style: none; padding: 0; margin: 0; }
.diary-list li { padding: 11px 0; border-top: 1px solid #2c3d54; }
.diary-list li:first-child { border-top: 0; padding-top: 0; }
.diary-list strong { font-size: 14px; }
.diary-list small { display: block; color: #98aec6; margin-top: 3px; font-size: 11px; }
.diary-list p { margin: 7px 0 0; }
.diary-conversation { margin-top: 8px; }
.diary-conversation summary { cursor: pointer; color: #96e6ee; font-size: 13px; }
[hidden] { display: none !important; }
@media (max-width: 700px) {
  .top { min-height: 59px; padding: 8px 12px; }
  .brand, .top-right { gap: 8px; }
  .brand svg { width: 27px; }
  h1 { font-size: 17px; }
  .live { display: none; }
  .top-right .quiet { padding: 6px 9px; font-size: 12px; }
  .map-place { top: 12px; left: 12px; padding: 8px 10px; }
  .map-controls { top: 12px; right: 12px; }
  .map-bottom { inset: auto 8px 7px; font-size: 9px; }
  .hud { grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: 9px 10px; padding: 9px 12px max(9px,env(safe-area-inset-bottom)); }
  .portrait { width: 38px; height: 39px; }
  .portrait canvas { width: 36px; height: 39px; }
  .resident { gap: 6px; }
  .resident-name { gap: 5px; }
  .resident-name strong { font-size: 15px; }
  .resident-name span { font-size: 9px; }
  #journey-title { font-size: 12px; }
  #journey-detail, #resident-status { font-size: 10px; }
  .hud-actions { grid-column: 1 / -1; }
  .travel-actions .quiet { flex: 1; }
  .travel-actions .primary { flex: 2; }
  .story-header { padding: 15px 14px 11px; }
  .story-tabs { padding: 0 14px 11px; }
  .story-body { padding: 14px; }
}
.mailbox-title { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:16px; }
.mailbox-title h3 { margin:0; }
.mailbox-list summary { cursor:pointer; color:#96e6ee; margin-top:7px; }
.weekly { border-bottom:1px solid var(--stroke); margin-bottom:14px; padding-bottom:12px; }
.weekly-text:empty { display:none; }