@charset "UTF-8";

:root {
  color-scheme: dark;
  --font-main: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* DESIGN.md: PlayStation Marketing System */
  --color-primary: #0070d1;
  --color-primary-pressed: #0064b7;
  --color-primary-active: #004d8d;
  --on-primary: #ffffff;

  --color-commerce: #d53b00;
  --color-commerce-pressed: #aa2f00;
  --on-commerce: #ffffff;

  /* Canvas & Surface */
  --canvas-dark: #000000;
  --canvas-light: #ffffff;
  --surface-dark-elevated: #121314;
  --surface-dark-card: #181818;
  --surface-soft: #f3f3f3;
  --surface-card: #f5f7fa;
  --surface-filter: rgba(245, 247, 250, 0.3);

  /* Ink */
  --ink: #000000;
  --ink-deep: #121314;
  --ink-elevated: #181818;
  --body-light: rgba(0, 0, 0, 0.6);
  --body-dark: rgba(255, 255, 255, 0.7);
  --mute-light: #6b6b6b;
  --mute-dark: rgba(229, 229, 229, 0.55);
  --ash-light: #cccccc;
  --ash-dark: rgba(229, 229, 229, 0.2);

  /* Hairlines */
  --hairline-light: #f3f3f3;
  --hairline-dark: rgba(229, 229, 229, 0.2);

  /* Links */
  --link-light: #0064b7;
  --link-dark: #53b1ff;

  /* Warning */
  --color-warning: #c81b3a;

  /* Semantic aliases (backward compat with existing CSS) */
  --bg-deep: var(--canvas-dark);
  --bg-surface: var(--surface-dark-elevated);
  --bg-panel: var(--surface-dark-elevated);
  --bg-panel-sub: var(--surface-dark-card);
  --bg-card: var(--surface-dark-card);
  --bg-card-hover: var(--surface-dark-elevated);
  --ink-primary: var(--on-dark, #ffffff);
  --ink-secondary: var(--body-dark);
  --ink-muted: var(--mute-dark);
  --ink-dim: var(--ash-dark);
  --on-dark: #ffffff;
  --color-blue: var(--color-primary);
  --color-blue-dark: var(--color-primary-pressed);
  --color-blue-glow: rgba(0, 112, 209, 0.35);
  --border-subtle: var(--hairline-dark);
  --border-strong: rgba(229, 229, 229, 0.35);
  --border-focus: var(--color-primary);
  /* Legacy aliases used by existing component styles. */
  --color-brand: var(--color-primary);
  --color-cyan: var(--color-primary);

  /* Rarity tiers — 统一色板（霓虹档，保证在 #121626 深底上醒目）：
     普通=米白 / 优秀=绿 / 稀有=天蓝 / 史诗=紫 / 传说=品红红。
     传说用 #ff2d6f 而非蓝：与 warrior 主题蓝、稀有档蓝撞色，
     也与既定红（rogue #ef4444 / 珊瑚 #ff756d）区分开。 */
  --rarity-1: #f4f1ea;
  --rarity-1-bg: rgba(244, 241, 234, 0.14);
  --rarity-2: #4ade80;
  --rarity-2-bg: rgba(74, 222, 128, 0.16);
  --rarity-3: #38bdf8;
  --rarity-3-bg: rgba(56, 189, 248, 0.16);
  --rarity-4: #c084fc;
  --rarity-4-bg: rgba(192, 132, 252, 0.18);
  --rarity-5: #ff2d6f;
  --rarity-5-bg: rgba(255, 45, 111, 0.18);

  /* P3 Shattered Ring Observatory tokens and compatibility aliases. */
  --obs-night: #091126;
  --obs-night-2: #0e1932;
  --obs-panel: #101d38e8;
  --obs-moon: #ecf5ff;
  --obs-muted: #8ca0be;
  --obs-ice: #79e2ef;
  --ember-coral: #ff766d;
  --ember-soft: #ff766d24;
  --ring-ghost: #b8d5e01f;
  --obs-line: #2a4669;
  --portrait-ink: #11131a;
  --portrait-ivory: #e9e1d2;
  --primary: var(--obs-ice);
  --action: var(--ember-coral);
  --color-primary: var(--obs-ice);
  --color-primary-pressed: #5ccfdb;
  --color-primary-active: #3aa8b4;
  --color-brand: var(--obs-ice);
  --color-cyan: var(--obs-ice);
  --color-blue: var(--obs-ice);
  --color-blue-dark: #3aa8b4;
  --color-blue-glow: var(--ember-soft);
  --color-commerce: var(--ember-coral);
  --color-commerce-pressed: #e65e59;
}

/* Current loadout: centered acrylic modal with an independently draggable body. */
#modal-loadout-overlay {
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 10, 18, 0.48);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}

#modal-loadout-sheet {
  width: min(100%, 520px);
  height: auto;
  max-height: min(86dvh, 720px);
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--color-primary);
  background: rgba(18, 19, 20, 0.98);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: centerModalZoom 0.24s cubic-bezier(0.34, 1.36, 0.54, 1);
  padding: 16px;
}

#modal-loadout-sheet .loadout-scroll {
  min-height: 0 !important;
  max-height: calc(min(86dvh, 720px) - 86px) !important;
  height: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  cursor: grab;
}

#modal-loadout-sheet .loadout-scroll.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto !important;
  user-select: none;
}

#modal-loadout-sheet .stat-grid-sheet {
  margin: 0;
}

#modal-loadout-sheet .loadout-inventory-bar {
  margin-top: 0;
}

@media (max-width: 520px) {
  #modal-loadout-overlay { padding: 10px; }
  #modal-loadout-sheet {
    max-height: 90dvh;
    padding: 12px;
  }
  #modal-loadout-sheet .loadout-scroll {
    max-height: calc(90dvh - 78px) !important;
  }
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
  font-family: var(--font-main);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ink-primary);
}
/* Ambient Lighting — magenta/cyan duotone */
body::before {
  content: "";
  position: fixed;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.07) 0%, rgba(37, 99, 235, 0.05) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Main Container Shell */
#game-shell {
  position: relative;
  width: min(100vw, 450px);
  height: min(100vh, 880px);
  max-height: 920px;
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: 0 25px 70px -15px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(53, 224, 232, 0.12);
  display: flex;
  flex-direction: column;
}

/* Combat uses the complete viewport so the arena and dodge space are not letterboxed. */
#game-shell.battle-fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}

@media (min-width: 480px) {
  #game-shell {
    border-radius: 0;
  }

  #game-shell.battle-fullscreen {
    border-radius: 0;
  }
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  z-index: 1;
}

#ui-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

/* Base Dark Screen Structure */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 16px 16px;
  pointer-events: auto;
  color: var(--ink-primary);
  background: rgba(7, 12, 24, 0.97);
  backdrop-filter: blur(20px);
  animation: screenFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes screenFadeIn {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* P3R-style diagonal light sweep on every screen mount */
.screen:not(.screen--menu)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 42%,
    rgba(53, 224, 232, 0.16) 49%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 58%);
  transform: translateX(-130%) skewX(-10deg);
  animation: p3rSweep 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
  z-index: 5;
}

@keyframes p3rSweep { 0%, 100% { opacity: 0; } 50% { opacity: 0.3; } }

/* Staggered content entrance (exclude popups, overlays and drawers) */
.screen > *:not(.diff-popup-overlay):not(.diff-popup-drawer):not(.modal-overlay):not(.draw-confirm-overlay):not(.pause-overlay) {
  animation: p3rRise 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.screen > *:not(.diff-popup-overlay):not(.diff-popup-drawer):not(.modal-overlay):not(.draw-confirm-overlay):not(.pause-overlay):nth-child(2) { animation-delay: 0.05s; }
.screen > *:not(.diff-popup-overlay):not(.diff-popup-drawer):not(.modal-overlay):not(.draw-confirm-overlay):not(.pause-overlay):nth-child(3) { animation-delay: 0.09s; }
.screen > *:not(.diff-popup-overlay):not(.diff-popup-drawer):not(.modal-overlay):not(.draw-confirm-overlay):not(.pause-overlay):nth-child(4) { animation-delay: 0.13s; }
.screen > *:not(.diff-popup-overlay):not(.diff-popup-drawer):not(.modal-overlay):not(.draw-confirm-overlay):not(.pause-overlay):nth-child(5) { animation-delay: 0.17s; }

.scroll-container > * {
  animation: p3rCardIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.scroll-container > *:nth-child(1) { animation-delay: 0.08s; }
.scroll-container > *:nth-child(2) { animation-delay: 0.12s; }
.scroll-container > *:nth-child(3) { animation-delay: 0.16s; }
.scroll-container > *:nth-child(4) { animation-delay: 0.20s; }
.scroll-container > *:nth-child(5) { animation-delay: 0.24s; }
.scroll-container > *:nth-child(6) { animation-delay: 0.28s; }
.scroll-container > *:nth-child(n+7) { animation-delay: 0.32s; }

@keyframes p3rRise {
  from { opacity: 0; transform: translateX(-20px) skewX(-6deg); }
  to { opacity: 1; transform: none; }
}

@keyframes p3rCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Screen Headers */
.screen-header {
  margin-bottom: 12px;
  flex-shrink: 0;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  background: var(--bg-panel-sub);
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.15s ease;
}

.btn-back:hover {
  background: var(--bg-card-hover);
  color: var(--ink-primary);
  border-color: var(--color-blue);
}

.btn-back:active {
  transform: translateY(1px);
}

.screen-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan);
  background: rgba(53, 224, 232, 0.1);
  border: none;
  border-left: 2px solid var(--color-cyan);
  padding: 3px 10px;
  border-radius: 0;
  margin-bottom: 4px;
}

.screen-title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  font-style: italic;
  color: var(--ink-primary);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--color-cyan);
}

.screen-desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.45;
}

/* 3D Tactile Arcade Button System — P3R beveled corners */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.25;
  border-radius: 9999px;
  padding: 12px 28px;
  min-height: 44px;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn:active {
  transform: translateY(3px) !important;
}

.btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
  box-shadow: none !important;
  transform: none !important;
}

/* Primary Magenta Arcade Button */
.btn-primary {
  color: var(--on-primary);
  background: var(--color-primary);
  border-radius: 9999px;
  padding: 12px 28px;
  font-weight: 700;
  letter-spacing: 0.45px;
  box-shadow: none;
  transition: background 0.15s ease;
}

.btn-primary:active {
  background: var(--color-primary-pressed);
}

/* Secondary tertiary actions stay visible without competing with primary CTAs. */
.btn-info,
.btn-muted {
  color: #dceaff;
  background: #1d3a57;
  border: 1px solid rgba(83, 177, 255, 0.48);
  border-radius: 9999px;
  padding: 12px 28px;
  font-weight: 700;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-info:active,
.btn-muted:active {
  background: #16314a;
  border-color: rgba(83, 177, 255, 0.62);
}

/* Danger Red Button */
.btn-danger {
  color: #ffffff;
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.38);
}

/* Scrollable Container */
.scroll-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 2px 14px;
  display: grid;
  gap: 10px;
  scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

.screen-footer {
  margin-top: auto;
  padding-top: 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ========================================================
   SCREEN: MAIN MENU (主菜单)
   ======================================================== */
.screen--menu {
  background:
    linear-gradient(180deg, rgba(53, 224, 232, 0.045) 0%, transparent 26%),
    radial-gradient(circle at 50% 18%, var(--surface-dark-elevated) 0%, var(--canvas-dark) 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 34px 20px 22px;
  text-align: center;
}

.screen--menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-cyan) 50%, transparent);
  opacity: 0.65;
}

.menu-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.menu-logo-wrap {
  position: relative;
  display: inline-block;
}

.menu-logo-glow {
  position: absolute;
  inset: -14px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.5) 0%, transparent 70%);
  filter: blur(18px);
  animation: pulseGlow 3s infinite alternate;
}

@keyframes pulseGlow {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 1; }
}

.menu-title {
  margin: 0;
  font-size: clamp(48px, 14vw, 68px);
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
  line-height: 1;
}

.menu-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 2px;
  background: rgba(53, 224, 232, 0.08);
  border-left: 2px solid var(--color-cyan);
  border-right: 1px solid rgba(59, 130, 246, 0.55);
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.hero-avatar-showcase {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 14px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-avatar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(53, 224, 232, 0.4);
  animation: spinSlow 12s linear infinite;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { rotate: 360deg; }
}

.hero-avatar-blob {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 24px rgba(220, 38, 38, 0.7), inset 0 3px 6px rgba(255, 255, 255, 0.4);
  position: relative;
  animation: heroBob 2.5s ease-in-out infinite alternate;
}

@keyframes heroBob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

.menu-stats-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  font-size: 12px;
  color: var(--ink-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-stats-pill strong {
  color: #fbbf24;
}

.menu-actions {
  width: min(100%, 300px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.25;
  border-radius: 9999px;
  padding: 12px 28px;
  min-height: 44px;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.menu-actions .btn:nth-child(1) { animation-delay: 0.06s; }
.menu-actions .btn:nth-child(2) { animation-delay: 0.14s; }
.menu-actions .btn:nth-child(3) { animation-delay: 0.22s; }
.menu-actions .btn:nth-child(4) { animation-delay: 0.30s; }
.menu-actions .btn:nth-child(5) { animation-delay: 0.38s; }

.menu-footer-meta {
  font-size: 11.5px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-feedback {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.menu-feedback:hover {
  color: var(--ink-primary);
  text-decoration: underline;
}

.testmode-badge {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-secondary);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.15s ease;
}

.testmode-badge:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.18);
}

/* ========================================================
   SCREEN: ROLE SELECTION (角色选择 - 战术英雄卡)
   ======================================================== */
.role-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--border-strong);
  border-radius: 0;
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--bg-card);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.15s ease;
  position: relative;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.role-card:hover:not(:disabled) {
  border-color: var(--color-cyan);
  border-left-color: var(--color-cyan);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: none;
  filter: none;
}

.role-card[aria-pressed="true"] {
  border-color: var(--color-brand);
  border-left-color: var(--color-brand);
  background: #14264a;
  filter: none;
}

.hero-swipe-hint {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
  margin: 0 0 6px;
  padding: 3px 8px;
  background: rgba(9, 15, 28, 0.6);
  border-radius: 8px;
  border: 1px dashed rgba(53, 224, 232, 0.25);
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}

.hero-puppet-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

/* AI 立绘（选人展台）：盖在木偶 Canvas 之上，加载失败由 JS 移除 */
.hero-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* AI 立绘（图鉴详情弹窗）：盖在 SVG/图标之上，cover 顶部对齐聚焦上半身 */
.portrait-detail-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: inherit;
  pointer-events: none;
}

.hero-weapon-types-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.w-types-label {
  font-size: 10.5px;
  font-weight: 800;
  color: #94a3b8;
}

.w-types-pills {
  display: flex;
  gap: 4px;
}

.w-type-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
}

.w-type-pill.melee { border-color: rgba(96, 165, 250, 0.45); color: #bfdbfe; }
.w-type-pill.ranged { border-color: rgba(34, 197, 94, 0.4); color: #86efac; }
.w-type-pill.magic { border-color: rgba(99, 102, 241, 0.4); color: #d8b4fe; }
.w-type-pill.aoe { border-color: rgba(225, 29, 72, 0.4); color: #fda4af; }
.w-type-pill.summon { border-color: rgba(234, 179, 8, 0.4); color: #fef08a; }
.w-type-pill.dmg-physical { border-color: rgba(244, 63, 94, 0.45); background: rgba(244, 63, 94, 0.12); color: #fda4af; font-weight: 900; }
.w-type-pill.dmg-magic { border-color: rgba(192, 132, 252, 0.45); background: rgba(192, 132, 252, 0.12); color: #e9d5ff; font-weight: 900; }

.hero-passive-banner {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: #fef08a;
  line-height: 1.4;
}

.hero-passive-banner strong {
  color: #fbbf24;
}

.hero-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.stat-grid-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-grid-cell.hp { border-color: rgba(239, 68, 68, 0.25); }
.stat-grid-cell.spd { border-color: rgba(34, 197, 94, 0.25); }
.stat-grid-cell.atk { border-color: rgba(96, 165, 250, 0.3); }
.stat-grid-cell.crt { border-color: rgba(236, 72, 153, 0.25); }
.stat-grid-cell.rgn { border-color: rgba(16, 185, 129, 0.25); }
.stat-grid-cell.lst { border-color: rgba(220, 38, 38, 0.25); }

.stat-cell-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}

.stat-cell-value {
  font-size: 12px;
  font-weight: 900;
  color: #f1f5f9;
}

.roles-scroll-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.role-card:disabled {
  opacity: 0.45;
  filter: grayscale(0.7);
  background: #0d1520;
  cursor: not-allowed;
}

.role-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.role-avatar-illustrated {
  width: 52px;
  height: 52px;
  border-radius: 5px;
  border: 1.5px solid #35e0e8;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  background: #0c0c16;
}

.role-avatar-illustrated svg {
  width: 100%;
  height: 100%;
}

.role-avatar {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.4);
}

.role-header-info {
  flex: 1;
}

.role-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.role-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink-primary);
}

.role-school-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(53, 224, 232, 0.15);
  color: #35e0e8;
  border: 1px solid rgba(53, 224, 232, 0.3);
}

.role-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.stat-mini-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
}

.role-passive-box {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  padding: 8px 10px;
  border: 1px dashed var(--border-strong);
  font-size: 12px;
  color: #fbbf24;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* ========================================================
   SCREEN: BATTLE HUD OVERLAY (战斗界面)
   ======================================================== */
.battle-hud-top {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  z-index: 20;
}

.battle-hud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 0;
  background: rgba(10, 10, 18, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 2px solid rgba(53, 224, 232, 0.55);
  color: var(--ink-primary);
  font-size: 13px;
  font-weight: 800;
  box-shadow: none;
  pointer-events: auto;
  animation: p3rRise 0.28s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: 0.04s;
}

.hud-timer {
  font-size: 20px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.05em;
  padding: 4px 16px;
}

.hud-timer.urgent {
  color: #f87171;
  animation: urgentPulse 0.6s infinite alternate;
}

@keyframes urgentPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); filter: none; }
}

.hud-gold {
  color: #fde047;
}

.hud-xp-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hud-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-cyan) 0%, var(--color-brand) 100%);
  border-radius: 0;
  transition: width 0.2s ease;
}

.battle-corner-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
  z-index: 25;
}

/* The radar is drawn inside the combat canvas. Reserve the lower-right corner so
   the touch joystick and its gesture area keep a clear, predictable lane. */
#game-shell.battle-fullscreen #game-canvas {
  touch-action: none;
}

.btn-hud-icon {
  width: 38px;
  height: 38px;
  border-radius: 0;
  border-radius: 8px;
  background: rgba(9, 15, 28, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s ease;
}

.btn-hud-icon:active {
  transform: scale(0.92);
}

/* ========================================================
   SCREEN: UPGRADE (属性强化 / 等级提升)
   ======================================================== */
.level-up-banner {
  background: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 8px 24px var(--color-magenta-glow);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.level-up-banner::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
  animation: bannerShimmer 3s infinite linear;
}

@keyframes bannerShimmer {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(50%); }
}

.level-up-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.level-up-subtitle {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 2px;
}

.upgrade-card {
  width: 100%;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  padding: 14px 16px;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.upgrade-card:hover {
  border-color: var(--color-brand);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--color-magenta-glow);
}

.upgrade-card:active {
  transform: translateY(1px);
}

.rpg-icon {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(255, 42, 68, 0.6)) drop-shadow(0 0 6px rgba(255, 42, 68, 0.25));
  transition: filter 0.2s ease;
}

/* 位图图集 sprite（assets/icons-atlas/atlas_0.webp，96px 格）：背景图放大到整张,
   按格换算百分比定位, 随容器缩放, 与 .rpg-icon 同构可直接互换 */
.rpg-icon-atlas {
  width: 100%;
  height: 100%;
  display: block;
  background-image: url("assets/icons-atlas/atlas_0.webp");
  background-size: 2133.3333% 2133.3333%;
  background-repeat: no-repeat;
  border-radius: 10%;
}

.upgrade-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: radial-gradient(circle at center, #161a24 0%, #0a0c12 100%);
  border: 1.5px solid rgba(255, 42, 68, 0.45);
  color: #ff2a44;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(255, 42, 68, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.7);
  transition: all 0.2s ease;
}

.upgrade-icon-wrap:hover {
  border-color: #ff2a44;
  box-shadow: 0 0 16px rgba(255, 42, 68, 0.5), inset 0 0 10px rgba(255, 42, 68, 0.2);
  transform: scale(1.04);
}

.upgrade-icon-wrap svg,
.upgrade-icon-wrap .rpg-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.upgrade-content {
  flex: 1;
}

.upgrade-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-primary);
  display: block;
}

.upgrade-desc {
  font-size: 13px;
  font-weight: 700;
  color: #4ade80;
  margin-top: 3px;
  display: block;
}

.upgrade-btn-tag {
  padding: 6px 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-secondary);
  white-space: nowrap;
}

.upgrade-card:hover .upgrade-btn-tag {
  background: var(--color-brand);
  color: #ffffff;
  border-color: var(--color-brand);
}

/* ========================================================
   SCREEN: CARD DRAW (命运抽卡)
   ======================================================== */
#screen-card-draw {
  background:
    radial-gradient(circle at 50% 28%, rgba(56, 189, 248, 0.16), transparent 34%),
    repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.03) 0 1px, transparent 1px 32px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(7, 15, 24, 0.98));
}

#screen-card-draw > .card-draw-viewport {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  animation: cardDrawViewportIn 260ms ease-out backwards;
}

@keyframes cardDrawViewportIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.card-draw-viewport {
  width: min(100%, 346px);
  margin: 24px auto 0;
  overflow: hidden;
  padding: 18px 0 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 270px;
  perspective: 900px;
}

.card-draw-viewport.is-stopped {
  overflow: visible;
}

.draw-card {
  width: var(--draw-card-width, 102px);
  flex: 0 0 var(--draw-card-width, 102px);
  aspect-ratio: 3 / 5.5;
  min-height: 220px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.card-draw-track {
  display: flex;
  gap: 10px;
  width: max-content;
  margin: 0 auto;
  transform: translate3d(var(--draw-start-offset, -700px), 0, 0);
  transition: transform 1200ms cubic-bezier(0.08, 0.72, 0.16, 1);
  will-change: transform;
}

.card-draw-viewport.is-dealing .card-draw-track {
  transform: translate3d(var(--draw-stop-offset, 0px), 0, 0);
}

.reward-card {
  appearance: none;
  font-family: var(--font-main);
  color: var(--ink-primary);
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--run-accent, #7dd3fc) 30%, transparent);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--card-accent, #53b1ff) 17%, transparent), transparent 54%),
    linear-gradient(165deg, #142635, #0a1521 62%, #101f2d);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.38);
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: default;
  opacity: 0.82;
  pointer-events: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.draw-front-card {
  backface-visibility: hidden;
}

.draw-preview-card {
  cursor: default;
  opacity: 0.68;
  pointer-events: none;
}

.draw-preview-card::before {
  content: "";
  position: absolute;
  inset: 10% 8%;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--run-accent, #7dd3fc) 85%, transparent) 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 24%, rgba(255, 255, 255, 0.62) 0 1px, transparent 1.7px),
    radial-gradient(circle at 34% 54%, color-mix(in srgb, var(--run-accent, #38bdf8) 72%, transparent) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 76%, color-mix(in srgb, var(--run-accent, #7dd3fc) 68%, transparent) 0 1px, transparent 1.7px),
    radial-gradient(circle at 22% 88%, rgba(255, 255, 255, 0.48) 0 1px, transparent 1.6px);
  opacity: 0.72;
  transform: translate3d(0, 0, 0);
  animation: drawCardParticleDrift 900ms ease-in-out infinite alternate;
}

@keyframes drawCardParticleDrift {
  to { opacity: 0.3; transform: translate3d(4px, -5px, 0) scale(1.08); }
}

.reward-card.is-accent-core { --card-accent: #53b1ff; }
.reward-card.is-accent-vital { --card-accent: #4ade80; }
.reward-card.is-accent-strike { --card-accent: #ffab70; }
.reward-card.is-accent-offer { --card-accent: #7dd3fc; }
.reward-card.is-accent-boss-buff {
  --card-accent: #fbbf24;
  border-color: rgba(251, 191, 36, 0.55);
  background:
    radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.22) 0%, transparent 60%),
    linear-gradient(165deg, #26172e, #130a1c 62%, #1e1127);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.22);
}

.boss-buff-pill {
  display: inline-block;
  align-self: center;
  margin: 3px auto 2px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 900;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35) 0%, rgba(168, 85, 247, 0.35) 100%);
  color: #fef08a;
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}

.card-draw-skip-bar {
  position: absolute;
  left: 50%;
  top: calc(50% + 155px);
  transform: translateX(-50%);
  margin: 0;
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

@media (max-height: 560px) {
  .card-draw-skip-bar {
    top: auto;
    bottom: 12px;
  }
}

.btn-draw-skip,
.btn-draw-next,
.btn-draw-reroll {
  min-width: 136px;
  padding: 9px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(15, 23, 42, 0.88);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-draw-skip:hover,
.btn-draw-next:hover {
  background: rgba(30, 41, 59, 0.96);
  color: #ffffff;
  border-color: rgba(148, 163, 184, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.btn-draw-skip:active,
.btn-draw-next:active {
  transform: translateY(0);
}

.draw-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 11, 17, 0.85);
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.18s ease;
}

.draw-confirm-dialog {
  background: linear-gradient(180deg, #131d2e 0%, #0a111c 100%);
  border: 1.5px solid rgba(59, 130, 246, 0.45);
  border-radius: 14px;
  padding: 22px 20px 18px;
  width: 90%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(59, 130, 246, 0.18);
  animation: modalPopIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes modalPopIn {
  0% { opacity: 0; transform: scale(0.88); }
  100% { opacity: 1; transform: scale(1); }
}

.draw-confirm-icon {
  font-size: 32px;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4));
}

.draw-confirm-title {
  font-size: 17px;
  font-weight: 900;
  color: #f8fafc;
  margin: 0 0 8px;
  letter-spacing: 0.04em;
}

.draw-confirm-message {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 6px;
  line-height: 1.4;
}

.draw-confirm-subtext {
  font-size: 11.5px;
  color: #94a3b8;
  margin: 0 0 18px;
  line-height: 1.4;
}

.draw-confirm-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
}

.draw-confirm-actions button {
  flex: 1;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-draw-confirm-cancel {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}

.btn-draw-confirm-cancel:hover {
  background: rgba(51, 65, 85, 0.95);
  color: #ffffff;
}

.btn-draw-confirm-ok {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border: 1px solid rgba(96, 165, 250, 0.5);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
}

.btn-draw-confirm-ok:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.card-draw-viewport.is-stopped .reward-card {
  cursor: pointer;
  opacity: 1;
  border-color: color-mix(in srgb, var(--card-accent) 52%, transparent);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.44), inset 0 0 18px color-mix(in srgb, var(--card-accent) 10%, transparent);
  pointer-events: auto;
}

.card-draw-viewport.is-stopped .reward-card.is-choice-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: saturate(0.65);
  pointer-events: auto;
  border-color: rgba(239, 68, 68, 0.35);
}

.card-draw-viewport.is-stopped .reward-card.is-choice-disabled:hover {
  transform: none;
  border-color: rgba(239, 68, 68, 0.65);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2);
}

.event-cost-badge {
  display: inline-block;
  align-self: center;
  margin: 4px auto 2px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.event-cost-badge.is-cost-met {
  color: #fde047;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.event-cost-badge.is-cost-unmet {
  color: #f87171;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.45);
  animation: costPulse 1.4s ease-in-out infinite alternate;
}

.event-cost-badge.is-cost-hp {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.35);
}

@keyframes costPulse {
  to { border-color: rgba(239, 68, 68, 0.85); box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
}

.card-draw-viewport.is-stopped .draw-preview-card {
  cursor: default;
  opacity: 0;
  visibility: hidden;
  filter: blur(4px);
  transform: scale(0.72);
  animation: drawCardParticleDissolve 220ms ease forwards;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms, filter 220ms ease, transform 220ms ease;
}

@keyframes drawCardParticleDissolve {
  to { opacity: 0; filter: blur(8px); transform: scale(0.76) translate3d(8px, -8px, 0); }
}

.card-draw-viewport.is-stopped .reward-card.is-selected {
  z-index: 4;
  animation: drawCardSelect 720ms cubic-bezier(0.2, 0.84, 0.24, 1) forwards;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.58), 0 0 30px color-mix(in srgb, var(--card-accent) 30%, transparent), inset 0 0 24px color-mix(in srgb, var(--card-accent) 18%, transparent);
}

.card-draw-viewport.is-selecting .reward-card.is-dismissed {
  animation: drawCardDismiss 420ms ease forwards;
  pointer-events: none;
}

@keyframes drawCardSelect {
  0% { transform: translate3d(0, 0, 0) rotateY(0deg) scale(1); }
  42% { transform: translate3d(var(--draw-select-x, 0px), -4px, 0) rotateY(180deg) scale(1.08); }
  100% { transform: translate3d(var(--draw-select-x, 0px), 0, 0) rotateY(360deg) scale(1.24); }
}

@keyframes drawCardDismiss {
  to { opacity: 0.18; transform: translateY(5px) scale(0.88); }
}

.card-draw-viewport.is-stopped .reward-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.48), inset 0 0 22px color-mix(in srgb, var(--card-accent) 13%, transparent);
}

.reward-card-halo {
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 18%, transparent);
  border-radius: 5px;
  pointer-events: none;
}

.reward-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.reward-card-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--card-accent) 30%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-accent) 12%, rgba(9, 21, 33, 0.92));
  color: var(--card-accent);
}

.reward-card-name {
  display: -webkit-box;
  overflow: hidden;
  width: 100%;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 900;
  margin-bottom: 2px;
}

.reward-card-desc {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  width: 100%;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.36;
  font-weight: 600;
  word-break: break-word;
}

.card-draw-viewport::before,
.card-draw-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  z-index: 2;
  pointer-events: none;
}

.card-draw-viewport::before {
  left: 0;
  background: linear-gradient(90deg, rgba(7, 15, 24, 0.94), transparent);
}

.card-draw-viewport::after {
  right: 0;
  background: linear-gradient(270deg, rgba(7, 15, 24, 0.94), transparent);
}

