:root {
      --bg-dark: #0a0e17;
      --panel-bg: rgba(18, 24, 38, 0.95);
      --border-color: #2b394f;
      --gold: #f59e0b;
      --gold-light: #fbbf24;
      --accent: #38bdf8;
      --green: #22c55e;
      --red: #ef4444;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-tap-highlight-color: transparent; }
    body {
      background: #020408;
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      overflow: hidden;
    }
    #game-container {
      width: 100vw;
      max-width: 430px;
      height: 100vh;
      max-height: 880px;
      background: radial-gradient(circle at 50% 20%, #151e2e 0%, #06090e 100%);
      display: flex;
      flex-direction: column;
      position: relative;
      border: 1px solid #1e293b;
      overflow: hidden;
    }

    /* 顶栏信息 */
    header {
      height: 48px;
      padding: 0 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--panel-bg);
      border-bottom: 1px solid var(--border-color);
      z-index: 10;
    }
    .stage-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      color: var(--gold-light);
      font-size: 13px;
    }
    .res-group {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .res-pill {
      background: #111827;
      border: 1px solid #374151;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
      color: #fde047;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .btn-speed {
      background: #2563eb;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: bold;
      cursor: pointer;
    }

    /* 核心舞台区域 */
    #viewport {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #battle-canvas {
      position: absolute;
      left: 0; top: 0;
      width: 100%;
      height: 100%;
    }

    /* 悬浮战斗状态与快捷英雄卡 */
    .battle-overlay {
      position: absolute;
      top: 10px;
      left: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
      z-index: 5;
    }
    .log-pill {
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(4px);
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 11px;
      color: #cbd5e1;
      max-width: 90%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      animation: fadeIn 0.3s;
    }

    /* 战场下方的英雄快捷插槽 */
    .hero-dock {
      position: absolute;
      bottom: 64px;
      left: 0;
      right: 0;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      padding: 0 10px;
      pointer-events: auto;
      z-index: 5;
    }
    .dock-card {
      background: rgba(15, 23, 42, 0.88);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 6px 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      backdrop-filter: blur(6px);
      cursor: pointer;
      position: relative;
      transition: transform 0.1s, border-color 0.15s;
    }
    .dock-card:active { transform: scale(0.96); }
    .dock-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 12px;
      color: #fff;
      box-shadow: 0 0 8px rgba(0,0,0,0.5);
      margin-bottom: 3px;
    }
    .dock-name { font-size: 10px; font-weight: 600; }
    .dock-stars { font-size: 9px; color: var(--gold-light); height: 12px; }
    .dock-bars {
      width: 86%;
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-top: 2px;
    }
    .bar { height: 3px; background: #334155; border-radius: 2px; overflow: hidden; }
    .bar-hp { height: 100%; background: var(--green); width: 100%; transition: width 0.1s; }
    .bar-cd { height: 100%; background: var(--accent); width: 0%; }
    .dock-card.dead { opacity: 0.35; filter: grayscale(1); }

    /* 底部导航 Tab 栏 */
    .tab-bar {
      height: 56px;
      background: #090e17;
      border-top: 1px solid var(--border-color);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      z-index: 10;
    }
    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      color: #64748b;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s;
    }
    .tab-item.active { color: var(--gold-light); }
    .tab-icon { font-size: 18px; }

    /* 页面层级容器 */
    .page-view {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(10, 14, 23, 0.96);
      backdrop-filter: blur(12px);
      z-index: 8;
      display: none;
      flex-direction: column;
      padding: 14px;
      gap: 12px;
      animation: tabFadeIn 0.2s ease-out;
    }
    .page-view.show { display: flex; }
    .page-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border-color);
    }
    .page-title { font-size: 15px; font-weight: 700; color: #f8fafc; }
    .page-scroll {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-right: 2px;
    }

    .ui-card {
      background: #151d2c;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .btn {
      padding: 6px 12px;
      border-radius: 6px;
      border: none;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .btn:active { transform: scale(0.96); }
    .btn-gold { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; }
    .btn-blue { background: #0284c7; color: #fff; }
    .btn-green { background: #16a34a; color: #fff; }
    .btn-gray { background: #334155; color: #94a3b8; }
    .btn-red { background: #dc2626; color: #fff; }

    /* 抽卡池展示 */
    .gacha-altar {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 16px;
    }
    .chest-orb {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: radial-gradient(circle, #f59e0b 0%, #78350f 70%, transparent 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 42px;
      box-shadow: 0 0 35px rgba(245, 158, 11, 0.4);
      animation: floatBreath 2.4s infinite ease-in-out;
    }
    .gacha-actions {
      display: flex;
      gap: 12px;
      width: 100%;
    }
    .gacha-result-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      margin-top: 10px;
    }
    .gacha-item-card {
      background: #1e293b;
      border: 1px solid var(--gold);
      border-radius: 6px;
      padding: 6px 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 10px;
      animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* 武将详情抽屉 */
    .hero-sheet {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 82%;
      background: #0f172a;
      border-top: 2px solid var(--accent);
      border-radius: 16px 16px 0 0;
      z-index: 20;
      padding: 14px;
      display: none;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 -10px 40px rgba(0,0,0,0.85);
      animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sheet-head { display: flex; justify-content: space-between; align-items: center; }

    /* 抽屉内部双Tab */
    .sheet-sub-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: #1e293b;
      border-radius: 6px;
      padding: 3px;
      gap: 4px;
    }
    .sub-tab-btn {
      padding: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      border: none;
      border-radius: 4px;
      background: transparent;
      cursor: pointer;
    }
    .sub-tab-btn.active {
      background: #0284c7;
      color: #fff;
    }

    .skill-node {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 6px;
      padding: 6px 8px;
      font-size: 11px;
    }
    .skill-node.active { border-color: var(--accent); background: #0c2136; }

    /* 装备专栏卡片 */
    .equip-slot-box {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 6px;
      padding: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
    }
    .equip-all-item {
      background: #182234;
      border: 1px solid #334155;
      border-radius: 6px;
      padding: 8px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
    }
    .equip-status-tag {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 6px;
    }
    .tag-idle { background: #166534; color: #86efac; }
    .tag-worn { background: #854d0e; color: #fde047; }
    .tag-self { background: #1e3a8a; color: #93c5fd; }

    /* 装备品级与词缀（颜色由 core/equipment.js 的 rarityColor 给出） */
    .equip-slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .equip-slot-grid .equip-slot-box { align-items: flex-start; padding: 6px 8px; }
    .slot-title { color: #94a3b8; font-size: 10px; }
    .affix-line { font-size: 10px; color: #cbd5e1; line-height: 1.4; }
    .affix-line.dim { color: #64748b; }

    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes popIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    @keyframes floatBreath {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-8px) scale(1.04); }
    }

    /* ---------- 竞技场 ---------- */
    .arena-profile {
      display: flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, #1b2434, #131a28);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 10px 12px;
    }
    .arena-name {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #f8fafc;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .arena-sub { font-size: 11px; color: #94a3b8; }
    .arena-tickets {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      color: #cbd5e1;
      background: #131a28;
      border: 1px dashed #334155;
      border-radius: 8px;
      padding: 6px 10px;
    }
    .arena-section { font-size: 11px; font-weight: 700; color: var(--gold-light); padding-top: 4px; }
    .arena-hint {
      font-size: 10px;
      line-height: 1.5;
      color: #94a3b8;
      background: rgba(56, 189, 248, 0.08);
      border: 1px solid rgba(56, 189, 248, 0.25);
      border-radius: 6px;
      padding: 6px 8px;
    }
    .arena-opponent {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #151d2c;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 10px 12px;
    }
    .arena-team { display: flex; gap: 4px; margin-top: 6px; }
    .arena-avatar {
      position: relative;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      color: #fff;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    }
    .arena-avatar i {
      position: absolute;
      right: -3px;
      bottom: -3px;
      background: #0f172a;
      color: var(--gold-light);
      font-size: 8px;
      font-style: normal;
      font-weight: 700;
      border: 1px solid #334155;
      border-radius: 6px;
      padding: 0 3px;
    }
    .arena-tag { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
    .arena-tag-bot { background: #334155; color: #cbd5e1; }
    .arena-tag-live { background: #166534; color: #86efac; }
    .arena-rank-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: #cbd5e1;
      background: #131a28;
      border-radius: 6px;
      padding: 5px 8px;
    }
    .arena-rank-row.me { border: 1px solid var(--gold); color: #fde047; }
    .arena-rank-no { width: 16px; font-weight: 700; color: #64748b; }

    .arena-result {
      position: absolute;
      inset: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(2, 4, 8, 0.72);
      backdrop-filter: blur(4px);
      animation: fadeIn 0.2s ease;
    }
    .arena-result-card {
      width: 100%;
      max-width: 320px;
      padding: 16px;
      text-align: center;
      background: #0f172a;
      border: 1px solid var(--accent);
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
      animation: popIn 0.22s ease;
    }
    .arena-result-title { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
    .arena-result-title.win { color: var(--gold-light); }
    .arena-result-title.lose { color: #94a3b8; }
    .arena-result-score { font-size: 13px; color: #e2e8f0; margin: 10px 0 6px; }
    .arena-result-score .up { color: var(--green); }
    .arena-result-score .down { color: var(--red); }

    /* 顶栏的世界等级徽标 */
    .wl-pill {
      display: flex;
      align-items: center;
      gap: 3px;
      background: #111827;
      border: 1px solid #374151;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      color: #a5b4fc;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .wl-pill.capped {
      color: #fca5a5;
      border-color: #7f1d1d;
      background: #1f1113;
    }
    .stage-badge { white-space: nowrap; overflow: hidden; min-width: 0; }
    .stage-badge #stage-title { overflow: hidden; text-overflow: ellipsis; }
    .res-group { flex-shrink: 0; }

    /* 世界等级 / 累计额度条（祈愿页） */
    .world-strip {
      background: rgba(56, 189, 248, 0.06);
      border: 1px solid rgba(56, 189, 248, 0.22);
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .world-strip.warn { border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.07); }
    .world-strip.capped { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.08); }
    .wl-strip-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
      font-size: 12px;
      color: #cbd5e1;
    }
    .wl-strip-head b { color: var(--gold-light); }
    .wl-bar {
      height: 5px;
      border-radius: 3px;
      background: #1e293b;
      overflow: hidden;
    }
    .wl-bar i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, #38bdf8, #22c55e);
      transition: width 0.25s ease;
    }
    .world-strip.warn .wl-bar i { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
    .world-strip.capped .wl-bar i { background: linear-gradient(90deg, #ef4444, #f97316); }