/* =====================================================
   gal痴拯救世界 · 样式表 v2.0
   主题：末日甜心（Apocalyptic Cute）
   规则：所有布局尺寸使用比例单位（vh/vw/%/em）
         禁止使用 px 做布局（边框线宽除外）
   ===================================================== */

/* ── CSS 变量 ─────────────────────────────────────── */
:root {
  --bg:          #f7f4ee;
  --bg-card:     #ffffff;
  --bg-hover:    #f0ebe2;
  --pink:        #c96f5d;
  --pink-glow:   rgba(201, 111, 93, 0.18);
  --purple:      #54708c;
  --red:         #cc5a43;
  --green:       #5e8b6f;
  --yellow:      #c89a3d;
  --text:        #22303c;
  --text-mid:    #5d6a75;
  --text-dim:    #8b96a0;
  --border:      rgba(84, 112, 140, 0.18);
  --font:        'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;

  /* 对话框高度 —— 全局变量，改这里其他层级自动适配 */
  --dlg-h:       28vh;
}

/* ── 重置 ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(13px, calc(0.6vw + 8px), 26px);  /* 根字号：全局比例基准，高分辨率自适应 */
}

button { cursor: pointer; font-family: var(--font); }
img { display: block; }

/* ── 屏幕系统 ─────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  animation: screenFadeIn 0.35s ease forwards;
}
.screen.active { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* 世界地图屏单独允许滚动 */
.screen-scroll {
  display: block !important;
  overflow-y: auto;
}
.screen-scroll.active { display: block; }

@keyframes screenFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 全屏背景图层 ──────────────────────────────────── */
.full-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.8s ease;
}

/* 世界地图背景固定（不因内容滚动而移动）*/
.wmap-fixed-bg {
  position: fixed;
  z-index: 0;
}

/* ── 遮罩层 ─────────────────────────────────────────── */
.full-overlay {
  position: absolute;
  inset: 0;
}
.overlay-dark       { background: rgba(247, 244, 238, 0.68); }
.overlay-dark-heavy { background: rgba(247, 244, 238, 0.82); position: fixed; }
.overlay-ending-bad { background: linear-gradient(160deg, rgba(255,245,241,0.92) 0%, rgba(247,244,238,0.96) 100%); }
.overlay-ending-good{ background: linear-gradient(160deg, rgba(240,248,243,0.94) 0%, rgba(247,244,238,0.98) 100%); }
.overlay-saved      { background: rgba(241, 247, 243, 0.9); }

/* ── 底部+四角暗角（约会屏专用）─────────────────── */
.bg-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(247,244,238,0.18) 0%, transparent 25%,
                    transparent 52%, rgba(247,244,238,0.62) 82%, rgba(247,244,238,0.92) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── 按钮 ─────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  border: none;
  padding: 0.75em 2.5em;
  border-radius: 2em;
  font-size: 1.05em;
  letter-spacing: 0.12em;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0.2em 1.2em rgba(255,110,180,0.35);
}
.btn-primary:hover {
  transform: translateY(-0.15em);
  box-shadow: 0 0.4em 1.8em rgba(255,110,180,0.55);
}
.btn-ghost {
  background: transparent;
  color: var(--text-mid);
  border: thin solid var(--text-dim);
  padding: 0.65em 2em;
  border-radius: 2em;
  font-size: 0.95em;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: var(--pink); color: var(--pink); }

/* ═════════════════════════════════════════════════════
   标题屏
   ===================================================== */
#screen-title {
  background: var(--bg);
  overflow: hidden;
}

/* ── 横屏布局 ─────────────────────────────────────── */
.title-landscape-wrap {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}
.title-img-box {
  position: relative;
  /* box tracks exact rendered size of the contained image */
  width: min(100vw, calc(100vh * 1535 / 1024));
  height: min(100vh, calc(100vw * 1024 / 1535));
}
.title-img-box .title-cover-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}
/* 边缘虚化：inset box-shadow 把图像四边渐融入背景色 */
.title-img-box::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 14vmin 7vmin var(--bg);
  pointer-events: none;
  z-index: 1;
}
.title-img-box .title-start-btn {
  position: absolute;
  left: 50%;
  top: 80%;
  z-index: 2;
  font-size: clamp(0.9em, 1.8vw, 1.1em);
}