.shop-art.offer-type-gold { color: #fde047; }
.shop-art.offer-type-reroll { color: #7dd3fc; }
.shop-art.offer-type-relic { color: #c4b5fd; }

@media (prefers-reduced-motion: reduce) {
  .card-draw-track {
    transition-duration: 1ms;
  }

  #screen-card-draw > .card-draw-viewport {
    animation-duration: 1ms;
  }
}

/* ========================================================
   SCREEN: SHOP (补给商店 - 战备军火库)
   ======================================================== */
/* ========================================================
   SCREEN: WEAPON SELECTION (选择初始武器)
   ======================================================== */
.weapon-select-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.weapon-select-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

.weapon-select-card {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.weapon-select-card:hover {
  transform: translateY(-2px);
  background: var(--bg-card-hover);
  border-color: var(--color-blue);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}

.weapon-select-card:active {
  transform: scale(0.98);
}

.weapon-select-card.selected {
  border-color: #35e0e8;
  background: rgba(53, 224, 232, 0.14);
  box-shadow: 0 0 18px rgba(53, 224, 232, 0.4);
  transform: translateY(-1px);
}

.weapon-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.weapon-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.weapon-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.weapon-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.weapon-name {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink-primary);
}

.weapon-type-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
}

.weapon-type-pill.melee { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.weapon-type-pill.ranged { background: rgba(53, 224, 232, 0.2); color: #35e0e8; }
.weapon-type-pill.summon { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }

.weapon-stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.w-stat-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: #e2e8f0;
}

.w-stat-pill.kb {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.weapon-desc-box {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.35;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 6px 8px;
}

/* ========================================================
   SCREEN: SUPPLY SHOP (补给商店与自适应网格)
   ======================================================== */
.screen-supply-shop {
  justify-content: space-between;
}

.screen-supply-shop .screen-footer {
  flex-direction: row;
  align-items: stretch;
  padding-top: 6px;
  gap: 5px;
}

.screen-supply-shop .screen-footer > button {
  flex: 1;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 4px;
}

.screen-supply-shop .screen-footer > .btn-shop-loadout {
  flex: 0 0 32%;
}

.screen-supply-shop .screen-header {
  margin-bottom: 8px;
}

.shop-header-line {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.shop-header-line > .screen-badge {
  margin-bottom: 0;
  flex-shrink: 0;
}

.shop-header-line > .btn-shop-refresh {
  margin-left: auto;
}

.shop-top-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.screen-supply-shop .shop-top-meta .gold-balance {
  font-size: 13px;
}

.screen-supply-shop .shop-top-meta .screen-badge {
  padding-left: 8px;
  padding-right: 8px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.shop-header-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  margin-bottom: 8px;
  gap: 8px;
  flex-shrink: 0;
}

.shop-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gold-balance {
  font-size: 14px;
  font-weight: 900;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-shop-refresh {
  padding: 5px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #182742 0%, #0a1120 100%);
  border: 1.5px solid #fbbf24;
  color: #fbbf24;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-shop-refresh:hover:not(:disabled) {
  background: #fbbf24;
  color: #0c0c16;
  transform: translateY(-1px);
}

.btn-shop-refresh:disabled {
  border-color: #475569;
  color: #64748b;
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-shop-loadout {
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(53, 224, 232, 0.12);
  border: 1.5px solid #35e0e8;
  color: #7dd3fc;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.btn-shop-loadout:hover {
  background: #35e0e8;
  color: #082f49;
}

/* Compact 2-Column Grid for 6 shop slots */
.shop-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  align-content: start;
  padding: 2px;
  /* Anchor for purchase popovers pinned below cards (cards themselves are clip-path'd). */
  position: relative;
}

.shop-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: visible;
}

.shop-card.is-confirming {
  z-index: 2;
  border-color: var(--color-cyan);
  filter: none;
}

.loadout-sheet {
  max-height: 88%;
}

.loadout-scroll {
  gap: 10px !important;
}

.loadout-role-box,
.loadout-stat-row,
.loadout-item-row {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
}

.loadout-role-box {
  padding: 10px 12px;
}

.loadout-role-name {
  color: var(--ink-primary);
  font-size: 14px;
  font-weight: 900;
}

.loadout-role-passive {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.4;
}

.loadout-section-title {
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 900;
  margin-top: 2px;
}

.loadout-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.loadout-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 6px 8px;
  cursor: help;
  touch-action: manipulation;
}

.loadout-stat-row:active {
  border-color: #35e0e8;
  background: rgba(53, 224, 232, 0.12);
}

.loadout-stat-value {
  margin-left: 6px;
  text-align: right;
}

.loadout-item-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.loadout-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 8px;
}

.loadout-item-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  border-radius: 8px;
  background: radial-gradient(circle at center, #161a24 0%, #090b10 100%);
  border: 1px solid rgba(255, 42, 68, 0.4);
  box-shadow: 0 0 6px rgba(255, 42, 68, 0.2);
}

.loadout-item-icon svg {
  width: 24px;
  height: 24px;
}

.loadout-item-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.loadout-item-main strong {
  color: var(--ink-primary);
  font-size: 12px;
}

.loadout-item-main small {
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loadout-item-rarity {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 900;
}

.loadout-empty {
  padding: 10px;
  color: var(--ink-muted);
  font-size: 11px;
  text-align: center;
}

.stat-help-popover {
  position: fixed;
  z-index: 2000;
  display: flex;
  max-width: min(280px, calc(100vw - 24px));
  flex-direction: column;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid #35e0e8;
  border-radius: 3px;
  background: rgba(8, 24, 40, 0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  color: var(--ink-secondary);
  font-size: 11px;
  line-height: 1.35;
  pointer-events: none;
}

.stat-help-popover strong {
  color: #7dd3fc;
  font-size: 12px;
}

.shop-card:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--bg-card-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.shop-card.is-locked {
  border-color: #fbbf24 !important;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(30, 41, 59, 0.95) 100%);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}

.shop-card.can-synth {
  border-color: #a5b4fc !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(30, 41, 59, 0.95) 100%);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
}

.shop-card-top-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.shop-art-box {
  flex-shrink: 0;
  position: relative;
}

.shop-type-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  z-index: 1;
  padding: 2px 4px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.shop-type-badge.type-melee {
  color: #fecaca;
  background: #7f1d1d;
}

.shop-type-badge.type-ranged {
  color: #bae6fd;
  background: #075985;
}

.shop-type-badge.type-item {
  color: #bbf7d0;
  background: #166534;
}

.shop-art {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.shop-title-box {
  flex: 1;
  min-width: 0;
}

.shop-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.shop-item-name {
  font-size: 12.5px;
  font-weight: 900;
  color: var(--ink-primary);
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}

.shop-item-desc-inline {
  min-width: 0;
  display: block;
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.shop-synth-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: #a5b4fc;
  color: #0c0c16;
  white-space: nowrap;
}

.shop-unique-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(248, 113, 113, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.45);
  white-space: nowrap;
}

.shop-locked-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: #fbbf24;
  color: #0c0c16;
  white-space: nowrap;
}

.btn-shop-lock {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #94a3b8;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}

.btn-shop-lock:hover {
  background: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
  color: #fbbf24;
}

.btn-shop-lock.is-locked {
  background: #fbbf24;
  color: #0c0c16;
  border-color: #f59e0b;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}

.shop-item-desc {
  font-size: 10.5px;
  color: var(--ink-muted);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.shop-card-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.shop-card-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 2px 4px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 6px;
  background: rgba(9, 15, 28, 0.58);
  margin-left: auto;
  flex-shrink: 0;
}

.shop-card-actions .btn-shop-lock {
  border: 0;
  background: transparent;
  padding: 2px 3px;
}

.shop-card-actions .btn-shop-lock.is-locked {
  box-shadow: none;
}

.shop-price-side {
  justify-content: flex-end;
  text-align: right;
  flex: 0 0 auto;
}

.shop-price-side .price-val {
  font-size: 11px;
}

.shop-card.rarity-1 { border-color: #64748b; }
.shop-card.rarity-2 { border-color: #22c55e; }
.shop-card.rarity-3 { border-color: #35e0e8; }
.shop-card.rarity-4 { border-color: #818cf8; }
.shop-card.rarity-5 { border-color: #60a5fa; }

.shop-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.shop-item-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rarity-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
}

.rarity-badge.t1 { background: var(--rarity-1-bg); color: var(--rarity-1); }
.rarity-badge.t2 { background: var(--rarity-2-bg); color: var(--rarity-2); }
.rarity-badge.t3 { background: var(--rarity-3-bg); color: var(--rarity-3); }
.rarity-badge.t4 { background: var(--rarity-4-bg); color: var(--rarity-4); }
.rarity-badge.t5 { background: var(--rarity-5-bg); color: var(--rarity-5); }

.shop-price-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 0 1 auto;
  flex-shrink: 1;
}

.btn-buy-pill.synth-pill {
  background: linear-gradient(90deg, #9333ea 0%, #a5b4fc 100%);
  color: #ffffff;
  border-color: #e9d5ff;
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.5);
}

.price-val {
  font-size: 12px;
  font-weight: 900;
  color: #fbbf24;
  white-space: nowrap;
}

@media (max-width: 520px) {
  #screen-supply-shop .shop-grid-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 2px 1px 12px;
  }

  #screen-supply-shop .shop-card {
    min-width: 0;
    padding: 9px 10px;
  }

  #screen-supply-shop .shop-name-row {
    align-items: flex-start;
  }

  #screen-supply-shop .shop-item-name {
    min-width: 0;
  }

  #screen-supply-shop .shop-item-desc {
    max-width: 100%;
  }

  #screen-supply-shop .shop-card-bottom-row {
    gap: 8px;
  }

  #screen-supply-shop .shop-price-tag {
    flex: 1 1 auto;
  }

}

.btn-buy-pill {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--color-brand);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.weapon-range-pill,
.weapon-range-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 4px;
  font-weight: 800;
  white-space: nowrap;
}

.weapon-range-pill {
  padding: 1px 4px;
  font-size: 9px;
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
}

.weapon-range-pill.melee,
.weapon-range-label.melee {
  color: #93c5fd;
}

.weapon-range-pill.ranged,
.weapon-range-label.ranged {
  color: #67e8f9;
}

.weapon-range-pill.summon,
.weapon-range-label.summon {
  color: #c4b5fd;
}

.weapon-range-label {
  margin-left: 5px;
  padding: 1px 4px;
  font-size: 9px;
  background: rgba(148, 163, 184, 0.14);
  vertical-align: middle;
}

.shop-card.cant-afford .price-val,
.shop-price-tag.cant-afford .price-val {
  color: #64748b !important;
}

.shop-price-tag.cant-afford .coin-badge {
  color: #64748b !important;
}

.shop-price-tag.cant-afford .coin-icon-inline {
  filter: grayscale(1);
  opacity: 0.65;
}

/* Player Inventory Rack in Shop */
.inventory-bar {
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  flex-shrink: 0;
}

.inv-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.inv-slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.inv-slot {
  height: 44px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1.5px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
  position: relative;
  text-align: center;
  gap: 1px;
  padding: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.inv-slot-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
  font-size: 8px;
  opacity: 0.9;
}

.inv-slot-lvl {
  font-size: 7.5px;
  opacity: 0.85;
  line-height: 1;
}

.inv-slot:not(.empty):hover {
  transform: translateY(-1px);
  border-color: #f59e0b !important;
}

.inv-slot.empty {
  border-style: dashed;
  color: var(--ink-dim);
  cursor: default;
}

/* Weapon Detail Modal Content */
.weapon-detail-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.weapon-detail-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  padding: 14px 16px;
}

.weapon-detail-icon {
  width: 56px;
  height: 56px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.4);
}

.weapon-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weapon-detail-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.weapon-detail-type {
  font-size: 12.5px;
  font-weight: 800;
  color: #35e0e8;
}

.weapon-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.weapon-stat-cell {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weapon-stat-cell .stat-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
}

.weapon-stat-cell .stat-num {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-primary);
}

.weapon-detail-special {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #e9d5ff;
  line-height: 1.4;
}

.weapon-detail-price-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
}

.weapon-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.btn-detail-sell {
  padding: 12px;
  border-radius: 5px;
  background: linear-gradient(135deg, #182742 0%, #0a1120 100%);
  border: 1.5px solid #f59e0b;
  color: #fbbf24;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-detail-sell:hover {
  background: #f59e0b;
  color: #0c0c16;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.btn-detail-synth {
  padding: 12px;
  border-radius: 5px;
  background: linear-gradient(90deg, #7e22ce 0%, #d946ef 100%);
  border: 1.5px solid #a5b4fc;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.btn-detail-synth:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
}

.btn-detail-synth:disabled {
  background: #182742;
  border-color: #334155;
  color: #64748b;
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ========================================================
   SCREEN: ROUTE MAP (杀戮尖塔分支路线图)
   ======================================================== */
.screen-route-map {
  justify-content: space-between;
}

.map-player-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(9, 15, 28, 0.85);
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  margin-bottom: 6px;
  flex-shrink: 0;
  gap: 8px;
}

.hud-item {
  font-size: 12.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hud-item.gold { color: #fbbf24; }
.hud-item.hp { color: #f87171; }
.hud-item.wp { color: #35e0e8; }

.map-progress-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.progress-act {
  font-size: 13px;
  font-weight: 800;
  color: #35e0e8;
}

.progress-steps {
  font-size: 12px;
  color: var(--ink-secondary);
}

.progress-steps strong {
  color: #fbbf24;
  font-size: 14px;
}

/* Spire Track Overview Container */
.spire-track-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.spire-track-title {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.spire-track-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px;
}

.spire-track-layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 48px;
}

.spire-track-layer.current-layer {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.spire-track-layer.past-layer {
  opacity: 0.55;
}

.spire-layer-num {
  font-size: 9.5px;
  font-weight: 900;
  color: #94a3b8;
}

.spire-track-layer.current-layer .spire-layer-num {
  color: #fbbf24;
}

.spire-layer-icons {
  display: flex;
  align-items: center;
  gap: 3px;
}

.spire-layer-node-icon {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.spire-layer-node-icon.active-pulse {
  animation: pulse-ring 1.5s infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(1); filter: none; }
  50% { transform: scale(1.25); filter: none; }
  100% { transform: scale(1); filter: none; }
}

.spire-layer-conn {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

.map-choices-header {
  font-size: 11px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.map-choices-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}

.map-spire-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 5px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.map-spire-card:hover {
  transform: translateY(-2px);
  background: var(--bg-card-hover);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.map-spire-card.node-monster { border-color: rgba(34, 197, 94, 0.5); }
.map-spire-card.node-elite { border-color: rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.08); }
.map-spire-card.node-boss { border-color: rgba(245, 158, 11, 0.7); background: rgba(245, 158, 11, 0.1); }
.map-spire-card.node-event { border-color: rgba(53, 224, 232, 0.5); }
.map-spire-card.node-shop { border-color: rgba(251, 191, 36, 0.6); }
.map-spire-card.node-rest { border-color: rgba(34, 197, 94, 0.6); }
.map-spire-card.node-treasure { border-color: rgba(99, 102, 241, 0.6); }

.spire-node-icon {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.spire-node-details {
  flex: 1;
  min-width: 0;
}

.spire-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.spire-node-name {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-primary);
}

.spire-type-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 5px;
}

.spire-type-badge.monster { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.spire-type-badge.elite { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.spire-type-badge.boss { background: rgba(245, 158, 11, 0.25); color: #fbbf24; }
.spire-type-badge.event { background: rgba(53, 224, 232, 0.15); color: #35e0e8; }
.spire-type-badge.shop { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }
.spire-type-badge.rest { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.spire-type-badge.treasure { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }

.spire-node-desc {
  font-size: 11px;
  color: var(--ink-secondary);
  margin-top: 2px;
  line-height: 1.3;
}

.spire-node-hint {
  font-size: 10.5px;
  font-weight: 700;
  color: #fbbf24;
  margin-top: 2px;
}

.spire-node-btn-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(53, 224, 232, 0.15);
  border: 1px solid rgba(53, 224, 232, 0.4);
  color: #35e0e8;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.map-spire-card:hover .spire-node-btn-tag {
  background: #35e0e8;
  color: #0c0c16;
}

.spire-legend-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  font-size: 10px;
  color: var(--ink-muted);
  margin-top: 6px;
  flex-shrink: 0;
}

.spire-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  white-space: nowrap;
}

.spire-legend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.spire-legend-icon svg {
  width: 15px;
  height: 15px;
}

.spire-legend-item.node-monster { color: #22c55e; }
.spire-legend-item.node-elite { color: #ef4444; }
.spire-legend-item.node-event { color: #35e0e8; }
.spire-legend-item.node-shop { color: #fbbf24; }
.spire-legend-item.node-rest { color: #10b981; }
.spire-legend-item.node-treasure { color: #ec4899; }
.spire-legend-item.node-boss { color: #fbbf24; }

/* ========================================================
   SCREEN: EVENTS & TREASURES (未知奇遇与秘宝)
   ======================================================== */
.event-choice-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 5px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
  transition: all 0.15s ease;
}

.event-choice-card:hover {
  transform: translateY(-2px);
  background: var(--bg-card-hover);
  border-color: #35e0e8;
  box-shadow: 0 6px 16px rgba(53, 224, 232, 0.3);
}

.event-choice-card.is-disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.event-choice-card.is-disabled:hover {
  transform: none;
  background: var(--bg-card);
  border-color: var(--border-strong);
  box-shadow: none;
}

.event-choice-text {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.35;
}

.event-choice-btn-tag {
  font-size: 12px;
  font-weight: 800;
  color: #35e0e8;
  white-space: nowrap;
  padding: 4px 8px;
  background: rgba(53, 224, 232, 0.15);
  border-radius: 8px;
}

.event-choice-card.is-disabled .event-choice-btn-tag {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.14);
}

/* ========================================================
   SCREEN: PAUSE MENU (暂停界面)
   ======================================================== */
.pause-overlay {
  background: rgba(8, 14, 22, 0.95);
  backdrop-filter: blur(16px);
  color: #f8fafc;
}

.stat-grid-sheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 12px;
}

.stat-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  font-size: 12px;
}

.stat-label {
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-val {
  color: #fef08a;
  font-weight: 900;
  font-size: 13px;
}

/* ========================================================
   SCREEN: REST CAMP (休息节点)
   ======================================================== */
.rest-choice-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.rest-choice-card:hover {
  border-color: var(--color-brand);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--color-magenta-glow);
}

.rest-choice-icon {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.rest-choice-icon.heal { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.rest-choice-icon.forge { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }

.rest-choice-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink-primary);
}

.rest-choice-desc {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 3px;
}

/* ========================================================
   SCREEN: RESULT (胜利 / 失败)
   ======================================================== */
.result-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: auto 0;
  gap: 12px;
}

.result-emblem {
  font-size: 64px;
  line-height: 1;
  animation: p3rSlam 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes p3rSlam {
  from { opacity: 0; transform: scale(2.2) skewY(6deg); filter: blur(6px); }
  to { opacity: 1; transform: scale(1) skewY(0); filter: blur(0); }
}

@keyframes bounceSlow {
  0% { transform: translateY(0) scale(0.95); }
  100% { transform: translateY(-8px) scale(1.05); }
}

.result-title {
  font-size: 32px;
  font-weight: 900;
  margin: 0;
}

.result-title.win {
  color: #fbbf24;
}

.result-title.lose {
  color: #ef4444;
}

.result-copy {
  font-size: 14px;
  color: var(--ink-secondary);
  max-width: 320px;
  line-height: 1.5;
  margin: 0;
}

.result-stats-pill {
  display: flex;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--ink-primary);
  font-weight: 800;
}

/* ========================================================
   TOAST & NOTIFICATIONS
   ======================================================== */
#toast {
  position: absolute;
  top: auto;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(100% - 40px);
  padding: 10px 18px;
  border-radius: 2px;
  color: #ffffff;
  background: rgba(9, 15, 28, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13.5px;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  display: none;
}

#toast.show {
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastDrop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastDrop {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ========================================================
   MODALS: GALLERY & SETTINGS (图鉴与设置模态框)
   CRITICAL: pointer-events: auto on overlay and sheet to guarantee close button works!
   ======================================================== */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 11, 17, 0.85);
  backdrop-filter: blur(10px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: auto !important;
  animation: fadeIn 0.18s ease;
}

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

.modal-sheet {
  background: rgba(9, 15, 28, 0.98);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--color-cyan);
  border-radius: 0;
  border-radius: 8px;
  padding: 16px 18px 24px;
  height: 86%;
  max-height: 88%;
  min-height: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto !important;
  box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.65), 0 0 24px rgba(53, 224, 232, 0.1);
  animation: sheetUp 0.26s cubic-bezier(0.34, 1.36, 0.54, 1);
  overflow: hidden;
  position: relative;
}

.modal-sheet-handle {
  width: 40px;
  height: 4.5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  align-self: center;
  margin-bottom: 4px;
  cursor: grab;
  flex-shrink: 0;
  touch-action: none;
}

@keyframes sheetUp {
  from { transform: translateY(100%) skewY(1.5deg); opacity: 0.6; }
  to { transform: translateY(0) skewY(0); opacity: 1; }
}

.modal-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border-subtle);
  flex-shrink: 0;
  touch-action: pan-y;
}

.modal-sheet-title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink-primary);
}

.shop-offer-popover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid #35e0e8;
  border-radius: inherit;
  background: rgba(11, 34, 53, 0.98);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.42);
  animation: popoverIn 0.14s ease-out;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 5;
}

.shop-offer-popover-label {
  color: var(--ink-primary);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.shop-offer-popover-price {
  color: #fbbf24;
  font-size: 12px;
  font-weight: 900;
  margin-left: auto;
}

@keyframes popoverIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.shop-offer-popover-actions {
  display: flex;
  gap: 8px;
}

.shop-offer-popover-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 5px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.btn-draw-reroll {
  min-width: 128px;
  margin-right: 8px;
  background: rgba(20, 83, 45, 0.9);
  color: #dcfce7;
  border-color: rgba(74, 222, 128, 0.55);
}

.btn-draw-reroll:hover {
  background: rgba(22, 101, 52, 0.96);
}

.btn-popover-cancel {
  border: 1px solid #64748b;
  background: #182742;
  color: #cbd5e1;
}

.btn-popover-buy {
  border: 1px solid #60a5fa;
  background: #1e40af;
  color: #eff6ff;
}

.modal-sheet .scroll-container,
#gallery-content-box,
.gallery-content-box,
.scroll-container {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-bottom: 32px !important;
  padding-right: 2px !important;
}

.btn-close-modal {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: #1a293b;
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto !important;
  transition: all 0.15s ease;
}

.btn-close-modal:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
  transform: scale(1.08);
}

.btn-close-modal:active {
  transform: scale(0.94);
}

/* ====================================================
   SETTINGS MODAL REDESIGN (机能星痕战术系统设置面板)
   ==================================================== */
#modal-settings-sheet {
  background: radial-gradient(circle at 50% 0%, rgba(26, 18, 48, 0.96) 0%, rgba(10, 7, 18, 0.98) 70%, #05040a 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-top: 2px solid #38bdf8;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.85), 0 0 28px rgba(56, 189, 248, 0.12);
  padding: 16px 18px 24px;
}

#modal-settings-sheet .modal-sheet-handle {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.2), rgba(251, 191, 36, 0.5), rgba(56, 189, 248, 0.2));
  width: 48px;
  height: 4px;
}

.settings-sheet-header {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settings-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fbbf24;
  text-transform: uppercase;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}

.settings-badge .badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 6px #fbbf24;
}

.settings-main-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #ffffff 40%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.settings-subtitle {
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.2px;
}

.settings-close-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
  background: rgba(19, 14, 36, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.settings-close-btn:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
  transform: scale(1.05);
}

.settings-section-heading {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #38bdf8;
  text-transform: uppercase;
  margin: 14px 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.3), transparent);
}

.settings-section-heading.is-danger {
  color: #f87171;
}

.settings-section-heading.is-danger::after {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.3), transparent);
}

.setting-tactical-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(20, 16, 38, 0.75) 0%, rgba(12, 9, 21, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 60px;
  box-sizing: border-box;
}

.setting-tactical-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.25), transparent);
  opacity: 0.5;
}

.setting-tactical-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: linear-gradient(135deg, rgba(28, 22, 54, 0.85) 0%, rgba(16, 12, 30, 0.95) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(56, 189, 248, 0.1);
}

.setting-tactical-card.is-danger-card {
  border-color: rgba(239, 68, 68, 0.25);
  background: linear-gradient(135deg, rgba(38, 14, 20, 0.7) 0%, rgba(18, 8, 12, 0.88) 100%);
}

.setting-tactical-card.is-danger-card:hover {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 14px rgba(239, 68, 68, 0.2);
}

.setting-icon-box {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #1b1532 0%, #0c0915 100%);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 10px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6), 0 0 10px rgba(56, 189, 248, 0.1);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.setting-tactical-card:hover .setting-icon-box {
  border-color: #38bdf8;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6), 0 0 14px rgba(56, 189, 248, 0.35);
  transform: scale(1.05);
}

.setting-icon-box.is-danger-icon {
  background: radial-gradient(circle at center, #2e1117 0%, #0e0507 100%);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6), 0 0 10px rgba(239, 68, 68, 0.15);
}

.setting-tactical-card:hover .setting-icon-box.is-danger-icon {
  border-color: #ef4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
}

.setting-icon-box svg {
  width: 28px !important;
  height: 28px !important;
  display: block;
}

.setting-content-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.setting-title {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.3;
}

.setting-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setting-status-active {
  color: #38bdf8;
  font-weight: 700;
}

.setting-status-muted {
  color: #64748b;
}

.setting-toggle-switch {
  width: 48px;
  height: 26px;
  min-width: 48px;
  background: rgba(15, 23, 42, 0.9);
  border: 1.5px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  padding: 2px;
  box-sizing: border-box;
}

.setting-toggle-switch .switch-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: translateX(2px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.setting-toggle-switch.is-active {
  background: rgba(6, 182, 212, 0.25);
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.setting-toggle-switch.is-active .switch-thumb {
  transform: translateX(22px);
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8, 0 2px 4px rgba(0, 0, 0, 0.6);
}

.setting-action-btn {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.setting-action-btn:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
  transform: translateY(-1px);
}

.setting-action-btn.is-overclock {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.12);
}

.setting-danger-btn {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.setting-danger-btn:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
}

.tab-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  flex-shrink: 0;
  min-height: 38px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.tab-nav-shell {
  position: relative;
  flex-shrink: 0;
}

.tab-nav-shell.has-more::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(9, 15, 28, 0) 0%, rgb(9, 15, 28) 72%);
}

.tab-nav-shell.is-at-end::after {
  opacity: 0;
}

.tab-nav::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  padding: 6px 14px;
  border-radius: 2px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.tab-btn.active {
  background: var(--color-brand);
  color: #ffffff;
  border-color: var(--color-brand);
}

/* ========================================================
   SCREEN: TOPOLOGICAL MAP GRAPH (杀戮尖塔全景拓扑图 - 全屏沉浸式)
   ======================================================== */
#screen-route-map {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 14px 10px;
  overflow: hidden;
}

.map-player-hud {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.map-player-hud .hud-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 2px;
  background: rgba(9, 15, 28, 0.85);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-primary);
}

.map-player-hud .hud-item.gold {
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}

.map-player-hud .hud-item.hp {
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.map-player-hud .hud-item.wp {
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}

.map-menu-button {
  align-self: center;
  margin-left: auto;
  width: auto;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.map-exit-confirm-sheet {
  width: min(100%, 420px);
  height: auto;
  max-height: 72dvh;
}

.return-menu-confirm-content {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 4px 0;
}

.map-progress-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 3px;
  background: rgba(9, 15, 28, 0.7);
  border: 1px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-secondary);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.map-progress-pill .progress-act {
  color: #35e0e8;
}

.map-progress-pill .progress-steps strong {
  color: #fbbf24;
  font-size: 13px;
}

.spire-topological-board {
  width: 100%;
  flex: 1;
  min-height: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 30%, rgba(13, 21, 38, 0.95) 0%, rgba(7, 7, 13, 0.98) 100%);
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin-bottom: 6px;
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.spire-topological-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(53, 224, 232, 0.3) rgba(0, 0, 0, 0.2);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  cursor: -webkit-grab;
}

.spire-topological-scroll.is-dragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: auto !important;
}

.spire-map-canvas {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column-reverse;
  gap: 34px;
  padding: 32px 12px 36px;
  box-sizing: border-box;
  touch-action: pan-y;
}

.spire-svg-paths {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.spire-nodes-layer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.spire-floor-row {
  display: flex;
  align-items: center;
  position: relative;
  height: 56px;
  width: 100%;
  transition: background 0.2s ease;
  border-radius: 4px;
  z-index: 2;
}

.spire-floor-row.current {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.03) 50%, rgba(251, 191, 36, 0.15) 100%);
  border: 1px dashed rgba(251, 191, 36, 0.35);
}

.spire-floor-row.past {
  opacity: 0.75;
}

.spire-floor-tag {
  position: absolute;
  left: 4px;
  width: 34px;
  max-width: none;
  font-size: 13px;
  font-weight: 900;
  color: #64748b;
  padding: 2px 4px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 6px;
  background: rgba(9, 15, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .spire-floor-tag {
    width: 34px;
    font-size: 12px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .spire-node-bubble {
    width: 40px;
    height: 40px;
  }
}

.spire-floor-row.current .spire-floor-tag {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.15);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.spire-floor-tag.boss-tag {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.15);
  font-weight: 900;
}

.spire-node-bubble {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #111e2f;
  border: 2.5px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 0;
  z-index: 4;
}

.spire-node-bubble.is-reachable {
  cursor: pointer;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.7), inset 0 0 8px rgba(251, 191, 36, 0.3);
  animation: reachablePulse 1.4s infinite ease-in-out;
  background: #182742;
}

.spire-node-bubble.is-reachable:hover {
  transform: translate(-50%, -50%) scale(1.22);
  background: #2563eb;
  border-color: #ffffff !important;
  box-shadow: 0 0 24px rgba(53, 224, 232, 0.9);
}

.spire-node-bubble.is-visited {
  border-color: #22c55e !important;
  background: #0f291e;
  opacity: 0.8;
}

