:root{
  --fs:1; 
  --bg:#07080a; --card:#14171c; --card2:#1b2027; --line:#2a2f38;
  --fg:#e8e6e0; --muted:#8b8f96; --gold:#e0a850; --red:#c8452f; --green:#5a9e6f;
  --warn:#c8452f;
  
  --ink:#08090b; --ink2:#0e1013; --blood:#8a2f22; --bloodL:#c8452f;
  --brass:#c9a24e; --brass2:#8a6a32; --paper:#d8cbb0;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}

@supports (height:100dvh){ html,body{height:100dvh;} }

:root{--vh:1vh;}
body{
  background:#050607;color:var(--fg);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  display:flex;justify-content:center;align-items:center;
  overflow:hidden;
  
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  overscroll-behavior:none;
}
#app{
  position:relative;width:100%;height:calc(var(--vh) * 100);max-width:460px;
  max-height:min(900px, calc(var(--vh) * 100));
  background:linear-gradient(180deg,#0e1114 0%,#07080a 100%);
  overflow:hidden;display:flex;flex-direction:column;
  
  -webkit-overflow-scrolling:touch;
}
@media(min-width:520px) and (min-height:700px){
  #app{border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.85),0 0 0 1px #1c2026;}
}
::selection{background:transparent;}


.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .45s;}
.screen.on{opacity:1;pointer-events:auto;}


#hud{padding:14px 18px 10px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.5px;flex-shrink:0;z-index:12;position:relative;}
#hud .day{color:var(--gold);font-weight:700;font-size:13.5px;letter-spacing:1.5px;}
#hud .right{display:flex;gap:11px;align-items:flex-start;}


#hud .res{
  display:grid;
  grid-template-rows:auto auto;
  grid-template-columns:auto;
  justify-items:center;align-items:center;
  gap:0;color:#b9bcc2;line-height:1.15;
  min-width:30px;flex-shrink:0;
}

#hud .res{grid-template-areas:"ico num" "lab lab";}
#hud .res .ico{grid-area:ico;}
#hud .res b{grid-area:num;display:inline-block;white-space:nowrap;}
#hud .res em{grid-area:lab;white-space:nowrap;}

#hud .right{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  
  max-width:none;flex-shrink:0;}
#hud .right::-webkit-scrollbar{display:none;}
#hud .res em{font-style:normal;font-size:9.5px;color:#7d848d;letter-spacing:0;text-align:center;}
#hud .res b{color:#fff;font-weight:600;font-size:12px;}

#hud .res{position:relative;}
#hud .res .heldTag{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  font-style:normal;font-size:8.5px;line-height:1.4;letter-spacing:.5px;
  color:#b39ae0;background:rgba(139,111,199,.20);
  border:1px solid rgba(179,154,224,.45);border-radius:6px;
  padding:0 3px;white-space:nowrap;pointer-events:none;
}

#hud .res.calmHeld b{color:#9d94b8;}

.ico{position:relative;display:inline-block;width:13px;height:13px;flex-shrink:0;}
.ico.can::before{content:"";position:absolute;inset:1px 0 2px 0;border-radius:2px 2px 3px 3px;
  background:linear-gradient(180deg,#c9a24e,#8a6a24);}
.ico.can::after{content:"";position:absolute;left:-1px;right:-1px;top:0;height:3px;border-radius:2px;
  background:#d9bb6e;}
.ico.drop::before{content:"";position:absolute;left:2px;top:2px;width:9px;height:10px;
  border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(180deg,#59b0dd,#236b96);}
.ico.pill::before{content:"";position:absolute;left:1px;top:2px;width:11px;height:8px;border-radius:5px;
  background:linear-gradient(90deg,#e8e8e8 50%,#c8452f 50%);transform:rotate(-28deg);}
.ico.calm{color:#9a8fd6;font-style:normal;font-size:12px;line-height:13px;text-align:center;}
.ico.calm::before{content:"☾";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
#hud .diffTag{color:#7b8087;font-size:11px;border:1px solid #2a2f38;padding:2px 8px;border-radius:10px;}



#hud .right{display:flex;gap:11px;align-items:flex-start;flex-shrink:0;}
#hud .left{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto;}
#quest{
  max-width:min(210px, 42vw);
  background:rgba(20,23,28,.72);
  border:1px solid #262c34;
  border-left:2px solid #3a4250;
  border-radius:4px 9px 9px 4px;
  padding:6px 10px 7px;
  transition:border-color .6s,background .6s,box-shadow .6s,opacity .4s;
  overflow:hidden;
  
  opacity:0;pointer-events:none;
}
body[data-ingame="1"] #quest{opacity:1;}

#quest.q-flash{
  border-left-color:var(--gold);
  background:rgba(38,32,18,.86);
  box-shadow:0 0 0 1px rgba(201,162,78,.28), 0 6px 22px -8px rgba(201,162,78,.5);
}
#quest .qhead{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;letter-spacing:1.2px;color:#c9a24e;
}
#quest .qdot{
  width:5px;height:5px;border-radius:50%;background:#c9a24e;flex-shrink:0;
  box-shadow:0 0 6px rgba(201,162,78,.9);
  animation:qpulse 2.6s ease-in-out infinite;
}
@keyframes qpulse{0%,100%{opacity:1}50%{opacity:.35}}
#quest #qBody{margin-top:4px;display:flex;flex-direction:column;gap:2px;}
#quest .qitem{
  font-size:11px;line-height:1.45;color:#a8aeb6;
  display:flex;gap:5px;align-items:flex-start;
  transition:color .5s;
}
#quest .qitem i{
  font-style:normal;flex-shrink:0;width:9px;text-align:center;
  color:#5a6270;font-size:10px;
}
#quest .qitem.done{color:#5f6a5f;}
#quest .qitem.done i{color:#5a9e6f;}
#quest .qitem.done span{text-decoration:line-through;text-decoration-color:#3a443a;}
#quest .qitem.now{color:#e6e9ee;font-weight:600;}
#quest .qitem.now i{color:#c9a24e;}
#quest .qitem.lock{color:#4a5058;}
#quest .qitem.lock i{color:#3d434b;}
#quest .qnote{
  margin-top:4px;font-size:10px;color:#7b8087;line-height:1.4;
  border-top:1px dashed #2a3038;padding-top:4px;
}

@media (max-height:560px){
  #quest #qBody{display:none;}
  
  #quest{max-width:min(150px, 38vw);}
}


#stage{position:relative;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;}



#base{position:absolute;inset:0;transition:opacity .8s;}
#stage[data-dogmode="photo"] #base,
#stage[data-dogmode="none"]  #base{transition:opacity 0s;}
#baseBg{position:absolute;inset:0;}
#base .vign2{position:absolute;inset:0;box-shadow:inset 0 0 130px 45px rgba(0,0,0,.88);pointer-events:none;}


#basePerson{position:absolute;left:26%;bottom:calc(30% + 2px);transform:translateX(-50%);
  height:min(156px,65%);aspect-ratio:2/3;width:auto;z-index:5;
  transition:all 1.4s cubic-bezier(.3,.7,.4,1);filter:drop-shadow(0 10px 12px rgba(0,0,0,.5));}
#basePerson .plSvg{width:100%;height:100%;display:block;overflow:visible;}

#basePerson img.plImg{width:100%;height:100%;display:block;object-fit:contain;object-position:center bottom;
  filter:brightness(.95) saturate(.96);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 95%,rgba(0,0,0,.4) 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 95%,rgba(0,0,0,.4) 100%);}
#base[data-sex="f"] #basePerson{filter:drop-shadow(0 10px 12px rgba(0,0,0,.5)) brightness(1.04);}


#baseDog{position:absolute;bottom:calc(30% + 3px);left:30%;z-index:6;transition:all 1.6s cubic-bezier(.3,.7,.4,1);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.5));
  transform:translateX(-50%);transform-origin:bottom center;}


#base .ground{position:absolute;left:0;right:0;bottom:30%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 20%,rgba(255,255,255,.06) 80%,transparent);}

#art{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;z-index:5;}
#art.on{opacity:1;}
#art .kb{position:absolute;inset:0;transform:scale(1.16);transition:transform 14s cubic-bezier(.2,.5,.4,1);}
#art.on .kb{transform:scale(1.01);}




#stage:not([data-dogmode="solo"]) #baseDog{
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
  transition:none !important;
}

#stage:not([data-dogmode="sprite"]) #dogWrap{
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
  transition:none !important;
}


.scene{position:absolute;inset:0;overflow:hidden;}
.scene .vign{position:absolute;inset:0;box-shadow:inset 0 0 120px 40px rgba(0,0,0,.85);pointer-events:none;}
.spk{position:absolute;background:rgba(255,255,255,.06);}

.fogband{position:absolute;left:-40%;width:180%;height:90px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,var(--fc,rgba(190,196,205,.22)),transparent 78%);
  filter:blur(14px);animation:fogDrift linear infinite;}
@keyframes fogDrift{
  0%{transform:translateX(-14%);}
  100%{transform:translateX(14%);}
}

.fogfig{position:absolute;width:26px;height:70px;margin-left:-13px;pointer-events:none;--s:1;
  animation:fogSway 7s ease-in-out infinite;}
.fogfig i{position:absolute;left:50%;top:0;transform:translateX(-50%) scale(var(--s));transform-origin:top center;
  width:15px;height:15px;border-radius:50%;background:rgba(24,26,30,.75);filter:blur(3.5px);}
.fogfig b{position:absolute;left:50%;top:13px;transform:translateX(-50%) scale(var(--s));transform-origin:top center;
  width:24px;height:57px;border-radius:12px 12px 6px 6px;background:rgba(24,26,30,.75);filter:blur(4px);}
@keyframes fogSway{0%,100%{opacity:.5;}50%{opacity:.8;}}

