:root {
      --bg: #04040f;
      --panel: rgba(6, 12, 28, .88);
      --cyan: #00ffcc;
      --magenta: #ff2d78;
      --purple: #aa44ff;
      --amber: #ffaa00;
      --green: #44ff44;
      --muted: #7a96a8;
      --danger: #ff4864;
      --border: rgba(0, 255, 204, .35);
      --shadow: 0 0 28px rgba(0, 255, 204, .15), inset 0 0 28px rgba(0, 255, 204, .04);
      --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
      --font-ui:   'Rajdhani', 'Noto Sans SC', system-ui, sans-serif;
    }

    * { box-sizing: border-box; }

    /* ── 滚动条：赛博暗色风格 ── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: rgba(0,255,204,.04); }
    ::-webkit-scrollbar-thumb {
      background: rgba(0,255,204,.18);
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover { background: rgba(0,255,204,.35); }
    /* Firefox */
    * { scrollbar-width: thin; scrollbar-color: rgba(0,255,204,.18) transparent; }

    html, body { height: 100%; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
    body {
      margin: 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,45,120,.10), transparent 30%),
        radial-gradient(circle at 82% 8%,  rgba(0,255,204,.10), transparent 34%),
        linear-gradient(135deg, #04040f 0%, #07091d 55%, #04040f 100%);
      color: var(--cyan);
      font-family: var(--font-body);
      font-size: clamp(13px, 2.4vmin, 16px);
      font-weight: 400;
    }

    /* 扫描线 */
    body::before {
      content: '';
      position: fixed; inset: 0;
      pointer-events: none; z-index: 9999;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px,
        transparent 2px, transparent 5px
      );
      mix-blend-mode: screen;
      animation: scanMove 7s linear infinite;
    }
    body::after {
      content: '';
      position: fixed; inset: -20%;
      pointer-events: none;
      background: linear-gradient(120deg, transparent 46%, rgba(0,255,204,.06) 50%, transparent 54%);
      animation: sweep 9s ease-in-out infinite;
      z-index: 9998;
    }

    @keyframes scanMove { from { transform: translateY(-16px); } to { transform: translateY(16px); } }
    @keyframes sweep { 0%,70% { transform: translateX(-60%); opacity: 0; } 78% { opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
    @keyframes fadeIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @keyframes pulse   { 0%,100% { opacity:.7; } 50% { opacity:1; } }
    @keyframes glitch  { 0%,100% { text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan); } 50% { text-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan); } }
    @keyframes spin    { to { transform: rotate(360deg); } }
    @keyframes flicker { 0%,100% { color:#ff00ff; border-color:#ff00ff; } 50% { color:#00ffff; border-color:#00ffff; } }
    .btn-pulse { animation: btnPulse 1.4s ease-in-out infinite; }
    @keyframes btnPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,255,204,.35); } 50% { box-shadow: 0 0 0 8px rgba(0,255,204,0); } }
    @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
    .shake { animation: shake .38s ease; }

    /* Boss 对话面板 */
    #boss-talk-sending {
      display: none;
      align-items: center;
      gap: .5rem;
      color: var(--muted);
      font-size: .88em;
      padding: .3rem 0;
    }
    #boss-talk-sending.active { display: flex; }
    #boss-talk-sending .mini-spin {
      width: 14px; height: 14px;
      border: 2px solid rgba(0,255,204,.25);
      border-top-color: var(--cyan);
      border-radius: 50%;
      animation: spin .7s linear infinite;
      flex-shrink: 0;
    }
    .battle-talk-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: .6rem;
      flex-wrap: wrap;
    }
    /* 战斗对话面板 — 竖屏版见下方 @media 块 #screen-battle #battle-talk-panel */
    .battle-talk-panel {
      border-color: rgba(170,68,255,.28);
      background: linear-gradient(180deg, rgba(170,68,255,.06), rgba(0,0,0,.26));
      display: flex;
      flex-direction: column;
      gap: .55rem;
      min-height: 0;
      padding-bottom: .5rem;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .battle-talk-panel.closing {
      opacity: 0;
      transform: scale(0.96);
      pointer-events: none;
    }
    .battle-talk-panel .section-title {
      margin-bottom: .2rem;
      font-size: 1rem;
    }
    .battle-talk-panel .dialogue-log {
      min-height: 84px;
      max-height: min(24vh, 210px);
      padding-right: .15rem;
    }
    .battle-talk-input-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: .5rem;
      align-items: end;
    }
    #boss-talk-input {
      min-height: 70px;
      max-height: 22vh;
    }
    #battle-talk-impact {
      min-height: 1.4em;
      line-height: 1.6;
    }


    button, input, textarea, select { font-family: var(--font-body); font-size: inherit; }

    button {
      font-family: var(--font-ui);
      font-weight: 700;
      font-size: 1em;
      border: 1px solid var(--cyan);
      background: rgba(0, 255, 204, .08);
      color: var(--cyan);
      padding: .65rem 1.1rem;
      cursor: pointer;
      letter-spacing: .04em;
      box-shadow: 0 0 10px rgba(0,255,204,.10);
      transition: background .15s, transform .12s, box-shadow .15s;
    }
    button:hover:not(:disabled), button.active {
      background: rgba(0,255,204,.18);
      transform: translateY(-1px);
      box-shadow: 0 0 18px rgba(0,255,204,.22);
    }
    button:disabled { opacity: .32; cursor: not-allowed; transform: none; pointer-events: none; }
    button.danger {
      border-color: var(--magenta);
      color: var(--magenta);
      background: rgba(255,45,120,.08);
      box-shadow: 0 0 10px rgba(255,45,120,.10);
    }
    button.danger:hover:not(:disabled) {
      background: rgba(255,45,120,.18);
      box-shadow: 0 0 18px rgba(255,45,120,.22);
    }
    /* 强化战斗主操作的视觉锚点 */
    #btn-attack {
      background: rgba(0, 255, 204, 0.15);
      box-shadow: 0 0 12px rgba(0, 255, 204, 0.2);
    }

    input, textarea {
      width: 100%;
      border: 1px solid rgba(0,255,204,.32);
      background: rgba(0,0,0,.38);
      color: #eafffb;
      padding: .72rem .85rem;
      outline: none;
      box-shadow: inset 0 0 10px rgba(0,255,204,.05);
      font-weight: 400;
    }
    input:focus, textarea:focus {
      border-color: rgba(0,255,204,.65);
      box-shadow: inset 0 0 10px rgba(0,255,204,.08), 0 0 0 2px rgba(0,255,204,.10);
    }
    textarea { resize: vertical; min-height: 72px; word-break: break-all; overflow-wrap: anywhere; }

    .hidden { display: none !important; }
    .muted   { color: var(--muted); }
    .magenta { color: var(--magenta); }
    .amber   { color: var(--amber); }
    .green   { color: var(--green); }
    .purple  { color: var(--purple); }
    .small   { font-size: .85em; }
    .mono    { font-family: 'Courier New', monospace; font-variant-numeric: tabular-nums; }

    /* ── 布局 ── */
    #app {
      height: 100%;
      padding: clamp(6px, 1.5vmin, 20px);
      display: grid;
      place-items: center;
    }
    @media (orientation: portrait) {
      #app {
        height: auto;
        min-height: 100%;
        align-items: start;
      }
      body { overflow: auto; }
    }

    .screen {
      display: none;
      width: min(1200px, 100%);
      height: min(800px, 100%);
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(8,12,30,.93), rgba(3,4,15,.92));
      box-shadow: var(--shadow);
      padding: clamp(8px, 2vmin, 26px);
      overflow: hidden;
      position: relative;
      animation: fadeIn .4s ease both;
    }
    .screen.active { display: block; }
    /* 竖屏：自适应高度，不截断内容 */
    @media (orientation: portrait) {
      .screen { height: auto; min-height: 100dvh; overflow-y: visible; }
    }

    .terminal-card {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: .9rem;
      text-align: center;
    }

    /* 标题 —— 更厚重、更强烈 */
    .title {
      margin: 0;
      font-family: var(--font-ui);
      font-weight: 700;
      font-size: clamp(2.4rem, 9vmin, 7.5rem);
      letter-spacing: .12em;
      color: var(--cyan);
      animation: glitch 3s infinite;
      line-height: 1;
    }
    .subtitle {
      max-width: 680px;
      line-height: 1.75;
      color: #c8f0e8;
      font-size: clamp(13px, 2vmin, 15px);
    }
    .section-title {
      margin: 0 0 .75rem;
      font-family: var(--font-ui);
      font-weight: 700;
      font-size: 1.15em;
      letter-spacing: .06em;
      color: #f0fffc;
    }

    .grid        { display: grid; gap: .85rem; }
    .two-col     { grid-template-columns: 1fr 1fr; }
    .choice-grid { grid-template-columns: repeat(3, 1fr); }

    .choice {
      min-height: 110px;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: .4rem;
      justify-content: center;
      padding: .85rem 1rem;
    }
    .choice strong { color: #fff; font-size: 1.05em; letter-spacing: .02em; }
    .choice span   { color: var(--muted); font-size: .88em; line-height: 1.5; font-weight: 400; }

    /* ── 开始页：AI 模型选择（研究分组用）── */
    .ai-picker { width: 100%; margin: 1.3rem 0 .3rem; text-align: left; }
    .ai-picker-head { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .7rem; }
    .ai-picker-label {
      font-family: var(--font-ui); font-size: .95em; letter-spacing: .1em;
      color: var(--cyan); text-transform: uppercase;
    }
    .ai-picker-sub { font-size: .8em; color: var(--muted); line-height: 1.55; }
    .ai-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .ai-card {
      display: flex; flex-direction: column; gap: .22rem; text-align: left;
      padding: .7rem .85rem; min-height: 76px; justify-content: center;
      background: rgba(0,255,204,.03); cursor: pointer;
    }
    .ai-card strong { color: #fff; font-size: .98em; letter-spacing: .02em; }
    .ai-card span   { color: var(--muted); font-size: .8em; line-height: 1.45; font-weight: 400; }
    .ai-card.active {
      border-color: var(--cyan); background: rgba(0,255,204,.1);
      box-shadow: 0 0 14px rgba(0,255,204,.18);
    }
    .ai-card.active strong { color: var(--cyan); }
    .ai-card.active span   { color: #a8d8cf; }
    .ai-picker-hint { font-size: .78em; color: var(--amber); min-height: 1.2em; margin-top: .55rem; text-align: center; }
    .ai-picker-hint.ok { color: var(--cyan); }
    @media (max-width: 520px) {
      .ai-grid { gap: .4rem; }
      .ai-card { min-height: 68px; padding: .6rem .7rem; }
      .ai-card strong { font-size: .92em; }
      .ai-card span { font-size: .76em; }
    }

    /* 顶部HUD — 竖屏版见下方 @media 块内 .hud 相关规则 */
    .hud {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem;
      align-items: center;
      margin-bottom: .65rem;
    }
    #battle-hud .btn-settings { margin-left: auto; } /* 战斗栏：设置+放弃推到最右 */
    .chip {
      border: 1px solid rgba(0,255,204,.25);
      background: rgba(0,255,204,.06);
      padding: .28rem .55rem;
      color: #c8f0e8;
      font-size: .85em;
      font-family: var(--font-ui);
      font-weight: 600;
      letter-spacing: .03em;
    }
    .chip.mag {
      border-color: rgba(255,45,120,.35);
      color: var(--magenta);
      background: rgba(255,45,120,.06);
    }

    /* 面板 */
    .panel {
      border: 1px solid rgba(0,255,204,.22);
      background: var(--panel);
      box-shadow: inset 0 0 18px rgba(0,255,204,.03);
      padding: .85rem;
      overflow: auto;
    }

    .game-container { height: calc(100% - 40px); gap: .85rem; }
    .left-panel, .right-panel { min-height: 0; }
    .left-panel  { display: flex; flex-direction: column; gap: .75rem; overflow: hidden; }
    .left-panel > :first-child { flex-shrink: 0; } /* 头像固定 */
    .right-panel { display: grid; grid-template-rows: auto 1fr auto; gap: .65rem; min-height: 0; }

    /* NPC/BOSS 肖像 */
    .npc-portrait, .boss-portrait {
      position: relative;
      margin: 0 auto;
      border: 1px solid currentColor;
      overflow: hidden;
      display: grid;
      place-items: end center;
      text-align: center;
      box-shadow: inset 0 0 32px rgba(255,255,255,.07), 0 0 18px rgba(0,255,204,.08);
    }
    .npc-portrait::before, .boss-portrait::before {
      content: '';
      position: absolute;
      width: 44%; height: 50%;
      bottom: 14%;
      border-radius: 48% 48% 18% 18%;
      border: 2px solid currentColor;
      background: linear-gradient(180deg, transparent, rgba(255,255,255,.10));
      filter: drop-shadow(0 0 10px currentColor);
    }
    .npc-portrait::after {
      content: attr(data-name);
      position: relative;
      width: 100%;
      padding: .45rem;
      background: rgba(0,0,0,.58);
      z-index: 3;
      font-family: var(--font-ui);
      font-weight: 700;
      font-size: .95em;
      letter-spacing: .06em;
      text-align: center;
      box-sizing: border-box;
    }
    /* BOSS 立绘不显示名字（已在左侧标题区展示） */
    .boss-portrait::after { content: none; }
    .npc-a-placeholder { background:#131330; color:#00ffcc; }
    .npc-b-placeholder { background:#180a28; color:#aa44ff; }
    .npc-c-placeholder { background:#071818; color:#ffaa00; }
    .boss-human     { background:#180000; color:#ff2d78; }
    .boss-ai_entity { background:#001515; color:#00ffcc; }
    .boss-creature  { background:#081800; color:#44ff44; }
    .boss-legend    { background:#181800; color:#ffcc00; }
    .boss-anomaly   { background:#150015; animation: flicker .75s steps(2) infinite; }

    /* 立绘背景图（出图后自动生效） */
    .npc-portrait, .boss-portrait {
      background-size: cover;
      background-position: center 20%;
      background-repeat: no-repeat;
    }
    /* 有立绘图时：隐藏占位轮廓，名字条改为透明叠在图底部 */
    .npc-portrait.has-art::before, .boss-portrait.has-art::before {
      display: none;
    }
    .npc-portrait.has-art, .boss-portrait.has-art {
      border-color: rgba(255,255,255,.08);
    }
    .npc-portrait.has-art::after {
      position: absolute; bottom: 0; left: 0; right: 0;
      width: 100%;
      background: linear-gradient(transparent, rgba(0,0,0,.9));
      color: #fff;
    }

    /* ── 情绪特效层 ── */
    .mood-fx {
      position: absolute; inset: 0; pointer-events: none;
      mix-blend-mode: screen; z-index: 2;
    }

    /* ── NPC 打字指示器（说话声波）── */
    .typing-indicator {
      display: none;
      align-items: center;
      gap: .35rem;
      padding: .4rem .7rem;
      font-size: .82em;
      color: var(--muted);
      font-family: var(--font-ui);
    }
    .typing-indicator.active { display: flex; }
    .voice-bars {
      display: inline-flex; gap: 2px; align-items: flex-end; height: 16px;
    }
    .voice-bars span {
      width: 3px; border-radius: 1px;
      background: currentColor;
      animation: voiceBounce 0.6s ease-in-out infinite;
    }
    .voice-bars span:nth-child(2) { animation-delay: .12s; }
    .voice-bars span:nth-child(3) { animation-delay: .24s; }
    .voice-bars span:nth-child(4) { animation-delay: .36s; }
    .voice-bars span:nth-child(5) { animation-delay: .48s; }
    @keyframes voiceBounce {
      0%, 40%, 100% { height: 4px; opacity: .3; }
      20% { height: 14px; opacity: 1; }
    }

    /* NPC 情绪 4 态 — 微弱的边框微光 + 态度指示器 */
    .npc-portrait.mood-wary  .mood-fx {
      background: transparent;
      opacity: 0;
    }
    .npc-portrait.mood-warm  .mood-fx {
      background: radial-gradient(circle at 50% 45%, currentColor, transparent 80%);
      animation: pulse 3s ease-in-out infinite;
      opacity: .06;
    }
    .npc-portrait.mood-warm  { filter: brightness(1.04) saturate(1.06); }
    .npc-portrait.mood-moved .mood-fx {
      background: radial-gradient(circle at 50% 40%, currentColor, transparent 75%);
      animation: pulse 2s ease-in-out infinite;
      opacity: .09;
    }
    .npc-portrait.mood-moved { filter: brightness(1.06) saturate(1.1); }
    .npc-portrait.mood-angry .mood-fx {
      background: radial-gradient(circle at 30% 30%, rgba(255,72,100,.18), transparent 60%);
      animation: pulse .8s infinite;
    }
    .npc-portrait.mood-angry { box-shadow: inset 0 0 0 1px rgba(255,72,100,.25); }

    /* ── 立绘平滑过渡 ── */
    .npc-portrait, .boss-portrait {
      transition: filter 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .mood-fx {
      transition: opacity 0.5s ease, background 0.5s ease;
    }

    /* ── 全息语音符特效 ── */
    .portrait-voice {
      position: absolute;
      bottom: 22%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: flex-end;
      gap: 4px;
      height: 24px;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 4;
      pointer-events: none;
    }
    .npc-portrait.is-thinking .portrait-voice,
    .boss-portrait.is-thinking .portrait-voice {
      opacity: 1;
    }
    .portrait-voice span {
      width: 4px;
      background: var(--cyan);
      border-radius: 2px;
      animation: speakWave 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) infinite alternate;
      box-shadow: 0 0 8px var(--cyan);
    }
    .portrait-voice span:nth-child(2) { animation-delay: 0.1s; }
    .portrait-voice span:nth-child(3) { animation-delay: 0.2s; }
    .portrait-voice span:nth-child(4) { animation-delay: 0.3s; }
    .portrait-voice span:nth-child(5) { animation-delay: 0.4s; }
    
    @keyframes speakWave {
      0% { height: 4px; opacity: 0.5; }
      100% { height: 24px; opacity: 1; }
    }

    .npc-portrait.is-thinking, .boss-portrait.is-thinking {
      box-shadow: inset 0 0 32px rgba(255,255,255,.07), 0 0 20px rgba(0,255,204,.15);
    }
    .npc-portrait.is-thinking .mood-fx, .boss-portrait.is-thinking .mood-fx {
      background: transparent !important;
      animation: none !important;
    }

    /* 战斗打击感反馈 */
    @keyframes damageFlash {
      0% { filter: brightness(1) sepia(0); transform: translateX(0); }
      20% { filter: brightness(2.5) sepia(1) hue-rotate(-50deg) saturate(5); transform: translateX(-8px); }
      40% { transform: translateX(8px); }
      60% { transform: translateX(-5px); }
      80% { transform: translateX(5px); }
      100% { filter: brightness(1) sepia(0); transform: translateX(0); }
    }
    .damage-flash { animation: damageFlash 0.4s ease-out; }

    @keyframes screenShake {
      0%, 100% { transform: translate(0, 0); }
      20% { transform: translate(-6px, 4px); }
      40% { transform: translate(6px, -3px); }
      60% { transform: translate(-4px, 2px); }
      80% { transform: translate(3px, -1px); }
    }
    .screen-shake { animation: screenShake 0.3s ease-out; }

    /* ── 结局前过渡特效 ── */
    @keyframes bossDeathFx {
      0% { filter: brightness(1) sepia(0); transform: scale(1); opacity: 1; }
      15% { filter: brightness(3) contrast(2) hue-rotate(-90deg); transform: scale(1.1) skewX(10deg); opacity: 0.9; }
      30% { filter: brightness(0) invert(1); transform: scale(0.9) skewX(-10deg); opacity: 0.8; }
      50% { filter: brightness(2) contrast(3); transform: scale(1.05) translateY(-5px); opacity: 0.5; mix-blend-mode: color-dodge; }
      100% { filter: brightness(0); transform: scale(1) translateY(20px); opacity: 0; }
    }
    .boss-death-fx { animation: bossDeathFx 1.8s forwards cubic-bezier(0.2, 0.8, 0.2, 1); }
    /* 死亡期间隐藏情绪覆盖层，防止 mood-fx 的 pulse/glitch 干扰撕裂特效 */
    .boss-dying .mood-fx { display: none !important; opacity: 0 !important; animation: none !important; }

    @keyframes fatalScreenShake {
      0% { transform: translate(0, 0); filter: brightness(1); }
      10% { transform: translate(-12px, 8px); filter: brightness(1.5) sepia(0.8) hue-rotate(-50deg); }
      20% { transform: translate(12px, -8px); filter: brightness(0.5) sepia(1) hue-rotate(-50deg); }
      30% { transform: translate(-10px, 6px); filter: brightness(1.2); }
      40% { transform: translate(8px, -4px); filter: brightness(0.8); }
      60% { transform: translate(-4px, 2px); filter: brightness(0.3); }
      100% { transform: translate(0, 0); filter: brightness(0); }
    }
    .fatal-screen-shake { animation: fatalScreenShake 1.8s forwards ease-out; }

    /* 战斗行动演出：在结算回合前锁定操作，给出清晰的蓄势与冲击节奏。 */
    @keyframes combatAttackWindup {
      0%, 100% { transform: translateX(0) scale(1); filter: brightness(1); }
      32% { transform: translateX(-10px) scale(.98); filter: brightness(.82) saturate(1.35); }
      72% { transform: translateX(7px) scale(1.035); filter: brightness(1.35) saturate(1.7); }
    }
    @keyframes combatDefendTelegraph {
      0%, 100% { box-shadow: inset 0 0 32px rgba(255,255,255,.07), 0 0 18px rgba(0,255,204,.08); }
      50% { box-shadow: inset 0 0 44px rgba(0,255,204,.22), 0 0 34px rgba(0,255,204,.38); }
    }
    #screen-battle.combat-action-attack #boss-portrait { animation: combatAttackWindup 2.2s ease-in-out; }
    #screen-battle.combat-action-attack .bar.boss { animation: pulse .55s ease-in-out 3; }
    #screen-battle.combat-action-defend #boss-portrait { animation: combatAttackWindup 2.2s ease-in-out reverse; }
    #screen-battle.combat-action-defend .bars { animation: combatDefendTelegraph 1.1s ease-in-out 2; }

    /* 态度指示器 — 小标签显示当前情绪 */
    .mood-indicator {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      padding: .15rem .5rem;
      border-radius: 2px;
      font-family: var(--font-ui);
      font-size: .78em;
      font-weight: 600;
      letter-spacing: .04em;
      border: 1px solid rgba(255,255,255,.12);
    }
    .mood-indicator::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .mood-indicator.calm  { color: var(--muted); border-color: rgba(122,150,168,.3); }
    .mood-indicator.calm::before  { background: var(--muted); }
    .mood-indicator.warm  { color: var(--cyan); border-color: rgba(0,255,204,.25); }
    .mood-indicator.warm::before  { background: var(--cyan); box-shadow: 0 0 4px var(--cyan); }
    .mood-indicator.moved { color: var(--purple); border-color: rgba(170,68,255,.3); }
    .mood-indicator.moved::before { background: var(--purple); box-shadow: 0 0 4px var(--purple); }
    .mood-indicator.angry { color: var(--danger); border-color: rgba(255,72,100,.35); animation: pulse .8s infinite; }
    .mood-indicator.angry::before { background: var(--danger); box-shadow: 0 0 4px var(--danger); }

    /* NPC 立绘扫描线（始终存在，增强监控档案感） */
    .npc-portrait .mood-fx::after {
      content: '';
      position: absolute; inset: 0;
      background: repeating-linear-gradient(0deg,
        transparent 0px, transparent 3px,
        rgba(255,255,255,.015) 3px, rgba(255,255,255,.015) 4px);
      pointer-events: none;
    }

    /* BOSS 情绪 5 态 */
    .boss-portrait.mood-focused .mood-fx {
      background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
      background-size: 200% 100%;
      animation: sweepBg 9s ease-in-out infinite;
    }
    .boss-portrait.mood-shaken  { animation: shake .5s ease infinite; }
    .boss-portrait.mood-shaken  .mood-fx {
      background: linear-gradient(90deg, transparent, rgba(255,45,120,.12), transparent);
      background-size: 200% 100%;
      animation: sweepBg .6s steps(2) infinite; opacity: .55;
    }
    .boss-portrait.mood-cracked .mood-fx {
      background:
        linear-gradient(90deg, transparent, var(--magenta) 1px, transparent 3px),
        linear-gradient(0deg,  transparent, var(--cyan) 1px, transparent 3px);
      background-size: 7px 100%, 100% 7px;
      animation: glitch .25s infinite;
    }
    .boss-portrait.mood-enraged  { animation: shake .25s ease infinite; }
    .boss-portrait.mood-enraged .mood-fx {
      background: radial-gradient(circle, rgba(255,72,100,.35), transparent 70%);
      animation: pulse .4s infinite;
    }
    .boss-portrait.mood-broken  { filter: grayscale(.7) brightness(.7); animation: pulse 2.4s ease-in-out infinite; }
    .boss-portrait.mood-broken .mood-fx {
      background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px);
    }

    @keyframes sweepBg {
      0%, 70% { background-position: 200% 0; opacity: 0; }
      78% { opacity: 1; }
      100% { background-position: -200% 0; opacity: 0; }
    }

    /* 商店物品 */
    .shop-list { display: grid; gap: .35rem; overflow-y: auto; flex: 1; min-height: 0; }
    .item-card {
      border: 1px solid rgba(255,255,255,.12);
      padding: .4rem .6rem;
      background: rgba(255,255,255,.03);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .35rem;
      align-items: center;
    }
    .item-card > div { min-width: 0; }
    .item-card b, .item-card .muted.small, .item-card .small {
      display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
    }
    .item-card b { font-weight: 700; font-size: .95em; color: #eafffb; }
    .item-card .muted.small { font-weight: 400; }
    .item-card.rare {
      border-color: var(--magenta);
      box-shadow: 0 0 12px rgba(255,45,120,.12);
    }

    /* 对话 */
    .dialogue-log {
      overflow: auto;
      display: flex;
      flex-direction: column;
      gap: .6rem;
      /* 改为底边距 1rem，剩下的用伪元素垫底 */
      padding: 1.5rem 0.8rem 1rem 0.8rem;
    }
    /* [新增] 用伪元素垫底，彻底解决滚动到底部贴边、计算错误的问题 */
    .dialogue-log::after {
      content: '';
      display: block;
      min-height: 1.5rem;
      flex-shrink: 0;
    }
    .message-row {
      display: flex;
      flex-direction: column;
      max-width: 85%;
      animation: fadeIn .25s ease;
    }
    .message-row.player {
      align-self: flex-end;
      align-items: flex-end;
    }
    .message-row.npc {
      align-self: flex-start;
      align-items: flex-start;
    }
    .message-name {
      font-size: 0.75em;
      color: var(--muted);
      margin-bottom: 0.2rem;
      max-width: 140px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: var(--font-ui);
      letter-spacing: 0.03em;
    }
    .bubble {
      border: 1px solid rgba(255,255,255,.10);
      padding: .55rem .72rem;
      line-height: 1.6;
      white-space: pre-wrap;
      font-size: .95em;
      border-radius: 6px;
      position: relative;
      word-break: break-all;
      overflow-wrap: anywhere;
    }
    .bubble.player {
      border-color: rgba(255,45,120,.38);
      color: #ffd5e4;
      background: rgba(255,45,120,.07);
      border-top-right-radius: 2px;
    }
    .bubble.npc {
      border-color: rgba(0,255,204,.30);
      color: #dffff8;
      background: rgba(0,255,204,.05);
      border-top-left-radius: 2px;
    }
    .bubble.sys {
      align-self: center;
      border-color: rgba(255,170,0,.22);
      color: #b8a060;
      background: rgba(255,170,0,.04);
      font-size: .82em;
      max-width: 96%;
      padding: .35rem .6rem;
      letter-spacing: .02em;
      font-family: var(--font-ui);
      border-radius: 4px;
      animation: fadeIn .25s ease;
    }

    /* 情报面板 */
    .intel-panel-tabs {
      display: flex; gap: .4rem; margin-bottom: .6rem; flex-wrap: wrap;
    }
    .intel-panel-tabs button {
      padding: .28rem .6rem; font-size: .85em; opacity: .7;
    }
    .intel-panel-tabs button.active {
      opacity: 1; border-color: var(--cyan); color: var(--cyan); background: rgba(0,255,204,.08);
    }
    .intel-profile {
      display: flex; flex-direction: column; gap: .55rem;
    }
    .intel-profile-header {
      display: flex; align-items: center; gap: .6rem;
      padding: .5rem .7rem; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
    }
    .intel-profile-role {
      font-family: var(--font-ui); font-size: .75em; letter-spacing: .08em;
      padding: .15rem .4rem; border: 1px solid rgba(0,255,204,.35); color: var(--cyan); border-radius: 2px;
    }
    .intel-profile-name { font-weight: 700; font-size: 1.05em; }
    .intel-profile-vibe { color: var(--muted); font-size: .85em; }
    .intel-clue-list { display: flex; flex-direction: column; gap: .35rem; }
    .intel-clue-item {
      padding: .4rem .55rem; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02);
      font-size: .88em; line-height: 1.5; display: flex; flex-direction: column; gap: .15rem;
    }
    .intel-clue-meta { font-size: .75em; color: var(--muted); font-family: var(--font-ui); }
    .intel-empty { color: var(--muted); font-size: .85em; padding: .3rem 0; text-align: center; }
    .intel-attack-line {
      font-size: .85em; color: #ffd5e4; border-left: 2px solid var(--magenta); padding-left: .5rem; margin-top: .2rem;
    }
    .intel-clue-insert-btn {
      margin-top: .35rem; padding: .2rem .5rem; font-size: .78em; border-color: var(--magenta); color: var(--magenta); background: rgba(255,45,120,.06);
    }

    /* 推荐选项 */
    .suggestions { display: flex; flex-wrap: wrap; gap: .4rem; }
    .suggestions button {
      padding: .36rem .6rem;
      font-size: .88em;
      letter-spacing: 0;
      font-family: var(--font-body);
      font-weight: 500;
    }
    /* BOSS 情报按钮：红紫色赛博风 */
    .clue-insert.boss-clue,
    #battle-talk-clues .clue-insert {
      border-color: var(--magenta);
      color: var(--magenta);
      background: rgba(255,45,120,.06);
    }
    #mobile-intel-bar .clue-insert {
      width: 100%; text-align: left; font-size: .85em; padding: .45rem .6rem; margin-bottom: .3rem;
    }
    /* 桌面端左侧情报面板可滚动 — 见下方 @media (orientation: portrait) 竖屏版 */
    @media (orientation: landscape) {
      #screen-battle #known-clues {
        overflow-y: auto;
        max-height: 320px;
        overscroll-behavior: contain;
      }
      #screen-battle .left-panel {
        overflow: hidden;
      }
    }

    /* 情报快捷栏 */
    .npc-intel-bar {
      display: flex; flex-wrap: wrap; gap: .35rem;
      padding: .4rem; margin-top: .35rem;
      border: 1px solid rgba(170,68,255,.2);
      background: rgba(170,68,255,.04);
      border-radius: 3px;
      max-height: 140px;
      overflow-y: auto;
    }
    .npc-intel-bar .intel-chip {
      padding: .25rem .5rem;
      font-size: .8em;
      letter-spacing: 0;
      font-family: var(--font-body);
      font-weight: 500;
      border-color: rgba(170,68,255,.35);
      color: var(--purple);
      background: rgba(170,68,255,.07);
      cursor: pointer;
      transition: all .18s;
    }
    .npc-intel-bar .intel-chip:hover {
      background: rgba(170,68,255,.18);
      border-color: var(--purple);
      box-shadow: 0 0 8px rgba(170,68,255,.2);
    }
    .npc-intel-bar .intel-chip.used {
      color: rgba(170,68,255,.25);
      border-color: rgba(170,68,255,.12);
      background: transparent;
      cursor: default;
      text-decoration: line-through;
    }

    /* 背包面板 */
    .bag-section { margin-bottom: .9rem; }
    .bag-section-title {
      font-family: var(--font-ui);
      font-size: .9em;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--muted);
      margin-bottom: .45rem;
      padding-bottom: .25rem;
      border-bottom: 1px solid rgba(0,255,204,.12);
    }
    .bag-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .4rem;
      align-items: center;
      padding: .5rem .6rem;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
      margin-bottom: .3rem;
    }
    .bag-item.equipped {
      border-color: rgba(0,255,204,.35);
      background: rgba(0,255,204,.05);
    }
    .bag-item b { font-size: .92em; color: #eafffb; }
    .bag-item .effect-tag { color: var(--amber); font-size: .82em; }
    .bag-empty { color: var(--muted); font-size: .88em; padding: .3rem 0; }

    .input-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; }

    /* 战斗 */
    .combat-area { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: .65rem; }
    .bars { display: grid; gap: .5rem; }
    .bar-row {
      display: grid;
      grid-template-columns: 110px 1fr 50px;
      gap: .55rem;
      align-items: center;
      font-family: var(--font-ui);
      font-weight: 600;
    }
    .bar {
      height: 16px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.45);
      overflow: hidden;
    }
    .bar span { display: block; height: 100%; transition: width .25s ease; background: linear-gradient(90deg, var(--cyan), #aafff0); }
    .bar.boss span { background: linear-gradient(90deg, var(--magenta), #ffafc8); }
    .combat-log  { overflow: auto; line-height: 1.7; font-size: .9em; }
    .combat-log div { padding: .1rem 0; }
    .combat-log div::before { content: '▸ '; color: var(--muted); }
    .combat-actions { display: flex; flex-wrap: wrap; gap: .5rem; }


    /* 遮罩层 */
    .overlay {
      position: fixed; inset: 0;
      display: none;
      place-items: center;
      z-index: 50;
      background: rgba(0,0,0,.72);
      backdrop-filter: blur(4px);
    }
    .overlay.active { display: grid; }
    .loader-card, .modal-card {
      width: min(540px, calc(100vw - 28px));
      border: 1px solid var(--border);
      background: rgba(4,4,15,.97);
      padding: 1.3rem 1.4rem;
      text-align: center;
      box-shadow: var(--shadow);
    }
    .hex {
      width: 48px; height: 48px;
      margin: 0 auto 1.2rem;
      clip-path: none;
      background: transparent;
      /* 新的赛博双色旋转环 */
      border: 3px solid rgba(0,255,204,.1);
      border-top-color: var(--cyan);
      border-bottom-color: var(--magenta);
      border-radius: 50%;
      animation: spin 1s ease-in-out infinite;
      box-shadow: 0 0 15px rgba(0,255,204,.15), inset 0 0 15px rgba(255,45,120,.15);
    }
    #loading-text { font-family: var(--font-ui); font-weight: 600; font-size: 1.1em; margin-bottom: .5rem; }

    /* === 世界生成全屏布局 (Screen 专用) === */
    #screen-generator.active { display: flex !important; flex-direction: column; align-items: center; justify-content: center; overflow: visible !important; }
    .generator-wrapper {
      display: flex; align-items: center; justify-content: center; max-width: 1000px; margin: 0 auto; padding: 2rem; width: 100%;
    }
    .world-load-container { display: flex; gap: 5rem; align-items: center; width: 100%; text-align: left; }
    .world-load-left { flex-shrink: 0; display: grid; place-items: center; width: 350px; height: 400px; }

    /* 3D 哑铃型空间结构 */
    .holo-scene { perspective: 1200px; width: 350px; height: 400px; display: grid; place-items: center; overflow: visible; }
    .cage-3d { position: relative; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-15deg); animation: spinAssembly 20s linear infinite; }
    @keyframes spinAssembly { to { transform: rotateX(-15deg) rotateY(360deg); } }
    .cube { position: absolute; top: 0; left: 0; transform-style: preserve-3d; }
    .face { position: absolute; box-sizing: border-box; top: 50%; left: 50%; transform: translate(-50%, -50%); backface-visibility: visible; }
    /* 顶层：商店区 */
    .shop-zone { transform: translateY(-120px); }
    .shop-zone .face { width: 140px; height: 140px; border: 2px solid rgba(0,255,204,0.5); background: rgba(0,255,204,0.03); box-shadow: inset 0 0 20px rgba(0,255,204,0.1); }
    .shop-zone .f-front { transform: translate(-50%, -50%) translateZ(70px); }
    .shop-zone .f-back  { transform: translate(-50%, -50%) rotateY(180deg) translateZ(70px); }
    .shop-zone .f-left  { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(70px); }
    .shop-zone .f-right { transform: translate(-50%, -50%) rotateY(90deg) translateZ(70px); }
    .shop-zone .f-top   { transform: translate(-50%, -50%) rotateX(90deg) translateZ(70px); }
    .shop-zone .f-bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(70px); background: transparent; border: 2px dashed rgba(0,255,204,0.5); }
    .node-merch { position: absolute; width: 10px; height: 10px; background: #00ffcc; border-radius: 50%; top: 50%; left: 50%; box-shadow: 0 0 15px 4px rgba(0,255,204,0.6); }
    .n1 { transform: translate(-50%, -50%) translate3d(-35px, 20px, 35px); }
    .n2 { transform: translate(-50%, -50%) translate3d(35px, -20px, -20px); }
    .n3 { transform: translate(-50%, -50%) translate3d(-10px, 30px, -35px); }
    /* 中层：大门/通道 */
    .gate-zone { transform: translateY(0px); }
    .gate-zone .face { width: 40px; height: 100px; border: 1px solid rgba(170,68,255,0.7); background: rgba(170,68,255,0.05); box-shadow: inset 0 0 10px rgba(170,68,255,0.2); }
    .gate-zone .f-front { transform: translate(-50%, -50%) translateZ(20px); }
    .gate-zone .f-back  { transform: translate(-50%, -50%) rotateY(180deg) translateZ(20px); }
    .gate-zone .f-left  { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(20px); }
    .gate-zone .f-right { transform: translate(-50%, -50%) rotateY(90deg) translateZ(20px); }
    /* 底层：BOSS区 */
    .boss-zone { transform: translateY(120px); }
    .boss-zone .face { width: 140px; height: 140px; border: 2px solid rgba(255,45,120,0.6); background: rgba(255,45,120,0.03); box-shadow: inset 0 0 25px rgba(255,45,120,0.15); }
    .boss-zone .f-front  { transform: translate(-50%, -50%) translateZ(70px); }
    .boss-zone .f-back   { transform: translate(-50%, -50%) rotateY(180deg) translateZ(70px); }
    .boss-zone .f-left   { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(70px); }
    .boss-zone .f-right  { transform: translate(-50%, -50%) rotateY(90deg) translateZ(70px); }
    .boss-zone .f-bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(70px); }
    .boss-zone .f-top    { transform: translate(-50%, -50%) rotateX(90deg) translateZ(70px); background: transparent; border: 2px dashed rgba(255,45,120,0.6); }
    .node-boss { position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 25px 10px rgba(255,45,120,0.8), 0 0 60px 20px rgba(255,45,120,0.6); animation: terrorPulse 0.08s infinite alternate; }
    @keyframes terrorPulse { 0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); } 100% { transform: translate(-50%, -50%) scale(0.8); filter: brightness(1.5); } }

    .world-load-right { flex: 1; min-width: 0; }
    .world-load-title { font-family: var(--font-ui); font-size: 2.8rem; color: #fff; margin: 0 0 .3rem; letter-spacing: .08em; text-shadow: 0 0 15px rgba(0,255,204,.2); }
    .world-load-sub { color: var(--amber); font-family: var(--font-ui); font-size: 1.05rem; margin-bottom: 2.5rem; letter-spacing: .05em; }
    .guide-step-list { display: flex; flex-direction: column; gap: 1.5rem; }
    .guide-step { display: flex; gap: 1rem; font-size: 1rem; color: var(--muted); opacity: 0; animation: stepFadeIn .5s forwards ease; animation-delay: calc(.3s + var(--s) * .5s); font-family: var(--font-ui); letter-spacing: .03em; }
    .guide-step:first-child { color: var(--cyan); }
    .guide-step:nth-child(2) { color: var(--purple); }
    .guide-step:last-child { color: var(--magenta); }
    .guide-step-label { color: #fff; font-size: 1.1em; margin-right: .5rem; font-family: 'Rajdhani','Noto Sans SC',sans-serif; }
    .guide-step p { margin: .3rem 0 0; color: var(--muted); font-size: 0.9em; line-height: 1.6; font-family: 'Noto Sans SC',sans-serif; letter-spacing: 0; }
    .guide-mob { display: none; } /* 桌面端隐藏精简版 */
    @keyframes stepFadeIn { to { opacity: 1; transform: translateX(0); } from { transform: translateX(20px); } }

    @media (max-width: 768px), (orientation: portrait) {
      .generator-wrapper { padding: .6rem 1rem; }
      .world-load-container { flex-direction: column; gap: 0.3rem !important; text-align: left !important; }
      .world-load-left { width: 100% !important; height: 130px !important; margin-bottom: -2.5rem; }
      .holo-scene { transform: scale(0.28); transform-origin: center top; }
      .world-load-title { font-size: 1.8rem; }
      .world-load-sub { font-size: .85rem; margin-bottom: .8rem; }
      .guide-step { font-size: 1em; align-items: baseline; }
      .guide-step p { font-size: 1em; margin: .1rem 0 0; }
      .guide-pc { display: none; }
      .guide-mob { display: block; }
    }
    .modal-card { text-align: left; max-height: 84vh; overflow: auto; }
    .modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }

    /* ── 角落设置按钮（setup / welcome 等独立页面）── */
    .btn-settings-corner {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 5;
      font-size: .8em;
      padding: .3rem .55rem;
      border-color: rgba(255,170,0,.35);
      color: var(--amber);
      background: rgba(255,170,0,.06);
      box-shadow: 0 0 8px rgba(255,170,0,.08);
    }
    .btn-settings-corner:hover:not(:disabled) {
      background: rgba(255,170,0,.15);
      box-shadow: 0 0 14px rgba(255,170,0,.2);
    }

    /* ── 设置面板滑块 ── */
    .settings-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: rgba(0,255,204,.12);
      outline: none;
      cursor: pointer;
      margin: 0;
    }
    .settings-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--cyan);
      border: 2px solid rgba(0,255,204,.45);
      box-shadow: 0 0 10px rgba(0,255,204,.3);
      cursor: pointer;
      transition: box-shadow .15s, transform .12s;
    }
    .settings-slider::-webkit-slider-thumb:active { transform: scale(1.15); box-shadow: 0 0 18px rgba(0,255,204,.5); }
    .settings-slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--cyan);
      border: 2px solid rgba(0,255,204,.45);
      box-shadow: 0 0 10px rgba(0,255,204,.3);
      cursor: pointer;
    }
    /* SE 滑块用琥珀色 */
    #settings-se-slider { background: rgba(255,170,0,.12); }
    #settings-se-slider::-webkit-slider-thumb { background: var(--amber); border-color: rgba(255,170,0,.45); box-shadow: 0 0 10px rgba(255,170,0,.3); }
    #settings-se-slider::-webkit-slider-thumb:active { box-shadow: 0 0 18px rgba(255,170,0,.5); }
    #settings-se-slider::-moz-range-thumb { background: var(--amber); border-color: rgba(255,170,0,.45); box-shadow: 0 0 10px rgba(255,170,0,.3); }

    /* 设置按钮微交互 */
    .btn-settings:hover:not(:disabled) {
      background: rgba(255,170,0,.14) !important;
      box-shadow: 0 0 14px rgba(255,170,0,.18);
    }

    /* 结果画面 */
    .result-layout { height: 100%; display: flex; flex-direction: column; gap: .7rem; min-height: 0; }
    #result-card { opacity: 0; position: absolute; pointer-events: none; width: 750px; height: 1200px; } /* 仅用于下载，不显示 */
    #screen-result .panel { flex: 1; overflow-y: auto; gap: .5rem; overscroll-behavior: contain; max-width: 640px; margin: 0 auto; width: 100%; padding: 1rem 1.2rem; }
    #screen-result .typewriter { max-width: none; line-height: 1.7; }
    #screen-result .result-field { margin-bottom: .18rem; line-height: 1.35; }
    #screen-result .result-field-label { font-size: .78em; color: var(--muted); margin-right: .4em; }
    #screen-result .result-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
    #screen-result .result-body { line-height: 1.6; color: #d0f5ee; font-size: 1.02em; margin: .35rem 0; }
    #screen-result .result-observer { margin-top: .35rem; color: var(--magenta); font-style: italic; font-size: .93em; }
    #screen-result hr.result-divider { border: none; border-top: 1px solid rgba(0,255,204,.15); margin: .35rem 0; }

    /* 打字机效果 */
    .typewriter { white-space: pre-wrap; line-height: 1.8; color: #e5fff9; max-width: 780px; font-size: clamp(13px, 2vmin, 15px); }

    /* ── 响应式 ── */

    /* ────── 横屏 ────── */
    @media (orientation: landscape) {
      .game-container { display: flex; flex-direction: row; }
      .npc-portrait  { width: 150px; height: 220px; }
      .boss-portrait { width: 190px; height: 275px; }
      .left-panel    { width: 38%; }
      .right-panel   { width: 62%; }
    }

    /* ── 竖屏快捷输入抽屉（基础隐藏，仅竖屏显示）── */
    .mobile-drawer {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 10001;
      background: rgba(6,12,28,.98);
      border-top: 1px solid rgba(0,255,204,.25);
      box-shadow: 0 -4px 24px rgba(0,0,0,.5);
      padding: .5rem .6rem calc(.7rem + env(safe-area-inset-bottom, 12px));
      transform: translateY(100%);
      transition: transform .25s ease-out;
      max-height: 42dvh;
      overflow-y: auto;
    }
    .mobile-drawer-backdrop {
      display: none;
      position: fixed; inset: 0; z-index: 10000;
      background: rgba(0,0,0,.45);
    }
    .mobile-drawer-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: .5rem;
      font-family: var(--font-ui); font-size: .9em; font-weight: 700; color: var(--amber);
    }
    .mobile-only { display: none !important; }

    /* ────── 竖屏/窄屏 ────── */
    @media (orientation: portrait), (max-width: 600px) {
      /* 全局 */
      .app-corner-chip { font-size: .6em !important; top: max(8px, env(safe-area-inset-top)) !important; right: 8px !important; z-index: 20 !important; }
      body { overflow: hidden; height: 100dvh; } 
      #app { padding: 0 !important; } /* [关键] 清除外层边距，防止 100dvh 溢出出现滚动条 */

      .screen.active { 
        overscroll-behavior: none; 
        height: 100dvh; 
        border: none; /* 移动端去掉外边框 */
        overflow: hidden; 
        padding-top: max(12px, env(safe-area-inset-top)) !important; 
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
      }
      .game-container  { display: flex; flex-direction: column; overscroll-behavior: none; }
      .choice-grid     { grid-template-columns: 1fr 1fr; }
      .two-col         { grid-template-columns: 1fr; }
      .input-row       { grid-template-columns: 1fr auto; align-items: stretch !important; }
      textarea         { min-height: 52px; }
      .bar-row         { grid-template-columns: 72px 1fr 40px; }

      /* 肖像 */
      .npc-portrait  { width: 80px; height: 120px; flex-shrink: 0; }
      .boss-portrait { width: 90px; height: 130px; flex-shrink: 0; }

      /* ── Briefing 页 ── */
      #screen-briefing .terminal-card {
        justify-content: flex-start;
        padding: .6rem 0;
        gap: .75rem;
      }
      #screen-briefing [style*="border:1px solid"] {
        padding: .65rem .9rem;
      }

      /* ── Setup 页 ── */
      #screen-setup .terminal-card { padding: .5rem 0; }
      #screen-setup .choice { min-height: 72px; }
      .btn-settings-corner { top: max(6px, env(safe-area-inset-top)); left: 6px; right: auto; font-size: .7em; padding: .22rem .4rem; }

      /* ── 首页备案 ── */
      #screen-start .terminal-card > div[style*="position:absolute"] {
        position: static !important;
        display: block;
        text-align: center;
        font-size: 10px !important;
        margin-top: .3rem;
      }
      #screen-start .terminal-card > div[style*="position:absolute"] + div[style*="position:absolute"] {
        margin-top: .15rem;
      }

      /* ── 商店页 ── */
      #screen-shop.active { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; padding-bottom: calc(env(safe-area-inset-bottom, 8px) + 8px); }
      #screen-shop .hud { flex-shrink: 0; flex-wrap: wrap; gap: .2rem; align-items: center; padding: .3rem .3rem; }
      #screen-shop .hud button { font-size: .7em; padding: .22rem .35rem; white-space: nowrap; flex-shrink: 0; }
      #screen-shop .hud .btn-abandon-game { font-size: .75em !important; padding: .25rem .4rem !important; }
      #screen-shop .hud .btn-settings { font-size: .75em !important; padding: .25rem .4rem !important; }
      #screen-shop .hud .chip { font-size: .68em; padding: .18rem .32rem; white-space: nowrap; flex-shrink: 0; }
      /* 放弃本局 + 设置按钮：竖屏统一尺寸 */
      #battle-hud .btn-abandon-game,
      #battle-hud .btn-settings { font-size: .7em !important; padding: .22rem .4rem !important; }
      /* 桌面的"情报档案"按钮在竖屏缩为图标 */
      #btn-open-intel { font-size: .75em !important; padding: .25rem .4rem !important; }
      #btn-open-bag { font-size: .75em !important; padding: .25rem .4rem !important; }
      /* 保留完整文字标签，不使用 emoji 缩写 */

      .mobile-only { display: flex !important; }
      button.mobile-only { display: inline-flex !important; }
      /* 隐藏桌面端的内联HUD */
      #screen-shop .right-panel > .panel:first-child .hud { display: none; }
      #screen-shop .right-panel > .panel:first-child .suggestions { display: none; }
      #screen-shop .right-panel > .panel:first-child .npc-intel-bar { display: none; }
      #screen-shop .game-container { flex: 1; height: auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

      /* NPC左侧面板：横向排列，缩成一行 */
      #screen-shop .left-panel {
        flex-direction: row;
        align-items: flex-start;
        gap: .6rem;
        flex-shrink: 0;
        max-height: 140px;
        overflow: hidden;
        padding: .5rem;
      }
      #screen-shop .left-panel > div:nth-child(2) { display: none; } /* 隐藏vibe文字 */
      #screen-shop .left-panel .shop-list {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        max-height: 130px;
        overscroll-behavior: contain;
      }
      /* 右侧面板：对话+输入，去掉内联HUD */
      #screen-shop .right-panel {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: .4rem;
        padding: 0 .2rem;
      }
      #screen-shop .right-panel > .panel:first-child {
        display: none; /* 隐藏原内联HUD+建议 */
      }
      #screen-shop #dialogue-log {
        flex: 1;
        min-height: 100px; max-height: 25vh;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      #screen-shop .right-panel > .panel:last-child { flex-shrink: 0; padding-bottom: calc(.3rem + env(safe-area-inset-bottom, 12px)); }
      #screen-shop .suggestions button { font-size: .82em; padding: .28rem .5rem; }

      /* NPC切换栏：3个名字一行，"进入最终测试"独立行 */
      #npc-switch-bar { width: 100%; flex-wrap: wrap !important; gap: .3rem !important; }
      #npc-switch-bar button[id^="btn-switch-"] { font-size: .68em; padding: .25rem .35rem; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      /* "进入最终测试"占满整行 */
      #btn-go-boss { flex: 1 0 100% !important; font-size: .75em !important; white-space: nowrap !important; padding: .35rem .5rem !important; margin-top: .15rem; }

      /* 竖屏显示抽屉 */
      .mobile-drawer { display: block; }
      .mobile-drawer.open { transform: translateY(0); }
      .mobile-drawer-backdrop.show { display: block; }

      /* ── 战斗页 ── */
      #screen-battle.active { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; padding-bottom: calc(env(safe-area-inset-bottom, 8px) + 8px); }
      /* --- 顶部HUD --- */
      #screen-battle .hud { flex-shrink: 0; flex-wrap: wrap; gap: .2rem; align-items: center; padding: .3rem .3rem; }
      #screen-battle .hud .chip { font-size: .68em; padding: .18rem .32rem; white-space: nowrap; flex-shrink: 0; }
      #screen-battle .hud button { font-size: .7em; padding: .22rem .4rem; white-space: nowrap; flex-shrink: 0; }
      #screen-battle .game-container { flex: 1; height: auto; min-height: 0; overflow: hidden; }

      /* --- 左侧档案/情报面板 （桌面版见上方 @media landscape） --- */
      #screen-battle .left-panel {
        flex-direction: row;
        align-items: center;
        gap: .6rem;
        flex-shrink: 0;
        max-height: 90px;
        overflow: hidden;
        padding: .4rem .5rem;
      }
      /* boss-title/boss-vibe 竖屏也显示，字号缩紧防止溢出 */
      #screen-battle .left-panel .section-title { font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      #screen-battle .left-panel .small { font-size: .72em; }
      #screen-battle #known-clues {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        max-height: 80px;
        overscroll-behavior: contain;
      }
      /* --- 右侧面板（血条+日志+操作栏） --- */
      /* 桌面版见 .right-panel 基础规则 */
      #screen-battle .right-panel {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: .35rem;
        padding: 0 .15rem;
      }
      /* 竖屏收紧血条区留白 */
      #screen-battle .bars { flex-shrink: 0; }
      #screen-battle .bars.panel { padding: .4rem .5rem; }
      #screen-battle #combat-log {
        flex: 1 1 0%;
        min-height: 30px;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      /* --- 对话面板 （桌面版见 .battle-talk-panel 基础规则） --- */
      #screen-battle #battle-talk-panel {
        flex-shrink: 1;
        max-height: 28dvh;
        overflow-y: auto;
      }
      #screen-battle .battle-talk-panel .dialogue-log { max-height: min(12dvh, 140px); }
      #battle-talk-clues {
        max-height: 75px;
        overflow-y: auto;
        align-content: flex-start;
        padding-right: 4px;
      }
      #screen-battle .battle-talk-input-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: .25rem; }

      /* --- 操作栏 --- */
      #screen-battle .combat-actions { 
        flex-shrink: 0; 
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .4rem; 
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 12px));
      }
      #screen-battle .combat-actions button { 
        font-size: .85em;
        padding: .65rem .2rem;
        min-width: 0; 
        white-space: nowrap; 
      }

      /* 压缩对话面板头部空间 */
      #screen-battle .battle-talk-top {
        align-items: center;
        margin-bottom: 0.2rem;
      }
      /* 隐藏冗长的副标题说明文字，释放垂直空间 */
      #screen-battle .battle-talk-top > div > .muted.small {
        display: none;
      }
      /* 缩小标题字号并取消底部边距 */
      #screen-battle .battle-talk-top .section-title {
        font-size: 0.95em;
        margin: 0;
      }
      /* 压缩对话面板自身的内边距，并将最大高度从 38dvh 进一步压低到 35dvh */
      #screen-battle #battle-talk-panel {
        padding: 0.5rem 0.5rem;
        max-height: 35dvh;
      }





      /* ── 结果页 ── */
      .result-layout { gap: .5rem; }
      #screen-result .panel { padding: .6rem .5rem; }
      #screen-result .result-body { font-size: .92em; }
    }

    /* ────── 窄屏额外修正（≤480px）────── */
    @media (max-width: 480px) {
      .choice-grid   { grid-template-columns: 1fr; }
      .title         { font-size: clamp(2.2rem, 14vw, 4rem); }
      .combat-actions button { flex: 1; font-size: .9em; padding: .55rem .5rem; }
      #screen-battle #battle-talk-panel { max-height: 48dvh; }
      .battle-talk-input-row { grid-template-columns: 1fr; }
      #btn-send-boss-talk, #btn-close-boss-talk { width: 100%; }
      #boss-talk-input { max-height: 18dvh; }
    }