.spire-node-bubble.is-unreachable {
  opacity: 0.3;
  filter: grayscale(0.8);
  border-color: #334155 !important;
  cursor: not-allowed;
}

.spire-node-bubble.is-unreachable:hover {
  opacity: 0.6;
  transform: translate(-50%, -50%) scale(1.08);
}

.stage-unreachable-banner {
  background: rgba(239, 68, 68, 0.12);
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 11.5px;
  color: #fca5a5;
  margin-top: 10px;
  line-height: 1.45;
}

.stage-unreachable-banner strong {
  color: #ef4444;
}

.spire-node-bubble svg {
  width: 22px;
  height: 22px;
}

@keyframes reachablePulse {
  0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
  50% { transform: translate(-50%, -50%) scale(1.16); box-shadow: 0 0 20px rgba(251, 191, 36, 0.9); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
}

/* ========================================================
   MODAL: BACKGROUND CUSTOMIZER (关卡背景定制)
   ======================================================== */
.modal-sheet .scroll-container {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: 24px;
  user-select: none;
  -webkit-user-select: none;
}

.modal-section-title {
  font-size: 13px;
  font-weight: 800;
  color: #35e0e8;
  margin: 6px 0 8px;
  user-select: none;
  -webkit-user-select: none;
}

.bg-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
  touch-action: pan-y;
}

.bg-preset-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  min-height: 120px;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.bg-preset-card:hover {
  border-color: #35e0e8;
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}

.bg-preset-card:active {
  transform: scale(0.97);
}

.bg-preset-card.active {
  border-color: #fbbf24;
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.15) 0%, rgba(15, 26, 39, 0.95) 100%);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.35);
}

.bg-preset-thumb {
  width: 100%;
  height: 52px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #091019;
}

.bg-preset-thumb svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bg-url-input-box {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.bg-url-input-field {
  flex: 1;
  background: rgba(9, 15, 28, 0.8);
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  padding: 8px 12px;
  color: var(--ink-primary);
  font-size: 12px;
  outline: none;
  transition: all 0.15s ease;
}

.bg-url-input-field:focus {
  border-color: #35e0e8;
  box-shadow: 0 0 8px rgba(53, 224, 232, 0.3);
}

.btn-apply-url {
  background: linear-gradient(135deg, #0e7490, #0369a1);
  color: #ffffff;
  border: 1px solid #35e0e8;
  border-radius: 3px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-apply-url:hover {
  background: linear-gradient(135deg, #0369a1, #075985);
  transform: translateY(-1px);
}

.bg-preset-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bg-preset-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-primary);
}

.bg-preset-desc {
  font-size: 10.5px;
  color: var(--ink-secondary);
  line-height: 1.3;
}

.bg-preset-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(53, 224, 232, 0.15);
  color: #35e0e8;
  align-self: flex-start;
  margin-top: 2px;
}

.bg-preset-card.active .bg-preset-badge {
  background: #fbbf24;
  color: #0c0c16;
}

.bg-upload-zone {
  border: 2px dashed rgba(53, 224, 232, 0.4);
  background: rgba(9, 15, 28, 0.6);
  border-radius: 5px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 10px;
}

.bg-upload-zone:hover, .bg-upload-zone.dragover {
  border-color: #35e0e8;
  background: rgba(53, 224, 232, 0.1);
}

.bg-upload-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.bg-upload-text {
  font-size: 12.5px;
  color: var(--ink-primary);
}

.btn-subtle-pill {
  padding: 8px 14px;
  border-radius: 2px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--ink-primary);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-subtle-pill:hover {
  background: var(--bg-card-hover);
  border-color: #35e0e8;
}

.btn-subtle-pill.danger {
  color: #ef4444;
  border-color: #991b1b;
  width: 100%;
}

.pause-quick-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.inv-slot-icon-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 0;
}

.inv-slot-icon-mini svg {
  width: 22px;
  height: 22px;
}

/* ========================================================
   GOLD COIN BADGES & ICONS (金币专属图标与微章)
   ======================================================== */
.coin-icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  vertical-align: -2px;
  flex-shrink: 0;
}

.coin-icon-inline svg {
  width: 18px;
  height: 18px;
}

.coin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fbbf24;
  font-weight: 800;
}

/* ========================================================
   SPIRE MAP SVG ROUTE LINES (杀戮尖塔地图拓扑路线连接)
   ======================================================== */
.spire-path-active {
  animation: pathDash 1.6s linear infinite;
}

@keyframes pathDash {
  to {
    stroke-dashoffset: -18;
  }
}

/* ========================================================
   MODAL: STAGE DETAIL (关卡详情与出战确认面板 - 中间弹出 & 精简情报)
   ======================================================== */
.modal-overlay.stage-detail-overlay,
div#modal-stage-overlay {
  justify-content: center;
  align-items: center;
  padding: 16px;
  backdrop-filter: blur(8px);
}

.stage-detail-sheet,
div#modal-stage-sheet {
  width: 100%;
  max-width: 420px;
  height: auto;
  max-height: 84vh;
  border-radius: 0;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--color-cyan);
  background: rgba(9, 15, 28, 0.98);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 24px rgba(53, 224, 232, 0.15);
  animation: centerModalZoom 0.24s cubic-bezier(0.34, 1.36, 0.54, 1);
  padding: 16px 18px 20px;
  gap: 12px;
  display: flex;
  flex-direction: column;
}

@keyframes centerModalZoom {
  from { opacity: 0; transform: scale(0.93) skewY(2deg); }
  to { opacity: 1; transform: scale(1) skewY(0); }
}

.stage-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--border-subtle);
}

.stage-detail-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stage-modal-badge {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stage-modal-badge.monster { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid #22c55e; }
.stage-modal-badge.elite { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid #ef4444; }
.stage-modal-badge.boss { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid #f59e0b; }
.stage-modal-badge.shop { background: rgba(234, 179, 8, 0.2); color: #fde047; border: 1px solid #eab308; }
.stage-modal-badge.rest { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid #10b981; }
.stage-modal-badge.event { background: rgba(53, 224, 232, 0.2); color: #35e0e8; border: 1px solid #0e7490; }
.stage-modal-badge.treasure { background: rgba(236, 72, 153, 0.2); color: #f472b6; border: 1px solid #ec4899; }

.stage-modal-title {
  font-size: 15.5px;
  font-weight: 900;
  color: var(--ink-primary);
  margin-top: 2px;
}

.stage-detail-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
  min-height: 0;
}

.stage-detail-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
}

.stage-hero-icon {
  width: 38px;
  height: 38px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.stage-hero-icon svg {
  width: 22px;
  height: 22px;
}

.stage-hero-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stage-hero-summary {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-primary);
}

.stage-hero-detail {
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.35;
}

/* 精简情报卡片 */
.stage-intel-card,
div#modal-stage-sheet > div:nth-of-type(2) > div:nth-of-type(2) {
  padding: 10px 12px;
  border-radius: 4px;
  background: #08111c;
  border: 1px solid rgba(53, 224, 232, 0.2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-intel-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stage-intel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  padding-bottom: 4px;
}

.stage-intel-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.stage-intel-label {
  color: var(--ink-muted);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 11px;
}

.stage-intel-val {
  color: var(--ink-primary);
  font-weight: 700;
  text-align: right;
  word-break: break-word;
  font-size: 11.5px;
}

.intel-pill {
  font-size: 10.5px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 6px;
  display: inline-block;
}

.intel-pill.normal { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.intel-pill.danger { background: rgba(239, 68, 68, 0.25); color: #f87171; }
.intel-pill.boss { background: rgba(245, 158, 11, 0.25); color: #fbbf24; }
.intel-pill.safe { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.intel-pill.event { background: rgba(53, 224, 232, 0.2); color: #35e0e8; }
.intel-pill.treasure { background: rgba(236, 72, 153, 0.2); color: #f472b6; }

/* ========================================================
   DIFFICULTY SELECTOR & POPUP (难度选择器与向上展开弹窗)
   ======================================================== */
.role-select-footer {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.btn-diff-trigger {
  flex: 1;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(30, 41, 59, 0.85);
  color: #f1f5f9;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.btn-diff-trigger:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.btn-diff-trigger.diff-normal {
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.35) 0%, rgba(15, 23, 42, 0.95) 100%);
  color: #e0f2fe;
}

.btn-diff-trigger.diff-hard {
  border-color: rgba(251, 191, 36, 0.55);
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.4) 0%, rgba(15, 23, 42, 0.95) 100%);
  color: #fef08a;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.btn-diff-trigger.diff-extreme {
  border-color: rgba(192, 132, 252, 0.6);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.4) 0%, rgba(15, 23, 42, 0.95) 100%);
  color: #f5d0fe;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3);
}

.diff-trigger-icon {
  font-size: 16px;
  line-height: 1;
}

.diff-trigger-text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.diff-trigger-arrow {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.25s ease;
}

.btn-diff-trigger.is-open .diff-trigger-arrow {
  transform: rotate(180deg);
}

.role-select-footer .btn-role-confirm {
  flex: 1.25;
  height: 48px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* 向上展开的遮罩与抽屉 */
.diff-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 16, 0.7);
  backdrop-filter: blur(4px);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  animation: none !important;
}

.diff-popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.diff-popup-drawer {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 74px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 14px 14px 16px;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.8), 0 0 24px rgba(56, 189, 248, 0.15);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(24px) scale(0.95);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(20px);
  animation: none !important;
}

.diff-popup-drawer.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.diff-popup-drawer::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 28%;
  width: 12px;
  height: 12px;
  background: rgba(15, 23, 42, 0.96);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transform: rotate(45deg);
}

.diff-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2px;
}

.diff-popup-title {
  font-size: 13px;
  font-weight: 900;
  color: #f1f5f9;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.diff-popup-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.diff-popup-close:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #ffffff;
  border-color: rgba(239, 68, 68, 0.5);
}

.hero-difficulty-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.diff-tab-btn {
  padding: 8px 4px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.diff-tab-btn:hover {
  background: rgba(51, 65, 85, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

.diff-tab-btn.active.diff-tab-normal {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.diff-tab-btn.active.diff-tab-hard {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  border-color: #fbbf24;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}

.diff-tab-btn.active.diff-tab-extreme {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  border-color: #c084fc;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.45);
}

.hero-difficulty-desc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.diff-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.diff-stat-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.diff-stat-pill.text-amber {
  color: #fde047;
  border-color: rgba(253, 224, 71, 0.3);
  background: rgba(253, 224, 71, 0.1);
}

.diff-stat-pill.text-purple {
  color: #e879f9;
  border-color: rgba(232, 121, 249, 0.3);
  background: rgba(232, 121, 249, 0.1);
}

.diff-stat-pill.text-red {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.1);
}

.diff-rule-text {
  font-size: 11px;
  line-height: 1.45;
  color: #94a3b8;
}

.diff-rule-text.text-danger {
  color: #fca5a5;
}

.extreme-level-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(192, 132, 252, 0.3);
  border-radius: 10px;
  padding: 6px 10px;
}

.extreme-btn-minus,
.extreme-btn-plus {
  background: rgba(124, 58, 237, 0.4);
  border: 1px solid rgba(192, 132, 252, 0.4);
  color: #ffffff;
  border-radius: 6px;
  width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.extreme-btn-minus:hover,
.extreme-btn-plus:hover {
  background: rgba(147, 51, 234, 0.7);
}

.extreme-btn-minus.is-disabled,
.extreme-btn-plus.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.extreme-level-display {
  font-size: 12.5px;
  font-weight: 800;
  color: #e2e8f0;
}

.extreme-debuff-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
  margin-top: 6px;
  padding-right: 4px;
}

.extreme-debuff-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(30, 27, 75, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
}

.extreme-debuff-icon-wrap {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(192, 132, 252, 0.3);
  padding: 2px;
}

.extreme-debuff-icon-wrap svg {
  width: 100%;
  height: 100%;
}

.extreme-debuff-tag {
  font-weight: 700;
  color: #c084fc;
  white-space: nowrap;
}

.extreme-debuff-desc {
  color: #cbd5e1;
  font-size: 10.5px;
}

.extreme-lvl-val {
  color: #e879f9;
  font-size: 14px;
  font-weight: 900;
}

.stage-unreachable-banner {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 11px;
  line-height: 1.35;
}

.stage-detail-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.btn-modal-return {
  flex: 1;
  padding: 10px 12px;
  border-radius: 3px;
  border: 1.5px solid var(--border-strong);
  background: #182742;
  color: var(--ink-primary);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-modal-return:hover {
  background: #334155;
}

.btn-modal-start {
  flex: 1.6;
  padding: 10px 14px;
  border-radius: 3px;
  border: 1.5px solid #22c55e;
  background: #16a34a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
  transition: all 0.15s ease;
}

.btn-modal-start.is-ready:hover {
  background: #15803d;
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.5);
  transform: translateY(-1px);
}

.btn-modal-start.is-locked {
  background: #334155;
  border-color: #475569;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}

/* ====================================================
   STAGE INVESTIGATING DIALOG (正在调查中状态)
   ==================================================== */
.stage-investigating-sheet {
  max-width: 360px !important;
}

.stage-modal-badge.investigating {
  background: rgba(53, 224, 232, 0.18);
  color: #35e0e8;
  border: 1px solid rgba(53, 224, 232, 0.4);
}

.stage-investigating-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 4px;
}

.investigating-radar-box {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 224, 232, 0.25) 0%, rgba(9, 15, 28, 0.95) 70%);
  border: 1.5px solid rgba(53, 224, 232, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 20px rgba(53, 224, 232, 0.3);
}

.radar-icon {
  font-size: 26px;
  position: relative;
  z-index: 2;
}

.radar-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(53, 224, 232, 0.7);
  animation: radarWave 1.8s infinite ease-out;
  pointer-events: none;
}

@keyframes radarWave {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

.investigating-text-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.investigating-main-title {
  font-size: 14px;
  font-weight: 800;
  color: #f1f5f9;
}

.investigating-desc {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
}

.btn-investigating-ack {
  width: 100%;
  justify-content: center;
}

/* ====================================================
   WEAPON MODE & DAMAGE TYPE BADGES
   ==================================================== */
.weapon-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.weapon-mode-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.2px;
}

.weapon-mode-pill.mode-single {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.weapon-mode-pill.mode-aoe {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.weapon-dmg-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.2px;
}

.weapon-dmg-pill.dmg-magic {
  background: rgba(99, 102, 241, 0.22);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.45);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.2);
}

.weapon-dmg-pill.dmg-phys {
  background: rgba(53, 224, 232, 0.18);
  color: #35e0e8;
  border: 1px solid rgba(53, 224, 232, 0.35);
}

.w-stat-pill.is-fast {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
  border: 1px solid #10b981;
  font-weight: 800;
}

/* ====================================================
   MOBILE TOUCH & SCROLLABLE INTERFACE OPTIMIZATIONS
   ==================================================== */
.scroll-container,
.roles-scroll-list,
.spire-map-scroll,
.spire-map-graph-container,
.weapon-select-scroll,
.shop-grid-container,
.stage-detail-content,
.backpack-scroll,
.gallery-grid-scroll {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

/* Touch friendly custom scrollbars */
.scroll-container::-webkit-scrollbar,
.roles-scroll-list::-webkit-scrollbar,
.spire-map-scroll::-webkit-scrollbar,
.spire-map-graph-container::-webkit-scrollbar,
.weapon-select-scroll::-webkit-scrollbar,
.shop-grid-container::-webkit-scrollbar,
.stage-detail-content::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.scroll-container::-webkit-scrollbar-thumb,
.roles-scroll-list::-webkit-scrollbar-thumb,
.spire-map-scroll::-webkit-scrollbar-thumb,
.spire-map-graph-container::-webkit-scrollbar-thumb,
.weapon-select-scroll::-webkit-scrollbar-thumb,
.shop-grid-container::-webkit-scrollbar-thumb,
.stage-detail-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

/* Mobile Viewport Adaptations */
@media (max-width: 640px) {
  .hero-showcase-stage {
    padding: 12px;
    gap: 12px;
  }

  .role-avatar-illustrated {
    width: 48px;
    height: 48px;
  }

  .role-avatar-illustrated svg {
    width: 44px;
    height: 44px;
  }

  .weapon-select-card {
    padding: 12px 14px;
  }

  .role-card {
    padding: 12px 14px;
  }

  .stage-modal-content {
    max-height: 90vh;
    padding: 16px 14px;
  }
}

/* ========================================================
   SUPPLY SHOP V2: TACTICAL NODE / P5R x P3R x ARKNIGHTS METHOD
   ======================================================== */
#screen-supply-shop.shop-v2 {
  --shop-ink: #f5f3ea;
  --shop-muted: #8fa4ad;
  /* 商店全局强调色跟随出战角色主题色（--run-accent ← data-battle-hero），
     所有引用 --shop-cyan / --shop-line 的元素（标题、刷新钮、装备栏、下一关钮）一并同步 */
  --shop-line: color-mix(in srgb, var(--run-accent, #74d9e0) 34%, transparent);
  --shop-cyan: var(--run-accent, #74d9e0);
  --shop-coral: #ff756d;
  --shop-amber: #f2c15b;
  position: relative;
  gap: 0;
  padding: 18px 16px 12px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--shop-cyan) 6%, transparent), transparent 28%),
    linear-gradient(180deg, #08131c 0%, #0b1720 62%, #091118 100%);
  overflow: hidden;
}

#screen-supply-shop.shop-v2::before,
#screen-supply-shop.shop-v2::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

#screen-supply-shop.shop-v2::before {
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--shop-cyan) 16%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

#screen-supply-shop.shop-v2::after {
  top: 0;
  right: 20px;
  width: 42px;
  height: 3px;
  background: var(--shop-coral);
  box-shadow: 0 0 18px rgba(255, 117, 109, 0.42);
}

#screen-supply-shop.shop-v2 .screen-header {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 0 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--shop-cyan) 22%, transparent);
}

#screen-supply-shop.shop-v2 .shop-header-line {
  align-items: stretch;
  gap: 8px;
}

#screen-supply-shop.shop-v2 .shop-header-line > .screen-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--shop-line);
  border-radius: 2px;
  color: var(--shop-muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
}

#screen-supply-shop.shop-v2 .shop-top-meta {
  justify-content: flex-start;
  gap: 8px;
}

#screen-supply-shop.shop-v2 .gold-balance {
  gap: 6px;
  color: var(--shop-amber);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 12px;
}

#screen-supply-shop.shop-v2 .gold-label {
  color: var(--shop-muted);
  font-size: 9px;
  letter-spacing: 0.12em;
}

#screen-supply-shop.shop-v2 .shop-top-meta .screen-badge {
  padding: 4px 7px;
  border-color: rgba(242, 193, 91, 0.32);
  color: var(--shop-amber);
  background: rgba(242, 193, 91, 0.07);
}

#screen-supply-shop.shop-v2 .btn-shop-refresh,
#screen-supply-shop.shop-v2 .btn-shop-loadout,
#screen-supply-shop.shop-v2 #btn-shop-next {
  min-height: 44px;
  border-radius: 2px;
  font-family: var(--font-main, system-ui, sans-serif);
  font-weight: 900;
  letter-spacing: 0.02em;
  transition: transform 90ms ease, background 140ms ease, border-color 140ms ease;
}

#screen-supply-shop.shop-v2 .btn-shop-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--shop-cyan) 56%, transparent);
  background: color-mix(in srgb, var(--shop-cyan) 8%, transparent);
  color: var(--shop-cyan);
  font-size: 10px;
}

#screen-supply-shop.shop-v2 .btn-shop-refresh:hover:not(:disabled) {
  background: var(--shop-cyan);
  border-color: var(--shop-cyan);
  color: #071219;
  transform: translateY(-1px);
}

#screen-supply-shop.shop-v2 .btn-shop-refresh:disabled {
  border-color: rgba(143, 164, 173, 0.24);
  color: #52636b;
  background: rgba(143, 164, 173, 0.06);
}

#screen-supply-shop.shop-v2 .shop-action-mark {
  font-size: 17px;
  line-height: 1;
}

#screen-supply-shop.shop-v2 .shop-action-cost {
  display: inline-flex;
  align-items: center;
  margin-left: 1px;
  color: var(--shop-amber);
}

#screen-supply-shop.shop-v2 .shop-section-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

#screen-supply-shop.shop-v2 .shop-section-title,
#screen-supply-shop.shop-v2 .shop-section-count {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#screen-supply-shop.shop-v2 .shop-section-title {
  color: var(--shop-ink);
  font-size: 10px;
  font-weight: 900;
}

#screen-supply-shop.shop-v2 .shop-section-count {
  color: var(--shop-muted);
  font-size: 9px;
  font-weight: 800;
}

#screen-supply-shop.shop-v2 .shop-grid-container {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  gap: 8px;
  padding: 0 2px 8px 0;
  scrollbar-color: color-mix(in srgb, var(--shop-cyan) 50%, transparent) transparent;
}

#screen-supply-shop.shop-v2 .shop-card {
  min-height: 92px;
  padding: 10px 10px 9px 13px;
  border: 1px solid rgba(143, 164, 173, 0.28);
  border-left: 3px solid var(--rarity-border, rgba(143, 164, 173, 0.45));
  border-radius: 2px;
  background: rgba(17, 31, 40, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  overflow: visible;
  isolation: isolate;
}

#screen-supply-shop.shop-v2 .shop-card::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 18px;
  height: 18px;
  border-top: 1px solid color-mix(in srgb, var(--shop-cyan) 45%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--shop-cyan) 45%, transparent);
  pointer-events: none;
}

#screen-supply-shop.shop-v2 .shop-card-index {
  position: absolute;
  top: 7px;
  right: 8px;
  color: rgba(143, 164, 173, 0.56);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  pointer-events: none;
}

#screen-supply-shop.shop-v2 .shop-card:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--shop-cyan);
  background: rgba(20, 39, 49, 0.98);
  box-shadow: 5px 5px 0 rgba(255, 117, 109, 0.13);
}

#screen-supply-shop.shop-v2 .shop-card.is-confirming {
  border-color: var(--shop-coral);
  box-shadow: 5px 5px 0 rgba(255, 117, 109, 0.18);
}

#screen-supply-shop.shop-v2 .shop-card.is-locked {
  --rarity-border: var(--shop-amber);
  border-color: rgba(242, 193, 91, 0.68) !important;
  background: rgba(57, 48, 30, 0.54);
  box-shadow: 5px 5px 0 rgba(242, 193, 91, 0.1);
}

#screen-supply-shop.shop-v2 .shop-card.can-synth {
  border-color: color-mix(in srgb, var(--shop-cyan) 76%, transparent) !important;
  background: rgba(18, 49, 52, 0.64);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--shop-cyan) 10%, transparent);
}

#screen-supply-shop.shop-v2 .shop-card.cant-afford {
  opacity: 0.62;
}

#screen-supply-shop.shop-v2 .shop-art {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), inset 0 4px 0 rgba(255, 255, 255, 0.1);
}

#screen-supply-shop.shop-v2 .shop-type-badge {
  top: auto;
  right: -7px;
  bottom: -5px;
  padding: 2px 4px;
  border-radius: 1px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 7px;
  letter-spacing: 0.04em;
}

#screen-supply-shop.shop-v2 .shop-name-row {
  padding-right: 22px;
  gap: 5px;
}

#screen-supply-shop.shop-v2 .shop-item-name {
  color: var(--shop-ink);
  font-size: 13px;
}

#screen-supply-shop.shop-v2 .shop-item-desc-inline {
  margin-top: 5px;
  color: var(--shop-muted);
  font-size: 10px;
  line-height: 1.35;
}

#screen-supply-shop.shop-v2 .rarity-badge,
#screen-supply-shop.shop-v2 .shop-synth-badge,
#screen-supply-shop.shop-v2 .shop-unique-badge {
  border-radius: 1px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 8px;
  letter-spacing: 0.03em;
}

#screen-supply-shop.shop-v2 .shop-synth-badge {
  background: var(--shop-cyan);
  color: #071219;
}

#screen-supply-shop.shop-v2 .shop-card-actions {
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}

#screen-supply-shop.shop-v2 .btn-shop-lock {
  min-width: 40px;
  min-height: 34px;
  padding: 3px 6px;
  border: 1px solid rgba(143, 164, 173, 0.34);
  border-radius: 1px;
  color: var(--shop-muted);
  background: rgba(143, 164, 173, 0.08);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 9px;
}

#screen-supply-shop.shop-v2 .btn-shop-lock:hover,
#screen-supply-shop.shop-v2 .btn-shop-lock.is-locked {
  border-color: var(--shop-amber);
  color: #08131c;
  background: var(--shop-amber);
}

#screen-supply-shop.shop-v2 .shop-price-tag {
  min-height: 34px;
  padding: 0 7px;
  border: 1px solid rgba(242, 193, 91, 0.42);
  border-radius: 1px;
  background: rgba(242, 193, 91, 0.08);
}

#screen-supply-shop.shop-v2 .shop-price-side .price-val,
#screen-supply-shop.shop-v2 .price-val {
  color: var(--shop-amber);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 11px;
}

#screen-supply-shop.shop-v2 .inventory-bar {
  position: relative;
  z-index: 1;
  margin: 2px 0 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--shop-cyan) 24%, transparent);
  border-radius: 2px;
  background: rgba(10, 23, 30, 0.82);
}

#screen-supply-shop.shop-v2 .inv-title {
  color: var(--shop-muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#screen-supply-shop.shop-v2 .inv-slot {
  height: 46px;
  border-radius: 1px;
  background: rgba(143, 164, 173, 0.06);
}

#screen-supply-shop.shop-v2 .shop-footer-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 8px 0 max(4px, env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--shop-cyan) 16%, transparent);
}

#screen-supply-shop.shop-v2 .shop-footer-actions .btn-shop-loadout {
  flex: 0 0 38%;
  border: 1px solid color-mix(in srgb, var(--shop-cyan) 58%, transparent);
  background: color-mix(in srgb, var(--shop-cyan) 8%, transparent);
  color: var(--shop-cyan);
  font-size: 11px;
}

#screen-supply-shop.shop-v2 .shop-footer-actions #btn-shop-next {
  flex: 1 1 auto;
  border: 1px solid var(--shop-coral);
  background: var(--shop-coral);
  color: #1b1111;
  font-size: 13px;
  box-shadow: 4px 4px 0 rgba(255, 117, 109, 0.16);
}

#screen-supply-shop.shop-v2 .shop-footer-actions button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

#screen-supply-shop.shop-v2 .shop-offer-popover {
  border-radius: 1px;
  border: 1px solid var(--shop-coral);
  background: rgba(23, 28, 34, 0.98);
  box-shadow: 5px 5px 0 rgba(255, 117, 109, 0.24);
}

#screen-supply-shop.shop-v2 .btn-popover-cancel,
#screen-supply-shop.shop-v2 .btn-popover-buy {
  min-height: 40px;
  border-radius: 1px;
}

@media (max-width: 520px) {
  #screen-supply-shop.shop-v2 {
    padding: 16px 12px 10px;
  }

  #screen-supply-shop.shop-v2 .shop-header-line {
    flex-wrap: wrap;
  }

  #screen-supply-shop.shop-v2 .shop-header-line > .screen-badge {
    min-height: 34px;
  }

  #screen-supply-shop.shop-v2 .shop-top-meta {
    flex: 1 1 auto;
  }

  #screen-supply-shop.shop-v2 .btn-shop-refresh {
    flex: 0 0 auto;
  }

  #screen-supply-shop.shop-v2 .shop-grid-container {
    gap: 7px;
  }

  #screen-supply-shop.shop-v2 .shop-card {
    min-height: 88px;
  }

  #screen-supply-shop.shop-v2 .shop-footer-actions .btn-shop-loadout {
    flex-basis: 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-supply-shop.shop-v2 .shop-card,
  #screen-supply-shop.shop-v2 .btn-shop-refresh,
  #screen-supply-shop.shop-v2 .shop-footer-actions button {
    transition: none;
  }
}

/* ====================================================
   MOBILE VIEWPORT BASELINE
   Keep each screen scrollable on short devices while preserving
   dedicated horizontal carousels and the battle canvas gesture layer.
   ==================================================== */