.theDoor{position:absolute;left:50%;bottom:30%;transform:translateX(-50%);z-index:1;
  width:96px;height:min(176px,68%);border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#2c2016,#150e09);
  border:2px solid #3a2a1c;box-shadow:inset 0 0 34px rgba(0,0,0,.92),0 18px 34px rgba(0,0,0,.75);}
.theDoor::before{content:"";position:absolute;left:9px;right:9px;top:11px;bottom:11px;
  border:1px solid rgba(255,220,160,.055);border-radius:3px;}
.theDoor::after{content:"";position:absolute;right:12px;top:45%;width:7px;height:7px;border-radius:50%;background:#7d6134;box-shadow:0 0 6px rgba(230,190,110,.6);}
.theDoor .knocker{position:absolute;left:50%;top:34%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;border:2px solid #55401f;}
.baseDoorShadow{position:absolute;left:50%;bottom:30%;transform:translateX(-50%);width:96px;height:min(176px,68%);pointer-events:none;transition:box-shadow .8s;z-index:0;}
#base[data-threat="1"] .baseDoorShadow{box-shadow:0 0 60px 14px rgba(190,40,30,.30);}
#base[data-threat="2"] .baseDoorShadow{box-shadow:0 0 90px 22px rgba(190,40,30,.55);}


.relics{position:absolute;left:50%;bottom:calc(30% + 168px);transform:translateX(-50%);
  display:flex;gap:14px;align-items:flex-end;height:26px;}
.relics .r{position:relative;width:20px;height:22px;opacity:.14;filter:grayscale(1);
  transition:all 1s;display:block;}
.relics .r.on{opacity:1;filter:none;}

.relics .r.bell::before{content:"";position:absolute;left:3px;top:4px;width:14px;height:14px;
  border-radius:50% 50% 22% 22%;background:linear-gradient(180deg,#e8bd6a,#9a7430);
  box-shadow:inset -2px -3px 5px rgba(0,0,0,.5);}
.relics .r.bell::after{content:"";position:absolute;left:8px;top:0;width:4px;height:5px;
  border:1.6px solid #c99a4e;border-bottom:none;border-radius:3px 3px 0 0;}

.relics .r.god::before{content:"";position:absolute;left:3px;top:3px;width:14px;height:16px;
  border-radius:2px;background:linear-gradient(180deg,#a83028,#6a1c18);
  box-shadow:inset 0 0 0 1.5px rgba(240,210,150,.55);}
.relics .r.god::after{content:"";position:absolute;left:0;top:1px;width:20px;height:2px;
  border-radius:2px;background:#8a6a32;}

.relics .r.blood::before{content:"";position:absolute;left:5px;top:5px;width:11px;height:13px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(180deg,#c8382c,#6e1210);
  box-shadow:inset -2px -2px 4px rgba(0,0,0,.45);}
.relics .r.on.bell::before{box-shadow:inset -2px -3px 5px rgba(0,0,0,.5),0 0 14px 3px rgba(255,205,110,.75);}
.relics .r.on.god::before{box-shadow:inset 0 0 0 1.5px rgba(240,210,150,.55),0 0 14px 3px rgba(255,205,110,.75);}
.relics .r.on.blood::before{box-shadow:inset -2px -2px 4px rgba(0,0,0,.45),0 0 14px 3px rgba(220,80,60,.7);}
.lightbeam{position:absolute;filter:blur(9px);opacity:.55;}


.dog{position:relative;width:110px;height:86px;display:block;overflow:visible;}
.dog .dogSvg{width:100%;height:100%;display:block;overflow:visible;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.55));}

.dog img.dogImg{width:100%;height:100%;display:block;object-fit:contain;object-position:center bottom;}
#baseDog .dog{width:74px;height:58px;}
#baseDog .dog img.dogImg{height:135%;object-position:center bottom;}
.dog[data-mood="hurt"] img.dogImg{filter:brightness(.8) saturate(.75) drop-shadow(0 10px 12px rgba(0,0,0,.55));}
.dog[data-mood="away"] img.dogImg{filter:brightness(.55) saturate(.5) drop-shadow(0 10px 12px rgba(0,0,0,.55));}


.dog #dTail{transform-origin:100px 50px;transition:transform .5s;}
.dog #dEarL{transform-origin:26px 20px;transition:transform .4s;}
.dog #dEarR{transform-origin:50px 20px;transition:transform .4s;}
.dog #dBody,.dog #dLegs,.dog #dBackFar{transition:transform .5s;transform-origin:60px 84px;}
.dog #dHead{transform-origin:42px 50px;transition:transform .5s;}


.dog[data-mood="happy"] #dTail{animation:wag .85s ease-in-out infinite;}
@keyframes wag{0%,100%{transform:rotate(-14deg);}50%{transform:rotate(24deg);}}
.dog[data-mood="happy"] #dEarR{transform:rotate(10deg);}


.dog[data-mood="devoted"] #dTail{animation:wag 1.1s ease-in-out infinite;}
.dog[data-mood="devoted"] #dEarL{transform:rotate(-26deg);}
.dog[data-mood="devoted"] #dEarR{transform:rotate(26deg);}
.dog[data-mood="devoted"] #dEye{filter:drop-shadow(0 0 4px rgba(255,220,150,.95));}


.dog[data-mood="guard"] #dEarL{transform:rotate(14deg) translateY(-4px);}
.dog[data-mood="guard"] #dEarR{transform:rotate(-14deg) translateY(-4px);}
.dog[data-mood="guard"] #dBody{transform:translateY(3px);}
.dog[data-mood="guard"] #dTail{transform:rotate(8deg);}


.dog[data-mood="sad"] #dTail{transform:rotate(52deg);}
.dog[data-mood="sad"] #dEarL{transform:rotate(-30deg) translateY(4px);}
.dog[data-mood="sad"] #dEarR{transform:rotate(30deg) translateY(4px);}
.dog[data-mood="sad"] #dHead{transform:rotate(9deg) translateY(3px);}
.dog[data-mood="sad"] #dEye{opacity:.72;}


.dog[data-mood="hurt"] #dBody{transform:rotate(-7deg) translateY(5px);}
.dog[data-mood="hurt"] #dHead{transform:rotate(6deg) translateY(6px);}
.dog[data-mood="hurt"] #dTail{transform:rotate(58deg);}
.dog[data-mood="hurt"] #dEarL{transform:rotate(-34deg) translateY(5px);}
.dog[data-mood="hurt"] #dEarR{transform:rotate(34deg) translateY(5px);}
.dog[data-mood="hurt"] .dogSvg{filter:brightness(.8) saturate(.75) drop-shadow(0 10px 12px rgba(0,0,0,.55));}

.dog .wound{opacity:0;transition:opacity .4s;}
.dog[data-mood="hurt"] .wound{opacity:1;}

.dog[data-mood="hurt"] #dLegB{transform:rotate(-16deg) translateY(-4px);}

.dog .blooddrop{opacity:0;transition:opacity .4s;}
.dog[data-mood="hurt"] .blooddrop{opacity:.85;}


.dog[data-mood="away"] #dTail{transform:rotate(56deg);}
.dog[data-mood="away"] #dEarL{transform:rotate(-30deg) translateY(4px);}
.dog[data-mood="away"] #dEarR{transform:rotate(30deg) translateY(4px);}
.dog[data-mood="away"] .dogSvg{filter:brightness(.55) saturate(.5) drop-shadow(0 10px 12px rgba(0,0,0,.55));}

#dogWrap{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);transition:all 1s cubic-bezier(.2,.8,.4,1);opacity:0;z-index:6;}
#dogWrap.on{opacity:1;}
  
  #dogTag{position:absolute;left:50%;top:-26px;transform:translateX(-50%);
    white-space:nowrap;font-size:10px;letter-spacing:.4px;padding:3px 9px;border-radius:11px;
    border:1px solid #3a3340;background:rgba(12,14,18,.88);color:#cfd2d8;
    opacity:0;transition:opacity .35s;pointer-events:none;z-index:2;}
  #dogTag.on{opacity:1;}
  #dogTag.safe{color:#7fd6a0;border-color:#2e5e44;background:rgba(12,28,20,.92);}
  #dogTag.warn{color:#e8c46a;border-color:#5e4e2e;background:rgba(28,24,12,.92);}
  #dogTag.danger{color:#ef8a8a;border-color:#5e2e2e;background:rgba(28,12,12,.92);}



#textzone{padding:0 22px 8px;flex-shrink:0;min-height:126px;max-height:min(44vh,340px);
  overflow-y:auto;scrollbar-width:none;z-index:11;position:relative;
  
  background:linear-gradient(180deg, rgba(7,8,10,.92) 0%, var(--bg) 34%);
  border-top:1px solid rgba(201,162,78,.16);

}
@media (max-height:700px){
  #textzone{max-height:min(38vh,290px);min-height:104px;}
}

@media (max-width:360px){
  #hud{padding-left:10px;padding-right:10px;}
  #hud .right{gap:8px;}
  #hud .res em{font-size:9px;}
}
#textzone::-webkit-scrollbar{display:none;}
#textInner{min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;}
#narrative{font-size:calc(16px * var(--fs));line-height:2.05;letter-spacing:.4px;color:#eae7e0;white-space:pre-wrap;}

#textzone.folded{min-height:0;max-height:58px;overflow:hidden;position:relative;}
#textzone.folded #textInner{min-height:0;}

#textzone.folded::before{content:'';position:absolute;left:0;right:0;top:0;height:22px;
  background:linear-gradient(180deg,var(--bg,#0b0d10) 0,rgba(11,13,16,.85) 55%,transparent 100%);
  pointer-events:none;z-index:2;}
#textzone.folded #narrative{cursor:pointer;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 74%);
  mask-image:linear-gradient(180deg,transparent 0,#000 74%);}
#textzone.folded::after{content:'展开';position:absolute;right:24px;top:4px;font-size:10px;
  color:#61666e;letter-spacing:2px;pointer-events:none;z-index:3;}
#textzone.folded.expanded{max-height:min(44vh,340px);overflow-y:auto;}
#textzone.folded.expanded::before{content:none;}
#textzone.folded.expanded::after{content:none;}
#narrative .hl{color:var(--gold);}
#narrative .bad{color:var(--red);}
#narrative .good{color:var(--green);}
#cursor{display:inline-block;width:8px;height:16px;background:var(--gold);vertical-align:-2px;animation:blink .9s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

#moreHint{display:inline-block;width:14px;height:16px;margin-left:10px;position:relative;vertical-align:-2px;}
#moreHint::after{content:'▼';position:absolute;left:0;top:1px;font-size:10px;color:var(--gold);animation:hintBob 1.3s ease-in-out infinite;}
@keyframes hintBob{0%,100%{opacity:.2;transform:translateY(-2px);}50%{opacity:1;transform:translateY(2px);}}

#textzone.armed{cursor:pointer;}

#contHint{position:fixed;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom, 0px));text-align:center;font-size:11px;letter-spacing:3px;
  color:var(--gold);opacity:0;pointer-events:none;transition:opacity .3s;
  text-shadow:0 0 8px rgba(217,185,106,.6);z-index:30;}

#contHint.on{opacity:.92;animation:hintBob 1.3s ease-in-out infinite;}

body.has-opts #contHint{display:none;animation:none;}






#clue{
  padding:0 18px 2px;font-size:calc(12.5px * var(--fs));line-height:1.55;color:#9fd0c4;
  flex-shrink:0;z-index:11;position:relative;display:none;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
#clue.on{display:block;animation:clueIn .35s ease both;}
#clue::before{content:"🔍 你掌握的线索：";color:#6fae9f;font-weight:600;}
@keyframes clueIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

#echo{
  padding:6px 18px 2px;font-size:calc(13px * var(--fs));line-height:1.5;color:#e7c98b;
  flex-shrink:0;z-index:11;position:relative;display:none;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
#echo.on{display:block;animation:echoPop .25s ease both;}
@keyframes echoPop{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}


#choices{padding:4px 16px calc(14px + env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;gap:7px;flex-shrink:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;z-index:11;position:relative;
  
  background:linear-gradient(180deg, transparent 0%, var(--bg) 30%);}
.opt{
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:10px 14px;font-size:calc(14px * var(--fs));color:#dfe2e6;cursor:pointer;
  transition:.18s;text-align:left;font-family:inherit;line-height:1.5;
  min-height:44px;width:100%;box-sizing:border-box;   
  
  flex-shrink:0;
  user-select:none;-webkit-tap-highlight-color:transparent;   
}
.opt:hover,.opt:active{background:#20262e;border-color:var(--gold);color:#fff;transform:translateX(3px);}
.opt:active{background:#262d36;transform:translateX(3px) scale(.97);transition:transform .05s;}   
.opt .cost{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;}
.opt:disabled{opacity:.32;cursor:not-allowed;transform:none;border-color:var(--line);}
.opt.danger{border-color:#4a2320;}


.opt.skip{
  border-style:dashed;border-color:#2a3038;color:#8d949c;font-size:12.5px;
}
.opt.skip:hover{border-color:#3d4854;color:#b9c0c8;transform:none;background:#1a1f26;}
.opt.skip .cost{color:#6a7178;}
.opt.tip{
  border-color:#3a3320;background:#1d1a13;
}
.opt.tip:hover{background:#262117;border-color:var(--gold);}

#audioGate{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(4,6,9,.82);backdrop-filter:blur(2px);cursor:pointer;}
#audioGate.on{display:flex;animation:fadeIn .3s both;}
#audioGate .agBox{text-align:center;padding:26px 30px;border:1px solid var(--line);border-radius:16px;background:rgba(20,24,30,.7);max-width:80vw;}
#audioGate .agIco{font-size:34px;margin-bottom:8px;}
#audioGate .agTxt{font-size:17px;color:#e6e9ee;letter-spacing:1px;}
#audioGate .agSub{font-size:11.5px;color:var(--muted);margin-top:6px;}

#sidePanel{display:none;}

@media (min-width:900px){
  #app{max-width:none;padding-left:300px;}
  #sidePanel{display:flex;position:absolute;left:16px;top:16px;bottom:16px;width:276px;overflow-y:auto;flex-direction:column;gap:12px;padding:16px 15px;background:rgba(10,13,17,.55);border:1px solid var(--line);border-radius:16px;}
  #stage{width:min(520px,76vw);margin:0 auto;box-shadow:0 0 60px rgba(0,0,0,.5);}
  #hud{position:static;width:min(520px,76vw);margin:0 auto 6px;background:none;border:none;box-shadow:none;padding:0;}
  #textzone,#choices{width:min(520px,76vw);margin-left:auto;margin-right:auto;}
  #quest{display:none;}
  
  #hud .left{padding-top:44px;}
}
.spCard{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(20,24,30,.5);}
.spH{font-size:11px;letter-spacing:1px;color:var(--gold);margin-bottom:6px;opacity:.85;}
.spRow{display:flex;justify-content:space-between;font-size:12.5px;color:#c7ccd2;padding:2px 0;}
.spRow b{color:#eef1f4;font-weight:500;}
.spTip{font-size:11px;line-height:1.7;color:var(--muted);}

#confirmBox{position:absolute;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;background:rgba(5,6,7,.72);opacity:0;pointer-events:none;transition:opacity .25s;}
#confirmBox.on{opacity:1;pointer-events:auto;}
#confirmBox .cbBox{width:min(320px,82vw);padding:22px 22px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(20,24,30,.92);text-align:center;box-shadow:0 10px 50px rgba(0,0,0,.6);}
#confirmBox .cbTxt{font-size:15px;line-height:1.7;color:#e6e9ee;margin-bottom:18px;}
#confirmBox .cbBtns{display:flex;gap:10px;}
#confirmBox .cbBtn{flex:1;padding:10px 0;border-radius:10px;font-size:14px;cursor:pointer;border:1px solid var(--line);background:rgba(40,46,54,.6);color:#cdd3da;letter-spacing:1px;}
#confirmBox .cbBtn.yes{background:rgba(150,52,52,.55);border-color:#7a3b3b;color:#f0d6d6;}
#confirmBox .cbBtn:active{transform:translateY(1px);}



body.corrupt[data-corrupt-lvl="1"] #stage,
body.corrupt[data-corrupt-lvl="1"] #textzone{
  animation:drift1 5.2s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{transform:translate(0,0);filter:none;}
  47%{transform:translate(0,0);}
  48%{transform:translate(-1px,0.5px);filter:hue-rotate(-6deg);}
  49%{transform:translate(0.6px,-0.4px);}
  50%{transform:translate(0,0);}
}
body.corrupt .opt{
  border-color:#33303a;color:#cfc9d6;
}
body.corrupt .opt .cost{color:#6d6478;}
body.corrupt .opt.creep{animation:creep1 5.2s steps(1) infinite;}
@keyframes creep1{
  0%,92%,100%{opacity:1;}
  93%{opacity:.55;}
  94%{opacity:1;}
  96%{opacity:.7;}
}


body.corrupt[data-corrupt-lvl="2"] #stage,
body.corrupt[data-corrupt-lvl="2"] #textzone{
  animation:drift2 2.6s steps(1) infinite;
}
@keyframes drift2{
  0%,100%{transform:translate(0,0);filter:none;text-shadow:none;}
  8%{transform:translate(-2px,1px);filter:hue-rotate(-14deg) saturate(1.3);}
  9%{transform:translate(0,0);}
  38%{transform:translate(0,0);filter:none;}
  39%{transform:translate(2px,-1px) skewX(-1.2deg);filter:hue-rotate(12deg);text-shadow:1px 0 rgba(200,69,47,.5),-1px 0 rgba(90,140,200,.35);}
  40%{transform:translate(0,0);}
  71%{transform:translate(0,0);}
  72%{transform:translate(-1px,0) scaleY(1.012);}
  73%{transform:translate(0,0);}
}
body.corrupt[data-corrupt-lvl="2"] #choices .opt{
  position:relative;
  text-shadow:0.6px 0 rgba(200,69,47,.45), -0.6px 0 rgba(90,140,200,.3);
}
body.corrupt[data-corrupt-lvl="2"] #stage{
  transform:translate(var(--jx,0), var(--jy,0));
  transition:transform .5s steps(2);
}
body.corrupt[data-corrupt-lvl="2"] #choices .opt.creep{
  animation:creep2 2.6s steps(1) infinite;
}


body.masterVisit #stage,
body.masterVisit #base,
body.masterVisit #art{ animation:mVisit 7.2s ease-in-out both; }
@keyframes mVisit{
  0%   { filter:none; }
  16%  { filter:saturate(.55) contrast(1.05); }
  46%  { filter:saturate(.34) contrast(1.12) brightness(.94); }
  78%  { filter:saturate(.5)  contrast(1.06); }
  100% { filter:none; }
}

body.masterVisit #stage::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(ellipse at 50% 46%, transparent 44%, rgba(6,4,10,.5) 100%);
  animation:mVig 7.2s ease-in-out both;
}
@keyframes mVig{ 0%,100%{opacity:0;} 40%{opacity:1;} }
@keyframes creep2{
  0%,80%,100%{opacity:1;transform:none;}
  81%{opacity:.4;transform:translateX(-2px);}
  83%{opacity:1;transform:translateX(1px);}
  86%{opacity:.7;transform:none;}
}

#stage.glitching{
  animation:glitchflash .19s steps(2) 1;
}
@keyframes glitchflash{
  0%{transform:translate(-3px,1px) skewX(1.5deg);filter:invert(.06) hue-rotate(-25deg);}
  50%{transform:translate(3px,-1px) skewX(-1.5deg);filter:hue-rotate(20deg);}
  100%{transform:translate(0,0);filter:none;}
}

body.corrupt[data-corrupt-lvl="2"] #narrative{
  animation:narrshiver 6.5s steps(1) infinite;
}
@keyframes narrshiver{
  0%,90%,100%{letter-spacing:.4px;}
  91%{letter-spacing:1.1px;}
  93%{letter-spacing:.4px;}
  95%{letter-spacing:-0.3px;}
}
.opt.danger:hover{border-color:var(--red);}


.float{position:absolute;font-size:13px;font-weight:700;pointer-events:none;animation:floatUp 2.6s ease-out forwards;z-index:30;}
@keyframes floatUp{0%{opacity:0;transform:scale(.92);}12%{opacity:1;transform:scale(1);}70%{opacity:1;transform:scale(1.02);}100%{opacity:0;transform:scale(1.04);}}


#panel{position:absolute;inset:0;background:rgba(5,6,7,.96);z-index:30;display:flex;flex-direction:column;padding:24px 22px;opacity:0;pointer-events:none;transition:opacity .3s;overflow-y:auto;}
#panel.on{opacity:1;pointer-events:auto;}
#panel h2{font-size:17px;color:var(--gold);letter-spacing:2px;margin-bottom:4px;}
#panel .hint{font-size:11.5px;color:#6b7077;margin-bottom:20px;}
.stat{margin-bottom:15px;}
.stat .row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px;color:#c8cbd1;}
.stat .row b{color:#fff;}
.bar{height:7px;border-radius:4px;background:#1d2229;overflow:hidden;}
.bar i{display:block;height:100%;border-radius:4px;transition:width .6s;}
.bar.hp i{background:linear-gradient(90deg,#8a2f22,#c8452f);}

.bar.sta i{background:linear-gradient(90deg,#2d6b41,#5fbf7a);}
.bar.food i{background:linear-gradient(90deg,#7a5a20,#e0a850);}
.bar.water i{background:linear-gradient(90deg,#1f4a6b,#3d8fc7);}
.bar.mind i{background:linear-gradient(90deg,#4a3a6b,#8b6fc7);}

.bar.bond i{background:linear-gradient(90deg,#8a3a5a,#e07aa8);}

.evoHint{margin:10px 0 2px;padding:9px 12px;border-radius:9px;font-size:11.5px;line-height:1.7;
  letter-spacing:.3px;border:1px dashed #3a3128;color:#a89a80;background:rgba(201,162,78,.04);}
.evoHint.dim{opacity:.6;}
.evoHint.hot{color:#f0d090;border-color:rgba(201,162,78,.55);background:rgba(201,162,78,.1);
  animation:evoPulse 2.4s ease-in-out infinite;}
.evoHint.on{color:#ffe0a0;border-color:rgba(255,215,110,.7);background:rgba(255,200,80,.12);
  box-shadow:0 0 18px rgba(255,200,80,.14);}
@keyframes evoPulse{0%,100%{box-shadow:0 0 0 rgba(255,200,80,0);}50%{box-shadow:0 0 16px rgba(255,200,80,.28);}}
.divider{border:none;border-top:1px dashed #232830;margin:18px 0;}
.dogcard{background:#14171c;border:1px solid #2a2f38;border-radius:12px;padding:16px;margin-bottom:12px;}
.dogcard .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.dogcard .nm{font-size:16px;color:#fff;font-weight:700;letter-spacing:1px;}
.dogcard .pers{font-size:11px;color:var(--gold);border:1px solid #3a3020;padding:2px 9px;border-radius:10px;}
.loyal{font-size:12px;color:#a08b6a;margin-top:10px;font-style:italic;}


#intro{position:absolute;inset:0;z-index:60;overflow-y:auto;overflow-x:hidden;transition:opacity .9s;
  background:
    radial-gradient(ellipse at 50% 116%, rgba(120,150,185,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 22%, #0b0e14 0%, #06080c 48%, #020305 100%);
  display:flex;flex-direction:column;justify-content:center;padding:0 28px;}

#intro .bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:50% 36%;
  background-repeat:no-repeat;opacity:0;transition:opacity 2.2s ease;
  filter:brightness(.44) saturate(.72) contrast(1.06);}
#intro .bg.on{opacity:1;animation:kenburns 70s ease-in-out infinite alternate;}
@keyframes kenburns{0%{transform:scale(1.06) translate3d(0,0,0)}100%{transform:scale(1.13) translate3d(-1.8%,1.4%,0)}}

#intro .glow{position:absolute;left:51%;top:54%;width:52vmin;height:66vmin;z-index:1;pointer-events:none;
  transform:translate(-50%,-50%);mix-blend-mode:screen;filter:blur(34px);
  background:radial-gradient(50% 46% at 50% 50%, rgba(170,192,218,.17), transparent 70%);
  animation:glowBreath 9s ease-in-out infinite;}
@keyframes glowBreath{0%,100%{opacity:.30}50%{opacity:.60}}

#intro .grain{position:absolute;inset:-60px;z-index:2;pointer-events:none;opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;animation:grainShift 1.2s steps(4) infinite;}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(-9px,7px)}50%{transform:translate(7px,-10px)}75%{transform:translate(-6px,-5px)}100%{transform:translate(0,0)}}

#intro::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg, rgba(2,4,7,.78) 0%, rgba(2,4,7,.24) 24%, rgba(2,4,7,.08) 44%, rgba(2,4,7,.42) 74%, rgba(1,2,4,.90) 100%),
    radial-gradient(ellipse at 50% 48%, transparent 30%, rgba(0,0,0,.62) 100%);}

#intro .ttl,#intro .desc,#intro .enter,#intro .footrow,#intro .introDog,#intro .verTag{position:relative;z-index:3;}

#intro .fog{position:absolute;inset:-25% -12%;pointer-events:none;z-index:0;mix-blend-mode:screen;opacity:.6;}
#intro .fog.a{background:radial-gradient(60% 40% at 30% 30%, rgba(150,175,205,.10), transparent 70%),
    radial-gradient(50% 36% at 72% 64%, rgba(120,140,175,.08), transparent 72%);
  animation:fogA 27s ease-in-out infinite;}
#intro .fog.b{background:radial-gradient(55% 38% at 64% 28%, rgba(170,190,220,.08), transparent 70%),
    radial-gradient(48% 40% at 28% 70%, rgba(110,130,165,.07), transparent 72%);
  animation:fogB 35s ease-in-out infinite;}
@keyframes fogA{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.5}50%{transform:translate3d(3%,-2%,0) scale(1.08);opacity:.82}}
@keyframes fogB{0%,100%{transform:translate3d(0,0,0) scale(1.05);opacity:.46}50%{transform:translate3d(-3%,2%,0) scale(1);opacity:.74}}


#intro{ -webkit-overflow-scrolling:touch; }

#intro::after{content:"";display:block;height:calc(8px + env(safe-area-inset-bottom, 0px));flex-shrink:0;}


@media (max-height:700px){
  #intro{padding:0 26px;justify-content:flex-start;padding-top:max(14px, env(safe-area-inset-top));}
  #intro .ttl{font-size:40px;margin-top:0;}
  #intro .desc{font-size:12px;line-height:1.62;margin-bottom:11px;}
  #intro .introDog{width:96px;height:96px;margin-bottom:0;}
  #intro .start{margin-top:8px;padding:14px;font-size:15.5px;}
  #intro .resume{margin-top:6px;padding:10px;}
  
  #intro .reset{font-size:11px;padding:8px 14px;}
  #intro .footrow{margin-top:20px;margin-bottom:10px;}
}
@media (max-height:600px){
  #intro .ttl{font-size:36px;letter-spacing:6px;}
  
  #intro .desc{font-size:11.5px;line-height:1.62;margin-bottom:9px;}
  #intro .introDog{width:86px;height:86px;}
  #intro .start{margin-top:6px;padding:12px;font-size:15px;}
  #intro .reset{font-size:10.5px;padding:7px 12px;}
  #intro .footrow{margin-top:14px;margin-bottom:8px;}
}

@media (max-height:620px){
  #intro{padding:0 22px;}
  #intro .introDog{display:none;}      
  #intro .ttl{font-size:32px;letter-spacing:5px;}
  #intro .desc{font-size:11px;line-height:1.55;margin-bottom:7px;}
  #intro .desc{font-size:11px;line-height:1.5;margin-bottom:6px;}
  #intro .ttl{font-size:30px;letter-spacing:4px;}
  #intro .start{margin-top:3px;padding:10px;font-size:14px;}
  #intro .reset{font-size:10px;padding:6px 10px;}
  #intro .footrow{margin-top:10px;margin-bottom:6px;}
}

#intro .joss{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(205,218,235,.5);
  box-shadow:0 0 5px rgba(205,218,235,.5);animation:drift linear infinite;}
@keyframes drift{
  0%{transform:translateY(10vh) translateX(0) scale(.6);opacity:0;}
  14%{opacity:.5;}
  100%{transform:translateY(-104vh) translateX(16px) scale(1);opacity:0;}}
#intro .ttl{position:relative;z-index:3;font-size:33px;color:#eceae2;font-weight:300;letter-spacing:16px;
  text-align:center;line-height:1.5;margin-left:16px;
  text-shadow:0 2px 24px rgba(0,0,0,.92),0 0 72px rgba(150,180,215,.14);
  animation:ttlIn 2.6s cubic-bezier(.2,.7,.2,1) both;}
#intro .ttl::after{content:"";display:block;width:64px;height:1px;margin:18px auto 0;
  background:linear-gradient(90deg,transparent,rgba(190,205,228,.7),transparent);}
@keyframes ttlIn{0%{opacity:0;letter-spacing:34px;filter:blur(6px)}60%{opacity:1}100%{opacity:1;letter-spacing:16px;filter:blur(0)}}
#intro .desc{position:relative;z-index:3;font-size:12.5px;color:#8f949c;line-height:2.2;text-align:center;margin:26px 4px 40px;letter-spacing:.8px;
  text-shadow:0 2px 12px rgba(0,0,0,.95);animation:fadeUp 2.8s ease .3s both;}
#intro .desc b{color:#c8b48a;}
#intro .tagline{position:relative;z-index:3;font-size:13px;color:#cfd2d8;line-height:1.95;text-align:center;margin:16px 12px 0;letter-spacing:1px;font-weight:300;text-shadow:0 1px 8px rgba(0,0,0,.85);}
#intro .tagline b{color:#e8c478;font-weight:400;}
#intro .tagline + .desc{margin-top:18px;}
#intro .enter{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;}
#intro .start{position:relative;background:rgba(5,8,12,.38);color:#d8dee5;
  border:1px solid rgba(196,210,228,.30);border-radius:3px;padding:14px 30px;font-size:14px;
  letter-spacing:7px;cursor:pointer;font-family:inherit;font-weight:400;transition:.3s;
  text-shadow:0 1px 10px rgba(0,0,0,.85);animation:fadeUp 2.8s ease .6s both;}
#intro .start:hover{border-color:rgba(212,224,240,.75);color:#fff;background:rgba(196,210,228,.10);
  text-shadow:0 1px 10px rgba(0,0,0,.9);}

#intro .resume{position:relative;margin-top:12px;background:none;border:none;font-size:12px;letter-spacing:4px;cursor:pointer;font-family:inherit;color:#9aa3ad;transition:.3s;animation:fadeUp 2.8s ease .7s both;}
#intro .resume:hover{color:#cfd6dd;}
@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}


#intro .footrow{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;gap:0;margin-top:28px;
  flex-wrap:nowrap;                      
  opacity:.5;transition:opacity .3s;animation:fadeUp 2.8s ease .9s both;}
#intro .footrow:hover{opacity:.95;}

#intro .reset{position:relative;background:none;border:none;color:#9aa0a8;
  font-size:11px;line-height:1;cursor:pointer;font-family:inherit;letter-spacing:2px;
  padding:8px 18px;text-decoration:none;transition:.2s;
  white-space:nowrap;flex:0 0 auto;}
#intro .reset:hover{color:#d6dde4;}

#intro .reset + .reset::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:rgba(196,210,228,.26);}
#intro #btnWipe{color:#a98f88;}
#intro #btnWipe:hover{color:#d8b6ae;}

@media (max-width:400px){
  #intro .reset{padding:8px 13px;letter-spacing:1px;}
}

@media (max-width:340px){
  #intro .reset{padding:8px 9px;letter-spacing:0;font-size:10.5px;}
}


#sex{position:absolute;inset:0;z-index:60;opacity:0;pointer-events:none;transition:opacity .5s;
  background:radial-gradient(ellipse at 50% 40%, #14100c 0%, #0a0806 48%, #050403 100%);
  display:flex;flex-direction:column;justify-content:center;padding:26px;}
#sex.on{opacity:1;pointer-events:auto;}
#sex h2{color:#f2eee6;font-size:19px;text-align:center;letter-spacing:4px;margin-bottom:5px;}
#sex h2::after{content:"";display:block;width:90px;height:1px;margin:12px auto 0;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);}
#sex .sub{color:#8b8f96;font-size:11.5px;text-align:center;margin-bottom:26px;letter-spacing:1px;}
#sex .row{display:flex;gap:14px;}
.sexopt{flex:1;border:1px solid #2f2820;border-radius:14px;padding:16px 10px 14px;cursor:pointer;
  transition:.22s;background:linear-gradient(180deg,#14110d,#0c0a08);text-align:center;position:relative;}
.sexopt:hover{border-color:var(--brass);transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 24px rgba(201,162,78,.18);}
.sexopt.sel{border-color:var(--brass);background:linear-gradient(180deg,#1c1710,#100c08);
  box-shadow:0 0 26px rgba(201,162,78,.28),inset 0 0 20px rgba(201,162,78,.06);}
.sexopt .fig{height:132px;display:flex;align-items:flex-end;justify-content:center;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.7));}
.sexopt .fig svg{height:132px;width:auto;display:block;}
.sexopt .nm{margin-top:12px;color:#e8e2d6;font-size:14px;letter-spacing:4px;font-weight:700;}
.sexopt.sel .nm{color:var(--brass);}
.sexopt .tg{margin-top:4px;font-size:10.5px;color:#6f6a62;letter-spacing:.5px;}
#sex .go{margin-top:26px;background:linear-gradient(180deg,#a83525,#7a2418);color:#fff;
  border:1px solid rgba(201,162,78,.45);border-radius:30px;padding:14px;font-size:15px;
  letter-spacing:5px;cursor:pointer;font-family:inherit;font-weight:700;transition:.22s;}
#sex .go:hover{background:linear-gradient(180deg,#c8452f,#8a2f22);box-shadow:0 0 30px rgba(200,69,47,.5);}
#sex .back{margin-top:14px;background:none;border:none;color:#5f5a53;font-size:11.5px;cursor:pointer;
  font-family:inherit;letter-spacing:1px;text-decoration:underline;}


#naming{position:absolute;inset:0;z-index:62;opacity:0;pointer-events:none;transition:opacity .5s;
  background:radial-gradient(ellipse at 50% 40%, #14100c 0%, #0a0806 48%, #050403 100%);
  display:flex;flex-direction:column;justify-content:center;padding:26px;}
#naming.on{opacity:1;pointer-events:auto;}
#naming h2{color:#f2eee6;font-size:19px;text-align:center;letter-spacing:4px;margin-bottom:5px;}
#naming h2::after{content:"";display:block;width:90px;height:1px;margin:12px auto 0;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);}
#naming .sub{color:#8b8f96;font-size:11.5px;text-align:center;margin-bottom:30px;letter-spacing:1px;}
#naming .nmField{display:flex;align-items:center;gap:14px;margin-bottom:16px;
  border:1px solid #2f2820;border-radius:12px;padding:13px 16px;
  background:linear-gradient(180deg,#14110d,#0c0a08);transition:.22s;}
#naming .nmField:focus-within{border-color:var(--brass);box-shadow:0 0 22px rgba(201,162,78,.16);}
#naming .nmField span{color:#8b8f96;font-size:12px;letter-spacing:3px;flex-shrink:0;}
#naming .nmField input{flex:1;background:none;border:none;outline:none;color:#f2eee6;
  font-size:16px;letter-spacing:2px;font-family:inherit;min-width:0;}
#naming .nmField input::placeholder{color:#4d4a44;letter-spacing:1px;}
#naming .nmHint{color:#6f6a60;font-size:10.5px;text-align:center;letter-spacing:1px;
  margin:-4px 0 18px;line-height:1.7;}
#naming .go{margin-top:22px;background:linear-gradient(180deg,#a83525,#7a2418);color:#fff;
  border:1px solid rgba(201,162,78,.45);border-radius:30px;padding:14px;font-size:15px;
  letter-spacing:5px;cursor:pointer;font-family:inherit;font-weight:700;transition:.22s;}
#naming .go:hover{background:linear-gradient(180deg,#c8452f,#8a2f22);box-shadow:0 0 30px rgba(200,69,47,.5);}
#naming .skip{margin-top:14px;background:none;border:none;color:#5f5a53;font-size:11.5px;cursor:pointer;
  font-family:inherit;letter-spacing:1px;text-decoration:underline;}


#prologue{position:absolute;inset:0;z-index:65;opacity:0;pointer-events:none;transition:opacity .8s;
  background:#040404;display:flex;flex-direction:column;justify-content:center;
  align-items:center;padding:0 40px;cursor:pointer;}
#prologue.on{opacity:1;pointer-events:auto;}
#prologue .vign{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 160px 60px rgba(0,0,0,.9);}
#prologue .ember{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;
  background:rgba(224,168,80,.75);box-shadow:0 0 8px 2px rgba(224,168,80,.5);
  animation:emberUp linear infinite;}
@keyframes emberUp{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  15%{opacity:.9;}
  100%{transform:translateY(-88vh) translateX(14px);opacity:0;}
}
#prologue .pline{position:absolute;left:0;right:0;text-align:center;padding:0 40px;
  font-size:16.5px;line-height:2.2;letter-spacing:1.6px;color:#e6e0d4;
  text-shadow:0 2px 20px rgba(0,0,0,.95);opacity:0;transform:translateY(10px);
  transition:opacity 1s,transform 1s;}
#prologue .pline.on{opacity:1;transform:translateY(0);}
#prologue .pline b{color:var(--bloodL);text-shadow:0 0 18px rgba(200,69,47,.6);}
#prologue .skip{position:absolute;right:22px;bottom:22px;color:#5a5550;font-size:11px;letter-spacing:1px;}

#prologue .phint{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom, 0px));text-align:center;
  color:#6b655c;font-size:11px;letter-spacing:2px;pointer-events:none;
  animation:qpulse 2.6s ease-in-out infinite;}


body:not([data-ingame="1"]) #hud,
body:not([data-ingame="1"]) #stage,
body:not([data-ingame="1"]) #textzone,
body:not([data-ingame="1"]) #knockSfx{ display:none!important; }
#prologue .brand{position:absolute;left:0;right:0;bottom:24%;text-align:center;opacity:0;
  transition:opacity 1.2s;}
#prologue .brand.on{opacity:1;}
#prologue .brand .b1{color:#f2eee6;font-size:22px;letter-spacing:8px;font-weight:800;
  text-shadow:0 0 22px rgba(200,69,47,.5);}
#prologue .brand .b2{color:var(--brass);font-size:11px;letter-spacing:8px;margin-top:10px;}

#diff{position:absolute;inset:0;z-index:60;overflow:hidden;
  background:radial-gradient(ellipse at 50% 24%, #14100c 0%, #0a0806 48%, #050403 100%);
  display:flex;flex-direction:column;justify-content:center;padding:26px;opacity:0;pointer-events:none;transition:opacity .5s;}
#diff.on{opacity:1;pointer-events:auto;}
#diff h2{color:#f2eee6;font-size:19px;text-align:center;letter-spacing:4px;margin-bottom:5px;}
#diff h2::after{content:"";display:block;width:90px;height:1px;margin:12px auto 0;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);}
#diff .sub{color:#8b8f96;font-size:11.5px;text-align:center;margin-bottom:22px;letter-spacing:1px;}
.dopt{position:relative;border:1px solid #2f2820;border-left:3px solid #3a2f22;border-radius:12px;
  padding:14px 17px 14px 20px;margin-bottom:12px;cursor:pointer;transition:.22s;
  background:linear-gradient(180deg,#14110d,#0d0b08);overflow:hidden;}
.dopt::after{content:attr(data-roman);position:absolute;right:10px;top:-14px;font-size:56px;
  font-weight:800;color:rgba(201,162,78,.07);font-family:Georgia,serif;pointer-events:none;}
.dopt:hover{border-color:var(--brass);border-left-color:var(--bloodL);transform:translateX(5px);
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 20px rgba(201,162,78,.14);}
.dopt .t{color:var(--brass);font-size:15px;font-weight:700;letter-spacing:2px;}
.dopt .d{color:#8b8f96;font-size:11.5px;margin-top:5px;line-height:1.7;position:relative;z-index:1;}
.dopt .d b{color:var(--bloodL);}
.dopt .rate{display:inline-block;margin-top:7px;font-size:10.5px;color:#6f6a62;
  border:1px dashed #38302a;border-radius:8px;padding:2px 9px;letter-spacing:.5px;position:relative;z-index:1;}
.dopt .rate b{color:#c9a24e;}
.dopt.locked{opacity:.4;cursor:not-allowed;}
.dopt.locked:hover{transform:none;border-color:#2f2820;border-left-color:#3a2f22;box-shadow:none;}
#diff .reset,#sex .back{margin-top:8px;background:none;border:none;color:#6f6a62;font-size:12px;
  cursor:pointer;font-family:inherit;letter-spacing:2px;text-decoration:underline;text-underline-offset:4px;}
#diff .reset:hover,#sex .back:hover{color:var(--brass);}



.photoOn{position:absolute;inset:0;background:center/cover no-repeat;
  animation:kbz 16s ease-out forwards;transform-origin:50% 42%;}
@keyframes kbz{from{transform:scale(1.075)}to{transform:scale(1.0)}}

#caption{position:absolute;left:0;right:0;bottom:8.5%;z-index:6;display:flex;justify-content:center;
  opacity:0;transform:translateY(12px);transition:opacity .75s ease,transform .75s ease;
  pointer-events:none;padding:0 20px;}
#caption.on{opacity:1;transform:translateY(0);}
#caption span{display:inline-block;max-width:92%;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.66) 10%,rgba(0,0,0,.66) 90%,transparent);
  color:#f5f1e8;font-size:14px;letter-spacing:1.6px;line-height:1.95;padding:9px 30px;
  text-shadow:0 1px 5px rgba(0,0,0,.95);font-weight:600;}

#btnSnd.off{color:#55504a;text-decoration:line-through;}


#opt{position:absolute;inset:0;z-index:88;background:#080706;display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:0 26px;}
#opt.on{display:flex;}
#opt h2{font-size:17px;color:#e8d9b8;letter-spacing:6px;font-weight:400;
  margin:0 0 6px;text-shadow:0 0 22px rgba(232,196,120,.30);}
#opt .sub{font-size:11.5px;color:#7d7a72;letter-spacing:2px;margin-bottom:20px;line-height:1.9;text-align:center;}
.optRow{width:100%;max-width:340px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.055);}
.optRow .lb{flex:1;}
.optRow .lb b{display:block;color:#ded8cb;font-size:13.5px;font-weight:400;letter-spacing:1.4px;margin-bottom:4px;}
.optRow .lb i{display:block;color:#6e6b64;font-size:10.5px;font-style:normal;letter-spacing:.6px;line-height:1.7;}
.sw{position:relative;width:46px;height:25px;border-radius:13px;flex-shrink:0;cursor:pointer;
  background:#2b2926;border:1px solid rgba(255,255,255,.09);transition:background .28s ease;}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:#7a766e;transition:all .28s cubic-bezier(.3,1.3,.4,1);}
.sw.on{background:rgba(200,150,70,.34);border-color:rgba(232,196,120,.55);}
.sw.on::after{left:23px;background:#f0d9a0;box-shadow:0 0 12px rgba(232,196,120,.75);}
#opt .close{margin-top:24px;background:transparent;border:1px solid #4a4f56;color:#d4d1ca;
  padding:10px 30px;border-radius:20px;font-size:13px;cursor:pointer;font-family:inherit;letter-spacing:2px;}
#opt .note{margin-top:16px;color:#5b5851;font-size:10px;letter-spacing:1px;text-align:center;line-height:1.9;max-width:330px;}


#intro .introDog{position:relative;width:104px;height:104px;margin:0 auto 16px;border-radius:50%;overflow:hidden;
  -webkit-mask-image:radial-gradient(circle,#000 55%,transparent 72%);mask-image:radial-gradient(circle,#000 55%,transparent 72%);
  opacity:.6;filter:brightness(.82) saturate(.72);transition:opacity .4s;}
#intro .introDog:hover{opacity:.8;}
#intro .introDog img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;display:block;}

#sex .fig{height:200px;overflow:hidden;position:relative;background:#0d0b09;}
#sex .fig img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block;
  filter:brightness(.95) contrast(1.04);}
#sex .fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(12,9,6,.94));pointer-events:none;}

@media(min-width:1024px){
  #sex .row{max-width:720px;margin:0 auto;}
  #sex .fig{width:214px;height:320px;margin:0 auto;}
}

#shareOv{position:absolute;inset:0;z-index:90;background:#050403;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:16px;}
#shareOv.on{display:flex;}
#shareOv img{max-width:80%;max-height:62%;border-radius:10px;box-shadow:0 14px 70px rgba(0,0,0,.85);}
#shareOv .tip{color:#e8e2d4;font-size:13px;letter-spacing:2px;text-align:center;line-height:2;}
#shareOv button{background:transparent;border:1px solid #4a4f56;color:#d4d1ca;padding:10px 26px;
  border-radius:20px;font-size:13px;cursor:pointer;font-family:inherit;letter-spacing:2px;}
#shareOv button:hover{border-color:var(--gold);color:#fff;}


#review{position:absolute;inset:0;z-index:95;background:rgba(4,4,5,.94);
  display:none;align-items:center;justify-content:center;padding:22px;}
#review.on{display:flex;}
#review .rvbox{width:100%;max-width:340px;max-height:78%;overflow-y:auto;
  background:rgba(18,20,24,.97);border:1px solid #2a3038;border-radius:12px;
  padding:18px 16px 14px;box-shadow:0 20px 70px rgba(0,0,0,.85);}
#review .rvhead{text-align:center;margin-bottom:4px;}
#review .rvtag{font-size:11px;letter-spacing:4px;color:var(--gold);}
#review .rvsub{text-align:center;font-size:11.5px;color:#7b8087;line-height:1.7;
  margin-bottom:14px;border-bottom:1px dashed #2a3038;padding-bottom:10px;}
#review .rvrow{display:flex;justify-content:space-between;gap:10px;
  font-size:12.5px;color:#b9c0c8;line-height:1.9;}
#review .rvrow b{color:#e6e9ee;font-weight:600;}
#review .rvrow .gr{color:#5a9e6f;}
#review .rvsec{margin-top:13px;padding-top:10px;border-top:1px solid #23292f;}
#review .rvsec h4{font-size:11px;letter-spacing:2px;color:#8d949c;font-weight:400;margin-bottom:6px;}
#review .rvclue{font-size:12px;color:#c9a24e;line-height:1.85;}
#review .rvclue .n{color:#6a7178;}
#review .rvmiss{font-size:11.5px;color:#8d949c;line-height:1.8;}
#review #rvClose{display:block;width:100%;margin-top:16px;background:transparent;
  border:1px solid #4a4f56;color:#d4d1ca;padding:11px;border-radius:22px;
  font-size:13px;cursor:pointer;font-family:inherit;letter-spacing:3px;}
#review #rvClose:hover{border-color:var(--gold);color:#fff;}
#cg .cgbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}


#ach{position:absolute;inset:0;z-index:96;background:rgba(4,4,5,.95);
  display:none;align-items:center;justify-content:center;padding:22px;}
#ach.on{display:flex;}
#ach .achbox{width:100%;max-width:340px;max-height:80%;overflow-y:auto;
  background:rgba(18,20,24,.97);border:1px solid #2a3038;border-radius:12px;
  padding:18px 16px 14px;box-shadow:0 20px 70px rgba(0,0,0,.85);}
