: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;
    }
    .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;
    }
    .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);
    }

    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; }

    .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; }

    /* HUD chips */
    .hud {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem;
      align-items: center;
      margin-bottom: .65rem;
    }
    .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, .boss-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;
    }
    .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, .boss-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;
    }

    /* ── 正在输入指示器 ── */
    .typing-indicator {
      display: none;
      align-items: center;
      gap: .3rem;
      padding: .4rem .7rem;
      font-size: .82em;
      color: var(--muted);
      font-family: var(--font-ui);
    }
    .typing-indicator.active { display: flex; }
    .typing-dots {
      display: inline-flex; gap: 3px;
    }
    .typing-dots span {
      width: 6px; height: 6px; border-radius: 50%;
      background: currentColor;
      animation: typingBounce .9s ease-in-out infinite;
    }
    .typing-dots span:nth-child(2) { animation-delay: .15s; }
    .typing-dots span:nth-child(3) { animation-delay: .3s; }
    @keyframes typingBounce {
      0%, 60%, 100% { transform: translateY(0); opacity: .4; }
      30% { transform: translateY(-5px); 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); }

    /* 态度指示器 — 小标签显示当前情绪 */
    .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: .55rem; overflow-y: auto; flex: 1; min-height: 0; }
    .item-card {
      border: 1px solid rgba(255,255,255,.12);
      padding: .65rem .75rem;
      background: rgba(255,255,255,.03);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .5rem;
      align-items: center;
    }
    .item-card b { font-weight: 700; font-size: .95em; color: #eafffb; }
    .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: .5rem;
      padding-right: .2rem;
    }
    .bubble {
      border: 1px solid rgba(255,255,255,.10);
      padding: .55rem .72rem;
      line-height: 1.6;
      max-width: 90%;
      white-space: pre-wrap;
      font-size: .95em;
      border-radius: 4px;
      position: relative;
      animation: fadeIn .25s ease;
    }
    .bubble.player {
      align-self: flex-end;
      border-color: rgba(255,45,120,.38);
      color: #ffd5e4;
      background: rgba(255,45,120,.07);
      border-bottom-right-radius: 1px;
    }
    .bubble.npc {
      align-self: flex-start;
      border-color: rgba(0,255,204,.30);
      color: #dffff8;
      background: rgba(0,255,204,.05);
      border-bottom-left-radius: 1px;
    }
    .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);
    }

    /* 情报面板 */
    .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;
    }

    /* 情报快捷栏 */
    .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: 68px; height: 68px;
      margin: 0 auto 1rem;
      clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
      border: 3px solid var(--cyan);
      background: conic-gradient(from 0deg, transparent, rgba(0,255,204,.42), transparent);
      animation: spin 1s linear infinite;
    }
    #loading-text { font-family: var(--font-ui); font-weight: 600; font-size: 1.1em; margin-bottom: .5rem; }
    .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; }

    /* 结果画面 */
    .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: .35rem; }
    #screen-result .result-field-label { font-size: .8em; color: var(--muted); display: block; margin-bottom: .1rem; }
    #screen-result .result-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
    #screen-result .result-body { line-height: 1.8; color: #d0f5ee; font-size: 1.05em; margin: .6rem 0; }
    #screen-result .result-observer { margin-top: .6rem; color: var(--magenta); font-style: italic; font-size: .95em; }
    #screen-result hr.result-divider { border: none; border-top: 1px solid rgba(0,255,204,.15); margin: .6rem 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%; }
    }

    /* ────── 竖屏 ────── */
    @media (orientation: portrait) {
      /* 全局 */
      body { overflow: hidden; } /* 禁止body滚动，防止下拉刷新 */
      .screen.active { overscroll-behavior: none; }
      .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; }
      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; }

      /* ── 商店页 ── */
      #screen-shop.active { display: flex; flex-direction: column; padding-bottom: .5rem; }
      #screen-shop .hud { flex-shrink: 0; }
      #screen-shop .game-container { flex: 1; height: auto; min-height: 0; overflow: hidden; }

      /* 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;
      }
      /* 右侧面板撑满剩余空间并可滚动 */
      #screen-shop .right-panel {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: .45rem;
        padding: 0 .2rem;
      }
      #screen-shop .right-panel > .panel:first-child { flex-shrink: 0; }
      #screen-shop #dialogue-log {
        flex: 1;
        min-height: 80px;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      #screen-shop .right-panel > .panel:last-child { flex-shrink: 0; }
      #screen-shop .suggestions button { font-size: .82em; padding: .28rem .5rem; }

      /* ── 战斗页 ── */
      #screen-battle.active { display: flex; flex-direction: column; }
      #screen-battle .hud { flex-shrink: 0; }
      #screen-battle .game-container { flex: 1; height: auto; min-height: 0; overflow: hidden; }

      /* Boss左侧：横向缩成一行 */
      #screen-battle .left-panel {
        flex-direction: row;
        align-items: center;
        gap: .6rem;
        flex-shrink: 0;
        max-height: 110px;
        overflow: hidden;
        padding: .5rem;
      }
      #screen-battle .left-panel > div:first-child + div { display: none; } /* 隐藏boss title+vibe */
      #screen-battle #known-clues {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        max-height: 100px;
        overscroll-behavior: contain;
      }
      /* 战斗右侧面板 */
      #screen-battle .right-panel {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: .5rem;
      }
      #screen-battle .bars { flex-shrink: 0; }
      #screen-battle #combat-log {
        flex: 1;
        min-height: 72px;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      #screen-battle #battle-talk-panel {
        flex-shrink: 0;
        max-height: 42dvh;
      }
      #screen-battle .battle-talk-panel .dialogue-log { max-height: min(18dvh, 170px); }
      #screen-battle .battle-talk-input-row { grid-template-columns: minmax(0, 1fr) auto auto; }
      #screen-battle .combat-actions { flex-shrink: 0; }


      /* ── 结果页 ── */
      .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: 26dvh; }
    }