/* ═══════════════════════════════════════════
   游戏画面 — 舞台 / 背景 / 立绘 / 对话框
   ═══════════════════════════════════════════ */

.game-screen{background:var(--ink-950);overflow:hidden;}

.stage{
  position:absolute;inset:0;
  overflow:hidden;
  cursor:pointer;
  /* 对话框占位高度：立绘底部不上重叠，人物站在对话框上方 */
  --msgbox-safe:clamp(150px,25vh,206px);
  /* 16:9 安全构图基准 */
  container-type:size;
}

/* ── 背景（双层交叉淡入） ── */
.bg-layer{
  position:absolute;inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .9s var(--ease),filter .9s var(--ease),transform 9s linear;
  will-change:opacity,transform;
  transform:scale(1.02);
}
.bg-layer.on{opacity:1;}
.bg-layer.slow-zoom{transform:scale(1.09);}

.vignette{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    radial-gradient(115% 88% at 50% 42%,transparent 42%,rgba(3,3,8,.55) 100%),
    linear-gradient(180deg,rgba(3,3,8,.42) 0%,transparent 26%,transparent 52%,rgba(3,3,8,.55) 100%);
}

/* ── 程序化背景（无图时的占位景） ──
   每个 .bg--xxx 用多层渐变画出可辨认的场景光感 */
.bg-scene{
  position:absolute;inset:0;
  transition:opacity .9s var(--ease);
}