#ach .achhead{text-align:center;margin-bottom:4px;}
#ach .achtag{font-size:11px;letter-spacing:4px;color:var(--gold);}
#ach .achstat{text-align:center;font-size:11.5px;color:#7b8087;line-height:1.8;
  margin-bottom:14px;border-bottom:1px dashed #2a3038;padding-bottom:10px;}
#ach .achrow{display:flex;gap:9px;align-items:flex-start;padding:7px 0;
  border-bottom:1px solid #1e242a;}
#ach .achrow:last-child{border-bottom:none;}
#ach .achrow i{flex-shrink:0;width:15px;font-style:normal;font-size:12px;color:#3d434b;}
#ach .achrow.on i{color:var(--gold);}
#ach .achrow .t{font-size:12.5px;color:#6a7178;line-height:1.5;}
#ach .achrow.on .t{color:#e6e9ee;}
#ach .achrow .d{font-size:10.5px;color:#565c63;line-height:1.6;margin-top:1px;}
#ach .achrow.on .d{color:#8d949c;}


#codex{position:absolute;inset:0;z-index:97;background:rgba(4,4,5,.96);display:none;align-items:center;justify-content:center;padding:env(safe-area-inset-bottom,0px) 0;}
#codex.on{display:flex;}
#codex .codexbox{width:100%;max-width:340px;max-height:82%;overflow-y:auto;background:linear-gradient(180deg,#0e0f12,#070708);border:1px solid rgba(201,162,78,.18);border-radius:14px;padding:18px 16px 14px;margin:0 16px;}
#codex .codexhead{text-align:center;margin-bottom:10px;}
#codex .codextag{font-size:11px;letter-spacing:4px;color:var(--gold);}
#codex .codexstat{text-align:center;font-size:11px;color:#7b8087;margin-bottom:10px;letter-spacing:1px;}
#codex .cxrow{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);}
#codex .cxrow:last-child{border-bottom:none;}
#codex .cxicon{flex-shrink:0;width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;background:#15171b;border:1px solid rgba(255,255,255,.08);}
#codex .cxrow.on .cxicon{background:rgba(201,162,78,.12);border-color:var(--gold);box-shadow:0 0 10px rgba(201,162,78,.25);}
#codex .cxt{flex:1;min-width:0;}
#codex .cxtag{font-size:10px;letter-spacing:1px;color:#565c63;}
#codex .cxrow.on .cxtag{color:var(--gold);}
#codex .cxname{font-size:calc(12.5px * var(--fs));color:#565c63;line-height:1.5;margin-top:1px;}
#codex .cxrow.on .cxname{color:#e6e9ee;}
#codex .cxl{font-size:calc(10.5px * var(--fs));color:#565c63;line-height:1.6;margin-top:3px;}
#codex .cxrow.on .cxl{color:#8d949c;}

#codex .cxsec{font-size:11px;letter-spacing:2px;color:#8a7a4e;text-align:center;
  margin:16px 0 8px;padding-top:12px;border-top:1px solid rgba(201,162,78,.16);}
#codex .memrow .cxicon{background:rgba(120,110,180,.10);border-color:rgba(150,140,210,.35);}
#codex .memrow.on .cxicon{background:rgba(150,140,210,.16);border-color:#9b8fd6;box-shadow:0 0 10px rgba(150,140,210,.28);}
#codex .memrow.on .cxtag{color:#9b8fd6;}
#codex .cxmem{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px;}
#codex .cxchip{font-size:10.5px;padding:3px 9px;border-radius:11px;
  background:rgba(150,140,210,.12);border:1px solid rgba(150,140,210,.35);color:#b3a9e0;white-space:nowrap;}
#codex #codexClose{margin-top:14px;width:100%;}
#ach #achClose{display:block;width:100%;margin-top:16px;background:transparent;
  border:1px solid #4a4f56;color:#d4d1ca;padding:11px;border-radius:22px;
  font-size:13px;cursor:pointer;font-family:inherit;letter-spacing:3px;}
#ach #achClose:hover{border-color:var(--gold);color:#fff;}


#cg{position:absolute;inset:0;z-index:70;opacity:0;pointer-events:none;transition:opacity 1.3s;}
#cg.on{opacity:1;pointer-events:auto;}
#cg .cgimg{position:absolute;inset:0;overflow:hidden;}
#cg .cgimg .kb{position:absolute;inset:0;transform:scale(1.08);animation:cgzoom 12s ease-out forwards;}
@keyframes cgzoom{to{transform:scale(1);}}

#cg .cgscene{position:absolute;inset:0;}
#cg .cgHorizon{position:absolute;left:0;right:0;bottom:38%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,235,190,.35),transparent);}
#cg .cgSun{position:absolute;left:50%;bottom:38%;transform:translate(-50%,50%);
  width:150px;height:150px;border-radius:50%;filter:blur(18px);opacity:.55;}
#cg .cgFig{position:absolute;bottom:38%;transform-origin:bottom center;}
#cg .cgFig.p{left:47%;width:20px;height:52px;border-radius:9px 9px 4px 4px;background:rgba(10,8,6,.92);}
#cg .cgFig.d{left:54%;width:34px;height:22px;border-radius:17px;background:rgba(10,8,6,.92);bottom:38%;}
#cg .cgFig.d::after{content:"";position:absolute;top:12px;right:-14px;width:16px;height:5px;border-radius:3px;background:rgba(10,8,6,.92);transform:rotate(-14deg);}
#cg .cgGrave{position:absolute;left:50%;bottom:38%;transform:translateX(-50%);
  width:80px;height:26px;border-radius:50% 50% 8px 8px;background:rgba(8,7,6,.9);}
#cg .cgStick{position:absolute;left:50%;bottom:calc(38% + 20px);transform:translateX(-50%);
  width:5px;height:26px;border-radius:3px;background:rgba(30,24,16,.95);}
#cg .cgStick::after{content:"";position:absolute;left:-6px;top:-6px;width:17px;height:17px;border-radius:50%;border:3px solid rgba(40,32,20,.95);}
#cg .cgDoor{position:absolute;left:50%;bottom:38%;transform:translateX(-50%);
  width:88px;height:140px;border-radius:5px 5px 2px 2px;border:2px solid rgba(60,46,32,.9);
  background:linear-gradient(180deg,rgba(30,22,14,.95),rgba(12,9,6,.98));}
#cg .cgDoor.open{background:linear-gradient(180deg,rgba(255,230,170,.5),rgba(20,14,8,.95));}
#cg .cgDoor.open::after{content:"";position:absolute;inset:-8px;filter:blur(18px);
  background:radial-gradient(circle at 50% 60%,rgba(255,225,160,.7),transparent 70%);}
#cg .cgFig.giant{width:64px;height:56px;border-radius:32px 22px 18px 22px;
  background:rgba(10,8,6,.94);bottom:38%;}
#cg .cgFig.giant::before{content:"";position:absolute;top:-16px;left:-12px;width:38px;height:38px;
  border-radius:54% 50% 46% 50%;background:rgba(10,8,6,.94);}
#cg .cgFig.giant::after{content:"";position:absolute;top:-10px;left:-14px;width:15px;height:26px;
  border-radius:54% 54% 40% 40%;background:rgba(10,8,6,.94);transform:rotate(-16deg);}

#cg .cgFig.giant{box-shadow:0 0 46px 16px rgba(255,205,110,.55);}
#cg .cgFig.giant::before{box-shadow:0 0 40px 14px rgba(255,205,110,.55);}


#cg .cgFig.giantDown{
  left:24%;width:132px;height:38px;bottom:34%;
  border-radius:30% 44% 40% 34%;
  background:linear-gradient(180deg,rgba(18,11,9,.97),rgba(6,3,3,.99));
  transform:rotate(-2deg);
  box-shadow:0 14px 40px 6px rgba(90,10,6,.5);
}

#cg .cgFig.giantDown::before{content:"";position:absolute;left:-14px;bottom:-4px;
  width:52px;height:12px;border-radius:8px;background:rgba(6,3,3,.98);
  transform:rotate(9deg);}

#cg .cgFig.giantDown::after{content:"";position:absolute;left:-40px;bottom:-12px;
  width:46px;height:30px;border-radius:54% 44% 46% 58%;background:rgba(4,2,2,.99);
  transform:rotate(14deg);box-shadow:inset -8px -6px 0 -4px rgba(30,18,14,.9);}

#cg .cgFig.giantDown2{
  left:20%;width:20px;height:16px;bottom:34.6%;
  border-radius:60% 30% 50% 50%;background:rgba(4,2,2,.99);
  transform:rotate(-24deg);box-shadow:none;
}

#cg .cgFig.tailDown{
  left:47%;width:46px;height:9px;bottom:33.4%;
  border-radius:6px;background:rgba(8,4,4,.95);
  transform:rotate(6deg);box-shadow:none;
}

#cg .cgFig.kneel{
  left:70%;bottom:38%;width:19px;height:34px;
  border-radius:9px 9px 5px 5px;
  background:rgba(8,5,4,.96);
  transform:rotate(6deg);
}
#cg .cgFig.kneel::before{content:"";position:absolute;top:-15px;left:1px;width:17px;height:17px;
  border-radius:50%;background:rgba(8,5,4,.96);}

#cg .cgPool{position:absolute;left:0;right:0;bottom:31%;height:34px;
  background:radial-gradient(ellipse at 42% 60%,rgba(120,14,10,.62),rgba(70,8,6,.34) 52%,transparent 76%);
  filter:blur(5px);}

#cg .cgstack{position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  max-height:78%;                       
  padding:0 0 calc(22px + env(safe-area-inset-bottom, 0px));
  pointer-events:none;}
#cg .cgtext{position:static;text-align:center;padding:0 28px;
  margin:0 0 26px;                      
  overflow-y:auto;                      
  
  pointer-events:none;}
#cg.on .cgtext{pointer-events:auto;}
#cg .cgtag{display:inline-block;font-size:10px;letter-spacing:3px;color:#9a8a68;
  border:1px solid #3a3020;border-radius:10px;padding:2px 10px;margin-bottom:10px;}
#cg .cgname{color:var(--gold);font-size:19px;font-weight:700;letter-spacing:4px;text-shadow:0 2px 20px rgba(0,0,0,.9);}
#cg .cgline{color:#ece9e2;font-size:13.5px;margin-top:12px;line-height:2;text-shadow:0 2px 14px rgba(0,0,0,.9);}
#cg .cgep{color:rgba(232,196,118,.9);font-size:12px;margin-top:10px;line-height:1.9;letter-spacing:.5px;
  font-style:italic;text-shadow:0 2px 14px rgba(0,0,0,.95);}
#cg .cgep::before{content:"── ";opacity:.6;}
#cg .cgep::after{content:" ──";opacity:.6;}
#cg .cgcause{color:rgba(232,122,102,.96);font-size:12.5px;margin-top:9px;letter-spacing:2px;font-weight:600;text-shadow:0 2px 14px rgba(0,0,0,.95);}

#cg .cgfrag{margin-top:10px;text-shadow:0 2px 14px rgba(0,0,0,.95);}
#cg .cgfrag .fmain{color:rgba(232,196,118,.98);font-size:13px;letter-spacing:1.5px;font-weight:600;}
#cg .cgfrag .fsub{color:rgba(226,220,208,.62);font-size:11px;letter-spacing:1px;margin-top:4px;}
#cg .cgfrag.on{animation:fragIn .9s ease .5s both;}
@keyframes fragIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
#cg .cgsave{position:absolute;right:26px;top:26px;background:rgba(200,69,47,.92);color:#fff;border:none;padding:9px 17px;border-radius:20px;font-size:12.5px;cursor:pointer;font-family:inherit;opacity:0;transition:opacity .6s .9s;letter-spacing:1px;}
#cg.on .cgsave{opacity:1;}

#cg .cgfoot{position:static;
  display:flex;flex-direction:column;gap:14px;
  padding:0 26px;
  opacity:0;transition:opacity .6s 1.2s;pointer-events:none;}
#cg.on .cgfoot{opacity:1;pointer-events:auto;}
#cg .cgbtns{display:flex;gap:12px;justify-content:center;}
#cg .cgbtns button{background:transparent;border:1px solid #4a4f56;color:#d4d1ca;padding:9px 20px;border-radius:20px;font-size:12.5px;cursor:pointer;font-family:inherit;letter-spacing:1px;transition:.2s;}
#cg .cgbtns button:hover{border-color:var(--gold);color:#fff;}

#cg .cgrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
#cg .cglogo{color:#fff;font-size:12px;letter-spacing:4px;opacity:.75;flex:0 0 auto;}
#cg .cgmeta{color:#9a9fa6;font-size:11px;letter-spacing:1px;text-align:right;
  flex:1 1 auto;min-width:0;line-height:1.6;overflow-wrap:anywhere;}

@media (max-width:379px){
  #cg .cgmeta{font-size:10px;letter-spacing:.5px;}
}


#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:35;}

#ch1Card,#ch2Card{position:absolute;inset:0;z-index:95;background:#000;display:flex;flex-direction:column;
  justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .5s ease;}
#ch1Card.on,#ch2Card.on{opacity:1;pointer-events:auto;}
#ch1Card .ch1Inner,#ch2Card .ch1Inner{text-align:center;animation:ch1Rise 1.4s ease both;}
#ch1Card .ch1Title,#ch2Card .ch1Title{color:var(--gold);font-size:32px;letter-spacing:12px;font-weight:800;
  text-shadow:0 0 28px rgba(217,185,106,.7),0 0 8px rgba(217,185,106,.9);}
#ch1Card .ch1Sub,#ch2Card .ch1Sub{margin-top:18px;color:#9a9488;font-size:13px;letter-spacing:4px;}

html.deadland #stage{ filter:saturate(.72) contrast(1.06) brightness(.95); }

#intro .ageTip{margin-top:16px;text-align:center;font-size:10px;letter-spacing:2px;color:#4a4340;user-select:none;}
@keyframes ch1Rise{0%{opacity:0;transform:translateY(14px);}100%{opacity:1;transform:translateY(0);}}
#flash.on{animation:flashA .9s ease-out;}
@keyframes flashA{0%{opacity:0;}7%{opacity:1;}100%{opacity:0;}}
#golden{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s;z-index:8;
  background:radial-gradient(circle at 50% 50%,rgba(255,220,120,.85),rgba(255,170,40,.4) 38%,transparent 72%);}
#golden.on{opacity:1;}
.shake{animation:shakeA .5s ease-in-out;}
@keyframes shakeA{0%,100%{transform:translate(0,0);}15%{transform:translate(-7px,4px);}30%{transform:translate(6px,-5px);}45%{transform:translate(-5px,-3px);}60%{transform:translate(5px,4px);}80%{transform:translate(-3px,2px);}}

.softbeat{animation:softbeatA .62s ease-out;}
@keyframes softbeatA{0%{filter:brightness(1);}18%{filter:brightness(1.14) contrast(1.03);}100%{filter:brightness(1);}}

#achv{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:45;text-align:center;transition:all .65s cubic-bezier(.2,1.4,.4,1);pointer-events:none;}
#achv.on{opacity:1;transform:translate(-50%,-50%) scale(1);}
#achv .medal{font-size:46px;filter:drop-shadow(0 0 22px rgba(255,210,90,.95));}
#achv .name{font-size:18px;color:#fff;font-weight:800;letter-spacing:3px;margin-top:8px;text-shadow:0 0 18px rgba(255,200,80,.95);}
#achv .sub{font-size:11.5px;color:var(--gold);letter-spacing:5px;margin-top:5px;}



#tools{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:13;opacity:0;transition:opacity .3s;pointer-events:none;}
#tools.on{opacity:1;pointer-events:auto;}
#tools button{background:rgba(20,23,28,.9);border:1px solid #2a2f38;color:#a8adb4;width:30px;height:30px;border-radius:50%;font-size:13px;cursor:pointer;font-family:inherit;transition:.2s;}
#tools button:hover{border-color:var(--gold);color:#fff;}


#recorderHud{position:absolute;top:52px;right:10px;z-index:14;
  display:none;align-items:center;gap:6px;
  padding:6px 11px;border-radius:14px;cursor:pointer;
  background:rgba(18,20,24,.92);border:1px solid #4a3c1c;
  color:#e8d9a8;font-size:12px;letter-spacing:.5px;
  box-shadow:0 2px 12px rgba(0,0,0,.5);user-select:none;
  transition:transform .15s,border-color .2s,opacity .3s;}
#recorderHud.on{display:flex;animation:recIn .3s ease both;}
#recorderHud:hover{border-color:var(--gold);transform:translateY(-1px);}
#recorderHud .recIcon{font-size:14px;filter:drop-shadow(0 0 4px rgba(217,185,106,.6));}
#recorderHud .recTxt b{color:#fff;font-weight:700;}
#recorderHud.playing{animation:recPlay .9s ease infinite;pointer-events:none;}
@keyframes recIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:translateX(0);}}
@keyframes recPlay{0%,100%{box-shadow:0 0 0 rgba(217,185,106,0);}50%{box-shadow:0 0 14px rgba(217,185,106,.7);}}
  .choicesTitle{font-size:12px;color:#9aa0a8;letter-spacing:.5px;padding:2px 4px 4px;text-align:center;opacity:.9;}

  
  #knockSfx{display:none;align-self:center;flex-shrink:0;
    width:min(95%,500px);margin:6px auto 2px;
    background:rgba(14,16,20,.95);border:1px solid #3a3020;border-radius:14px;
    padding:7px 12px;box-shadow:0 2px 14px rgba(0,0,0,.5);
    font-size:11px;color:#cfc4a8;letter-spacing:.3px;}
  #knockSfx.on{display:flex;align-items:center;gap:10px;}
  #knockSfx .ksLabel{display:flex;flex-direction:column;line-height:1.25;flex-shrink:0;}
  #knockSfx .ksLabel b{color:#e8d9a8;font-size:11px;}
  #knockSfx .ksLabel i{font-style:normal;color:#8a8f98;font-size:9.5px;}
  #knockSfx .ksViz{position:relative;flex:1;height:30px;min-width:120px;
    border-left:2px solid #4a4030;border-right:2px solid #4a4030;
    background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.05),rgba(255,255,255,.02));}
  #knockSfx .kdot{position:absolute;top:50%;transform:translate(-50%,-50%);
    width:9px;height:9px;border-radius:50%;background:#6b5a32;
    box-shadow:0 0 0 rgba(217,185,106,0);transition:background .12s,box-shadow .12s,transform .12s;}
  #knockSfx .kdot.hit{background:#d9b96a;box-shadow:0 0 9px rgba(217,185,106,.9);transform:translate(-50%,-50%) scale(1.35);}
  #knockSfx .ksMark{position:absolute;top:-2px;transform:translateX(-50%);font-size:9px;opacity:.85;}
  #knockSfx .ksWave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:#7a6a48;font-size:10px;letter-spacing:1px;}
  #knockSfx .ksReplay{flex-shrink:0;cursor:pointer;border:1px solid #4a3c1c;
    background:rgba(217,185,106,.12);color:#e8d9a8;border-radius:11px;
    padding:6px 10px;font-size:11px;letter-spacing:.5px;user-select:none;
    transition:background .15s,transform .1s;}
  #knockSfx .ksReplay:hover{background:rgba(217,185,106,.22);}
  #knockSfx .ksReplay:active{transform:scale(.94);}
  
  
  #knockSfx .ksLegend{display:flex;gap:11px;align-items:center;flex-wrap:wrap;
    margin-top:6px;width:100%;color:#9aa0a8;font-size:9.5px;letter-spacing:.3px;line-height:1.4;
    max-width:100%;overflow-wrap:break-word;}
  #knockSfx .ksLegend .lk{display:inline-flex;align-items:center;gap:3px;
    max-width:100%;overflow-wrap:break-word;}
  @media (max-width:400px){
    #knockSfx .ksLegend{gap:6px 9px;font-size:9px;letter-spacing:0;}
    #knockSfx .ksLegend .lk{white-space:normal;word-break:break-word;}
  }
  #knockSfx .ksLegend b{color:#cdbb86;font-weight:600;}

  