@media (max-width: 640px) {
  html,
  body {
    min-height: 100%;
    height: 100%;
  }

  body {
    min-height: 100dvh;
    align-items: stretch;
  }

  #game-shell {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    min-height: 100svh;
    max-height: none;
    border-radius: 0;
  }

  .screen {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .screen--menu {
    padding-top: max(44px, calc(24px + env(safe-area-inset-top)));
  }

  .menu-hero {
    margin-top: 24px;
  }

  .screen-header,
  .screen-footer {
    flex-shrink: 0;
  }

  .screen-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .scroll-container,
  .roles-scroll-list,
  .weapon-select-scroll,
  .shop-grid-container,
  .stage-detail-content,
  .backpack-scroll,
  .gallery-grid-scroll,
  .spire-topological-scroll {
    min-height: 0;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .tab-nav,
  .spire-track-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .modal-overlay {
    padding-top: env(safe-area-inset-top);
  }

  .modal-sheet {
    width: 100%;
    max-width: 100%;
    max-height: calc(92dvh - env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  #toast {
    top: auto;
    bottom: calc(78px + env(safe-area-inset-bottom));
    max-width: min(280px, calc(100vw - 32px));
    padding: 7px 12px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.25;
  }

  #modal-weapon-detail-sheet {
    width: min(94vw, 420px);
    max-width: calc(100% - 16px);
    height: auto;
    max-height: 82dvh;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    border-radius: 6px 6px 0 0;
    gap: 8px;
  }

  #modal-weapon-detail-sheet .modal-sheet-header {
    padding-bottom: 6px;
  }

  #modal-weapon-detail-sheet .modal-sheet-title {
    font-size: 16px;
  }

  #modal-weapon-detail-sheet .weapon-detail-body {
    gap: 8px;
  }

  #modal-weapon-detail-sheet .weapon-detail-hero {
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
  }

  #modal-weapon-detail-sheet .weapon-detail-icon {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    font-size: 22px;
  }

  #modal-weapon-detail-sheet .weapon-detail-name {
    font-size: 16px;
    gap: 5px;
  }

  #modal-weapon-detail-sheet .weapon-detail-type {
    font-size: 11px;
  }

  #modal-weapon-detail-sheet .weapon-stat-cell {
    padding: 6px 8px;
  }

  #modal-weapon-detail-sheet .weapon-detail-special,
  #modal-weapon-detail-sheet .weapon-detail-price-box {
    padding: 7px 10px;
  }

  #modal-weapon-detail-sheet .weapon-detail-actions {
    gap: 8px;
    margin-top: 0;
  }

  #modal-weapon-detail-sheet .btn-detail-sell,
  #modal-weapon-detail-sheet .btn-detail-synth {
    padding: 9px 8px;
    border-radius: 4px;
    font-size: 12px;
  }

  /* The weapon list owns vertical scrolling; the footer stays reachable. */
  #screen-weapon-select {
    overflow: hidden;
    touch-action: pan-y;
  }

  /* Route map is an immersive full-screen level view on every phone size. */
  #screen-route-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  #screen-weapon-select .weapon-select-scroll {
    flex: 1 1 0% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 18px !important;
    touch-action: none !important;
    cursor: grab;
  }

  #screen-weapon-select .weapon-select-scroll.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto !important;
  }

  #screen-weapon-select .screen-header {
    margin-bottom: 6px;
  }

  #screen-weapon-select .screen-title {
    font-size: 20px;
  }

  #screen-weapon-select .screen-desc {
    font-size: 11px;
    line-height: 1.3;
  }

  #screen-weapon-select .hero-swipe-hint {
    margin: 2px 0 6px;
    font-size: 10px;
  }

  #screen-weapon-select .weapon-select-card {
    padding: 8px 10px;
    gap: 5px;
    border-radius: 4px;
  }

  #screen-weapon-select .weapon-card-header {
    gap: 8px;
  }

  #screen-weapon-select .weapon-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 3px;
    font-size: 16px;
  }

  #screen-weapon-select .weapon-header-info {
    gap: 2px;
    min-width: 0;
  }

  #screen-weapon-select .weapon-title-row {
    gap: 3px;
    flex-wrap: wrap;
  }

  #screen-weapon-select .weapon-name {
    font-size: 13px;
  }

  #screen-weapon-select .weapon-mode-pill,
  #screen-weapon-select .weapon-dmg-pill {
    font-size: 9px;
    padding: 1px 4px;
  }

  #screen-weapon-select .weapon-stat-row {
    gap: 3px;
  }

  #screen-weapon-select .w-stat-pill {
    font-size: 9px;
    padding: 1px 4px;
  }

  #screen-weapon-select .weapon-desc-box {
    font-size: 10px;
    line-height: 1.25;
    padding: 4px 6px;
  }

  #screen-supply-shop .shop-header-pill {
    flex-wrap: wrap;
  }

  #screen-supply-shop .shop-header-left {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  #screen-supply-shop .btn-shop-refresh,
  #screen-supply-shop .btn-shop-loadout {
    flex: 1 1 0;
    min-height: 34px;
  }

  #screen-supply-shop .screen-footer {
    display: flex;
    flex-direction: row !important;
    align-items: stretch;
    padding-top: 6px;
    gap: 5px;
  }

  #screen-supply-shop .screen-footer > button {
    min-height: 40px;
    padding: 6px 10px;
  }

  #screen-supply-shop .screen-footer > .btn-shop-loadout {
    flex: 0 0 32% !important;
  }

  #screen-supply-shop .screen-footer > #btn-shop-next {
    flex: 1 1 auto !important;
  }

  .loadout-sheet {
    max-height: 90dvh;
  }

  .inv-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .inv-slot {
    height: 48px;
  }

  .loadout-stat-grid {
    gap: 5px;
  }

  .loadout-stat-row {
    min-height: 32px;
    padding: 5px 7px;
  }

  .stage-detail-sheet,
  div#modal-stage-sheet {
    max-height: 72dvh;
    padding: 12px 14px 14px;
    gap: 8px;
    border-radius: 6px;
  }

  .stage-detail-content {
    gap: 7px;
  }

  .stage-detail-footer {
    gap: 6px;
  }

  .stage-detail-footer .btn-modal-return,
.stage-detail-footer .btn-modal-start {
    padding: 8px 10px;
    min-height: 40px;
    font-size: 12px;
  }
}

/* Event detail cards use a game-like scene treatment instead of a software form. */
#modal-stage-overlay {
  background: rgba(2, 7, 14, 0.72);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

/* 关卡详情弹窗：节点类型色 --stage-accent（JS 注入）贯穿描边/徽章/主按钮，
   漫画机能语言 = 硬偏移阴影 + 近直角 + 高对比。
   !important 是刻意反压 8619 起的 archive-grammar 全局 .modal-sheet 规则：
   master 2026-09-14 指示本弹窗单独重设计，节点色必须可见。 */
#modal-stage-sheet {
  --stage-accent: #38bdf8;
  width: min(100%, 448px);
  border: 2px solid #000000 !important;
  outline: 1.5px solid color-mix(in srgb, var(--stage-accent) 65%, transparent);
  border-radius: 2px !important;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--stage-accent) 12%, transparent), transparent 34%),
    linear-gradient(165deg, rgba(16, 26, 44, 0.99), rgba(6, 11, 20, 0.99)) !important;
  box-shadow:
    10px 10px 0 rgba(0, 0, 0, 0.55),
    0 0 34px color-mix(in srgb, var(--stage-accent) 22%, transparent) !important;
  padding: 16px 18px 18px;
  gap: 12px;
}

#modal-stage-sheet .stage-detail-header {
  padding-bottom: 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--stage-accent) 40%, transparent);
}

#modal-stage-sheet .stage-modal-badge {
  border-radius: 2px;
  border: 1.5px solid #000000;
  background: var(--stage-accent);
  color: #0a0e16;
  box-shadow: 2px 2px 0 #000000;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  letter-spacing: 0.06em;
}

#modal-stage-sheet .stage-modal-title {
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

#modal-stage-sheet .btn-close-modal {
  border: 1.5px solid #000000;
  border-radius: 2px;
  background: color-mix(in srgb, var(--stage-accent) 16%, rgba(10, 14, 22, 0.9));
  color: var(--stage-accent);
  box-shadow: 2px 2px 0 #000000;
}

#modal-stage-sheet .stage-detail-content {
  gap: 10px;
}

#modal-stage-sheet .stage-detail-hero {
  min-height: 74px;
  padding: 12px 14px;
  border: 1.5px solid #000000;
  border-left: 6px solid var(--stage-accent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--stage-accent) 9%, rgba(10, 18, 32, 0.85));
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}

#modal-stage-sheet .stage-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 2px;
  border: 2px solid #000000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}

#modal-stage-sheet .stage-hero-icon svg {
  width: 28px;
  height: 28px;
}

#modal-stage-sheet .stage-hero-summary {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
}

#modal-stage-sheet .stage-hero-detail {
  font-size: 12px;
  color: #b7c6d8;
}

#modal-stage-sheet .stage-intel-card {
  padding: 4px 14px 8px;
  border: 1.5px solid rgba(160, 200, 235, 0.18);
  border-radius: 2px;
  background: rgba(4, 10, 18, 0.72);
}

#modal-stage-sheet .stage-intel-grid {
  gap: 0;
}

#modal-stage-sheet .stage-intel-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(160, 200, 235, 0.16);
}

#modal-stage-sheet .stage-intel-row:last-child {
  padding-bottom: 2px;
  border-bottom: none;
}

#modal-stage-sheet .stage-intel-val {
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

#modal-stage-sheet .stage-intel-label {
  color: #7f96ad;
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  letter-spacing: 0.08em;
}

#modal-stage-sheet .intel-pill {
  border-radius: 2px;
  border: 1px solid #000000;
  box-shadow: 1.5px 1.5px 0 #000000;
  font-family: var(--font-main);
  letter-spacing: 0.02em;
}

#modal-stage-sheet .stage-detail-footer {
  gap: 10px;
  margin-top: 2px;
}

#modal-stage-sheet .btn-modal-return,
#modal-stage-sheet .btn-modal-start {
  min-height: 46px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 90ms ease, filter 140ms ease;
}

#modal-stage-sheet .btn-modal-return {
  border: 1.5px solid #000000;
  background: #1b2740;
  color: #cfe0f2;
  box-shadow: 4px 4px 0 #000000;
}

#modal-stage-sheet .btn-modal-return:hover {
  background: #26355a;
  transform: translate(1px, 1px);
  box-shadow: 3px 3px 0 #000000;
}

#modal-stage-sheet .btn-modal-start {
  border: 1.5px solid #000000;
  background: var(--stage-accent);
  color: #0a0e16;
  box-shadow: 4px 4px 0 #000000, 0 0 22px color-mix(in srgb, var(--stage-accent) 45%, transparent);
}

#modal-stage-sheet .btn-modal-start.is-ready:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000000, 0 0 26px color-mix(in srgb, var(--stage-accent) 60%, transparent);
  filter: brightness(1.08);
}

#modal-stage-sheet .btn-modal-start.is-locked {
  background: #2b3648;
  color: #7d8ea3;
  box-shadow: 4px 4px 0 #000000;
  cursor: not-allowed;
}

/* ========================================================
   GALLERY DETAIL POPOVER (图鉴条目详情弹层)
   ======================================================== */
.gallery-detail-pop {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(88%, 360px);
  height: fit-content;
  max-height: 82%;
  overflow-y: auto;
  z-index: 120;
  background: rgba(10, 18, 33, 0.98);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--color-brand);
  border-radius: 0;
  border-radius: 8px;
  padding: 16px;
  animation: centerModalZoom 0.24s cubic-bezier(0.34, 1.36, 0.54, 1);
}

.gallery-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.gallery-detail-art {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.08);
  overflow: hidden;
}

.gallery-detail-art svg {
  width: 100%;
  height: 100%;
}

.gallery-detail-heading {
  flex: 1;
  min-width: 0;
}

.gallery-detail-title {
  font-size: 19px;
  font-weight: 900;
  font-style: italic;
  color: var(--ink-primary);
  line-height: 1.2;
}

.gallery-detail-subtitle {
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-brand);
  text-transform: uppercase;
}

.gallery-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.gallery-detail-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 9px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--border-strong);
}

.gallery-detail-stat-label {
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.gallery-detail-stat-value {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-primary);
}

.gallery-detail-para {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-secondary);
}

/* ====================================================
   BUFF BLESSINGS & HERO TRAIT SYSTEM STYLES
   ==================================================== */
.hero-trait-buff-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  background: rgba(15, 23, 42, 0.75);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
}

.trait-buff-icon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3px;
}

.trait-buff-icon-box svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.trait-buff-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trait-buff-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trait-buff-pill {
  font-size: 12px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  letter-spacing: 0.02em;
}

.trait-buff-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: #cbd5e1;
}

/* Battle HUD Buff Bar */
.battle-buff-bar {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 170px);
  z-index: 40;
  pointer-events: auto;
}

.battle-buff-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 4px;
  background: rgba(13, 20, 36, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid #38bdf8;
  border-radius: 20px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  animation: buffBadgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  user-select: none;
}

@keyframes buffBadgePop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.buff-svg-wrap {
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buff-svg-wrap svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.buff-symbol {
  font-size: 12px;
}

.buff-name {
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Pause Screen Buff List */
.pause-buff-section {
  margin-top: 14px;
}

.pause-buff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.pause-buff-card {
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1.5px solid #38bdf8;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.pause-buff-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pause-buff-icon-box {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  overflow: hidden;
}

.pause-buff-icon-box svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pause-buff-body {
  flex: 1;
  min-width: 0;
}

.pause-buff-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.pause-buff-symbol {
  font-size: 13px;
}

.pause-buff-title {
  font-size: 13px;
  font-weight: 900;
  color: #f8fafc;
}

.pause-buff-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.tag-trait {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.tag-rare {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.pause-buff-desc {
  font-size: 11px;
  line-height: 1.45;
  color: #94a3b8;
}

/* 效果数值着色：正面绿色 / 负面红色 */
.fx-pos {
  color: #4ade80;
  font-weight: 600;
}

.fx-neg {
  color: #f87171;
  font-weight: 600;
}

/* 升级卡稀有度徽章（品质对应数值大小） */
.reward-card-rarity {
  display: inline-block;
  align-self: center;
  margin: 3px auto 2px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0.95;
}

/* ====================================================
   BLACK MARKET (黑市抽卡 · 原神式保底模型)
   ==================================================== */
.bm-meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}
.bm-counter {
  font-size: 11px;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.42);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.bm-odds-btn {
  font: 700 11px var(--font-main);
  color: #bfe3ff;
  background: rgba(75, 159, 225, 0.12);
  border: 1px solid rgba(75, 159, 225, 0.45);
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
}
.bm-odds-btn:active { transform: scale(0.96); }
.bm-up-banner {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(56, 189, 248, 0.30);
}
.bm-up-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #38bdf8;
  margin-bottom: 6px;
}
.bm-up-list { display: flex; gap: 8px; flex-wrap: wrap; }
.bm-up-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
}
.bm-up-chip svg { width: 14px; height: 14px; }
.bm-last-wrap { margin-top: 10px; }
.bm-last-title { font-size: 10px; font-weight: 800; color: #94a3b8; margin-bottom: 5px; letter-spacing: 0.1em; }
.bm-last-row { display: flex; gap: 5px; flex-wrap: wrap; }
.bm-last-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  padding: 3px 7px;
  max-width: 108px;
}
.bm-last-chip svg { width: 12px; height: 12px; flex: 0 0 auto; }
.bm-last-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-last-chip em,
.bm-up-chip em,
.bmp-item-chip em { font-style: normal; font-weight: 800; flex: 0 0 auto; }
.bm-actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  padding-top: 12px;
}
.bm-pull-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, 0.5);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.05));
  color: #fde68a;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.bm-pull-btn b { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; }
.bm-pull-btn:active { transform: scale(0.97); }
.bm-pull-btn.is-ten {
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0.05));
  color: #bae6fd;
}
.bm-pull-btn[disabled] { filter: grayscale(0.9) brightness(0.6); cursor: not-allowed; }
.bm-note {
  margin-top: 8px;
  font-size: 9.5px;
  line-height: 1.5;
  color: #94a3b8;
  text-align: center;
}
/* ---- 揭示动画浮层 ---- */
.bm-gacha-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at center, rgba(10, 18, 33, 0.94), rgba(2, 5, 10, 0.98));
  overflow: hidden;
  cursor: pointer;
}
.bm-gacha-overlay.is-done { cursor: default; }
.bm-gacha-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(56, 189, 248, 0.35) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.bm-gacha-flash.is-firing { animation: bmFlash 0.5s ease-out; }
@keyframes bmFlash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
.bm-gacha-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.bm-gacha-overlay.is-revealing .bm-gacha-stage {
  opacity: 0;
  transform: scale(1.6);
  position: absolute;
  pointer-events: none;
}
.bm-particle {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bm-best, #38bdf8);
  box-shadow: 0 0 8px var(--bm-best, #38bdf8);
  animation: bmParticleIn 0.75s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes bmParticleIn {
  from { transform: translate(var(--bm-dx), var(--bm-dy)) scale(0.4); opacity: 0; }
  60% { opacity: 1; }
  to { transform: translate(0, 0) scale(1); opacity: 0.9; }
}
.bm-sigil {
  font-size: 46px;
  color: var(--bm-best, #38bdf8);
  text-shadow: 0 0 24px var(--bm-best, #38bdf8);
  animation: bmSigilPulse 0.9s ease-in-out infinite alternate;
}
@keyframes bmSigilPulse {
  from { transform: scale(0.86) rotate(-8deg); }
  to { transform: scale(1.12) rotate(8deg); }
}
.bm-gacha-hint {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #cbd5e1;
}
.bm-gacha-grid-wrap { display: none; max-height: 62vh; }
.bm-gacha-overlay.is-revealing .bm-gacha-grid-wrap { display: block; }
.bm-gacha-grid {
  display: grid;
  grid-template-columns: repeat(5, 58px);
  gap: 8px;
  justify-content: center;
}
.bm-gacha-grid.is-single { grid-template-columns: 132px; }
.bm-card {
  width: 58px;
  height: 80px;
  perspective: 420px;
  animation: bmCardDeal 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.bm-gacha-grid.is-single .bm-card { width: 132px; height: 176px; }
.bm-gacha-grid .bm-card:nth-child(1) { animation-delay: 0.02s; }
.bm-gacha-grid .bm-card:nth-child(2) { animation-delay: 0.06s; }
.bm-gacha-grid .bm-card:nth-child(3) { animation-delay: 0.1s; }
.bm-gacha-grid .bm-card:nth-child(4) { animation-delay: 0.14s; }
.bm-gacha-grid .bm-card:nth-child(5) { animation-delay: 0.18s; }
.bm-gacha-grid .bm-card:nth-child(6) { animation-delay: 0.22s; }
.bm-gacha-grid .bm-card:nth-child(7) { animation-delay: 0.26s; }
.bm-gacha-grid .bm-card:nth-child(8) { animation-delay: 0.3s; }
.bm-gacha-grid .bm-card:nth-child(9) { animation-delay: 0.34s; }
.bm-gacha-grid .bm-card:nth-child(10) { animation-delay: 0.38s; }
@keyframes bmCardDeal {
  from { transform: translateY(26px) scale(0.6); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.bm-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.42s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.bm-card.is-revealed .bm-card-inner { transform: rotateY(180deg); }
.bm-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 9px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bm-card-back {
  background: linear-gradient(160deg, #16233a, #0b1220);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: rgba(251, 191, 36, 0.8);
  font-size: 20px;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}
.bm-card-front {
  transform: rotateY(180deg);
  background: linear-gradient(170deg, #101b2e, #0a1120);
  border: 1.5px solid var(--bm-c, #64748b);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
  padding: 4px 3px;
  overflow: hidden;
}
/* 揭示后外圈 = 物品稀有度颜色（容器级辉光，不依赖 color-mix） */
.bm-card.is-revealed {
  border-radius: 9px;
  box-shadow: 0 0 10px var(--bm-glow, rgba(148, 163, 184, 0.4));
}
.bm-card-icon svg { width: 22px; height: 22px; }
.bm-gacha-grid.is-single .bm-card-icon svg { width: 46px; height: 46px; }
.bm-card-name {
  max-width: 100%;
  font-size: 9px;
  font-weight: 800;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm-gacha-grid.is-single .bm-card-name { font-size: 13px; }
.bm-card-tier { font-size: 10px; font-weight: 800; }
.bm-card-note { font-size: 8.5px; color: #fbbf24; }
.bm-card.is-up.is-revealed .bm-card-front { box-shadow: 0 0 18px rgba(56, 189, 248, 0.8), inset 0 0 14px rgba(56, 189, 248, 0.25); }
.bm-card.is-up.is-revealed .bm-card-front::before {
  content: '';
  position: absolute;
  inset: -34%;
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(56, 189, 248, 0.28) 13% 15%, transparent 16% 37%, rgba(251, 191, 36, 0.3) 38% 40%, transparent 41% 62%, rgba(56, 189, 248, 0.28) 63% 65%, transparent 66% 87%, rgba(251, 191, 36, 0.3) 88% 90%, transparent 91%);
  animation: bmRaySpin 3.2s linear infinite;
  z-index: -1;
}
@keyframes bmRaySpin {
  to { transform: rotate(360deg); }
}
.bm-gacha-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.bm-gacha-summary { font-size: 12px; color: #cbd5e1; }
.bm-gacha-done {
  font: 800 14px var(--font-main);
  letter-spacing: 0.3em;
  color: #06121f;
  background: linear-gradient(180deg, #7dd3fc, #38bdf8);
  border: none;
  border-radius: 999px;
  padding: 10px 44px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.45);
}
.bm-gacha-done:active { transform: scale(0.97); }
.bm-gacha-skip {
  position: absolute;
  bottom: 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(148, 163, 184, 0.75);
}
.bm-gacha-overlay.is-done .bm-gacha-skip { display: none; }
/* ---- 概率详情面板 ---- */
.bm-odds-overlay { z-index: 270; }
.bm-odds-sheet {
  width: min(330px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
}
.bm-odds-body { padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.bm-odds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
.bm-odds-label { flex: 1; font-size: 11px; color: #e2e8f0; font-weight: 700; }
.bm-odds-value { font-size: 15px; font-weight: 800; color: #fbbf24; }
.bm-odds-note { flex-basis: 100%; font-size: 9.5px; color: #94a3b8; }
.bm-odds-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 10.5px;
  color: #cbd5e1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.05);
}
.bm-odds-progress b { color: #fbbf24; }
.bm-odds-rules { font-size: 9.5px; line-height: 1.7; color: #94a3b8; }

/* ====================================================
   BLACK MARKET PARCEL (黑市包裹整理界面)
   ==================================================== */
.bmp-section {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
.bmp-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #94a3b8;
  margin-bottom: 8px;
}
.bmp-weapon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.bmp-weapon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px 6px;
  border-radius: 9px;
  border: 1.2px solid rgba(148, 163, 184, 0.35);
  background: rgba(7, 12, 24, 0.55);
}
.bmp-wicon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  border-radius: 6px;
  background: radial-gradient(circle at center, #161a24 0%, #090b10 100%);
  border: 1px solid rgba(255, 42, 68, 0.4);
  box-shadow: 0 0 6px rgba(255, 42, 68, 0.2);
}
.bmp-wicon svg,
.bmp-wicon .rpg-icon {
  width: 20px;
  height: 20px;
  display: block;
}
.bmp-wname {
  max-width: 100%;
  font-size: 9.5px;
  font-weight: 700;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bmp-wtier { font-size: 9px; font-weight: 800; }
.bmp-btn {
  font: 700 9.5px var(--font-main);
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.bmp-btn:active { transform: scale(0.95); }
.bmp-btn[disabled] { filter: grayscale(0.9) brightness(0.55); cursor: not-allowed; }
.bmp-equip {
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.45);
}
.bmp-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bmp-title-row .bmp-title { margin-bottom: 8px; }
.bmp-convert-all { flex: 0 0 auto; }
.bmp-item-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  max-height: 18vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 3px;
}
.bmp-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  padding: 3px 9px;
}
.bmp-item-icon-mini {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 4px;
  background: radial-gradient(circle at center, #161a24 0%, #090b10 100%);
  border: 1px solid rgba(255, 42, 68, 0.35);
}
.bmp-item-icon-mini svg,
.bmp-item-icon-mini .rpg-icon {
  width: 14px;
  height: 14px;
  display: block;
}
.bmp-item-chip.is-empty { color: #64748b; border-style: dashed; }
.bmp-parcel-section { border-color: rgba(251, 191, 36, 0.35); }
.bmp-parcel-list { display: flex; flex-direction: column; gap: 6px; max-height: 34vh; overflow-y: auto; }
.bmp-parcel-empty {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  padding: 10px 0;
}
.bmp-parcel-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 9px;
  border: 1.2px solid rgba(148, 163, 184, 0.35);
  background: rgba(7, 12, 24, 0.55);
}
.bmp-picon svg { width: 16px; height: 16px; display: block; }
.bmp-pname {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bmp-ptier { font-size: 10px; font-weight: 800; flex: 0 0 auto; }
.bmp-pbtns { display: flex; gap: 5px; flex: 0 0 auto; }


/* ====================================================
   BLACK MARKET DETAIL (包裹详情浮窗 · 浮于包裹页面)
   ==================================================== */
.bm-detail-pop {
  position: fixed;
  z-index: 275;
  width: 250px;
  max-height: 76vh;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(9, 15, 26, 0.97);
  border: 1.5px solid rgba(148, 163, 184, 0.4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: default;
}
.bm-detail-head { display: flex; align-items: flex-start; gap: 8px; }
.bm-detail-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bm-detail-icon svg { width: 20px; height: 20px; }
.bm-detail-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 800; color: #f1f5f9; line-height: 1.5; }
.bm-detail-x {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.bm-detail-type { font-size: 9.5px; color: #94a3b8; }
.bm-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bm-detail-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  padding: 5px 7px;
}
.bm-detail-stat span { font-size: 8.5px; color: #94a3b8; }
.bm-detail-stat b { font-size: 10.5px; color: #e2e8f0; }
.bm-detail-desc {
  font-size: 10px;
  line-height: 1.6;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  padding: 6px 8px;
}
.bm-detail-desc strong { color: #e2e8f0; }
.bm-detail-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 9.5px;
  color: #cbd5e1;
  border: 1px dashed rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.05);
  border-radius: 7px;
  padding: 5px 8px;
}
.bm-detail-note { color: #94a3b8; }
.bm-detail-actions { display: flex; gap: 6px; }
.bm-detail-actions .bmp-btn { flex: 1; padding: 6px 4px; text-align: center; }
/* 可点击提示 */
.bmp-weapon-cell, .bmp-item-chip, .bmp-parcel-row { cursor: pointer; }
.bmp-weapon-cell:active, .bmp-item-chip:active, .bmp-parcel-row:active { filter: brightness(1.25); }


/* ----------------------------------------------------
   ACTIVE SKILLS HUD & SYSTEMS MODALS
   ---------------------------------------------------- */
.hud-skills-panel {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 95;
  pointer-events: auto;
}

.hud-skill-slot {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.82);
  border: 2px solid rgba(56, 189, 248, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(56, 189, 248, 0.2);
}

.hud-skill-slot:hover {
  transform: scale(1.08);
  border-color: #38bdf8;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.6), inset 0 0 14px rgba(56, 189, 248, 0.35);
}

.hud-skill-slot:active {
  transform: scale(0.92);
}

.hud-skill-slot.is-locked {
  opacity: 0.35;
  border-style: dashed;
  border-color: #475569;
  box-shadow: none;
  cursor: not-allowed;
}

.hud-skill-icon {
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.hud-skill-key {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0284c7;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  pointer-events: none;
}

.hud-skill-cooldown-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(10, 15, 26, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
  font-size: 13px;
  font-weight: 900;
  z-index: 2;
  pointer-events: none;
  border: 2px solid rgba(251, 191, 36, 0.6);
}

.gallery-detail-flavor {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.08);
  border-left: 3px solid #fbbf24;
  font-style: italic;
  color: #fde68a;
  font-size: 12px;
  line-height: 1.5;
}

.flavor-text-quote {
  letter-spacing: 0.3px;
}

/* Systems Modals: Daily, Talents, Achievements */
.system-modal-sheet {
  max-width: 580px;
  width: 92%;
  background: linear-gradient(165deg, #0f172a 0%, #090d16 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.15);
  padding: 24px;
  color: #f8fafc;
}

.system-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 14px;
}

.system-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 8px;
}

.talent-card, .achieve-card, .mutator-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: transform 0.15s ease, border-color 0.2s ease;
}

.talent-card:hover, .achieve-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
}

.talent-info, .achieve-info {
  flex: 1;
}

.talent-name, .achieve-name {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.talent-desc, .achieve-desc {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
  line-height: 1.4;
}

.ether-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}

/* Skill Selection View & Cards */
.skill-select-scroll {
  padding: 12px 14px 90px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skill-select-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.7) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.2);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.skill-select-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
}

.skill-select-card.selected {
  border-color: #38bdf8;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(56, 189, 248, 0.15) 100%);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}

.skill-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.skill-icon-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.skill-head-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skill-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.skill-name {
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
}

.skill-cd-pill {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.skill-desc-text {
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.45;
}

.skill-branch-preview {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skill-branch-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #fbbf24;
}

.skill-branch-row {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}

.branch-tier-tag {
  color: #38bdf8;
  font-weight: 700;
}

.branch-name {
  color: #e2e8f0;
  font-weight: 700;
}

/* Battle HUD Skill Tree Trigger Button */
.hud-skill-tree-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.3) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1.5px solid #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  margin-bottom: 6px;
}

.hud-skill-tree-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.7);
}

#screen-skill-unlock {
  min-height: 100%;
  background: rgba(10, 12, 13, 0.96);
  color: #f4ede0;
}

.skill-unlock-progress {
  margin: 0 18px 8px;
  color: #54cde1;
  font: 700 12px/1.3 "Microsoft YaHei UI", sans-serif;
  text-align: right;
}

.skill-unlock-list {
  display: grid;
  gap: 10px;
  padding: 8px 16px 18px;
}

.skill-unlock-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  padding: 10px;
  border: 1px solid rgba(84, 205, 225, 0.35);
  border-radius: 6px;
  background: #172024;
  color: #f4ede0;
  text-align: left;
}

.skill-unlock-card.selected {
  border-color: #e9b545;
  box-shadow: 0 0 0 2px rgba(233, 181, 69, 0.25);
}

.skill-unlock-card-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.skill-unlock-card-body .skill-name {
  font-size: 15px;
}

.skill-unlock-card-body .skill-desc-text {
  color: #b8c5c7;
  font-size: 11px;
  line-height: 1.4;
}

.skill-unlock-footer {
  position: sticky;
  bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 12, 13, 0.98);
}

.v3-skill-summary {
  color: #aeb8c6;
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 12px;
}

.v3-skill-slots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.v3-skill-slots .skill-tree-slot-card {
  min-width: 0;
}

.v3-slot-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.v3-slot-title {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 800;
}

.v3-slot-meta,
.v3-slot-hint {
  color: #94a3b8;
  font-size: 11px;
  margin-top: 3px;
}

.battle-boss-intel {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  z-index: 22;
  width: min(560px, calc(100vw - 150px));
  transform: translateX(-50%);
  pointer-events: none;
}

.boss-intel-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(239, 68, 68, 0.42);
  background: rgba(13, 17, 24, 0.88);
  color: #d8dee8;
  font-size: 11px;
}

.boss-intel-row strong { color: #fff; }
.boss-immunity { color: #fca5a5; }

@media (max-width: 720px) {
  .v3-skill-slots { grid-template-columns: 1fr; }
  .battle-boss-intel { top: 48px; width: calc(100vw - 22px); }
  .boss-intel-row { flex-wrap: wrap; gap: 4px 10px; }
}

.skill-unlock-footer .btn {
  width: 100%;
  min-height: 46px;
}

.hud-skill-tree-btn .st-icon {
  font-size: 20px;
}

.hud-skill-tree-btn .st-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 5px;
  border: 1px solid #ffffff;
}

/* Skill Tree Modal Content */
.skill-slots-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 20px;
}

.skill-tree-slot-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skill-tree-slot-card.is-equipped {
  border-color: rgba(56, 189, 248, 0.4);
}

.skill-tree-slot-card.is-empty {
  border: 1.5px dashed rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.5);
}

.slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slot-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.slot-base-desc {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 10px;
  border-radius: 8px;
}

.slot-branches-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.branch-node-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.branch-node-row.unlocked {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.1);
}

.branch-node-row.can-unlock {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.1);
}

.branch-node-row.locked {
  opacity: 0.55;
}

.node-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.node-badge {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #38bdf8;
}

.branch-node-row.unlocked .node-badge {
  background: #22c55e;
  color: #ffffff;
}

.node-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #f8fafc;
}

.node-desc {
  font-size: 11px;
  color: #94a3b8;
}

.learn-skills-pool {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

.learn-skill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ========================================================
   FINAL P3 OVERRIDES: SHATTERED RING OBSERVATORY
   ======================================================== */
#screen-main-menu {
  background:
    linear-gradient(180deg, rgba(121, 226, 239, 0.045) 0%, transparent 26%),
    radial-gradient(circle at 50% 18%, var(--obs-night-2) 0%, var(--obs-night) 100%);
  color: var(--obs-moon);
}

.p3-ring-orbits {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.p3-ring-orbits span {
  position: absolute;
  display: block;
  width: 46%;
  height: 22%;
  border: 1px solid var(--ring-ghost);
  border-radius: 50%;
  transform: rotate(-14deg);
  clip-path: polygon(0 0, 100% 0, 100% 43%, 91% 43%, 91% 57%, 100% 57%, 100% 100%, 0 100%);
}

.p3-ring-orbits span::after {
  content: "";
  position: absolute;
  width: 8%;
  height: 8%;
  right: 7%;
  top: 46%;
  border-radius: 50%;
  background: var(--ember-coral);
}

.p3-ring-orbits span:nth-child(1) { left: -10%; top: 12%; transform: rotate(-18deg); }
.p3-ring-orbits span:nth-child(2) { right: -12%; top: 28%; width: 58%; height: 28%; transform: rotate(22deg); }
.p3-ring-orbits span:nth-child(3) { left: 8%; bottom: 14%; width: 64%; height: 24%; transform: rotate(-7deg); }
.p3-ring-orbits span:nth-child(4) { right: 3%; bottom: 5%; width: 38%; height: 18%; transform: rotate(31deg); }

#screen-main-menu .menu-hero {
  position: static;
  width: 100%;
  align-items: flex-start;
  min-height: 300px;
  padding-left: 4px;
}

#screen-main-menu .menu-hero > .p3-ring-orbits { position: absolute; }
#screen-main-menu .menu-subtitle {
  max-width: 100%;
  white-space: nowrap;
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
}
#screen-main-menu .menu-title,
#screen-main-menu .menu-stats-pill { position: relative; z-index: 1; }
#screen-main-menu .menu-title {
  max-width: 55%;
  margin: 18px 0 0;
  color: var(--obs-moon);
  font-size: clamp(38px, 10vw, 44px);
  line-height: .98;
  white-space: nowrap;
  background: none;
  -webkit-text-fill-color: initial;
}
#screen-main-menu .menu-title span { color: var(--obs-ice); }
#screen-main-menu .menu-stats-pill {
  max-width: 48%;
  min-width: 0;
  padding: 5px 7px;
  gap: 6px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--obs-panel);
  border-color: var(--obs-line);
}
#screen-main-menu .menu-role-standing {
  position: absolute;
  top: 128px;
  right: -22px;
  width: 218px;
  height: 327px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#screen-main-menu .menu-role-standing svg,
#screen-main-menu .menu-role-standing .hero-puppet-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#screen-main-menu .menu-actions {
  width: min(100%, 334px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#screen-main-menu .menu-actions .btn {
  min-width: 0;
  min-height: 44px;
  padding: 10px 8px;
  border: 1px solid var(--obs-line);
  border-radius: 8px;
  background: var(--obs-panel);
  color: var(--obs-moon);
  font-size: 13px;
}
#screen-main-menu .menu-actions .btn:first-child {
  grid-column: 1 / -1;
  min-height: 56px;
  background: var(--action);
  border-color: var(--action);
  color: var(--portrait-ink);
}

.battle-corner-tools { gap: 8px; }
.battle-corner-tools .btn-hud-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  color: var(--obs-ice);
  background: var(--obs-panel);
}

#modal-skill-tree-sheet { position: relative; overflow: hidden; }
#modal-skill-tree-sheet > .p3-ring-orbits { position: absolute; }
.skill-tree-role-bust {
  position: absolute;
  top: 52px;
  right: 10px;
  width: 112px;
  height: 168px;
  opacity: .72;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 68%, transparent 100%);
}
.skill-tree-role-bust svg,
.skill-tree-role-bust .hero-puppet-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#modal-skill-tree-sheet .modal-sheet-header,
#modal-skill-tree-sheet .modal-sheet-content { position: relative; z-index: 2; }