/* ── 竖屏布局（全宽滚动，无黑边） ────────────────── */
.title-portrait-wrap {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.title-portrait-inner {
  position: relative;
  width: 100%;
}
.title-portrait-inner .title-cover-img {
  width: 100%;
  height: auto;
  display: block;
}
.title-portrait-inner .title-start-btn {
  position: absolute;
  left: 50%;
  top: 80%;
  z-index: 2;
  font-size: clamp(0.9em, 3.5vw, 1.1em);
}

/* ── 开始游戏按钮（高级胶囊动效）─────────────────── */
.title-start-btn {
  /* 位置：两个布局上下文共用 */
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.75em 3em;
  letter-spacing: 0.15em;
  font-weight: 600;

  /* 视觉：粉→紫渐变 + 内高光 + 柔和光晕 */
  background: linear-gradient(135deg, #FF9BB3 0%, #C58CFF 100%);
  box-shadow:
    0 8px 24px rgba(255, 140, 180, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.32);
  border: none;

  /* 过渡 */
  transition:
    transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 120ms,
    filter 120ms;
}

/* 内高光层 */
.title-start-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(175deg, rgba(255,255,255,0.22) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* Hover：放大 + 光环（用 box-shadow 外圈） */
.title-start-btn:hover {
  transform: translateX(-50%) scale(1.05);
  filter: brightness(1.07) saturate(1.08);
  box-shadow:
    0 12px 32px rgba(255, 140, 180, 0.42),
    0 0 0 6px rgba(255, 155, 179, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.32);
}

/* Press：缩小 + 去阴影 */
.title-start-btn:active {
  transform: translateX(-50%) scale(0.95);
  box-shadow: 0 2px 6px rgba(255, 140, 180, 0.12);
  filter: brightness(0.91);
  transition-duration: 60ms;
}

/* 弹起动画（JS 添加 class） */
@keyframes btnRelease {
  0%   { transform: translateX(-50%) scale(0.95); }
  55%  { transform: translateX(-50%) scale(1.07); }
  100% { transform: translateX(-50%) scale(1.00); }
}
.title-start-btn.btn-releasing {
  animation: btnRelease 260ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 点击心心粒子 */
@keyframes heartFloat {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-65px) scale(0.3); opacity: 0; }
}
.btn-heart-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  user-select: none;
  animation: heartFloat 0.65s ease-out forwards;
}

/* ── 方向切换 ─────────────────────────────────────── */
@media (orientation: landscape) {
  .title-landscape-wrap { display: flex; }
}
@media (orientation: portrait) {
  .title-portrait-wrap  { display: block; }
}

/* ═════════════════════════════════════════════════════
   加载屏
   ===================================================== */
#screen-loading { background: var(--bg); }

.loading-box { text-align: center; }
.spinner {
  width: 3.5em; height: 3.5em;
  border: 0.2em solid rgba(255,255,255,0.1);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 1.5vh;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { font-size: 1.05em; color: var(--text-mid); margin-bottom: 0.4em; }
.loading-sub  { font-size: 0.78em; color: var(--text-dim); }

/* ═════════════════════════════════════════════════════
   世界地图屏
   ===================================================== */
#screen-world-map { min-height: 100vh; }

.wmap-content {
  position: relative;
  z-index: 5;
  padding: 2.5vh 4vw 4vh;
  max-width: 72em;
  margin: 0 auto;
  width: 100%;
}
.wmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.5vh;
  border-bottom: thin solid var(--border);
  margin-bottom: 2vh;
}
.wmap-alert { color: var(--red); font-size: 0.82em; }
.wmap-score { color: var(--text-mid); font-size: 0.95em; }
.wmap-score b { color: var(--pink); font-size: 1.2em; }
.wmap-title { text-align: center; font-size: 1.3em; margin-bottom: 0.5vh; }
.wmap-hint  { text-align: center; color: var(--yellow); font-size: 0.8em; margin-bottom: 2.5vh; }

/* 角色卡片网格 */
.heroine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12em, 45%), 1fr));
  gap: 1.2em;
}
.heroine-card {
  background: rgba(20,20,50,0.85);
  backdrop-filter: blur(6px);
  border: thin solid;
  border-radius: 0.8em;
  padding: 1.2em;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
}
.heroine-card::before {  /* 顶部色条 */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.2em;
  background: currentColor;
  opacity: 0.7;
}
.heroine-card:hover { background: rgba(30,30,70,0.9); transform: translateY(-0.25em); }
.heroine-card.conquered { opacity: 0.55; cursor: default; }
.heroine-card.conquered:hover { transform: none; }

.card-conquered { position: absolute; top: 0.5em; right: 0.5em; font-size: 0.7em; color: var(--green); background: rgba(0,200,120,0.15); border: thin solid rgba(0,200,120,0.3); padding: 0.15em 0.5em; border-radius: 1em; }
.card-portrait  { width: 100%; aspect-ratio: 1 / 1; max-height: 8em; border: thin dashed; border-radius: 0.5em; display: flex; align-items: center; justify-content: center; font-size: 2em; margin-bottom: 0.7em; background: rgba(255,255,255,0.03); opacity: 0.8; }
.card-name      { font-size: 1.05em; font-weight: bold; margin-bottom: 0.2em; }
.card-title-sub { font-size: 0.72em; color: var(--text-dim); margin-bottom: 0.6em; }
.card-bars      { font-size: 0.72em; color: var(--text-dim); }
.card-bar       { height: 0.25em; background: rgba(255,255,255,0.08); border-radius: 0.2em; margin: 0.25em 0 0.5em; }
.card-bar-fill  { height: 100%; border-radius: 0.2em; transition: width 0.4s; }

/* ═════════════════════════════════════════════════════
   约会屏（Galgame UI 核心布局）
   全部用 vh/vw/%/em，绝不用 px
   ===================================================== */