#stagebar{align-self:center;display:none;flex-shrink:0;position:static;
  background:rgba(12,14,17,.94);border:1px solid #3a3020;border-radius:20px;
  padding:7px 18px;font-size:11.5px;letter-spacing:1.5px;color:var(--gold);
  opacity:0;transition:opacity .5s;pointer-events:none;
  max-width:92%;white-space:normal;text-align:center;margin:2px auto 4px;}
#stagebar.on{display:inline-block;opacity:1;}


#toast{align-self:center;display:none;flex-shrink:0;position:static;
  background:rgba(20,23,28,.96);border:1px solid #3a3020;color:var(--gold);
  font-size:12px;padding:6px 14px;border-radius:20px;opacity:1;
  pointer-events:none;max-width:88%;white-space:normal;text-align:center;
  margin:2px auto;letter-spacing:.5px;}
#toast.on{display:inline-block;}

#clueBook{display:none;align-self:flex-start;margin-top:2px;background:#14171c;border:1px solid #3a3020;color:var(--gold);
  font-size:11px;letter-spacing:1px;padding:4px 10px;border-radius:12px;cursor:pointer;position:relative;}
#clueBook.on{display:inline-flex;align-items:center;gap:6px;}
body:not([data-ingame="1"]) #clueBook{display:none!important;}
#clueBook:hover{border-color:var(--gold);color:#fff;}
#clueBook .cnt{background:var(--gold);color:#14171c;font-weight:700;font-size:10px;min-width:15px;height:15px;
  border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;}
#cluePanel{position:fixed;inset:0;background:rgba(5,6,8,.9);z-index:200;display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:20px;}
#cluePanel.on{display:flex;}
#cluePanel .box{width:min(420px,92vw);max-height:78vh;background:#101317;border:1px solid #3a3020;border-radius:14px;
  display:flex;flex-direction:column;overflow:hidden;}
#cluePanel .hd{padding:12px 16px;border-bottom:1px solid #262b33;display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:13px;letter-spacing:2px;}
#cluePanel .hd button{background:none;border:1px solid #2a2f38;color:#b9bcc2;border-radius:10px;padding:3px 12px;cursor:pointer;font-size:11px;}
#cluePanel .list{overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:10px;}
#cluePanel .it{border:1px solid #262b33;border-left:3px solid var(--gold);border-radius:8px;padding:8px 10px;background:#14171c;}
#cluePanel .it .t{color:var(--gold);font-size:12px;letter-spacing:1px;display:flex;justify-content:space-between;gap:8px;}
#cluePanel .it .t em{color:#6a7178;font-style:normal;font-size:10.5px;flex-shrink:0;}
#cluePanel .it .x{color:#c9ccd2;font-size:12px;line-height:1.75;margin-top:4px;white-space:pre-wrap;}
#cluePanel .empty{color:#6a7178;font-size:12px;text-align:center;padding:26px 0;letter-spacing:1px;line-height:2;}


#backlogBtn{display:none;align-self:flex-start;margin-top:6px;background:#14171c;border:1px solid #3a3020;color:#b9bcc2;
  border-radius:8px;padding:4px 10px;cursor:pointer;font-size:11.5px;letter-spacing:1px;font-family:inherit;}
#backlogBtn.on{display:inline-flex;align-items:center;gap:6px;}
body:not([data-ingame="1"]) #backlogBtn{display:none!important;}
#backlogBtn:hover{border-color:var(--gold);color:#fff;}



#backlogPanel, #creditsPanel{position:fixed;inset:0;background:rgba(5,6,8,.9);z-index:200;display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:20px;}
#backlogPanel.on, #creditsPanel.on{display:flex;}
#backlogPanel .box, #creditsPanel .box{width:min(460px,92vw);max-height:78vh;background:#101317;border:1px solid #3a3020;border-radius:14px;
  display:flex;flex-direction:column;overflow:hidden;}
#backlogPanel .hd, #creditsPanel .hd{padding:12px 16px;border-bottom:1px solid #262b33;display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:13px;letter-spacing:2px;}
#backlogPanel .hd button, #creditsPanel .hd button{background:none;border:1px solid #2a2f38;color:#b9bcc2;border-radius:10px;padding:3px 12px;cursor:pointer;font-size:11px;}
#backlogPanel .list, #creditsPanel .list{overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:10px;}
#backlogPanel .it, #creditsPanel .it{border:1px solid #262b33;border-left:3px solid #6a7178;border-radius:8px;padding:8px 10px;background:#14171c;}
#backlogPanel .it .d, #creditsPanel .it .d{color:#6a7178;font-size:10.5px;letter-spacing:1px;margin-bottom:3px;}
#backlogPanel .it .x, #creditsPanel .it .x{color:#c9ccd2;font-size:12.5px;line-height:1.75;white-space:pre-wrap;}
#galleryPanel{position:fixed;inset:0;background:rgba(5,6,8,.92);z-index:200;display:none;}
#galleryPanel.on{display:flex;}
#galleryPanel .box{width:min(460px,92vw);max-height:80vh;background:#101317;border:1px solid #3a3020;border-radius:14px;}
#galleryPanel .hd{padding:12px 16px;border-bottom:1px solid #262b33;display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:13px;letter-spacing:2px;}
#galleryPanel .hd button{background:none;border:1px solid #2a2f38;color:#b9bcc2;border-radius:10px;padding:3px 12px;cursor:pointer;font-size:11px;}
#galleryPanel .list{overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:10px;}
#galleryPanel .it{border:1px solid #262b33;border-left:3px solid #6a7178;border-radius:8px;padding:8px 10px;background:#14171c;}
#galleryPanel .it .d{color:#6a7178;font-size:10.5px;letter-spacing:1px;margin-bottom:3px;}
#galleryPanel .it .x{color:#c9ccd2;font-size:12.5px;line-height:1.75;white-space:pre-wrap;}
#galleryPanel .it img{max-width:100%;border-radius:8px;margin:8px 0;display:block;}
#backlogPanel .empty{color:#6a7178;font-size:12px;text-align:center;padding:26px 0;letter-spacing:1px;line-height:2;}


#saveCodeOv{position:fixed;inset:0;background:rgba(5,6,8,.92);z-index:210;display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:20px;}
#saveCodeOv.on{display:flex;}
#saveCodeOv .box{width:min(460px,92vw);background:#101317;border:1px solid #3a3020;border-radius:14px;
  display:flex;flex-direction:column;overflow:hidden;}
#saveCodeOv .hd{padding:12px 16px;border-bottom:1px solid #262b33;display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:13px;letter-spacing:2px;}
#saveCodeOv .hd button{background:none;border:1px solid #2a2f38;color:#b9bcc2;border-radius:10px;padding:3px 12px;cursor:pointer;font-size:11px;}
#saveCodeOv .scbody{padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
#saveCodeOv .sctip{color:#8b8f96;font-size:11.5px;line-height:1.7;}
#saveCodeOv textarea{width:100%;height:120px;box-sizing:border-box;background:#0b0e12;color:#c9ccd2;border:1px solid #262b33;
  border-radius:8px;padding:8px 10px;font-size:11px;line-height:1.5;resize:none;font-family:ui-monospace,monospace;word-break:break-all;}
#saveCodeOv .scbtns{display:flex;gap:8px;justify-content:flex-end;}
#saveCodeOv .scbtns button{background:#14171c;border:1px solid #3a3020;color:#e8c478;border-radius:8px;padding:6px 14px;cursor:pointer;font-size:12px;}




:root{
  
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:5px;
  
  --gold-line:rgba(201,162,78,.22);
  --edge:rgba(255,255,255,.058);
  --edge2:rgba(255,255,255,.105);
  --plate:#101319;
  --plate2:#171b22;
}


#intro .ttl{
  letter-spacing:6px !important;
  margin-left:6px !important;          
  font-weight:200 !important;
  animation:ttlIn2 2.6s cubic-bezier(.2,.7,.2,1) both !important;
}
@keyframes ttlIn2{
  0%{opacity:0;letter-spacing:14px;filter:blur(6px)}
  60%{opacity:1}100%{opacity:1;letter-spacing:6px;filter:blur(0)}
}
#sex h2,#naming h2,#diff h2{
  letter-spacing:2px !important;font-weight:600 !important;
}

#sex h2::after,#naming h2::after,#diff h2::after{
  background:linear-gradient(90deg,transparent,rgba(201,162,78,.32),transparent) !important;
}

#intro .start{letter-spacing:2px !important;font-weight:500 !important;}

#intro .resume{letter-spacing:1px !important;}


#sex .go,#naming .go{
  background:#7d2118 !important;        
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:var(--r-sm) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 18px rgba(0,0,0,.5) !important;
  letter-spacing:2px !important;font-weight:500 !important;
  transition:background .2s ease,box-shadow .2s ease !important;
}
#sex .go:hover,#naming .go:hover{
  background:#8d271c !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 22px rgba(0,0,0,.55) !important;
  
}
#sex .go:disabled,#naming .go:disabled{opacity:.38 !important;}


.sexopt,.dopt{
  border-radius:var(--r-md) !important;
  border:1px solid var(--edge) !important;
  background:var(--plate) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 4px 14px rgba(0,0,0,.4) !important;
  transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease !important;
}
.sexopt:hover,.dopt:hover{
  border-color:var(--edge2) !important;background:var(--plate2) !important;
  transform:translateY(-2px) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.5) !important;
}
.sexopt.sel,.dopt.sel{
  border-color:var(--gold-line) !important;background:#13161c !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.45) !important;
}
.sexopt.sel .nm{color:#e2c88f !important;font-weight:600 !important;}
.sexopt.sel{border-color:var(--gold-line) !important;}


.dopt{border-left:2px solid rgba(255,255,255,.09) !important;}
.dopt:hover{border-left-color:rgba(201,162,78,.40) !important;}
.dopt .t{color:#ddd6c6 !important;font-weight:600 !important;letter-spacing:1px !important;}
.dopt .d{color:#8b8f96 !important;}
.dopt .rate{
  border-radius:var(--r-xs) !important;border:1px solid var(--edge) !important;
  background:rgba(255,255,255,.022) !important;color:#7d848d !important;
}

.dopt::after{font-size:34px !important;opacity:.13 !important;}


#naming .nmField{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--edge) !important;
  background:var(--plate) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4) !important;
  transition:border-color .2s ease,box-shadow .2s ease !important;
}
#naming .nmField:focus-within{
  border-color:var(--gold-line) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4),0 0 0 2px rgba(201,162,78,.07) !important;
}
#naming .nmField input{background:transparent !important;border:none !important;}
#naming .skip,#diff .reset,#sex .back{
  letter-spacing:.5px !important;font-size:11.5px !important;
}


.opt{
  border-radius:var(--r-md) !important;
  border:1px solid var(--edge) !important;
  background:#0f1216 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease !important;
}
.opt:hover,.opt:active{
  background:#161a20 !important;border-color:rgba(201,162,78,.26) !important;
  transform:translateX(2px) !important;color:#fff !important;
}
.opt:active{transform:translateX(2px) scale(.995) !important;}
.opt .cost{color:#79808a !important;}
.opt.danger{border-color:rgba(200,69,47,.26) !important;}
.opt.skip{border-radius:var(--r-sm) !important;}


#hud .day{color:#dfe4ea !important;font-weight:600 !important;letter-spacing:.5px !important;}
#hud .res{
  border-radius:var(--r-sm) !important;
  background:rgba(14,17,21,.74) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
}
#hud .res em{color:#767d87 !important;}       
#hud .res b{color:#f0f3f7 !important;}

#hud .diffTag{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--edge) !important;
  background:rgba(14,17,21,.74) !important;
  color:#8b9199 !important;letter-spacing:.5px !important;
}

#clueBook{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--edge) !important;
  background:rgba(16,19,24,.88) !important;color:#c2c8d0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  letter-spacing:0 !important;font-size:11.5px !important;padding:6px 9px !important;
}
#clueBook:hover{border-color:rgba(201,162,78,.30) !important;color:#e6ebf1 !important;}
#clueBook .cnt{
  border-radius:var(--r-xs) !important;background:rgba(201,162,78,.85) !important;
  color:#0b0d11 !important;font-size:9.5px !important;min-width:14px !important;height:14px !important;
}


#quest{
  border-radius:var(--r-md) !important;
  border:1px solid var(--edge) !important;
  background:rgba(13,16,20,.93) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 24px rgba(0,0,0,.45) !important;
}


#tools button{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--edge) !important;
  background:rgba(14,17,21,.80) !important;
  color:#b6bcc4 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
  transition:color .18s ease,border-color .18s ease,background .18s ease !important;
}
#tools button:hover,#tools button:active{
  color:#eef1f4 !important;border-color:rgba(201,162,78,.28) !important;
  background:rgba(22,26,32,.9) !important;
}
#tools button:active{transform:scale(.94) !important;}


#sidePanel,#cluePanel{
  border-radius:var(--r-md) !important;
  border:1px solid var(--edge) !important;
  background:rgba(11,14,18,.97) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.7) !important;
}
.spRow{border-bottom:1px solid rgba(255,255,255,.04) !important;padding:5px 0 !important;}


#narrative{line-height:2.05 !important;}
#narrative b{font-weight:600 !important;color:#e9edf2 !important;}


:focus-visible{outline:2px solid rgba(201,162,78,.45) !important;outline-offset:2px !important;}


#art{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important;}


#audioGate .agBox,
#confirmBox .cbBox,
#cluePanel .box,
#review .rvbox,
#ach .achbox,
#codex .codexbox{
  border-radius:var(--r-md) !important;
  border:1px solid var(--edge2) !important;
  box-shadow:0 22px 64px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.035) !important;
}

#audioGate .agBox{background:rgba(9,11,14,.95) !important;}
#confirmBox .cbBox{background:rgba(13,16,20,.985) !important;}
#codex .codexbox{background:#0a0b0d !important;border-color:var(--gold-line) !important;}


#review .rvtag,#ach .achtag,#codex .codextag,#cluePanel .hd span{
  letter-spacing:3px !important;color:#c9b384 !important;
}
#review .rvsub,#ach .achstat{border-bottom-style:solid !important;border-bottom-color:rgba(255,255,255,.06) !important;}


#review #rvClose,
#ach #achClose,
#codex #codexClose,
#opt .close,
#shareOv button,
#confirmBox .cbBtn,
#cluePanel .hd button,
#panel .opt{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--edge2) !important;
  background:rgba(255,255,255,.022) !important;
  color:#c8cdd4 !important;
  letter-spacing:2px !important;
  font-weight:500 !important;
  transition:border-color .18s ease,color .18s ease,background .18s ease !important;
}
#review #rvClose:hover,#ach #achClose:hover,#codex #codexClose:hover,
#opt .close:hover,#shareOv button:hover,#cluePanel .hd button:hover,#panel .opt:hover{
  border-color:var(--gold-line) !important;color:#eaeef3 !important;background:rgba(255,255,255,.04) !important;
}

#confirmBox .cbBtn.yes{
  background:rgba(125,33,24,.55) !important;border-color:rgba(200,69,47,.30) !important;color:#e8c9c6 !important;
}
#confirmBox .cbBtn.yes:hover{background:rgba(141,39,28,.66) !important;border-color:rgba(200,69,47,.48) !important;}


#cg .cgsave{
  background:rgba(13,16,20,.82) !important;
  border:1px solid var(--edge2) !important;
  border-radius:var(--r-sm) !important;
  color:#c8cdd4 !important;
  box-shadow:0 4px 18px rgba(0,0,0,.5) !important;
  transition:border-color .2s ease,color .2s ease !important;
}
#cg .cgsave:hover{border-color:var(--gold-line) !important;color:#eaeef3 !important;}
#cg .cgbtns button{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--edge2) !important;
  background:rgba(12,15,19,.72) !important;
  color:#b8bec6 !important;
  letter-spacing:2px !important;
  transition:border-color .2s ease,color .2s ease,background .2s ease !important;
}
#cg .cgbtns button:hover{
  border-color:var(--gold-line) !important;color:#eef1f5 !important;background:rgba(22,26,32,.85) !important;
}

#shareOv img{border-radius:var(--r-xs) !important;box-shadow:0 18px 70px rgba(0,0,0,.9) !important;}


#opt .optRow .sw{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--edge2) !important;
  background:rgba(255,255,255,.03) !important;
  transition:background .2s ease,border-color .2s ease !important;
}
#opt .optRow .sw::after{
  box-shadow:0 1px 3px rgba(0,0,0,.6) !important;
}
#opt .optRow .sw.on{
  background:rgba(201,162,78,.12) !important;
  border-color:var(--gold-line) !important;
}
#opt .optRow .sw.on::after{
  background:#d8c495 !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.6) !important;  
}
#opt .optRow .lb b{color:#ddd6c6 !important;letter-spacing:1px !important;}
#opt .optRow .lb i{color:#757a81 !important;}
#opt .close{letter-spacing:3px !important;}


#codex .cxicon{border-radius:var(--r-sm) !important;box-shadow:none !important;}
#codex .cxrow.on .cxicon{box-shadow:none !important;}
#codex .cxchip{border-radius:var(--r-xs) !important;letter-spacing:.5px !important;}
#cluePanel .it{border-radius:var(--r-sm) !important;border-left-color:var(--gold-line) !important;}
#cluePanel .it .t{color:#c9b384 !important;letter-spacing:.5px !important;}


#stagebar,#toast{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--edge) !important;
  border-left:2px solid var(--gold-line) !important;
  background:rgba(11,14,18,.94) !important;
  color:#c9b384 !important;
  box-shadow:0 6px 20px rgba(0,0,0,.45) !important;
}
#toast{background:rgba(13,16,20,.96) !important;}


#sex .fig{
  background:
    radial-gradient(70% 52% at 50% 34%, rgba(88,74,54,.24) 0%, transparent 72%),
    linear-gradient(180deg,#191510 0%,#141009 58%,#0f0c08 100%) !important;
}
#sex .fig img{
  filter:brightness(.95) contrast(1.04);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 88%,transparent 100%);
}
#sex .fig::after{
  background:
    radial-gradient(88% 70% at 50% 46%, transparent 42%, rgba(9,7,5,.62) 100%),
    linear-gradient(180deg,transparent 54%,rgba(15,12,8,.88) 100%) !important;
}
.sexopt .nm{letter-spacing:2px !important;font-weight:600 !important;}
.sexopt.sel .nm{color:#d9c18c !important;}


#sex .go,#naming .go{
  background:#5e1f18 !important;               
  border:1px solid rgba(255,255,255,.13) !important;
}
#sex .go:hover,#naming .go:hover{
  background:#6d251c !important;
  border-color:rgba(201,162,78,.42) !important;
}

#sex .go,#naming .go{color:#e8ded2 !important;font-weight:500 !important;}
#sex .go:hover,#naming .go:hover{color:#f4ece2 !important;}


#sex .go,#naming .go{
  width:100% !important;
  max-width:420px !important;
  margin-left:auto !important;margin-right:auto !important;
  display:block !important;
}
@media(min-width:1024px){
  
  #sex .bg,#naming .bg,#diff .bg{
    background-size:auto 118%;
    background-position:50% 30%;
    filter:brightness(.28) saturate(.62) contrast(1.04);
  }
  
  #sex,#naming,#diff{padding-left:40px;padding-right:40px;}
  #sex>*,#naming>*,#diff>*{max-width:640px;margin-left:auto;margin-right:auto;}
  
  #sex .row{gap:24px !important;}
}


#tools{gap:6px !important;}
#tools button{
  width:30px !important;height:30px !important;
  position:relative !important;
}
#tools button::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:44px !important;height:44px !important;   
  border-radius:var(--r-sm) !important;
  z-index:-1 !important;                            
}

#clueBook{position:relative !important;}
#clueBook::after{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  min-width:44px;min-height:44px;z-index:-1;
}
#hud .diffTag{position:relative !important;display:inline-flex;align-items:center;justify-content:center;
  min-height:22px !important;}
#quest .qhead{min-height:26px !important;}
#stagebar,#toast{padding-left:14px !important;padding-right:14px !important;}




#sex,#naming,#diff{
  background:
    radial-gradient(ellipse at 50% 34%, rgba(14,18,26,.86) 0%, rgba(6,8,12,.93) 52%, rgba(2,3,5,.985) 100%)
    !important;
}
#sex .bg,#naming .bg,#diff .bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:50% 42%;background-repeat:no-repeat;
  opacity:0;transition:opacity 2.4s ease;
  filter:brightness(.30) saturate(.62) contrast(1.05);
}
#sex .bg.on,#naming .bg.on,#diff .bg.on{opacity:1;animation:kenburns 84s ease-in-out infinite alternate;}

#sex>*:not(.bg),#naming>*:not(.bg),#diff>*:not(.bg){position:relative;z-index:2;}

#sex::after,#naming::after,#diff::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,3,5,.55) 0%,rgba(2,3,5,.30) 42%,rgba(2,3,5,.72) 100%);
}


/* ===== v19.1.0：线索册双标签 / 日记分页 / 屏息 QTE ===== */
#cluePanel .ctabs{display:flex;gap:6px;padding:8px 14px 0;}
#cluePanel .ct{flex:1;background:#14171c;border:1px solid #262b33;color:#9aa1a8;border-radius:8px;padding:6px 0;font-size:12px;letter-spacing:2px;cursor:pointer;}
#cluePanel .ct.on{border-color:rgba(201,162,78,.55);color:#c9b384;}
#cluePanel .dnav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 8px;}
#cluePanel .dnav span{color:#9aa1a8;font-size:11.5px;letter-spacing:1px;}
#cluePanel .dnav button{width:34px;height:26px;background:#14171c;border:1px solid #3a3020;color:#c9b384;border-radius:8px;cursor:pointer;font-size:14px;}
#cluePanel .dnav button:disabled{opacity:.35;cursor:default;}
#breathOv{position:fixed;inset:0;z-index:260;display:none;background:rgba(3,4,6,.94);align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none;}
#breathOv.on{display:flex;}
#breathOv .bWrap{width:min(86vw,460px);text-align:center;}
#breathOv .bTitle{color:#c9b384;font-size:15px;letter-spacing:8px;margin-bottom:18px;}
#breathOv .bTrack{position:relative;height:12px;border-radius:6px;background:#14171c;border:1px solid #3a3020;}
#breathOv .bBand{position:absolute;left:50%;top:-5px;bottom:-5px;transform:translateX(-50%);width:3px;border-radius:3px;background:#5a4a22;transition:background .1s,width .1s;}
#breathOv .bBand.in{width:9px;background:#e0c060;box-shadow:0 0 14px rgba(224,192,96,.8);}
#breathOv .bMark{position:absolute;top:-9px;bottom:-9px;width:4px;margin-left:-2px;border-radius:2px;background:#c25a3a;box-shadow:0 0 10px rgba(220,90,60,.7);}
#breathOv .bState{margin-top:16px;color:#c9ccd2;font-size:12.5px;letter-spacing:2px;min-height:18px;}
#breathOv .bTip{margin-top:10px;color:#6a7178;font-size:11px;line-height:1.8;}
#breathOv.hold{background:rgba(20,4,4,.94);}
#breathOv.hold .bState{color:#e08a6a;}

/* ===== v19.2.0 白天剧情：人物狗放大 + 文字底层图案遮挡（仅此场景） =====
   v19.2.10 调整：去掉狗的 scale(1.25)。
   实测在"选项多 / 屏幕矮"时场景会被压扁，人（按 65% 缩放）缩得比狗（固定像素）还小，
   再叠上这 1.25 倍，就成了玩家看到的那句"狗还比人大"。
   这里只保留人物的放大，狗保持基准尺寸 —— 这样无论什么状态，人始终明显大于狗。 */
body.dayStory #basePerson{height:min(216px,82%);}
body.dayStory #textzone{background:linear-gradient(180deg, rgba(7,8,10,.97) 0%, rgba(7,8,10,.92) 34%, #0a0c10 60%);}
body.dayStory #textzone::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(201,162,78,.16) 1px, transparent 1.6px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35) 70%,transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35) 70%,transparent);}
body.dayStory #textInner{position:relative;z-index:1;}
body.dayStory #narrative{position:relative;z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.9);}

/* ===== v19.2.2 选项可见性增强（iOS 实测偏暗、不显眼） ===== */
/* 注：v18.2x「去页游感」皮肤用 !important 把 .opt 压成了 near-black 卡片
   （background:#0f1216 / border:--edge=5.8% 白）——这正是"选项 UI 不明显"的根因。
   这里以同样的 !important + 更晚的声明顺序覆盖回高对比度。 */
#choices .opt,.opt{
  background:linear-gradient(180deg,#1d242e 0%,#161c24 100%) !important;
  border:1px solid #46525f !important;
  box-shadow:0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07) !important;
  color:#eef1f5 !important;position:relative;
}
#choices .opt:hover,.opt:hover,#choices .opt:active,.opt:active{
  background:linear-gradient(180deg,#2a3440 0%,#202832 100%) !important;
  border-color:rgba(224,168,80,.75) !important;color:#fff !important;
  box-shadow:0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(224,168,80,.2) !important;
}
.opt::before{content:'';position:absolute;left:1px;top:9px;bottom:9px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),rgba(224,168,80,.22));opacity:.9;pointer-events:none;}
#choices .opt .cost,.opt .cost{color:#a2abb6 !important;}
#choices .opt:disabled,.opt:disabled{background:linear-gradient(180deg,#12161d 0%,#0f131a 100%) !important;
  border-color:#2b323b !important;opacity:.55 !important;}