.pause-quick-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pause-quick-bar .btn-subtle-pill {
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  border-color: var(--obs-line);
}

@media (max-width: 365px) {
  #screen-main-menu .menu-role-standing { right: -25px; width: 176px; height: 264px; }
  #screen-main-menu .menu-title { font-size: 38px; }
  .skill-tree-role-bust { right: -8px; }

  #screen-main-menu .menu-role-standing {
    right: 0;
    top: 126px;
    width: 152px;
    height: 228px;
  }

  #modal-skill-tree-sheet .skill-tree-role-bust {
    top: 92px;
    right: 10px;
    width: 96px;
    height: 144px;
  }
  #modal-skill-tree-sheet .modal-sheet-header .btn-close-modal {
    position: relative;
    z-index: 3;
    pointer-events: auto;
  }

  /* P3 360px safety pass: keep the real portrait, dossier body and CTA in
     separate lanes instead of allowing flex-shrink to collapse the card. */
  #screen-main-menu .menu-role-standing {
    top: 112px !important;
    right: -8px !important;
    width: 148px !important;
    height: 222px !important;
  }

  #modal-skill-tree-sheet .modal-sheet-header {
    position: relative;
    z-index: 4;
    min-height: 52px;
  }

  #modal-skill-tree-sheet .modal-sheet-header .btn-close-modal {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 5 !important;
  }

  #modal-skill-tree-sheet .skill-tree-role-bust {
    top: 96px !important;
    right: 8px !important;
    width: 88px !important;
    height: 132px !important;
    z-index: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p3-ring-orbits *,
  .menu-role-standing *,
  .hero-standing-frame *,
  .skill-tree-role-bust * { animation: none !important; transition: none !important; }
}

/* ========================================================
   P3R BASELINE V2: ASH ARCHIVE / SHATTERED RING
   This is the real skin pass. It intentionally changes the
   component grammar instead of only swapping accent colors.
   ======================================================== */
:root {
  --canvas-dark: #0d0a0d;
  --surface-dark-elevated: #171116;
  --surface-dark-card: #21171c;
  --obs-night: #0d0a0d;
  --obs-night-2: #1a1117;
  --obs-panel: rgba(28, 18, 23, 0.94);
  --obs-moon: #f6e9e3;
  --obs-muted: #b29e9a;
  --obs-ice: #b8d8ce;
  --ember-coral: #ef6f61;
  --ember-soft: rgba(239, 111, 97, 0.16);
  --ring-ghost: rgba(235, 202, 192, 0.16);
  --obs-line: #60494a;
  --portrait-ink: #251318;
  --portrait-ivory: #f3dfd5;
  --color-primary: var(--ember-coral);
  --color-primary-pressed: #d95d54;
  --color-primary-active: #b94b45;
  --color-brand: var(--ember-coral);
  --color-cyan: var(--obs-ice);
  --color-blue: var(--obs-ice);
  --color-blue-dark: #87aea3;
  --color-blue-glow: var(--ember-soft);
  --color-commerce: var(--ember-coral);
  --color-commerce-pressed: #d95d54;
  --bg-deep: var(--canvas-dark);
  --bg-surface: var(--surface-dark-elevated);
  --bg-panel: var(--obs-panel);
  --bg-panel-sub: #21171c;
  --bg-card: #21171c;
  --bg-card-hover: #2b1c22;
  --ink-primary: var(--obs-moon);
  --ink-secondary: #d6c2bc;
  --ink-muted: var(--obs-muted);
  --border-subtle: rgba(235, 202, 192, 0.16);
  --border-strong: var(--obs-line);
}

html, body {
  background:
    radial-gradient(circle at 50% -10%, rgba(239, 111, 97, 0.12), transparent 38%),
    #0d0a0d;
}

body::before {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  transform: none;
  opacity: 0.62;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(235, 202, 192, 0.035) 7.1%, transparent 7.3% 92.7%, rgba(235, 202, 192, 0.035) 92.8%, transparent 93%),
    repeating-linear-gradient(0deg, rgba(235, 202, 192, 0.025) 0 1px, transparent 1px 9px);
  filter: none;
}

#game-shell {
  background: var(--obs-night);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(239, 111, 97, 0.22);
}

.screen {
  padding: 18px 16px 14px;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(239, 111, 97, 0.05) 9.2%, transparent 9.4% 90.6%, rgba(239, 111, 97, 0.035) 90.8%, transparent 91%),
    repeating-linear-gradient(0deg, rgba(246, 233, 227, 0.022) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 72% 18%, rgba(239, 111, 97, 0.08), transparent 28%),
    #0d0a0d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.screen::after {
  display: none !important;
}

.screen-header {
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(235, 202, 192, 0.16);
}

.top-bar {
  margin-bottom: 10px;
}

.btn,
.btn-primary,
.btn-info,
.btn-muted,
.btn-danger {
  border-radius: 3px !important;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  box-shadow: none !important;
}

.btn {
  border: 1px solid var(--obs-line);
  letter-spacing: 0.04em;
}

.btn-primary {
  background: var(--ember-coral) !important;
  color: var(--portrait-ink) !important;
  border-color: var(--ember-coral) !important;
  font-weight: 900;
}

.btn-primary:hover:not(:disabled) {
  background: #ff8274 !important;
  filter: none;
}

.btn-info,
.btn-muted {
  color: var(--obs-moon) !important;
  background: rgba(33, 23, 28, 0.86) !important;
  border-color: var(--obs-line) !important;
}

.btn-back {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 2px;
  background: rgba(33, 23, 28, 0.86);
  border-color: var(--obs-line);
  color: var(--obs-moon);
  box-shadow: none;
}

.btn-back:hover {
  border-color: var(--ember-coral);
  color: var(--ember-coral);
}

.screen-badge {
  color: var(--ember-coral);
  background: rgba(239, 111, 97, 0.08);
  border-left-color: var(--ember-coral);
  letter-spacing: 0.16em;
}

.screen-title {
  padding-left: 12px;
  border-left: 4px solid var(--ember-coral);
  color: var(--obs-moon);
  font-style: normal;
  letter-spacing: 0.015em;
}

.screen-desc {
  color: var(--obs-muted);
}

/* Main menu: a poster-like command sheet, not a vertical pill list. */
.screen--menu {
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 22px 18px 14px;
  text-align: left;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(239, 111, 97, 0.07) 9.2%, transparent 9.4%),
    radial-gradient(circle at 78% 28%, rgba(239, 111, 97, 0.12), transparent 27%),
    linear-gradient(135deg, #0d0a0d 0%, #171016 56%, #0d0a0d 100%);
}

.screen--menu::before {
  top: 16px;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--ember-coral), rgba(239, 111, 97, 0.12) 55%, transparent);
  opacity: 1;
}

.menu-hero {
  position: relative !important;
  width: 100%;
  min-height: 344px !important;
  margin: 0 !important;
  padding: 12px 0 0 2px;
  align-items: flex-start !important;
  gap: 7px;
  overflow: visible;
}

.menu-hero::before {
  content: "ARCHIVE // 07";
  position: absolute;
  top: 2px;
  right: 0;
  color: rgba(246, 233, 227, 0.42);
  font: 700 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.16em;
}

.menu-hero::after {
  content: "ASHFIRE OBSERVATORY";
  position: absolute;
  left: 2px;
  bottom: 2px;
  color: rgba(184, 216, 206, 0.7);
  font: 700 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.14em;
}

.menu-subtitle {
  position: relative;
  z-index: 3;
  max-width: 66% !important;
  padding: 5px 8px !important;
  border: 0;
  border-left: 3px solid var(--ember-coral);
  background: rgba(239, 111, 97, 0.08);
  color: var(--obs-moon);
  font: 800 9px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.11em;
  white-space: normal;
}

#screen-main-menu .menu-title {
  position: relative;
  z-index: 3;
  max-width: 59%;
  margin: 26px 0 0 !important;
  color: var(--obs-moon);
  font-size: clamp(42px, 12vw, 58px) !important;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-align: left;
}

#screen-main-menu .menu-title span {
  display: inline-block;
  margin-left: 18px;
  color: var(--ember-coral);
  text-shadow: none;
}

#screen-main-menu .menu-role-standing {
  top: 74px !important;
  right: -38px !important;
  width: 232px !important;
  height: 348px !important;
  z-index: 2;
  filter: saturate(0.82) contrast(1.08) drop-shadow(-12px 18px 14px rgba(0, 0, 0, 0.55));
  mix-blend-mode: normal;
}

#screen-main-menu .menu-role-standing::before {
  content: "";
  position: absolute;
  inset: 18px 22px 18px 18px;
  border: 1px solid rgba(239, 111, 97, 0.36);
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

#screen-main-menu .menu-stats-pill {
  position: absolute !important;
  left: 2px;
  bottom: 26px;
  z-index: 4;
  max-width: 57%;
  padding: 7px 9px;
  border: 0;
  border-left: 3px solid var(--obs-ice);
  border-radius: 0;
  background: rgba(33, 23, 28, 0.86);
  color: var(--obs-muted);
  font: 700 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
}

#screen-main-menu .menu-stats-pill strong {
  color: var(--ember-coral);
}

#screen-main-menu .menu-actions {
  width: 100% !important;
  margin-top: 0;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px !important;
}

#screen-main-menu .menu-actions .btn {
  justify-content: flex-start;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--obs-line);
  border-radius: 3px !important;
  background: rgba(33, 23, 28, 0.82) !important;
  color: var(--obs-moon);
  font-size: 12px;
  text-align: left;
}

#screen-main-menu .menu-actions .btn:first-child {
  grid-column: 1 / -1;
  min-height: 56px;
  justify-content: center;
  background: var(--ember-coral) !important;
  border-color: var(--ember-coral);
  color: var(--portrait-ink);
  font-size: 17px;
  letter-spacing: 0.08em;
}

#screen-main-menu .menu-actions .btn:nth-child(2),
#screen-main-menu .menu-actions .btn:nth-child(4),
#screen-main-menu .menu-actions .btn:nth-child(6) {
  border-left: 3px solid var(--obs-ice);
}

#screen-main-menu .menu-actions .btn:nth-child(3),
#screen-main-menu .menu-actions .btn:nth-child(5),
#screen-main-menu .menu-actions .btn:nth-child(7) {
  border-left: 3px solid var(--ember-coral);
}

.menu-footer-meta {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(235, 202, 192, 0.14);
  color: rgba(246, 233, 227, 0.48);
  font: 700 9px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.testmode-badge {
  border-radius: 2px;
  border-color: var(--obs-line);
  background: rgba(33, 23, 28, 0.78);
  color: var(--obs-ice);
}

/* All modal/card families inherit the archive grammar. */
.modal-sheet,
.system-modal-sheet,
.skill-select-card,
.skill-tree-slot-card,
.talent-card,
.achieve-card,
.mutator-card,
.role-card {
  border-radius: 3px !important;
  box-shadow: none !important;
  background:
    linear-gradient(135deg, rgba(239, 111, 97, 0.055), transparent 34%),
    rgba(33, 23, 28, 0.92);
}

.modal-sheet,
.system-modal-sheet {
  border-color: var(--obs-line) !important;
  border-top: 3px solid var(--ember-coral) !important;
}

.system-modal-sheet {
  padding: 18px;
}

.system-modal-sheet:not(.modal-sheet) {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
}

.system-modal-header .btn-close-modal {
  width: 44px;
  height: 44px;
  border-radius: 2px;
}

#modal-achievements {
  justify-content: center;
  padding: 12px;
}

#modal-achievements .system-modal-sheet {
  width: min(100%, 580px);
}

.system-modal-title {
  color: var(--ember-coral);
  font: 900 19px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.skill-select-card,
.skill-tree-slot-card {
  border-left: 3px solid var(--obs-ice);
}

.skill-select-card.selected {
  border-color: var(--ember-coral) !important;
  border-left-color: var(--ember-coral) !important;
  background: rgba(239, 111, 97, 0.11);
  box-shadow: none;
}

.skill-icon-avatar,
.slot-avatar,
.learn-skill-item,
.branch-node-row {
  border-radius: 2px !important;
}

/* Battle: square telemetry cluster, skills remain in the same lane and size. */
.battle-corner-tools {
  gap: 6px;
}

.battle-corner-tools .btn-hud-icon {
  width: 48px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex-direction: column;
  gap: 1px;
  border-radius: 2px;
  border-color: rgba(239, 111, 97, 0.52);
  background: rgba(28, 18, 23, 0.78);
  color: var(--obs-moon);
  box-shadow: none;
}

.hud-tool-glyph {
  color: var(--ember-coral);
  font: 900 17px/0.9 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.hud-tool-text {
  color: var(--obs-muted);
  font: 800 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
}

.hud-skills-panel {
  position: absolute !important;
  right: 14px;
  gap: 8px;
}

.hud-skill-slot {
  width: 54px;
  height: 54px;
  border-radius: 3px;
  border: 1px solid rgba(184, 216, 206, 0.48);
  background: rgba(28, 18, 23, 0.78);
  box-shadow: none;
}

.hud-skill-slot:hover {
  border-color: var(--ember-coral);
  box-shadow: none;
}

.hud-skill-slot.is-locked {
  border-color: rgba(235, 202, 192, 0.2);
}

.hud-skill-key {
  top: -5px;
  left: -5px;
  width: 19px;
  height: 19px;
  border-radius: 2px;
  background: var(--ember-coral);
  border: 1px solid var(--portrait-ivory);
  color: var(--portrait-ink);
}

.hud-skill-cooldown-overlay {
  border-radius: 3px;
  border-color: var(--ember-coral);
  background: rgba(13, 10, 13, 0.82);
  color: var(--portrait-ivory);
}

.hud-skill-tree-btn {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 2px;
  border-color: var(--ember-coral);
  background: rgba(239, 111, 97, 0.16);
  box-shadow: none;
}

.hud-skill-tree-btn .st-badge {
  border-radius: 2px;
  background: var(--obs-ice);
  color: var(--portrait-ink);
  border-color: var(--portrait-ink);
}

#modal-skill-tree-sheet {
  background:
    linear-gradient(135deg, rgba(239, 111, 97, 0.09), transparent 32%),
    #171116;
}

#modal-skill-tree-sheet .skill-tree-role-bust {
  opacity: 0.58;
  filter: saturate(0.75) sepia(0.12);
}

.p3-ring-orbits span {
  border-color: rgba(235, 202, 192, 0.18);
}

.p3-ring-orbits span::after {
  background: var(--ember-coral);
  box-shadow: 0 0 0 3px rgba(239, 111, 97, 0.08);
}

@media (max-width: 365px) {
  .screen--menu {
    padding: 18px 14px 12px;
  }

  .menu-hero {
    min-height: 308px !important;
  }

  #screen-main-menu .menu-title {
    font-size: 39px !important;
  }

  #screen-main-menu .menu-role-standing {
    top: 66px !important;
    right: -24px !important;
    width: 184px !important;
    height: 276px !important;
  }

  #screen-main-menu .menu-stats-pill {
    bottom: 12px;
    max-width: 63%;
    font-size: 9px;
  }

  #screen-main-menu .menu-actions .btn {
    font-size: 11px;
  }

  .system-modal-sheet {
    width: calc(100% - 20px);
    padding: 14px;
  }
}

/* ========================================================================== */
/* TDXD UI 3.0: TACTICAL TERMINAL & REVOLUTIONARY LAYOUT REDESIGN             */
/* ========================================================================== */

:root {
  --tdxd-glow-coral: rgba(255, 85, 51, 0.45);
  --tdxd-glow-cyan: rgba(0, 229, 255, 0.35);
  --tdxd-glow-purple: rgba(168, 85, 247, 0.4);
  --tdxd-border-tactical: rgba(56, 189, 248, 0.28);
  --tdxd-bg-tactical: rgba(14, 22, 38, 0.92);
}

/* 1. Main Menu Enhancement */
#screen-main-menu {
  background: radial-gradient(circle at 50% 20%, #111a2f 0%, #060912 100%) !important;
}

#screen-main-menu .menu-cta-launch {
  min-height: 52px;
  background: linear-gradient(135deg, #ff5533 0%, #dc2626 100%) !important;
  box-shadow: 0 6px 22px var(--tdxd-glow-coral) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  transition: transform 0.2s, box-shadow 0.2s;
}

#screen-main-menu .menu-cta-launch:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 85, 51, 0.7) !important;
}

/* 3. Battle View HUD Optimization */
.hud-skills-panel {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
}

.hud-skill-slot {
  transition: transform 0.15s, border-color 0.15s;
}

.hud-skill-slot:active {
  transform: scale(0.92);
}

/* 4. Shop Cards & Synergy Tags */
#screen-shop .shop-offer-card {
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  background: var(--tdxd-bg-tactical) !important;
  backdrop-filter: blur(12px) !important;
}

#screen-shop .shop-offer-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* 5. Black Market Aesthetic */
#screen-black-market {
  background: radial-gradient(circle at 50% 30%, #1c102c 0%, #07040d 100%) !important;
}

/* 6. Campfire & Event Cards */
#screen-rest .rest-action-card,
#screen-curio .curio-choice-card {
  transition: transform 0.2s, border-color 0.2s;
  background: var(--tdxd-bg-tactical) !important;
}

#screen-rest .rest-action-card:hover,
#screen-curio .curio-choice-card:hover {
  transform: translateX(4px);
  border-color: #ff5533 !important;
}

/* 7. Constellation Sector Map */
#screen-map .map-node-item {
  transition: transform 0.2s, box-shadow 0.2s;
}

#screen-map .map-node-item:hover {
  transform: scale(1.08);
}

/* 8. Finalized Hero & Boss High-Res Raster Portrait Styles */
.hero-standing-raster-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-standing-raster-img {
  width: 100%;
  height: 100%;
  max-width: 290px;
  max-height: 380px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-standing-raster-wrap:hover .hero-standing-raster-img {
  transform: scale(1.03);
}

.boss-standing-raster-wrap {
  width: 100%;
  min-height: 180px;
  max-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}

.boss-standing-raster-img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.9));
}



/* Approved main-menu reset takes precedence over legacy theme blocks. */
#screen-main-menu:not(.screen--menu-minimal) { display: grid !important; width: 100% !important; max-width: none !important; box-sizing: border-box; grid-template-rows: auto minmax(220px, clamp(220px, 38vh, 340px)) auto auto !important; align-content: start !important; gap: 12px !important; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important; overflow-y: auto !important; }
#screen-main-menu:not(.screen--menu-minimal) .menu-brand-status, #screen-main-menu:not(.screen--menu-minimal) .menu-actions, #screen-main-menu:not(.screen--menu-minimal) .menu-footer-meta { width: min(100%, 430px) !important; margin-inline: auto !important; }
#screen-main-menu:not(.screen--menu-minimal) .menu-brand-status { display: flex !important; justify-content: space-between; align-items: center; min-height: 32px; }
#screen-main-menu:not(.screen--menu-minimal) .menu-hero { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(120px, 42%) !important; align-items: end; width: min(100%, 430px) !important; min-height: 220px !important; height: clamp(220px, 38vh, 340px) !important; margin: 0 auto !important; padding: 16px !important; overflow: hidden; }
#screen-main-menu:not(.screen--menu-minimal) .menu-hero-identity { position: relative !important; left: auto !important; bottom: auto !important; grid-column: 1; grid-row: 1; align-self: center; z-index: 4; }
#screen-main-menu:not(.screen--menu-minimal) .menu-role-standing { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; grid-column: 2; grid-row: 1; width: 100% !important; height: 100% !important; min-height: 220px !important; z-index: 3 !important; align-self: end; pointer-events: none; filter: none !important; }
#screen-main-menu:not(.screen--menu-minimal) .menu-role-standing img, #screen-main-menu:not(.screen--menu-minimal) .menu-role-standing canvas, #screen-main-menu:not(.screen--menu-minimal) .menu-role-standing svg { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center bottom !important; }
#screen-main-menu:not(.screen--menu-minimal) .menu-stats-pill { position: static !important; display: inline-block; max-width: 100%; }
#screen-main-menu:not(.screen--menu-minimal) .menu-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
#screen-main-menu:not(.screen--menu-minimal) .menu-actions .btn { min-height: 44px; }
#screen-main-menu:not(.screen--menu-minimal) .menu-cta-launch { grid-column: auto !important; width: 100% !important; min-height: 56px !important; }
#screen-main-menu:not(.screen--menu-minimal) .menu-secondary-actions { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px; }
#screen-main-menu:not(.screen--menu-minimal) .menu-secondary-actions .btn { min-width: 0; padding-inline: 4px; font-size: 12px; }
#screen-main-menu:not(.screen--menu-minimal) .menu-footer-meta { display: flex !important; position: static !important; justify-content: center; min-height: 44px; }
.menu-hub-sheet { width: min(92vw, 360px); }
.menu-hub-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.menu-hub-choice { min-height: 52px; }
@media (max-width: 365px) { #screen-main-menu .menu-hero { grid-template-columns: minmax(0, 1fr) minmax(104px, 40%) !important; padding: 12px !important; } #screen-main-menu .menu-secondary-actions .btn { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { #screen-main-menu *, #screen-main-menu *::before, #screen-main-menu *::after { animation: none !important; transition: none !important; } }


/* ========================================================================= */
/* 权威样式层：UI 3.0 战术大厅基线与独立界面规范 (AUTHORITATIVE SYSTEM)      */
/* 每个界面只保留一个布局所有者，统一收敛，彻底减少 !important 冲突          */
/* ========================================================================= */

/* ----------------------------------------------------
   1. 登录主界面 (LOGIN SCREEN) - 单一布局所有者
   ---------------------------------------------------- */
#screen-main-menu.screen--menu-minimal {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: max(14px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom)) !important;
  background: radial-gradient(circle at 50% 25%, rgba(17, 26, 47, 0.96) 0%, #03060f 100%) !important;
  text-align: center;
  user-select: none;
}

#screen-main-menu.screen--menu-minimal .menu-brand-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  flex-shrink: 0;
  z-index: 5;
}

#screen-main-menu.screen--menu-minimal .menu-brand-tag {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #00f0ff;
  margin-bottom: 2px;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

#screen-main-menu.screen--menu-minimal .menu-brand {
  font-size: clamp(20px, 5.8vw, 28px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 2px;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 240, 255, 0.4), 0 0 2px #fff;
}

#screen-main-menu.screen--menu-minimal .menu-status {
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ----------------------------------------------------
   全员集结复联4风格终极大画海报 (AVENGERS ENDGAME ALL-CHARACTERS POSTER)
   ---------------------------------------------------- */
.menu-poster-fullscreen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* 全屏海报交互舞台 (保留 login-poster-card 作为交互主体) */
.poster-endgame-arena.login-poster-card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  display: block !important;
  background: radial-gradient(circle at 50% 30%, #0d1224 0%, #03050c 100%) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
}

/* 背景宇宙星云与光效 */
.poster-cosmos-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(239, 68, 68, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 50% 75%, rgba(0, 240, 255, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 50%, rgba(168, 85, 247, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(234, 179, 8, 0.15) 0%, transparent 40%);
  z-index: 1;
}

/* ============================================================
   A. 背景层：七宗罪全量首领 暗黑剪影殿堂 (Boss Silhouette Pantheon in Deep Space)
   ============================================================ */
.poster-boss-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 65%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.boss-sil {
  position: absolute;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 45%, black 45%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 45%, transparent 75%);
}

.boss-sil img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: brightness(0.26) contrast(1.5) grayscale(0.6);
}

/* 终焉主宰：傲慢 (Vanity - Center Titan Looming Skyward) */
.sil-vanity {
  top: clamp(20px, 3vh, 36px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(200px, 52vw, 260px);
  height: clamp(260px, 40vh, 380px);
  z-index: 3;
}
.sil-vanity img {
  object-position: center 8%;
  filter: brightness(0.32) contrast(1.6) drop-shadow(0 0 16px rgba(239, 68, 68, 0.45));
}

/* 左翼Boss暗影：暴怒、暴食、嫉妒 */
.sil-wrath {
  top: clamp(35px, 5vh, 50px);
  left: -20px;
  width: clamp(120px, 32vw, 150px);
  height: clamp(170px, 24vh, 230px);
  z-index: 2;
  transform: rotate(-5deg);
}
.sil-wrath img {
  object-position: center 10%;
  filter: brightness(0.28) contrast(1.6) drop-shadow(0 0 12px rgba(249, 115, 22, 0.35));
}

.sil-gluttony {
  top: clamp(75px, 11vh, 110px);
  left: clamp(35px, 10vw, 55px);
  width: clamp(100px, 28vw, 130px);
  height: clamp(150px, 20vh, 200px);
  z-index: 4;
}
.sil-gluttony img {
  object-position: center 12%;
  filter: brightness(0.25) contrast(1.5) drop-shadow(0 0 10px rgba(168, 85, 247, 0.3));
}

.sil-envy {
  top: clamp(95px, 14vh, 140px);
  left: clamp(85px, 24vw, 120px);
  width: clamp(90px, 24vw, 120px);
  height: clamp(140px, 18vh, 180px);
  z-index: 5;
}
.sil-envy img {
  object-position: center 12%;
  filter: brightness(0.26) contrast(1.5) drop-shadow(0 0 10px rgba(239, 68, 68, 0.35));
}

/* 右翼Boss暗影：贪婪、怠惰、色欲 */
.sil-greed {
  top: clamp(35px, 5vh, 50px);
  right: -20px;
  width: clamp(120px, 32vw, 150px);
  height: clamp(170px, 24vh, 230px);
  z-index: 2;
  transform: rotate(5deg);
}
.sil-greed img {
  object-position: center 10%;
  filter: brightness(0.28) contrast(1.6) drop-shadow(0 0 12px rgba(234, 179, 8, 0.35));
}

.sil-sloth {
  top: clamp(75px, 11vh, 110px);
  right: clamp(35px, 10vw, 55px);
  width: clamp(100px, 28vw, 130px);
  height: clamp(150px, 20vh, 200px);
  z-index: 4;
}
.sil-sloth img {
  object-position: center 12%;
  filter: brightness(0.25) contrast(1.5) drop-shadow(0 0 10px rgba(99, 102, 241, 0.3));
}

.sil-lust {
  top: clamp(95px, 14vh, 140px);
  right: clamp(85px, 24vw, 120px);
  width: clamp(90px, 24vw, 120px);
  height: clamp(140px, 18vh, 180px);
  z-index: 5;
}
.sil-lust img {
  object-position: center 15%;
  filter: brightness(0.28) contrast(1.6) drop-shadow(0 0 10px rgba(244, 63, 94, 0.35));
}

.boss-sil-haze {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, transparent 35%, rgba(2, 6, 18, 0.72) 85%);
  pointer-events: none;
  z-index: 6;
}

