/* All interface panels float over the map; no document header or footer. */
.map-space { overflow: clip; }
.terrain {
  background: #829f29;
}
.grass-cover, .soil-recess, .paving-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
}
.grass-cover {
  background: url('assets/grass-carpet-v5.webp') repeat;
}
.world .building:hover, .world .building:focus-visible { transform: none; }
.world .building.targeted { animation: none; }
.world .building > .building-art { position: relative; filter: none; }
.world .building:hover > .building-art, .world .building:focus-visible > .building-art {
  filter: brightness(1.07);
}
.scenery[data-asset='tree']::before,
.scenery[data-asset='fountain']::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto 7% -1px;
  height: 6px;
  border-radius: 50%;
  background: #362d2140;
  pointer-events: none;
}
.scenery > img, .scenery > canvas { display: block; width: 100%; height: 100%; }
/* Animated frames include empty space above the roof and must stay absolute. */
.scenery > img:not(.window-light):not(.architecture-animation) { position: relative; }
.scenery[data-asset='tree']::before { inset: auto 37% -1px; height: 5px; }
.scenery[data-asset='fountain']::before { inset: auto 18% 6%; }
.world .has-architecture-animation > .building-art { visibility: hidden; }
.world .architecture-animation {
  position: absolute;
  pointer-events: none;
  max-width: none;
}
.architecture-clock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.town-light-filters { position: absolute; pointer-events: none; }
.map-shell.is-focused :is(.hud-brand, .hud-account, .hud-destinations, #edit-town, #edit-help) {
  display: none;
}
.world[data-light='dusk'] { --ambient: url(#town-dusk); --window-strength: .56; }
.world[data-light='night'] { --ambient: url(#town-night); --window-strength: 1; }
.world:is([data-light='dusk'], [data-light='night']) :is(.terrain, .scenery > img:not(.window-light), .scenery > canvas, .town-player canvas, .architecture-animation, .architecture-clock),
.world:is([data-light='dusk'], [data-light='night']) .building > .building-art { filter: var(--ambient); }
.world[data-light='night'] :is(.building-art, .architecture-animation, .architecture-clock) { --ambient: url(#town-night-architecture); }
.world[data-light='night'] .town-player canvas { filter: var(--ambient) brightness(1.24); }
.world[data-light='night'] #fountain-animation { filter: var(--ambient) url(#town-fountain-light); }
.world[data-light='night'] .scenery[data-asset='fountain']::before {
  inset: auto 6% -5%;
  height: 33%;
  background: radial-gradient(ellipse at 50% 59%, #ffca758c, #e69b414e 46%, transparent 73%);
}
.world[data-light='night'] .scenery[data-asset='fountain']::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 12% 7% at 31% 66%, #fff6cc 5%, #ffc36eb0 29%, transparent),
    radial-gradient(ellipse 14% 7% at 50% 74%, #fff6cc 5%, #ffbe5ebc 29%, transparent),
    radial-gradient(ellipse 12% 7% at 69% 66%, #fff6cc 5%, #ffc36eb0 29%, transparent);
}
.window-light, .building-light-spill {
  position: absolute;
  pointer-events: none;
}
.window-light {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--window-strength, 0);
  filter: brightness(1.16) saturate(1.1) drop-shadow(0 0 7px #ffc16bd6);
}
.building-light-spill {
  left: var(--spill-center);
  width: var(--spill-width);
  height: 19%;
  bottom: -12%;
  transform: translateX(-50%);
  opacity: calc(var(--window-strength, 0) * var(--spill-strength));
  background: radial-gradient(ellipse at 50% 43%, #ffd185b8, #ffb96074 26%, #ff9b3829 55%, transparent 78%);
}








.town-player, .town-step-target {
  position: absolute;
  pointer-events: none;
}
.town-player {
  top: 0;
  left: 0;
  transition: opacity 150ms linear;
}
.town-player canvas {
  position: absolute;
  image-rendering: pixelated;
}
.town-player::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 6px;
  left: -8px;
  top: -3px;
  border-radius: 50%;
  background: #33281742;
}
.town-player.is-entering { opacity: 0; }
.town-step-target {
  width: 24px;
  height: 12px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff1b3;
  outline: 1px solid #604528;
  background: #fff1b34d;
  border-radius: 50%;
  z-index: 2;
}
.viewport {
  overflow: hidden;
  touch-action: pinch-zoom;
}
.viewport.is-following { cursor: default; }
.viewport.is-clearing { cursor: crosshair; }
.hoe-preview {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border: 1px solid #fff1be;
  background: #fff0a847;
}
.hud-inventory {
  position: absolute;
  right: 22px;
  bottom: 72px;
  z-index: 5;
  display: flex;
  align-items: end;
  gap: 9px;
}
.inventory-slot {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
}
.inventory-slot img { display: block; image-rendering: pixelated; }
.inventory-slot[aria-pressed='true'] { outline: 2px solid #fef0a5; outline-offset: 2px; }
.inventory-slot kbd {
  position: absolute;
  right: 5px;
  bottom: 4px;
  padding: 0 2px;
  color: #fff6da;
  background: #4b3425;
  font-size: 9px;
}
:is(#hoe-help, #edit-help, #paving-help) {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: max-content;
  max-width: min(270px, calc(100vw - 28px));
  margin: 0;
  padding: 9px 13px;
  font-size: 10px;
}
#edit-town { position: relative; }
#edit-town[aria-pressed='true'] { background: #7a552f; color: #fff4d6; text-shadow: none; }
.viewport.is-clearing, .viewport.is-paving, .viewport.is-arranging [data-movable] { touch-action: none; }
.paving-layer { z-index: 1; }
.paving-preview { border-color: #f3d297; background: #d7b37d55; }
#paving-slot { display: grid; place-items: center; width: 56px; height: 56px; border: 3px solid #79512e; background: #efd4a3; box-shadow: inset 0 0 0 2px #b98b54; }
.viewport.is-arranging [data-movable] { cursor: grab; pointer-events: auto; }
.viewport.is-arranging [data-movable] :is(.entry-dot, .building-tip) { display: none; }
.viewport.is-arranging [data-movable].is-picked > img:not(.window-light) { opacity: .5; }
.building-ghost, .building-drop-ground { position: absolute; pointer-events: none; z-index: 1540; }
.building-ghost { z-index: 1541; opacity: .68; }
.building-ghost :is(img, canvas) { display: block; width: 100%; height: 100%; }
.building-drop-ground { border: 2px solid #ffd1b1; background: #af383b60; }
.building-drop-ground.is-valid { border-color: #e0ffab; background: #98da5870; }
@media (pointer: coarse) { .inventory-slot kbd { display: none; } }
.hud-camera {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 4px 13px;
  font-size: 11px;
  font-weight: 700;
}
.hud-camera[aria-pressed='true'] {
  color: #fff6db;
  background: linear-gradient(#778a56, #556b40);
  box-shadow: inset 0 0 0 2px #a8b47a, 0 4px 0 #4c352640;
}
.hud-camera kbd {
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 10px;
}


@media (max-width: 850px) { .hud-camera { right: 15px; bottom: 15px; } }
@media (max-width: 600px) { .hud-camera { right: 11px; bottom: 87px; } }
@media (pointer: coarse) { .hud-camera kbd { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .town-player { transition: none; }
}
.game-button[hidden], .icon-button[hidden] { display: none; }
:root{--wood:#79512e;--wood-dark:#4c3526;--wood-light:#d4a16b;--parchment:#f9e9c5;--ink:#64462c}
body{background:#9ab751}.town-app{height:100dvh}.map-shell{position:absolute;inset:0;border:0;min-height:100dvh}.viewport{height:100dvh}.world{min-height:1536px}.map-shell:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 65px #375f2520;z-index:2}
.game-panel{border:3px solid var(--wood);outline:2px solid var(--wood-dark);border-radius:3px;background:linear-gradient(180deg,#fff3d9,#f4dfb4);box-shadow:inset 0 0 0 2px #e9bd83,inset 0 4px 0 #fffae7,0 4px 0 #4c352640,0 7px 15px #314a2520;color:var(--ink);z-index:5}
.game-panel:before,.game-panel:after{content:'';position:absolute;width:4px;height:4px;background:#c69662;border:1px solid #785334;top:5px;pointer-events:none}.game-panel:before{left:5px}.game-panel:after{right:5px}
.hud-brand{position:absolute;top:20px;left:22px;display:flex;align-items:center;gap:9px;padding:9px 14px 10px 10px;min-width:184px;text-align:left}.hud-brand img{object-fit:contain}.hud-brand strong{font-size:23px;letter-spacing:-1px;line-height:1.2;display:block;color:#4b6041}.hud-brand small{font-size:6px;letter-spacing:1.15px;display:block;margin-top:3px;color:#9d7a4c}.menu-dots{margin-left:13px;font-size:15px;color:#9d7a4c}.hud-brand:hover{filter:brightness(1.04)}
.hud-account{position:absolute;top:20px;right:22px;display:flex;align-items:center;gap:6px;padding:7px 9px}.game-button{display:flex;align-items:center;justify-content:center;text-decoration:none;border:2px solid #ae8454;border-radius:2px;background:linear-gradient(#fff1d1,#e9ca94);box-shadow:inset 0 2px #fff8e2,0 2px 0 #7c58314d;color:#79552f;padding:9px 12px;font-size:10px;font-weight:700;white-space:nowrap;text-shadow:0 1px #fff4d9}.game-button:hover{filter:brightness(1.05);transform:translateY(-1px)}.game-button:active{transform:translateY(1px);box-shadow:inset 0 1px #fff8e2}.game-button.primary{background:linear-gradient(#a9bd7d,#879f62);border-color:#5f7845;color:#fdf7e5;text-shadow:0 1px #516b3c;box-shadow:inset 0 2px #c6d5a1,0 2px 0 #4a64354d}.avatar-button{display:grid;place-items:center;width:38px;height:38px;padding:7px;border:2px solid #ae8454;background:linear-gradient(#fce8bc,#dfba83);box-shadow:inset 0 2px #fff5d9;border-radius:2px;margin-left:2px;color:#8d6942}.avatar-button svg{width:20px;height:20px;fill:#c99c62;stroke:#79512e;stroke-width:1.4}.avatar-button:hover{background:#f4dfb6}#account-name{font-size:12px;padding-inline:8px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.hud-destinations{position:absolute;bottom:22px;left:22px;padding:7px 9px;display:flex;align-items:center;gap:9px;max-width:calc(100% - 300px)}.destination-nav{gap:5px;flex:0 1 auto}.destination-nav button{flex-direction:column;justify-content:center;gap:4px;padding:5px 7px 6px;min-width:61px;font-size:8px;color:#947245;border:1px solid transparent;border-radius:2px;min-height:55px}.destination-nav button img{width:43px;height:31px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #6c562b18)}.destination-nav button:hover{background:#e5c99775;border-color:#d2ab70;color:#6b4c2e}.destination-nav button[aria-current="location"]{background:#e7cb98;border-color:#b88d58;color:#62482f}.destination-nav button[aria-current="location"]:after{display:none}.directory-button{border-color:#d3af7b;padding:12px 6px 12px 11px;color:#8f6c40}.directory-button svg{width:20px;height:20px;stroke-width:1.6}.building-sign{display:none}.building-tip{border:2px solid #a77a47;background:#fff0d0;box-shadow:inset 0 0 0 1px #efd2a0,0 4px #4c352630;border-radius:3px;color:#87673f;font-size:10px}.map-caption{display:none}
dialog{border:4px solid var(--wood);outline:2px solid var(--wood-dark);border-radius:4px;background:linear-gradient(#fff0d1,#f1d8aa);box-shadow:inset 0 0 0 3px #d4a36b,0 20px 70px #213c2560;color:var(--ink)}dialog::backdrop{background:#213a2a70;backdrop-filter:blur(2px)}.dialog-header h2{font-size:25px;color:#725134}.dialog-header .eyebrow{color:#aa8757;font-size:7px}.dialog-header .icon-button{border:2px solid #b38a57;background:#edd1a0;color:#90683a;border-radius:2px;box-shadow:inset 0 2px #fff0d2}.directory-card{border:2px solid #d3ae76;border-radius:3px;background:#fff0d277;box-shadow:inset 0 2px #fff9e5}.directory-card:hover{background:#ffedc3}.directory-card p{color:#a08355}.directory-card small{color:#937243}.small-dialog{width:min(410px,calc(100% - 40px));padding:23px}.dialog-note{color:#a08051;font-size:11px;line-height:1.8;margin:-5px 0 20px}.game-menu{display:grid;gap:10px}.game-menu .game-button{padding:13px;font-size:12px}.game-help{border-top:1px solid #caa873;margin-top:23px;padding-top:16px;display:grid;gap:10px;font-size:9px;color:#a08051}.loading-note{background:#e9d9ad;color:#8a6538}
@media(max-width:1200px){.hud-destinations{max-width:calc(100% - 230px)}}
@media(max-width:850px){.hud-brand{top:15px;left:15px;min-width:155px;padding:7px 10px;gap:7px}.hud-brand img{width:34px;height:34px}.hud-brand strong{font-size:22px}.hud-brand small{font-size:5px}.menu-dots{margin-left:5px}.hud-account{top:15px;right:15px}.hud-destinations{left:15px;bottom:15px;padding:5px;max-width:calc(100% - 195px)}.destination-nav{gap:2px}.destination-nav button{min-width:50px;font-size:7px;padding-inline:3px}.destination-nav button img{width:36px;height:28px}.directory-button{padding-inline:8px}}
@media(max-width:600px){.hud-brand{left:11px;top:12px;min-width:117px;padding:6px 8px;gap:5px}.hud-brand img{width:30px;height:30px}.hud-brand strong{font-size:19px}.hud-brand small{display:none}.menu-dots{font-size:12px;margin-left:2px}.hud-account{right:11px;top:12px;padding:4px;gap:4px}.game-button{font-size:8px;padding:8px}.avatar-button{width:31px;height:31px;padding:5px}.avatar-button svg{width:18px;height:18px}.hud-destinations{bottom:12px;left:11px;right:11px;max-width:none;gap:4px;padding:5px 6px}.destination-nav{gap:3px;overflow-x:auto;flex:1;justify-content:space-between;padding:0}.destination-nav button{font-size:7px;min-width:43px;gap:3px;padding:4px 3px;min-height:47px}.destination-nav button img{width:32px;height:24px}.directory-button{padding:8px 2px 8px 8px}.directory-button svg{width:16px;height:16px}#account-name{font-size:9px;max-width:100px}.hud-account [hidden]{display:none}.dialog-header h2{font-size:23px}.directory-card img{height:80px}.directory-card p{font-size:9px}.directory-card strong{font-size:12px}.small-dialog{padding:20px}}
@media(max-height:500px) and (min-width:700px){.hud-brand,.hud-account{top:12px}.hud-destinations{bottom:12px}.hud-destinations .destination-nav button img{width:30px;height:20px}.hud-destinations .destination-nav button{min-height:40px}}