.opt:disabled::before{background:#2b323b !important;opacity:.5;}
#choices .opt.danger,.opt.danger{border-color:rgba(200,69,47,.55) !important;}
.opt.danger::before{background:linear-gradient(180deg,#c8452f,rgba(200,69,47,.22));}
#choices .opt{animation:optIn .24s ease both;}
@keyframes optIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
#choices .opt:nth-child(1){animation-delay:.02s}
#choices .opt:nth-child(2){animation-delay:.05s}
#choices .opt:nth-child(3){animation-delay:.08s}
#choices .opt:nth-child(4){animation-delay:.11s}
#choices .opt:nth-child(5){animation-delay:.14s}
#choices .opt:nth-child(6){animation-delay:.17s}
@media (max-width:420px){
  .opt{padding:12px 14px !important;font-size:calc(14.5px * var(--fs)) !important;min-height:48px !important;}
  .opt .cost{font-size:11px !important;}
}
@media (prefers-reduced-motion:reduce){#choices .opt{animation:none;}}

/* ===== v19.2.2 敲门图例/重听 自绘 SVG 图标 ===== */
.ksIc{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-right:4px;flex-shrink:0;vertical-align:-2px;}
.ksIc svg,.ksIco{width:100%;height:100%;display:block;}
.ksLegend .lk{display:inline-flex;align-items:center;color:#8d949c;}
.ksLegend .lk b.ksIc{color:var(--gold);font-weight:400;}
.ksReplay{display:inline-flex;align-items:center;gap:5px;}
.ksIcBtn{width:15px;height:15px;margin-right:0;color:currentColor;}
.ksMark{color:var(--gold);}
.ksMark .ksIco{width:15px;height:15px;display:block;}

/* ===== v19.2.3 消除整屏重排（CLS 4.6 → 目标 <0.5）=====
   病灶：白天界面里 #textzone 在「折叠 58px ↔ 展开最大 340px」之间巨幅变化，
   而 #choices 又随条目数 0→8 生长，两者一进一出把 #stage(flex:1) 反复挤压，
   于是每次点选项/切屏，场景、文字区、进度条、字幕条整体跳动一次 —— 这就是
   录屏里看到的那种"卡顿"。修法：把下半区做成【恒定高度预算】，内部各自滚动，
   任何面板出现/消失都不再改变其它块的高度。 */
:root{ --tz-h:min(15vh,124px); --ch-h:min(27vh,236px); }
@media (max-height:700px){ :root{ --tz-h:min(14vh,108px); --ch-h:min(25vh,196px); } }
/* 文字贴底：少量文字时留白落在场景一侧，而不是夹在文字与选项之间 */
#textzone{ display:flex !important; flex-direction:column !important; justify-content:flex-end !important; }
#textInner{ min-height:auto !important; justify-content:flex-end !important; }

/* 文字区：折叠/展开同高（只改可见溢出，不改容器高度） */
#textzone,#textzone.folded{
  flex:0 0 auto !important;
  height:var(--tz-h) !important;
  min-height:var(--tz-h) !important;
  max-height:var(--tz-h) !important;
  overflow-y:auto !important;
}
#textzone.folded{ overflow-y:auto !important; }

/* 选项区：[v19.2.3 旧规则，已被 v19.2.7 根治方案取代]
   旧方案给 #choices 定死 --ch-h 高度换取"零位移"，副作用是选项被压进小滚动盒。
   v19.2.7 改为"选项按内容撑开、舞台让位"，此处只保留兜底滚动，高度交给内容。 */
#choices{
  overflow-y:auto !important;
}

/* 进度条 / 提示条 浮层化：出现时不再推挤其它块 */
#stagebar,#toast{
  position:absolute !important;
  left:50% !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
  z-index:40 !important;
}
#stagebar{ top:calc(6px + env(safe-area-inset-top,0px)) !important; }
#toast{ top:calc(6px + env(safe-area-inset-top,0px)) !important; }

/* 打字机光标：脱离文档流，避免逐字移动被计入布局位移 */
#cursor{position:absolute !important;margin-left:0;}
#narrative{position:relative;}

/* ===== v19.2.3 性能：移除大立绘上的 drop-shadow 滤镜 =====
   人物/狗是带 1.4s 过渡的绝对定位大元素；drop-shadow 属于逐帧重栅格化的
   滤镜，在移动端上会持续吃 GPU（一转场/缩放就掉帧）。这里换成零成本的
   "接地阴影"椭圆（纯径向渐变，只画一次），既保住统一图层的观感，也去掉开销。 */
#basePerson,#baseDog{filter:none !important;}
#baseDog .dog{filter:none !important;}
.dog .dogSvg{filter:none !important;}
#base[data-sex="f"] #basePerson{filter:brightness(1.04) !important;}
.dog[data-mood="hurt"] .dogSvg,.dog[data-mood="hurt"] img.dogImg{filter:brightness(.8) saturate(.75) !important;}
.dog[data-mood="away"] .dogSvg,.dog[data-mood="away"] img.dogImg{filter:brightness(.55) saturate(.5) !important;}
#basePerson::after,#baseDog .dog::after{
  content:'';position:absolute;left:50%;bottom:-4px;width:80%;height:11px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.26) 56%, rgba(0,0,0,0) 78%);
}
/* 减少整页合成压力：场景层独立合成、避免整页重绘 */
#stage{contain:paint;}

/* ===== v19.2.5 场景背景墙：让人/狗/门"站在墙前" =====
   病灶：背景原本是近黑径向渐变，人物与狗（都是抠图素材）在纯黑上会显得"悬空/突兀"，
   狗那边的方块虽然抠掉了，但依然没有"落脚的地方"。
   修法：给整个舞台配一面【混凝土旧墙 + 地面】，色调对齐狗素材的墙底色 rgb(39,39,41)，
   这样抠净的立绘边缘能无缝融进墙里，人物也终于站在了地面上。 */
#baseBg{
  background:
    /* 四角暗部：旧版是 .40/.76，把整面墙压成了"纯黑"。这里减到 .22/.56，墙就看得见了。 */
    radial-gradient(128% 98% at 50% 32%, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 58%, rgba(0,0,0,.56) 100%),
    /* 潮渍 / 霉斑（老墙的年头感） */
    radial-gradient(38% 30% at 20% 24%, rgba(108,92,62,.26) 0%, rgba(108,92,62,0) 72%),
    radial-gradient(30% 24% at 80% 30%, rgba(88,80,60,.22) 0%, rgba(88,80,60,0) 74%),
    radial-gradient(48% 32% at 52% 50%, rgba(76,74,70,.16) 0%, rgba(76,74,70,0) 76%),
    /* 砖缝（横向 42px 一道） */
    repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 1px, rgba(0,0,0,0) 1px 42px),
    /* 砖缝（纵向错缝 84px 一道） */
    repeating-linear-gradient(90deg, rgba(0,0,0,.11) 0 1px, rgba(0,0,0,0) 1px 84px),
    /* 墙面本体：整体比旧版提亮一档（旧版最深 #15171b 会被暗角吃光，看着就是纯黑） */
    linear-gradient(180deg,#343941 0%,#2b3037 30%,#24282e 62%,#1e2126 100%) !important;
}
/* 墙面细颗粒：SVG 噪声，零额外请求 */
#baseBg::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* 地面：底部 30% 以下铺地板，并在墙脚留一道踢脚线，人物终于有立足点 */
#baseBg::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 16%, rgba(0,0,0,.44) 55%, rgba(0,0,0,.66) 100%),
    linear-gradient(90deg, rgba(104,92,74,.05), rgba(138,122,96,.10) 50%, rgba(104,92,74,.05));
  box-shadow:inset 0 8px 20px rgba(0,0,0,.5);
}
/* 墙脚踢脚线（与地面分界处的一道暖色描边） */
#base .ground{
  height:1px;
  background:linear-gradient(90deg,rgba(190,168,120,.03),rgba(190,168,120,.16) 24%,rgba(190,168,120,.16) 76%,rgba(190,168,120,.03));
  box-shadow:0 -6px 14px rgba(0,0,0,.45);
}

/* ===== v19.2.6 修复"选项被压成两三条、其余点不到"（P0）=====
   上一版把 #choices 定成固定高度 + flex:0 0 auto（不可压缩），
   结果是选项列表被压进一个只有 ~190px 的小滚动盒里：手机 8 条只能看到 3 条、
   桌面 6 条有 4 条在视口外 —— 玩家不会去滚动就被判定为"卡住点不了"。
   现在：选项区恢复"按内容撑开"，空间不够时再收缩并内部滚动；
   文字区保持定高（它才是"整屏跳动"的最大来源，占位移的 282px）；
   舞台允许收缩但设下限，承担差额。这样既看得见全部选项，又不再整屏乱跳。 */
/* [v19.2.6 遗留规则 —— 已作废，仅保留说明]
   这里原本写的是：
     #choices{ flex:0 1 auto !important; height:auto !important;
               max-height:none !important; min-height:0 !important; overflow-y:auto !important; }
   它是"选项被压成 18px"那一版留下的。其中 `max-height:none !important` 是个隐藏地雷：
   !important 的优先级高于内联样式，因此它会【覆盖掉】_choices() 里按实际可用高度
   算出来的 c.style.maxHeight —— 等于把"选项太多时改为面板内滚动"这道保险彻底关掉，
   结果是后期 8 条选项撑破视口、最后几条掉到屏幕外点不到。
   （这就是"多个版本叠加改同一处 CSS 互相打架"的典型后果。）
   现在：#choices 的布局完全由下方 v19.2.7 / v19.2.8 段落统一声明，此处不再重复。 */
#choices{ gap:6px !important; }
#choices .opt + .opt{ margin-top:0 !important; }

/* 矮屏（≤700px 高）：进一步让位，保证选项一屏全部可达 —— 可达性优先于"零位移" */
@media (max-height:700px){
  #stage{ min-height:18px !important; }
  #textzone.folded{ height:0 !important; min-height:0 !important; max-height:0 !important; padding:0 !important; border-top:0 !important; }
  .opt{ padding:7px 11px !important; min-height:40px !important; }
  .opt .cost{ font-size:9.5px !important; }
  #choices{ gap:5px !important; }
}

/* ===================================================================
   ===== v19.2.7 P0 根治：选项点不到 / 要点好多次 / 点多了卡死闪烁 =====
   ===================================================================

   【实测根因】
   在 1280x720 桌面下量到的真实布局：
     #hud       140px   ← 桌面媒体查询里 #hud .left{padding-top:44px} 凭空多占 44px
     #stage     462px   ← flex:1 1 auto，会无上限地吃光所有富余空间
     #textzone   72px
     #choices    18px   ← flex:0 1 auto，在"剩余空间为 0"时被压成 min-content
   三块已经把 720px 吃满，#choices 于是只剩 18px —— 选项按钮被压成一条细线，
   命中区域近乎为零，玩家必须反复点、点偏了就"没反应"。这不是"要点很多下"，
   是选项根本没有可点的面积。

   【为什么前面的补丁没用】
   v19.2.6 只把 #choices 从 flex:0 0 auto 改成 flex:0 1 auto，但没动
   #stage 的 flex:1 1 auto。只要 stage 还是"可无限增长"，它就永远会先抢走
   空间，choices 永远排在后面被压缩。这是布局优先级的结构性问题，
   压 padding / 缩字号这类局部调整不可能修好。

   【根治策略】
   1) 把 #stage 从"抢空间"改成"让空间"：flex:0 1 auto + 明确的 min/max 上限，
      使它只能用到「剩余空间」，永远不再跟 #choices 争。
   2) #choices 设为 flex:0 0 auto（不打折、不压缩），高度由内容决定；
      真正的溢出交给它自己的 overflow-y 滚动，而不是把它挤扁。
   3) 去掉 #hud 桌面下那 44px 的无用 padding（#tools 是绝对定位，
      并不需要预留），直接还给选项区 44px。
   4) 干掉 optIn 重播动画：每次 _choices() 重建 DOM 都会让 6 条选项
      按 0.02~0.32s 的延迟重新淡入位移一遍，配合 900ms 兜底重渲染，
      肉眼就是"点多了屏幕闪烁/卡死"。改为仅在面板代次变化时播一次。
   5) 面板内容不变时不重建 DOM（见 index.html 的 _choicesSig 签名比对），
      从根上消掉重渲染 —— 这是"闪烁"和"点击被吞"的共同源头。
*/

/* --- 1) 桌面 #hud 的 44px 浪费：还给选项区 ---
   原方案#hud .left{padding-top:44px} 是为了给绝对定位的 #tools（线索册/回看）
   让位，因为 #tools 当时是 left:50% 居中悬浮，正好压住"第 N 天"。
   正确解法不是把整个 hud 撑高 44px，而是把 #tools 挪到右侧空白处，
   让两者不再争夺同一条水平线 —— hud 回落到正常高度（~50px），
   一次性把 44px 还给选项区。 */
@media (min-width:900px){
  #hud .left{ padding-top:0 !important; }
  #hud{ margin-bottom:6px !important; min-height:0 !important;
        padding-right:74px !important; box-sizing:border-box !important; }
  #tools{
    left:auto !important;
    right:calc(50% - min(230px, 36vw)) !important;
    transform:none !important;
    top:calc(10px + env(safe-area-inset-top,0px)) !important;
  }
}

/* --- 2) 舞台让位：它只能吃"剩下的"，不再抢 ---
   v19.2.8 修正：min-height 从 96px 降到 24px。
   实测：白天菜单在后期会同时出现 8 条选项（陪狗 / 搭窝 / 取铜铃 / 安神药 …），
   8×56px≈500px；若舞台仍占 96px，总高就超过视口，最后 2~3 条会掉到屏幕外点不到
   （玩家反馈的"别的选项也有这个问题"）。现在选项优先，场景可退到细条。 */
#stage{
  flex:0 1 auto !important;
  min-height:24px !important;
  max-height:none !important;
}
@media (max-height:640px){ #stage{ min-height:16px !important; } }

/* --- 3) 选项区：内容优先，永不压缩；超高时内部滚动而不是溢出 ---
   v19.2.8 修正：去掉 max-height:none !important。
   它会把 JS 在 _choices() 里按实际可用高度算出来的 maxHeight 覆盖掉
   （CSS !important 优先级高于内联样式），于是选项区撑破视口、后面的选项点不到。
   现在交回 JS 控制：放得下就全显示，放不下就在面板内滚动（并有滚动提示）。 */
#choices{
  flex:0 0 auto !important;        /* 不打折：有多少内容就占多少 */
  height:auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* --- 4) 文字区：定高，但更矮；它是位移最大来源，继续保持恒定 --- */
:root{ --tz-h:min(9vh,68px); }
@media (max-height:700px){ :root{ --tz-h:min(8vh,58px); } }

/* --- 5) 选项行：给足命中面积（>=44px 是可用性下限） --- */
.opt{ padding:9px 13px !important; min-height:46px !important; line-height:1.42 !important; }
.opt .cost{ font-size:10px !important; line-height:1.3 !important; }
#choices{ gap:6px !important; }
#choices .opt + .opt{ margin-top:0 !important; }

/* --- 6) 干掉重播动画：只在整块面板"换代"时播一次 --- */
#choices .opt{ animation:none !important; }
#choices.anim .opt{ animation:optIn .17s ease both !important; }
#choices.anim .opt:nth-child(1){animation-delay:0s}
#choices.anim .opt:nth-child(2){animation-delay:.015s}
#choices.anim .opt:nth-child(3){animation-delay:.03s}
#choices.anim .opt:nth-child(4){animation-delay:.045s}
#choices.anim .opt:nth-child(5){animation-delay:.06s}
#choices.anim .opt:nth-child(6){animation-delay:.075s}
#choices.anim .opt:nth-child(n+7){animation-delay:.09s}

/* --- 7) 滚动条常驻占位：避免"出现/消失"引起宽度抖动（也是闪烁源） --- */
#choices{ scrollbar-gutter:stable; }
#choices::-webkit-scrollbar{ width:6px; }
#choices::-webkit-scrollbar-thumb{ background:rgba(140,150,164,.28); border-radius:3px; }
#choices::-webkit-scrollbar-track{ background:transparent; }

/* --- 8) 极矮屏兜底：选项优先，舞台与文字区让到极限 --- */
@media (max-height:560px){
  #stage{ min-height:48px !important; }
  #textzone.folded{ height:0 !important; min-height:0 !important; max-height:0 !important; padding:0 !important; border-top:0 !important; }
  #hud{ padding-top:6px !important; padding-bottom:4px !important; }
  .opt{ padding:7px 11px !important; min-height:42px !important; }
  #choices{ gap:5px !important; }
}

/* ===== v19.2.7 续：手机端目标面板不再挤压选项区 =====
   实测 390x844 手机端：#hud 里 .left 内的 #quest（目标面板）高 154px，
   把 #hud 整体撑到 242px —— 选项区因此被迫滚到屏外（第 8 条点不到）。
   目标面板是"随时可查"的背景信息，不该在玩家做选择时长期占位：
   直接用已有的 body.has-opts（由 _choices 维护）在"有选项"时把它折叠，
   省下 154px 全部让给选项，选项消失时自动恢复。 */
body.has-opts #quest{
  max-height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  margin:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  transition:max-height .22s ease, opacity .18s ease;
}
/* 同时收紧手机端 hud 的上下内边距，再省几个像素 */
@media (max-width:1023px){
  body.has-opts #hud{ padding-top:8px !important; padding-bottom:6px !important; }
}

/* ===== v19.2.8 P0：让"轻触继续"提示条真的可点 =====
   病灶：提示条 #contHint 是 position:fixed 贴在视口最底部（bottom:6px），
   而唯一的推进热区 #textzone 在它【上方】——两者不重叠；
   且提示条本身 pointer-events:none。玩家照着提示点，恰好点在"可点区域之外"，
   于是流程永久停住（UI._armed 永远为真）。这里补上可点性。
   注意：只在 .on（真正显示）时才吃指针，隐藏时保持 none，避免挡住附近选项。 */
#contHint.on{ pointer-events:auto; cursor:pointer; }

/* ===== v19.2.8：选项多到放不下时的滚动提示 =====
   后期白天菜单会同时出现 8 条选项（陪狗/搭窝/取铜铃/安神药…）。
   放得下就全显示；放不下则由 JS 给 #choices 设 maxHeight 并在面板内部滚动。
   这里补一个"还能往下滚"的视觉提示，避免玩家以为只有这几条、
   也避免出现"最后一条被底部裁切却看不出来"的错觉。 */
#choices.scrollable{
  /* 底部渐隐：暗示下方还有内容 */
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 18px),rgba(0,0,0,.25) 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 18px),rgba(0,0,0,.25) 100%);
}
#choices.scrollable::-webkit-scrollbar{ width:6px; }
#choices.scrollable::-webkit-scrollbar-thumb{ background:rgba(190,168,120,.35); border-radius:3px; }

/* ===== v19.2.8：章节过场卡不吃点击 =====
   实测：第一章完结过场卡 #ch1Card 显示期间（1.5s）会盖住整个选项面板，
   且它是可命中元素 —— 玩家在这 1.5s 内点击会被它吞掉（"点了没反应"）。
   过场卡纯展示，不应拦截指针。 */
#ch1Card,#ch2Card{ pointer-events:none !important; }

/* ===== v19.2.8【重要决策记录】为什么最终【没有】把 #echo / #knockSfx / #clue 改成浮层 =====
   中途我曾把这三者改成 position:absolute（锚点＝视口底部往上），想借此消除它们
   对 #choices 的纵向推挤。实测证明这样更糟：#choices 本身就占据下半屏，
   "从底部往上锚"的浮层会正好压在选项面板上 —— 回归日志里直接抓到
     `挡住者='knockSfx'` / `挡住者='clue'`
   等于把"推挤"换成了"遮挡"，问题没有解决，反而更隐蔽。
   最终方案：让它们【留在文档流内】（推挤是可见、可预期的普通布局行为），
   而由 _choices() 里的 fit() 对选项面板做【事后校正】：
   fit() 会在渲染后 rAF / 60 / 320 / 900 / 1600ms 多次复核实际可用高度，
   任何"稍后才出现的推挤源"（#echo 代价回显、#knockSfx 敲门节奏条、#clue 线索提示）
   都会被计入；面板随即收缩为"内部可滚动"（并显示滚动提示），
   于是既不溢出视口、也不被任何东西遮挡。
   唯一必须单独处理的"真遮挡"是 #ch1Card/#ch2Card（见上）。 */

/* ============================================================
   ===== v19.2.9 布局重排：图片为主体 · 文字悬浮其上 · 选项只占 3 条 =====
   ============================================================
   总负责人反馈：
     ①「一开始就感觉很空，开头的故事讲述还是图片占主体吧，文字悬浮在图片上面」
     ②「底下选项栏只要暂时显示三个，其他的可以滑动」
     ③ 图片要占大部分
   病灶：旧版把下半屏切成【定高文字区 + 选项区】两块硬排布，
        文字占 65px、选项最多撑到 500+px，把场景（图片）挤成细条；
        而开场的叙事段落又只显示一小块文字 → 上下都空，观感"很空"。
   修法：文字区脱离文档流、改成【悬浮在图片下部的浮层】；
        选项区【最多显示 3 条】，其余在面板内滚动；剩下的纵向空间全部给场景。 */

/* 场景：主体 + 【高度下限】。
   下限是本次最关键的一道保险：旧版选项在手机上会按内容撑到 500+px，
   把场景压到 149px —— 那时人只有 65~97px，而狗是固定 52~86px，
   于是"主角比狗还小""门只剩一半"。给场景兜住下限，这类塌缩就不可能再发生。 */
#stage{
  flex:1 1 auto !important;
  min-height:min(240px, 34vh) !important;
}
@media (max-height:640px){ #stage{ min-height:min(200px, 32vh) !important; } }

/* 文字区：回到【文档流】（经典纵向布局：图 → 文字 → 选项）。
   v19.2.9 曾把它做成"悬浮在图片上的浮层"，结果开场时只剩一小条字压在大图上、
   下方一整片空白 —— 观感"很空"。回到流内后，三块各占其位，画面就"实"了。
   仍然保持【定高】：它是整屏跳动（CLS）的主要来源，不能随文字长短变化。 */
:root{ --tz-h:min(19vh, 148px); }
@media (max-height:700px){ :root{ --tz-h:min(18vh, 132px); } }
@media (max-height:640px){ :root{ --tz-h:min(17vh, 116px); } }

#textzone{
  position:relative !important;
  left:auto !important; right:auto !important;
  top:auto !important; bottom:auto !important;
  z-index:1 !important;
  flex:0 0 auto !important;
  /* 高度自适应（不再是"永远 148px"）：只有一行字时不再留一大片空白
     —— 总负责人说的"空空的"有一部分就来自这里。
     仍保留上/下限，把"整屏跳动"控制在很窄的区间内。 */
  height:auto !important;
  min-height:min(13vh, 96px) !important;
  max-height:var(--tz-h) !important;
  margin:0 auto !important;      /* 桌面端与舞台同宽居中（不能用 margin:0，会贴左） */
  padding:10px 16px !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  display:block !important;
  border-top:1px solid rgba(255,255,255,.05) !important;
  background:linear-gradient(180deg, rgba(9,11,14,.96) 0%, #090b0e 100%) !important;
}
#textzone.folded{
  height:auto !important;
  min-height:min(13vh, 96px) !important;
  max-height:var(--tz-h) !important;
  padding:10px 16px !important;
  overflow-y:auto !important;
}
/* 流内布局下不再需要"折叠/展开"那套浮层提示 */
#textzone.folded::before,#textzone.folded::after{ content:none !important; }
#textzone.expanded{
  height:auto !important;
  max-height:min(40vh, 300px) !important;
}
/* 手机 / 平板：文字区铺满整宽。
   （桌面端由 min-width:1024px 的规则给 min(520px,76vw) + auto margin 居中；
     这里必须显式给 100%，否则 auto margin 会阻止 flex 的 stretch，
     宽度会塌成"刚好包住文字"的一条。） */
@media (max-width:1023px){ #textzone{ width:100% !important; } }

/* 选项区：一屏【最多 4 条】，其余在面板内部滑动。
   4 条是可用性下限（每条 ≥46px 命中面积）与"给场景留足空间"的平衡点。
   --opt-row / --opt-gap 由 JS 用实测行高写入（见 _choices 的 fit），保证算得准。 */
:root{ --opt-row:57px; --opt-gap:7px; }
#choices{
  flex:0 0 auto !important;
  height:auto !important;
  min-height:0 !important;
  /* 注意：这条【不能】加 !important —— JS 会在"视口不够高"时用内联样式再收一刀，
     而 !important 的优先级高于内联，会把这道保险关掉（v19.2.6 就栽在这个坑里）。 */
  max-height:min(calc(4 * var(--opt-row) + 3 * var(--opt-gap)), 40vh);
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

/* ===== v19.2.9：状态条 / 浮动提示不再压在顶栏上 =====
   旧版 #stagebar / #toast 固定 top:6px，与 #hud 的资源行（食物/水/伤药…）重叠，
   "门外，传来第一声闷响" 和一排图标挤成一团，看着像界面坏了。
   现在用 JS 实测的顶栏高度 --hud-h 来定位（兜底 64px）。 */
#stagebar,#toast{ top:calc(var(--hud-h, 64px) + 6px) !important; }

/* ==================================================================
   ===== v19.2.10 美术调整：背景墙亮起来 · 门有门框 · 序章不再"空" =====
   ==================================================================
   总负责人反馈：
     ①「人物背景墙不要纯黑的，要符合关门的背景故事的一面墙，不然会审美疲劳」
     ②「这个门也不会太突兀」
     ③「一开始剧情背景介绍，感觉整个界面空空的」
*/
/* ① 四角暗角减弱：旧版是 .88 的黑边，把整面墙吃成了"纯黑"。
       现在只做"聚焦中心"，不做"压黑四周"，灰砖墙才透得出来。 */
#base .vign2{ box-shadow:inset 0 0 150px 52px rgba(0,0,0,.55) !important; }

/* ② 门框：给门镶一圈暗木外框，让它"嵌在墙里"，
       而不是"贴在黑墙上的一块亮板"（这正是"突兀"的来源）。 */
.theDoor{
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.92),
    0 0 0 6px rgba(64,45,27,.62),
    0 0 0 9px rgba(16,11,7,.60),
    0 18px 34px rgba(0,0,0,.72) !important;
}
.theDoor::before{ border-color:rgba(255,220,160,.10) !important; }
.theDoor .knocker{ border-color:rgba(140,108,54,.85) !important; }

