/* AOX TOWN — 日本時間に合わせて空の色が変わるミニチュアタウン */
:root{
  --ink:#232652; --ink2:#3a3f7a; --paper:#fffdf8; --sun:#ffcf3e; --coral:#ff6b5e; --mint:#8fd9b0; --grass:#a9dd9d; --road:#d7d2ea;
  --sky:#bfe6ff; --tint:rgba(255,255,255,0); --r:18px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--ink);font-family:"Hiragino Maru Gothic ProN","Yu Gothic UI","Noto Sans JP","Meiryo",system-ui,sans-serif;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;border:0}
#app{position:relative;height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column;background:var(--sky);overflow:hidden}
/* ---- HUD ---- */
#hud{display:flex;align-items:center;gap:10px;padding:calc(8px + var(--safe-t)) 12px 8px;background:var(--ink);color:#fff;z-index:30;box-shadow:0 3px 0 rgba(0,0,0,.18)}
#clk{font-size:30px;font-weight:900;letter-spacing:1px;line-height:1;font-variant-numeric:tabular-nums}
#phase{flex:1;font-size:12px;line-height:1.25;opacity:.9}
#phase b{display:block;font-size:13px;color:var(--sun)}
#coin{font-weight:900;font-size:16px;background:rgba(255,255,255,.14);padding:5px 10px;border-radius:999px;white-space:nowrap}
#hud .ib{background:rgba(255,255,255,.14);color:#fff;width:38px;height:38px;border-radius:12px;font-size:19px}
/* ---- Stage ---- */
#stage{position:relative;flex:1;overflow:hidden;background:var(--sky)}
#world{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .5s cubic-bezier(.6,.05,.3,1),opacity .25s}
#world.zoom{transition:transform .45s cubic-bezier(.7,0,.9,.4)}
#tintLayer{position:absolute;inset:0;pointer-events:none;background:var(--tint);mix-blend-mode:multiply;z-index:8;transition:background 2s}
#backBtn{position:absolute;left:10px;top:10px;z-index:25;background:var(--ink);color:#fff;border-radius:14px;padding:9px 14px;font-weight:800;font-size:15px;box-shadow:0 3px 0 rgba(0,0,0,.25)}
#sceneTitle{position:absolute;right:10px;top:10px;z-index:25;background:rgba(35,38,82,.88);color:#fff;border-radius:14px;padding:8px 12px;font-weight:800;font-size:14px;max-width:60%}
#banner{position:absolute;left:10px;right:10px;bottom:10px;z-index:26;background:var(--sun);color:var(--ink);border-radius:16px;padding:10px 14px;font-weight:800;font-size:14px;box-shadow:0 4px 0 rgba(0,0,0,.2);animation:bnr 1.6s ease-in-out infinite}
@keyframes bnr{50%{transform:translateY(-3px)}}
#ticker{position:absolute;left:10px;right:10px;top:54px;z-index:24;pointer-events:none;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#ticker div{background:rgba(255,255,255,.94);border-radius:14px;padding:6px 11px;font-size:13px;font-weight:700;box-shadow:0 3px 0 rgba(35,38,82,.18);max-width:92%;animation:tk 5s forwards}
@keyframes tk{0%{transform:translateY(-12px);opacity:0}8%{transform:none;opacity:1}85%{opacity:1}100%{opacity:0}}
/* ---- Dock ---- */
#dock{display:flex;justify-content:space-around;padding:8px 8px calc(8px + var(--safe-b));background:var(--ink);z-index:30}
#dock button{position:relative;background:transparent;color:#fff;font-size:11px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:4px 6px;border-radius:12px}
#dock button i{font-style:normal;font-size:24px;line-height:1}
#dock button .dot{position:absolute;top:0;right:8px;background:var(--coral);color:#fff;border-radius:999px;min-width:16px;height:16px;font-size:10px;line-height:16px;text-align:center;font-weight:900}
/* ---- Map ---- */
.map{position:absolute;inset:0;background:linear-gradient(var(--grass),var(--grass))}
.map::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.12) 38px 40px)}
.road{position:absolute;background:var(--road);border-radius:10px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}
.deco{position:absolute;font-size:22px;opacity:.9;pointer-events:none;transform:translate(-50%,-50%)}
.bld{position:absolute;width:25%;transform:translate(-50%,-50%);text-align:center;cursor:pointer}
.bld .body{position:relative;height:74px;border-radius:14px 14px 8px 8px;background:linear-gradient(var(--roof) 0 36%,var(--wall) 36% 100%);box-shadow:0 5px 0 rgba(35,38,82,.28);overflow:hidden}
.bld .body::before{content:"";position:absolute;left:10%;right:10%;top:44%;height:16px;background:radial-gradient(circle,rgba(255,255,255,.85) 3px,transparent 4px) 0 0/16px 16px;opacity:.55}
.bld .body::after{content:"";position:absolute;left:42%;bottom:0;width:16%;height:26%;background:rgba(35,38,82,.55);border-radius:6px 6px 0 0}
.bld .ico{position:absolute;left:0;right:0;top:3px;font-size:22px;line-height:1.1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))}
.bld .nm{position:absolute;left:0;right:0;top:36%;font-size:9.5px;font-weight:900;color:var(--ink);letter-spacing:.3px;white-space:nowrap;margin-top:1px}
.bld.closed .body{filter:grayscale(.9) brightness(.9)}
.bld .lock{position:absolute;right:4px;bottom:4px;font-size:15px;z-index:3}
.bld .hrs{font-size:9px;font-weight:700;color:var(--ink);opacity:.75;margin-top:3px}
.bld .in{position:absolute;left:-4px;right:-4px;top:-15px;display:flex;justify-content:center;gap:2px;z-index:4}
.chipf{width:22px;height:22px;border-radius:50%;border:3px solid;background:#fff;font-size:12px;line-height:16px;box-shadow:0 2px 0 rgba(0,0,0,.25);position:relative}
.chipf.pr::after{content:"❗";position:absolute;right:-8px;top:-12px;font-size:12px;animation:pulse .8s infinite alternate}
@keyframes pulse{to{transform:scale(1.3)}}
.bld.night .body::before{opacity:1;background:radial-gradient(circle,#ffe58a 3px,transparent 4px) 0 0/16px 16px}
.house{position:absolute;width:17%;transform:translate(-50%,-50%);text-align:center;cursor:pointer}
.house .roof{height:22px;clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--roof)}
.house .wall{position:relative;height:30px;background:var(--wall);border-radius:0 0 6px 6px;box-shadow:0 4px 0 rgba(35,38,82,.28)}
.house .wall::after{content:"";position:absolute;left:40%;bottom:0;width:20%;height:55%;background:rgba(35,38,82,.55);border-radius:4px 4px 0 0}
.house .nm{font-size:10px;font-weight:900;margin-top:5px;color:var(--ink)}
.house .in{position:absolute;left:0;right:0;top:-18px;display:flex;justify-content:center;gap:2px}
.house .zz{position:absolute;right:-2px;top:-8px;font-size:12px}
.house.night .wall{background-image:radial-gradient(circle at 25% 40%,#ffe58a 3px,transparent 4px)}
.actor{position:absolute;width:0;height:0;z-index:12;transition:left 2s linear,top 2s linear}
.actor .rig{position:absolute;left:-22px;top:-60px}
.actor .tag{position:absolute;left:-20px;width:40px;top:6px;text-align:center;font-size:9px;font-weight:900;background:rgba(35,38,82,.85);color:#fff;border-radius:6px;padding:0 2px}
.fan{position:absolute;width:0;height:0;z-index:9;transition:left 2s linear,top 2s linear}
.fan .rig{position:absolute;left:-22px;top:-60px;transform:scale(.5);transform-origin:50% 100%}
.fan.near .rig{transform:scale(.55)}
.fan .fx{position:absolute;left:-8px;top:-44px;font-size:11px}
/* ---- Bubble over head ---- */
.bub{position:absolute;left:50%;top:-24px;transform:translateX(-50%);background:#fff;border-radius:12px;padding:1px 6px;font-size:16px;line-height:1.25;box-shadow:0 3px 0 rgba(35,38,82,.25);white-space:nowrap;z-index:6;pointer-events:auto}
.bub::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-top-color:#fff;border-bottom:0}
.bub.pr{background:var(--sun);animation:pulse .7s infinite alternate;font-size:20px}
.bub.pr::after{border-top-color:var(--sun)}
/* ---- Building / Room scenes ---- */
.scene{position:absolute;inset:0;overflow:hidden}
.interior{background:linear-gradient(var(--wall) 0 26%,var(--floor) 26%);}
.interior::after{content:"";position:absolute;left:0;right:0;top:26%;bottom:0;background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(35,38,82,.07) 38px 40px)}
.interior .sign{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:12px;padding:6px 16px;font-weight:900;font-size:16px;z-index:3;white-space:nowrap}
.prop{position:absolute;transform:translate(-50%,-50%);font-size:34px;z-index:2;filter:drop-shadow(0 4px 0 rgba(35,38,82,.2))}
.spot-actor{position:absolute;width:0;height:0;z-index:5;transition:left 1.2s ease-in-out,top 1.2s ease-in-out}
.spot-actor .rig{position:absolute;left:-22px;top:-62px;transform:scale(1.15);transform-origin:50% 100%}
.spot-actor .tag{position:absolute;left:-30px;width:60px;top:6px;text-align:center;font-size:10px;font-weight:900;background:rgba(35,38,82,.85);color:#fff;border-radius:7px;padding:1px 3px}
.spot-actor .say{position:absolute;left:-44px;width:88px;top:20px;text-align:center;font-size:11px;font-weight:800;color:var(--ink);background:rgba(255,255,255,.92);border-radius:9px;padding:1px 4px}
.shopbtn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:20;background:var(--coral);color:#fff;border-radius:18px;padding:12px 22px;font-weight:900;font-size:17px;box-shadow:0 5px 0 rgba(0,0,0,.25)}
.shopbtn.alt{bottom:78px;background:var(--ink2)}
.room{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:16px;background:repeating-linear-gradient(90deg,var(--fl1) 0 var(--cell),var(--fl2) var(--cell) calc(var(--cell)*2));border:8px solid #6a4a3a;box-shadow:0 6px 0 rgba(0,0,0,.25),inset 0 18px 0 rgba(255,255,255,.18)}
.room .wallbar{position:absolute;left:-8px;right:-8px;top:-8px;height:20px;background:var(--rwall);border-radius:10px 10px 0 0}
.furn{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:calc(var(--cell)*.95);line-height:1;box-shadow:0 3px 0 rgba(35,38,82,.3);z-index:2}
.furn.decor{background:transparent;box-shadow:none;font-size:calc(var(--cell)*.85)}
.door{position:absolute;background:#6a4a3a;border-radius:6px 6px 0 0;z-index:1;display:flex;align-items:flex-end;justify-content:center;font-size:11px;color:#fff;font-weight:800}
.ractor{position:absolute;width:0;height:0;z-index:6}
.ractor .rig{position:absolute;left:-22px;top:-60px;transform:scale(calc(var(--cell)/34));transform-origin:50% 100%}
.ractor .tag{position:absolute;left:-26px;width:52px;top:4px;text-align:center;font-size:9px;font-weight:900;background:rgba(35,38,82,.85);color:#fff;border-radius:6px}
.ractor .sub{position:absolute;left:-40px;width:80px;top:16px;text-align:center;font-size:10px;font-weight:800;background:rgba(255,255,255,.9);border-radius:8px}
/* ---- Sheets ---- */
#ov{position:absolute;inset:0;z-index:50;display:flex;align-items:flex-end;background:rgba(20,22,50,.5);animation:fade .2s}
@keyframes fade{from{opacity:0}}
#ov.hide{display:none}
.sheet{width:100%;max-height:88%;overflow:auto;background:var(--paper);border-radius:26px 26px 0 0;padding:14px 14px calc(14px + var(--safe-b));animation:up .28s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.sheet h2{margin:2px 0 8px;font-size:19px;display:flex;align-items:center;gap:8px}
.sheet h3{margin:12px 0 6px;font-size:14px;opacity:.75}
.sheet .x{margin-left:auto;background:#ece8f6;border-radius:12px;width:36px;height:36px;font-size:16px;font-weight:900}
.btn{background:var(--ink);color:#fff;border-radius:14px;padding:12px 14px;font-weight:800;font-size:15px;box-shadow:0 4px 0 rgba(0,0,0,.25);display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn.sun{background:var(--sun);color:var(--ink)} .btn.coral{background:var(--coral)} .btn.mint{background:#3aa876} .btn.ghost{background:#ece8f6;color:var(--ink);box-shadow:none}
.btn[disabled]{opacity:.4;box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.card{background:#fff;border:2px solid #e4def2;border-radius:16px;padding:8px 6px;text-align:center;font-size:12px;font-weight:800;position:relative;min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.card i{font-style:normal;font-size:30px;line-height:1.1}
.card small{font-weight:700;opacity:.7;font-size:11px}
.card.dim{opacity:.4}
.card.sel{border-color:var(--coral);background:#fff3ef}
.pill{display:inline-block;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:800;background:#ece8f6}
.pill.LOVE{background:#ffd1e0}.pill.LIKE{background:#ffe9a8}.pill.NORMAL{background:#e8e8ee}.pill.DISLIKE{background:#cfd8ff}.pill.HATE{background:#cbbfd8}
.bar{height:10px;border-radius:6px;background:#e4def2;overflow:hidden}.bar b{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--coral));border-radius:6px}
.who{display:flex;gap:12px;align-items:center}
.who .big{width:64px;height:84px;position:relative;flex:none;display:grid;place-items:end center}
.who .big .rig{transform:scale(1.35);transform-origin:50% 100%}
.say{background:#fff;border:2px solid #e4def2;border-radius:16px;padding:9px 12px;font-size:15px;font-weight:700;margin:8px 0;position:relative}
.say.pr{border-color:var(--sun);background:#fff9e0}
.hint{font-size:12px;font-weight:800;color:var(--coral);margin-top:3px}
.rel{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.rel button{background:#fff;border:2px solid #e4def2;border-radius:12px;padding:5px 8px;font-size:12px;font-weight:800}
.rel button.bad{border-color:var(--coral);background:#fff0ee}
.empty{padding:14px;text-align:center;opacity:.7;font-weight:700}
.news{padding:8px 0;border-bottom:2px dashed #e4def2;font-size:14px;font-weight:700;display:flex;gap:8px}
.news time{opacity:.55;font-size:12px;min-width:42px;font-variant-numeric:tabular-nums}
.alb{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:10px 12px;margin:8px 0;position:relative;box-shadow:4px 4px 0 var(--sun)}
.alb b{font-size:15px}.alb small{display:block;opacity:.7;font-size:11px;font-weight:700;margin-top:3px}
.stamp{position:absolute;right:8px;top:8px;font-size:11px;font-weight:900;color:var(--coral);border:2px solid var(--coral);border-radius:8px;padding:0 5px;transform:rotate(6deg)}
.tabs{display:flex;gap:6px;margin:6px 0 10px;flex-wrap:wrap}.tabs button{background:#ece8f6;border-radius:12px;padding:7px 12px;font-weight:800;font-size:13px}.tabs button.on{background:var(--ink);color:#fff}
.conv{display:flex;flex-direction:column;gap:8px;min-height:140px}
.conv .l{max-width:82%;padding:9px 12px;border-radius:16px;font-size:15px;font-weight:700;background:#fff;border:2px solid var(--c,#e4def2);animation:up .25s}
.conv .l.me{align-self:flex-end;background:#fff5d6}
.conv .l b{display:block;font-size:11px;color:var(--c);margin-bottom:1px}
input.t{width:100%;font-size:18px;padding:11px 13px;border:3px solid #e4def2;border-radius:14px;font-family:inherit;font-weight:800;color:var(--ink);background:#fff}
.sw{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 8px}.sw button{width:36px;height:36px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px #cfc8e6;font-size:18px;background:#fff}.sw button.on{box-shadow:0 0 0 3px var(--coral)}
.pv{height:150px;border-radius:20px;background:linear-gradient(var(--sky),var(--grass));display:grid;place-items:end center;padding-bottom:12px;margin-bottom:6px}
.pv .rig{transform:scale(1.9);transform-origin:50% 100%}
.title{position:absolute;inset:0;z-index:60;background:linear-gradient(#7fd0ff,#c7efff 45%,var(--grass) 45%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}
.title h1{margin:0;font-size:44px;letter-spacing:2px;color:var(--ink);text-shadow:3px 3px 0 #fff}
.title p{margin:0;font-weight:800}
.toast{position:absolute;left:50%;top:40%;z-index:70;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.toast .tb{background:#fff;border-radius:22px;padding:14px 22px;box-shadow:0 6px 0 rgba(35,38,82,.3);font-weight:900;font-size:19px;animation:pop 2.4s forwards;min-width:200px}
.toast .big{display:block;font-size:56px;line-height:1.1}
.toast small{font-size:13px;opacity:.75;font-weight:700}
@keyframes pop{0%{transform:scale(.3);opacity:0}12%{transform:scale(1.08);opacity:1}18%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}
.spark{position:absolute;z-index:40;pointer-events:none;font-size:22px;animation:sp 1.3s forwards}
@keyframes sp{from{transform:translate(0,0) scale(.5);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1.4);opacity:0}}
/* ---- mini games ---- */
.gbox{height:240px;border-radius:20px;background:var(--ink2);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:900;text-align:center;position:relative;overflow:hidden}
.track{position:relative;height:56px;border-radius:28px;background:#ffffff22;margin:30px 14px}
.track .zone{position:absolute;left:42%;width:16%;top:0;bottom:0;background:#ffcf3e55;border:3px solid var(--sun);border-radius:28px}
.track .orb{position:absolute;top:6px;width:44px;height:44px;border-radius:50%;background:radial-gradient(#fff,#ff6b5e);box-shadow:0 0 18px #ff6b5e;margin-left:-22px}
.pads{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;width:100%}.pads button{height:78px;border-radius:20px;opacity:.55;box-shadow:0 5px 0 rgba(0,0,0,.3)}.pads button.lit{opacity:1;filter:brightness(1.5);transform:scale(1.05)}
.ractor{transition:left .23s linear,top .23s linear}
.sheet .rowb{display:flex;gap:8px;margin-top:10px}.sheet .rowb .btn{flex:1}
.mini{font-size:11px;opacity:.7;font-weight:700}
.hudb{background:var(--coral)!important;animation:pulse .8s infinite alternate}
.eatstage{position:relative;height:210px;border-radius:20px;background:linear-gradient(#ffe9c7,#ffd49a);overflow:hidden;margin:6px 0}
.eatstage .tbl{position:absolute;left:58%;bottom:34px;font-size:50px}
.eatstage .fd{position:absolute;left:62%;bottom:92px;font-size:34px}
.eatstage .fd.eat{animation:bob .5s infinite}
.eatstage .ch{position:absolute;bottom:30px;left:6%;transition:left 1.2s linear}
.eatstage .ch .rig{transform:scale(1.7);transform-origin:50% 100%}
.eatstage .rx{position:absolute;left:0;right:0;top:12px;text-align:center;font-size:54px;animation:pop2 .6s both}
@keyframes pop2{from{transform:scale(.2);opacity:0}}
.newstamp{position:absolute;right:10px;top:10px;background:var(--coral);color:#fff;font-weight:900;border-radius:10px;padding:2px 8px;transform:rotate(8deg);font-size:13px}
.lv{font-size:30px;font-weight:900;text-align:center;color:var(--coral);margin:4px 0}
.gain{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0}.gain span{background:#fff3c4;border-radius:999px;padding:3px 12px;font-weight:900;font-size:14px}
.solved{background:#d9f7e6;border:2px solid #3aa876;border-radius:14px;padding:6px 10px;font-weight:900;text-align:center;margin:6px 0}
.pdots{display:flex;gap:4px;justify-content:center;font-size:11px;margin-top:2px}
.card.off i{filter:grayscale(1) brightness(1.4);opacity:.5}
.coachArrow{position:absolute;z-index:27}
#stage.rain::after{content:'';position:absolute;inset:0;z-index:9;pointer-events:none;background:repeating-linear-gradient(105deg,transparent 0 9px,rgba(120,150,220,.28) 9px 10px);background-size:60px 60px;animation:rainf .5s linear infinite}
@keyframes rainf{to{background-position:-20px 60px}}
@keyframes bob{50%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.rb,.rb *,.bub,.chipf,#banner{animation:none!important}.actor,.fan,.spot-actor{transition-duration:.01s}}
.actor .bub{top:-90px}.spot-actor .bub{top:-104px}.ractor .bub{top:-84px}
.actor .tag,.spot-actor .tag,.ractor .tag{white-space:nowrap;overflow:visible}
.actor.ME .tag{background:#ff8c42}
.interior .counter{position:absolute;left:6%;right:6%;top:33%;height:34px;border-radius:12px;box-shadow:0 5px 0 rgba(35,38,82,.25);z-index:1;opacity:.85}
.interior .sign{z-index:4}