#screen-dating { overflow: hidden; background: #f5f1ea; }
#screen-dating.click-continue { cursor: pointer; }

/* 立绘容器：全屏，对话框（z-index 15）自然压在立绘（z-index 5）之上 */
.portrait-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
/* 图片：底部贴屏幕底，高度充满全屏，对话框会自然遮住脚部 */
.portrait-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100svh;
  width: auto;
  filter: drop-shadow(0 0 2em rgba(0,0,0,0.6));
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.portrait-img.angry { filter: drop-shadow(0 0 2em rgba(180,30,30,0.5)); }
.portrait-img.shy   { filter: drop-shadow(0 0 2em rgba(255,130,180,0.5)); }

.portrait-ph {
  width: min(44vw, 26em);
  min-width: 11em;
  aspect-ratio: 1 / 1;
  border: 0.15em dashed rgba(255,110,180,0.3);
  border-radius: 1.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,110,180,0.04)),
    rgba(255,110,180,0.04);
  box-shadow: inset 0 0 0.8em rgba(255,255,255,0.05);
}
.portrait-emoji    { font-size: 4.6em; }
.portrait-ph-label { font-size: 0.72em; color: var(--text-dim); }

/* 立绘切换动画 — 递减震动淡入（translateX(-50%) 必须每帧都带，否则居中会丢失） */
@keyframes portraitChange {
  0%   { transform: translateX(-50%);            opacity: 0.55; }
  14%  { transform: translateX(calc(-50% + 7px)); opacity: 0.8;  }
  28%  { transform: translateX(calc(-50% - 5px)); opacity: 0.88; }
  42%  { transform: translateX(calc(-50% + 3px)); opacity: 0.93; }
  57%  { transform: translateX(calc(-50% - 2px)); opacity: 0.97; }
  72%  { transform: translateX(calc(-50% + 1px)); opacity: 1;    }
  100% { transform: translateX(-50%);            opacity: 1;    }
}
.portrait-change { animation: portraitChange 0.32s ease-out; }