/* ③ 序章：不再是"纯黑 + 几行字"。
       给一面暗墙 + 一扇门的剪影（位置与游戏里那扇门一致），
       开场剧情介绍时画面就有内容，不再"空空的"。 */
#prologue{
  background:
    radial-gradient(122% 94% at 50% 36%, rgba(0,0,0,0) 0%, rgba(0,0,0,.32) 56%, rgba(0,0,0,.78) 100%),
    radial-gradient(30% 22% at 22% 30%, rgba(106,90,62,.16) 0%, rgba(106,90,62,0) 74%),
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 42px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, rgba(0,0,0,0) 1px 84px),
    linear-gradient(180deg,#1b1e24 0%,#15181e 46%,#0a0c10 100%) !important;
}
#prologue::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  bottom:24%; width:min(96px,20vw); height:min(176px,28vh);
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg, rgba(62,45,28,.80), rgba(14,9,5,.92));
  box-shadow:0 0 0 6px rgba(48,34,20,.45), 0 0 44px rgba(0,0,0,.72);
  pointer-events:none; z-index:0;
}
#prologue .vign{ z-index:1; }
#prologue .ember{ z-index:2; }
#prologue .pline, #prologue .brand, #prologue .skip, #prologue .phint{ z-index:3; }

/* ===== v19.2.10：把选项行再收紧一档，让"一屏 4 条"真正放得下 =====
   实测（1280×720）：选项区可用高 223px，而 4 条 × 57px + 3 × 7px = 249px，
   结果第 4 条被切掉一半，肉眼只当是 3 条 —— 与总负责人要求的"一屏四个"不符。
   这里把单条从约 57px 收到约 49px、行距 7px→5px：
     4 × 49 + 3 × 5 = 211px ≤ 223px ✓
   命中面积仍有 44px（可用性下限 ≥44px），文字也没有被压扁。 */
.opt{ padding:6px 12px !important; min-height:44px !important; line-height:1.32 !important; }
.opt .cost{ font-size:9.5px !important; line-height:1.22 !important; }
#choices{ gap:5px !important; }
@media (max-height:700px){ .opt{ padding:5px 11px !important; min-height:42px !important; } }

/* ==================================================================
   ===== v19.2.11：让"滑动"在真机上确实可用（敲门场景专项） =====
   ==================================================================
   实测（Chromium / 桌面内核）：敲门时 #choices 程序化滚动=267px、
   滚轮滚动=200px、点击选项 8→4 条，全部正常。
   但玩家在手机上反馈"根本滑动不了下面、选不了选项"——这是真机专有的差异：

     ① 敲门面板在窄屏高达 156px（节奏图独占一整行），把 #choices 压到只剩
        179px（约 3 条）。手指几乎没有可滑的行程，滑一下没动静就以为坏了。
        → 已在 index.html 的窄屏规则里把面板压到约 80px（节奏图回到同一行）。

     ② 部分 iOS / 微信 WebView 对内层滚动容器要求显式的 touch-action，
        否则纵向拖动会被识别为"页面手势"而被丢弃。
        → 这里给滚动容器与选项条目补上 touch-action:pan-y。

     ③ 选项区与敲门面板相邻，手指容易从面板那一侧起滑（那里不是滚动容器，
        滑动不会有任何反馈）。→ 让整个游戏列也能把纵向拖动转交给 #choices。
*/
#choices,#textzone{ touch-action:pan-y; }
#knockSfx{ touch-action:pan-y; }
#choices .opt,.opt{ touch-action:pan-y; }
/* 滚动条常驻占位 + 明显一点，让"还能往下滑"这件事一眼可见 */
#choices{ scrollbar-width:thin; scrollbar-color:rgba(190,168,120,.45) transparent; }

/* ===== v19.2.11（续）：把敲门场景的纵向空间腾出来 =====
   实测（390×844，敲门面板显示时）：
     hud 118 + stage 244 + textzone 96 + knockSfx 108 + clue 104 = 670
   只剩 174px 给选项区 —— JS 只能把它压到 166px（约 3 条）。
   手指几乎没有可滑的行程，滑一下没动静，玩家就会认为"划不动、选不了"。
   两处让位：
     ① #clue（敲门线索）限高 46px 并允许内部滚动 —— 内容仍可读完，但不再独占 104px；
     ② 敲门时舞台让出一些高度（门只是等比小一点，不会被裁）。
   #clue 的内容是判断依据，所以【不能】隐藏，只能限高。 */
/* 把 #clue 改成【浮层】：贴在文字区上沿之上，不再占用纵向流。
   只"限高"是不够的 —— 它仍要吃掉 46px，桌面 720 高时选项区只剩 184px。
   浮层化后这一步会彻底释放（JS 会按文字区实际位置精确设置 bottom）。 */
#clue{
  position:absolute !important;
  left:0 !important; right:0 !important;
  bottom:0;                       /* 由 JS 按文字区位置覆盖 */
  z-index:13 !important;
  margin:0 auto !important;
  max-width:min(520px, 94%) !important;
  max-height:46px !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  padding:7px 14px !important;
  border-radius:12px;
  background:rgba(11,15,19,.94);
  border:1px solid rgba(111,174,159,.26);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.85);
  flex-shrink:0;
}
body.gm-judge #stage{ min-height:min(180px, 28vh) !important; }
/* 矮屏：敲门图例看过一次就够，矮屏直接收起，把高度还给选项区 */
@media (max-height:680px){ #knockSfx .ksLegend{ display:none !important; } }

/* ==================================================================
   ===== v19.2.12 P0：设置面板（温和模式/震动/音效…）打开后关不掉 =====
   ==================================================================
   病灶（#opt 原样式）：
     #opt{ position:absolute; inset:0; flex-direction:column;
           align-items:center; justify-content:center; padding:0 26px; }   ← 没有 overflow
   七行设置 + 标题 + 返回按钮 + 说明，在手机上总高 900px 上下，超过视口（844）。
   而 justify-content:center 会把超出部分【从上下两端同时裁掉】——
   底部的「返 回」按钮被裁到屏幕外，且面板本身不可滚动 → 点进去就退不出来。

   修法：
     ① 改为 flex-start 并允许纵向滚动（center + overflow 会裁掉顶部，必须改）；
     ② 「返 回」按钮改成 sticky，滚到哪儿都在视野内；
     ③ 其余全屏面板也补上滚动保险，避免同类问题。 */
#opt{
  justify-content:flex-start !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  overscroll-behavior:contain;
  padding:22px 26px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
}
#opt > *{ flex-shrink:0; }
#opt h2{ margin-top:6px !important; }
/* 「返 回」常驻视野：无论滚到哪一段都能退出 */
#opt .close{
  position:sticky !important;
  bottom:8px !important;
  z-index:3;
  background:rgba(10,9,8,.88) !important;
  border-color:#6a7078 !important;
  color:#f0ede6 !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
/* 其余全屏面板：补一道滚动保险（原本有 .box 内滚的仍然优先） */
#review,#ach,#codex,#shareOv,#backlogPanel,#galleryPanel{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  overscroll-behavior:contain;
}

/* ==================================================================
   ===== v19.2.12 P0：选项"被遮挡、点不到"的结构性根治 =====
   ==================================================================
   病灶：v19.2.11 把 #clue（线索条）改成浮层时给了它 z-index:13，
   而 #choices 只有 z-index:11 —— 提示条反而比选项更高。
   一旦 #clue 的 JS 定位没跟上（弱网、字体晚到、视口高度变化、安全区差异），
   它就停在 CSS 默认的 bottom:0 上，正好压在选项区上并把点击全部吃掉。
   这就是"被遮挡了、根本没法选"。

   修法 —— 从层级上让它【不可能】挡住选项：
     ① #clue 的 z-index 降到 10（低于 #choices 的 11），永远在选项之下；
     ② #clue 加 pointer-events:none —— 即使视觉上重叠，点击也直接穿透；
     ③ 默认 bottom 从 0 改成 55%（舞台区），万一定位没跑也不会落到选项上；
     ④ 其余提示性浮层（代价回显 / 状态条 / 浮字 / 门外字幕）统一不吃点击。 */
#clue{
  /* ① z-index 低于 #choices(12) —— 层级上就【不可能】盖住选项、吃掉点击。
        这是本次最关键的一行：之前是 13 > 11，位置一重叠就点不动。 */
  z-index:10 !important;
  /* ② 兜底位置放在舞台区；这里【不能】加 !important，
        否则会盖掉 JS 写的内联 bottom，线索条就不再跟随文字区了。 */
  bottom:55%;
}
#echo,#stagebar,#toast,.fl,#gmCaption{
  pointer-events:none !important;
}
/* 选项区抬到提示之上（仍在全屏面板 #opt:88 / #panel:30 之下） */
#choices{ z-index:12 !important; }

/* ==================================================================
   ===== v19.2.13：压掉"黑条"、把选项做大、并明确提示可滑动 =====
   ==================================================================
   总负责人反馈：
     ①「下面选项还是太小了」—— v19.2.10 为了塞下 4 条，把单条压到约 50px、
        说明文字 9.5px，确实太挤；
     ②「上面不是有一个黑条吗，把那段压缩一下」—— 指文字区（"你要做什么？"
        那一整块 96px 只有一行字）与线索条；
     ③「下面至少露出来两个选项」；④「旁边表明这个可以滑动」。
   思路：把上方三块各收一点，腾出的高度【全部给舞台和选项】——
        选项从"4 条挤着"改成"2~3 条大按钮"，并给一个明确的滑动提示。 */

/* ① 文字区：只有一行字时不再占 96px；长文案仍可滚 */
:root{ --tz-h:min(16vh, 118px); }
#textzone{
  min-height:min(8.5vh, 56px) !important;
  padding:8px 16px !important;
  max-height:var(--tz-h) !important;
}
#textzone.folded{
  min-height:min(8.5vh, 56px) !important;
  max-height:var(--tz-h) !important;
  padding:8px 16px !important;
}

/* ② 线索条再收一档 */
#clue{ max-height:40px !important; padding:5px 12px !important; }

/* ③ 敲门面板：图例（● 节奏 / 💬 说话 / 🫁 换气 / 🐕 狗的反应）只在第一次需要，
      窄屏收起它换高度 —— 节奏图与「重听 / 贴门听」都保留 */
@media (max-width:560px){
  #knockSfx{ padding:5px 9px !important; }
  #knockSfx .ksLegend{ display:none !important; }
}

/* ④ 选项做大：一屏 2~3 条【大按钮】，而不是 4 条挤在一起 */
.opt{
  padding:12px 15px !important;
  min-height:62px !important;
  line-height:1.42 !important;
  font-size:calc(15.5px * var(--fs)) !important;
}
.opt .cost{ font-size:11px !important; line-height:1.32 !important; }
#choices{ gap:8px !important; }
/* 一屏最多 3 条（要求是"至少露出两个"）。
   注意：【不能】加 !important —— JS 在视口不够高时要用内联再收一刀，
   而 !important 的优先级高于内联，会把这道保险关掉。 */
#choices{
  /* +26px 是留给顶部那条"向下滑动"提示的高度，保证 3 条大按钮能完整放下 */
  max-height:min(calc(3 * var(--opt-row) + 2 * var(--opt-gap) + 26px), 46vh);
}

/* ⑤ "可以滑动"的显式提示。
   放在【顶部】而不是底部：底部有渐隐遮罩会把提示淡掉，而且在底部时
   不滚到底就看不见 —— 提示本身就失去了意义。
   用 order:-1 让它排到最前，sticky top:0 保证一直可见。 */
#choices.scrollable::after{
  content:'⌄  向下滑动，还有选项';
  order:-1;
  position:sticky; top:0;
  display:block; width:max-content; margin:0 auto 4px;
  padding:3px 12px; border-radius:10px;
  font-size:10px; letter-spacing:1px; line-height:1.6;
  color:#e2c98c;
  background:rgba(24,19,11,.96);
  border:1px solid rgba(226,201,140,.42);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.85);
  pointer-events:none; z-index:3;
}

/* ===== v19.2.15：桌面宽屏利用率（评审实测：1920×1080 下内容只占中间 520px 竖条，
     两侧各空 ~850px，像把竖屏手机版直接搬到桌面）=====
   这里在原有 min-width:1024px 的 520px 基础上，按屏宽分档放宽内容列。
   只放宽宽度，不改字号与排版节奏；舞台是 flex 居中的，立绘/门/狗会自适应。 */
@media (min-width:1280px){
  #stage{width:min(700px,62vw);}
  #hud{width:min(700px,62vw);}
  #textzone,#choices{width:min(700px,62vw);}
}
@media (min-width:1700px){
  #stage{width:min(880px,54vw);}
  #hud{width:min(880px,54vw);}
  #textzone,#choices{width:min(880px,54vw);}
}

/* 桌面端左侧信息栏已把资源（食物/水/伤药/安神药）完整列出，
   顶部 HUD 再重复一遍既拥挤又冗余 → 宽屏下隐藏 HUD 里的资源块，只保留难度标签。 */
@media (min-width:900px){
  #hud .right .res{display:none;}
}

/* 说明（v19.2.15 实测记录）：曾尝试在宽屏把正文区加高到 110px，用于缓解"线索框挤在
   正文上"的观感。但 #textzone 的高度已经被 --tz-h 这套变量链用 !important 锁死
   （height/min-height/max-height 三处 !important），追加同特异性规则无效；
   强行覆盖需要动那条链本身，而 56px 这个高度是总负责人在 v19.2.13 明确要的
   （"上面有一个黑条，把那段压缩一下，下面至少露出来两个选项"）——
   按"不留下无效规则、也不推翻已确认的观感"处理：撤销高度改动，
   正文区保持 56px；线索框改用增加间距（+12px）来与正文拉开，见 index.html。 */

/* ===== v19.2.15：宽屏下舞台构件同步放大 =====
   上面把内容列从 520px 放宽到 700/880px 后，舞台里的"人 / 狗 / 门"仍是固定像素尺寸
   （门 96px 宽、狗 74×58、人物高度上限 156px），在新舞台上会显得缩了一号。
   这里按档位等比放大三者的尺寸，保持彼此比例不变（避免历史上出现过的"狗比人大"）。 */
@media (min-width:1280px){
  #basePerson{height:min(178px,58%);}
  body.dayStory #basePerson{height:min(238px,58%);}
  .theDoor{width:110px;height:min(200px,60%);}
  #baseDog .dog{width:85px;height:67px;}
}
@media (min-width:1700px){
  #basePerson{height:min(206px,48%);}
  body.dayStory #basePerson{height:min(272px,52%);}
  .theDoor{width:130px;height:min(236px,50%);}
  #baseDog .dog{width:100px;height:78px;}
}

/* ===== v19.2.16：桌面端线索框改为「流内一行」（评审两轮指出：青色线索框浮在剧情正文上）=====
   手机端空间不足，浮层（贴文字区上沿）是必要的；但桌面竖向与横向都有余量，
   没有理由再让它盖在正文上。#clue 在 DOM 里本来就位于 #textzone 之后、#choices 之前，
   所以宽屏把它从 absolute 改回 static，它就自然排在"正文下方、选项上方"的独立一行。 */
@media (min-width:900px){
  #clue{
    position:static !important;
    left:auto !important; right:auto !important; bottom:auto !important; top:auto !important;
    max-height:none !important; overflow:visible !important;
  }
}
@media (min-width:1280px){ #clue{ width:min(700px,62vw) !important; margin:6px auto 0 !important; } }
@media (min-width:1700px){ #clue{ width:min(880px,54vw) !important; margin:6px auto 0 !important; } }

/* ===== v19.2.19 修（第五轮 #1）：今夜须知 =====
   只读信息行，放在选项上方。玩家可以不理它，但它一直在那儿 ——
   把"要靠记性"的隐藏状态（天象/狗可信度/工具余量/它已学会什么）摆到眼前。
   注意：这里**不能**用 !important —— fit() 越过视口底部时会写内联 maxHeight 收一刀，
   !important 会把它盖掉（v19.2.6 的 max-height:none !important 就是这么翻车的）。
   用同特异性、后出现的普通规则覆盖即可。 */
#choices .optInfo{
  border:1px solid rgba(140,160,190,.20);
  background:rgba(16,22,31,.66);
  border-radius:10px;
  padding:8px 12px;
  font-size:calc(12.5px * var(--fs));
  line-height:1.6;
  color:#93a6bc;
  flex-shrink:0;
  pointer-events:none;
  letter-spacing:.2px;
}
#choices{ max-height:min(calc(3 * var(--opt-row) + 2 * var(--opt-gap) + 26px + var(--info-h, 0px)), 52vh); }
@media (max-width:560px){
  #choices .optInfo{ font-size:calc(11.5px * var(--fs)); line-height:1.52; padding:7px 10px; }
}


/* ===================== v19.2.21 双端修复（第七轮） ===================== */

/* ① 520–1023px 中间档：iPad 竖屏 / 半屏笔记本不再拿 460px 浮岛卡片。
   ⚠ 上界必须锁到 899px：≥900 的桌面档靠第 463 行 max-width:none 通栏，
   600px 的 max-width 会把 #app 压回 600px（padding-left:300 → 内容框只剩 300px），
   而桌面内容列是 520–700px → 横向溢出；选项一点/一聚焦，浏览器把 #app 向右
   滚 ~345px，左栏被整个推出屏幕（v19.2.21 引入的回归，通关审计裁切 192 抓到）。 */
@media (min-width:560px) and (max-width:899px){ #app{max-width:600px;} }
/* 900–1023 档：侧栏已出（门槛降到 900），内容列必须显式收窄，
   否则会被下面那条 max-width:1023 的 #textzone{width:100% !important} 撕成全宽 */
@media (min-width:900px) and (max-width:1023px){
  #textzone,#choices,#hud,#stage{ width:min(520px,76vw) !important; margin-left:auto !important; margin-right:auto !important; }
}

/* ② 宽屏右侧常驻面板"随身记"：把 1920 下空掉的右侧 1/3 变成信息位 */
#sideR{display:none;}
@media (min-width:1700px){
  #app{padding-right:330px;}
  #sideR{display:flex;position:absolute;right:16px;top:16px;bottom:16px;width:min(300px,20vw);
    overflow-y:auto;flex-direction:column;gap:12px;padding:14px 14px;
    background:rgba(10,13,17,.55);border:1px solid var(--line);border-radius:16px;}
}
#sideR .srQ{font-size:calc(11.5px * var(--fs));color:#c7ccd2;line-height:1.6;margin-bottom:8px;
  border-left:2px solid rgba(226,201,140,.4);padding-left:8px;}
#sideR .spH2{font-size:10.5px;letter-spacing:1px;color:#8d949c;margin:10px 0 5px;}
#sideR .srClue{display:flex;gap:7px;font-size:calc(11px * var(--fs));line-height:1.55;color:#b6bcc4;
  padding:3px 0;border-bottom:1px dashed rgba(42,48,56,.6);}
#sideR .srClue i{flex-shrink:0;font-style:normal;color:#6f7680;min-width:34px;}
#sideR .srClue span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
#sideR .srEmpty{font-size:calc(11px * var(--fs));color:#6f7680;line-height:1.7;padding:4px 0 6px;}
#sideR .srBtns{display:flex;gap:8px;margin-top:12px;}
#sideR .srBtns button{flex:1;background:rgba(20,23,28,.9);border:1px solid #2a2f38;color:#a8adb4;
  border-radius:9px;padding:7px 4px;font-size:11.5px;cursor:pointer;font-family:inherit;transition:.2s;}
#sideR .srBtns button:hover{border-color:var(--gold);color:#fff;}
#sideR .srKb{margin-top:12px;font-size:10px;color:#565c63;line-height:1.7;letter-spacing:.3px;}

/* ③ 阅读态：没有选项面板时，正文从"取景器"（124px≈6 行）变成"读物"（12+ 行）。
   v19.2.3 的恒定高度预算在"有选项"时原样保留（CLS 防护不动）；
   纯叙事段（say 序列）本就没有选项，让出高度不会引起任何位移竞争。 */
body:not(.has-opts) #textzone{
  height:min(34vh,300px) !important;
  min-height:min(34vh,300px) !important;
  max-height:min(34vh,300px) !important;
  justify-content:flex-start !important;
  padding-top:12px !important;
}
@media (min-width:900px){
  body:not(.has-opts) #textzone{
    height:min(40vh,340px) !important;
    min-height:min(40vh,340px) !important;
    max-height:min(40vh,340px) !important;
  }
}
/* ④ 宽屏行宽：880px 列上 55–60 字/行 → 收窄到 40 字上下（中文阅读舒适区） */
@media (min-width:1280px){ #textInner{max-width:620px;margin:0 auto;} }
@media (min-width:1700px){ #textInner{max-width:660px;margin:0 auto;} }

/* ⑤ 2200px+ 超宽档：内容列与舞台构件再进一档，右栏保持 */
@media (min-width:2200px){
  #stage,#hud,#textzone,#choices{width:min(980px,48vw);}
  #basePerson{height:min(238px,48%);}
  body.dayStory #basePerson{height:min(300px,52%);}
  .theDoor{width:152px;height:min(280px,52%);}
  #baseDog .dog{width:116px;height:90px;}
  #app{padding-right:360px;}
  #sideR{width:min(330px,18vw);}
}

/* ⑥ 横屏（844×390 实测被 max-height 560/600/620 逐级压扁）：给一整套横屏宪法 */
@media (max-height:500px) and (orientation:landscape){
  #stage{min-height:104px !important;}
  #hud{padding-top:4px !important;padding-bottom:2px !important;}
  .opt{padding:8px 12px !important;min-height:44px !important;}
  #choices{gap:5px !important;}
  #knockSfx .ksLegend{display:none !important;}
  #clue{max-height:34px !important;padding:4px 12px !important;}
  #intro .desc{display:none;}
  #intro .ttl{font-size:26px;letter-spacing:5px;}
  #intro .introDog{display:none;}
  #intro .enter{margin-top:4px;}
  #intro .footrow{margin-top:8px;margin-bottom:4px;}
  #intro .ageTip{display:none;}
  #prologue .pline{font-size:14px;}
  #prologue .brand .b1{font-size:30px;}
  body:not(.has-opts) #textzone{
    height:min(30vh,150px) !important;
    min-height:min(30vh,150px) !important;
    max-height:min(30vh,150px) !important;
  }
  #sidePanel{top:8px;bottom:8px;left:8px;width:252px;padding:10px 12px;}
  #sideR{top:8px;bottom:8px;right:8px;width:252px;}
}
/* 横屏手机卡片（<900 宽）：#tools 是 left:50% + translateX(-50%)，缩放必须带上位移 */
@media (max-height:500px) and (orientation:landscape) and (max-width:899px){
  #tools{transform:translateX(-50%) scale(.88) !important;transform-origin:top center;}
  #tools button{width:27px;height:27px;}
}

/* ⑦ 390 宽底部五入口（成就/存档/设置/图鉴/关于）：压字距让它一行放下，折行也是整齐两行 */
@media (max-width:430px){
  #intro .reset{font-size:10px !important;letter-spacing:1px !important;padding:6px 7px !important;}
  #intro .footrow{row-gap:4px;}
}

/* ⑧ 端感知文案：桌面端不再说"轻触/滑动" */
body[data-ptr="fine"] #choices.gm-more::after{content:"⌄ 向下滚动，还有选项"}
body[data-ptr="fine"] #choices.scrollable::after{content:"⌄ 向下滚动，还有选项"}

/* ⑨ 侧栏/HUD 字号纳入缩放（P2：此前 --fs 只覆盖正文与选项） */
.spCard .spRow{font-size:calc(12.5px * var(--fs));}
.spCard .spH{font-size:calc(11px * var(--fs));}
.spCard .spTip{font-size:calc(11px * var(--fs));}
#hud .day{font-size:calc(12.5px * var(--fs));}
#hud .res b{font-size:calc(12px * var(--fs));}
#hud .diffTag{font-size:calc(11.5px * var(--fs));}
#stagebar{font-size:calc(12px * var(--fs));}

/* ⑩ 视觉判读摘要（静音/听障玩家的文字兜底） */
#knockSfx .ksSummary{flex-basis:100%;font-size:calc(10.5px * var(--fs));color:#9fd0c4;
  letter-spacing:.5px;line-height:1.55;padding:3px 2px 1px;border-top:1px dashed rgba(140,160,190,.18);}

/* ⑪ 键盘契约：选项焦点态 */
#choices .opt.kbSel{outline:1px solid var(--gold);background:rgba(217,185,106,.10);}

/* ⑫ 听力自检浮层 */
#hearCheck{position:fixed;inset:0;z-index:330;display:none;align-items:center;justify-content:center;
  background:rgba(4,5,7,.88);padding:20px;}
#hearCheck.on{display:flex;animation:fadeIn .25s both;}
#hearCheck .hcBox{max-width:420px;width:100%;text-align:center;background:#101215;
  border:1px solid var(--line);border-radius:16px;padding:28px 24px;}
#hearCheck .hcIco{font-size:34px;}
#hearCheck .hcT{font-size:18px;color:#e6e9ee;letter-spacing:1px;margin:10px 0 8px;}
#hearCheck .hcS{font-size:12.5px;color:var(--muted);line-height:1.85;margin-bottom:18px;}
#hearCheck .hcPlay{background:rgba(217,185,106,.12);border:1px solid #4a3c1c;color:#e8d9a8;
  border-radius:11px;padding:10px 22px;font-size:13px;cursor:pointer;font-family:inherit;letter-spacing:1px;}