/* ============================================================
   B. 前景层：六位特工英雄 复联4黄金梯队构图 (Heroes Assemble)
   ============================================================ */
.poster-heroes-ensemble {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}

.hero-actor {
  position: absolute;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s ease;
  mask-image: radial-gradient(ellipse at 50% 45%, black 46%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 46%, transparent 78%);
  pointer-events: none;
}

.hero-actor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: contrast(1.18) brightness(0.98);
}

/* 1. 高空火力与奥术 (Top Tier, floating & heavy artillery) */
.actor-mage {
  top: clamp(65px, 10.5vh, 105px);
  left: 2px;
  width: clamp(125px, 34vw, 160px);
  height: clamp(175px, 24vh, 230px);
  z-index: 11;
}
.actor-mage img { object-position: center 16%; }

.actor-engineer {
  top: clamp(65px, 10.5vh, 105px);
  right: 2px;
  width: clamp(125px, 34vw, 160px);
  height: clamp(175px, 24vh, 230px);
  z-index: 11;
}
.actor-engineer img { object-position: center 16%; }

/* 2. 中翼战术游击 (Mid Tier, dashing & card mastery) */
.actor-rogue {
  top: clamp(155px, 24.5vh, 240px);
  left: clamp(12px, 4vw, 24px);
  width: clamp(135px, 38vw, 175px);
  height: clamp(195px, 27vh, 260px);
  z-index: 13;
}
.actor-rogue img { object-position: center 25%; }

.actor-gambler {
  top: clamp(155px, 24.5vh, 240px);
  right: clamp(12px, 4vw, 24px);
  width: clamp(135px, 38vw, 175px);
  height: clamp(195px, 27vh, 260px);
  z-index: 13;
}
.actor-gambler img { object-position: center 22%; }

/* 3. 前沿锋线双核心 (Front Tier, bow & tactical shield) */
.actor-ranger {
  bottom: clamp(64px, 8.5vh, 88px);
  left: 0;
  width: clamp(180px, 49vw, 235px);
  height: clamp(260px, 36vh, 340px);
  z-index: 15;
}
.actor-ranger img { object-position: center 28%; }

.actor-warrior {
  bottom: clamp(64px, 8.5vh, 88px);
  right: 0;
  width: clamp(180px, 49vw, 235px);
  height: clamp(260px, 36vh, 340px);
  z-index: 14;
}
.actor-warrior img { object-position: center 22%; }

.heroes-lighting-fx {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 65%, rgba(2, 6, 18, 0.88) 90%, #020612 100%),
    radial-gradient(circle at 50% 95%, rgba(0, 240, 255, 0.22) 0%, transparent 55%);
  pointer-events: none;
  z-index: 18;
}

/* ============================================================
   C. 全息徽章与激光分割线 (Tactical Clash Nexus)
   ============================================================ */
.poster-clash-nexus {
  position: absolute;
  top: clamp(255px, 41.5vh, 410px);
  left: 0;
  right: 0;
  z-index: 22;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poster-clash-line {
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #a855f7 20%, #00f0ff 48%, #ffffff 50%, #ef4444 52%, #f59e0b 80%, transparent 100%);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.75), 0 0 20px rgba(239, 68, 68, 0.75);
  transform: rotate(-3.5deg);
  z-index: 1;
}

.clash-badge {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(3, 7, 22, 0.92);
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  border-radius: 6px;
  padding: 3px 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 240, 255, 0.3);
  gap: 1.5px;
}

.clash-tagline {
  font-family: var(--font-mono, monospace);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #facc15;
}

.clash-main-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 5px;
}

.clash-vs {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 900;
  font-style: italic;
  color: #ff3b5c;
  text-shadow: 0 0 8px #ff3b5c;
}

.clash-duel-focus {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #e2e8f0;
}

.clash-duel-focus .poster-hero-name {
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.7);
}

.clash-duel-focus .poster-boss-name {
  color: #f87171;
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.7);
}

.poster-switch-hint {
  font-family: var(--font-mono, monospace);
  font-size: 7px;
  color: #94a3b8;
  letter-spacing: 0.5px;
  background: rgba(2, 6, 18, 0.75);
  padding: 1.5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 1px;
}

/* 高亮选中特效：特工前景高能光芒 vs Boss背景剪影赤芒聚光 */
.hero-actor.figure-highlight {
  filter: drop-shadow(0 0 18px rgba(0, 240, 255, 0.95)) brightness(1.15) !important;
  transform: scale(1.05) !important;
  z-index: 20 !important;
}

.hero-actor.figure-highlight img {
  filter: contrast(1.22) brightness(1.02) drop-shadow(0 0 14px rgba(0, 240, 255, 0.8)) !important;
}

.boss-sil.figure-highlight {
  filter: drop-shadow(0 0 18px rgba(239, 68, 68, 0.95)) !important;
  transform: scale(1.04) !important;
  z-index: 5 !important; /* 始终位于背景层(z-index: 5)，绝不遮挡前景特工(z-index: 10~15) */
}

.boss-sil.figure-highlight img {
  filter: brightness(0.35) contrast(1.65) drop-shadow(0 0 14px rgba(239, 68, 68, 0.75)) !important;
}

.menu-bottom-dock {
  position: relative;
  z-index: 20;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  pointer-events: auto;
}

/* 登录操作按钮 */
#screen-main-menu.screen--menu-minimal .menu-actions--single {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: min(340px, 88vw) !important;
  max-width: 340px !important;
  margin: 6px auto !important;
  flex-shrink: 0 !important;
  z-index: 6 !important;
}

#screen-main-menu.screen--menu-minimal .btn-login-launch {
  width: 100% !important;
  max-width: 340px !important;
  height: 52px !important;
  min-height: 52px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 2.5px !important;
  background: linear-gradient(135deg, #00f0ff 0%, #0284c7 50%, #2563eb 100%) !important;
  color: #020617 !important;
  border: 2px solid #38bdf8 !important;
  border-radius: 4px !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.45), inset 0 0 12px rgba(255, 255, 255, 0.55) !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#screen-main-menu.screen--menu-minimal .btn-login-launch:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 0 42px rgba(0, 240, 255, 0.75), inset 0 0 18px rgba(255, 255, 255, 0.75) !important;
}

#screen-main-menu.screen--menu-minimal .btn-login-launch:active {
  transform: translateY(1px) scale(0.98) !important;
}

/* 登录底栏元信息与系统状态 */
#screen-main-menu.screen--menu-minimal .menu-footer-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(340px, 88vw) !important;
  max-width: 340px !important;
  margin: 0 auto !important;
  padding: 6px 4px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
  z-index: 6 !important;
}

#screen-main-menu.screen--menu-minimal .menu-feedback {
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  color: #64748b;
  letter-spacing: 0.5px;
  transition: color 0.15s ease;
  white-space: nowrap;
}

#screen-main-menu.screen--menu-minimal .menu-feedback:hover {
  color: #94a3b8;
}

.login-system-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.login-system-status .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulseStatusDot 2s infinite;
}

@keyframes pulseStatusDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

@media (max-height: 680px) {
  #screen-main-menu.screen--menu-minimal {
    padding: max(10px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom)) !important;
  }
  .poster-duel-arena.login-poster-card {
    max-height: none !important;
    height: 100% !important;
  }
  .vs-emblem-core {
    padding: 3px 12px;
  }
  .vs-text {
    font-size: 16px;
  }
  .poster-badge-boss {
    top: max(72px, calc(env(safe-area-inset-top) + 56px));
  }
  .poster-badge-hero {
    bottom: 92px;
  }
  .btn-login-launch {
    height: 46px !important;
    min-height: 46px !important;
    font-size: 16px !important;
  }
  #screen-main-menu.screen--menu-minimal .menu-brand {
    font-size: 20px;
  }
}

/* ----------------------------------------------------
   2. 战术大厅 (TACTICAL LOBBY BASELINE) - 单一布局所有者
   ---------------------------------------------------- */
#screen-lobby-nikke.screen--lobby-nikke {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: radial-gradient(circle at 50% 40%, rgba(30, 41, 59, 0.6) 0%, rgba(2, 6, 23, 0.98) 85%), #020617 !important;
  user-select: none;
}

/* 1. Top HUD Bar */
.lobby-nikke-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(28px, env(safe-area-inset-top)) 16px 8px;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.95) 0%, rgba(2, 6, 23, 0) 100%);
  z-index: 30;
  pointer-events: auto;
  position: relative;
  flex-shrink: 0;
}

.lobby-user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lobby-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  background: rgba(15, 23, 42, 0.85);
  object-fit: cover;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.lobby-user-meta {
  display: flex;
  flex-direction: column;
}

.lobby-user-name {
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.5px;
}

.lobby-user-id {
  font-size: 10px;
  color: #94a3b8;
  font-family: var(--font-mono, monospace);
}

.btn-lobby-icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  color: #f8fafc;
  transition: all 0.15s;
}

.btn-lobby-icon-btn:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: #00f0ff;
  transform: scale(1.05);
}

/* 2. Central Hero Stage */
.lobby-hero-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 900px;
  transform-style: preserve-3d;
  z-index: 10;
}

.lobby-dialogue-bubble {
  position: absolute;
  top: 8px;
  left: 16px;
  right: 16px;
  max-width: 360px;
  margin: 0 auto;
  padding: 8px 12px;
  background: rgba(4, 9, 20, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-left: 3.5px solid #00f0ff;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 240, 255, 0.15);
  pointer-events: auto;
  cursor: pointer;
  animation: bubbleFloat 4s ease-in-out infinite alternate;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  z-index: 20;
}

.dialogue-speaker-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #38bdf8;
  margin-bottom: 3px;
}

.dialogue-speaker-tag .speaker-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 6px #00f0ff;
}

.dialogue-quote-text {
  font-size: 11.5px;
  color: #f1f5f9;
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.dialogue-tap-hint {
  display: block;
  text-align: right;
  font-family: var(--font-mono, monospace);
  font-size: 7px;
  color: #64748b;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

@keyframes bubbleFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

.lobby-standing-art-wrap {
  position: absolute;
  top: 64px;
  bottom: 60px;
  left: 12px;
  right: 12px;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
  z-index: 12;
  overflow: visible;
  transform-style: preserve-3d;
  perspective: 900px;
  transform-origin: 50% 50%;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 28%, rgba(15, 23, 42, 0.45) 0%, rgba(6, 12, 26, 0.75) 75%, rgba(2, 6, 18, 0.92) 100%);
  /* 真实实体卡片多重 3D 侧边厚度与深层水晶折射阴影 */
  box-shadow:
    0 0 0 1.5px rgba(56, 189, 248, 0.55),
    0 2px 0 1px rgba(30, 41, 59, 0.95),
    0 5px 0 2px rgba(15, 23, 42, 0.98),
    0 8px 0 3px rgba(8, 14, 28, 1),
    0 12px 0 4px rgba(2, 6, 18, 1),
    0 20px 42px rgba(0, 0, 0, 0.92),
    0 32px 64px -4px rgba(0, 0, 0, 0.96),
    inset 0 0 0 1px rgba(0, 240, 255, 0.35),
    inset 2px 2px 4px rgba(255, 255, 255, 0.4),
    inset -2px -2px 5px rgba(0, 0, 0, 0.8);
  will-change: transform;
}

/* 3D 物理后底板机壳：深陷 Z 轴底层，倾斜时形成极其明显的侧边机械卡槽厚度 */
.lobby-standing-art-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.96) 50%, rgba(2, 6, 18, 1) 100%);
  border: 2px solid rgba(56, 189, 248, 0.35);
  box-shadow:
    0 0 0 1px rgba(0, 240, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.88),
    0 24px 56px rgba(0, 0, 0, 0.95);
  transform: translateZ(-25px);
  pointer-events: none;
  z-index: 0;
}

.lobby-standing-art-wrap:active {
  cursor: grabbing;
}

@keyframes heroBreathing {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.015) translateY(-3px); }
}

/* 1. Chamber Background & Energy Pedestal (舱内背景与底座能量台) */
.chamber-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transform: translateZ(-10px);
  border-radius: 18px;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.025) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
}

.chamber-backdrop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 90px;
  background: radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.2) 0%, rgba(0, 240, 255, 0.06) 55%, transparent 100%);
  filter: blur(4px);
  pointer-events: none;
}

.chamber-pedestal {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) translateZ(-4px);
  width: 74%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 240, 255, 0.32) 0%, rgba(56, 189, 248, 0.12) 55%, transparent 85%);
  border: 1.5px solid rgba(0, 240, 255, 0.45);
  box-shadow:
    0 0 16px rgba(0, 240, 255, 0.35),
    inset 0 0 10px rgba(0, 240, 255, 0.25);
  pointer-events: none;
}

/* 2. Character Layer (立绘层 - 位于厚度玻璃后方，独立 Z 轴层级) */
.lobby-role-standing {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateZ(14px);
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px 24px 10px;
  box-sizing: border-box;
}

.lobby-role-standing .hero-standing-raster-wrap {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;
  transform-style: preserve-3d;
}

.lobby-role-standing img,
.lobby-role-standing .hero-standing-raster-img,
.lobby-role-standing .chibi-static-fallback,
.lobby-standing-raster-img {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 20px rgba(56, 189, 248, 0.3));
  transition: opacity 0.2s ease;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* 3. Thick Glass Front Panel (有厚度的高透特化玻璃前面板，突显 Z 轴厚度) */
.chamber-glass-front {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  transform: translateZ(36px);
  transform-style: preserve-3d;
  border-radius: 18px;
  border: 2px solid rgba(148, 163, 184, 0.35);
  box-shadow:
    inset 2px 2px 1px rgba(255, 255, 255, 0.55),
    inset -2px -2px 2px rgba(0, 0, 0, 0.75),
    inset 0 0 26px rgba(56, 189, 248, 0.08),
    0 0 16px rgba(0, 240, 255, 0.2);
  overflow: hidden;
}

/* Diagonal Specular Reflection (厚玻璃斜向环境微反光带) */
.glass-glare-streak {
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: linear-gradient(
    130deg,
    transparent 36%,
    rgba(255, 255, 255, 0.04) 43%,
    rgba(255, 255, 255, 0.14) 47%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 56%,
    rgba(255, 255, 255, 0.02) 62%,
    rgba(255, 255, 255, 0.06) 64%,
    transparent 67%
  );
  transform: rotate(18deg);
  pointer-events: none;
  transition: transform 0.1s ease-out;
}

/* Glass Tactical Micro-HUD (高透玻璃表面战术微刻印与卡榫) */
.glass-tactical-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(10px);
}

.hud-tag-top-left {
  position: absolute;
  top: 10px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: rgba(56, 189, 248, 0.75);
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

.hud-status-led {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: ledPulse 2.5s ease-in-out infinite;
}

@keyframes ledPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

/* Tactical Corner Brackets (四角钛金防爆卡榫) */
.hud-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(56, 189, 248, 0.65);
  border-style: solid;
}
.corner-tl { top: 7px; left: 7px; border-width: 2px 0 0 2px; }
.corner-tr { top: 7px; right: 7px; border-width: 2px 2px 0 0; }
.corner-bl { bottom: 7px; left: 7px; border-width: 0 0 2px 2px; }
.corner-br { bottom: 7px; right: 7px; border-width: 0 2px 2px 0; }

/* Left-edge Depth Scale Ticks (左侧玻璃深度刻度线) */
.hud-depth-ticks {
  position: absolute;
  top: 32%;
  bottom: 32%;
  left: 7px;
  width: 4px;
  background: repeating-linear-gradient(
    180deg,
    rgba(56, 189, 248, 0.45) 0px,
    rgba(56, 189, 248, 0.45) 1.5px,
    transparent 1.5px,
    transparent 8px
  );
}

.lobby-standing-art-wrap:hover img,
.lobby-standing-art-wrap:hover .hero-standing-raster-img,
.lobby-standing-art-wrap:hover .lobby-standing-raster-img {
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 28px rgba(0, 240, 255, 0.5));
}

.lobby-switch-hero-btn {
  position: absolute;
  right: 16px;
  top: 72px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-height: 44px;
  background: rgba(10, 16, 28, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 16px;
  font-size: 11px;
  font-weight: 800;
  color: #38bdf8;
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 10px rgba(56, 189, 248, 0.2);
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 24;
}

.lobby-switch-hero-btn:hover {
  background: rgba(18, 30, 52, 0.95);
  border-color: #00f0ff;
  color: #ffffff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 240, 255, 0.35);
}

/* 3. Bottom Tactical Command Bar (一体化战术控制台) */
.lobby-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(6, 12, 24, 0.9) 0%, rgba(2, 6, 18, 0.98) 100%);
  border-top: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  z-index: 25;
  pointer-events: auto;
  flex-shrink: 0;
}

.lobby-bottom-nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
}

.btn-lobby-bottom-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 4px 2px 3px;
  min-width: 0;
  flex: 1 1 0;
  height: 62px;
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.8) 0%, rgba(8, 14, 26, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #f8fafc;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.15s, box-shadow 0.15s, background 0.15s;
  white-space: nowrap;
  overflow: visible;
}

.btn-lobby-bottom-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent);
  opacity: 0.6;
  transition: opacity 0.15s;
}

.btn-lobby-bottom-tile:hover {
  transform: translateY(-2px);
  border-color: #00f0ff;
  background: linear-gradient(180deg, rgba(24, 40, 72, 0.88) 0%, rgba(12, 22, 42, 0.98) 100%);
  box-shadow: 0 6px 18px rgba(0, 240, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-lobby-bottom-tile:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, #00f0ff, transparent);
}

.btn-lobby-bottom-tile:active {
  transform: translateY(1px) scale(0.97);
}

.btn-lobby-bottom-tile .tile-icon {
  font-size: 20px;
  line-height: 1;
  margin-top: 4px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: radial-gradient(circle at center, rgba(23, 17, 45, 0.95) 0%, #0c0915 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.15), inset 0 0 6px rgba(0, 0, 0, 0.5);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible;
}

.btn-lobby-bottom-tile .tile-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.btn-lobby-bottom-tile:hover .tile-icon,
.lobby-nav-item.is-active .tile-icon {
  transform: translateY(1px) scale(1.05);
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.55), 0 0 6px rgba(251, 191, 36, 0.35);
}

.btn-lobby-bottom-tile .tile-text {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #f1f5f9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  margin-top: 1px;
}

.btn-lobby-bottom-tile .tile-sub {
  font-family: var(--font-mono, monospace);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #64748b;
  margin-top: 1px;
  line-height: 1;
  transition: color 0.15s;
}

.btn-lobby-bottom-tile:hover .tile-sub {
  color: #38bdf8;
}

.btn-lobby-bottom-tile .tile-notify {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff3b5c;
  box-shadow: 0 0 6px #ff3b5c;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* 出击大按钮 */
.btn-nikke-sortie {
  position: relative;
  width: 112px;
  height: 52px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 55%, #7f1d1d 100%);
  border: 1.5px solid #f87171;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.6), inset 0 0 12px rgba(255, 255, 255, 0.45);
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s;
  overflow: hidden;
}

.btn-nikke-sortie::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: repeating-linear-gradient(-45deg, #fff, #fff 4px, transparent 4px, transparent 8px);
  opacity: 0.35;
  pointer-events: none;
}

.btn-nikke-sortie:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 36px rgba(239, 68, 68, 0.85), inset 0 0 16px rgba(255, 255, 255, 0.6);
}

.btn-nikke-sortie:active {
  transform: translateY(1px) scale(0.97);
}

.sortie-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 60%);
  animation: pulseSortie 2.5s infinite;
  pointer-events: none;
}

@keyframes pulseSortie {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

.sortie-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  gap: 1px;
}

.sortie-badge {
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
}

.sortie-main {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.sortie-icon {
  font-size: 15px;
}

.sortie-text {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.sortie-sub {
  font-family: var(--font-mono, monospace);
  font-size: 7.5px;
  font-weight: 700;
  color: #fecaca;
  letter-spacing: 0.8px;
  line-height: 1;
}

.lobby-tactical-dock {
  display: none;
}

/* 战备大厅特工信息与出击栏 */
.lobby-hero-info-bar {
  position: absolute;
  bottom: 8px;
  left: 12px;
  right: 12px;
  z-index: 18;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  background: linear-gradient(180deg, rgba(4, 9, 20, 0) 0%, rgba(4, 9, 20, 0.75) 35%, rgba(4, 9, 20, 0.92) 100%);
  padding: 12px 12px 4px 12px;
  border-radius: 12px;
  pointer-events: none;
}

.lobby-hero-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lobby-hero-name {
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.lobby-hero-school {
  font-size: 11px;
  font-weight: 800;
  color: #38bdf8;
  padding: 1px 6px;
  background: rgba(56, 189, 248, 0.12);
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.lobby-hero-tags {
  font-size: 11px;
  color: #94a3b8;
}

.lobby-hero-records {
  font-size: 10.5px;
  color: #facc15;
  font-family: var(--font-mono, monospace);
}

.lobby-sortie-dock {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 6px 16px;
  box-sizing: border-box;
  z-index: 25;
  pointer-events: auto;
  flex-shrink: 0;
}

.lobby-sortie-dock .btn-nikke-sortie {
  width: 136px;
  height: 52px;
  min-height: 48px;
}

/* 5项固定底部导航规范 */
.tdxd-bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  z-index: 30;
  flex-shrink: 0;
}

.tdxd-nav-5 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 3px !important;
  width: 100% !important;
}

.lobby-nav-item {
  min-height: 48px !important;
  min-width: 44px !important;
  height: 62px !important;
  padding: 4px 2px 3px !important;
  border-radius: 8px !important;
  overflow: visible !important;
}

.lobby-nav-item.is-active {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: rgba(56, 189, 248, 0.85) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4) !important;
}

.lobby-nav-item.is-active .tile-text {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
  font-weight: 900 !important;
}

.lobby-nav-item.is-active .tile-sub {
  color: #38bdf8 !important;
}

.lobby-nav-item.is-active .tile-icon {
  transform: translateY(1px) scale(1.05);
}

/* 出击独立模式选择页 */
.screen--mode-select {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 25%, rgba(30, 41, 59, 0.7) 0%, rgba(2, 6, 23, 0.98) 85%), #020617 !important;
  user-select: none;
}

.mode-select-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mode-select-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.9);
  border: 1.5px solid rgba(148, 163, 184, 0.22);
  cursor: pointer;
  min-height: 56px;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  text-align: left;
  color: #f8fafc;
}

.mode-select-card:hover {
  border-color: rgba(56, 189, 248, 0.7);
  background: rgba(30, 41, 59, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25);
}

.mode-select-card:active {
  transform: translateY(1px);
}

.mode-card-badge {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #38bdf8;
}

.mode-card-title {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mode-card-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
}

.mode-card-record {
  font-size: 11px;
  color: #facc15;
  font-family: var(--font-mono, monospace);
}

.btn-mode-return {
  min-height: 48px !important;
  height: 48px !important;
}

/* ================================================= */
/* 4 INDEPENDENT TACTICAL SCREENS (手游级独立全屏界面) */
/* ================================================= */

.screen--tactical-ops {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  background: radial-gradient(circle at 50% 20%, rgba(15, 23, 42, 0.95) 0%, rgba(2, 6, 23, 0.99) 80%), #020617 !important;
  overflow: hidden !important;
}

.tactical-screen-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: max(28px, env(safe-area-inset-top)) 16px 12px !important;
  background: linear-gradient(180deg, rgba(4, 9, 20, 0.96) 0%, rgba(4, 9, 20, 0.8) 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.22) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  flex-shrink: 0 !important;
  z-index: 20;
}

.tactical-screen-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tactical-screen-title .t-main {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.tactical-screen-title .t-sub {
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #38bdf8;
}

.tactical-top-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  color: #f8fafc;
}

.tactical-top-pill.ether-glow {
  border-color: #e5c07b;
  color: #fef08a;
  box-shadow: 0 0 12px rgba(229, 192, 123, 0.25);
}

.tactical-screen-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 14px 14px 80px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  scrollbar-width: thin;
}

.tactical-screen-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, rgba(4, 9, 20, 0.85) 0%, rgba(2, 6, 18, 0.98) 100%) !important;
  border-top: 1px solid rgba(56, 189, 248, 0.2) !important;
  backdrop-filter: blur(14px) !important;
  z-index: 25;
}

.ops-section-title {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #38bdf8;
  margin-top: 4px;
}