/* ── 顶部HUD ─────────────────────────────────────── */
.stats-hud {
  position: absolute;
  top: 2vh;
  right: 2vw;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(0.5em);
  border-radius: 0.7em;
  border: thin solid rgba(255,255,255,0.1);
  padding: 1vh 1.2vw;
  z-index: 20;
  min-width: 14vw;
  max-width: 18em;
  display: flex;
  flex-direction: column;
  gap: 0.6vh;
}
.hud-toggle-btn { display: none; }
.hud-body { display: flex; flex-direction: column; gap: 0.6vh; }
.hud-row-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.3vh;
}
.hud-name-text { font-size: 0.82em; font-weight: bold; color: var(--pink); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-progress  { font-size: 0.7em; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }

.hud-stat-row   { display: flex; align-items: center; gap: 0.5vw; }
.hud-stat-label { font-size: 0.7em; color: var(--text-dim); width: 2.2em; flex-shrink: 0; }
.hud-bar        { flex: 1; height: 0.35em; background: rgba(84,112,140,0.12); border-radius: 0.2em; overflow: hidden; }
.hbar-fill      { height: 100%; border-radius: 0.2em; transition: width 0.5s ease; }
.fill-aff       { background: linear-gradient(90deg, #d38472, #e8b3a6); }
.fill-dep       { background: linear-gradient(90deg, #54708c, #89a1b9); }
.fill-dan       { background: linear-gradient(90deg, #cc5a43, #e79f87); }
.hud-stat-val   { font-size: 0.7em; color: var(--text-mid); width: 1.8em; text-align: right; flex-shrink: 0; }

/* ── 选项面板（浮在场景上，对话框上方）─────────── */
.options-wrap {
  position: absolute;
  bottom: var(--dlg-h);
  left: 50%;
  transform: translateX(-50%);
  width: min(72vw, 46em);
  z-index: 25;
  padding-bottom: 1.5vh;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.options-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55vh;
  pointer-events: auto;
}
.option-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(0.6em);
  border: thin solid rgba(255,255,255,0.12);
  color: var(--text-mid);
  padding: 1.2vh 1.8vw;
  text-align: left;
  font-size: clamp(0.72em, 1.6vw, 0.9em);
  line-height: 1.55;
  border-radius: 0.45em;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
  font-family: var(--font);
}
.option-btn:hover {
  background: rgba(84,112,140,0.08);
  border-color: rgba(84,112,140,0.35);
  color: var(--text);
  transform: translateX(0.3em);
}
.option-label {
  color: var(--purple);
  font-size: 0.82em;
  font-weight: bold;
  margin-right: 0.6em;
}

/* ── 对话框（底部固定，全屏宽）─────────────────── */
.dlg-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--dlg-h);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(0.8em);
  border-top: thin solid rgba(84,112,140,0.18);
  z-index: 15;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5vh 5vw 1.8vh;
  gap: 0.7vh;
  /* 使用 padding-bottom 防止底部被遮挡（iOS safe area）*/
  padding-bottom: max(1.8vh, env(safe-area-inset-bottom));
}
/* 对话框顶部粉色光线 */
.dlg-box::before {
  content: '';
  position: absolute;
  top: -0.05em;
  left: 10%;
  right: 10%;
  height: 0.05em;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
}

.dlg-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  min-height: 1.6em; /* 保留空间避免抖动 */
}
.effect-tag         { font-size: 0.72em; font-weight: bold; padding: 0.15em 0.7em; border-radius: 1em; }
.effect-pos         { background: rgba(0,200,120,0.15);  color: var(--green);         border: thin solid rgba(0,200,120,0.3); }
.effect-neg         { background: rgba(231,76,60,0.18);  color: #ff8a7a;              border: thin solid rgba(231,76,60,0.35); }
.effect-nil         { background: rgba(84,112,140,0.07); color: var(--text-dim);      border: thin solid rgba(84,112,140,0.14); }
/* 危险度 + → 红，危险度 - → 绿 */
.effect-danger-up   { background: rgba(231,76,60,0.18);  color: #ff8a7a;              border: thin solid rgba(231,76,60,0.35); }
.effect-danger-down { background: rgba(0,200,120,0.15);  color: var(--green);         border: thin solid rgba(0,200,120,0.3); }
/* 依赖度 + → 深紫，依赖度 - → 浅紫 */
.effect-dep-up      { background: rgba(100,60,180,0.15); color: rgba(140,90,220,1);   border: thin solid rgba(100,60,180,0.35); }
.effect-dep-down    { background: rgba(180,150,220,0.15);color: rgba(160,130,200,1);  border: thin solid rgba(180,150,220,0.35); }

.dlg-nameplate {
  font-size: 0.82em;
  font-weight: bold;
  color: var(--pink);
  letter-spacing: 0.06em;
  /* 立牌感：左侧高亮条 */
  padding-left: 0.7em;
  border-left: 0.18em solid var(--pink);
  line-height: 1;
}

.dlg-text {
  font-size: clamp(0.82em, 1.8vw, 1em);
  line-height: 1.9;
  color: var(--text);
  overflow-y: auto;
  max-height: 8vh;
}

/* 点击继续指示符：右下角闪烁的 ▼ */
.dlg-cursor {
  position: absolute;
  bottom: 1.2vh;
  right: 2vw;
  color: var(--pink);
  font-size: 0.75em;
  pointer-events: none;          /* 不拦截点击，让 dlg-box 接收 */
  animation: cursorBlink 1s ease-in-out infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* 对话框可点击时加手型光标 */
.dlg-box.clickable { cursor: inherit; }
.dlg-box.clickable:hover { background: rgba(255, 255, 255, 0.98); }

/* ═════════════════════════════════════════════════════
   结局屏
   ===================================================== */
#screen-ending { overflow: hidden; }

#screen-ending.active {
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}

/* 结算立绘 — 左侧 */
.ending-portrait-wrap {
  flex: 0 0 26vw;
  position: relative;
  overflow: hidden;
  z-index: 4;
  align-self: stretch;
}
.ending-portrait-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 96%;
  width: auto;
}
.ending-portrait-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--bg) 100%);
  pointer-events: none;
}

.ending-content {
  position: relative;
  z-index: 5;
  flex: 1;
  min-width: 0;
  max-width: 54em;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vh;
  padding: 2vh 2vw 3vh;
  overflow-y: auto;
}

/* ── 档案抬头 ─────────────────────────── */
.case-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: thin solid rgba(84,112,140,0.2);
  padding-bottom: 0.55em;
}
.case-label {
  font-size: 0.68em;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.case-number {
  font-size: 0.68em;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  font-weight: 600;
}

/* ── 大印章 ───────────────────────────── */
.case-stamp {
  font-size: clamp(1em, 2.8vw, 1.4em);
  font-weight: 900;
  letter-spacing: 0.22em;
  padding: 0.38em 1.4em;
  border-radius: 0.25em;
  border: 3px solid;
  transform: rotate(-3deg);
  animation: stamp-in 0.5s cubic-bezier(.22,.68,0,1.28) 0.08s both;
}
.stamp-good {
  color: var(--green);
  border-color: var(--green);
  background: rgba(94,139,111,0.06);
  box-shadow: 0 0 1.8em rgba(94,139,111,0.22) inset;
}
.stamp-bad {
  color: var(--red);
  border-color: var(--red);
  background: rgba(204,90,67,0.06);
  box-shadow: 0 0 1.8em rgba(204,90,67,0.22) inset;
}
@keyframes stamp-in {
  0%   { transform: scale(2.8) rotate(14deg); opacity: 0; }
  65%  { transform: scale(0.94) rotate(-5deg); opacity: 1; }
  100% { transform: scale(1) rotate(-3deg); }
}

/* ── 结局徽章 + 标题 + 角色名 ───────────── */
.ending-badge {
  font-size: 0.76em;
  letter-spacing: 0.26em;
  padding: 0.3em 1.4em;
  border-radius: 1.5em;
  font-weight: bold;
}
.badge-bad  { background: rgba(204,90,67,0.1);  color: var(--red);   border: thin solid rgba(204,90,67,0.35); }
.badge-good { background: rgba(94,139,111,0.1); color: var(--green); border: thin solid rgba(94,139,111,0.35); }
.ending-title   { font-size: clamp(1.1em, 3vw, 1.75em); text-align: center; line-height: 1.3; }
.ending-heroine { color: var(--text-dim); font-size: 0.82em; letter-spacing: 0.06em; }

/* ── 结局文本 ─────────────────────────── */
.ending-text-wrap {
  background: rgba(255,255,255,0.82);
  border: thin solid rgba(84,112,140,0.12);
  border-radius: 0.7em;
  padding: 1.5vh 2vw;
  width: 100%;
  min-height: 12vh;
  max-height: 44vh;
  overflow-y: auto;
}
.ending-text {
  color: var(--text-mid);
  line-height: 2;
  font-size: 0.88em;
  white-space: pre-line;
}

/* ── 数据面板行 ───────────────────────── */
.ending-data-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75em;
}
.ending-panel {
  background: rgba(255,255,255,0.88);
  border: thin solid rgba(84,112,140,0.14);
  border-radius: 0.8em;
  padding: 0.9em 1em;
}
.ending-panel-title {
  color: var(--text-dim);
  font-size: 0.68em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.7em;
}

