/* Number Town: houses/styles.css gives the paper look and the cottages; this adds the map. */
html,body{height:100%;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
body{display:flex;flex-direction:column;margin:0}
.town-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:max(10px,env(safe-area-inset-top))}
.town-bar .garden-link{font-size:1.6rem;text-decoration:none;min-width:48px;min-height:48px;display:grid;place-items:center}
.town-bar .brand{font-size:1.3rem;font-family:ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif}
.hood-jump{min-height:52px;padding:0 14px;border-radius:999px;font-size:1.15rem;font-weight:900} /* signposts: '◀ 1' / '101 ▶' */
.hood-jump:disabled{visibility:hidden}
#map{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--paper-grain),var(--sage);touch-action:pan-x pan-y}
#world{position:relative}
.road{position:absolute;left:40px;right:40px;height:80px;border-radius:40px;background:var(--paper-grain),var(--cream);box-shadow:inset 0 -4px 0 var(--edge)}
.town-house{position:absolute;padding:0;border:0;background:none;box-shadow:none;cursor:pointer}
.town-house:hover{background:none;box-shadow:none}
.town-house .door-number{font-size:22px}
.town-house.knocking .cottage-scene{animation:knock .2s ease-in-out 2}
.mover{position:absolute;left:0;top:0;width:90px;text-align:center;z-index:3;will-change:transform;pointer-events:none}
.mover .resident{width:90px;height:90px}
.mover b{display:inline-block;background:var(--paper);border:1px solid var(--edge);border-radius:6px;padding:0 8px;font-size:15px}
.mover.npc{pointer-events:auto;cursor:pointer;opacity:.95}
.mover.me{z-index:4}
/* "This is you": a ring on the ground and the blue his-own tag (blue = his own, app-wide). */
.mover.me::before{content:'';position:absolute;left:5px;right:5px;top:78px;height:22px;border-radius:50%;border:4px solid #4a86b5;background:#cfe6f799;z-index:-1}
.mover.me b{background:#cfe6f7;border-color:#4a86b5}
.mover .knock-bubble{top:-38px}   /* bubbles: shared .knock-bubble from houses/styles.css */
#pad{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);gap:4px;z-index:10}
#pad button{width:64px;height:64px;border-radius:50%;font-size:2rem;padding:0;background:var(--paper);opacity:.92}
#pad [data-dir="0,-1"]{grid-column:2;grid-row:1}#pad [data-dir="-1,0"]{grid-column:1;grid-row:2}#pad [data-dir="1,0"]{grid-column:3;grid-row:2}#pad [data-dir="0,1"]{grid-column:2;grid-row:3}
@media (prefers-reduced-motion:reduce){.town-house.knocking .cottage-scene{animation:none}}

/* Two worlds: big picture buttons, the one you're in is outlined. */
.worlds{display:flex;gap:6px;margin-left:14px;padding-left:14px;border-left:2px solid var(--edge)}   /* apart from the 🏠 Home button */
.worlds button{font-size:1.8rem;min-width:60px;min-height:56px;padding:0 6px;border-radius:16px}
.worlds button[aria-pressed=true]{background:var(--gold);outline:3px solid var(--forest);outline-offset:1px}
/* World 2: Number Park. */
body.in-park #map{background:var(--paper-grain),#b9d39a}
.pond{position:absolute;border-radius:50%;background:radial-gradient(ellipse at 40% 35%,#cdeef5,#7cc3d6 70%,#5fa9bf);box-shadow:inset 0 -10px 20px #3f8aa255,0 0 0 10px #d9c79a}
.park-tree{position:absolute;font-size:110px;line-height:1;transform:translate(-50%,-80%);pointer-events:none;filter:drop-shadow(4px 8px 4px #3a4a2a40)}
.thing{position:absolute;line-height:1;padding:0;border:0;background:none;box-shadow:none;transform:translate(-50%,-50%);cursor:pointer;filter:drop-shadow(4px 8px 4px #3a4a2a40);transition:left .6s,top .6s}
.thing:hover{background:none;box-shadow:none}
.thing .knock-bubble{font-size:1.15rem;top:-30px}
.thing.play{animation:thing-play .6s ease-out}
@keyframes thing-play{0%{transform:translate(-50%,-50%) scale(1)}30%{transform:translate(-50%,-62%) scale(1.15) rotate(-6deg)}60%{transform:translate(-50%,-50%) scale(.95) rotate(4deg)}100%{transform:translate(-50%,-50%)}}
.mover.hop{animation:hop .5s ease-out}
@keyframes hop{0%,100%{margin-top:0}40%{margin-top:-28px}}
@media (prefers-reduced-motion:reduce){.thing.play,.mover.hop{animation:none}.thing{transition:none}}

.apple-drop{position:absolute;font-size:50px;z-index:2;pointer-events:none;animation:apple-drop 1s cubic-bezier(.5,0,1,.6) forwards}
@keyframes apple-drop{from{transform:translate(-50%,-160%)}to{transform:translate(-50%,40%)}}
.thing.fly{animation:kite-fly 2.2s ease-in-out}
@keyframes kite-fly{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-30%,-300%) rotate(12deg)}}
@media (prefers-reduced-motion:reduce){.apple-drop,.thing.fly{animation:none}}

/* Who do you want to be? The header button shows who you are now. */
.who-btn{margin-left:auto;display:flex;align-items:center;gap:6px;min-height:56px;padding:2px 12px 2px 4px;border-radius:18px;background:#cfe6f7;border:2px solid #4a86b5}
.who-btn .resident{width:50px;height:50px}
.who-btn b{font-size:1.1rem}
#picker{position:fixed;inset:0;z-index:20;background:#1d2b23cc;display:grid;place-items:center;padding:12px}
#picker[hidden]{display:none}
.pick-card{background:var(--paper);border-radius:26px;padding:16px 18px;width:min(760px,100%);max-height:100%;overflow:auto;border-bottom:8px solid var(--edge)}
.pick-card h2{margin:0 0 8px;text-align:center;font-family:ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif}
.pick-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding-bottom:10px;margin-bottom:10px;border-bottom:2px dashed var(--edge)}
.pick-pager{display:flex;align-items:center;justify-content:center;gap:12px;font-weight:800;font-size:1.2rem;margin-bottom:8px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.pick{display:flex;flex-direction:column;align-items:center;padding:6px 2px;min-height:96px;border-radius:16px}
.pick .resident{width:64px;height:64px}
.pick b{font-size:1rem}
.pick[aria-pressed=true]{background:#cfe6f7;outline:3px solid #4a86b5}
.pick-foot{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:12px}
.pick-foot input{font-size:1.2rem;font-weight:800;width:9.5ch;min-height:52px}
.pick-close{min-height:52px;padding:0 18px;font-weight:800}
.swap{position:absolute;left:50%;top:-96px;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;font-size:1.7rem;padding:0;background:var(--gold);pointer-events:auto;z-index:7}