/* The source artwork is 3000 × 3300. It renders at 36% so more of the
   town is visible at once while the canvas can still be panned freely. */
:root{
  --town-canvas-width:1080px;
  --town-canvas-height:1188px;
  --town-building-width:229px;
  --town-building-height:252px;
}

.multiplayer-town{--town-building-width:126px;--town-building-height:139px}

/* Placement tools are shared by phone and tablet, not a phone-only media rule. */
.native-app[data-active-tab="town"] .town-placement-toolbar{position:fixed;z-index:240;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));display:grid;gap:8px;padding:10px;border:2px solid #fff8;border-radius:21px;background:#172237eb;color:#fff;box-shadow:0 12px 32px #0008;backdrop-filter:blur(8px)}
.native-app[data-active-tab="town"] .town-placement-toolbar>b{overflow:hidden;padding:0 5px;font-size:15px;text-overflow:ellipsis;white-space:nowrap}.native-app[data-active-tab="town"] .town-placement-toolbar>div{display:flex;gap:6px;padding-bottom:2px;overflow-x:auto;scrollbar-width:none}.native-app[data-active-tab="town"] .town-placement-toolbar>div::-webkit-scrollbar{display:none}
.native-app[data-active-tab="town"] .town-placement-toolbar button{flex:0 0 52px;display:grid;place-items:center;align-content:center;gap:2px;width:52px;min-width:52px;min-height:58px;padding:4px 2px;border:0;border-radius:13px;background:#fff8f0;color:#201712;font-size:22px;line-height:1}.native-app[data-active-tab="town"] .town-placement-toolbar button small{font-size:8px;white-space:nowrap}.native-app[data-active-tab="town"] .town-placement-toolbar button.danger{background:#7b2929;color:#fff;font-size:11px}.native-app[data-active-tab="town"] .town-placement-toolbar button.primary{background:#a96932;color:#fff;font-size:11px}

/* Real-time atmosphere dims the artwork, never the readable labels or lights. */
.town-environment{--town-brightness:1;--town-dusk:0;isolation:isolate}
.town-environment .world-bg{filter:brightness(var(--town-brightness));transition:filter 12s linear}
.town-environment .building-preset-image{filter:brightness(var(--town-brightness,1));transition:filter 12s linear}
.town-sky-wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:#f68e57;opacity:var(--town-dusk);mix-blend-mode:soft-light;transition:opacity 12s linear}
.town-clock{position:absolute;right:18px;top:18px;z-index:3;padding:8px 13px;border-radius:20px;background:#243228bb;color:#fff;font:600 16px/1.3 sans-serif;pointer-events:none}
.building-art{position:relative;display:block;width:100%;height:100%;overflow:visible;transform:scaleX(var(--place-flip,1));pointer-events:none}
.building-light{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0;transition:opacity 1.5s ease}
.building-light-core{filter:brightness(1.3) drop-shadow(0 0 2px #ffe4a3)}
.building-light-halo{filter:blur(4px) brightness(1.7);mix-blend-mode:screen}
[data-lights-on="true"]>.building-light-core{opacity:.96}
[data-lights-on="true"]>.building-light-halo{opacity:.85}
.building-lighting-settings{display:grid;gap:10px;margin:12px 0;padding:12px;border:1px solid #bda782;border-radius:15px;min-width:0;background:#fff9ed}
.building-lighting-settings>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.building-lighting-settings label{display:grid;gap:5px;min-width:0;color:#33271c;text-shadow:none}
.building-lighting-settings legend{padding:3px 8px;border-radius:8px;background:#fff9ed;color:#33271c}
.building-lighting-settings :is(input,select){width:100%;min-width:0;box-sizing:border-box}
.building-lighting-settings small{font-size:12px;line-height:1.45;color:#514733}
@media(prefers-reduced-motion:reduce){.town-environment .world-bg,.town-environment .building-preset-image,.town-sky-wash,.building-light{transition:none}}

/* Both the observation map and the town editor use the same authored canvas.
   The viewport scrolls; the map itself is never scaled down to fit. */
:is(.town-map-scroll,.standard-observe-view .viewport){
  display:block!important;
  min-width:0!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  touch-action:pan-x pan-y!important;
  scroll-behavior:smooth;
  scrollbar-color:color-mix(in srgb,var(--p) 58%,#8d98a5) color-mix(in srgb,var(--panel) 82%,#d9dfe5);
  scrollbar-width:thin!important;
  background:color-mix(in srgb,#d9e9df 78%,var(--bg))!important;
}
html.native-app[data-active-tab="town"] .town-map-scroll{scroll-behavior:auto!important}
html.native-app[data-active-tab="town"] .town-map-scroll .map-place-label{
  transform:translate(-50%,calc(var(--town-building-height) * var(--town-label-scale,1) / 2 + 3px))!important;
}
html.native-app[data-active-tab="town"] .town-map-scroll .map-place-label small{display:none!important}
:is(.town-map-scroll,.standard-observe-view .viewport)>.world{
  position:relative!important;
  display:block!important;
  flex:none!important;
  width:var(--town-canvas-width)!important;
  min-width:var(--town-canvas-width)!important;
  max-width:none!important;
  height:var(--town-canvas-height)!important;
  min-height:var(--town-canvas-height)!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  transform:none!important;
  touch-action:pan-x pan-y!important;
}
:is(.town-map-scroll,.standard-observe-view .viewport) .world-bg{
  position:absolute!important;
  inset:0!important;
  width:var(--town-canvas-width)!important;
  height:var(--town-canvas-height)!important;
  object-fit:fill!important;
  pointer-events:none!important;
}

/* Buildings stay a little larger even though the map itself is zoomed out. */
:is(.town-map-scroll,.standard-observe-view .viewport) .place.has-art{
  appearance:none!important;
  -webkit-appearance:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  backdrop-filter:none!important;
  width:var(--town-building-width)!important;
  height:var(--town-building-height)!important;
  min-width:var(--town-building-width)!important;
  min-height:var(--town-building-height)!important;
  max-width:none!important;
  transform:translate(-50%,-50%) scale(var(--place-scale,1))!important;
  transform-origin:center bottom!important;
  cursor:pointer;
}
:is(.town-map-scroll,.standard-observe-view .viewport) .building-preset-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:brightness(var(--town-brightness,1))!important;
}
.town-map-scroll .place{contain:layout paint style}.town-building-list article,.closet-book-grid>button{contain:content}
:is(.town-map-scroll,.standard-observe-view .viewport) .map-place-label{
  min-width:160px!important;
  max-width:280px!important;
  transform:translate(-50%,calc(-100% - 136px))!important;
  font-size:27px!important;
  line-height:1.12!important;
}
:is(.town-map-scroll,.standard-observe-view .viewport) .map-place-label small{font-size:18px!important}
:is(.town-map-scroll,.standard-observe-view .viewport) .place-people{
  transform:translate(-50%,-50%) scale(1.18)!important;
  transform-origin:center bottom!important;
}

@media(min-width:721px){
  html:not(.native-app) .standard-observe-view .viewport{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:10/11!important;
    overflow:hidden!important;
    border-radius:24px!important;
  }
  html:not(.native-app) body main .standard-observe-view .viewport>.world,
  html:not(.native-app) body main .town-map-scroll>.world{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:10/11!important;
  }
  html:not(.native-app) body main :is(.standard-observe-view .viewport,.town-map-scroll) .world-bg{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  html:not(.native-app) body main :is(.standard-observe-view .viewport,.town-map-scroll) .place.has-art{
    width:16%!important;
    height:14.55%!important;
    min-width:0!important;
    min-height:0!important;
  }
  html:not(.native-app) body main :is(.standard-observe-view .viewport,.town-map-scroll) .map-place-label{
    min-width:110px!important;
    max-width:210px!important;
    transform:translate(-50%,calc(-100% - clamp(54px,8vw,118px)))!important;
    font-size:clamp(15px,1.6vw,24px)!important;
  }
  html:not(.native-app)[data-active-tab="town"] .mobile-town-shell{min-height:calc(100dvh - 126px)}
  html:not(.native-app)[data-active-tab="town"] .town-edit{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(300px,340px)!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:14px!important;
    box-sizing:border-box!important;
    height:auto!important;
    min-height:560px!important;
    overflow:hidden!important;
  }
  html:not(.native-app)[data-active-tab="town"] .town-edit>*{min-width:0!important}
  html:not(.native-app)[data-active-tab="town"] .town-map-scroll{
    width:100%!important;
    height:auto!important;
    aspect-ratio:10/11!important;
    overflow:hidden!important;
    border-radius:24px!important;
  }
  html:not(.native-app)[data-active-tab="town"] .town-editor-panel{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  html:not(.native-app)[data-active-tab="town"] .town-editor-panel :is(.place-config,.fields){
    grid-template-columns:minmax(0,1fr)!important;
  }
  html:not(.native-app)[data-active-tab="town"] .town-editor-panel :is(.place-edit-heading,.place-editor>div){
    flex-wrap:wrap!important;
  }
  html:not(.native-app)[data-active-tab="town"] .site-footer{display:none!important}
}

@media(min-width:721px) and (max-width:1180px){
  html:not(.native-app)[data-active-tab="town"] .town-edit{grid-template-columns:minmax(0,1fr)!important}
  html:not(.native-app)[data-active-tab="town"] .town-editor-panel{height:auto!important;overflow:visible!important}
}

:is(.town-map-scroll,.town-edit>.world) .place-quick-delete{
  position:absolute;
  z-index:90;
  display:grid;
  place-items:center;
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  border:2px solid #fff;
  border-radius:50%;
  color:#fff;
  background:#963f32;
  box-shadow:0 6px 14px #30130f66;
  font-size:25px;
  line-height:1;
  transform:translate(30px,-96px);
}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-app[data-active-tab="town"] .town-map-scroll{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100vw!important;
    height:100dvh!important;
    overflow:auto!important;
    touch-action:pan-x pan-y!important;
    border-radius:0!important;
    scrollbar-width:none!important;
  }
  html.native-app[data-active-tab="town"] .town-map-scroll::-webkit-scrollbar{display:none!important}
  html.native-app[data-active-tab="town"] .town-map-scroll>.world{
    width:var(--town-canvas-width)!important;
    min-width:var(--town-canvas-width)!important;
    height:var(--town-canvas-height)!important;
    min-height:var(--town-canvas-height)!important;
    touch-action:pan-x pan-y!important;
  }
  html.native-app[data-active-tab="town"] .mobile-town-shell:not(.buildings-editing):not(.decorations-editing) .town-map-scroll .place{
    touch-action:manipulation!important;
  }
  html.native-app[data-active-tab="town"] .mobile-town-shell:is(.buildings-editing,.decorations-editing) .town-map-scroll .place{
    touch-action:none!important;
  }
}