/* ── 雷达图面板 ───────────────────────── */
.radar-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ending-mini-portrait-wrap {
  display: none !important;
}
.ending-mini-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0.5em;
}
.ending-radar-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.radar-svg {
  width: 100%;
  max-height: 28vh;
  overflow: visible;
  animation: radar-expand 0.5s ease-out 0.45s both;
}
@keyframes radar-expand {
  from { transform: scale(0.15); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── 评级徽章 ─────────────────────────── */
.stats-panel { display: flex; flex-direction: column; }
.grade-badge {
  font-size: clamp(2.2em, 6vw, 3.4em);
  font-weight: 900;
  text-align: center;
  line-height: 1;
  margin: 0.05em 0 0.4em;
  animation: grade-pop 0.42s cubic-bezier(.22,.68,0,1.3) 0.65s both;
}
@keyframes grade-pop {
  0%   { transform: scale(0) rotate(-18deg); opacity: 0; }
  70%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.grade-S { color: var(--yellow); text-shadow: 0 0 1em rgba(200,154,61,0.55); }
.grade-A { color: var(--green); }
.grade-B { color: #5b8db5; }
.grade-C { color: var(--text-mid); }
.grade-D { color: #c4873a; }
.grade-E { color: var(--red); }
.grade-F { color: #9e2f22; text-shadow: 0 0 0.8em rgba(158,47,34,0.45); }

/* ── 数值条 ───────────────────────────── */
.stats-bars { display: flex; flex-direction: column; gap: 0.48em; margin-bottom: 0.6em; }
.stat-bar-row { display: flex; align-items: center; gap: 0.45em; }
.stat-bar-label { font-size: 0.68em; color: var(--text-dim); width: 4.2em; flex-shrink: 0; }
.stat-bar-track {
  flex: 1;
  height: 0.42em;
  background: rgba(84,112,140,0.1);
  border-radius: 1em;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  border-radius: 1em;
  width: 0;
  transition: width 0.75s ease-out;
}
.stat-bar-val { font-size: 0.7em; color: var(--text); width: 2em; text-align: right; font-weight: 600; flex-shrink: 0; }

/* ── 元数据（答题/进度简行） ─────────── */
.ending-meta {
  font-size: 0.7em;
  color: var(--text-dim);
  line-height: 1.85;
  border-top: thin solid rgba(84,112,140,0.1);
  padding-top: 0.5em;
  margin-top: auto;
}

/* ── 底部面板（世界线 + 评语） ───────── */
.case-footer-panel { width: 100%; }
.worldline-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.7em;
  flex-wrap: wrap;
}
.worldline-dots { display: flex; gap: 0.28em; flex-wrap: wrap; }
.worldline-dot {
  width: 0.72em;
  height: 0.72em;
  border-radius: 50%;
  border: thin solid rgba(84,112,140,0.25);
  background: transparent;
  transition: background 0.3s, box-shadow 0.3s;
}
.worldline-dot.conquered    { background: var(--green); border-color: var(--green); }
.worldline-dot.dot-good     { background: var(--green); border-color: var(--green);
                               box-shadow: 0 0 0.5em rgba(94,139,111,0.8); }
.worldline-dot.dot-bad      { background: var(--red);   border-color: var(--red);
                               box-shadow: 0 0 0.5em rgba(204,90,67,0.8);
                               animation: dot-pulse 1s ease-in-out infinite alternate; }
@keyframes dot-pulse {
  from { box-shadow: 0 0 0.3em rgba(204,90,67,0.6); }
  to   { box-shadow: 0 0 0.8em rgba(204,90,67,1); }
}
.worldline-text { font-size: 0.72em; color: var(--text-dim); margin-left: auto; flex-shrink: 0; }
.ending-commentary {
  color: var(--text-mid);
  font-size: 0.88em;
  line-height: 1.95;
}

.ending-btns { display: flex; gap: 0.8em; flex-wrap: wrap; justify-content: center; }

/* ═════════════════════════════════════════════════════
   通关屏
   ===================================================== */
#screen-world-saved { overflow: hidden; }

.saved-content {
  position: relative;
  z-index: 5;
  text-align: center;
  width: min(90%, 32em);
  padding: 3vh 2vw;
}
.saved-star  { font-size: 3em; color: var(--yellow); text-shadow: 0 0 1.5em rgba(240,180,40,0.7); margin-bottom: 0.5em; }
.saved-title { font-size: clamp(1.5em, 4vw, 2.5em); color: var(--green); text-shadow: 0 0 1.5em rgba(0,200,120,0.5); margin-bottom: 0.3em; }
.saved-sub   { color: var(--text-mid); font-size: 0.9em; margin-bottom: 2.5vh; }
.saved-list  {
  background: rgba(255,255,255,0.84);
  border-radius: 0.7em;
  padding: 1.5vh 2vw;
  color: var(--text-dim);
  font-size: 0.85em;
  line-height: 1.9;
  margin-bottom: 2.5vh;
}

/* ═════════════════════════════════════════════════════
   响应式断点
   ===================================================== */
@media (max-width: 600px) {
  :root { --dlg-h: 22vh; }

  /* ── 竖屏 HUD：折叠到右边缘，点击展开 ── */
  .stats-hud {
    top: 8vh;
    right: 0;
    max-width: 52vw;
    min-width: 0;
    border-radius: 0.7em 0 0 0.7em;
    padding: 0;
    transform: translateX(calc(100% - 2.2em));
    transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1);
    overflow: visible;
  }
  .stats-hud.hud-open {
    transform: translateX(0);
  }
  .hud-toggle-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%);
    width: 2.2em;
    height: 3.2em;
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(0.5em);
    border: thin solid rgba(255,255,255,0.1);
    border-radius: 0.6em 0 0 0.6em;
    font-size: 0.8em;
    color: var(--pink);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hud-toggle-btn::before {
    content: '♡';
    font-size: 1.1em;
  }
  .stats-hud.hud-open .hud-toggle-btn::before {
    content: '×';
  }
  .hud-body {
    padding: 1vh 1.2vw;
  }

  .options-wrap  { width: 94vw; }
  .heroine-grid  { grid-template-columns: repeat(2, 1fr); }
  .ending-data-row { grid-template-columns: 1fr; }

  /* 窄屏结算：隐藏侧边立绘，恢复列布局 */
  .ending-portrait-wrap    { display: none !important; }
  #screen-ending.active    { flex-direction: column; justify-content: center; }
  .ending-content          { max-width: min(94%, 54em); flex: none; }

  /* 竖屏结算：雷达面板左边显示迷你立绘 */
  .radar-panel {
    flex-direction: row;
    align-items: stretch;
    gap: 0.6em;
  }
  .ending-mini-portrait-wrap {
    display: block !important;
    flex: 0 0 28%;
    position: relative;
    overflow: hidden;
    border-radius: 0.5em;
    align-self: stretch;
    min-height: 0;
  }
  .ending-mini-portrait-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 0.5em;
  }
}

@media (max-width: 400px) {
  .dlg-text { font-size: 0.78em; }
  .option-btn { font-size: 0.7em; padding: 1vh 3vw; }
}

/* ═════════════════════════════════════════════════════
   难度选择屏
   ===================================================== */
#screen-difficulty { background: radial-gradient(ellipse at 50% 60%, #fffaf4 0%, var(--bg) 65%); }

.difficulty-content {
  position: relative;
  z-index: 5;
  text-align: center;
  width: min(90%, 30em);
  padding: 2.5vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vh;
}
.difficulty-title {
  font-size: clamp(1.3em, 3.5vw, 2em);
  color: var(--pink);
  letter-spacing: 0.1em;
}
.difficulty-sub {
  font-size: 0.82em;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.difficulty-btns {
  display: flex;
  flex-direction: column;
  gap: 0.65vh;
  width: 100%;
  margin-top: 0.5vh;
}
.difficulty-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9em 1.6em;
  border-radius: 0.6em;
  border: thin solid;
  font-family: var(--font);
  transition: transform 0.15s, box-shadow 0.15s;
}
.difficulty-btn:hover { transform: translateX(0.3em); }
.diff-label { font-size: 0.95em; font-weight: bold; }
.diff-desc  { font-size: 0.75em; opacity: 0.75; }

.btn-baby   { background: rgba(94,139,111,0.08);  color: var(--green); border-color: rgba(94,139,111,0.3); }
.btn-baby:hover   { box-shadow: 0 0 1em rgba(94,139,111,0.25); }
.btn-normal { background: rgba(84,112,140,0.08);  color: var(--purple); border-color: rgba(84,112,140,0.3); }
.btn-normal:hover { box-shadow: 0 0 1em rgba(84,112,140,0.25); }
.btn-hard   { background: rgba(200,154,61,0.08);  color: var(--yellow); border-color: rgba(200,154,61,0.3); }
.btn-hard:hover   { box-shadow: 0 0 1em rgba(200,154,61,0.25); }
.btn-god    { background: rgba(204,90,67,0.08);   color: var(--red);    border-color: rgba(204,90,67,0.3); }
.btn-god:hover    { box-shadow: 0 0 1em rgba(204,90,67,0.25); }

/* ── 自由恋爱区 ──────────────────────────────────── */
.freelove-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vh;
  margin-top: 1vh;
}
.freelove-divider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7em;
  color: var(--text-dim);
  font-size: 0.78em;
}
.freelove-divider::before,
.freelove-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.freelove-label {
  font-size: 0.82em;
  font-weight: bold;
  color: var(--pink);
  letter-spacing: 0.06em;
}
.freelove-sub {
  font-size: 0.72em;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: -0.4vh;
}
.freelove-input-row {
  display: flex;
  gap: 0.5em;
  width: 100%;
}
.freelove-input {
  flex: 1;
  border: thin solid var(--border);
  border-radius: 2em;
  padding: 0.6em 1.2em;
  font-family: var(--font);
  font-size: 0.9em;
  color: var(--text);
  background: rgba(255,255,255,0.88);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.freelove-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(201,111,93,0.12);
}
.freelove-input::placeholder { color: var(--text-dim); }
.btn-freelove {
  background: transparent;
  border: thin solid rgba(201,111,93,0.35);
  color: var(--pink);
  border-radius: 2em;
  padding: 0.6em 1.1em;
  font-family: var(--font);
  font-size: 0.85em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.btn-freelove:hover {
  background: rgba(201,111,93,0.08);
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(201,111,93,0.1);
}
.freelove-hint {
  font-size: 0.7em;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

/* 自由恋爱结算：隐藏评分/雷达/世界线 */
#screen-ending.freeplay-mode .ending-data-row,
#screen-ending.freeplay-mode .case-footer-panel { display: none; }
#screen-ending.freeplay-mode .ending-text-wrap  { max-height: 50vh; }

/* ── 通用工具 ─────────────────────────────────────── */
.visually-hidden { display: none !important; }

/* ═════════════════════════════════════════════════════
   总结算界面
   ===================================================== */
#screen-final-summary { background: var(--bg); }

.fs-scroll {
  position: absolute; inset: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
  padding: 3vh 4vw 6vh; gap: 2vh;
}
.fs-capture {
  width: min(96%, 52em);
  display: flex; flex-direction: column; gap: 1.8vh;
  background: var(--bg);
  padding: 2vh 0;
}

/* 顶部 */
.fs-header  {
  text-align: center; padding: 2.5vh 1.5em 2vh;
  background: var(--bg-card);
  border-radius: .8em;
  border: thin solid var(--border);
}
.fs-stamp   {
  font-size: clamp(1em, 3vw, 1.6em); font-weight: 900;
  letter-spacing: .22em; color: var(--red);
  border: 2px solid currentColor; border-radius: .35em;
  display: inline-block; padding: .15em .9em;
  margin-bottom: 1vh; opacity: .85;
}
.fs-stamp.won { color: var(--green); }
.fs-title { font-size: clamp(1.4em, 4vw, 2.2em); color: var(--text); margin: .3em 0 .2em; }
.fs-sub   { font-size: .85em; color: var(--text-dim); }

/* 女主网格 */
.fs-heroine-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .6em;
}
.fs-heroine-card {
  background: var(--bg-card);
  border-radius: .6em; overflow: hidden;
  aspect-ratio: 2 / 3;
  position: relative;
  border: thin solid var(--border);
}
.fs-heroine-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
.fs-card-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2;
  background: rgba(0,0,0,.5); color: #fff;
  font-size: .6em; text-align: center;
  padding: .28em .3em; line-height: 1.3;
}
.fs-heroine-card.conquered { border-color: var(--green); border-width: 2px; }
.fs-heroine-card.conquered::after {
  content: '✓';
  position: absolute; top: .25em; right: .35em;
  color: var(--green); font-weight: 900; font-size: .9em; z-index: 3;
  text-shadow: 0 0 4px rgba(0,0,0,.5);
}
.fs-heroine-card.lost { filter: grayscale(55%) brightness(.82); }