#hearCheck .hcPlay:hover{background:rgba(217,185,106,.22);}
#hearCheck .hcRow{display:flex;gap:10px;justify-content:center;margin-top:16px;}
#hearCheck .hcYes,#hearCheck .hcNo{flex:1;max-width:150px;padding:10px 0;border-radius:10px;
  font-size:13px;cursor:pointer;font-family:inherit;letter-spacing:2px;}
#hearCheck .hcYes{background:rgba(90,158,111,.16);border:1px solid #3f6b4d;color:#a9d8b6;}
#hearCheck .hcNo{background:rgba(158,90,90,.14);border:1px solid #6b3f3f;color:#d8a9a9;}
#hearCheck .hcSkip{margin-top:18px;background:none;border:none;color:var(--muted);
  font-size:11.5px;font-family:inherit;letter-spacing:2px;cursor:pointer;padding:8px 12px;
  opacity:.75;transition:opacity .2s,color .2s;}
#hearCheck .hcSkip:hover{opacity:1;color:#c9cfd8;}
#hearCheck .hcSkip:focus-visible{outline:1px solid var(--line);outline-offset:2px;}

/* ⑬ 横屏提示条（可点收起） */
#landHint{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(8px);z-index:200;background:rgba(20,16,10,.95);
  border:1px solid rgba(226,201,140,.4);color:#e2c98c;font-size:11px;letter-spacing:1px;
  padding:8px 16px;border-radius:20px;cursor:pointer;opacity:0;transition:opacity .3s,transform .3s;
  max-width:86vw;text-align:center;line-height:1.6;}
#landHint.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* ⑭ role="dialog" 焦点管理：聚焦但不描蓝框 */
[role="dialog"]:focus{outline:none;}

/* ⑮ #tools 让出灵动岛/刘海区域（viewport-fit=cover 后 env 才生效） */
#tools{top:calc(12px + env(safe-area-inset-top,0px));}


/* ============ v19.3.0 ⑯ 结局图鉴：锁定剪影墙 ============
   评审 P1：图鉴空态是"死"的 —— 纯黑空盒 + 灰条，看着像"这功能不存在"。
   现在每格是一道门缝 + 一个门外的影子（全部 CSS 绘制，零图片依赖），
   没解锁就显示 ？？？/未解锁，解锁后原地换成该结局的 CG 缩略图。
   一眼可读的信息："一共几格、我开了几格"。 */
#codex .cxwall{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 10px;}
@media (min-width:520px){#codex .cxwall{grid-template-columns:repeat(5,1fr);}}
#codex .cxcell{border-radius:9px;overflow:hidden;background:linear-gradient(180deg,#0c0d10,#070708);
  border:1px solid rgba(255,255,255,.07);padding-bottom:7px;transition:border-color .25s,box-shadow .25s;}
#codex .cxcell.on{border-color:rgba(201,162,78,.5);box-shadow:0 0 12px -4px rgba(201,162,78,.45);}
#codex .cxcell.memcell.on{border-color:rgba(155,143,214,.55);box-shadow:0 0 12px -4px rgba(155,143,214,.5);}
#codex .cxart{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;
  background:linear-gradient(180deg,#0a0908,#050505);}
#codex .cxart img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;display:block;}
#codex .cxart::after{content:'';position:absolute;left:50%;top:9%;bottom:9%;width:44%;
  transform:translateX(-50%);border-radius:999px;z-index:0;
  background:linear-gradient(180deg,rgba(224,168,80,.22),rgba(224,168,80,.03));filter:blur(2.5px);}
#codex .cxcell.on .cxart::after{display:none;}
#codex .cxfig{position:absolute;left:50%;bottom:0;width:58%;height:76%;
  transform:translateX(-50%);z-index:1;}
#codex .cxfig i{position:absolute;left:50%;top:0;width:36%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;background:#060606;
  box-shadow:inset 0 -5px 9px rgba(224,168,80,.10),0 0 0 1px rgba(224,168,80,.14);}
#codex .cxfig b{position:absolute;left:0;right:0;bottom:0;height:60%;
  border-radius:46% 46% 12% 12%/32% 32% 8% 8%;background:#060606;
  box-shadow:inset 0 1px 10px rgba(224,168,80,.13),0 0 0 1px rgba(224,168,80,.11);}
#codex .cxcell.lock .cxart{filter:saturate(.3) brightness(.94);}
#codex .cxcell.memcell.lock .cxfig b,#codex .cxcell.memcell.lock .cxfig i{
  background:#070708;box-shadow:0 0 0 1px rgba(155,143,214,.10);}
#codex .cxlock{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:14px;height:11px;border-radius:2px;background:rgba(201,162,78,.5);z-index:3;}
#codex .cxlock::before{content:'';position:absolute;left:50%;top:-6px;width:9px;height:8px;
  transform:translateX(-50%);border:2px solid rgba(201,162,78,.5);border-bottom:none;
  border-radius:6px 6px 0 0;}
#codex .cxcell.memcell .cxlock,#codex .cxcell.memcell .cxlock::before{
  background:rgba(155,143,214,.5);border-color:rgba(155,143,214,.5);}
#codex .cxcell.memcell .cxlock{background:rgba(155,143,214,.5);}
#codex .cxnm{font-size:calc(10.5px * var(--fs));color:#4f555c;margin-top:6px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px;}
#codex .cxcell.on .cxnm{color:#e6e9ee;}
#codex .cxtg{font-size:calc(8.5px * var(--fs));letter-spacing:.5px;color:#464c53;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px;}
#codex .cxcell.on .cxtg{color:var(--gold);}
#codex .cxcell.memcell.on .cxtg{color:#9b8fd6;}
#codex .cxline{display:none;}
#codex .cxcell.on .cxline{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:calc(9px * var(--fs));color:#7b828a;line-height:1.55;margin-top:4px;
  padding:0 6px;text-align:left;}
#codex .cxhint{text-align:center;font-size:10.5px;letter-spacing:1px;color:#5d636a;
  margin:2px 0 12px;line-height:1.7;}
/* 窄屏（<360px）压到两列，避免格子过窄 */
@media (max-width:359px){#codex .cxwall{grid-template-columns:repeat(2,1fr);}}

/* ============ v19.3.0 ⑯-b 图鉴盒宽屏放宽 ============
   原来 .codexbox 硬编码 max-width:340px（手机口径），在电脑上是一根细条：
   21 格图鉴墙挤成 5 列 × 小格，缩略图看不清。
   宽屏给到 760px，格子回到可辨认大小；手机侧不变。 */
@media (min-width:900px){
  #codex .codexbox{max-width:760px;max-height:88%;padding:22px 22px 16px;}
  #codex .cxwall{grid-template-columns:repeat(6,1fr);gap:10px;}
  #codex .cxtg{font-size:calc(9.5px * var(--fs));}
  #codex .cxnm{font-size:calc(11.5px * var(--fs));}
  #codex .cxcell.on .cxline{font-size:calc(10px * var(--fs));-webkit-line-clamp:2;}
}

/* ============ v19.3.0 ⑱-b 命名页 · 声音选项 ============
   原来第三问是自由输入框。总负责人指出：自由输入会产出"演不出来"的东西 ——
   写「老板」「Siri」这类词，文字层能替换，声音层没有对应音色，音色匹配直接落空。
   改成 8 个选项（每个都保证有对应音域），并在选中时用该音域试听一次。 */
#naming .nmVoice{display:flex;align-items:flex-start;gap:14px;}
#naming .nmVoice > span{padding-top:9px;}
#voicePick{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;}
#naming .vopt{appearance:none;-webkit-appearance:none;font-family:inherit;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid rgba(226,220,208,.16);border-radius:9px;
  color:#9aa0a8;font-size:12px;letter-spacing:2px;padding:7px 11px;line-height:1;
  transition:color .18s,border-color .18s,background .18s,box-shadow .18s,transform .1s;}
#naming .vopt:hover{color:#d8dadd;border-color:rgba(226,220,208,.30);background:rgba(255,255,255,.05);}
#naming .vopt:active{transform:scale(.96);}
#naming .vopt.sel{color:#f0d79a;border-color:rgba(216,178,100,.72);background:rgba(216,178,100,.12);
  box-shadow:0 0 14px -6px rgba(216,178,100,.6),inset 0 0 10px rgba(216,178,100,.06);}
#naming .vopt:focus-visible{outline:1px solid rgba(216,178,100,.6);outline-offset:2px;}
@media (max-width:359px){#naming .vopt{font-size:11.5px;padding:6px 9px;letter-spacing:1px;}}


/* ============================================================================
   《关门：第二次敲门》评审样片  v20.0.0
   自包含覆盖层样式；与主界面共用色板（#e8c478 金 / #0a0c0e 底）
   断网时背景图失效 → dmBg 留深色底，游戏照常进行（不依赖图片）
   ========================================================================== */
#demoOv{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;
  background:#07090b;color:#d8d3c8;font-family:inherit;overflow:hidden}
#demoOv.on{display:flex}
#demoOv *{box-sizing:border-box}
.dmVign{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,rgba(0,0,0,0) 40%,rgba(0,0,0,.62) 100%)}
.dmBg{position:absolute;inset:0;pointer-events:none;
  background:#0d0f12 center/cover no-repeat}
.dmBg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,9,11,.82) 0%,rgba(7,9,11,.35) 34%,rgba(7,9,11,.92) 88%)}