/* 1. Daily Ops Styles */
.ops-briefing-card {
  background: linear-gradient(135deg, rgba(16, 26, 46, 0.92) 0%, rgba(8, 14, 26, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-left: 4px solid #00f0ff;
  border-radius: 6px;
  padding: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.briefing-header .brief-tag {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #38bdf8;
  margin-bottom: 4px;
}

.briefing-header .brief-title {
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 6px;
}

.briefing-header .brief-desc {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.45;
  margin-bottom: 12px;
}

.briefing-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

.briefing-meta-grid .meta-item {
  display: flex;
  flex-direction: column;
}

.meta-item .m-lbl {
  font-size: 9px;
  color: #64748b;
  font-weight: 700;
}

.meta-item .m-val {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 800;
}

.meta-item .m-val.highlight { color: #00f0ff; }
.meta-item .m-val.red { color: #ff3b5c; }
.meta-item .m-val.gold { color: #fbbf24; }

.ops-mutator-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ops-mutator-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.ops-mutator-card .m-icon {
  font-size: 22px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.8);
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  flex-shrink: 0;
}

.ops-mutator-card .m-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 2px;
}

.ops-mutator-card .m-desc {
  font-size: 10.5px;
  color: #cbd5e1;
  line-height: 1.35;
}

.ops-operator-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px;
  padding: 12px;
}

.ops-operator-card .op-tag {
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 6px;
}

.ops-operator-card .op-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.op-content .op-avatar {
  font-size: 24px;
}

.op-content .op-name {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.op-content .op-status {
  font-size: 10px;
  color: #94a3b8;
}

.btn-op-switch {
  margin-left: auto;
  padding: 5px 10px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid #38bdf8;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: #38bdf8;
  cursor: pointer;
}

.btn-ops-launch {
  width: 100% !important;
  height: 52px !important;
  position: relative !important;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 50%, #7f1d1d 100%) !important;
  border: 2px solid #f87171 !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.6) !important;
  transition: all 0.15s ease;
  overflow: hidden;
}

.btn-ops-launch:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.85) !important;
}

.launch-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.launch-badge {
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  letter-spacing: 1.5px;
  opacity: 0.8;
}

/* 2. Talents Matrix Styles */
.talents-overview-card {
  background: linear-gradient(135deg, rgba(20, 28, 48, 0.9) 0%, rgba(10, 16, 30, 0.98) 100%);
  border: 1px solid rgba(229, 192, 123, 0.35);
  border-radius: 6px;
  padding: 12px 14px;
}

.talents-overview-card .overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.overview-header .ov-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #ffffff;
}

.overview-header .ov-score {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: #fbbf24;
  font-weight: 800;
}

.ov-progress-bar {
  height: 6px;
  background: rgba(2, 6, 23, 0.8);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

.ov-progress-bar .ov-fill {
  height: 100%;
  background: linear-gradient(90deg, #00f0ff, #fbbf24);
}

.ov-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ov-chip {
  font-size: 9.5px;
  font-weight: 700;
  color: #cbd5e1;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.talents-matrix-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.talent-node-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(16, 26, 46, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  transition: all 0.15s ease;
}

.talent-node-card.is-active {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(20, 34, 60, 0.9);
}

.node-icon-hex {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(4, 9, 20, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  flex-shrink: 0;
}

.node-mid {
  flex: 1 1 auto;
  min-width: 0;
}

.node-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.node-name {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.node-rank-tag {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  color: #38bdf8;
}

.node-steps-bar {
  display: flex;
  gap: 3px;
  margin-bottom: 4px;
}

.node-steps-bar .step-dot {
  width: 14px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 1px;
}

.node-steps-bar .step-dot.on {
  background: #00f0ff;
  box-shadow: 0 0 6px #00f0ff;
}

.node-desc {
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.35;
}

.btn-node-upgrade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  min-width: 74px;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border: 1px solid #38bdf8;
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.5);
  transition: all 0.15s;
}

.btn-node-upgrade:hover:not(.disabled) {
  transform: scale(1.04);
}

.btn-node-upgrade.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.btn-node-upgrade .up-cost {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  color: #fef08a;
}

.btn-node-upgrade .up-action {
  font-size: 11px;
  font-weight: 800;
}

.badge-maxed {
  padding: 6px 10px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  color: #fbbf24;
}

.btn-talents-reset {
  width: 100% !important;
  height: 44px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  border-radius: 6px !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-talents-reset:hover {
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: #ef4444 !important;
  color: #f87171 !important;
}

/* 3. Achievements Styles */
.achv-progress-banner {
  background: linear-gradient(135deg, rgba(20, 28, 48, 0.9) 0%, rgba(10, 16, 30, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  padding: 12px 14px;
}

.achv-progress-banner .banner-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.banner-top .b-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #ffffff;
}

.banner-top .b-pct {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 900;
  color: #00f0ff;
}

.achv-progress-banner .b-bar {
  height: 6px;
  background: rgba(2, 6, 23, 0.8);
  border-radius: 3px;
  overflow: hidden;
}

.achv-progress-banner .b-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #00f0ff);
}

.achv-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.achv-card-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(16, 26, 46, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.achv-card-modern.is-done {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(16, 36, 32, 0.85);
}

.achv-medal-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(4, 9, 20, 0.85);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.achv-card-modern.is-done .achv-medal-wrap {
  border-color: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.achv-detail {
  flex: 1 1 auto;
  min-width: 0;
}

.achv-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.achv-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #ffffff;
}

.achv-reward-pill {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  color: #fef08a;
  background: rgba(245, 158, 11, 0.15);
  padding: 1px 6px;
  border-radius: 3px;
}

.achv-desc {
  font-size: 10.5px;
  color: #94a3b8;
}

.achv-status .status-claimed {
  font-size: 10.5px;
  font-weight: 800;
  color: #22c55e;
}

.achv-status .status-pending {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
}

/* 4. Codex Styles */
.codex-tab-nav {
  display: flex;
  gap: 5px;
  padding: 8px 12px;
  background: rgba(8, 14, 26, 0.9);
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  overflow-x: auto;
  flex-shrink: 0;
}

.codex-tab-btn {
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.codex-tab-btn.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.5);
}

.codex-heroes-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.codex-hero-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(16, 26, 46, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
}

.codex-hero-card .h-art-box {
  width: 72px;
  height: 90px;
  background: rgba(4, 9, 20, 0.9);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}

.h-art-box .h-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.codex-hero-card .h-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.h-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.h-title .h-name {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
}

.h-title .h-school {
  font-size: 10px;
  color: #38bdf8;
  font-weight: 800;
}

.h-desc {
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.4;
  margin: 4px 0;
}

.h-attr {
  display: flex;
  gap: 6px;
}

.attr-pill {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: #cbd5e1;
}

.codex-grid-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.codex-item-card {
  padding: 10px;
  background: rgba(16, 26, 46, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.codex-item-card.tier-2 { border-color: #22c55e; }
.codex-item-card.tier-3 { border-color: #38bdf8; }
.codex-item-card.tier-4 { border-color: #a855f7; }
.codex-item-card.tier-5 { border-color: #f59e0b; }

.item-icon-box {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: radial-gradient(circle at center, #161a24 0%, #090b10 100%);
  border: 1px solid rgba(255, 42, 68, 0.4);
  box-shadow: 0 0 8px rgba(255, 42, 68, 0.25);
  font-size: 20px;
}
.item-icon-box svg,
.item-icon-box .rpg-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.codex-item-card .item-name {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
}

.codex-item-card .item-sub {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  color: #38bdf8;
}

.codex-item-card .item-desc {
  font-size: 9.5px;
  color: #94a3b8;
  line-height: 1.35;
}

.codex-bosses-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.codex-boss-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(24, 16, 28, 0.85);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
}

.boss-img-box {
  width: 72px;
  height: 80px;
  background: rgba(4, 9, 20, 0.9);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.boss-img-box .boss-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boss-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.boss-title-row .boss-name {
  font-size: 13.5px;
  font-weight: 900;
  color: #f87171;
}

.boss-title-row .boss-tag {
  font-size: 9.5px;
  color: #fbbf24;
  font-weight: 800;
}

.boss-desc {
  font-size: 10.5px;
  color: #cbd5e1;
  line-height: 1.4;
  margin-top: 4px;
}

.codex-themes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.codex-theme-card {
  padding: 10px;
  background: rgba(16, 26, 46, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.codex-theme-card .th-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2px;
}

.codex-theme-card .th-desc {
  font-size: 9.5px;
  color: #94a3b8;
  margin-bottom: 8px;
}

.btn-theme-apply {
  padding: 4px 8px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid #38bdf8;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #38bdf8;
  cursor: pointer;
}

.btn-theme-apply.applied {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
}

/* ========================================================
   HERO-ADAPTIVE BATTLE UI THEMES (角色自适应战斗主色调)
   primary 色值对齐 src/portraits.js 各角色档案 themeColor，
   与选角/档案/立绘处的角色主色调保持一致。
   ======================================================== */
#game-shell[data-battle-hero="ranger"] {
  --battle-hero-primary: #06b6d4;
  --battle-hero-accent: #22d3ee;
  --battle-hero-light: #a5f3fc;
  --battle-hero-dark: #083344;
  --battle-hero-glow: rgba(6, 182, 212, 0.45);
  --battle-hero-glow-strong: rgba(34, 211, 238, 0.75);
  --battle-hero-surface: rgba(6, 182, 212, 0.14);
  --battle-hero-surface-hover: rgba(6, 182, 212, 0.25);
  --battle-hero-border: rgba(34, 211, 238, 0.6);
  --battle-hero-border-focus: rgba(34, 211, 238, 0.95);
  --ember-coral: #06b6d4;
}

#game-shell[data-battle-hero="warrior"] {
  --battle-hero-primary: #38bdf8;
  --battle-hero-accent: #7dd3fc;
  --battle-hero-light: #bae6fd;
  --battle-hero-dark: #0c4a6e;
  --battle-hero-glow: rgba(56, 189, 248, 0.45);
  --battle-hero-glow-strong: rgba(125, 211, 252, 0.75);
  --battle-hero-surface: rgba(56, 189, 248, 0.14);
  --battle-hero-surface-hover: rgba(56, 189, 248, 0.25);
  --battle-hero-border: rgba(125, 211, 252, 0.6);
  --battle-hero-border-focus: rgba(125, 211, 252, 0.95);
  --ember-coral: #38bdf8;
}

#game-shell[data-battle-hero="mage"] {
  --battle-hero-primary: #b780f0;
  --battle-hero-accent: #c084fc;
  --battle-hero-light: #f3e8ff;
  --battle-hero-dark: #3b0764;
  --battle-hero-glow: rgba(183, 128, 240, 0.45);
  --battle-hero-glow-strong: rgba(192, 132, 252, 0.75);
  --battle-hero-surface: rgba(183, 128, 240, 0.14);
  --battle-hero-surface-hover: rgba(183, 128, 240, 0.25);
  --battle-hero-border: rgba(192, 132, 252, 0.6);
  --battle-hero-border-focus: rgba(192, 132, 252, 0.95);
  --ember-coral: #b780f0;
}

#game-shell[data-battle-hero="engineer"] {
  --battle-hero-primary: #f59e0b;
  --battle-hero-accent: #fcd34d;
  --battle-hero-light: #fde68a;
  --battle-hero-dark: #78350f;
  --battle-hero-glow: rgba(245, 158, 11, 0.45);
  --battle-hero-glow-strong: rgba(252, 211, 77, 0.75);
  --battle-hero-surface: rgba(245, 158, 11, 0.14);
  --battle-hero-surface-hover: rgba(245, 158, 11, 0.25);
  --battle-hero-border: rgba(252, 211, 77, 0.6);
  --battle-hero-border-focus: rgba(252, 211, 77, 0.95);
  --ember-coral: #f59e0b;
}

#game-shell[data-battle-hero="gambler"] {
  --battle-hero-primary: #dfb447;
  --battle-hero-accent: #f0ce7e;
  --battle-hero-light: #f7e8c0;
  --battle-hero-dark: #71501a;
  --battle-hero-glow: rgba(223, 180, 71, 0.45);
  --battle-hero-glow-strong: rgba(240, 206, 126, 0.75);
  --battle-hero-surface: rgba(223, 180, 71, 0.14);
  --battle-hero-surface-hover: rgba(223, 180, 71, 0.25);
  --battle-hero-border: rgba(240, 206, 126, 0.6);
  --battle-hero-border-focus: rgba(240, 206, 126, 0.95);
  --ember-coral: #dfb447;
}

#game-shell[data-battle-hero="rogue"] {
  --battle-hero-primary: #ef4444;
  --battle-hero-accent: #f87171;
  --battle-hero-light: #fecdd3;
  --battle-hero-dark: #881337;
  --battle-hero-glow: rgba(239, 68, 68, 0.45);
  --battle-hero-glow-strong: rgba(248, 113, 113, 0.75);
  --battle-hero-surface: rgba(239, 68, 68, 0.14);
  --battle-hero-surface-hover: rgba(239, 68, 68, 0.25);
  --battle-hero-border: rgba(248, 113, 113, 0.6);
  --battle-hero-border-focus: rgba(248, 113, 113, 0.95);
  --ember-coral: #ef4444;
}

/* Battle HUD Adaptive Overrides */
#game-shell[data-battle-hero] .battle-corner-tools .btn-hud-icon {
  border-color: var(--battle-hero-border, rgba(239, 111, 97, 0.52));
  box-shadow: 0 0 10px var(--battle-hero-glow, rgba(0,0,0,0.3));
}

#game-shell[data-battle-hero] .battle-corner-tools .btn-hud-icon:hover {
  border-color: var(--battle-hero-accent, var(--ember-coral));
  box-shadow: 0 0 14px var(--battle-hero-glow-strong);
}

#game-shell[data-battle-hero] .hud-tool-glyph {
  color: var(--battle-hero-primary, var(--ember-coral));
  text-shadow: 0 0 8px var(--battle-hero-glow);
}

#game-shell[data-battle-hero] .hud-skills-panel .hud-skill-slot {
  border-color: var(--battle-hero-border, rgba(184, 216, 206, 0.48));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 12px var(--battle-hero-surface);
}

#game-shell[data-battle-hero] .hud-skills-panel .hud-skill-slot:hover {
  border-color: var(--battle-hero-accent, var(--ember-coral));
  box-shadow: 0 0 16px var(--battle-hero-glow-strong), inset 0 0 14px var(--battle-hero-surface-hover);
}

#game-shell[data-battle-hero] .hud-skills-panel .hud-skill-key {
  background: var(--battle-hero-primary, var(--ember-coral));
  border: 1px solid var(--battle-hero-light, #ffffff);
  color: #0b0f19;
  box-shadow: 0 2px 6px var(--battle-hero-glow);
}

#game-shell[data-battle-hero] .hud-skills-panel .hud-skill-cooldown-overlay {
  border-color: var(--battle-hero-accent, var(--ember-coral));
}

/* 小地图开关按钮：常驻显示时高亮 */
#game-shell[data-battle-hero] .battle-corner-tools .btn-hud-icon.is-active .hud-tool-glyph {
  color: var(--battle-hero-accent, var(--ember-coral));
}

#game-shell[data-battle-hero] .battle-boss-intel {
  border-left-color: var(--battle-hero-primary, var(--ember-coral));
  box-shadow: 0 0 12px var(--battle-hero-glow);
}

/* ========================================================
   TAROT LEVEL LOADING SCREEN (塔罗关卡加载界面)
   三档竖屏 clamp：360→16/30px，390→17/32px，430→18/36px；
   精英红 #ef4444 / Boss 粉 #f472b6 / 逆位为背景牌 180° 纯视觉变换。
   ======================================================== */
.tarot-load-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 48%, rgba(20, 16, 40, 0.96) 0%, rgba(11, 8, 22, 0.98) 60%, rgba(5, 3, 10, 0.995) 100%);
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.tarot-load-overlay.is-shown {
  opacity: 1;
}

/* 顶部倾斜关卡横幅与牌名 (Emberring Slanted Header) */
.tarot-p5r-header {
  position: absolute;
  top: clamp(18px, 4vh, 32px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  transform: rotate(-1.5deg);
  z-index: 25;
}

.tarot-load-num {
  font-family: Impact, "Arial Black", system-ui, sans-serif;
  font-style: italic;
  font-size: clamp(34px, 8.4vw, 44px);
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 22%, #f59e0b 58%, #ef4444 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.2px #000000;
  filter: drop-shadow(2px 3px 0 #000000) drop-shadow(0 0 12px rgba(245, 158, 11, 0.9)) drop-shadow(0 0 24px rgba(239, 68, 68, 0.8));
  transform: rotate(-1.5deg);
  margin-bottom: 2px;
}

.tarot-load-bar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 2px;
  z-index: 10;
}

.tarot-load-bar-label {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fde68a;
  letter-spacing: 0.14em;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.45);
}

.tarot-load-bar-pct {
  color: #ffffff;
  font-weight: 900;
}

.tarot-load-name {
  display: none;
}

/* 轮盘舞台容器 (严格对齐参考图：大曲率机械时钟罗盘，仅截取显露顶部弧面) */
.tarot-roulette-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 重点：水平裁切只显示罗盘顶部一小段圆弧！ */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 巨型金色占星时钟轮盘 (数字精准对齐当前关卡塔罗序号) */
.tarot-roulette-wheel {
  position: absolute;
  width: 1160px;
  height: 1160px;
  left: 50%;
  top: 78px;
  margin-left: -580px;
  transform-origin: 580px 580px;
  transform: rotate(0deg);
  pointer-events: none;
}

.tarot-roulette-wheel.has-spun {
  transform: rotate(0deg);
}

.tarot-roulette-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.9));
}

/* 塔罗牌贴在罗盘底座上 (严格1:1无重叠几何尺寸：96x162，正面朝外，双层金边与四角蔓草) */
.tarot-load-card {
  position: absolute;
  left: 50%;
  top: 52px;
  width: 96px;
  height: 154px;
  margin-left: -48px;
  z-index: 6;
  transform-origin: 48px 528px;
  pointer-events: auto;
  opacity: 1;
}

/* 侧翼轮盘槽位卡牌：保持实体不透明与大气透视微暗调 */
.tarot-load-card.is-slot {
  z-index: 6;
  opacity: 0.95;
  filter: brightness(0.82) contrast(0.96);
}

/* 上一关卡牌：切入前处于指针正中 */
.tarot-load-card.is-prev {
  z-index: 8;
  opacity: 1;
  filter: brightness(0.95);
}

/* 本关目标卡牌：指针正中焦点，旋转停稳后 3D 翻转并放大至顶层 */
.tarot-load-card.is-cur {
  z-index: 10;
  opacity: 1;
  filter: brightness(1);
}

.tarot-roulette-wheel.has-spun .tarot-load-card.is-cur {
  z-index: 50;
  filter: brightness(1);
}

.tarot-roulette-wheel.has-spun .tarot-load-card.is-prev,
.tarot-roulette-wheel.has-spun .tarot-load-card.is-slot,
.tarot-roulette-wheel.has-spun .tarot-roulette-svg {
  opacity: 0.32;
  filter: brightness(0.65) blur(1.2px);
  transition: opacity 1.2s ease, filter 1.2s ease;
}

/* 3D 卡牌容器与 Y 轴翻转器 (停稳后飞移至屏幕正中央并放大 2.3x) */
.tarot-card-3d {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 900px;
}

.tarot-card-flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 1.36s cubic-bezier(0.18, 0.95, 0.25, 1), filter 1.0s ease;
  transform: translateY(0) rotateY(0deg) rotateZ(0deg) scale(1);
}

/* 进场/转动未揭开状态：卡背朝外，处于轮盘槽位 (rotateY 180deg) */
.tarot-card-flipper.is-unrevealed {
  transform: translateY(0) rotateY(180deg) rotateZ(0deg) scale(1);
}

/* 轮盘普通槽位与前序卡牌揭面状态 (保持在轮盘上，1.0x 贴附) */
.tarot-card-flipper.is-revealed {
  transform: translateY(0) rotateY(0deg) rotateZ(0deg) scale(1);
}

/* 轮盘历史已揭开槽位卡牌逆位形态：在轮盘槽位上就地 180° 倒悬，微弱朱砂暗晕 */
.tarot-card-flipper.is-revealed.is-reversed {
  transform: translateY(0) rotateY(0deg) rotateZ(180deg) scale(1);
  filter: drop-shadow(0 4px 12px rgba(193, 58, 38, 0.55));
}

/* 本关当前目标卡牌 (只有目标卡牌转动停稳后飞移至屏幕正中央并放大 2.3x) */
.tarot-load-card.is-cur .tarot-card-flipper.is-revealed {
  transform: translateY(168px) rotateY(0deg) rotateZ(0deg) scale(2.3);
  filter: drop-shadow(0 20px 48px rgba(16, 11, 7, 0.98)) drop-shadow(0 0 32px rgba(223, 190, 121, 0.65)) drop-shadow(0 0 16px rgba(250, 241, 208, 0.45));
}

/* 逆位倒悬：前摇左右摆动蓄力 → 一瞬间翻到 180°。
   为什么不用 transition：这是一段**多相位**运动（摆动 3 次再急转），单条 transition 只能
   从 A 单调插到 B，表达不了前摇，所以走 @keyframes。
   为什么不能复用揭面那条缓动：它 y2>1 会过冲，用在原地旋转上就是冲过 180° 再弹回来
   （实测冲到 183.6°、回摆约 400ms，卡片角上十几像素的晃）。
   时序：挂载点、时长与 browser-main.js 的 INVERT_LEAD_MS / INVERT_MS 同源，别单独改。
   改这里要连同 tarot-preview.html 的内联镜像一起改。 */
/* 逆位倒悬：z 轴 5Hz 微幅摆动蓄力 → 一瞬间翻到 180°。
   为什么不用 transition：这是一段**多相位**运动（高频摆动再急转），单条 transition 只能
   从 A 单调插到 B，表达不了前摇，所以走 @keyframes。
   为什么不能复用揭面那条缓动：它 y2>1 会过冲，用在原地旋转上就是冲过 180° 再弹回来
   （实测冲到 183.6°、回摆约 400ms，卡片角上十几像素的晃）。
   摆动规格：z 轴（屏幕平面内）、**顺时针先摆**（CSS rotateZ 正角即顺时针）、±2°、5Hz。
   5Hz = 周期 200ms，所以键的间距是 **100ms 绝对时间**，不是固定百分比——
   整个动画时长一变（0.75s→0.6s），百分比就得跟着重算，否则频率会偷偷变掉。
   当前 0.6s：前 400ms 走 2 个周期（键在 50/100/…/400ms），后 200ms 一瞬翻完 180°。
   时序：挂载点、时长与 browser-main.js 的 INVERT_LEAD_MS / INVERT_MS 同源，别单独改。
   改这里要连同 tarot-preview.html 的内联镜像一起改。 */
@keyframes tarot-invert {
  0%      { transform: translateY(168px) rotateY(0deg) rotateZ(0deg)    scale(2.3); }
  8.333%  { transform: translateY(168px) rotateY(0deg) rotateZ(2deg)    scale(2.3); }
  16.667% { transform: translateY(168px) rotateY(0deg) rotateZ(0deg)    scale(2.3); }
  25%     { transform: translateY(168px) rotateY(0deg) rotateZ(-2deg)   scale(2.3); }
  33.333% { transform: translateY(168px) rotateY(0deg) rotateZ(0deg)    scale(2.3); }
  41.667% { transform: translateY(168px) rotateY(0deg) rotateZ(2deg)    scale(2.3); }
  50%     { transform: translateY(168px) rotateY(0deg) rotateZ(0deg)    scale(2.3); }
  58.333% { transform: translateY(168px) rotateY(0deg) rotateZ(-2deg)   scale(2.3); }
  66.667% { transform: translateY(168px) rotateY(0deg) rotateZ(0deg)    scale(2.3);
            animation-timing-function: cubic-bezier(0.22, 0.9, 0.28, 1); }
  100%    { transform: translateY(168px) rotateY(0deg) rotateZ(180deg)  scale(2.3); }
}

.tarot-load-card.is-cur .tarot-card-flipper.is-revealed.is-reversed {
  /* transform 交给上面的动画（两者同时挂会互相打架）。
     filter 只留 0.1s 过渡，而且**刻意不在这里写 filter**：蓄力摆动期间沿用揭面那条金光，
     真正的转红由 .is-reddened 在落定前 0.1s 触发（见下面的红色滤镜块）。 */
  transition: filter 0.1s linear;
  animation: tarot-invert 0.6s cubic-bezier(0.45, 0, 0.55, 1) both;
  transform: translateY(168px) rotateY(0deg) rotateZ(180deg) scale(2.3);
}

/* 倒悬落定的红色滤镜：以**状态**压上来，不是闪一下就退。
   落定前 0.1s 开始压（browser-main.js 的 INVERT_MS - 100），0.1s 内到满，
   正好在卡牌落定那一刻全红，之后一直保持到冻结期结束切场。
   颜色随通道走——精英用冻结的 #ef4444，Boss 用冻结的粉 #f472b6，
   绝不把精英红漏进 Boss 通道（spec §5.5.2）。 */
/* 全屏均匀平铺，不用径向渐变（渐变会在中心留个亮斑，就不是"均匀"了）。 */
.tarot-load-red-filter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s linear;
  /* 刻意**不写 z-index**，而且必须排在加载层 DOM 的第一个子节点，两个条件缺一不可：
     .tarot-roulette-wheel 带 transform、自成层叠上下文，卡牌在它内部（哪怕 z-index 50）
     也跳不出来。滤镜只要带正 z-index 就会盖住整张牌；不带 z-index 且排在轮盘之前，
     才会落在「背景之上、轮盘(含卡牌)与顶部表头之下」那一层。
     挪 DOM 位置或加 z-index 都会把牌糊住。 */
}

.tarot-load-overlay.is-elite .tarot-load-red-filter {
  background: rgba(150, 8, 8, 0.62);
}

.tarot-load-overlay.is-boss .tarot-load-red-filter {
  background: rgba(165, 22, 78, 0.58);
}

.tarot-load-overlay.is-reddened .tarot-load-red-filter {
  opacity: 1;
}

/* 卡牌的朱砂光也跟着同一拍转深红。蓄力摆动那 650ms 里它保持揭面的金光——
   红色提前冒出来就是这里漏的。 */
.tarot-load-overlay.is-reddened .tarot-load-card.is-cur .tarot-card-flipper.is-reversed {
  filter: drop-shadow(0 24px 54px rgba(16, 11, 7, 0.98)) drop-shadow(0 0 36px rgba(170, 18, 18, 0.95)) drop-shadow(0 0 18px rgba(254, 202, 202, 0.5));
}

/* 正面与背面 */
.tarot-card-front,
.tarot-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 12px 28px rgba(16, 11, 7, 0.92), 0 0 18px rgba(193, 58, 38, 0.25), 0 0 8px rgba(223, 190, 121, 0.2);
  border: 1.2px solid #16100B;
  background: #16100B;
}

.tarot-card-front {
  transform: rotateY(0deg);
  z-index: 2;
}

.tarot-card-back {
  transform: rotateY(180deg);
  background: #16100B url('assets/tarot/cards/card_back.webp') center/cover no-repeat;
  border-color: #8B5B1E;
  z-index: 1;
}

.tarot-svg-face,
.tarot-svg-back {
  width: 100%;
  height: 100%;
  display: block;
}



/* 时钟轨道加载进度条 (Woodcut Brass & Cinnabar Rail) */
.tarot-load-progress {
  position: relative;
  width: clamp(160px, 46vw, 220px);
  height: 7px;
  background: rgba(22, 15, 10, 0.92);
  border-radius: 5px;
  overflow: hidden;
  border: 1.5px solid #C59E56;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(193, 58, 38, 0.35);
  z-index: 10;
}

.tarot-load-progress-fill {
  width: 18%;
  height: 100%;
  background: linear-gradient(90deg, #98281A, #C13A26, #DFBE79, #FAF4E6);
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(193, 58, 38, 0.85);
  transition: width 0.72s cubic-bezier(0.12, 0.88, 0.25, 1);
}

.tarot-load-overlay.is-shown .tarot-load-progress-fill {
  width: 100%;
}

/* 核心判词与副标题 (Woodcut Ink & Vermilion Badges - 固定于屏幕底部) */
.tarot-load-keyword {
  position: absolute;
  bottom: clamp(44px, 7vh, 60px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Noto Serif SC', 'Source Han Serif SC', serif;
  font-size: 13px;
  font-weight: 700;
  color: #FAF4E6;
  background: rgba(26, 17, 11, 0.88);
  border: 1px solid rgba(223, 190, 121, 0.5);
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 0.15em;
  text-shadow: 0 0 10px rgba(193, 58, 38, 0.4);
  z-index: 25;
  white-space: nowrap;
}

.tarot-load-sub {
  position: absolute;
  bottom: clamp(20px, 4vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #D5C397;
  letter-spacing: 0.25em;
  padding-left: 0.25em;
  z-index: 25;
  white-space: nowrap;
}

/* 进度条 (Emberring Speedline Progress) */
.tarot-load-progress {
  width: clamp(140px, 42vw, 200px);
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  z-index: 10;
}

.tarot-load-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #f59e0b, #fde68a);
  border-radius: 4px;
  transition: width 0.72s cubic-bezier(0.12, 0.88, 0.25, 1);
}

.tarot-load-overlay.is-shown .tarot-load-progress-fill {
  width: 100%;
}

/* 精英挑战与逆位视效。
   精英红 #ef4444 是冻结值（docs/superpowers/specs/2026-09-11-tarot-level-skeleton-spec.md
   §5.5.2 / §5.6：与地图精英节点同值，不得再引入第三种红色）。此处原先用的是紫色
   #c084fc / #a855f7，属实现偏离规格；地图侧（.node-elite / .spire-type-badge.elite /
   .spire-legend-item.node-elite / .stage-modal-badge.elite）本来就是 #ef4444，
   现按规格对齐回红。底层背景也一并染红，否则只有字是红的、"界面"没红。 */
.tarot-load-overlay.is-elite {
  background: radial-gradient(circle at 50% 48%, rgba(78, 6, 6, 0.96) 0%, rgba(44, 4, 4, 0.98) 60%, rgba(16, 2, 2, 0.995) 100%);
}

.tarot-load-overlay.is-elite .tarot-card-side {
  border-color: rgba(239, 68, 68, 0.85);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 32px rgba(239, 68, 68, 0.45);
}

.tarot-load-overlay.is-elite .tarot-load-name {
  color: #ef4444;
  text-shadow: 2px 2px 0 #000, 0 0 24px rgba(239, 68, 68, 0.55);
}

.tarot-load-overlay.is-elite .tarot-load-sub {
  color: #f87171;
}

.tarot-load-overlay.is-elite .tarot-load-progress-fill {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

/* 首领降临视效 */
.tarot-load-overlay.is-boss .tarot-card-side {
  border-color: rgba(244, 114, 182, 0.85);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 35px rgba(244, 114, 182, 0.45);
}

.tarot-load-overlay.is-boss .tarot-load-name {
  color: #f472b6;
  text-shadow: 2px 2px 0 #000, 0 0 26px rgba(244, 114, 182, 0.5);
}

.tarot-load-overlay.is-boss .tarot-load-sub {
  color: #fbcfe8;
}

.tarot-load-overlay.is-boss .tarot-load-progress-fill {
  background: linear-gradient(90deg, #f472b6, #fbcfe8);
}



/* ========================================================================= */
/* 方案 D 与 方案 A 游戏 UI 移植体系 (默认方案 D · 潮酷漫画机能风)            */
/* ========================================================================= */

/* 方案 D (默认): 【立绘同频·潮酷漫画机能风】 (Action Manga & Comic Ink) */
#game-shell[data-ui-scheme="comic"],
#game-shell:not([data-ui-scheme="obsidian"]) {
  background: #080a11 url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%23192238' fill-opacity='0.65'/%3E%3Ccircle cx='19' cy='19' r='1.5' fill='%23192238' fill-opacity='0.65'/%3E%3C/svg%3E");
}

/* 方案 D 通用面板分镜与硬边立体投影 */
#game-shell[data-ui-scheme="comic"] .game-bracket-box,
#game-shell:not([data-ui-scheme="obsidian"]) .game-bracket-box,
#game-shell[data-ui-scheme="comic"] .modal-sheet,
#game-shell:not([data-ui-scheme="obsidian"]) .modal-sheet {
  background: #111422;
  border: 3px solid #000000;
  border-radius: 0px;
  box-shadow: 5px 5px 0px #000000;
}

/* 方案 D 主按键：纯白高反差 + 3.5px 重黑墨线 + 双层硬边立体投影 + 动势微斜 */
#game-shell[data-ui-scheme="comic"] .btn-primary,
#game-shell[data-ui-scheme="comic"] .btn-game-primary,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-primary,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-game-primary {
  background: #ffffff;
  color: #000000;
  border: 3.5px solid #000000;
  border-radius: 0px;
  clip-path: none;
  box-shadow: 4px 4px 0px #000000, 7px 7px 0px var(--run-accent), 7px 7px 0px 2px #000000;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transform: skewX(-6deg);
  transition: all 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#game-shell[data-ui-scheme="comic"] .btn-primary:hover,
#game-shell[data-ui-scheme="comic"] .btn-game-primary:hover,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-primary:hover,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-game-primary:hover {
  background: var(--run-accent);
  color: #000000;
  transform: skewX(-6deg) translate(2px, 2px);
  box-shadow: 2px 2px 0px #000000;
}

/* 方案 D 次级按键 */
#game-shell[data-ui-scheme="comic"] .btn-secondary,
#game-shell[data-ui-scheme="comic"] .btn-game-secondary,
#game-shell[data-ui-scheme="comic"] .btn-subtle-pill,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-secondary,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-game-secondary,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-subtle-pill {
  background: #171b2a;
  border: 2.5px solid #000000;
  box-shadow: 3.5px 3.5px 0px #000000;
  border-radius: 0px;
  color: #f8fafc;
  font-weight: 900;
  font-style: italic;
  transform: skewX(-4deg);
  clip-path: none;
}

#game-shell[data-ui-scheme="comic"] .btn-secondary:hover,
#game-shell[data-ui-scheme="comic"] .btn-game-secondary:hover,
#game-shell[data-ui-scheme="comic"] .btn-subtle-pill:hover,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-secondary:hover,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-game-secondary:hover,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-subtle-pill:hover {
  background: #252c42;
  border-color: var(--run-accent);
  color: #ffffff;
  transform: skewX(-4deg) translate(2px, 2px);
  box-shadow: 1.5px 1.5px 0px #000000;
}

/* ------------------------------------------------------------------------- */
/* 局内物品 UI 一致性规范：方案 D (COMIC INK)                                */
/* ------------------------------------------------------------------------- */

/* 1. 初始武器选择卡片 (Weapon Select Cards) */
#game-shell[data-ui-scheme="comic"] .weapon-select-card,
#game-shell:not([data-ui-scheme="obsidian"]) .weapon-select-card {
  background: #121626;
  border: 3px solid #000000;
  border-left: 8px solid var(--run-accent);
  box-shadow: 5px 5px 0px #000000;
  border-radius: 0px;
  transform: skewX(-3deg);
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#game-shell[data-ui-scheme="comic"] .weapon-select-card > *,
#game-shell:not([data-ui-scheme="obsidian"]) .weapon-select-card > * {
  transform: skewX(3deg);
}