/* 可展开数值 */
.fs-stats-list { display: flex; flex-direction: column; gap: .45em; }
.fs-stat-item  {
  background: var(--bg-card);
  border-radius: .65em; overflow: hidden;
  border: thin solid var(--border);
}
.fs-stat-header {
  display: flex; align-items: center; gap: .8em;
  padding: .75em 1em; cursor: pointer; user-select: none;
}
.fs-stat-header:hover { background: var(--bg-hover); }
.fs-stat-label { flex: 1; font-size: .85em; color: var(--text-mid); }
.fs-stat-value { font-weight: 700; font-size: .95em; }
.fs-stat-arrow { color: var(--text-dim); font-size: .72em; transition: transform .2s; }
.fs-stat-item.open .fs-stat-arrow { transform: rotate(180deg); }
.fs-stat-body  {
  display: none;
  padding: .6em 1em 1em;
  font-size: .82em; color: var(--text-dim); line-height: 1.8;
  border-top: thin solid var(--border);
}
.fs-stat-item.open .fs-stat-body { display: block; }

/* 总评语 */
.fs-commentary-wrap {
  background: var(--bg-card);
  border-radius: .8em; padding: 1.2em 1.4em;
  border: thin solid var(--border);
}
.fs-commentary-label {
  font-size: .68em; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: .6em;
}
.fs-commentary  { font-size: .9em; line-height: 2; color: var(--text); white-space: pre-wrap; }
.fs-tone-badge  {
  display: inline-block; margin-top: .8em;
  font-size: .7em; padding: .15em .6em;
  border-radius: 999px; border: thin solid var(--border);
  color: var(--text-dim);
}

