/* 前篇修改 1.0: floating subtitles and a model-only inspection surface. */
.subtitle-shade{position:absolute;z-index:5;inset:auto 0 0;height:calc(var(--subtitle-area,270px) + 115px);pointer-events:none;background:linear-gradient(0deg,#0b1112f2 0%,#0b1112de 40%,#0b11129c 66%,#0b111200 100%)}
.dialogue-box{background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
.dialogue-box:before,.dialogue-box:after{display:none}
/* Narrative subtitles remain unframed, including after mouse or keyboard focus. */
#dialogueBox,#dialogueBox:focus,#dialogueBox:focus-visible,
#endingRoot .end-line,#endingRoot .end-line:focus,#endingRoot .end-line:focus-visible,
#chapterRoot #chapterDialogueButton,#chapterRoot #chapterDialogueButton:focus,#chapterRoot #chapterDialogueButton:focus-visible{outline:none!important;border:0!important;box-shadow:none!important}
#dialogueBox:focus-visible #nextHint,#chapterDialogueButton:focus-visible .chapter-dialogue-bottom,.end-line:focus-visible .end-next{text-decoration:underline;text-underline-offset:5px}
#speaker,.dialogue-box.thought #speaker,.dialogue-box .end-speaker{background:none;border:0;border-radius:0;box-shadow:none;text-align:left;padding:4px 0;min-width:0;color:#f4d3a0;font-size:25px;letter-spacing:4px;text-shadow:0 2px 5px #060b0f,0 0 16px #060b0f}
.dialogue-text,.dialogue-box.thought .dialogue-text{color:#fff9ed;text-shadow:0 2px 3px #030b10,0 0 12px #030b10d9}
.dialogue-bottom{color:#c4c7c1;text-shadow:0 1px 4px #061014}
.dialogue-bottom .diamond{color:#e7c28b}
.progress-track{height:1px;background:#efdeb333}
.dialogue-meta>span{background:none;border-color:transparent}
.play-footer{color:#d2d4c9}
.hand-art{mask-image:linear-gradient(0deg,transparent,#000 9%)}

.hand-modal{width:min(920px,94vw);height:min(780px,88svh);max-height:90svh;padding:0;overflow:hidden;border:1px solid #c9b68c70;border-radius:5px;background:radial-gradient(ellipse at 50% 38%,#9b9688,#696960 63%,#414943);box-shadow:0 25px 110px #071217bb}
.hand-modal .modal-head{position:absolute;top:15px;right:15px;z-index:2;padding:0;border:0}
.hand-modal .modal-head>div{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hand-modal .close-button{color:#fff3d9;background:#202927b8;border-color:#ded0ac70;width:42px;height:42px}
.hand-modal .modal-content{padding:0;width:100%;height:100%}
.hand-modal .modal-foot{display:none}
.silver-viewport{width:100%;height:calc(100% - 66px);touch-action:none;position:relative}
.silver-viewport canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-6px}
.silver-viewport[data-status=loading]:after{content:'';position:absolute;top:47%;left:calc(50% - 13px);width:26px;height:26px;border:2px solid #eadcb83b;border-top-color:#eadcb8;border-radius:50%;animation:model-load .9s linear infinite}
.model-controls{position:absolute;z-index:2;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:5px;padding:5px;background:#202927cc;border:1px solid #d5c49966;border-radius:3px}
.model-controls button{width:42px;height:40px;font-size:24px;color:#f5e7cb;border-radius:2px;line-height:1}
.model-controls button:hover{background:#f8e4b526;color:#fff}
.model-error{position:absolute;inset:35% 12% auto;text-align:center;font-size:14px;line-height:2;color:#fff5df}
@keyframes model-load{to{transform:rotate(360deg)}}
@media(max-width:799px){
  #speaker,.dialogue-box.thought #speaker,.dialogue-box .end-speaker{font-size:23px;letter-spacing:3px}
  .hand-modal{width:94vw;height:82svh;padding:0}
  .hand-modal .modal-head{top:11px;right:11px}
  .subtitle-shade{height:calc(var(--subtitle-area,310px) + 90px)}
}
@media(max-width:370px){#speaker,.dialogue-box.thought #speaker,.dialogue-box .end-speaker{font-size:21px}}
@media(prefers-reduced-motion:reduce){.silver-viewport[data-status=loading]:after{animation:none}}

/* Gate portraits share the chapter portraits' scale and the dialogue's gold baseline. */
#playScreen{--gate-portrait-height:min(84svh,calc(100svh - 112px),var(--gate-portrait-space,100svh))}
#playScreen>.portrait{
  bottom:var(--gate-portrait-bottom,58px);height:var(--gate-portrait-height);max-height:none;
  transform-origin:50% 100%;
}
#playScreen>.portrait.subordinate{height:calc(var(--gate-portrait-height) * .88)}
@media(max-width:799px){
  #playScreen{--gate-portrait-height:min(58svh,var(--gate-portrait-space,100svh))}
}