#game-shell[data-ui-scheme="comic"] .weapon-select-card:hover,
#game-shell:not([data-ui-scheme="obsidian"]) .weapon-select-card:hover {
  background: #1a2138;
  transform: skewX(-3deg) translate(2px, 2px);
  box-shadow: 2px 2px 0px #000, 5px 5px 0px var(--run-accent);
}

#game-shell[data-ui-scheme="comic"] .weapon-select-card.selected,
#game-shell:not([data-ui-scheme="obsidian"]) .weapon-select-card.selected {
  background: #18233a;
  border: 3.5px solid #000000;
  border-left: 10px solid var(--run-accent);
  box-shadow: 5px 5px 0px #000000, 9px 9px 0px var(--run-accent), 9px 9px 0px 2px #000;
}

#game-shell[data-ui-scheme="comic"] .weapon-icon-box,
#game-shell:not([data-ui-scheme="obsidian"]) .weapon-icon-box {
  border: 4px solid #000000;
  box-shadow: 3px 3px 0px #000000;
  border-radius: 0px;
}

#game-shell[data-ui-scheme="comic"] .w-stat-pill,
#game-shell:not([data-ui-scheme="obsidian"]) .w-stat-pill {
  border: 2px solid #000000;
  box-shadow: 2px 2px 0px #000000;
  border-radius: 0px;
  font-weight: 800;
}

/* 2. 商店货架商品卡片 (Shop Offers) */
#game-shell[data-ui-scheme="comic"] #screen-supply-shop .shop-card,
#game-shell[data-ui-scheme="comic"] .shop-v2 .shop-card,
#game-shell:not([data-ui-scheme="obsidian"]) #screen-supply-shop .shop-card,
#game-shell:not([data-ui-scheme="obsidian"]) .shop-v2 .shop-card {
  background: #121626;
  border: var(--card-rarity-w, 3px) solid var(--card-rarity, #000000);
  border-left: 7px solid var(--rarity-border, var(--run-accent));
  box-shadow: 5px 5px 0px #000000;
  border-radius: 0px;
  transform: skewX(-3deg);
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#game-shell[data-ui-scheme="comic"] #screen-supply-shop .shop-card > *,
#game-shell[data-ui-scheme="comic"] .shop-v2 .shop-card > *,
#game-shell:not([data-ui-scheme="obsidian"]) #screen-supply-shop .shop-card > *,
#game-shell:not([data-ui-scheme="obsidian"]) .shop-v2 .shop-card > * {
  transform: skewX(3deg);
}

/* 商品卡整圈描边 = 稀有度色（左竖条仍为角色主题色 --run-accent，见上方规则）。
   色板单一来源 :root 的 --rarity-N；传说 = 品红红 #ff2d6f。
   线宽随稀有度递增（2→5px），颜色 + 粗细双通道，低稀有度也不再灰暗难辨。 */
.shop-card.rarity-1 { --card-rarity: var(--rarity-1); --card-rarity-w: 2px; }
.shop-card.rarity-2 { --card-rarity: var(--rarity-2); --card-rarity-w: 2.5px; }
.shop-card.rarity-3 { --card-rarity: var(--rarity-3); --card-rarity-w: 3.5px; }
.shop-card.rarity-4 { --card-rarity: var(--rarity-4); --card-rarity-w: 4.5px; }
.shop-card.rarity-5 { --card-rarity: var(--rarity-5); --card-rarity-w: 5px; }

#game-shell[data-ui-scheme="comic"] #screen-supply-shop .shop-card:hover:not(:disabled),
#game-shell[data-ui-scheme="comic"] .shop-v2 .shop-card:hover:not(:disabled),
#game-shell:not([data-ui-scheme="obsidian"]) #screen-supply-shop .shop-card:hover:not(:disabled),
#game-shell:not([data-ui-scheme="obsidian"]) .shop-v2 .shop-card:hover:not(:disabled) {
  background: #1a2238;
  transform: skewX(-3deg) translate(2px, 2px);
  box-shadow: 2px 2px 0px #000, 5px 5px 0px var(--run-accent);
}

#game-shell[data-ui-scheme="comic"] .shop-art,
#game-shell:not([data-ui-scheme="obsidian"]) .shop-art {
  border: 3.5px solid #000000;
  box-shadow: 2.5px 2.5px 0px #000000;
  border-radius: 0px;
}

#game-shell[data-ui-scheme="comic"] .btn-shop-lock,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-shop-lock {
  border: 2px solid #000000;
  box-shadow: 2px 2px 0px #000000;
  border-radius: 0px;
  font-weight: 900;
}

#game-shell[data-ui-scheme="comic"] .btn-shop-lock.is-locked,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-shop-lock.is-locked {
  background: #facc15;
  color: #000000;
  border-color: #000000;
  box-shadow: 2px 2px 0px #000, 4px 4px 0px #eab308;
}

#game-shell[data-ui-scheme="comic"] .shop-price-tag,
#game-shell:not([data-ui-scheme="obsidian"]) .shop-price-tag {
  background: #181e30;
  border: 2px solid #000000;
  box-shadow: 2.5px 2.5px 0px #000000;
  border-radius: 0px;
  font-weight: 900;
}

#game-shell[data-ui-scheme="comic"] .rarity-badge,
#game-shell:not([data-ui-scheme="obsidian"]) .rarity-badge {
  border: 1.5px solid #000000;
  border-radius: 0px;
  box-shadow: 1.5px 1.5px 0px #000000;
  font-weight: 900;
  text-transform: uppercase;
}

#game-shell[data-ui-scheme="comic"] .shop-type-badge,
#game-shell:not([data-ui-scheme="obsidian"]) .shop-type-badge {
  border: 1.5px solid #000000;
  border-radius: 0px;
  box-shadow: 1.5px 1.5px 0px #000000;
}

/* 3. 升级与命运抽卡 (Card Draw & Upgrades) */
#game-shell[data-ui-scheme="comic"] .draw-card.reward-card,
#game-shell[data-ui-scheme="comic"] .upgrade-card,
#game-shell:not([data-ui-scheme="obsidian"]) .draw-card.reward-card,
#game-shell:not([data-ui-scheme="obsidian"]) .upgrade-card {
  background: #131726;
  border: 3px solid #000000;
  box-shadow: 5px 5px 0px #000000;
  border-radius: 0px;
  transform: skewX(-4deg);
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#game-shell[data-ui-scheme="comic"] .draw-card.reward-card > *,
#game-shell[data-ui-scheme="comic"] .upgrade-card > *,
#game-shell:not([data-ui-scheme="obsidian"]) .draw-card.reward-card > *,
#game-shell:not([data-ui-scheme="obsidian"]) .upgrade-card > * {
  transform: skewX(4deg);
}

#game-shell[data-ui-scheme="comic"] .draw-card.reward-card:hover,
#game-shell[data-ui-scheme="comic"] .upgrade-card:hover,
#game-shell:not([data-ui-scheme="obsidian"]) .draw-card.reward-card:hover,
#game-shell:not([data-ui-scheme="obsidian"]) .upgrade-card:hover {
  background: #1c233c;
  transform: skewX(-4deg) translate(2px, 2px);
  box-shadow: 2px 2px 0px #000, 5px 5px 0px var(--run-accent);
}

#game-shell[data-ui-scheme="comic"] .draw-card.reward-card.is-selected,
#game-shell:not([data-ui-scheme="obsidian"]) .draw-card.reward-card.is-selected {
  background: #18233a;
  border: 3.5px solid #000000;
  border-left: 10px solid var(--run-accent);
  box-shadow: 5px 5px 0px #000000, 9px 9px 0px var(--run-accent), 9px 9px 0px 2px #000;
}

#game-shell[data-ui-scheme="comic"] .reward-card-rarity,
#game-shell:not([data-ui-scheme="obsidian"]) .reward-card-rarity {
  border: 1.5px solid #000000;
  border-radius: 0px;
  box-shadow: 1.5px 1.5px 0px #000000;
  font-weight: 900;
}

#game-shell[data-ui-scheme="comic"] .event-cost-badge,
#game-shell:not([data-ui-scheme="obsidian"]) .event-cost-badge {
  border: 1.5px solid #000000;
  border-radius: 0px;
  box-shadow: 2px 2px 0px #000000;
  font-weight: 900;
}

#game-shell[data-ui-scheme="comic"] .btn-skip-upgrade,
#game-shell[data-ui-scheme="comic"] .btn-reroll-upgrade,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-skip-upgrade,
#game-shell:not([data-ui-scheme="obsidian"]) .btn-reroll-upgrade {
  border: 2.5px solid #000000;
  box-shadow: 3.5px 3.5px 0px #000000;
  border-radius: 0px;
  font-weight: 900;
  font-style: italic;
}

/* 4. 已装备武器栏 (Equipped Weapons Inventory) */
#game-shell[data-ui-scheme="comic"] .inventory-bar,
#game-shell:not([data-ui-scheme="obsidian"]) .inventory-bar {
  background: #111524;
  border: 3px solid #000000;
  box-shadow: 5px 5px 0px #000000;
  border-radius: 0px;
}

#game-shell[data-ui-scheme="comic"] .inv-slot,
#game-shell:not([data-ui-scheme="obsidian"]) .inv-slot {
  background: #161c2e;
  border: 2px solid #000000;
  box-shadow: 3px 3px 0px #000000;
  border-radius: 0px;
  font-weight: 800;
}

#game-shell[data-ui-scheme="comic"] .inv-slot:hover,
#game-shell:not([data-ui-scheme="obsidian"]) .inv-slot:hover {
  border-color: var(--run-accent);
  transform: translate(1px, 1px);
  box-shadow: 1.5px 1.5px 0px #000000;
}

#game-shell[data-ui-scheme="comic"] .inv-slot-lvl,
#game-shell:not([data-ui-scheme="obsidian"]) .inv-slot-lvl {
  border: 1px solid #000000;
  border-radius: 0px;
  font-weight: 900;
}

/* 5. 局内武器与商品详情弹窗 (Weapon / Item Detail Popovers) */
#game-shell[data-ui-scheme="comic"] .shop-offer-popover,
#game-shell[data-ui-scheme="comic"] .weapon-modal,
#game-shell:not([data-ui-scheme="obsidian"]) .shop-offer-popover,
#game-shell:not([data-ui-scheme="obsidian"]) .weapon-modal {
  background: #111524;
  border: 3.5px solid #000000;
  box-shadow: 6px 6px 0px #000000, 10px 10px 0px var(--run-accent), 10px 10px 0px 2px #000;
  border-radius: 0px;
}

/* 6. 核心战斗 HUD 与技能槽位 (Battle HUD & Skills) */
#game-shell[data-ui-scheme="comic"] .hud-skill-slot,
#game-shell:not([data-ui-scheme="obsidian"]) .hud-skill-slot {
  border: 3px solid #000000;
  box-shadow: 4px 4px 0px #000000;
  border-radius: 0px;
  background: #141828;
}

#game-shell[data-ui-scheme="comic"] .hud-skill-key,
#game-shell:not([data-ui-scheme="obsidian"]) .hud-skill-key {
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  box-shadow: 2px 2px 0px #000000;
  border-radius: 0px;
  font-weight: 900;
}

#game-shell[data-ui-scheme="comic"] .hud-skill-tree-btn,
#game-shell:not([data-ui-scheme="obsidian"]) .hud-skill-tree-btn {
  border: 3px solid #000000;
  box-shadow: 4px 4px 0px #000000;
  border-radius: 0px;
  transform: skewX(-5deg);
}

#game-shell[data-ui-scheme="comic"] .battle-corner-tools .btn-hud-icon,
#game-shell:not([data-ui-scheme="obsidian"]) .battle-corner-tools .btn-hud-icon {
  border: 2.5px solid #000000;
  box-shadow: 3.5px 3.5px 0px #000000;
  border-radius: 0px;
}

/* ========================================================================= */
/* 方案 A: 【暗核机能极简风】 (Cyber Obsidian Minimal)                        */
/* ========================================================================= */

#game-shell[data-ui-scheme="obsidian"] {
  background: #04060a radial-gradient(circle at 15% 15%, rgba(0, 240, 255, 0.06) 0%, transparent 50%),
              radial-gradient(circle at 85% 85%, rgba(99, 102, 241, 0.05) 0%, transparent 60%);
}

#game-shell[data-ui-scheme="obsidian"] .game-bracket-box,
#game-shell[data-ui-scheme="obsidian"] .modal-sheet {
  background: rgba(10, 16, 26, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  clip-path: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
}

#game-shell[data-ui-scheme="obsidian"] .btn-primary,
#game-shell[data-ui-scheme="obsidian"] .btn-game-primary {
  background: #ffffff;
  color: #04060a;
  border: 1px solid #ffffff;
  border-radius: 6px;
  clip-path: none;
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.22);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  transform: none;
}

#game-shell[data-ui-scheme="obsidian"] .btn-primary:hover,
#game-shell[data-ui-scheme="obsidian"] .btn-game-primary:hover {
  background: #00f0ff;
  border-color: #00f0ff;
  color: #020617;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.65);
  transform: translateY(-1px);
}

#game-shell[data-ui-scheme="obsidian"] .btn-secondary,
#game-shell[data-ui-scheme="obsidian"] .btn-game-secondary,
#game-shell[data-ui-scheme="obsidian"] .btn-subtle-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  clip-path: none;
  box-shadow: none;
  color: #cbd5e1;
  transform: none;
}

#game-shell[data-ui-scheme="obsidian"] .btn-secondary:hover,
#game-shell[data-ui-scheme="obsidian"] .btn-game-secondary:hover,
#game-shell[data-ui-scheme="obsidian"] .btn-subtle-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

/* 局内物品 UI 一致性规范：方案 A (OBSIDIAN) */
#game-shell[data-ui-scheme="obsidian"] .weapon-select-card {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 16, 26, 0.92);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  transform: none;
}

#game-shell[data-ui-scheme="obsidian"] .weapon-select-card > * {
  transform: none;
}

#game-shell[data-ui-scheme="obsidian"] .weapon-select-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(18, 28, 48, 0.96);
  transform: translateY(-1px);
}

#game-shell[data-ui-scheme="obsidian"] .weapon-select-card.selected {
  border-color: #00f0ff;
  background: rgba(14, 25, 45, 0.98);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
}

#game-shell[data-ui-scheme="obsidian"] #screen-supply-shop .shop-card,
#game-shell[data-ui-scheme="obsidian"] .shop-v2 .shop-card {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3.5px solid var(--rarity-border, rgba(143, 164, 173, 0.45));
  background: rgba(10, 16, 26, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: none;
}

#game-shell[data-ui-scheme="obsidian"] #screen-supply-shop .shop-card > *,
#game-shell[data-ui-scheme="obsidian"] .shop-v2 .shop-card > * {
  transform: none;
}

#game-shell[data-ui-scheme="obsidian"] #screen-supply-shop .shop-card:hover:not(:disabled),
#game-shell[data-ui-scheme="obsidian"] .shop-v2 .shop-card:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(18, 28, 48, 0.96);
  transform: translateY(-1px);
}

#game-shell[data-ui-scheme="obsidian"] .draw-card.reward-card,
#game-shell[data-ui-scheme="obsidian"] .upgrade-card {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 16, 26, 0.92);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transform: none;
}

#game-shell[data-ui-scheme="obsidian"] .draw-card.reward-card > *,
#game-shell[data-ui-scheme="obsidian"] .upgrade-card > * {
  transform: none;
}

#game-shell[data-ui-scheme="obsidian"] .draw-card.reward-card:hover,
#game-shell[data-ui-scheme="obsidian"] .upgrade-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

#game-shell[data-ui-scheme="obsidian"] .draw-card.reward-card.is-selected {
  border-color: #00f0ff;
  background: rgba(14, 25, 45, 0.98);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
}

#game-shell[data-ui-scheme="obsidian"] .inventory-bar {
  border-radius: 8px;
  background: rgba(11, 16, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

#game-shell[data-ui-scheme="obsidian"] .inv-slot {
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

#game-shell[data-ui-scheme="obsidian"] .hud-skill-slot {
  border-radius: 8px;
  border: 1.5px solid #00f0ff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(0, 240, 255, 0.35);
}

/* ========================================================================= */
/* 局内卡片强调色：跟随所选角色主题色 (--battle-hero-primary)                 */
/* 单一定义点，卡片规则统一引用 var(--run-accent)，勿再写死青色。            */
/* ========================================================================= */
#game-shell {
  --run-accent: var(--battle-hero-primary, #00f0ff);
}

/* ========================================================================= */
/* 移动端适配：全站隐藏滚动条（保留滚动能力，仅去掉 PC 端滚条视觉）           */
/* ========================================================================= */
* {
  scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none; /* 旧版 Edge / IE */
}

*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* ========================================================================= */
/* 英雄档案页 (screen-hero-archive)                                          */
/* 局外纯展示（塔罗规格 4.1）：全屏立绘为主体 + 底部信息坞。                   */
/* 不承担本轮选角事务 —— 局内选角在「第 0 关 · 愚者整备」页。                  */
/* ========================================================================= */
#screen-hero-archive {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  background: #05070d;
}

#screen-hero-archive .p3-ring-orbits { z-index: 1; opacity: 0.55; pointer-events: none; }

#screen-hero-archive .hero-archive-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

#screen-hero-archive .hero-archive-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

#screen-hero-archive .hero-archive-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 26%, var(--hero-archive-theme, #38bdf8) 0%, transparent 68%);
  opacity: 0.3;
  mix-blend-mode: screen;
}

#screen-hero-archive .hero-archive-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 7, 13, 0.9) 0%, rgba(5, 7, 13, 0.28) 22%, rgba(5, 7, 13, 0) 42%),
    linear-gradient(0deg, rgba(5, 7, 13, 0.98) 0%, rgba(5, 7, 13, 0.9) 22%, rgba(5, 7, 13, 0.35) 48%, rgba(5, 7, 13, 0) 70%);
}

#screen-hero-archive .hero-archive-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 0;
}

#screen-hero-archive .hero-archive-topbar .screen-badge {
  border: 1px solid var(--obs-line);
  background: rgba(9, 17, 38, 0.6);
  color: var(--obs-ice);
}

#screen-hero-archive .hero-archive-roster {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 10px 14px 4px;
}

#screen-hero-archive .hero-archive-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#screen-hero-archive .hero-archive-tab.active { opacity: 1; transform: translateY(-2px); }

#screen-hero-archive .hero-archive-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(121, 226, 239, 0.5);
  background: rgba(9, 17, 38, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#screen-hero-archive .hero-archive-avatar svg { width: 100%; height: 100%; }

#screen-hero-archive .hero-archive-tab-name {
  font-size: 9px;
  font-weight: 800;
  color: var(--obs-moon);
  letter-spacing: 0.02em;
}

#screen-hero-archive .hero-archive-dock {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 8px;
  /* 小屏兜底：内容放不下时坞内可滚动（滚动条已全局隐藏），而不是被裁掉 */
  min-height: 0;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(5, 7, 13, 0) 0%, rgba(5, 7, 13, 0.82) 16%, rgba(5, 7, 13, 0.96) 42%, rgba(5, 7, 13, 0.99) 100%);
}

#screen-hero-archive .hero-archive-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#screen-hero-archive .hero-archive-title-tag {
  font-size: 11px;
  font-weight: 800;
  color: var(--obs-muted);
  letter-spacing: 0.06em;
}

#screen-hero-archive .hero-archive-school-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 8px;
  border: 1px solid var(--obs-line);
  border-radius: 2px;
  color: var(--obs-moon);
  background: rgba(121, 226, 239, 0.08);
}

#screen-hero-archive .hero-archive-name {
  margin: 0;
  font-size: 40px;
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.75);
}

#screen-hero-archive .hero-archive-quote {
  font-size: 12px;
  line-height: 1.5;
  color: var(--obs-moon);
  padding: 6px 10px;
  border-left: 3px solid var(--hero-archive-theme, var(--obs-ice));
  background: rgba(9, 17, 38, 0.55);
}

#screen-hero-archive .hero-archive-lore {
  font-size: 11px;
  line-height: 1.5;
  color: var(--obs-muted);
  /* 整行截断：max-height 用非整行值会把最后一行横切一半 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#screen-hero-archive .hero-stat-grid--dock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

/* 窄屏下标签与数值各自换行会散架：收紧字号并禁止折行 */
#screen-hero-archive .hero-stat-grid--dock .stat-grid-cell {
  padding: 6px 8px;
  gap: 4px;
  min-width: 0;
}

#screen-hero-archive .hero-stat-grid--dock .stat-cell-label {
  font-size: 10px;
  white-space: nowrap;
}

#screen-hero-archive .hero-stat-grid--dock .stat-cell-value {
  font-size: 13px;
  white-space: nowrap;
}

#screen-hero-archive .hero-trait-buff-banner { margin: 0; }

#screen-hero-archive .tdxd-bottom-nav { position: relative; z-index: 2; }

/* ========================================================================= */
/* 第 0 关 · 愚者整备 (screen-fool-prep)                                     */
/* 局内每轮开局的选角步骤（塔罗规格 4.2）：全屏立绘左右滑动选角、到尽头循环。   */
/* 视觉上刻意区别于英雄档案页（琥珀/斜切，非展示页的冷青）。                     */
/* ========================================================================= */
#screen-fool-prep {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  /* 三个主题色变量由浏览器层按所选角色写入（见 renderFoolPrep.applyRole），
     同屏只用这一套色，别在 CSS 里写死某一个角色的色值。 */
  --fool-prep-theme: #f59e0b;
  --fool-prep-theme-soft: #f59e0bb0;
  --fool-prep-theme-faint: #f59e0b2e;
  background: #07080d;
}

#screen-fool-prep .fool-prep-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--fool-prep-theme-faint);
  background: linear-gradient(180deg, rgba(10, 12, 18, 0.92), rgba(7, 8, 13, 0.6));
}

#screen-fool-prep .fool-prep-title {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

#screen-fool-prep .fool-prep-stage {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--fool-prep-theme);
}

#screen-fool-prep .fool-prep-sub {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--obs-muted);
}

#screen-fool-prep .fool-prep-stagewrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

#screen-fool-prep .fool-prep-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  pointer-events: none;
}

#screen-fool-prep .fool-prep-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(7, 8, 13, 0.98) 0%, rgba(7, 8, 13, 0.55) 24%, rgba(7, 8, 13, 0) 52%),
    radial-gradient(ellipse 80% 60% at 50% 100%, var(--fool-prep-theme-faint), transparent 70%);
}

#screen-fool-prep .fool-prep-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: var(--fool-prep-theme);
  background: rgba(7, 8, 13, 0.7);
  border: 0;
  text-shadow: 0 0 12px var(--fool-prep-theme-soft);
  cursor: pointer;
}

#screen-fool-prep .fool-prep-arrow.prev { left: 0; border-left: 2px solid var(--fool-prep-theme); }
#screen-fool-prep .fool-prep-arrow.next { right: 0; border-right: 2px solid var(--fool-prep-theme); }
#screen-fool-prep .fool-prep-arrow:active { background: var(--fool-prep-theme-faint); }

#screen-fool-prep .fool-prep-info {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 4px;
  margin-top: -56px;
  pointer-events: none;
}

#screen-fool-prep .fool-prep-name-row { display: flex; align-items: baseline; gap: 8px; }

#screen-fool-prep .fool-prep-name {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.8);
}

#screen-fool-prep .fool-prep-school {
  font-size: 11px;
  font-weight: 800;
  color: var(--fool-prep-theme);
}

#screen-fool-prep .fool-prep-dots { display: flex; gap: 6px; }

#screen-fool-prep .fool-prep-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

#screen-fool-prep .fool-prep-dot.active {
  background: var(--fool-prep-theme);
  box-shadow: 0 0 10px var(--fool-prep-theme);
}

#screen-fool-prep .role-select-footer {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 10px;
  padding: 8px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(7, 8, 13, 0) 0%, rgba(7, 8, 13, 0.95) 40%);
}

#screen-fool-prep .role-select-footer .btn { flex: 1 1 auto; }
#screen-fool-prep .role-select-footer .btn-diff-trigger { flex: 0 0 44%; }

/* ===== 圣人之泪余额胶囊（星盘页 / 成就页顶栏）：标签与数值分两行，避免在词中折行 ===== */
.tactical-top-pill.meta-points-pill {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 1.25;
}

.meta-points-pill .mp-label {
  font-size: 10px;
  white-space: nowrap;
  opacity: 0.85;
}

.meta-points-pill .mp-value {
  font-size: 14px;
  font-weight: 900;
}

/* ===== 烬环星盘（screen-talents） ===== */
.star-notice {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fef08a;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 6px;
}

.star-chart-wrap {
  margin: 0 -8px;
  display: flex;
  justify-content: center;
}

.star-chart-svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  aspect-ratio: 1 / 1;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
}

.star-ring {
  fill: none;
  stroke: rgba(56, 189, 248, 0.14);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.star-domain-label {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}

.star-edge {
  stroke: rgba(148, 163, 184, 0.28);
  stroke-width: 2;
}

.star-edge.is-lit {
  stroke-width: 3;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.45));
}

.star-node-shape {
  stroke-width: 2.5;
}

.star-node.is-locked .star-node-shape,
.star-node.is-locked .star-node-halo {
  opacity: 0.38;
}

.star-node.is-available .star-node-shape {
  stroke-dasharray: 4 3;
}

.star-node.is-lit .star-node-shape {
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55));
}

.star-node.is-selected .star-node-shape {
  stroke: #ffffff;
  stroke-width: 3.5;
}

.star-node-halo {
  fill: none;
  stroke-width: 1.5;
}

.star-node-rank {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  fill: #cbd5e1;
}

.star-node-hit {
  fill: transparent;
  stroke: none;
}

.star-detail-card,
.star-summary-card {
  background: linear-gradient(135deg, rgba(20, 28, 48, 0.9) 0%, rgba(10, 16, 30, 0.98) 100%);
  border: 1px solid rgba(229, 192, 123, 0.35);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.star-detail-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.star-detail-head .sd-name {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
}

.star-detail-head .sd-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: #38bdf8;
}

.star-detail-head .sd-rank {
  margin-left: auto;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  color: #fbbf24;
}

.sd-desc {
  font-size: 11.5px;
  color: #cbd5e1;
}

.sd-reason {
  font-size: 10.5px;
  font-weight: 700;
  color: #f59e0b;
}

.sd-actions {
  display: flex;
  gap: 8px;
}

.sd-actions .btn {
  flex: 1 1 0;
  min-height: 44px;
}

.star-effect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-talents-reset.is-armed {
  border-color: #ef4444;
  color: #fecaca;
}

/* ===== 结算页本局战果 ===== */
.result-meta-block {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-meta-block .rm-title {
  font-size: 12px;
  font-weight: 900;
  color: #fef08a;
}

.result-meta-block .rm-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.result-meta-block .rm-chip {
  font-size: 10.5px;
  font-weight: 700;
  color: #f8fafc;
  padding: 2px 7px;
  background: rgba(245, 158, 11, 0.16);
  border-radius: 4px;
}

.result-meta-block .rm-chip--repeat {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.16);
}

.result-meta-block .rm-note {
  font-size: 10px;
  color: #94a3b8;
}

/* ===== 成就分类与进度（screen-achievements） ===== */
.achv-cat-row {
  /* 横向滚动容器在纵向 flex 父级里 min-height 会归零，必须禁止收缩 */
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.achv-cat-chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px;
}

.achv-cat-chip.is-active {
  color: #020617;
  background: #38bdf8;
  border-color: #38bdf8;
}

.achv-card-modern .achv-status {
  flex-shrink: 0;
  white-space: nowrap;
}

.achv-flavor {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.45;
  color: #fbbf24;
  opacity: 0.85;
}

.achv-progress {
  height: 4px;
  margin-top: 5px;
  background: rgba(2, 6, 23, 0.8);
  border-radius: 2px;
  overflow: hidden;
}

.achv-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00f0ff, #fbbf24);
}

.achv-progress-text {
  margin-top: 2px;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  color: #94a3b8;
}

/* 疾羽教学关：DOM 通讯小窗（由 browser-main.js 订阅 tutorialLine 挂到 #game-shell；不交互、不拦截触摸）
   位置在顶部 HUD（生命与经验条到 y≈137）下方；comic 与 obsidian 两套方案各一组 */
#tutorial-comm {
  position: absolute;
  top: 142px;
  left: 12px;
  right: 12px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 56px;
  max-height: 84px;
  padding: 10px;
  overflow: hidden;
  color: #ffffff;
  pointer-events: none;
  animation: tutorialCommIn 0.2s ease-out;
}

#tutorial-comm.is-shop {
  top: 6px;
}

#tutorial-comm.is-leaving {
  opacity: 0;
  transition: opacity 0.2s linear;
}

#tutorial-comm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: 2px;
  background: #2fd6a3;
}

.tutorial-comm-avatar {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: #071c1c;
}

.tutorial-comm-avatar img {
  position: absolute;
  max-width: none;
  height: auto;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}

.tutorial-comm-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

@keyframes tutorialCommIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #tutorial-comm { animation: none; }
}

/* 方案 D（漫画）：3px 黑框直角 + 硬阴影 */
#game-shell[data-ui-scheme="comic"] #tutorial-comm,
#game-shell:not([data-ui-scheme="obsidian"]) #tutorial-comm {
  background: #111422;
  border: 3px solid #000000;
  border-radius: 0;
  box-shadow: 5px 5px 0 #000000;
}

#game-shell[data-ui-scheme="comic"] .tutorial-comm-avatar,
#game-shell:not([data-ui-scheme="obsidian"]) .tutorial-comm-avatar {
  border: 2px solid #000000;
  border-radius: 0;
}

/* 方案 A（极简黑曜石）：1px 微光边框 + 8px 圆角 + 毛玻璃 */
#game-shell[data-ui-scheme="obsidian"] #tutorial-comm {
  background: rgba(8, 18, 24, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(47, 214, 163, 0.5);
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(47, 214, 163, 0.18);
}

#game-shell[data-ui-scheme="obsidian"] .tutorial-comm-avatar {
  border: 1px solid rgba(47, 214, 163, 0.6);
  border-radius: 6px;
}

/* 新手序章：整屏由 Canvas 绘制，画布需要独占触摸与长按（禁止滚动、长按菜单与文字选中） */
#game-shell.prologue-active #game-canvas {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}