/* 水印 + 按钮区 */
.fs-watermark {
  text-align: center; font-size: .65em;
  color: var(--text-dim); opacity: .5; padding-top: .5em;
}
.fs-btns {
  display: flex; gap: 1em; flex-wrap: wrap;
  justify-content: center; margin-top: .5vh;
}

@media (max-width: 600px) {
  .fs-heroine-grid { grid-template-columns: repeat(4, 1fr); }
  .fs-capture { padding: 1.5vh 0; }
}

/* ═════════════════════════════════════════════════════
   反馈按钮 + 浮层
   ===================================================== */
.btn-feedback {
  font-size: .72em; color: var(--text-dim);
  background: none; border: thin solid var(--border);
  border-radius: 999px; padding: .25em 1em;
  transition: border-color .15s, color .15s;
}
.btn-feedback:hover { border-color: var(--pink); color: var(--pink); }

.feedback-popup {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(.3em);
}
.feedback-box {
  background: var(--bg-card); border-radius: 1em;
  padding: 2em 2.2em; text-align: center;
  width: min(90%, 22em);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.feedback-title { font-size: .88em; color: var(--text-dim); margin-bottom: .7em; }
.feedback-email {
  font-family: monospace; font-size: .92em;
  color: var(--pink); margin-bottom: 1.3em;
  word-break: break-all; letter-spacing: .04em;
}
.feedback-actions { display: flex; gap: .8em; justify-content: center; }
.btn-copy {
  background: var(--pink); color: #fff; border: none;
  border-radius: 999px; padding: .4em 1.4em;
  font-size: .82em; font-family: var(--font);
  cursor: pointer; transition: filter .15s;
}
.btn-copy:hover { filter: brightness(1.1); }

/* ═════════════════════════════════════════════════════
   危险度红闪警告层
   ===================================================== */
.danger-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background: rgba(180, 40, 20, 0);
}
@keyframes dangerPulse {
  0%   { background: rgba(180, 40, 20, 0); }
  50%  { background: rgba(180, 40, 20, 0.18); }
  100% { background: rgba(180, 40, 20, 0); }
}
.danger-flash.active {
  animation: dangerPulse 1.4s ease-in-out infinite;
}