/* ---------- 顶栏 ---------- */
.dmTop{position:relative;z-index:3;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 8px;flex-shrink:0}
.dmBrand{font-size:13px;letter-spacing:2px;color:#e8c478;font-weight:600}
.dmNight{font-size:11px;color:#8f96a0;border:1px solid #2a2f36;border-radius:20px;padding:2px 10px}
.dmSpacer{flex:1}
.dmTog,.dmExit{font-family:inherit;font-size:12px;border-radius:9px;padding:7px 12px;cursor:pointer;
  background:rgba(20,23,28,.8);border:1px solid #3a3020;color:#b9bcc2;min-height:36px}
.dmTog[aria-pressed="true"]{background:rgba(232,196,120,.16);color:#e8c478;border-color:#6b5a30}
.dmExit{color:#c98f8f;border-color:#4a2c2c}

/* ---------- 舞台 ---------- */
.dmStage{position:relative;z-index:2;flex:1;min-height:120px;display:flex;align-items:flex-end;
  justify-content:center;padding:0 12px 6px}
.dmDoor{position:relative;width:min(46vw,220px);height:min(52vh,300px);
  border:2px solid #1c2026;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,#171a1f 0%,#101318 60%,#0b0d11 100%);
  box-shadow:0 0 0 6px #0a0c0f,0 18px 50px rgba(0,0,0,.65)}
.dmGap{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:4px;height:34%;
  background:linear-gradient(180deg,rgba(210,225,255,.34),rgba(210,225,255,.05));
  filter:blur(1px)}
.dmHandle{position:absolute;right:12%;top:46%;width:26px;height:8px;border-radius:4px;
  background:linear-gradient(180deg,#4a4033,#241d14)}
.dmDog{position:absolute;left:calc(50% + min(23vw,112px));bottom:8px;width:min(30vw,132px);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.dmDog svg{width:100%;height:auto;display:block}
.dmSide{position:absolute;right:14px;top:8px;font-size:11px;color:#e8c478;
  border:1px solid #6b5a30;border-radius:20px;padding:3px 12px;background:rgba(10,12,15,.75);
  opacity:0;transition:opacity .3s}
.dmSide.on{opacity:1}
.dmCap{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;width:min(92%,640px);
  font-size:15px;line-height:1.65;color:#e6e0d2;text-align:center;
  background:rgba(8,10,13,.86);border:1px solid #23282f;border-radius:12px;
  padding:10px 14px;opacity:0;transition:opacity .25s;pointer-events:none}
.dmCap.on{opacity:1}

/* ---------- 情报账本（门外知道什么） ---------- */
.dmLedger{position:relative;z-index:2;display:flex;gap:8px;flex-wrap:wrap;
  padding:6px 14px 2px;flex-shrink:0}
.dmFact{font-size:11px;line-height:1.5;border-radius:8px;padding:4px 9px;max-width:100%;
  border:1px solid #2a2f36;background:rgba(16,19,24,.8);color:#9aa2ad}
.dmFact i{display:block;font-style:normal;font-size:10px;margin-top:2px;color:#6d747e}
.dmFact.pri{border-color:#3d4a2a;color:#b7c39a}
.dmFact.pri i{color:#7d9060}
.dmFact.pub{border-color:#6b2020;background:rgba(50,16,16,.55);color:#e0a8a8}
.dmFact.pub i{color:#b06a6a}
.dmFact.exp{opacity:.62;text-decoration:line-through}

/* ---------- 观察抽屉 ---------- */
.dmEv{position:relative;z-index:2;flex-shrink:0;max-height:0;overflow:hidden;
  transition:max-height .3s;background:rgba(10,12,15,.9);border-top:1px solid #1c2026}
.dmEv.open{max-height:34vh;overflow-y:auto}
.dmEvH{padding:8px 14px 4px;font-size:12px;color:#8f96a0;letter-spacing:1px}
.dmEvH b{color:#e8c478}
.dmEvList{padding:0 14px 10px;display:flex;flex-direction:column;gap:6px}
.dmEvItem{border:1px solid #23282f;border-radius:10px;padding:8px 10px;background:rgba(18,21,26,.85)}
.dmEvItem b{display:block;font-size:13px;color:#d8d3c8;font-weight:600}
.dmEvItem span{display:block;font-size:12px;color:#9aa2ad;line-height:1.6;margin-top:3px;white-space:pre-line}
.dmReplay{margin-top:6px;font-family:inherit;font-size:11px;border-radius:7px;padding:5px 12px;
  border:1px solid #4a3c1c;background:rgba(232,196,120,.1);color:#e8d9a8;cursor:pointer;min-height:30px}

/* ---------- 行动面板 ---------- */
.dmPanel{position:relative;z-index:2;flex-shrink:0;max-height:52vh;overflow-y:auto;
  padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(10,12,15,.4),rgba(8,9,12,.96) 22%);
  border-top:1px solid #1c2026;display:flex;flex-direction:column;gap:8px}
.dmPH{font-size:12px;color:#8f96a0;letter-spacing:1px}
.dmPH b{color:#e8c478}
.dmAct{font-family:inherit;display:block;width:100%;text-align:left;cursor:pointer;
  background:rgba(22,26,32,.9);border:1px solid #2e3540;border-radius:12px;
  padding:11px 13px;min-height:48px;color:#d8d3c8}
.dmAct b{display:block;font-size:14.5px;font-weight:600;line-height:1.5}
.dmAct i{display:block;font-style:normal;font-size:11.5px;color:#7d848e;margin-top:3px}
.dmAct:active{transform:scale(.985);border-color:#6b5a30}
.dmAct.free{border-style:dashed;border-color:#3a3020}
.dmBudget{font-size:12.5px;color:#a89a72;border:1px dashed #4a3c1c;border-radius:10px;padding:10px 12px;line-height:1.6}
.dmFree{display:flex;flex-direction:column;gap:8px}
.dmDH{font-size:12px;color:#8f96a0;letter-spacing:3px;text-align:center;margin-top:2px}
.dmDec{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dmDecBtn{font-family:inherit;cursor:pointer;border-radius:12px;padding:13px 6px;min-height:52px;
  font-size:15px;font-weight:600;letter-spacing:2px;
  background:rgba(232,196,120,.12);border:1px solid #6b5a30;color:#e8c478}
.dmDecBtn:active{transform:scale(.96)}
.dmDecBtn.refuse{background:rgba(20,23,28,.9);border-color:#2e3540;color:#b9bcc2}
.dmDecBtn.exch{background:rgba(30,36,44,.9);border-color:#3d4a5a;color:#a8b8c8}

/* ---------- 记录卡 / 教学卡 ---------- */
.dmCard{border:1px solid #2a2f36;border-radius:14px;padding:16px;background:rgba(13,16,20,.94)}
.dmCover{display:block;width:100%;max-width:210px;margin:0 auto 12px;border-radius:10px;border:1px solid #2a2f36}
.dmCardT{font-size:17px;color:#e8c478;letter-spacing:2px;font-weight:600}
.dmCardS{font-size:11.5px;color:#7d848e;margin-top:4px}
.dmCardB{font-size:14px;line-height:1.9;color:#c3bdae;margin:12px 0 14px}
.dmTeach .dmCardB{color:#e0d5b8}

/* ---------- 决定结果 ---------- */
.dmOutcome{border:1px solid #3a3020;border-radius:14px;padding:14px;background:rgba(18,20,16,.94)}
.dmOutT{font-size:15px;color:#e8c478;letter-spacing:2px;font-weight:600;margin-bottom:8px}
.dmOutB{font-size:14px;line-height:2;color:#c9c3b4;white-space:pre-line}

/* ---------- 结局 ---------- */
.dmEnd{border:1px solid #2a2f36;border-radius:14px;padding:16px;background:rgba(10,12,15,.96);text-align:center}
.dmEndTag{font-size:11px;letter-spacing:3px;color:#c98f8f}
.dmEndT{font-size:22px;color:#e8c478;letter-spacing:4px;font-weight:600;margin:8px 0 12px}
.dmEndB{font-size:14px;line-height:2.1;color:#c3bdae;text-align:left;white-space:pre-line}
.dmCoda{margin-top:12px;padding-top:10px;border-top:1px dashed #2a2f36;
  font-size:12.5px;line-height:2;color:#8f96a0;text-align:left}
.dmEndBtns{display:flex;gap:8px;margin-top:14px}
.dmEndBtns .dmDecBtn{flex:1;padding:13px 4px;font-size:14px}

/* ---------- 复盘 ---------- */
.dmReview{border:1px solid #2a2f36;border-radius:14px;padding:14px;background:rgba(10,12,15,.96)}
.dmRvT{font-size:16px;color:#e8c478;letter-spacing:3px;text-align:center;font-weight:600}
.dmRvH{font-size:12.5px;color:#8f96a0;letter-spacing:2px;margin:16px 0 6px;
  border-bottom:1px solid #1c2026;padding-bottom:5px}
.dmRvLine{font-size:13px;line-height:1.9;color:#c3bdae}
.dmRvLine.miss{color:#a89a72}
.dmRvItem{display:flex;gap:8px;font-size:12.5px;line-height:1.75;padding:5px 0;
  border-bottom:1px dashed #171b21}
.dmRvItem i{flex-shrink:0;font-style:normal;color:#7d848e;width:76px}
.dmRvItem span{color:#b9b3a4}
.dmRvItem.leak span{color:#e0a8a8}
.dmRvItem.decide span{color:#e8c478}
.dmRvFact{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12.5px;
  padding:6px 0;border-bottom:1px dashed #171b21}
.dmRvFact b{color:#c3bdae;font-weight:600}
.dmRvFact i{font-style:normal;font-size:11px;color:#7d9060}
.dmRvFact.pub i{color:#b06a6a}
.dmRvFact span{font-size:11px;color:#6d747e;width:100%}

/* ---------- 小屏（≤360px）：保证最终决定可达 ---------- */
@media (max-width:360px){
  .dmDoor{width:52vw;height:44vh}
  .dmDog{width:34vw;left:calc(50% + 26vw)}
  .dmCap{font-size:13.5px;padding:8px 10px}
  .dmDecBtn{font-size:13.5px;padding:12px 4px;letter-spacing:1px}
  .dmAct b{font-size:13.5px}
  .dmBrand{font-size:12px}
}
/* 文字观察模式：抽屉默认展开 */
body[data-demo-text="1"] .dmEv{max-height:34vh;overflow-y:auto}

/* =====================================================================
   v20.2.0 首屏重构 —— 按 assets/02_aaa_title_ui_reference.png 的按钮秩序
   ---------------------------------------------------------------------
   评审动线（MASTER_OWNER_PLAN「首页」+ AI_EXECUTION_PROMPT「首屏」）：
     ① 最大按钮 = 开始 3 分钟体验（评委 3 分钟动线，落在这个按钮上）
     ② 评审模式：直接进入第一夜
     ③ 正式开始  ④ 结局图鉴  ⑤ 设置 / 关于
   视觉：主视觉交给 assets/01_title_hero.png（门·狗·门外剪影），
        真实中文全部由 HTML/CSS 叠加；按钮做成"竖排菜单 + 金色菱形分隔"，
        与 02 参考一致，但默认按手机竖屏居中（评审主要发生在手机上）。
   ===================================================================== */
#intro .heroBox{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:560px;margin:0 auto;}
#intro .ttl{text-align:center;font-size:37px;letter-spacing:17px;margin-left:17px;}
#intro .ttl::after{margin:15px auto 0;}
#intro .sub{position:relative;z-index:3;margin-top:13px;font-size:15.5px;letter-spacing:2.5px;
  color:#d9c48a;text-align:center;font-weight:300;
  text-shadow:0 2px 16px rgba(0,0,0,.95),0 0 40px rgba(201,162,78,.14);
  animation:fadeUp 2.8s ease .25s both;}
#intro .desc{text-align:center;margin:12px 2px 0;font-size:12px;line-height:1.95;color:#8b9099;}
#intro .enter{position:relative;z-index:3;display:flex;flex-direction:column;align-items:stretch;
  width:min(100%,352px);margin-top:24px;}

/* ---- 菜单项：竖排、扁平、左侧金线，hover 才亮 ---- */
#intro .mItem{position:relative;display:block;width:100%;text-align:left;
  background:linear-gradient(90deg,rgba(17,21,27,.74),rgba(9,12,17,.36));
  border:1px solid rgba(196,210,228,.24);border-left:2px solid rgba(201,162,78,.34);
  color:#c6cdd6;font-family:inherit;font-size:13.5px;letter-spacing:3px;
  padding:13px 16px;margin-top:9px;cursor:pointer;border-radius:2px;
  transition:border-color .28s,background .28s,color .28s,box-shadow .28s;
  text-shadow:0 1px 8px rgba(0,0,0,.92);
  animation:fadeUp 2.8s ease both;}
#intro .mItem:hover{border-color:rgba(226,201,140,.72);border-left-color:#e2c98c;color:#fff;
  background:linear-gradient(90deg,rgba(52,44,27,.88),rgba(15,17,22,.52));
  box-shadow:inset 0 0 24px rgba(201,162,78,.12);}
#intro .mItem:active{transform:translateY(1px);}
#intro .mItem:focus-visible{outline:1px solid rgba(226,201,140,.8);outline-offset:2px;}

/* 主按钮：最大、最亮、唯一带金色实边（评委的 3 分钟落点） */
#intro .mItem.mMain{display:flex;flex-direction:column;align-items:flex-start;
  padding:16px 18px;font-size:17.5px;letter-spacing:5px;color:#f2e8d1;
  border:1px solid rgba(226,201,140,.58);border-left:3px solid #d9b56c;
  background:linear-gradient(90deg,rgba(62,49,27,.92),rgba(17,19,24,.52));
  box-shadow:0 0 34px rgba(201,162,78,.13),inset 0 0 30px rgba(201,162,78,.07);}
#intro .mItem.mMain b{font-weight:400;}
#intro .mItem.mMain i{display:block;font-style:normal;font-size:10.5px;letter-spacing:1.6px;
  color:#a89a7c;margin-top:6px;}
#intro .mItem.mMain:hover{border-color:#e6c877;color:#fff;box-shadow:0 0 40px rgba(201,162,78,.22);}

/* 金色菱形分隔线（02 参考） */
#intro .mSep{position:relative;display:block;width:100%;height:1px;margin:16px 0 2px;
  background:linear-gradient(90deg,rgba(201,162,78,.55),rgba(201,162,78,.05));}
#intro .mSep::after{content:'';position:absolute;left:0;top:-2.5px;width:6px;height:6px;
  background:#c9a24e;transform:rotate(45deg);box-shadow:0 0 9px rgba(201,162,78,.65);}

/* 次级区：成就 · 设置 · 清除存档（小字、低对比，hover 提亮） */
#intro .footrow{justify-content:center;margin-top:18px;width:min(100%,352px);}

/* 宽屏横向：按 02 参考靠左成列，留出主视觉右侧的门与狗 */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  #intro{padding:0 6vw;}
  #intro .heroBox{align-items:flex-start;margin:0;max-width:520px;}
  #intro .ttl{text-align:left;margin-left:0;font-size:41px;}
  #intro .ttl::after{margin:16px 0 0;background:linear-gradient(90deg,rgba(190,205,228,.7),transparent);}
  #intro .sub{text-align:left;}
  #intro .desc{text-align:left;margin-left:0;}
  #intro .footrow{justify-content:flex-start;}
}
/* 矮屏（手机横屏 / 小笔记本）：压缩间距，保证 5 个入口全在首屏 */
@media (max-height:640px){
  #intro .heroBox{max-width:440px;}
  #intro .ttl{font-size:29px;letter-spacing:12px;margin-left:12px;}
  #intro .sub{font-size:13px;margin-top:9px;}
  #intro .desc{display:none;}
  #intro .enter{margin-top:14px;}
  #intro .mItem{padding:10px 14px;font-size:12.5px;margin-top:7px;}
  #intro .mItem.mMain{padding:12px 15px;font-size:15.5px;letter-spacing:4px;}
  #intro .mItem.mMain i{display:none;}
  #intro .mSep{margin:10px 0 1px;}
  #intro .footrow{margin-top:11px;}
}

/* v20.2.0：首页主视觉已含门前的狗（HERO-01），不叠第二只 */
#intro .introDog{display:none}

/* v20.2.0：主视觉可读性 —— 原亮度 .44 把门与狗压没了，
   评审要求"缩小后仍看得出门、狗、门外剪影"，这里提亮并把裁切窗口
   压到主视觉的门与狗上（手机竖屏 cover 会横向裁切，必须给 position）。 */
#intro .bg{filter:brightness(.70) saturate(.86) contrast(1.04);background-position:52% 46%;}
#intro::before{background:
    linear-gradient(180deg, rgba(2,4,7,.60) 0%, rgba(2,4,7,.16) 24%, rgba(2,4,7,.05) 44%, rgba(2,4,7,.32) 72%, rgba(1,2,4,.80) 100%),
    radial-gradient(ellipse at 50% 48%, transparent 36%, rgba(0,0,0,.48) 100%);}

/* v20.2.0：窄屏（手机竖屏）cover 会横向裁切 —— 把可视窗口下移，
   让坐在地上的黑狗进入画面中央（01 图里狗在门缝光下方）。 */
@media (max-aspect-ratio:3/4){
  #intro .bg{background-position:54% 62%;filter:brightness(.78) saturate(.86) contrast(1.05);}
  #intro::before{background:
    linear-gradient(180deg, rgba(2,4,7,.56) 0%, rgba(2,4,7,.14) 26%, rgba(2,4,7,.04) 46%, rgba(2,4,7,.26) 74%, rgba(1,2,4,.70) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.42) 100%);}
}

/* v20.2.0：竖屏走 HERO-01P（9:16 竖版封面），居中即可，不再靠 position 硬挪 */
@media (max-aspect-ratio:3/4){
  #intro .bg{background-position:50% 50%;}
}

/* =====================================================================
   v20.2.0 白天等待界面 —— 同一间地下室，五段状态（STORY_AND_CHARACTER_PLAN）
   ---------------------------------------------------------------------
   底图恒为 DAY-01（白天 / 一个人 / 一条狗 / 同一地下室），只叠加桌面物件
   与光线：撕裂照片（第 6 天起）→ 水洼第二道影子（第 11 天起）→
   一盏未点燃的灯（第 17 天起）→ 第 25 天整体转向门（暖红压角）。
   评审红线：禁止每天换完全不同的背景，否则故事失去连续性。
   ===================================================================== */
#scene .dwFx{position:absolute;inset:0;pointer-events:none;z-index:1}
#scene .dwFx i{position:absolute;display:none;font-style:normal}

/* 桌面那张家庭照片：缺了一角（第 6 天起常在） */
#scene .dwFx .fxPhoto{right:15%;top:24%;width:11.5%;height:14.5%;
  background:linear-gradient(165deg,#dbd0b7 0%,#ada086 58%,#7e735e 100%);
  box-shadow:0 5px 16px rgba(0,0,0,.64);
  clip-path:polygon(0 0,100% 0,100% 74%,81% 100%,0 100%);
  transform:rotate(-4deg);animation:dwPhotoIn 1.5s ease .2s both;}
#scene .dwFx .fxPhoto::after{content:'';position:absolute;left:20%;top:20%;width:60%;height:64%;
  background:radial-gradient(52% 32% at 50% 22%,rgba(56,46,36,.82),transparent 72%),
             radial-gradient(66% 40% at 50% 86%,rgba(56,46,36,.74),transparent 74%);
  filter:blur(1.2px);}
@keyframes dwPhotoIn{0%{opacity:0;transform:rotate(-4deg) translateY(-9px)}100%{opacity:.88;transform:rotate(-4deg) translateY(0)}}

/* 水洼里多出来的第二道影子（不解释那是谁的） */
#scene .dwFx .fxShadow{left:29%;bottom:8%;width:31%;height:12%;
  background:radial-gradient(52% 52% at 50% 50%,rgba(8,10,14,.9),rgba(8,10,14,.36) 60%,transparent 78%);
  filter:blur(3px);animation:dwShadowIn 2.6s ease .4s both;}
@keyframes dwShadowIn{0%{opacity:0;transform:scale(.86)}100%{opacity:.74;transform:scale(1)}}

/* 玩家和旺财之间，多出一盏没点过的灯 */
#scene .dwFx .fxLamp{left:45%;bottom:23%;width:8.5%;height:13%;
  background:linear-gradient(180deg,rgba(128,112,86,.62),rgba(58,52,42,.9));
  clip-path:polygon(26% 0,74% 0,100% 100%,0 100%);
  box-shadow:inset 0 0 10px rgba(0,0,0,.74);animation:dwLampIn 1.8s ease .5s both;}
#scene .dwFx .fxLamp::after{content:'';position:absolute;left:50%;top:-13%;width:30%;height:10%;
  transform:translateX(-50%);background:rgba(140,122,92,.64);border-radius:1px;}
@keyframes dwLampIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:.86;transform:translateY(0)}}

#scene .dwFx[data-act="2"] .fxPhoto,
#scene .dwFx[data-act="3"] .fxPhoto,
#scene .dwFx[data-act="4"] .fxPhoto,
#scene .dwFx[data-act="5"] .fxPhoto{display:block}
#scene .dwFx[data-act="3"] .fxShadow,
#scene .dwFx[data-act="4"] .fxShadow,
#scene .dwFx[data-act="5"] .fxShadow{display:block}
#scene .dwFx[data-act="4"] .fxLamp,
#scene .dwFx[data-act="5"] .fxLamp{display:block}

/* 第 25 天（最后一夜）：人和狗都不坐桌边了 —— 暖红压角，全屋朝向门 */
#scene .dwFx[data-act="5"]{box-shadow:inset 0 0 110px rgba(126,34,22,.26)}

/* ===== v20.2.0 角色差异（MASTER_OWNER_PLAN「角色」）===== */
/* 「你是谁」页：职业档案 —— 选了人就知道随身带什么、拿手什么、耳朵听得见什么 */
#sex .sexopt .pj{margin-top:4px;font-size:10.5px;letter-spacing:1px;color:#a08b6a}
#sex .sexopt.on .pj,#sex .sexopt.sel .pj{color:#d9b56c}
#sex .pcard{margin:14px auto 0;width:min(94%,460px);padding:12px 14px;border-radius:6px;
  border:1px solid rgba(201,162,78,.28);background:rgba(14,17,22,.62);text-align:left;
  opacity:0;transition:opacity .35s;}
#sex .pcard.on{opacity:1}
#sex .pcard .pcJob{font-size:13px;letter-spacing:2px;color:#d9b56c}
#sex .pcard .pcWho{margin-top:6px;font-size:11.5px;line-height:1.75;color:#9aa3ad}
#sex .pcard .pcRow{margin-top:6px;font-size:11.5px;line-height:1.7;color:#c6cdd6}
#sex .pcard .pcK{display:inline-block;min-width:36px;color:#7d7466;font-style:normal;font-size:10.5px;letter-spacing:1px}
#sex .pcard em{font-style:normal}

/* 判门面板：职业线索（电工听机括 / 护士听换气）——给更细的耳朵，不给答案 */
#knockSfx .ksProf{display:none;margin-top:5px;font-size:10px;line-height:1.6;
  letter-spacing:.4px;color:#bfa77a;border-top:1px dashed rgba(201,162,78,.22);padding-top:4px;
  flex:1 1 100%;}
#knockSfx .ksProf.on{display:block}
#knockSfx .ksProf::before{content:'你的耳朵 · ';color:#7d7466}

/* =====================================================================
   v20.3.0 选角页与剧情人物统一（V6 CHARACTER_CONSISTENCY_SPEC）
   ---------------------------------------------------------------------
   选角卡换成包里的透明立绘（带 7 帧呼吸待机）；剧情内 basePerson 走同一套图。
   验收要求："男女主的发型、脸型、主色、服装轮廓和道具至少有四项完全连续"。
   ===================================================================== */
#sex .sexopt .fig{height:206px}
#sex .sexopt .fig img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.7));}
/* 剧情内立绘：竖版全身，底部对齐人物基准线 */
#basePerson .plImg{height:100%;width:auto;object-fit:contain;object-position:bottom center;}

/* =====================================================================
   v20.3.0 天气覆盖层（V6 OUTDOOR_WEATHER_EVENT_SYSTEM）
   ---------------------------------------------------------------------
   在背景图之上、HTML 文字之下；pointer-events:none；只做淡入不做位移，
   避免"整页跟着抖"。雨/雾/风叶是循环动画 webp。
   ===================================================================== */
#wxLayer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  transition:opacity .6s ease;}
#wxLayer img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;pointer-events:none;
  opacity:0;transition:opacity .6s ease;mix-blend-mode:screen;}
#wxLayer img.on{opacity:.46}

/* ★ v8 RENDERING_BUG_FIX —— 全站防「重复弧线」兜底
   根因：动态资源（GIF/动画 webp）被写进 background-image，浏览器按容器尺寸平铺，
   整屏出现重复的米色弧线（见 qa/repeated_arcs_bug_reference.png）。
   兜底三条：① 任何叠加层不得重复绘制；② 缩放必须铺满而不是原始尺寸；
   ③ 移动端禁止 background-size:auto（iOS 会退化成原图平铺）。 */
#stage .photoOn,#scene .photoOn,#stage .vign,#scene .vign,
#stage [class*="overlay"],#scene [class*="overlay"]{
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;}
#wxLayer,#wxLayer img,#stage canvas,#scene canvas{background-repeat:no-repeat;overflow:hidden;}
@media (max-width:900px){
  #wxLayer img,#stage .photoOn,#scene .photoOn{background-size:100% 100% !important;}
}


/* =====================================================================
   v20.4.0 四档镇宅物 · 全屏图文卡（V8 ASSET_GENERATION_BRIEF「全屏图文卡」）
   ---------------------------------------------------------------------
   卡框用包里 relic_*_card（矢量卡面），文字全部由 HTML/CSS 叠加（图里没有字）。
   一次性动效：卡体浮起 + 一道光扫过 —— animation 只播 1 次，不常驻不平铺。
   底图严格 no-repeat + 100% 100%（RENDERING_BUG_FIX）。
   ===================================================================== */
#relicCard{position:fixed;inset:0;z-index:240;display:none;align-items:center;justify-content:center;
  pointer-events:none;}
#relicCard.on{display:flex;pointer-events:auto;}
#relicCard .rcVeil{position:absolute;inset:0;background:rgba(4,5,8,.86);}
#relicCard .rcFrame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,720px);height:auto;max-height:86vh;object-fit:contain;
  background-repeat:no-repeat;background-size:100% 100%;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,.85));
  animation:rcIn .62s cubic-bezier(.2,.9,.25,1) 1 both;}
@keyframes rcIn{0%{opacity:0;transform:translate(-50%,-46%) scale(.94)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#relicCard .rcInner{position:relative;z-index:3;width:min(84vw,600px);max-height:78vh;overflow:auto;
  padding:26px 22px;text-align:center;}
#relicCard .rcTier{font-size:11px;letter-spacing:4px;color:#c9a24e;}
#relicCard .rcName{margin-top:10px;font-size:25px;letter-spacing:6px;color:#f2e8d1;
  text-shadow:0 2px 18px rgba(0,0,0,.9);}
#relicCard .rcChain{margin-top:14px;font-size:11.5px;letter-spacing:1.4px;color:#a89a7c;}
#relicCard .rcText{margin-top:16px;font-size:13px;line-height:2;color:#c6cdd6;white-space:pre-line;}
#relicCard .rcActs{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:10px;}
#relicCard .rcBtn{width:min(100%,320px);padding:12px 16px;font-family:inherit;font-size:13.5px;
  letter-spacing:2.6px;color:#d6cdb8;cursor:pointer;border-radius:2px;
  border:1px solid rgba(201,162,78,.34);background:rgba(18,20,26,.72);
  transition:border-color .25s,background .25s,color .25s;}
#relicCard .rcBtn:hover{border-color:#e2c98c;color:#fff;background:rgba(52,44,27,.8);}
#relicCard .rcBtn.rcMain{border-color:rgba(226,201,140,.7);color:#f2e8d1;background:rgba(62,49,27,.9);}
/* 一次性光扫（只播一次，播完留在终态，不成环） */
#relicCard .rcSweep{position:absolute;inset:0;pointer-events:none;z-index:4;
  background:linear-gradient(105deg,transparent 42%,rgba(226,201,140,.13) 50%,transparent 58%);
  background-repeat:no-repeat;background-size:100% 100%;
  animation:rcSweep 1.15s ease-out .18s 1 both;}
@keyframes rcSweep{0%{opacity:0;transform:translateX(-42%)}35%{opacity:1}100%{opacity:0;transform:translateX(42%)}}
@media (max-height:640px){
  #relicCard .rcInner{padding:16px 14px}
  #relicCard .rcName{font-size:20px;letter-spacing:4px}
  #relicCard .rcText{font-size:12px;line-height:1.85}
}

/* v20.4.0 镇物卡可读性修正：卡框是矢量卡面（圆+弧线），
   文字必须压在独立底色上，否则会和卡面图形叠在一起看不清。 */
#relicCard .rcInner{
  background:linear-gradient(180deg,rgba(6,7,10,.88) 0%,rgba(6,7,10,.94) 100%);
  border:1px solid rgba(201,162,78,.20);border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.7);
}
#relicCard .rcFrame{opacity:.9}
#relicCard .rcChain{color:#9c9078;letter-spacing:1.6px;}


/* v20.4.0 出门天气卡（V8 四张户外图的示意用法）——
   小尺寸、圆角、暗底描边；只走 <img>，background 不参与。 */
#wxCard{position:fixed;right:10px;top:calc(56px + env(safe-area-inset-top,0px));z-index:118;
  width:96px;padding:5px;border-radius:6px;display:none;flex-direction:column;gap:4px;
  background:rgba(8,10,14,.72);border:1px solid rgba(201,162,78,.24);
  backdrop-filter:blur(3px);pointer-events:none;overflow:hidden;}
#wxCard.on{display:flex;animation:wxCardIn .5s ease 1 both;}
#wxCard img{display:block;width:100%;height:auto;border-radius:4px;object-fit:cover;}
#wxCard span{font-size:9.5px;letter-spacing:1.6px;color:#a89a7c;text-align:center;}
@keyframes wxCardIn{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}
@media (min-width:900px){ #wxCard{width:132px;} }


/* =====================================================================
   v20.5.0 AI 回声导演面板（布局按 ai_echo_panel_v9.png 线框）
   ---------------------------------------------------------------------
   结构：标题行 → 八行输入 → 输出区 → 三分钟节点 → 回声日志。
   背景用 ai_echo_keyart_v9.png（<img>，不用 background-image）。
   ===================================================================== */
#echoPanel{position:fixed;inset:0;z-index:250;display:none;align-items:center;justify-content:center;}
#echoPanel.on{display:flex;}
#echoPanel .epVeil{position:absolute;inset:0;background:rgba(4,5,8,.88);}
#echoPanel .epArt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.17;
  pointer-events:none;overflow:hidden;}
#echoPanel .epCard{position:relative;z-index:3;width:min(92vw,540px);max-height:88vh;overflow:auto;
  padding:20px 18px;border-radius:8px;border:1px solid rgba(201,162,78,.34);
  background:linear-gradient(180deg,rgba(10,12,17,.96),rgba(7,9,13,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.85);}
#echoPanel .epHead{border-bottom:1px solid rgba(201,162,78,.22);padding-bottom:11px;}
#echoPanel .epHead b{display:block;font-size:12px;letter-spacing:5px;color:#c9a24e;font-weight:400;}
#echoPanel .epHead span{display:block;margin-top:6px;font-size:12px;line-height:1.7;color:#8c8676;}
#echoPanel .epRow,#echoPanel .epFlowRow{display:flex;justify-content:space-between;gap:10px;
  padding:8px 10px;margin-top:7px;border-radius:5px;background:rgba(22,26,34,.72);
  border:1px solid rgba(120,85,60,.28);font-size:12px;}
#echoPanel .epRow .k,#echoPanel .epFlowRow .k{color:#8f8778;letter-spacing:1px;flex:0 0 auto;}
#echoPanel .epRow .v,#echoPanel .epFlowRow .v{color:#dfe5ea;text-align:right;word-break:break-word;}
#echoPanel .epOut{margin-top:14px;padding:13px;border-radius:6px;
  background:linear-gradient(180deg,rgba(92,34,28,.42),rgba(40,18,16,.5));
  border:1px solid rgba(180,86,64,.45);}
#echoPanel .epOutHead{font-size:11.5px;letter-spacing:2px;color:#e0a06a;}
#echoPanel .epOutTxt{margin-top:9px;font-size:12.5px;line-height:2;color:#e6ddd1;}
#echoPanel .epOutTxt b{color:#f0d9a8;font-weight:400;}
#echoPanel .epOutTxt b.hi{color:#e07a5f;}
#echoPanel .epOutTxt b.lo{color:#7fb98d;}
#echoPanel .epFired{margin-top:10px;font-size:10.5px;letter-spacing:1.2px;color:#8a7f6d;}
#echoPanel .epFb{font-style:normal;margin-left:8px;font-size:10px;color:#c9a24e;
  border:1px solid rgba(201,162,78,.4);border-radius:3px;padding:1px 5px;}
#echoPanel .epFlowHead{margin-top:14px;padding-top:11px;border-top:1px solid rgba(201,162,78,.18);
  font-size:11px;letter-spacing:2.4px;color:#a89a7c;}
#echoPanel .epLogRow{margin-top:8px;padding:9px 10px;border-radius:5px;font-size:11px;line-height:1.8;
  color:#9aa3ad;background:rgba(18,21,28,.7);border:1px solid rgba(90,100,120,.24);}
#echoPanel .epLv{color:#c6cdd6;}
#echoPanel .epBtn{display:block;width:100%;margin-top:16px;padding:12px;font-family:inherit;
  font-size:13px;letter-spacing:3px;color:#e6ddd1;cursor:pointer;border-radius:4px;
  border:1px solid rgba(226,201,140,.5);background:rgba(46,38,24,.85);}
#echoPanel .epBtn:hover{background:rgba(74,58,32,.92);color:#fff;}

/* 判门面板上的 AI 回声条 */
#knockSfx .ksEcho{display:none;margin-top:5px;font-size:10px;line-height:1.7;letter-spacing:.3px;
  color:#8f9aa6;border-top:1px dashed rgba(201,162,78,.22);padding-top:5px;flex:1 1 100%;}
#knockSfx .ksEcho.on{display:block}
#knockSfx .ksEcho b{color:#c9a24e;font-weight:400;}
#knockSfx .ksEcho i{font-style:normal;color:#dfe5ea;letter-spacing:3px;}
#knockSfx .ksEcho .fb{color:#a89a7c;}


/* =====================================================================
   v21.0.0 狗互动面板（V13 狗羁绊）
   立绘唯一入口（中华田园犬）+ 动作符号层（DOGSYM 动画，只走 <img>）+
   「{名字}」：{动作} · {声音} 字幕 + 六互动按钮 + 信任条
   ===================================================================== */
#dogPanel{position:fixed;inset:0;z-index:245;display:none;align-items:center;justify-content:center;}
#dogPanel.on{display:flex;}
#dogPanel .dpVeil{position:absolute;inset:0;background:rgba(4,5,8,.88);}
#dogPanel .dpCard{position:relative;z-index:3;width:min(92vw,460px);max-height:90vh;overflow:auto;
  padding:18px 16px;border-radius:8px;border:1px solid rgba(201,162,78,.32);
  background:linear-gradient(180deg,rgba(10,12,17,.97),rgba(7,9,13,.99));}
#dogPanel .dpHead{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid rgba(201,162,78,.2);padding-bottom:9px;}
#dogPanel .dpHead b{font-size:19px;letter-spacing:4px;color:#e8d9b0;font-weight:400;}
#dogPanel .dpHead span{font-size:11px;letter-spacing:2px;color:#a89a7c;}
#dogPanel .dpStage{position:relative;height:190px;margin-top:12px;display:flex;align-items:flex-end;justify-content:center;
  border-radius:6px;background:rgba(16,19,25,.72);overflow:hidden;}
#dogPanel .dpStage img#dpDog{height:92%;width:auto;object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.75));}
#dogPanel .dpStage img#dpSym{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s;pointer-events:none;mix-blend-mode:screen;}
#dogPanel .dpStage img#dpSym.on{opacity:.85;}
#dogPanel .dpCaption{margin-top:10px;font-size:13px;letter-spacing:1px;color:#dfe5ea;text-align:center;}
#dogPanel .dpBondBar{margin-top:9px;height:4px;border-radius:2px;background:rgba(201,162,78,.14);overflow:hidden;}
#dogPanel .dpBondBar i{display:block;height:100%;width:0%;border-radius:2px;
  background:linear-gradient(90deg,#a9803e,#e2c98c);transition:width .5s ease;}
#dogPanel .dpActs{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#dogPanel .dpAct{padding:10px;font-family:inherit;text-align:left;cursor:pointer;border-radius:5px;
  border:1px solid rgba(201,162,78,.3);background:rgba(20,24,31,.8);color:#d6cdb8;}
#dogPanel .dpAct:hover{border-color:#e2c98c;background:rgba(48,40,26,.9);}
#dogPanel .dpAct b{display:block;font-size:13px;letter-spacing:2px;font-weight:400;color:#e8d9b0;}
#dogPanel .dpAct span{display:block;margin-top:3px;font-size:10.5px;color:#8f8778;line-height:1.6;}
#dogPanel .dpPerk{margin-top:11px;font-size:11px;line-height:1.8;color:#bfa77a;white-space:pre-line;}
#dogPanel .dpBtn{display:block;width:100%;margin-top:13px;padding:11px;font-family:inherit;
  font-size:12.5px;letter-spacing:3px;color:#e6ddd1;cursor:pointer;border-radius:4px;
  border:1px solid rgba(226,201,140,.5);background:rgba(46,38,24,.85);}
#dogPanel .dpBtn:hover{background:rgba(74,58,32,.92);color:#fff;}


/* =====================================================================
   v21.0.0 桌面 UI（V14 DESKTOP_UI_FINAL_V14 + TITLE_LOGO_SYSTEM_V14）
   ===================================================================== */
/* 标题：开场只用 LOGO SVG，不再用白色系统字体写标题 */
#intro .ttl{font-size:0}
#intro .ttl .sr{display:none}
#intro .ttlLogo{display:block;width:min(86vw,560px);height:auto;margin:0 auto;
  filter:drop-shadow(0 14px 44px rgba(0,0,0,.8));}
#intro .sub{display:none}   /* 副标题固定为 SVG 内的「你听见的，可能不是人」，不重复 */
#intro .ttl::after{display:none}

/* 游戏内左上角字标 */
#miniLogo{position:fixed;left:12px;top:calc(8px + env(safe-area-inset-top,0px));z-index:118;
  width:96px;height:auto;opacity:.6;pointer-events:none;display:none;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.7));}
body[data-ingame="1"] #miniLogo{display:block}
@media (min-width:900px){ #miniLogo{width:132px;} }

/* 右上角 ×（游戏中固定可见；底部不放返回按钮） */
#gameExit{position:fixed;right:12px;top:calc(8px + env(safe-area-inset-top,0px));z-index:180;
  width:38px;height:38px;border-radius:50%;font-size:17px;line-height:1;cursor:pointer;
  color:#c9c2b2;background:rgba(14,17,22,.74);border:1px solid rgba(201,162,78,.3);
  display:none;align-items:center;justify-content:center;}
body[data-ingame="1"] #gameExit{display:flex}
#gameExit:hover{color:#fff;border-color:#e2c98c;background:rgba(52,44,27,.9);}

/* × 三项确认 */
#exitConfirm{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;}
#exitConfirm.on{display:flex;}
#exitConfirm .ecVeil{position:absolute;inset:0;background:rgba(3,4,6,.82);}
#exitConfirm .ecCard{position:relative;z-index:2;width:min(88vw,340px);padding:20px 18px;
  border-radius:8px;border:1px solid rgba(201,162,78,.34);
  background:linear-gradient(180deg,rgba(10,12,17,.98),rgba(7,9,13,.99));text-align:center;}
#exitConfirm .ecHead{font-size:14px;letter-spacing:3px;color:#e8d9b0;margin-bottom:14px;}
#exitConfirm .ecBtn{display:block;width:100%;padding:12px;margin-top:9px;font-family:inherit;
  font-size:13px;letter-spacing:2.6px;color:#d6cdb8;cursor:pointer;border-radius:4px;
  border:1px solid rgba(201,162,78,.3);background:rgba(20,24,31,.85);}
#exitConfirm .ecBtn:hover{border-color:#e2c98c;color:#fff;}
#exitConfirm .ecBtn.ecMain{border-color:rgba(226,201,140,.62);color:#f2e8d1;background:rgba(52,42,26,.9);}

/* 桌面（≥900px）：观察选项横向铺开 · 按角色能力分组三列；声音条不再纵向一字排开 */
@media (min-width:900px){
  #choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;align-items:stretch;}
  #choices button,#choices .opt{width:100%;margin:0 !important;box-sizing:border-box;}
  /* 叙事文本固定行高，超出内容滚动（不挤压选项区） */
  #narrative,#textzone{max-height:34vh;overflow:auto;}
  /* 状态左置窄栏：把 HUD 状态信息约束为窄栏宽度，主内容不再被顶开 */
  #hud .left{max-width:240px;}
  /* 右侧常驻面板固定高度内部滚动（随身记 / 线索 / 镇宅物） */
  #cluePanel{max-height:72vh;overflow:auto;}
}

/* v21.0.0：黑狗立绘在深底上不可见 —— 给狗舞台加一圈暖底光（与游戏内光圈一致） */
#dogPanel .dpStage{
  background:radial-gradient(60% 72% at 50% 62%, rgba(196,150,88,.28), rgba(120,88,52,.12) 55%, rgba(12,14,18,.9) 100%),
             rgba(16,19,25,.72);
}
#dogPanel .dpStage img#dpDog{filter:drop-shadow(0 8px 20px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(196,150,88,.22));}