*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#0b0d12;
  background-image:radial-gradient(1200px 600px at 50% -100px,#1a2130 0%,#0b0d12 70%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#dfe6f2;
}
#wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.tip{font-size:12px;color:#6b7688}

/* ---------- 舞台 ---------- */
#stage{
  position:relative;width:900px;height:560px;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 0 1px #263048;
}
#stage.shake{animation:shake .55s linear}
@keyframes shake{
  0%,100%{transform:translate(0,0)}15%{transform:translate(-7px,3px)}30%{transform:translate(6px,-4px)}
  45%{transform:translate(-5px,-3px)}60%{transform:translate(4px,4px)}75%{transform:translate(-3px,1px)}90%{transform:translate(2px,-2px)}
}
.bglayer{position:absolute;inset:0;background-color:#111}
#bgA,#bgB{transition:opacity .55s ease}
#actors{position:absolute;inset:0;z-index:5}
#fxlayer{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden}
#ui{position:absolute;inset:0;z-index:60}
#vignette{position:absolute;inset:0;z-index:50;pointer-events:none;
  box-shadow:inset 0 0 130px rgba(0,0,0,.5),inset 0 -20px 60px rgba(0,0,0,.25)}
#blackout{position:absolute;inset:0;z-index:80;background:#000;opacity:0;
  pointer-events:none;transition:opacity .5s ease}
#blackout.on{opacity:1;pointer-events:auto}
#minigame-layer{position:absolute;inset:0;z-index:70;display:none;background:rgba(4,6,12,.88)}

/* ---------- 对话框 ---------- */
#dialog{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(120%);
  width:92%;min-height:96px;z-index:75;padding:14px 18px 18px;
  background:rgba(12,16,28,.9);border:1px solid #3b4a6b;border-radius:12px;
  transition:transform .35s ease;cursor:pointer;user-select:none;
}
#dialog.show{transform:translateX(-50%) translateY(0)}
#dlg-speaker{
  display:inline-block;margin-top:-26px;margin-bottom:4px;padding:3px 14px;border-radius:999px;
  background:linear-gradient(135deg,#4f7dff,#7aa2ff);color:#fff;font-size:14px;font-weight:bold;
  box-shadow:0 2px 8px rgba(79,125,255,.45);min-width:0;
}
#dlg-speaker:empty{visibility:hidden}
#dlg-text{font-size:17px;line-height:1.7;letter-spacing:.5px;white-space:pre-wrap;min-height:52px}
#dlg-next{
  position:absolute;right:14px;bottom:8px;color:#7aa2ff;font-size:13px;opacity:0;
}
#dlg-next.blink{opacity:1;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}

/* ---------- 角色 Actor ---------- */
.actor{position:absolute;transform:translateX(-50%);
  transition:left 1.1s ease,bottom .45s ease}
