@import url('/tree-coin-motion.css');
@font-face{font-family:CityTiny5;src:url('/fonts/collection-pixel-retro-2026-09-24/tiny5/Tiny5-Regular.ttf') format('truetype');font-weight:400;font-display:block}
html body #home-screen[data-city-home=true]{background:#74df77}
#home-screen[data-city-home=true] .city-viewport{position:absolute;inset:0;overflow:clip;touch-action:none;overscroll-behavior:none;user-select:none;cursor:grab;isolation:isolate;outline:none;background:#74df77}
.city-viewport.is-dragging{cursor:grabbing!important}.city-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;touch-action:none}.city-sprite{position:absolute;pointer-events:none;transform-origin:50% 100%}.city-sprite>img{display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.city-actor{will-change:auto}
.city-ground-details{position:absolute;inset:0;pointer-events:none;image-rendering:pixelated;background-repeat:no-repeat}
/* Remove only the old cloth rectangles; preserve the seasonal building/masts.
   The native-size atlas advances as eight whole poses, never interpolated. */
.city-arena-wind>img{clip-path:polygon(0 0,80px 0,80px 50px,120px 50px,120px 0,200px 0,200px 50px,240px 50px,240px 0,300px 0,300px 310px,0 310px)}
.city-arena-flags{position:absolute;left:0;top:0;width:300px;height:60px;pointer-events:none;image-rendering:pixelated;background:var(--city-flags,url('/assets/city-arena-flags-v03/flags-atlas.png')) 0 0 / var(--city-flags-size,2400px 60px) no-repeat;animation:city-arena-wind 1600ms steps(8,end) infinite}
@keyframes city-arena-wind{to{background-position-x:-2400px}}
@media(prefers-reduced-motion:reduce){.city-arena-flags{animation:none;background-position-x:0}}
.city-tree-actor>.city-tree-shadow,.city-tree-actor>.city-tree-body{position:absolute;inset:0}.city-tree-actor>.city-tree-body{transform-origin:50% 92.8%}.city-tree-actor.city-tree-shaking>.city-tree-body{animation:city-tree-shake 650ms ease-in-out}
@keyframes city-tree-shake{0%,100%{transform:rotate(0deg)}15%{transform:rotate(-4deg)}35%{transform:rotate(3deg)}55%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.city-tree-actor.city-tree-shaking>.city-tree-body{animation:none}}
html body .city-actor>button.city-target{all:unset;position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;pointer-events:auto;cursor:pointer;touch-action:none}
html body .city-actor>button.city-sign{all:unset;position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:10px solid transparent;border-image:var(--city-sign,url('/assets/city-home-v03/cadre.png')) var(--city-sign-slice,10) fill / 10px / 0 stretch;image-rendering:pixelated;color:var(--city-sign-text,#5b392d);font-family:CityTiny5;font-weight:400;font-synthesis:none;text-align:center;white-space:pre;cursor:pointer;pointer-events:auto;touch-action:none}
.city-sign span{pointer-events:none}.city-actor>button:focus-visible{outline:4px dashed #fff4ce!important;outline-offset:6px!important}.city-text-measure{position:absolute;visibility:hidden;white-space:pre;display:inline-block;font-family:CityTiny5;font-weight:400;pointer-events:none}
.city-notice{position:absolute;left:50%;bottom:calc(var(--main-height,110px) + env(safe-area-inset-bottom,0px) + 18px);translate:-50% 0;max-width:min(480px,calc(100% - 32px));padding:14px 22px;border:4px solid #6b4534;background:#fff4ce;color:#5b392d;font:24px/1.2 CityTiny5;text-align:center;z-index:20;pointer-events:none}.city-notice button{pointer-events:auto}.city-notice[hidden]{display:none}.city-notice-pop{animation:city-panel-pop 320ms ease-out}@keyframes city-panel-pop{0%{transform:scale(.82)}45%{transform:scale(1.045)}75%{transform:scale(.985)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.city-notice-pop{animation:none}}
/* Keep the local test reset accessible without covering the city façades. */
html body #home-screen[data-city-home=true] #restart-creation{position:absolute!important;inset:auto!important;left:auto!important;right:max(10px,env(safe-area-inset-right,0px))!important;top:max(10px,env(safe-area-inset-top,0px))!important;transform:none!important;width:44px!important;height:44px!important;min-height:44px!important;padding:8px!important;z-index:30}
html body #home-screen[data-city-home=true] #restart-creation .restart-label{display:none!important}
html body #home-screen[data-city-home=true] #restart-creation svg{display:block;width:28px;height:28px}

:is(.city-actor,.scene-speech-anchor)>.city-mochi-bubble{position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 0;display:grid;place-items:center;box-sizing:border-box;width:62px;height:54px;border:8px solid transparent;border-image:url('/assets/interface-v2/pastel-ui/lavender-normal.png') var(--native-frame-slice,4) fill / var(--native-frame-corner,8px) / 0 repeat;pointer-events:none;animation:city-panel-pop 320ms ease-out;z-index:5;image-rendering:pixelated;image-rendering:crisp-edges;}
:is(.city-actor,.scene-speech-anchor)>.city-mochi-bubble>img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
@media(prefers-reduced-motion:reduce){:is(.city-actor,.scene-speech-anchor)>.city-mochi-bubble{animation:none}}