/* ============================================================
   AOX TOWN — QUALITY UPGRADE: ジオラマの街 / 暮らしている部屋 / 吹き出し / やわらかいUI
   （main.css の後に読み込む。上書き専用）
   ============================================================ */
:root{--wood:#e6cfa6;--soft:0 6px 0 rgba(35,38,82,.16),0 12px 22px rgba(35,38,82,.14)}

/* ---- 街：テーブルの上のジオラマ ---- */
#stage{background:radial-gradient(circle at 50% 38%,#f6e8c9,#dfc596 80%)}
.map{inset:8px 7px 12px;border-radius:30px;border:5px solid #fff7df;
  box-shadow:0 7px 0 #b99a6a,0 16px 22px rgba(60,40,20,.28);
  background:radial-gradient(circle at 12% 30%,rgba(255,255,255,.2) 0 46px,transparent 47px),radial-gradient(circle at 82% 72%,rgba(255,255,255,.18) 0 60px,transparent 61px),radial-gradient(circle at 30% 88%,rgba(255,255,255,.14) 0 40px,transparent 41px),linear-gradient(#b8e6a4,#a3d98f)}
.map::before{border-radius:inherit;background:radial-gradient(circle,rgba(255,255,255,.22) 2px,transparent 3px) 0 0/26px 26px;opacity:.55}
.road{background:#e1dcf2;border-radius:14px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.6),0 2px 0 rgba(35,38,82,.12)}
.road::after{content:"";position:absolute;opacity:.85}
.road.h::after{left:10px;right:10px;top:7px;height:2px;background:repeating-linear-gradient(90deg,#fff 0 10px,transparent 10px 20px)}
.road.v::after{top:10px;bottom:10px;left:7px;width:2px;background:repeating-linear-gradient(0deg,#fff 0 10px,transparent 10px 20px)}
.plaza{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#ebe6f8;box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 2px 0 rgba(35,38,82,.1)}
.deco{font-size:23px;filter:drop-shadow(0 5px 0 rgba(30,80,30,.22))}
.deco.tree{transform-origin:50% 92%;animation:treeSway 5s ease-in-out infinite}
.deco.tree:nth-of-type(2n){animation-delay:-2s}
@keyframes treeSway{0%,100%{rotate:-2deg}50%{rotate:2.5deg}}
.deco.flw{font-size:16px}.deco.fount{font-size:30px}.deco.bench{font-size:18px}
.lamp{position:absolute;width:4px;height:20px;margin:-20px 0 0 -2px;background:#5c5a80;border-radius:2px;z-index:3;pointer-events:none}
.lamp::before{content:"";position:absolute;left:-4px;top:-6px;width:12px;height:12px;border-radius:50%;background:#fff6c0;box-shadow:0 0 0 rgba(255,226,120,0);transition:box-shadow 1s,background 1s}
body[data-night="1"] .lamp::before{background:#fff0a0;box-shadow:0 0 12px 8px rgba(255,226,120,.6)}
.clouds{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:9}
.cloud{position:absolute;left:-30%;width:90px;height:26px;border-radius:26px;background:rgba(255,255,255,.5);filter:blur(1px);animation:cloudGo 80s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{left:14px;top:-12px;width:36px;height:30px}.cloud::after{left:42px;top:-8px;width:28px;height:24px}
.cloud.c1{top:18%}.cloud.c2{top:52%;animation-duration:110s;animation-delay:-40s;scale:1.3}.cloud.c3{top:78%;animation-duration:95s;animation-delay:-70s;scale:.8}
@keyframes cloudGo{to{left:130%}}
body[data-night="1"] .cloud{opacity:0}
.bfly{position:absolute;font-size:13px;z-index:11;pointer-events:none;animation:bflyGo 11s ease-in-out infinite}
.bfly.b2{animation-duration:14s;animation-delay:-5s}
@keyframes bflyGo{0%,100%{translate:0 0}25%{translate:36px -22px}50%{translate:12px -40px}75%{translate:-30px -14px}}
body[data-night="1"] .bfly{display:none}
.ffly{position:absolute;display:none;width:5px;height:5px;border-radius:50%;background:#ffee88;box-shadow:0 0 8px 3px rgba(255,238,136,.8);z-index:11;pointer-events:none;animation:fflyGo 6s ease-in-out infinite}
.ffly.f2{animation-delay:-2s}.ffly.f3{animation-delay:-4s}
@keyframes fflyGo{0%,100%{translate:0 0;opacity:.2}30%{opacity:1}50%{translate:20px -18px}80%{translate:-14px -8px;opacity:.9}}
body[data-night="1"] .ffly{display:block}
/* 建物：屋根のひさし・ひさし/ネオン・厚みのある影 */
.bld .body{border-radius:12px;box-shadow:0 7px 0 rgba(35,38,82,.3),0 13px 14px rgba(35,38,82,.18)}
.bld .rf{position:absolute;left:-6px;right:-6px;top:-7px;height:25px;border-radius:12px 12px 6px 6px;background:var(--roof);box-shadow:0 4px 0 rgba(0,0,0,.18),inset 0 5px 0 rgba(255,255,255,.28);z-index:2}
.bld .nm{z-index:3}.bld .ico{z-index:3}
.bld .awn{position:absolute;left:6%;right:6%;top:47%;height:10px;background:repeating-linear-gradient(90deg,#fff 0 7px,var(--roof) 7px 14px);border-radius:0 0 9px 9px;box-shadow:0 2px 0 rgba(0,0,0,.18);z-index:2}
.bld .neon{position:absolute;left:8%;right:8%;top:50%;height:3px;border-radius:3px;background:#fff;box-shadow:0 0 6px 2px var(--roof);animation:neon 2.2s ease-in-out infinite}
@keyframes neon{50%{opacity:.55}}
.bld .ant{position:absolute;right:7%;bottom:9%;width:20%;height:22%;border-radius:5px;background:radial-gradient(circle,rgba(255,255,255,.9) 2px,transparent 3px) 0 0/7px 7px;opacity:.75}
.bld.f-park .rf{display:none}
.bld.f-park .body{background:linear-gradient(#a8e08f,#86cb70);border:3px dashed rgba(255,255,255,.7)}
.bld.f-park .body::before{background:radial-gradient(circle,#ff9ec0 2px,transparent 3px) 0 0/13px 13px;top:50%;height:46%;opacity:.8}
.bld.f-park .body::after{display:none}
.bld.f-park .ico{font-size:28px}
.bld.bump,.house.bump{animation:bump .35s ease-out}
@keyframes bump{0%{scale:1}30%{scale:.93 1.05}60%{scale:1.05 .97}100%{scale:1}}
.bld:active,.house:active{scale:.97}
.house .roof{height:24px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.18))}
.house .wall{height:32px;border-radius:2px 2px 8px 8px;box-shadow:0 5px 0 rgba(35,38,82,.28),0 9px 10px rgba(35,38,82,.15)}
.house .wall .win{position:absolute;top:8px;width:9px;height:9px;border-radius:2px;background:#fff6c8;box-shadow:inset 0 0 0 1.5px rgba(35,38,82,.32)}
.house .wall .w1{left:14%}.house .wall .w2{right:14%}
.house.night .wall .win{background:#ffe27a;box-shadow:0 0 9px rgba(255,226,122,.9)}
.house .chim{position:absolute;left:62%;top:-1px;width:8px;height:12px;background:#a96250;border-radius:2px 2px 0 0;z-index:-1}
.house .pot{position:absolute;right:-2px;bottom:12px;font-size:12px}
.house .nm{background:rgba(255,255,255,.75);border-radius:999px;padding:0 7px;display:inline-block;margin-top:6px}
.bld .hrs{background:rgba(255,255,255,.65);border-radius:999px;padding:0 6px;display:inline-block;opacity:1}
/* 覗きこみ演出 */
#stage::before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(circle at 50% 50%,transparent 38%,rgba(20,22,50,.5) 100%)}
#stage.peek::before{opacity:1}
#world{transition:transform .55s cubic-bezier(.45,.05,.2,1),opacity .3s}
#world.zoom{transition:transform .45s cubic-bezier(.65,0,.9,.45),opacity .4s}

/* ---- 住人まわり ---- */
.actor .tag,.spot-actor .tag,.ractor .tag{background:rgba(255,255,255,.92);color:var(--ink);border-radius:999px;padding:0 7px;box-shadow:0 2px 0 rgba(35,38,82,.22);font-weight:900}
.actor .tag{left:-24px;width:48px}
.actor.ME .tag{background:#ffb066;color:#fff}
.spot-actor .say,.ractor .sub{background:rgba(255,255,255,.95);border-radius:999px;box-shadow:0 2px 0 rgba(35,38,82,.16)}
.actor{transition:left 2s linear,top 2s linear}
/* ---- 感情の吹き出し ---- */
.bub{border-radius:17px;padding:2px 9px;font-size:17px;box-shadow:0 3px 0 rgba(35,38,82,.2);animation:bubFloat 2.8s ease-in-out infinite}
.bub.soft{background:#fffdf4;border:2px solid rgba(35,38,82,.08)}
.bub.in{animation:bubIn .42s cubic-bezier(.2,1.7,.4,1) both,bubFloat 2.8s ease-in-out .42s infinite}
.bub.out{animation:bubOut .26s ease-in forwards}
.bub.pr{animation:bubPulse .7s ease-in-out infinite alternate;font-size:21px}
.bub.pr.in{animation:bubIn .42s cubic-bezier(.2,1.7,.4,1) both,bubPulse .7s ease-in-out .42s infinite alternate}
@keyframes bubIn{from{scale:.2;opacity:0;translate:0 10px}to{scale:1;opacity:1;translate:0 0}}
@keyframes bubOut{to{scale:.4;opacity:0;translate:0 -12px}}
@keyframes bubFloat{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes bubPulse{from{scale:1}to{scale:1.14}}
.actor .bub{top:-92px}.spot-actor .bub{top:-108px}.ractor .bub{top:-86px}

/* ---- 部屋：暮らしている空間（ドールハウス） ---- */
.room{border-radius:20px;border-color:#7a5640;box-shadow:0 8px 0 rgba(0,0,0,.22),0 18px 26px rgba(40,25,10,.3),inset 0 18px 0 rgba(255,255,255,.14)}
.room .wallbar{left:-8px;right:-8px;top:-8px;height:calc(var(--cell) + 8px);border-radius:12px 12px 0 0;z-index:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.0) 0 14px,rgba(255,255,255,.16) 14px 28px),var(--rwall);box-shadow:inset 0 -6px 0 rgba(0,0,0,.1),0 3px 0 rgba(0,0,0,.08)}
.rug,.dw,.df,.cush{position:absolute;pointer-events:none}
.rug{z-index:1;opacity:.9;border-radius:16px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.08)}
.rug.round{border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,var(--c1) 0 9px,var(--c2) 9px 18px)}
.rug.stripe{background:repeating-linear-gradient(90deg,var(--c1) 0 13px,var(--c2) 13px 26px)}
.rug.rect{background:linear-gradient(var(--c1),var(--c2))}
.dw{z-index:1;box-shadow:0 3px 0 rgba(0,0,0,.14)}
.dw.win{border:3px solid #fff;border-radius:7px;background:linear-gradient(#9fd8ff,#e2f4ff);overflow:hidden}
body[data-night="1"] .dw.win{background:radial-gradient(circle at 22% 30%,#fff 1.2px,transparent 2px),radial-gradient(circle at 70% 55%,#fff 1px,transparent 2px),linear-gradient(#1c2050,#3a3f7a)}
.dw.win .cur{position:absolute;top:-2px;width:30%;height:112%;background:color-mix(in srgb,var(--rwall) 70%,#ff9ab0);box-shadow:inset -3px 0 0 rgba(0,0,0,.08)}
.dw.win .cur.l{left:-2px;border-radius:0 0 40% 0}.dw.win .cur.r{right:-2px;border-radius:0 0 0 40%}
.dw.mir{border:3px solid #d8b56c;border-radius:9px;background:linear-gradient(120deg,#eaf7ff 0 38%,#fff 38% 48%,#cfe9f8 48%)}
.dw.fr{display:grid;place-items:center;background:#fffdf6;border:3px solid #c9a27a;border-radius:6px}
.df{z-index:2;display:grid;place-items:center;filter:drop-shadow(0 3px 1px rgba(35,38,82,.28))}
.df.sm{z-index:4;filter:drop-shadow(0 2px 0 rgba(35,38,82,.25))}
.df.tall::before{content:"";position:absolute;left:12%;right:12%;bottom:4%;height:18%;border-radius:50%;background:rgba(35,38,82,.18);z-index:-1}
.cush{z-index:4;border-radius:32%;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.1),0 2px 0 rgba(0,0,0,.14)}
.cush.pil{background:#fffaf0}
.furn{box-shadow:0 4px 0 rgba(35,38,82,.28),0 8px 8px rgba(35,38,82,.12)}
.room::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:9;background:radial-gradient(ellipse at 50% 18%,rgba(255,232,160,.12),transparent 62%);transition:background 1.5s}
body[data-night="1"] .room::after{background:radial-gradient(ellipse at 50% 22%,rgba(255,226,150,.32),rgba(40,40,110,.2) 78%)}
.scene.interior{background:linear-gradient(var(--wall) 0 26%,var(--floor) 26%)}
.interior .sign{border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.2)}
.prop{filter:drop-shadow(0 5px 0 rgba(35,38,82,.2))}
/* ---- UI：丸く・やわらかく・押したくなる ---- */
#hud{border-radius:0 0 26px 26px;background:linear-gradient(#2d3270,#232652);box-shadow:0 5px 0 rgba(0,0,0,.18),0 10px 18px rgba(20,22,60,.25)}
#coin{background:linear-gradient(#ffe083,#ffc83a);color:#6b4300;box-shadow:0 3px 0 rgba(150,100,0,.35);padding:5px 13px}
#hud .ib{border-radius:16px;width:42px;height:42px}
#dock{border-radius:28px 28px 0 0;margin-top:-16px;padding-top:10px;background:linear-gradient(#2d3270,#232652);box-shadow:0 -6px 18px rgba(20,22,60,.3)}
#dock button{min-width:60px;transition:transform .12s}
#dock button i{display:grid;place-items:center;width:46px;height:36px;border-radius:16px;background:rgba(255,255,255,.1);font-size:23px}
#dock button:active{transform:scale(.92)}
#dock button:active i{background:rgba(255,255,255,.28)}
button{transition:transform .1s,filter .1s}
button:active:not([disabled]){transform:scale(.96)}
.btn{border-radius:18px;padding:13px 16px;min-height:48px;font-size:16px;box-shadow:0 5px 0 rgba(0,0,0,.22),0 8px 12px rgba(35,38,82,.12)}
.btn:active{box-shadow:0 2px 0 rgba(0,0,0,.22);translate:0 3px}
.shopbtn{border-radius:22px;padding:14px 26px;font-size:18px;box-shadow:0 6px 0 rgba(0,0,0,.22),0 10px 16px rgba(35,38,82,.16)}
.sheet{border-radius:32px 32px 0 0;padding:18px 16px calc(16px + var(--safe-b));box-shadow:0 -10px 30px rgba(20,22,60,.25)}
.sheet::before{content:"";display:block;width:44px;height:5px;border-radius:5px;background:#d8d2ea;margin:-8px auto 10px}
.card{border-radius:22px;border-width:3px;box-shadow:0 4px 0 rgba(35,38,82,.1);min-height:90px}
.card:active{translate:0 2px;box-shadow:0 1px 0 rgba(35,38,82,.1)}
.card i{font-size:32px}
.say{border-radius:20px;border-width:3px;padding:11px 14px}
.who .big{filter:drop-shadow(0 4px 0 rgba(35,38,82,.12))}
#ticker div{border-radius:20px;box-shadow:0 4px 0 rgba(35,38,82,.16),0 8px 12px rgba(35,38,82,.1)}
#banner{border-radius:22px}
#backBtn{border-radius:999px}
.pill{padding:2px 10px}
.tabs button{border-radius:16px}
@media (prefers-reduced-motion:reduce){.deco.tree,.cloud,.bfly,.ffly,.bub,.neon{animation:none!important}}
/* 街の住人は少し小さく（建物が隠れすぎない） */
.actor .rig{transform:scale(.8);transform-origin:50% 100%}
.fan .rig{transform:scale(.44)}.fan.near .rig{transform:scale(.48)}
.actor .bub{top:-82px}
.actor .tag{top:5px}
/* 眠っている人のラベルは顔にかぶらないよう薄く */
.ractor .rig[data-pose=sleep] ~ .tag,.ractor .rig[data-pose=sleep] ~ .sub{opacity:0;transition:opacity .3s}
.interior{background-image:radial-gradient(circle,rgba(255,255,255,.22) 2px,transparent 3px);background-size:22px 22px}