.actor .spr{width:100%;animation:none}
.actor.flip .spr{transform:scaleX(-1)}
.actor.bob .spr{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.actor.flip.bob .spr{animation:bobflip 2.4s ease-in-out infinite}
@keyframes bobflip{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-6px)}}
.actor.tremble .spr{animation:tremble .14s infinite}
@keyframes tremble{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.actor.hop .spr{animation:hop .5s ease infinite}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.actor svg .tail{transform-box:fill-box;transform-origin:15% 85%;animation:swish 2.6s ease-in-out infinite}
@keyframes swish{0%,100%{transform:rotate(0deg)}50%{transform:rotate(10deg)}}
.actor svg .ahoge{transform-box:fill-box;transform-origin:50% 100%;animation:springy 3s ease-in-out infinite}
@keyframes springy{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}

/* 气泡 */
.bubble{
  position:absolute;z-index:8;background:#fff;color:#333;font-size:13px;font-weight:bold;
  padding:5px 11px;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,.3);
  animation:bubpop .25s ease;white-space:nowrap;
}
.bubble::after{content:"";position:absolute;left:22%;bottom:-8px;
  border:8px solid transparent;border-top-color:#fff;border-bottom:0}
@keyframes bubpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.bubble.fadeout{opacity:0;transition:opacity .6s}

/* ---------- 背景 ---------- */
.bg-title{background:
  radial-gradient(circle at 78% 24%,rgba(255,255,255,.9) 0 2px,transparent 3px),
  radial-gradient(circle at 62% 38%,rgba(255,255,255,.7) 0 2px,transparent 3px),
  radial-gradient(circle at 84% 52%,rgba(255,255,255,.6) 0 2px,transparent 3px),
  radial-gradient(circle at 70% 14%,rgba(255,255,255,.8) 0 2px,transparent 3px),
  radial-gradient(circle at 40% 20%,rgba(255,255,255,.5) 0 1px,transparent 2px),
  radial-gradient(circle at 25% 45%,rgba(255,255,255,.4) 0 1px,transparent 2px),
  radial-gradient(circle at 55% 70%,rgba(160,190,255,.15) 0 120px,transparent 200px),
  radial-gradient(ellipse 140px 140px at 78% 24%,rgba(180,205,255,.25),transparent 70%),
  radial-gradient(circle at 20% 85%,#23304e 0%,transparent 55%),
  linear-gradient(#0c1226 0%,#141c38 55%,#232f52 100%);}
.bg-create{background:
  radial-gradient(circle at 20% 30%,rgba(255,255,255,.5) 0 2px,transparent 3px),
  radial-gradient(circle at 82% 66%,rgba(255,255,255,.4) 0 2px,transparent 3px),
  radial-gradient(circle at 12% 75%,rgba(255,214,235,.35) 0 150px,transparent 240px),
  linear-gradient(135deg,#2a2740 0%,#463a63 45%,#6c5a86 80%,#8d76a4 100%)}
.bg-junk{background:
  radial-gradient(ellipse 500px 120px at 50% 108%,#161009 0 60%,transparent 61%),
  radial-gradient(circle at 82% 16%,rgba(230,230,220,.9) 0 34px,rgba(230,230,220,.12) 44px,transparent 46px),
  linear-gradient(#33291c 0%,#57432c 48%,#2c2115 72%,#191209 100%)}
.bg-home-room{background:
  linear-gradient(#0000 0 74%, #9db07f 74.5% 100%),
  linear-gradient(#0000 0 73%, #7a5236 73% 74.5%,#0000 74%),
  radial-gradient(ellipse 260px 300px at 18% 30%,rgba(255,236,180,.35),transparent 70%),
  repeating-linear-gradient(90deg,#caa06b 0 64px,#b98d58 64px 128px),
  linear-gradient(#eadfc6 0%,#dfcfab 70%,#b98d58 71%,#a97b4c 100%)}
.bg-door-rain{background:
  radial-gradient(ellipse 220px 320px at 50% 42%,rgba(60,70,95,.9),transparent 70%),
  linear-gradient(#3a4560 0%,#2c3650 50%,#1b2438 100%)}
.bg-street{background:
  linear-gradient(#0000 0 66%,#3d4454 66.5% 100%),
  linear-gradient(#0000 0 64%,#aab4c4 64% 66.5%,#0000 66%),
  repeating-linear-gradient(90deg,transparent 0 46px,#556 46px 76px),
  radial-gradient(circle at 70% 10%,rgba(255,250,225,.95) 0 30px,rgba(255,245,210,.25) 40px,transparent 42px),
  linear-gradient(#aac9ee 0%,#cadcef 46%,#e6ecf3 64%)}
.bg-alley{background:
  linear-gradient(90deg,#0e131c 0%,#1a2333 28%,#26314450 50%,#1a2333 72%,#0e131c 100%),
  linear-gradient(#0b101a 0%,#151d2e 60%,#0c1220 100%)}
.bg-night{background:
  radial-gradient(ellipse 150px 110px at 22% 30%,rgba(255,230,160,.18),transparent 70%),
  radial-gradient(ellipse 150px 110px at 78% 34%,rgba(255,230,160,.15),transparent 70%),
  radial-gradient(circle at 50% 105%,#0a1122 0 55%,transparent 56%),
  linear-gradient(#060a16 0%,#0d1426 55%,#101a30 100%)}
.bg-dawn{background:
  radial-gradient(ellipse 420px 200px at 50% 100%,rgba(255,196,130,.5),transparent 75%),
  linear-gradient(#3b3a63 0%,#7c5a7a 45%,#c97f6b 72%,#e8a96e 100%)}
.bg-warm{background:
  radial-gradient(ellipse 480px 260px at 50% 88%,rgba(255,220,160,.4),transparent 75%),
  radial-gradient(circle at 30% 25%,rgba(255,255,255,.5) 0 2px,transparent 3px),
  linear-gradient(#4a3550 0%,#7c5470 40%,#b87f72 70%,#d9a166 100%)}

/* 建筑 / 道具用 silhouettes */
.silhouette{filter:drop-shadow(0 0 1px rgba(0,0,0,.4))}

/* ---------- 天气 FX ---------- */
.drop{position:absolute;top:-24px;width:2px;height:16px;border-radius:2px;
  background:linear-gradient(rgba(170,200,255,.05),rgba(170,200,255,.65));
  animation:rainfall linear infinite}
@keyframes rainfall{to{transform:translateY(600px)}}
.flake{position:absolute;top:-16px;border-radius:50%;background:rgba(255,255,255,.85);
  animation:snowfall linear infinite}
@keyframes snowfall{
  to{transform:translateY(600px) translateX(var(--drift,40px))}}
.sparkle{position:absolute;z-index:45;pointer-events:none;font-size:18px;color:#ffe98a;
  text-shadow:0 0 8px rgba(255,230,120,.9);animation:twinkle 1s ease forwards}
@keyframes twinkle{0%{transform:scale(.3) rotate(0);opacity:0}
  40%{transform:scale(1.2) rotate(90deg);opacity:1}100%{transform:scale(.5) rotate(180deg);opacity:0}}

/* ---------- UI 选择 ---------- */
.ui-center{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:14px}
.panel{
  background:rgba(14,18,32,.88);border:1px solid #3b4a6b;border-radius:16px;
  padding:22px 30px;text-align:center;max-width:640px;
  box-shadow:0 14px 44px rgba(0,0,0,.55);backdrop-filter:blur(2px);
}
.panel h1{font-size:34px;letter-spacing:6px;margin-bottom:6px;
  background:linear-gradient(90deg,#9fb8ff,#ffd9ec,#9fb8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.panel h2{font-size:20px;color:#aebadc;margin-bottom:10px}
.panel p{font-size:14px;line-height:1.8;color:#b9c3da}
.btn{
  display:inline-block;margin-top:12px;padding:10px 34px;font-size:16px;color:#fff;
  background:linear-gradient(135deg,#4f7dff,#7aa2ff);border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 6px 18px rgba(79,125,255,.4);transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(79,125,255,.55)}
.btn.ghost{background:transparent;border:1px solid #55688f;box-shadow:none;color:#aebadc}
.choice-row{display:flex;gap:18px;justify-content:center;margin-top:8px}
.choice-card{
  width:270px;padding:18px 16px;border-radius:14px;cursor:pointer;text-align:center;
  background:rgba(20,26,44,.92);border:2px solid #3b4a6b;transition:all .2s;
}
.choice-card:hover{border-color:#7aa2ff;transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(79,125,255,.3)}
.choice-card .ico{font-size:44px}
.choice-card h3{margin:8px 0 6px;font-size:19px;color:#fff}
.choice-card p{font-size:13px;color:#9aa6c2;line-height:1.7}
.char-preview{width:210px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
input.naming{
  margin-top:10px;padding:9px 16px;font-size:16px;text-align:center;width:230px;
  border-radius:10px;border:1px solid #55688f;background:#12182b;color:#fff;outline:none}
input.naming:focus{border-color:#7aa2ff}

/* ---------- 小游戏 ---------- */
#mg-hud{position:absolute;top:12px;left:0;right:0;display:flex;align-items:center;
  justify-content:center;gap:14px;color:#dfe6f2;font-size:15px;text-shadow:0 1px 3px #000}
.mg-bar{width:280px;height:14px;border-radius:999px;background:#222b42;border:1px solid #445;overflow:hidden}
.mg-fill{height:100%;width:0%;background:linear-gradient(90deg,#ffd257,#ff9d5c);transition:width .25s}
.mg-arena{position:absolute;inset:36px 30px 30px;border-radius:12px;
  background:radial-gradient(ellipse 400px 200px at 50% 115%,#182238,#0d1322 70%);
  border:1px dashed #3b4a6b;overflow:hidden}
.mg-entity{position:absolute;transform:translate(-50%,-50%);z-index:2}
.mg-fish{font-size:22px;animation:fishtw 1.2s ease-in-out infinite;cursor:pointer}
@keyframes fishtw{0%,100%{transform:translate(-50%,-50%) rotate(-10deg) scale(1)}
  50%{transform:translate(-50%,-60%) rotate(10deg) scale(1.15)}}
.mg-player{z-index:5}
.mg-hurt{animation:tremble .3s 2}

/* 日数 */
#daychip{
  position:absolute;top:12px;left:14px;z-index:55;padding:4px 14px;border-radius:999px;
  background:rgba(10,14,26,.7);border:1px solid #3b4a6b;font-size:13px;color:#cfd8ec;
}

/* ---------- HUD 状态 ---------- */
#statchip{
  position:absolute;top:12px;right:14px;z-index:55;padding:4px 14px;border-radius:999px;
  background:rgba(10,14,26,.75);border:1px solid #3b4a6b;font-size:13px;color:#ffd9a8;
  letter-spacing:1px;
}
.toast{
  position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:90;
  background:rgba(22,30,52,.94);border:1px solid #5a6f9c;color:#ffe9b0;
  padding:6px 18px;border-radius:999px;font-size:13px;pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;white-space:nowrap;
}
.toast.out{opacity:0;transform:translateX(-50%) translateY(-14px)}

/* ---------- 交互选项 ---------- */
.pick-panel{max-width:540px;text-align:left}
.pick-q{font-size:16px;color:#fff;margin-bottom:12px;line-height:1.7}
.opt-list{display:flex;flex-direction:column;gap:10px}
.opt-btn{
  display:block;width:100%;text-align:left;padding:10px 14px;border-radius:10px;
  border:1px solid #465579;background:rgba(38,48,76,.88);color:#dfe6f2;font-size:14px;
  cursor:pointer;line-height:1.5;transition:all .15s;font-family:inherit;
}
.opt-btn:hover:not(:disabled){border-color:#7aa2ff;background:#33436b;transform:translateX(3px)}
.opt-btn em{display:block;margin-top:3px;font-style:normal;font-size:12px;color:#93a4c8}
.opt-btn:disabled{opacity:.45;cursor:not-allowed}
.opt-btn b{float:right;font-weight:normal;color:#ff9d7a;font-size:11px;line-height:1.5}