/* =========================================================
   团子町奇谭 ～ 笑气大作战 ～  样式表
   ========================================================= */
:root{
  --huang:#FFD23F;
  --huang-deep:#F5A623;
  --cream:#FFF8E7;
  --ink:#4A3A22;
  --ink-soft:#7A6347;
  --purple:#9B6BE3;
  --purple-deep:#5B2E9E;
  --pink:#FFB6C8;
  --mint:#8FD9A8;
  --panel-bg:rgba(255,250,238,.94);
  --panel-border:#E8D3A9;
  --shadow:0 10px 30px rgba(92,64,20,.28);
  --ui-font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:var(--ui-font);
  background:#1b1520;
  color:var(--ink);
  overflow:hidden;
  user-select:none;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  -webkit-user-select:none;
}
#app{position:fixed;inset:0;overflow:hidden;height:100vh;height:100dvh}
#share-thumb{position:absolute;left:-9999px;top:0;width:1200px;height:630px;pointer-events:none}
button,.cbtn,.choice-item,.tbtn,.icon-btn{touch-action:manipulation}
.screen{position:absolute;inset:0}
.hidden{display:none !important}

/* ---------------- 标题画面 ---------------- */
#title-screen{background:linear-gradient(#5FA8E8 0%,#9BD3F5 42%,#FFE7B0 72%,#FFC46B 100%);overflow:hidden}
.title-sky{position:absolute;inset:0}
.title-sun{position:absolute;left:12%;top:12%;width:16vh;height:16vh;border-radius:50%;
  background:radial-gradient(circle,#FFF6C9 0%,#FFD75E 45%,rgba(255,200,80,0) 70%);filter:blur(1px);
  animation:sunPulse 6s ease-in-out infinite}
.title-cloud{position:absolute;background:#fff;border-radius:100px;opacity:.85;filter:blur(.4px)}
.title-cloud.c1{width:34vw;height:8vh;left:-10vw;top:16%;animation:drift 42s linear infinite}
.title-cloud.c2{width:24vw;height:6vh;left:20vw;top:30%;opacity:.6;animation:drift 60s linear infinite}
.title-cloud.c3{width:40vw;height:9vh;left:50vw;top:9%;opacity:.7;animation:drift 52s linear infinite}
@keyframes drift{from{transform:translateX(-20vw)}to{transform:translateX(120vw)}}
@keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.title-hill{position:absolute;bottom:0;width:120vw;height:34vh;border-radius:50% 50% 0 0}
.title-hill.h1{left:-20vw;background:linear-gradient(#8FD98F,#5FB36A);opacity:.95}
.title-hill.h2{left:20vw;bottom:-4vh;height:28vh;background:linear-gradient(#A8E39A,#79C077)}
.title-town{position:absolute;bottom:8vh;left:0;right:0;height:12vh;
  background:radial-gradient(ellipse 62% 120% at 50% 100%,rgba(255,255,255,.42),transparent 70%),
             repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 20px,rgba(255,255,255,0) 20px 56px);
  mask-image:linear-gradient(transparent,#000 45%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 45%,transparent);opacity:.9}
.title-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(60,30,0,.35) 100%)}

.title-huang{position:absolute;bottom:5vh;left:7vw;height:42vh;filter:drop-shadow(0 12px 18px rgba(60,40,0,.35));animation:bob 4.2s ease-in-out infinite}
.title-huang2{position:absolute;bottom:1vh;right:26vw;height:26vh;opacity:0;filter:drop-shadow(0 10px 14px rgba(60,40,0,.35))}
.title-jiji{position:absolute;bottom:7vh;left:28vw;height:18vh;filter:drop-shadow(0 10px 14px rgba(60,40,0,.35));animation:bob 3.4s ease-in-out infinite .3s}
.title-nyao{position:absolute;bottom:6vh;right:14vw;height:15vh;filter:drop-shadow(0 10px 14px rgba(60,40,0,.35));animation:bob 3.8s ease-in-out infinite .6s}
.title-viel{position:absolute;top:6vh;right:6vw;height:20vh;border-radius:50%;
  box-shadow:0 0 40px rgba(255,240,190,.9);animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-1.6vh) rotate(1deg)}}

.title-wrap{position:absolute;left:0;right:0;top:8vh;text-align:center;pointer-events:none;z-index:5}
.title-kicker{display:inline-block;margin:0 0 .6em;padding:.3em 1em;border-radius:100px;
  background:rgba(255,255,255,.7);color:#8A5A17;font-size:clamp(11px,1.4vh,15px);letter-spacing:.18em}
.title-main{margin:0;font-size:clamp(38px,9.5vh,96px);line-height:1;color:#fff;letter-spacing:.06em;
  text-shadow:0 3px 0 var(--huang-deep),0 6px 0 #C97F12,0 12px 24px rgba(80,40,0,.5)}
.title-sub{margin:.2em 0 0;font-size:clamp(16px,3.4vh,34px);color:#FFF3C4;letter-spacing:.3em;
  text-shadow:0 2px 6px rgba(90,50,0,.6)}
.title-catch{margin:1.2em auto 0;max-width:36em;color:#4A3417;font-size:clamp(12px,1.9vh,18px);
  background:rgba(255,255,255,.62);padding:.7em 1.4em;border-radius:14px;display:inline-block}
.title-menu{position:relative;pointer-events:auto;margin-top:2.2em;display:flex;flex-wrap:wrap;gap:.7em;justify-content:center}
.title-foot{margin-top:1.6em;font-size:clamp(10px,1.5vh,13px);color:#5B4423;background:rgba(255,255,255,.5);
  display:inline-block;padding:.6em 1.2em;border-radius:12px;line-height:1.7}

.tbtn{
  font-family:inherit;font-size:clamp(13px,2vh,18px);font-weight:700;color:#61430F;cursor:pointer;
  padding:.62em 1.5em;border-radius:100px;border:2px solid #E2B96A;
  background:linear-gradient(#FFFDF3,#FFE9B8);box-shadow:0 4px 0 #D9A94E,0 8px 16px rgba(90,60,10,.25);
  transition:transform .12s,box-shadow .12s,filter .12s;
}
.tbtn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.tbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #D9A94E}
.tbtn.primary{background:linear-gradient(#FFF0A8,#FFC93C);border-color:#E8A521;box-shadow:0 4px 0 #C98A12,0 8px 18px rgba(90,60,10,.3)}
.tbtn.danger{background:linear-gradient(#FFD9D0,#FF9E8A);border-color:#E57A62;color:#7A2413;box-shadow:0 4px 0 #C9603F}

/* ---------------- 游戏画面 ---------------- */
#game{overflow:hidden}
.bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .5s}
.bg.extra{pointer-events:none;opacity:0;transition:opacity .6s}
.bg.dawn{pointer-events:none;opacity:0;transition:opacity .8s}

/* 场景背景：程序化生成图片（见 tools/make_bgs.py），低饱和以突出黄色立绘 */
.bg.base{background-position:center;background-size:cover;background-repeat:no-repeat}
.bg.base::after,.bg.fx::after{content:"";position:absolute;inset:0;pointer-events:none}
.bg.base[data-scene="street"]{background-image:url("../assets/bg/scene_street.jpg")}
.bg.base[data-scene="home"]{background-image:url("../assets/bg/scene_home.jpg")}
.bg.base[data-scene="pinkroom"]{background-image:url("../assets/bg/scene_pinkroom.jpg")}
.bg.base[data-scene="park"]{background-image:url("../assets/bg/scene_park.jpg")}
.bg.base[data-scene="farm"]{background-image:url("../assets/bg/scene_farm.jpg")}
.bg.base[data-scene="roof"]{background-image:url("../assets/bg/scene_roof.jpg")}
.bg.base[data-scene="library"]{background-image:url("../assets/bg/scene_library.jpg")}
.bg.base[data-scene="shrine"]{background-image:url("../assets/bg/scene_shrine.jpg")}
.bg.base[data-scene="festival"]{background-image:url("../assets/bg/scene_festival.jpg")}
.bg.base[data-scene="heaven"]{background-image:url("../assets/bg/scene_heaven.jpg")}
.bg.base[data-scene="eclipse"]{background-image:url("../assets/bg/scene_eclipse.jpg")}
.bg.base[data-scene="river"]{background-image:url("../assets/bg/scene_river.jpg")}
.bg.base[data-scene="market"]{background-image:url("../assets/bg/scene_market.jpg")}
.bg.base[data-scene="void"]{background-image:url("../assets/bg/scene_void.jpg")}
.bg.base[data-scene="school"]{background-image:url("../assets/bg/scene_school.jpg")}
/* 气氛层：灯光呼吸 / 雷光闪烁 */
.bg.fx{background:none}
.bg.fx[data-scene="festival"]{background:radial-gradient(ellipse 70% 34% at 50% 12%,rgba(255,196,120,.22),transparent 70%);animation:glowBreath 6s ease-in-out infinite}
.bg.fx[data-scene="heaven"]{background:radial-gradient(ellipse 60% 40% at 50% 30%,rgba(255,248,214,.5),transparent 72%);animation:glowBreath 8s ease-in-out infinite}
.bg.fx[data-scene="shrine"]{background:radial-gradient(circle at 50% 8%,rgba(255,226,170,.26),transparent 60%)}
.bg.fx[data-scene="roof"]{background:radial-gradient(circle at 80% 18%,rgba(255,250,220,.2),transparent 26%)}
.bg.fx[data-scene="eclipse"]{background:radial-gradient(ellipse 70% 50% at 50% 26%,rgba(190,140,255,.26),transparent 70%);animation:eclipseFlash 7s ease-in-out infinite}
@keyframes glowBreath{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes eclipseFlash{0%,84%,100%{opacity:.45}88%{opacity:1}90%{opacity:.35}92%{opacity:.9}94%{opacity:.4}}

/* 全局暗角 */
#vignette{position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse at 50% 45%,transparent 48%,rgba(28,16,4,.32) 100%)}

/* 立绘舞台 */
#stage{position:absolute;inset:0;pointer-events:none}
.sprite-slot{position:absolute;bottom:0;width:34%;height:100%;display:flex;align-items:flex-end;justify-content:center}
.sprite-slot[data-slot="left"]{left:0}
.sprite-slot[data-slot="center"]{left:33%}
.sprite-slot[data-slot="right"]{right:0}
.stack{position:relative;display:flex;align-items:flex-end;justify-content:center;height:100%;width:100%}
.stack.mirror{transform:scaleX(-1)}
.sprite{position:relative;bottom:-2vh;max-height:74vh;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 14px 16px rgba(70,40,0,.32));
  transition:transform .45s cubic-bezier(.2,.9,.25,1),opacity .35s,filter .4s;
  transform:translateY(24px) scale(.96);opacity:0}
.sprite.in{transform:translateY(0) scale(1);opacity:1}
.sprite.out{transform:translateY(18px) scale(.97);opacity:0}
.sprite.active{filter:drop-shadow(0 14px 18px rgba(70,40,0,.32)) brightness(1.06)}
.sprite.dim{filter:drop-shadow(0 10px 14px rgba(70,40,0,.3)) brightness(.76) saturate(.85)}
.sprite.big{max-height:82vh}
.sprite.small{max-height:44vh}
.sprite.tiny{max-height:32vh}
/* 双人 / 三人同框时自动缩小，避免互相挤压 */
#stage.n2 .sprite{max-height:58vh}
#stage.n2 .sprite-slot[data-slot="left"]{left:-1%}
#stage.n2 .sprite-slot[data-slot="right"]{right:-1%}
#stage.n3 .sprite{max-height:47vh}
#stage.n3 .sprite-slot[data-slot="left"]{left:-2%;width:32%}
#stage.n3 .sprite-slot[data-slot="center"]{left:34%;width:32%}
#stage.n3 .sprite-slot[data-slot="right"]{right:-2%;width:32%}
.sprite.float{animation:floaty 3.6s ease-in-out infinite}
@keyframes floaty{0%,100%{margin-bottom:0}50%{margin-bottom:1.6vh}}
.sprite.pop{animation:pop .5s}
@keyframes pop{0%{transform:scale(.86) translateY(10px)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.sprite.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px) rotate(-2deg)}50%{transform:translateX(10px) rotate(2deg)}80%{transform:translateX(-6px)}}
.sprite.honzon{filter:drop-shadow(0 0 24px rgba(150,100,240,.8)) drop-shadow(0 14px 16px rgba(50,20,90,.4))}
.sprite.honzon.dim{filter:drop-shadow(0 0 14px rgba(150,100,240,.55)) brightness(.82) saturate(.9)}
.sprite.honzon.active{filter:drop-shadow(0 0 34px rgba(175,125,255,.95)) drop-shadow(0 14px 16px rgba(50,20,90,.4))}
.sprite.accent-red{filter:drop-shadow(0 0 18px rgba(224,90,74,.8)) drop-shadow(0 14px 16px rgba(70,40,0,.32))}
.sprite.accent-blue{filter:drop-shadow(0 0 18px rgba(74,140,224,.8)) drop-shadow(0 14px 16px rgba(70,40,0,.32))}
.sprite.accent-red.dim,.sprite.accent-blue.dim{filter:drop-shadow(0 10px 14px rgba(70,40,0,.3)) brightness(.78)}
.sprite.angry{filter:drop-shadow(0 12px 16px rgba(70,40,0,.32)) hue-rotate(-16deg) saturate(1.5) }
.sprite.pale{filter:drop-shadow(0 12px 16px rgba(70,40,0,.32)) saturate(.35) brightness(1.05)}
.sprite.flip{transform:scaleX(-1)}
.sprite.flip.in{transform:scaleX(-1) translateY(0)}
.sprite.round{border-radius:50%;background:#FFF6E0;padding:4px;max-height:42vh;
  box-shadow:0 0 0 4px rgba(255,240,190,.95),0 0 34px rgba(255,230,160,.9),0 14px 22px rgba(70,40,0,.35)}
.scarf{position:absolute;bottom:29%;left:33%;width:34%;height:1.3vh;border-radius:8px;
  transform:rotate(-3deg);z-index:3;
  box-shadow:0 2px 6px rgba(0,0,0,.3);transition:opacity .4s}
.scarf.red{background:#E05A4A}
.scarf.blue{background:#4A8CE0}

/* CG 层 */
#cg-layer{position:absolute;inset:0;z-index:6;pointer-events:none;background:#0a0812}
#cg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s,transform 6s linear;transform:scale(1.02)}
#cg-layer.show #cg-img{opacity:1;transform:scale(1.06)}
.cg-frame{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 52%,rgba(0,0,0,.55) 100%)}
.cg-caption{position:absolute;right:1.4vw;bottom:1.6vh;z-index:3;color:#FFF4D6;font-size:clamp(11px,1.5vh,14px);
  background:rgba(40,20,0,.5);padding:.35em .9em;border-radius:100px;opacity:0;transition:opacity .7s}
#cg-layer.show .cg-caption{opacity:1}

.bg.extra.grain::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:20}
#flash.on{opacity:.85;transition:opacity .06s}
#flash.off{opacity:0;transition:opacity .5s}

#weather{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.petal{position:absolute;top:-6vh;font-size:22px;opacity:.85;animation:fall linear infinite}
@keyframes fall{from{transform:translateY(0) rotate(0)}to{transform:translateY(115vh) rotate(360deg)}}

/* 顶部状态条 */
#topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:.7vh 1.2vw;z-index:12;pointer-events:none;
  background:linear-gradient(rgba(30,18,4,.42),transparent)}
.tb-left{display:flex;align-items:center;gap:.6em;color:#FFF6DE;font-size:clamp(12px,1.7vh,16px);text-shadow:0 1px 3px rgba(0,0,0,.65)}
.tb-chapter{font-weight:700}
.tb-day{padding:.1em .7em;border-radius:100px;background:rgba(255,246,222,.22);font-size:.86em}
.tb-right{display:flex;align-items:center;gap:.6em;pointer-events:auto}
.gas-meter{display:flex;align-items:center;gap:.5em;padding:.28em .8em;border-radius:100px;
  background:rgba(30,18,4,.42);color:#FFF0C0;font-size:clamp(11px,1.5vh,14px)}
.gas-cells{display:flex;gap:3px}
.gas-cells i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.25);
  display:inline-block;transition:background .4s,box-shadow .4s}
.gas-cells i.on{background:radial-gradient(circle at 35% 35%,#FFF6C0,#FFC93C);
  box-shadow:0 0 8px rgba(255,210,63,.9);animation:cellPop .5s}
@keyframes cellPop{0%{transform:scale(.2)}70%{transform:scale(1.35)}100%{transform:scale(1)}}
.icon-btn{font-family:inherit;width:2.1em;height:2.1em;border-radius:50%;border:1.5px solid rgba(255,240,200,.6);
  background:rgba(40,24,6,.5);color:#FFF0C0;font-size:clamp(12px,1.7vh,16px);cursor:pointer;font-weight:700}
.icon-btn:hover{background:rgba(255,220,140,.3)}

/* 对话框 */
#dialogue{position:absolute;left:0;right:0;bottom:0;z-index:11;padding:0 1.2vw 1.2vh}
#namebox{display:inline-block;margin:0 0 -.4em .9em;padding:.28em 1.3em;border-radius:12px 12px 4px 4px;
  background:linear-gradient(#FFF6DB,#FFE7AF);border:2px solid #E8C273;border-bottom:none;
  font-weight:800;font-size:clamp(13px,1.9vh,19px);color:#6B4A12;box-shadow:0 -2px 10px rgba(90,60,10,.2);position:relative;z-index:2}
#namebox.empty{visibility:hidden}
#textbox{position:relative;min-height:17vh;max-height:32vh;overflow:auto;
  background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:16px;
  padding:2.4vh 2.2vw 1.6vh;box-shadow:var(--shadow),inset 0 1px 0 #fff;
  backdrop-filter:blur(6px)}
#textbox p{margin:0;font-size:clamp(14px,2.3vh,23px);line-height:1.85;letter-spacing:.02em;white-space:pre-wrap;
  min-height:4em}
#textbox p.thought{color:#6A5A8F;font-style:italic}
#textbox p.sys{color:#8A6A2A}
.rt{color:var(--huang-deep);font-weight:800;font-size:1.06em}
.rtp{color:var(--purple);font-weight:800;font-size:1.06em}
.rtr{color:#E05A4A;font-weight:800;font-size:1.06em}
.rtb{color:#2E7FD0;font-weight:800}
.rtg{color:#3FA35F;font-weight:800}
#next-arrow{position:absolute;right:1.2vw;bottom:.6vh;color:#C9A45A;font-size:1.4em;animation:blink 1.1s infinite}
#next-arrow.hide{display:none}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(3px)}}
#controlbar{display:flex;flex-wrap:wrap;gap:.5em;justify-content:flex-end;margin-top:.6vh}
.cbtn{font-family:inherit;font-size:clamp(11px,1.6vh,15px);font-weight:700;color:#5F4516;cursor:pointer;
  padding:.36em 1.05em;border-radius:100px;border:1.5px solid #E2C88E;
  background:rgba(255,250,236,.92);box-shadow:0 2px 0 rgba(190,150,80,.5);transition:transform .1s,background .2s}
.cbtn:hover{background:#FFF3CF}
.cbtn:active{transform:translateY(2px);box-shadow:none}
.cbtn.on{background:linear-gradient(#FFE07A,#FFC03C);border-color:#DFA318;color:#5A3B05}
.cbtn.danger{background:linear-gradient(#FFD9D0,#FF9E8A);border-color:#E57A62;color:#7A2413}

/* 选择支 */
#choice{position:absolute;inset:0;z-index:14;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2vh;
  background:radial-gradient(ellipse at 50% 50%,rgba(20,10,30,.45),rgba(20,10,30,.68));
  pointer-events:none}
.choice-title{color:#FFF3D0;font-size:clamp(13px,1.9vh,18px);letter-spacing:.16em;margin-bottom:1vh;text-shadow:0 2px 6px #000;opacity:.9;pointer-events:none}
#choice .choice-item{pointer-events:auto}
.choice-item{width:min(74vw,760px);text-align:left;font-family:inherit;cursor:pointer;
  padding:1.5vh 1.4em;border-radius:14px;border:2px solid #E8C273;color:#5B3F10;
  background:linear-gradient(rgba(255,252,240,.97),rgba(255,238,198,.97));
  box-shadow:0 6px 0 #C89A44,0 12px 24px rgba(0,0,0,.35);
  font-size:clamp(13px,2vh,19px);font-weight:700;line-height:1.5;
  transform:translateY(12px);animation:choiceIn .26s cubic-bezier(.2,.9,.25,1) both;transition:filter .15s}
.choice-item .hint{display:block;margin-top:.3em;font-size:.78em;font-weight:400;color:#8A6A32}
.choice-item:hover{filter:brightness(1.05);transform:translateY(-2px)}
.choice-item:active{transform:translateY(4px);box-shadow:0 2px 0 #C89A44}
.choice-item.locked{filter:grayscale(.55) brightness(.9);cursor:not-allowed}
@keyframes choiceIn{from{transform:translateY(14px)}to{transform:translateY(0)}}

/* 章节卡 */
#chapter-card{position:absolute;inset:0;z-index:16;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 50%,rgba(22,13,34,.66),rgba(10,6,18,.9))}
#chapter-card span{color:#FFF3C4;font-size:clamp(22px,5vh,52px);letter-spacing:.28em;font-weight:800;
  text-shadow:0 0 24px rgba(255,200,90,.7);animation:cardIn .8s both}
@keyframes cardIn{from{letter-spacing:.62em}to{letter-spacing:.28em}}

/* 浮动提示 */
#toast-wrap{position:absolute;top:12vh;right:1.6vw;z-index:30;display:flex;flex-direction:column;gap:.5vh;align-items:flex-end}
.toast{padding:.5em 1.1em;border-radius:100px;background:rgba(30,18,4,.82);color:#FFF0C0;
  font-size:clamp(12px,1.7vh,16px);font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.4);
  animation:toastIn .3s both}
.toast.up{color:#8FF0B0}
.toast.down{color:#FFB0A8}
.toast.gas{color:#FFE07A;box-shadow:0 0 18px rgba(255,210,60,.6)}
@keyframes toastIn{from{transform:translateX(26px)}to{transform:translateX(0)}}

/* 遮罩面板 */
#overlay{background:rgba(14,10,22,.72);z-index:40;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.panel{width:min(88vw,940px);max-height:86vh;display:flex;flex-direction:column;
  background:var(--panel-bg);border:3px solid #E8C273;border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.panel.small{width:min(70vw,460px)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:.9vh 1.4vw;
  background:linear-gradient(#FFE9B0,#FFD98A);border-bottom:2px solid #E8C273}
.panel-head h3{margin:0;font-size:clamp(14px,2.2vh,21px);color:#6B4A12;letter-spacing:.06em}
.close-btn{border:none;background:transparent;font-size:clamp(15px,2.3vh,22px);cursor:pointer;color:#8A6A2A;font-weight:800}
.close-btn:hover{color:#C0392B}
.panel-body{padding:1.6vh 1.4vw;overflow:auto;flex:1;font-size:clamp(12px,1.8vh,16px);line-height:1.7}
.panel-foot{padding:.9vh 1.4vw;border-top:2px solid #EADFC2;display:flex;gap:.6em;justify-content:flex-end;flex-wrap:wrap}

.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8em}
.save-slot{border:2px solid #E2C88E;border-radius:12px;background:#FFFDF5;padding:.8em;cursor:pointer;transition:transform .12s,box-shadow .12s}
.save-slot:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(120,90,30,.25)}
.save-slot .s-title{font-weight:800;color:#7A5A1A;font-size:1.02em}
.save-slot .s-sub{font-size:.82em;color:#8A7A5A;margin-top:.25em;line-height:1.5}
.save-slot.empty{opacity:.72;border-style:dashed}
.save-slot.auto{border-color:#9B6BE3}

.row{display:flex;align-items:center;gap:.8em;margin:.7em 0;flex-wrap:wrap}
.row label{min-width:7em;color:#6B5530;font-weight:700}
.row input[type=range]{flex:1;min-width:120px;accent-color:#E8A521}
.row .val{width:3.2em;text-align:right;color:#8A6A32;font-weight:700}
.seg{display:flex;gap:.4em;flex-wrap:wrap}
.seg button{font-family:inherit;font-size:.92em;padding:.34em .9em;border-radius:100px;border:1.5px solid #E2C88E;
  background:#FFFDF5;cursor:pointer;font-weight:700;color:#6B5530}
.seg button.on{background:linear-gradient(#FFE07A,#FFC03C);border-color:#DFA318;color:#5A3B05}

.log-line{padding:.55em .7em;border-radius:10px;margin-bottom:.4em;background:#FFFDF6;border-left:4px solid #FFD98A;line-height:1.6}
.log-line .who{font-weight:800;color:#8A5A17;margin-right:.5em}
.log-line.narr{color:#7A6A52;font-style:italic}

.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9em}
.status-card{display:flex;gap:.8em;align-items:center;background:#FFFDF6;border:2px solid #EADFC2;border-radius:14px;padding:.7em}
.status-card img{width:64px;height:64px;object-fit:contain;border-radius:12px;background:#FFF4D8;padding:4px}
.status-card .sc-name{font-weight:800;color:#7A5A1A}
.status-card .sc-bar{height:9px;border-radius:100px;background:#EFE3C8;overflow:hidden;margin-top:.35em}
.status-card .sc-bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#FFD23F,#F5A623);transition:width .6s}
.bar-purple i{background:linear-gradient(90deg,#C79BF0,#7B4ED0) !important}
.bar-pink i{background:linear-gradient(90deg,#FFC1D4,#F0749A) !important}
.bar-green i{background:linear-gradient(90deg,#A8E6B8,#4FB06A) !important}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.8em}
.gal-card{border:2px solid #EADFC2;border-radius:12px;overflow:hidden;background:#FFFDF6;cursor:pointer;transition:transform .12s}
.gal-card:hover{transform:translateY(-3px)}
.gal-thumb{height:104px;background:linear-gradient(135deg,#FFE7B0,#FFC96B);display:flex;align-items:center;justify-content:center;overflow:hidden}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-title{padding:.5em .6em;font-size:.86em;font-weight:700;color:#6B4A12;line-height:1.45}
.gal-card.locked .gal-thumb{background:repeating-linear-gradient(45deg,#E9DFC6 0 8px,#F4EBD6 8px 16px);color:#A79A7C;font-size:1.6em;align-items:center}
.gal-card.locked .gal-title{color:#A79A7C}
.gal-card.ending .gal-thumb{height:88px;font-size:1.5em;font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.end-true{background:linear-gradient(135deg,#FFC93C,#FF8A3C)}
.end-good{background:linear-gradient(135deg,#8FD9A8,#3FA35F)}
.end-normal{background:linear-gradient(135deg,#9BD3F5,#3E86C0)}
.end-bad{background:linear-gradient(135deg,#9E8AA8,#4A3A55)}
.end-joke{background:linear-gradient(135deg,#FFB6C8,#E8638A)}
.badge{display:inline-block;padding:.1em .6em;border-radius:100px;font-size:.78em;font-weight:800;background:#FFE7B0;color:#8A5A17;margin-left:.4em}

/* 结局画面 */
#ending{z-index:50;background:radial-gradient(ellipse at 50% 40%,#2A1B45,#0C0714 80%);display:flex;align-items:center;justify-content:center}
.ending-inner{text-align:center;max-width:min(86vw,820px);color:#FFF3D0}
.ending-tag{letter-spacing:.5em;color:#FFC93C;font-size:clamp(11px,1.7vh,15px);margin:0 0 .4em}
#ending-title{margin:0;font-size:clamp(26px,6vh,60px);letter-spacing:.1em;text-shadow:0 0 30px rgba(255,200,90,.65)}
#ending-desc{margin:1.4em auto 0;line-height:2;font-size:clamp(13px,2vh,18px);color:#EFE0C0;white-space:pre-wrap}
.ending-stats{margin:1.6em auto 0;display:flex;gap:1.4em;justify-content:center;flex-wrap:wrap;color:#C9B98E;font-size:clamp(11px,1.6vh,14px)}
.ending-stats b{color:#FFD98A;display:block;font-size:1.5em}
.ending-btns{margin-top:2.2em;display:flex;gap:.8em;justify-content:center;flex-wrap:wrap}

/* 小游戏 */
#minigame-layer{position:absolute;inset:0;z-index:22;background:rgba(10,7,18,.9);display:flex;align-items:center;justify-content:center}
.mg-wrap{width:min(94vw,860px);color:#FFF3D0;text-align:center}
.mg-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1vh;flex-wrap:wrap;gap:.6em}
.mg-head h3{margin:0;font-size:clamp(15px,2.4vh,22px);letter-spacing:.08em}
.mg-info{font-size:clamp(12px,1.8vh,16px);color:#FFD98A}
#mg-canvas{width:100%;border-radius:16px;border:3px solid #E8C273;box-shadow:0 12px 30px rgba(0,0,0,.5);touch-action:none;display:block}
.mg-tip{margin-top:1vh;font-size:clamp(11px,1.6vh,14px);color:#C9B98E;line-height:1.7}
.rhythm-strip{height:16vh;border-radius:16px;border:3px solid #E8C273;background:rgba(255,255,255,.06);
  position:relative;overflow:hidden;margin:1vh 0}
.rhythm-track{position:absolute;left:0;right:0;top:0;bottom:0}
.note{position:absolute;top:50%;transform:translate(-50%,-50%);width:10vh;height:10vh;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#FFF6C0,#FFC93C);box-shadow:0 0 20px rgba(255,200,60,.7);font-size:4vh;
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#7A4A00}
.beat-line{position:absolute;top:0;bottom:0;left:50%;width:5px;background:rgba(255,255,255,.85);box-shadow:0 0 14px #fff}
.judge{position:absolute;left:50%;top:6%;transform:translateX(-50%);font-size:clamp(18px,4vh,38px);font-weight:900;opacity:0}
.judge.show{animation:judgePop .5s}
@keyframes judgePop{0%{opacity:0;transform:translateX(-50%) scale(.6)}30%{opacity:1;transform:translateX(-50%) scale(1.15)}100%{opacity:0;transform:translateX(-50%) scale(1)}}
.mg-result{margin-top:1.2vh;font-size:clamp(14px,2.2vh,20px);font-weight:800;color:#FFD98A}

/* ---------------- 手机 / 微信内置浏览器适配 ---------------- */
#rotate-hint{display:none}
@media (max-width:820px){
  .sprite-slot{width:46%}
  .sprite-slot[data-slot="center"]{left:27%}
  .sprite{max-height:56vh}
  .title-huang{height:34vh}
  .title-jiji,.title-nyao{height:15vh}
  #textbox{min-height:15vh;max-height:30vh}
  #textbox p{font-size:clamp(14px,4.1vw,19px);line-height:1.75;min-height:3.2em}
  #dialogue{padding:0 2vw calc(.8vh + env(safe-area-inset-bottom))}
  #topbar{padding-top:calc(.6vh + env(safe-area-inset-top))}
  #choice{gap:1vh}
  .choice-item{width:94vw;font-size:clamp(13px,3.9vw,18px);padding:1.3vh 1.1em}
  .choice-item .hint{font-size:.82em}
  .panel{width:96vw;max-height:84vh}
  .panel-body{padding:1.2vh 3vw;font-size:14px}
  .save-slot .s-sub{font-size:.78em}
  .cbtn{font-size:11px;padding:.34em .68em}
  #controlbar{gap:.35em;justify-content:center}
  #textbox p{word-break:break-word}
  .gas-cells i{width:9px;height:9px}
  .ending-inner{padding:0 5vw}
}
/* 手机横屏：把可用的垂直空间让给画面 */
@media (max-height:460px){
  #textbox{min-height:20vh;max-height:36vh;padding:1.8vh 3vw 1.2vh}
  #textbox p{font-size:clamp(12px,2.9vh,17px);line-height:1.7;min-height:2.6em}
  .sprite{max-height:64vh}
  #namebox{font-size:13px;padding:.2em 1em}
  #dialogue{padding:0 2vw calc(.6vh + env(safe-area-inset-bottom))}
  .cbtn{font-size:11px;padding:.28em .6em}
  #controlbar{gap:.3em}
  .choice-item{width:min(80vw,760px);font-size:clamp(13px,3.4vh,17px);padding:1.1vh 1.2em}
  .title-wrap{top:4vh}
}
/* 竖屏提示（3 秒后自动消失，不挡操作） */
@media (orientation:portrait) and (max-width:820px){
  #rotate-hint{display:flex;position:absolute;inset:0;z-index:60;align-items:center;justify-content:center;
    text-align:center;color:#FFF3D0;background:rgba(12,8,20,.93);pointer-events:none;
    animation:hintFade 3.2s ease forwards}
  #rotate-hint p{font-size:clamp(18px,5.6vw,30px);line-height:1.9;margin:0}
  #rotate-hint small{font-size:.68em;color:#D9C79A}
}
@keyframes hintFade{0%{opacity:0}10%{opacity:1}74%{opacity:1}100%{opacity:0;visibility:hidden}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#DCC79A;border-radius:100px}
::-webkit-scrollbar-track{background:transparent}