/* 宿舍 · 白天 */
.bg--dorm-day{
  background:
    radial-gradient(60% 48% at 74% 22%,rgba(255,242,208,.55),transparent 62%),
    linear-gradient(180deg,#c9d7e4 0%,#dfe6e6 34%,#cbbfa8 34.5%,#b8a68d 100%);
}
/* 宿舍 · 黄昏 */
.bg--dorm-dusk{
  background:
    radial-gradient(58% 52% at 78% 26%,rgba(255,178,110,.62),transparent 64%),
    radial-gradient(80% 60% at 20% 90%,rgba(96,64,86,.5),transparent 60%),
    linear-gradient(180deg,#5a4a68 0%,#9c6e70 38%,#7a5744 62%,#3d2f38 100%);
}
/* 宿舍 · 夜 */
.bg--dorm-night{
  background:
    radial-gradient(46% 40% at 72% 30%,rgba(120,150,210,.34),transparent 66%),
    radial-gradient(70% 50% at 26% 96%,rgba(40,50,84,.6),transparent 64%),
    linear-gradient(180deg,#0c1122 0%,#141a30 44%,#0a0d18 100%);
}
/* 走廊 */
.bg--hall{
  background:
    radial-gradient(50% 60% at 50% 42%,rgba(206,220,236,.4),transparent 70%),
    linear-gradient(180deg,#aebac6 0%,#9aa6b2 40%,#7c8794 100%);
}
/* 教室 · 白天 */
.bg--class-day{
  background:
    radial-gradient(56% 50% at 30% 22%,rgba(255,250,224,.68),transparent 68%),
    linear-gradient(180deg,#d6e2ea 0%,#e8e7dc 40%,#c8b89c 40.5%,#a8927a 100%);
}
/* 教室 · 放学后 */
.bg--class-dusk{
  background:
    radial-gradient(60% 54% at 26% 30%,rgba(255,156,96,.6),transparent 66%),
    linear-gradient(180deg,#6c5670 0%,#a4736c 42%,#8a6448 70%,#40323c 100%);
}
/* 天台 */
.bg--roof{
  background:
    radial-gradient(70% 52% at 50% 18%,rgba(180,214,255,.62),transparent 64%),
    linear-gradient(180deg,#8fb8e0 0%,#c3d8ea 46%,#cfc4ae 46.5%,#94887a 100%);
  background-blend-mode:normal;
}
/* 天台 · 落日 */
.bg--roof-sunset{
  background:
    radial-gradient(52% 44% at 50% 62%,rgba(255,204,120,.85),transparent 60%),
    radial-gradient(80% 60% at 50% 100%,rgba(214,110,96,.6),transparent 66%),
    linear-gradient(180deg,#3b3b6e 0%,#8d5f88 34%,#d98a6a 62%,#5a3f47 100%);
}
/* 樱花树下 */
.bg--sakura{
  background:
    radial-gradient(56% 46% at 50% 16%,rgba(255,222,234,.8),transparent 66%),
    radial-gradient(80% 60% at 20% 84%,rgba(120,150,120,.5),transparent 62%),
    linear-gradient(180deg,#bfd3e8 0%,#e3d3d8 42%,#8d9a7a 42.5%,#5c6650 100%);
}
/* 河堤 */
.bg--river{
  background:
    radial-gradient(60% 40% at 50% 24%,rgba(255,235,200,.6),transparent 66%),
    linear-gradient(180deg,#a9c4dd 0%,#d3dde2 36%,#7f9179 36.5%,#4d5c4a 100%);
}
/* 商店街 */
.bg--street{
  background:
    radial-gradient(40% 34% at 22% 30%,rgba(255,206,140,.5),transparent 66%),
    radial-gradient(40% 34% at 78% 34%,rgba(150,200,255,.4),transparent 66%),
    linear-gradient(180deg,#2c3244 0%,#3c3a44 40%,#22242e 100%);
}
/* 屋顶 · 深夜 */
.bg--roof-night{
  background:
    radial-gradient(50% 44% at 62% 20%,rgba(150,176,255,.34),transparent 66%),
    radial-gradient(60% 40% at 50% 100%,rgba(60,50,90,.66),transparent 64%),
    linear-gradient(180deg,#070a18 0%,#101528 48%,#06070d 100%);
}
/* 白屏 / 回忆 */
.bg--white{
  background:linear-gradient(180deg,#f7f5ef,#e6e2d8);
}
.bg--black{background:#04040a;}
/* 心象空间（巩莉） */
.bg--spirit{
  background:
    radial-gradient(46% 40% at 50% 44%,rgba(230,203,146,.3),transparent 66%),
    radial-gradient(80% 60% at 50% 60%,rgba(90,80,140,.5),transparent 70%),
    linear-gradient(180deg,#0a0a16 0%,#161228 46%,#07060e 100%);
}

/* ── 立绘 ── */
.char-layer{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
}
.char{
  position:absolute;
  bottom:var(--msgbox-safe);
  height:calc(100% - var(--msgbox-safe) - 1%);
  max-height:80vh;
  transform-origin:bottom center;
  opacity:0;
  transition:opacity .5s var(--ease),transform .5s var(--ease-out),filter .45s var(--ease);
  will-change:opacity,transform,filter;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));
}
.char img{height:100%;width:auto;display:block;object-fit:contain;object-position:bottom;}

/* 位置 */
.char.pos-c{left:50%;transform:translateX(-50%) translateY(18px);}
.char.pos-l{left:14%;transform:translateX(-50%) translateY(18px);}
.char.pos-r{left:86%;transform:translateX(-50%) translateY(18px);}
.char.pos-far-l{left:4%;transform:translateX(0) translateY(18px);}
.char.pos-far-r{right:4%;left:auto;transform:translateY(18px);}

.char.on{opacity:1;}
.char.pos-c.on{transform:translateX(-50%) translateY(0);}
.char.pos-l.on{transform:translateX(-50%) translateY(0);}
.char.pos-r.on{transform:translateX(-50%) translateY(0);}
.char.pos-far-l.on,.char.pos-far-r.on{transform:translateY(0);}

/* 非发言者压暗 */
.char.dim{filter:brightness(.52) saturate(.75) drop-shadow(0 20px 40px rgba(0,0,0,.5));}
.char.dim.on{transform:translateX(-50%) translateY(0) scale(.985);}
.char.pos-far-l.dim.on,.char.pos-far-r.dim.on{transform:translateY(0) scale(.985);}

/* 注意力：轻微前推 */
.char.focus.on{transform:translateX(-50%) translateY(0) scale(1.015);}
.char.pos-far-l.focus.on,.char.pos-far-r.focus.on{transform:translateY(0) scale(1.015);}

/* 立绘缺失时的占位剪影 */
.char-fallback{
  height:100%;width:min(46vh,300px);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:8%;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.02) 40%,rgba(255,255,255,.05) 100%);
  border-radius:46% 46% 0 0 / 28% 28% 0 0;
  border:1px dashed rgba(230,203,146,.16);
  border-bottom:0;
}
.char-fallback span{
  font-family:var(--font-serif);
  font-size:13px;letter-spacing:.3em;
  color:rgba(230,203,146,.42);
  writing-mode:vertical-rl;
  margin-bottom:18%;
}

/* ── 顶部快捷条 ── */
.quickbar{
  position:absolute;top:0;right:0;z-index:6;
  display:flex;gap:0;
  padding:max(10px,env(safe-area-inset-top)) 14px 0 0;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease-out);
  pointer-events:none;
}
.stage:hover .quickbar,
.quickbar.pin{opacity:1;transform:none;pointer-events:auto;}
.quickbar button{
  padding:7px 11px;
  font-size:10.5px;letter-spacing:.14em;
  color:rgba(234,231,223,.52);
  border-radius:6px;
  transition:.24s var(--ease);
  white-space:nowrap;
}
.quickbar button:hover{color:var(--gold);background:rgba(230,203,146,.1);}
.quickbar button.active{color:var(--gold);background:rgba(230,203,146,.16);}

/* ── 对话框 ── */
.msgbox{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:0 clamp(10px,3.4vw,52px) clamp(10px,2.2vh,22px);
  transition:opacity .38s var(--ease),transform .38s var(--ease-out);
}
.msgbox.hidden-ui{opacity:0;transform:translateY(24px);pointer-events:none;}

.msgbox-frame{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  max-width:1180px;margin:0 auto;
  min-height:clamp(140px,23vh,196px);
  padding:clamp(20px,2.6vh,30px) clamp(22px,3.6vw,46px) clamp(18px,2.4vh,26px);
  border-radius:10px;
  background:
    linear-gradient(180deg,rgba(12,13,24,.9) 0%,rgba(8,9,16,.94) 100%);
  border:1px solid rgba(230,203,146,.18);
  box-shadow:
    0 -2px 40px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 0 1px rgba(0,0,0,.55);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  overflow:visible;
}
/* 顶部金线 */
.msgbox-frame::before{
  content:"";position:absolute;left:clamp(22px,3.6vw,46px);right:clamp(22px,3.6vw,46px);top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,203,146,.55) 18%,rgba(230,203,146,.22) 52%,transparent);
}
/* 四角装饰 */
.msgbox-frame::after{
  content:"";position:absolute;inset:6px;border-radius:6px;pointer-events:none;
  border:1px solid rgba(255,255,255,.028);
}
.msgbox-edge{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(560px,60%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,203,146,.3),transparent);
  pointer-events:none;
}

/* 名牌 */
.nameplate{
  position:relative;
  align-self:flex-start;
  margin:0 0 10px clamp(2px,0.6vw,8px);
  padding:6px 22px 7px;
  border-radius:6px;
  background:linear-gradient(135deg,rgba(34,30,46,.98),rgba(20,18,30,.98));
  border:1px solid rgba(230,203,146,.34);
  box-shadow:0 6px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
  animation:plateIn .3s var(--ease-out) both;
  z-index:2;
}
@keyframes plateIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.nameplate span{
  font-family:var(--font-serif);
  font-size:clamp(13px,2.6vw,15.5px);
  letter-spacing:.2em;
  color:var(--gold);
  text-shadow:0 0 18px rgba(230,203,146,.35);
  white-space:nowrap;
}
/* 角色专属名牌色 */
.nameplate[data-c="futa"]{border-color:rgba(244,168,191,.42);}
.nameplate[data-c="futa"] span{color:#f6b8cc;text-shadow:0 0 18px rgba(244,168,191,.4);}
.nameplate[data-c="wulong"]{border-color:rgba(140,214,168,.4);}
.nameplate[data-c="wulong"] span{color:#9fe0b8;text-shadow:0 0 18px rgba(140,214,168,.36);}
.nameplate[data-c="jiemao"]{border-color:rgba(122,186,240,.42);}
.nameplate[data-c="jiemao"] span{color:#8fc6f2;text-shadow:0 0 18px rgba(122,186,240,.38);}
.nameplate[data-c="gongli"]{border-color:rgba(230,203,146,.5);}
.nameplate[data-c="gongli"] span{color:#f0dcb0;}
.nameplate[data-c="chen"]{border-color:rgba(255,255,255,.2);}
.nameplate[data-c="chen"] span{color:#d8d6d0;}
.nameplate[data-c="xiaohe"]{border-color:rgba(255,196,214,.36);}
.nameplate[data-c="xiaohe"] span{color:#ffcdda;}
.nameplate[data-c="xinba"]{border-color:rgba(180,200,255,.34);}
.nameplate[data-c="xinba"] span{color:#c3d3ff;}
.nameplate[data-c="tuolangpu"]{border-color:rgba(226,186,120,.4);}
.nameplate[data-c="tuolangpu"] span{color:#ecc98e;}
.nameplate[data-c="bed5"]{border-color:rgba(150,150,170,.3);}
.nameplate[data-c="bed5"] span{color:#a8a6b4;font-style:italic;}

/* 正文 */
.text-area{
  margin-top:0;
  max-height:clamp(96px,15vh,150px);
  overflow-y:auto;
  scrollbar-width:none;
}
.text-area::-webkit-scrollbar{display:none;}
.text{
  font-size:clamp(14px,2.9vw,17px);
  line-height:1.92;
  letter-spacing:.045em;
  color:#eeebe3;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
  word-break:break-word;
  white-space:pre-wrap;
}
/* 逐字动画的字符 */
.text .ch{opacity:0;display:inline;}
.text .ch.show{opacity:1;transition:opacity .12s linear;}

/* 独白样式（无名字的内心话） */
.text.mono{
  color:#c9c6d4;
  font-style:normal;
  font-family:var(--font-serif);
  letter-spacing:.06em;
}
/* 旁白 */
.text.narr{
  color:#a9a6b6;
  font-size:clamp(13px,2.6vw,15.5px);
  letter-spacing:.08em;
}
/* 强调词 */
.text em{
  font-style:normal;
  color:var(--gold);
  font-weight:500;
  text-shadow:0 0 16px rgba(230,203,146,.4);
}
.text strong{
  font-weight:600;
  color:#fff;
}
.text .ruby{
  font-size:.62em;
  color:var(--text-dim);
  letter-spacing:.1em;
}

/* 继续指示 */
.next-ind{
  position:absolute;right:clamp(20px,3vw,38px);bottom:clamp(14px,2vh,20px);
  display:flex;gap:5px;align-items:flex-end;
  opacity:0;transition:opacity .3s var(--ease);
}
.next-ind.on{opacity:1;}
.next-ind span{
  width:5px;height:5px;border-radius:50%;
  background:var(--gold);
  animation:indBounce 1.15s ease-in-out infinite;
}
.next-ind span:nth-child(2){animation-delay:.16s;opacity:.75;}
.next-ind span:nth-child(3){animation-delay:.32s;opacity:.5;}
@keyframes indBounce{
  0%,100%{transform:translateY(0);opacity:.35;}
  50%{transform:translateY(-5px);opacity:1;}
}

/* ── 选项 ── */
.choices{
  position:absolute;inset:0;z-index:7;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:clamp(10px,1.8vh,16px);
  padding:6vh 8vw;
  background:radial-gradient(90% 70% at 50% 50%,rgba(4,4,10,.5),rgba(4,4,10,.72));
  backdrop-filter:blur(2.5px);
  -webkit-backdrop-filter:blur(2.5px);
  animation:fadeIn .3s var(--ease) both;
}
.choice{
  position:relative;
  width:min(620px,84vw);
  padding:clamp(14px,2.2vh,19px) clamp(24px,4vw,40px);
  border-radius:8px;
  text-align:center;
  font-size:clamp(13.5px,2.8vw,15.5px);
  letter-spacing:.08em;
  line-height:1.6;
  color:rgba(238,235,227,.86);
  background:linear-gradient(135deg,rgba(24,26,42,.92),rgba(14,15,26,.95));
  border:1px solid rgba(230,203,146,.2);
  box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.045);
  transition:transform .3s var(--ease-out),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  animation:choiceIn .45s var(--ease-out) both;
  overflow:hidden;
}
.choice:nth-child(1){animation-delay:.04s;}
.choice:nth-child(2){animation-delay:.1s;}
.choice:nth-child(3){animation-delay:.16s;}
.choice:nth-child(4){animation-delay:.22s;}
@keyframes choiceIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.choice::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:width .4s var(--ease-out);
}
.choice:hover{
  transform:translateY(-2px);
  border-color:rgba(230,203,146,.55);
  color:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 1px rgba(230,203,146,.18),inset 0 1px 0 rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(38,32,34,.95),rgba(22,20,28,.97));
}
.choice:hover::before{width:70%;}
.choice:active{transform:translateY(0) scale(.995);}
/* 好感提示标记 */
.choice .aff{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:9px;letter-spacing:.1em;color:rgba(244,168,191,.5);
  font-family:var(--font-mono);
}

/* ── 章节标题卡 ── */
.chapter-card{
  position:absolute;inset:0;z-index:9;
  display:grid;place-items:center;
  background:rgba(3,3,8,.9);
  animation:fadeIn .6s var(--ease) both;
}
.chapter-card.out{animation:fadeOut .8s var(--ease) both;}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.cc-inner{text-align:center;animation:ccIn 1.2s var(--ease-out) both;}
@keyframes ccIn{from{opacity:0;transform:translateY(18px);filter:blur(8px);}to{opacity:1;transform:none;filter:none;}}
.cc-num{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.5em;text-indent:.5em;
  color:rgba(230,203,146,.6);
  margin-bottom:20px;
}
.cc-name{
  font-family:var(--font-serif);
  font-size:clamp(22px,5.6vw,34px);
  letter-spacing:.28em;text-indent:.28em;
  color:var(--paper);
  text-shadow:0 0 40px rgba(230,203,146,.3);
}
.cc-rule{
  width:0;height:1px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
  animation:ccRule 1.4s .35s var(--ease-out) both;
}
@keyframes ccRule{from{width:0;opacity:0;}to{width:min(260px,52vw);opacity:1;}}

/* ── 特效层 ── */
.fx-flash{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background:#fff;opacity:0;
}
.fx-flash.go{animation:flash .42s ease-out both;}
@keyframes flash{0%{opacity:.85;}100%{opacity:0;}}

.fx-fade{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background:#04040a;opacity:0;
  transition:opacity .6s var(--ease);
}
.fx-fade.on{opacity:1;}

/* 场景转换：黑场 + 文字 */
.fx-title-card{
  position:absolute;inset:0;z-index:9;
  display:grid;place-items:center;
  background:rgba(3,3,8,.88);
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease);
}
.fx-title-card.on{opacity:1;pointer-events:auto;}
.fx-title-card span{
  font-family:var(--font-serif);
  font-size:clamp(15px,3.4vw,20px);
  letter-spacing:.34em;text-indent:.34em;
  color:rgba(240,236,226,.9);
}

/* ── 回想 ── */
.backlog{align-items:stretch;padding:0;}
.backlog-inner{
  position:relative;
  width:100%;max-width:940px;margin:0 auto;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(10,11,20,.99),rgba(6,6,12,.99));
  height:100%;
  animation:panelIn .4s var(--ease-out) both;
}
.backlog-inner header{
  display:flex;justify-content:space-between;align-items:center;
  padding:max(20px,env(safe-area-inset-top)) 24px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.backlog-inner header h2{
  font-family:var(--font-serif);font-size:16px;font-weight:500;
  letter-spacing:.32em;text-indent:.32em;color:var(--paper);
}
.backlog-list{
  flex:1;overflow-y:auto;
  padding:20px clamp(18px,4vw,42px) 32px;
  scrollbar-width:thin;scrollbar-color:var(--gold-soft) transparent;
}
.backlog-list::-webkit-scrollbar{width:8px;}
.backlog-list::-webkit-scrollbar-thumb{background:var(--gold-soft);border-radius:99px;}
.bl-item{
  margin-bottom:20px;
  animation:blIn .3s var(--ease-out) both;
}
@keyframes blIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:none;}}
.bl-name{
  font-family:var(--font-serif);
  font-size:12.5px;letter-spacing:.16em;
  color:var(--gold);
  margin-bottom:6px;
}
.bl-name.mono{color:var(--text-faint);font-style:italic;}
.bl-text{
  font-size:13.5px;line-height:1.9;
  color:rgba(234,231,223,.8);
  padding-left:2px;
  border-left:2px solid rgba(230,203,146,.14);
  padding-left:14px;
}
.bl-text.narr{color:var(--text-faint);font-size:12.5px;}
.backlog-inner footer{
  padding:14px 24px max(16px,env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:center;
}
.backlog-inner footer button{
  padding:9px 26px;border-radius:99px;
  border:1px solid var(--gold-line);
  font-size:11.5px;letter-spacing:.16em;color:var(--text-dim);
  transition:.25s var(--ease);
}
.backlog-inner footer button:hover{color:var(--gold);border-color:var(--gold-soft);background:rgba(230,203,146,.08);}

/* ── 响应式 ── */
@media (max-width:640px){
  .msgbox{padding:0 8px 8px;}
  .msgbox-frame{min-height:36vh;padding:20px 18px 30px;border-radius:8px;}
  .stage{--msgbox-safe:39vh;}
  .nameplate{padding:5px 16px 6px;margin-bottom:8px;}
  .text{font-size:14.5px;line-height:1.88;}
  .text-area{max-height:24vh;}
  .quickbar{padding:8px 8px 0 0;}
  .quickbar button{padding:6px 8px;font-size:9.5px;letter-spacing:.08em;}
  .char{height:calc(100% - var(--msgbox-safe) - 1%);max-height:56vh;}
  .char.pos-l{left:22%;}
  .char.pos-r{left:78%;}
}

/* 横屏（游戏主形态） */
@media (orientation:landscape) and (max-height:560px){
  .msgbox-frame{min-height:124px;padding:16px 26px 20px;}
  .text{font-size:14px;line-height:1.82;}
  .text-area{max-height:82px;}
  .stage{--msgbox-safe:clamp(118px,26vh,150px);}
  .nameplate{padding:5px 18px 6px;margin-bottom:6px;}
  .char{height:calc(100% - var(--msgbox-safe) - 1%);max-height:78vh;}
}