/* ═════════════════════════════════════════════════════
   总结算：评级 + 维度雷达
   ===================================================== */
.fs-score-row {
  display: grid;
  grid-template-columns: minmax(160px, 210px) 1fr;
  gap: 0;
  align-items: center;
  background: var(--bg-card);
  border: thin solid var(--border);
  border-radius: .8em;
  overflow: hidden;
}
.fs-panel-label {
  font-size: .68em; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: .5em;
}
.fs-grade-panel {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .5em;
  padding: 1.8em 1.4em;
  border-right: thin solid var(--border);
  align-self: stretch;
}
.fs-grade-value {
  font-size: clamp(4em, 11vw, 6.5em);
  font-weight: 900; line-height: 1;
  transition: color .3s;
}
.grade-phi   { color: #c8951e; text-shadow: 0 0 .4em rgba(200,149,30,.5), 0 0 1em rgba(200,149,30,.25); }
.grade-splus { color: #b84c3a; }
.grade-s     { color: var(--pink); }
.grade-a     { color: var(--purple); }
.grade-b     { color: var(--green); }
.grade-c     { color: var(--yellow); }
.grade-d     { color: var(--text-dim); }
.grade-f     { color: var(--text-mid); opacity: .7; }
.fs-difficulty-badge {
  font-size: .7em; color: var(--text-dim);
  border: thin solid var(--border);
  border-radius: 999px; padding: .18em .85em;
  text-align: center; white-space: nowrap;
}
.fs-radar-panel-wrap {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 1.2em 1.4em;
  min-width: 0;
}
.fs-radar-svg {
  width: 100%;
  aspect-ratio: 1;
  overflow: visible;
}
@media (max-width: 600px) {
  .fs-score-row { grid-template-columns: 1fr; }
  .fs-grade-panel {
    flex-direction: row; gap: 1.2em;
    border-right: none; border-bottom: thin solid var(--border);
    padding: 1.2em 1.4em; align-self: auto;
  }
  .fs-grade-value { font-size: clamp(3em, 14vw, 4.5em); }
  .fs-radar-svg { max-width: 72vw; margin: 0 auto; display: block; }
}