:root{--panel:rgba(4,11,24,.90);--line:rgba(126,211,255,.55);--cyan:#83e8ff;--purple:#bb83ff;--pink:#ff759f}
*{box-sizing:border-box}html,body{margin:0;background:#02050a;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;overscroll-behavior:none}body{display:flex;justify-content:center;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;touch-action:manipulation}#app{position:relative;width:min(100vw,430px);aspect-ratio:941/1672;max-height:100vh;overflow:hidden;background:#02050a}.screen{display:none;position:absolute;inset:0}.screen.active{display:block}.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}.hot{position:absolute;border:0;background:transparent;border-radius:14px}.title-start{left:22%;top:78%;width:58%;height:8%}.title-continue{left:23%;top:86%;width:28%;height:5%}.version{position:absolute;right:3%;bottom:1.5%;font-size:10px;opacity:.6}.particles{position:absolute;inset:0;pointer-events:none}.particles i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px #a894ff;animation:rise linear infinite}@keyframes rise{from{transform:translateY(30px);opacity:0}20%{opacity:1}to{transform:translateY(-80vh);opacity:0}}
.hud{position:absolute;z-index:12;padding:7px 10px;border:1px solid var(--line);border-radius:14px;background:var(--panel);backdrop-filter:blur(9px);font-size:11px}.hud strong{font-size:13px}.hud small{display:block;opacity:.8}.top-left{left:3%;top:3%}.top-right{right:3%;top:3%}.phase{position:absolute;z-index:12;left:3%;top:14%;padding:6px 10px;border:1px solid var(--line);background:var(--panel);border-radius:999px;font-size:10px}.time-tint{position:absolute;inset:0;z-index:2;pointer-events:none}
.town-actors{position:absolute;inset:0;z-index:8;pointer-events:none}.actor{position:absolute;width:72px;border:0;background:transparent;pointer-events:auto;transform:translate(-50%,-50%);transition:left 1.7s ease,top 1.7s ease;animation:bob 1.5s ease-in-out infinite}.actor img{width:58px;height:58px;border-radius:50%;box-shadow:0 0 18px rgba(120,210,255,.65)}.actor span{display:block;margin-top:2px;padding:2px 5px;border-radius:999px;background:rgba(0,0,0,.68);font-size:9px}@keyframes bob{50%{margin-top:-6px}}.town-log{position:absolute;z-index:10;left:3%;bottom:11%;width:53%;padding:9px 11px;border:1px solid var(--line);background:var(--panel);border-radius:13px;font-size:10px}.home-story{left:3%;top:74%;width:54%;height:14%}.home-room{left:59%;top:76%;width:19%;height:8%}.home-live{left:80%;top:76%;width:18%;height:8%}.home-shop{left:59%;top:84%;width:19%;height:7%}.home-members{left:79%;top:84%;width:19%;height:7%}
.room-play{position:absolute;left:0;right:0;top:17%;bottom:36%;z-index:6}.walk-area{position:absolute;left:32%;right:10%;top:43%;bottom:6%;border-radius:18px}.room-actor{position:absolute;left:68%;top:55%;width:72px;border:0;background:transparent;transform:translate(-50%,-50%);transition:left .45s linear,top .45s linear}.room-actor img{width:62px;height:62px;border-radius:50%;box-shadow:0 0 20px rgba(126,211,255,.65)}.room-actor span{display:block;font-size:9px;background:rgba(0,0,0,.7);border-radius:999px;padding:2px 5px}.speech{position:absolute;z-index:10;left:53%;top:27%;max-width:40%;padding:10px 12px;background:rgba(255,255,255,.94);color:#111;border-radius:18px;font-size:11px}.room-actions{position:absolute;z-index:12;left:3%;top:39%;display:grid;gap:8px}.room-actions button{min-width:95px;padding:10px 12px;border:1px solid var(--line);background:var(--panel);border-radius:12px}.status-card{position:absolute;z-index:11;left:3%;right:3%;bottom:14%;padding:10px;border:1px solid var(--line);background:var(--panel);border-radius:15px}.status-name{display:flex;justify-content:space-between;font-size:11px}.meter{display:grid;grid-template-columns:48px 1fr 28px;gap:6px;align-items:center;margin-top:5px;font-size:10px}.meter i{display:block;height:8px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}.meter b{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--cyan),var(--purple));border-radius:999px}.member-switch{position:absolute;z-index:13;left:3%;right:3%;bottom:8.4%;display:flex;justify-content:center;gap:8px}.member-switch button{border:1px solid var(--line);background:var(--panel);border-radius:50%;padding:2px}.member-switch img{display:block;width:38px;height:38px;border-radius:50%}.furniture{position:absolute;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(126,211,255,.55);background:rgba(4,11,24,.72);border-radius:12px;font-size:24px;touch-action:none}.locked-item{display:none}
.bottom-nav{position:absolute;z-index:20;left:3%;right:3%;bottom:1.5%;height:6.5%;display:flex;gap:4px;padding:4px;border:1px solid var(--line);background:rgba(3,9,20,.92);border-radius:16px}.bottom-nav button{flex:1;border:0;background:transparent;border-radius:12px;font-size:17px}.bottom-nav button span{display:block;font-size:9px;margin-top:1px}.bottom-nav .active{background:rgba(102,207,255,.13);box-shadow:inset 0 0 0 1px rgba(126,211,255,.5)}
.live-hud{position:absolute;z-index:10;left:3%;right:3%;top:57%;display:grid;gap:7px;padding:10px;border:1px solid var(--line);background:var(--panel);border-radius:14px;font-size:11px}.meter-line{height:8px;background:rgba(255,255,255,.1);border-radius:999px;margin-top:4px;overflow:hidden}.meter-line i{display:block;height:100%;width:78%;background:linear-gradient(90deg,#ff6f91,#76dcff)}.rhythm-area{position:absolute;z-index:8;left:8%;right:8%;top:18%;height:37%;overflow:hidden;border-radius:14px;border:1px solid rgba(126,211,255,.28);background:rgba(0,0,0,.12)}.lane{position:absolute;top:0;bottom:0;width:33.33%;border-right:1px solid rgba(255,255,255,.08)}.l1{left:0}.l2{left:33.33%}.l3{left:66.66%;border:0}.judge-line{position:absolute;left:0;right:0;bottom:48px;height:3px;background:rgba(126,232,255,.75);box-shadow:0 0 12px #6ddcff}.tap-pad{position:absolute;bottom:5px;width:30%;height:38px;border:1px solid var(--line);background:rgba(4,11,24,.86);border-radius:12px;font-size:11px}.p1{left:2%}.p2{left:35%}.p3{left:68%}.note{position:absolute;width:24%;height:20px;border-radius:8px;background:linear-gradient(90deg,#aa78ff,#72e7ff);box-shadow:0 0 12px rgba(126,211,255,.7);transform:translateX(13%)}.live-controls{position:absolute;z-index:12;left:3%;right:3%;bottom:10%;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px}.live-controls button{padding:12px 8px;border:1px solid var(--line);background:var(--panel);border-radius:13px;font-size:10px}.live-result{position:absolute;z-index:30;left:12%;right:12%;top:36%;padding:20px;border:1px solid var(--line);background:rgba(3,9,20,.95);border-radius:16px;text-align:center}.hidden{display:none!important}
.shop-wallet{position:absolute;z-index:12;right:3%;top:3%;padding:7px 10px;border:1px solid var(--line);background:var(--panel);border-radius:999px;font-size:11px}.shop-panel{position:absolute;z-index:10;left:3%;right:3%;top:49%;padding:10px;border:1px solid var(--line);background:rgba(3,9,20,.88);border-radius:15px}.shop-panel h3{margin:0 0 7px;font-size:12px}.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.shop-card{padding:8px 5px;border:1px solid rgba(126,211,255,.35);background:rgba(255,255,255,.04);border-radius:11px}.shop-card b{display:block;font-size:22px}.shop-card span,.shop-card small{display:block;font-size:9px}.inventory-box{position:absolute;z-index:10;left:3%;right:3%;bottom:10%;padding:9px;border:1px solid var(--line);background:var(--panel);border-radius:13px;font-size:10px}.inventory-box strong{display:block;margin-bottom:3px}
.member-overlay{position:absolute;z-index:10;left:3%;right:3%;top:20%;bottom:9%}.member-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.member-cards button{padding:6px 3px;border:1px solid rgba(126,211,255,.4);background:var(--panel);border-radius:12px}.member-cards img{width:100%;border-radius:50%}.member-cards b,.member-cards span{display:block;font-size:9px}.member-detail{position:absolute;left:0;right:0;bottom:2%;display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);background:var(--panel);border-radius:15px}.member-detail img{width:70px;height:70px;border-radius:50%}.member-detail h3{margin:0}.member-detail p{margin:3px 0;font-size:10px}
.story-dialog{position:absolute;z-index:10;left:5%;right:5%;bottom:32%;padding:14px;border:1px solid var(--line);background:var(--panel);border-radius:16px}.story-dialog p{margin:5px 0 0;font-size:12px}.story-choices{position:absolute;z-index:11;left:48%;right:5%;bottom:18%;display:grid;gap:7px}.story-choices button,.story-back{padding:11px;border:1px solid var(--line);background:var(--panel);border-radius:12px;font-size:10px}.story-effect{position:absolute;z-index:12;left:5%;bottom:19%;width:39%;font-size:11px}.story-back{position:absolute;z-index:11;left:5%;bottom:11%}
.mission-fab{position:absolute;z-index:50;right:3%;top:16%;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);box-shadow:0 0 14px rgba(126,211,255,.35)}.plain{background:radial-gradient(circle at top,#121a38,#050810)}.plain-card{margin:18% 7%;padding:18px;border:1px solid var(--line);background:var(--panel);border-radius:16px}.plain-card button{width:100%;margin-top:10px;padding:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:12px}.mission-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:11px}.toast{position:absolute;z-index:100;left:50%;bottom:10%;width:84%;transform:translate(-50%,20px);opacity:0;padding:12px;border:1px solid var(--line);background:rgba(2,7,17,.95);border-radius:14px;text-align:center;font-size:11px;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:430px){body{display:block}#app{width:100%;max-width:none;box-shadow:none}}@media(display-mode:standalone){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}}


/* ============================
   AOX TOWN LIFE SIM V5
   ============================ */

.town-zones{
  position:absolute; inset:0; z-index:5; pointer-events:none;
}
.zone{
  position:absolute; padding:4px 7px; border-radius:999px;
  font-size:8px; letter-spacing:.08em;
  background:rgba(4,11,24,.54);
  border:1px solid rgba(126,211,255,.22);
  opacity:.45;
}
.z-room{left:69%;top:29%}
.z-cafe{left:10%;top:60%}
.z-studio{left:48%;top:47%}
.z-plaza{left:46%;top:61%}

.auto-conversation{
  position:absolute; z-index:25; left:50%; top:27%; transform:translateX(-50%);
  width:72%; padding:10px 12px; border-radius:16px;
  background:rgba(3,9,20,.94); border:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  text-align:center;
}
.auto-conversation b{display:block;font-size:11px;color:var(--cyan)}
.auto-conversation p{margin:4px 0 0;font-size:11px}
.life-panel{
  position:absolute; z-index:16; right:3%; top:14%;
  display:flex; align-items:center; gap:7px;
  padding:5px 7px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line);
  font-size:9px;
}
.life-panel span{display:block;opacity:.65}
.life-panel b{font-size:9px}
.life-panel button{
  min-height:30px; border:1px solid rgba(126,211,255,.35);
  background:rgba(255,255,255,.04); border-radius:9px; padding:0 7px;
  font-size:9px;
}

.actor{
  transform-origin:50% 90%;
}
.actor.is-walking{
  animation:actorWalk .42s ease-in-out infinite alternate;
}
.actor.is-sitting{
  animation:none;
  transform:translate(-50%,-50%) scaleY(.88);
}
.actor.is-sleeping{
  animation:sleepPulse 2.4s ease-in-out infinite;
  filter:saturate(.75) brightness(.83);
}
.actor.is-eating::after{
  content:"🍜"; position:absolute; right:2px; top:39px; font-size:18px;
  animation:propBob .7s ease-in-out infinite alternate;
}
.actor.is-music::after{
  content:"♫"; position:absolute; right:0; top:0; font-size:18px;
  animation:noteFloat 1.2s ease-out infinite;
}
.actor.is-chatting{
  filter:brightness(1.1);
}
@keyframes actorWalk{
  from{margin-top:-2px;transform:translate(-50%,-50%) rotate(-1deg)}
  to{margin-top:3px;transform:translate(-50%,-50%) rotate(1deg)}
}
@keyframes sleepPulse{
  50%{opacity:.72;transform:translate(-50%,-50%) scale(.97)}
}
@keyframes propBob{to{transform:translateY(-4px)}}
@keyframes noteFloat{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-18px)}
}

.room-action-badge{
  position:absolute; z-index:13; left:58%; top:34%;
  padding:5px 8px; border-radius:999px;
  background:rgba(4,11,24,.82); border:1px solid var(--line);
  font-size:9px; letter-spacing:.08em;
}
.room-prop{
  position:absolute; z-index:15; left:67%; top:47%; font-size:32px;
  animation:propBob .7s ease-in-out infinite alternate;
}
.room-actor.action-walk{animation:roomWalk .42s ease-in-out infinite alternate}
.room-actor.action-sit{transform:translate(-50%,-50%) scaleY(.88)}
.room-actor.action-sleep{animation:sleepPulse 2.4s ease-in-out infinite}
.room-actor.action-eat img{animation:roomEat .55s ease-in-out infinite alternate}
@keyframes roomWalk{
  from{margin-top:-2px}to{margin-top:4px}
}
@keyframes roomEat{
  to{transform:translateY(-3px)}
}

.relation-panel{
  position:absolute; left:0; right:0; bottom:19%;
  padding:9px; border:1px solid var(--line);
  background:rgba(3,9,20,.90); border-radius:14px;
}
.relation-panel strong{font-size:10px}
.relation-row{
  display:grid; grid-template-columns:62px 1fr 28px; gap:6px;
  align-items:center; margin-top:6px; font-size:9px;
}
.relation-row i{
  display:block; height:6px; border-radius:999px;
  background:rgba(255,255,255,.1); overflow:hidden;
}
.relation-row i b{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
}

.life-event-flash{
  position:absolute; z-index:80; inset:0; pointer-events:none;
  background:radial-gradient(circle at center,rgba(179,130,255,.18),transparent 56%);
  animation:eventFlash .8s ease-out forwards;
}
@keyframes eventFlash{
  from{opacity:1}to{opacity:0}
}

@media (prefers-reduced-motion: reduce){
  .actor,.room-actor,.particles i{animation:none!important;transition:none!important}
}