/* ==========================================================================
   Chronicles of Guan Yu (三國志關羽傳) — 2D Historical Action & Tactical RPG
   Aesthetic Direction: Classical Han Dynasty Ink-Wash (水墨丹青) & Jade/Bronze
   ========================================================================== */

:root {
  --bg-obsidian: #0f0e0d;
  --bg-ink-surface: #191715;
  --bg-scroll-panel: #221e1b;
  --bg-parchment-tint: rgba(235, 224, 206, 0.06);

  --text-parchment: #f3ece0;
  --text-silk: #f4ead5;
  --text-muted-silk: #b8ab99;
  --text-dim: #847869;

  --jade-primary: #1e6b43;
  --jade-bright: #34d399;
  --jade-glow: rgba(52, 211, 153, 0.28);

  --gold-imperial: #d4af37;
  --gold-bright: #fbbf24;
  --cinnabar-seal: #b91c1c;
  --cinnabar-bright: #ef4444;

  --border-bronze: rgba(212, 175, 55, 0.32);
  --border-subtle: rgba(243, 236, 224, 0.12);

  --focus-ring: 0 0 0 2px rgba(15, 14, 13, 0.95), 0 0 0 4px #fbbf24;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-elevated: 0 18px 42px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.6);

  --font-display: 'Cinzel', 'Noto Serif TC', 'Songti SC', serif;
  --font-body: 'Plus Jakarta Sans', 'Noto Sans TC', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-obsidian);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(30, 107, 67, 0.18), transparent 42%),
    radial-gradient(circle at 82% 16%, rgba(185, 28, 28, 0.14), transparent 45%),
    linear-gradient(180deg, #0d0c0b 0%, #171412 100%);
  color: var(--text-parchment);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Top Imperial Header & Controls */
.imperial-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: rgba(20, 18, 16, 0.92);
  border-bottom: 1px solid var(--border-bronze);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
  gap: 16px;
  flex-wrap: wrap;
}

.brand-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cinnabar-seal-stamp {
  background: var(--cinnabar-seal);
  color: #fff5f5;
  border: 2px solid #fca5a5;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 4px 8px;
  letter-spacing: 1px;
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.45);
}

.brand-titles h1 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
}

.brand-titles p {
  font-size: 0.76rem;
  color: var(--text-muted-silk);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.imperial-btn {
  background: linear-gradient(180deg, #2a2521 0%, #1c1816 100%);
  color: var(--text-parchment);
  border: 1px solid var(--border-bronze);
  padding: 7px 13px;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.16s ease, background 0.16s ease;
}

.imperial-btn:hover:not(:disabled) {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, #352f29 0%, #241f1c 100%);
  transform: translateY(-1px);
}

.imperial-btn.primary-jade {
  background: linear-gradient(180deg, #1e6b43 0%, #13462c 100%);
  border-color: var(--jade-bright);
  color: #ecfdf5;
}

.imperial-btn.active-toggle {
  background: linear-gradient(180deg, #92400e 0%, #78350f 100%);
  border-color: var(--gold-bright);
  color: #fef3c7;
}

/* 9-Chapter Chronological Syllabus Strip */
.chapter-syllabus-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: rgba(15, 14, 13, 0.88);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.chapter-pill {
  background: rgba(34, 30, 27, 0.85);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted-silk);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.chapter-pill .ch-num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold-imperial);
}

.chapter-pill:hover {
  border-color: var(--gold-imperial);
  color: var(--text-parchment);
}

.chapter-pill.current {
  background: linear-gradient(90deg, rgba(30, 107, 67, 0.45), rgba(34, 30, 27, 0.95));
  border-color: var(--jade-bright);
  color: #ffffff;
  box-shadow: 0 0 12px var(--jade-glow);
}

.chapter-pill.completed .ch-num::after {
  content: ' ✓';
  color: var(--jade-bright);
}

/* Main Stage Layout */
.game-workspace {
  max-width: 1120px;
  width: 100%;
  margin: 10px auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Compact Single-Line Stage Context Ribbon */
.stage-context-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(25, 22, 19, 0.92);
  border: 1px solid var(--border-bronze);
  border-radius: 6px;
  padding: 6px 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.stage-titles-inline,
.stage-ribbon-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

.stage-cn-badge {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--gold-bright);
  letter-spacing: 0.03em;
}

.stage-sub-pill {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-parchment);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.28);
  padding: 2px 9px;
  border-radius: 999px;
}

.stage-divider {
  color: var(--text-dim);
}

.stage-en-sub {
  color: var(--text-parchment);
  font-weight: 600;
}

.stage-loc-tag {
  color: var(--text-muted-silk);
  font-size: 0.78rem;
}

.stage-badges-inline,
.stage-ribbon-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.75rem;
}

.stage-obj-pill {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  font-weight: 600;
  color: #fde68a;
  background: rgba(120, 53, 15, 0.38);
  border: 1px solid rgba(251, 191, 36, 0.35);
  padding: 2px 9px;
  border-radius: 999px;
}

.aging-era-pill {
  background: rgba(30, 107, 67, 0.3);
  border: 1px solid var(--jade-bright);
  color: #a7f3d0;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.mechanic-callout {
  font-size: 0.75rem;
  color: var(--gold-bright);
  font-family: var(--font-mono);
}

/* Live Combat HUD Overlay & 3D Beveled Canvas Frame */
.canvas-stage-wrapper {
  position: relative;
  border: 2px solid var(--gold-imperial);
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #1c1814 0%, #0e0b09 100%);
  transform-style: preserve-3d;
  perspective: 1400px;
  box-shadow:
    0 28px 68px rgba(0, 0, 0, 0.94),
    0 10px 24px rgba(0, 0, 0, 0.82),
    0 0 38px rgba(212, 175, 55, 0.24),
    inset 0 2px 1px rgba(254, 240, 138, 0.58),
    inset 0 -3px 6px rgba(0, 0, 0, 0.9),
    inset 0 0 34px rgba(0, 0, 0, 0.78);
}

.canvas-stage-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 10px;
  box-shadow:
    inset 0 0 42px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 251, 235, 0.25);
  z-index: 2;
}

#battle-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  filter: contrast(1.04) saturate(1.08);
}

.combat-hud-overlay {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  gap: 8px;
  z-index: 4;
}

.hero-vitals-card {
  background: linear-gradient(165deg, rgba(28, 24, 20, 0.88) 0%, rgba(12, 10, 9, 0.84) 100%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.78);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.78),
    0 3px 0 rgba(120, 83, 18, 0.65),
    inset 0 1px 0 rgba(254, 243, 199, 0.35),
    inset 0 0 14px rgba(212, 175, 55, 0.1);
  border-radius: 8px;
  padding: 6px 9px;
  width: 268px;
  max-width: 268px;
  transform: translateZ(16px);
}

.hud-vitals-layout {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hud-portrait-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-bright);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.3), inset 0 0 5px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  flex-shrink: 0;
  background: #14110f;
}

.hud-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.hud-vitals-bars {
  flex: 1;
  min-width: 0;
}

.vitals-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.hero-name-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--gold-bright);
  white-space: nowrap;
}

.fsm-badge {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  background: rgba(52, 211, 153, 0.16);
  color: var(--jade-bright);
  border: 1px solid var(--jade-bright);
  padding: 0 4px;
  border-radius: 3px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
  font-size: 0.6rem;
}

.bar-label {
  width: 26px;
  font-family: var(--font-mono);
  color: var(--text-muted-silk);
}

.bar-track {
  flex: 1;
  height: 6px;
  background: rgba(10, 8, 7, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.88);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  transition: width 0.12s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.bar-fill.hp {
  background: linear-gradient(90deg, #15803d, #22c55e, #86efac);
}

.bar-fill.stamina {
  background: linear-gradient(90deg, #b45309, #f59e0b, #fde047);
}

.bar-fill.exp {
  background: linear-gradient(90deg, #1d4ed8, #3b82f6, #93c5fd);
}

.hud-right-metrics {
  background: linear-gradient(165deg, rgba(28, 24, 20, 0.88) 0%, rgba(12, 10, 9, 0.84) 100%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.78);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.78),
    0 3px 0 rgba(120, 83, 18, 0.65),
    inset 0 1px 0 rgba(254, 243, 199, 0.32);
  border-radius: 8px;
  padding: 5px 10px;
  text-align: right;
  font-size: 0.64rem;
  transform: translateZ(16px);
}

.hud-special-metric {
  font-family: var(--font-mono);
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 0.68rem;
  margin-bottom: 1px;
}

.hud-objective-mini {
  color: var(--text-muted-silk);
  font-size: 0.58rem;
  max-width: 215px;
  line-height: 1.25;
}

/* Tactical & Action Skill Bar */
.tactical-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(36, 31, 26, 0.96) 0%, rgba(18, 15, 13, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.55);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(254, 243, 199, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.85);
  border-radius: 8px;
  padding: 10px 14px;
  gap: 10px;
  flex-wrap: wrap;
}

.skill-buttons-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.skill-btn {
  background: linear-gradient(180deg, #383028 0%, #1e1915 56%, #110e0c 100%);
  border: 1px solid rgba(212, 175, 55, 0.58);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.78),
    0 3px 0 #5b4319,
    inset 0 1px 0 rgba(254, 243, 199, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.75);
  color: var(--text-parchment);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 132px;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.16s ease, box-shadow 0.16s ease;
}

.skill-btn:hover {
  border-color: var(--jade-bright);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.85),
    0 4px 0 #065f46,
    0 0 18px rgba(52, 211, 153, 0.34),
    inset 0 1px 0 rgba(167, 243, 208, 0.55);
  transform: translateY(-3px);
}

.skill-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.75),
    0 1px 0 #065f46,
    inset 0 1px 2px rgba(0, 0, 0, 0.65);
}

.skill-btn.locked-skill {
  opacity: 0.48;
  border-style: dashed;
}

.skill-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-bright);
  margin-bottom: 2px;
}

.skill-cd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--jade-bright);
}

.skill-sub {
  font-size: 0.7rem;
  color: var(--text-muted-silk);
}

.controls-legend {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  color: var(--text-muted-silk);
  line-height: 1.45;
}

/* Modals (Historical Prelude, Reflection, Character Sheet, DB Inspector) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 7, 6, 0.84);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-backdrop.hidden {
  display: none;
}

.imperial-modal {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.1), transparent 55%),
    linear-gradient(180deg, #25201c 0%, #151210 100%);
  border: 2px solid var(--gold-imperial);
  outline: 1px solid rgba(212, 175, 55, 0.32);
  outline-offset: -6px;
  border-radius: 10px;
  max-width: 980px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 24px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.9), 0 0 36px rgba(212, 175, 55, 0.12);
}

.vs-showcase-modal {
  max-width: 820px;
  padding: 18px 22px;
}

.vs-modal-top {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid var(--border-bronze);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.vs-header-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.modal-header-tag {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--jade-bright);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.32rem;
  color: var(--gold-bright);
  margin: 0;
}

/* 3-Column 3D Sculpted Visual Matchup Showcase */
.vs-matchup-grid {
  display: grid;
  grid-template-columns: 196px 1fr 196px;
  gap: 18px;
  align-items: center;
  perspective: 1100px;
}

.portrait-frame {
  position: relative;
  background:
    radial-gradient(circle at 50% 18%, rgba(52, 211, 153, 0.16) 0%, transparent 62%),
    linear-gradient(165deg, #27201a 0%, #15110e 58%, #0b0907 100%);
  border: 2px solid rgba(250, 204, 21, 0.78);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.88),
    0 6px 0 rgba(120, 83, 18, 0.65),
    0 0 26px rgba(16, 185, 129, 0.18),
    inset 0 2px 1px rgba(254, 249, 195, 0.42),
    inset 0 -3px 8px rgba(0, 0, 0, 0.85);
  border-radius: 12px;
  padding: 11px 10px 12px;
  text-align: center;
  transform: rotateY(6deg) translateZ(8px);
  transform-style: preserve-3d;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 9px;
  border: 1px solid rgba(254, 240, 138, 0.24);
  pointer-events: none;
}

.portrait-frame:hover {
  transform: rotateY(0deg) translateY(-4px) translateZ(14px);
  box-shadow:
    0 24px 46px rgba(0, 0, 0, 0.92),
    0 8px 0 rgba(146, 100, 22, 0.75),
    0 0 34px rgba(52, 211, 153, 0.28),
    inset 0 2px 2px rgba(254, 249, 195, 0.55);
}

.portrait-frame.rival-side {
  background:
    radial-gradient(circle at 50% 18%, rgba(239, 68, 68, 0.2) 0%, transparent 62%),
    linear-gradient(165deg, #2a1818 0%, #160d0d 58%, #0b0707 100%);
  border-color: rgba(248, 113, 113, 0.78);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.88),
    0 6px 0 rgba(127, 29, 29, 0.72),
    0 0 26px rgba(239, 68, 68, 0.22),
    inset 0 2px 1px rgba(254, 202, 202, 0.36),
    inset 0 -3px 8px rgba(0, 0, 0, 0.88);
  transform: rotateY(-6deg) translateZ(8px);
}

.portrait-frame.rival-side::before {
  border-color: rgba(252, 165, 165, 0.22);
}

.portrait-frame.rival-side:hover {
  transform: rotateY(0deg) translateY(-4px) translateZ(14px);
  box-shadow:
    0 24px 46px rgba(0, 0, 0, 0.92),
    0 8px 0 rgba(153, 27, 27, 0.82),
    0 0 34px rgba(239, 68, 68, 0.34),
    inset 0 2px 2px rgba(254, 202, 202, 0.48);
}

.portrait-frame canvas,
.rival-portrait-img {
  width: 170px;
  height: 218px;
  object-fit: cover;
  object-position: center 14%;
  border-radius: 8px;
  border: 2px solid rgba(250, 204, 21, 0.65);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.85),
    0 0 16px rgba(212, 175, 55, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: block;
  margin: 0 auto;
  filter: contrast(1.06) saturate(1.1);
}

.portrait-frame.rival-side .rival-portrait-img {
  border-color: rgba(248, 113, 113, 0.68);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(239, 68, 68, 0.26),
    inset 0 1px 0 rgba(254, 202, 202, 0.25);
}

.portrait-name-plate {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 900;
  color: #fef08a;
  margin-top: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.16), transparent);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(250, 204, 21, 0.35);
  letter-spacing: 0.05em;
}

.portrait-name-plate.rival-plate {
  color: #fecaca;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.18), transparent);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(239, 68, 68, 0.4);
}

.portrait-caption {
  font-size: 0.73rem;
  color: #cbd5e1;
  margin-top: 3px;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.vs-center-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.14) 0%, transparent 65%),
    linear-gradient(180deg, rgba(26, 22, 18, 0.88) 0%, rgba(12, 10, 8, 0.94) 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.42);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(254, 240, 138, 0.26),
    inset 0 -2px 8px rgba(0, 0, 0, 0.85);
  border-radius: 12px;
  padding: 18px 20px;
}

.vs-duel-divider {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vs-duel-line {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.72), transparent);
}

.vs-duel-badge {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.14em;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(161, 98, 7, 0.45) 0%, rgba(69, 26, 3, 0.75) 100%);
  border: 1.5px solid rgba(250, 204, 21, 0.65);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(254, 249, 195, 0.35);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.concise-story-hook {
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--text-parchment);
  margin: 0;
  text-align: center;
}

.compact-challenge-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #a7f3d0;
  background: rgba(30, 107, 67, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.35);
  padding: 7px 12px;
  border-radius: 6px;
  text-align: center;
}

.challenge-tag {
  font-weight: 800;
  color: #fde047;
  white-space: nowrap;
}

.vs-action-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.vs-equip-btn {
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: rgba(24, 20, 16, 0.85);
  color: #fde047;
  border-radius: 8px;
}

.historical-codex-drawer {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 0.74rem;
  text-align: center;
}

.historical-codex-drawer summary {
  cursor: pointer;
  color: var(--text-muted-silk);
  font-weight: 600;
  user-select: none;
  transition: color 0.15s ease;
}

.historical-codex-drawer summary:hover {
  color: var(--gold-bright);
}

.codex-drawer-body {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-muted-silk);
  line-height: 1.45;
  text-align: left;
  max-height: 150px;
  overflow-y: auto;
}

/* Ornate Imperial Seal Command Button (出陣迎敵) */
.modal-command-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 175, 55, 0.24);
}

.imperial-command-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #14532d 0%, #064e3b 55%, #0f291e 100%);
  border: 2px solid var(--gold-bright);
  border-radius: 8px;
  padding: 10px 22px 10px 14px;
  color: var(--text-parchment);
  cursor: pointer;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.75),
    0 0 20px rgba(52, 211, 153, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.imperial-command-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.85),
    0 0 28px rgba(251, 191, 36, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.imperial-command-btn:active {
  transform: translateY(0);
}

.cmd-seal {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
  border: 1.5px solid #fde047;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  color: #fff5f5;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.cmd-text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.cmd-main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
}

.cmd-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #a7f3d0;
  letter-spacing: 0.05em;
}

.historical-section {
  background: var(--bg-parchment-tint);
  border-left: 3px solid var(--gold-imperial);
  padding: 10px 14px;
  border-radius: 0 5px 5px 0;
  margin-bottom: 10px;
}

.historical-section h4 {
  font-family: var(--font-display);
  font-size: 0.84rem;
  color: var(--gold-bright);
  margin-bottom: 4px;
}

.historical-section p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-parchment);
}

.historical-section.jade-accent {
  border-left-color: var(--jade-bright);
}

/* Character & Inventory Sheet Grid */
.char-sheet-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 10px 0;
}

.stat-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
  padding: 8px 10px;
  border-radius: 4px;
}

.stat-box span {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted-silk);
}

.stat-box strong {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--gold-bright);
}

.forge-panel {
  background: rgba(30, 107, 67, 0.14);
  border: 1px solid var(--jade-bright);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.mat-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.76rem;
  color: var(--text-muted-silk);
  margin: 8px 0 10px;
}

.gear-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.gear-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  padding: 9px 11px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.gear-card.equipped {
  border-color: var(--jade-bright);
  background: rgba(30, 107, 67, 0.22);
}

.gear-card.locked {
  opacity: 0.45;
  cursor: default;
}

.gear-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--gold-bright);
  margin-bottom: 4px;
}

.gear-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--jade-bright);
}

.gear-stats {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.gear-lore {
  font-size: 0.72rem;
  color: var(--text-muted-silk);
  line-height: 1.35;
}

/* Streamlined Post-Battle Victory Modal */
.victory-compact-modal {
  max-width: 600px;
  padding: 20px 24px;
}

.victory-lore-card {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--jade-bright);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.victory-outcome-text {
  margin: 0 0 8px 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-parchment);
}

.victory-quote-line {
  font-size: 0.78rem;
  font-style: italic;
  color: #a7f3d0;
  opacity: 0.92;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 6px;
}

.victory-rewards-strip {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.victory-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.victory-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-parchment);
}

.victory-pill small {
  font-weight: 500;
  opacity: 0.8;
}

.victory-pill.exp {
  border-color: rgba(96, 165, 250, 0.45);
  color: #93c5fd;
}

.victory-pill.gold {
  border-color: rgba(251, 191, 36, 0.5);
  color: #fde047;
}

.victory-pill.jade {
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

.victory-loot-line {
  font-size: 0.82rem;
  color: #f8fafc;
  line-height: 1.45;
}

.victory-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.code-inspector {
  background: #0b0a09;
  border: 1px solid var(--border-subtle);
  padding: 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #a7f3d0;
  max-height: 420px;
  overflow: auto;
}

@media (max-width: 768px) {
  .prelude-grid,
  .char-sheet-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ==========================================================================
   ARPG Loot Drop, Level-Up Attribute Allocation & 6-Slot Inventory System
   ========================================================================== */

.hud-gs-pill {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid var(--gold-bright);
  color: var(--gold-bright);
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 3px;
}

.hud-rpg-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hud-stat-chip {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted-silk);
  padding: 1px 4px;
  border-radius: 3px;
}

.hud-stat-chip b {
  color: var(--text-parchment);
}

.hud-stat-chip.crit b {
  color: #fbbf24;
}

.hud-stat-chip.double b {
  color: #f87171;
}

.hud-stat-chip.mount b {
  color: #34d399;
}

.hud-stat-alloc-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 3px;
  padding: 2px 5px;
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.22), rgba(30, 107, 67, 0.22));
  border: 1px solid var(--gold-bright);
  border-radius: 4px;
  pointer-events: auto;
}

.hud-stat-alloc-strip.hidden {
  display: none;
}

.unspent-badge {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--gold-bright);
}

.hud-alloc-btns {
  display: flex;
  gap: 3px;
}

.hud-alloc-btn {
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
  border: 1px solid #fde047;
  color: #fef9c3;
  font-size: 0.56rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  cursor: pointer;
  pointer-events: auto;
}

.hud-alloc-btn:hover {
  filter: brightness(1.18);
  transform: translateY(-1px);
}

.hud-right-cluster {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: 225px;
}

.hud-loot-feed {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  pointer-events: none;
}

.loot-toast-card {
  background: rgba(12, 10, 9, 0.82);
  border-left: 3px solid var(--gold-bright);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 3px 7px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65);
  font-size: 0.6rem;
  line-height: 1.25;
  animation: toastSlideIn 0.22s ease-out;
  transition: opacity 0.3s ease;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.gs-header-badge {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid var(--gold-bright);
  color: var(--gold-bright);
  padding: 5px 11px;
  border-radius: 5px;
}

/* Attribute Allocation Panel inside Character Sheet */
.attr-allocation-panel {
  background: rgba(20, 17, 15, 0.85);
  border: 1px solid var(--gold-imperial);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
}

.attr-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-bright);
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-subtle);
}

.unspent-pill {
  background: rgba(245, 158, 11, 0.22);
  border: 1px solid var(--gold-bright);
  color: #fef08a;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 4px;
}

.attr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.attr-info strong {
  display: block;
  font-size: 0.78rem;
  color: var(--text-parchment);
}

.attr-info small {
  font-size: 0.66rem;
  color: var(--text-muted-silk);
}

.attr-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.attr-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--jade-bright);
  min-width: 28px;
  text-align: right;
}

.attr-plus-btn {
  background: linear-gradient(180deg, #d97706 0%, #92400e 100%);
  border: 1px solid #fde047;
  color: #ffffff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.74rem;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
}

.attr-plus-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* 6-Slot Equipped Loadout & Dropped Loot Bag Grids */
.equipped-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.loot-bag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.arpg-item-card {
  background: linear-gradient(180deg, rgba(30, 26, 23, 0.95) 0%, rgba(16, 14, 12, 0.98) 100%);
  border: 1.5px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  position: relative;
}

.arpg-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.65);
}

.arpg-item-card.rarity-common {
  border-color: rgba(203, 213, 225, 0.45);
}

.arpg-item-card.rarity-rare {
  border-color: #38bdf8;
  box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.12);
}

.arpg-item-card.rarity-epic {
  border-color: #c084fc;
  box-shadow: inset 0 0 14px rgba(192, 132, 252, 0.16);
}

.arpg-item-card.rarity-legendary {
  border-color: #fbbf24;
  background: linear-gradient(180deg, rgba(55, 36, 14, 0.92) 0%, rgba(20, 15, 11, 0.98) 100%);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.22), inset 0 0 16px rgba(251, 191, 36, 0.18);
}

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

.arpg-item-title {
  font-weight: 700;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.arpg-item-gs {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 6px;
  border-radius: 3px;
  color: #fef08a;
}

.arpg-item-affixes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.affix-pill {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  color: #e2e8f0;
}

.affix-pill.highlight {
  background: rgba(251, 191, 36, 0.16);
  color: #fde047;
  border: 1px solid rgba(251, 191, 36, 0.35);
}

/* ============================================================================
   REFERENCE-STYLE 10-SLOT PAPER-DOLL EQUIPMENT STAGE
   ============================================================================ */
.hud-equip-quick-btn {
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 0.64rem;
  font-weight: 800;
  color: #ecfdf5;
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  border: 1px solid #4ade80;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.45);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.hud-equip-quick-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

.paperdoll-modal-shell {
  width: min(980px, 95vw);
  max-height: 90vh;
  background: radial-gradient(circle at 32% 40%, #0d2b2e 0%, #09181b 55%, #070d10 100%);
  border: 2px solid #c99d45;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.92), inset 0 0 32px rgba(16, 185, 129, 0.12);
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.paperdoll-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201, 157, 69, 0.35);
}

.paperdoll-top-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fde68a;
  font-size: 0.95rem;
}

.paperdoll-seal {
  background: linear-gradient(180deg, #dc2626, #991b1b);
  color: #fff;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #fca5a5;
  font-size: 0.78rem;
}

.paperdoll-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.paperdoll-layout-grid {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 880px) {
  .paperdoll-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Left Half: Exact Reference Paper-Doll Stage */
.paperdoll-stage-box {
  position: relative;
  height: 495px;
  border-radius: 8px;
  border: 2px solid rgba(201, 157, 69, 0.65);
  background: radial-gradient(circle at 50% 48%, #13393e 0%, #0a1f24 62%, #051114 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  user-select: none;
}

.paperdoll-bg-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.paperdoll-hero-3d-img {
  width: 88%;
  height: 92%;
  object-fit: contain;
  object-position: center 42%;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.9)) contrast(1.06) saturate(1.08);
}

.paperdoll-stage-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, transparent 38%, rgba(4, 12, 15, 0.62) 86%),
    linear-gradient(180deg, rgba(4, 12, 15, 0.35) 0%, transparent 22%, transparent 76%, rgba(4, 12, 15, 0.78) 100%);
}

/* Top-Left Forge Hammer Button (exact reference position) */
.paperdoll-hammer-btn {
  position: absolute;
  top: 14px;
  left: 92px;
  z-index: 4;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #f59e0b;
  background: radial-gradient(circle at 35% 30%, #451a03 0%, #1c1917 85%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85), 0 0 12px rgba(245, 158, 11, 0.45);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.paperdoll-hammer-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.8);
}

.hammer-icon {
  font-size: 1.25rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

.hammer-sub {
  font-size: 0.54rem;
  font-weight: 900;
  color: #fde68a;
  margin-top: -1px;
}

/* Top-Right Vertical Calligraphy Title ("武聖" like "七殺" in reference) */
.paperdoll-class-calligraphy {
  position: absolute;
  top: 14px;
  right: 90px;
  z-index: 3;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #facc15;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 12px rgba(234, 179, 8, 0.55);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.25));
  padding: 8px 5px;
  border-radius: 6px;
  border-right: 2px solid rgba(250, 204, 21, 0.45);
  pointer-events: none;
}

/* Left & Right 5-Slot Columns */
.paperdoll-slot-column {
  position: absolute;
  top: 14px;
  bottom: 58px;
  width: 68px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.paperdoll-col-left {
  left: 12px;
}

.paperdoll-col-right {
  right: 12px;
}

/* Individual Square Equipment Slot (matching reference purple/gold bevel box) */
.paperdoll-slot-box {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 7px;
  background: radial-gradient(circle at 50% 42%, #3b1d5e 0%, #1e1035 65%, #110920 100%);
  border: 2px solid #a855f7;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.85),
    inset 0 0 10px rgba(168, 85, 247, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.paperdoll-slot-box.rarity-legendary {
  background: radial-gradient(circle at 50% 42%, #5c2d0c 0%, #2e1505 68%, #180a02 100%);
  border-color: #f59e0b;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.88),
    inset 0 0 12px rgba(245, 158, 11, 0.52);
}

.paperdoll-slot-box.rarity-rare {
  background: radial-gradient(circle at 50% 42%, #13385c 0%, #0b1e36 68%, #06101f 100%);
  border-color: #38bdf8;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.85),
    inset 0 0 10px rgba(56, 189, 248, 0.4);
}

.paperdoll-slot-box:hover,
.paperdoll-slot-box.selected-slot {
  transform: scale(1.06);
  border-color: #fde047;
  box-shadow:
    0 0 14px rgba(250, 204, 21, 0.85),
    inset 0 0 14px rgba(250, 204, 21, 0.55);
}

.paperdoll-slot-svg,
.paperdoll-slot-canvas {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.92));
  pointer-events: none;
  border-radius: 5px;
}

.paperdoll-slot-name-tag {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 0.54rem;
  font-weight: 700;
  color: rgba(245, 222, 179, 0.92);
  background: rgba(8, 7, 5, 0.72);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(180, 146, 90, 0.28);
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
  z-index: 4;
}

.paperdoll-slot-score-tag {
  position: absolute;
  top: 2px;
  right: 3px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 800;
  color: #4ade80;
  background: rgba(0, 0, 0, 0.68);
  padding: 0 3px;
  border-radius: 3px;
  border: 1px solid rgba(74, 222, 128, 0.45);
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
  z-index: 4;
}

/* Bottom-Left Green Up-Arrow (exact match to yellow box in reference image!) */
.slot-up-arrow {
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #bbf7d0;
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 55%, #14532d 100%);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 8px rgba(74, 222, 128, 0.75);
  cursor: pointer;
  z-index: 5;
  padding: 0;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.slot-up-arrow:hover {
  transform: scale(1.2);
  filter: brightness(1.2);
}

.slot-up-arrow.has-bag-upgrade {
  animation: pulseGreenUpgrade 1.2s infinite alternate;
}

@keyframes pulseGreenUpgrade {
  0% {
    box-shadow: 0 0 4px rgba(74, 222, 128, 0.6);
  }
  100% {
    box-shadow: 0 0 12px rgba(74, 222, 128, 1), 0 0 4px #ffffff;
  }
}

/* Bottom-Right Gold "+7" Enhancement Level Badge (exact match to reference image!) */
.slot-plus-badge {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 900;
  color: #facc15;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 6px rgba(250, 204, 21, 0.75);
  pointer-events: none;
  z-index: 4;
}

/* Bottom-Center Hexagonal Beveled Combat Power Plaque ("戰鬥力 | 13106") */
.paperdoll-cp-plaque {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: stretch;
  border: 2px solid #d97706;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.95), 0 0 15px rgba(217, 119, 6, 0.45);
  min-width: 248px;
}

.cp-plaque-label {
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
  color: #fef3c7;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 2px;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 2px solid #f59e0b;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.cp-plaque-value {
  flex: 1;
  background: linear-gradient(180deg, #27272a 0%, #09090b 100%);
  color: #facc15;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 2px 6px rgba(250, 204, 21, 0.55);
}

/* Right Half: Selected Slot Card, Stats & Loot Bag */
.paperdoll-side-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.paperdoll-selected-card {
  background: linear-gradient(135deg, rgba(30, 16, 53, 0.9) 0%, rgba(15, 23, 42, 0.92) 100%);
  border: 1px solid rgba(168, 85, 247, 0.65);
  border-radius: 8px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.paperdoll-selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.paperdoll-enhance-btn {
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid #86efac;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.75rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.5);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.paperdoll-enhance-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.paperdoll-stats-strip {
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(201, 157, 69, 0.28);
  border-radius: 7px;
  padding: 8px 10px;
}

.paperdoll-bag-box {
  flex: 1;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(201, 157, 69, 0.28);
  border-radius: 7px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ============================================================================
   Prominent Equipment Entry Points & High-Detail 3D Artifact Slots
   ============================================================================ */

/* Topbar & Prelude Prominent Golden-Jade Equipment CTA */
.imperial-btn.equip-cta-topbar {
  background: linear-gradient(135deg, #065f46 0%, #047857 48%, #b45309 100%);
  border: 1.5px solid #fde047;
  color: #fef9c3;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow:
    0 0 14px rgba(250, 204, 21, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: equipCtaPulse 2.2s infinite ease-in-out;
}

.imperial-btn.equip-cta-topbar:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: #ffffff;
  box-shadow:
    0 0 20px rgba(250, 204, 21, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

@keyframes equipCtaPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.75), 0 0 8px rgba(250, 204, 21, 0.65);
  }
}

/* Top-Left HUD Live Equipment Quick-Bar */
.hud-live-equip-bar {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(250, 204, 21, 0.28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  pointer-events: auto;
}

.hud-mini-equip-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hud-mini-slot {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: radial-gradient(circle at 50% 40%, #2e1505 0%, #0f0702 100%);
  border: 1.5px solid #f59e0b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), inset 0 0 6px rgba(245, 158, 11, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.hud-mini-slot:hover {
  transform: scale(1.12);
  border-color: #fde047;
}

.hud-mini-slot canvas {
  width: 28px;
  height: 28px;
  display: block;
}

.hud-mini-slot-plus {
  position: absolute;
  right: 1px;
  bottom: 0px;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 900;
  color: #fde047;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  pointer-events: none;
}

.hud-prominent-equip-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1.5px solid #fbbf24;
  background: linear-gradient(135deg, #065f46 0%, #047857 55%, #92400e 100%);
  color: #fef08a;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 10px rgba(251, 191, 36, 0.35);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.hud-prominent-equip-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.14);
}

.equip-btn-shine {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fef9c3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

.hud-prominent-equip-btn small {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: #a7f3d0;
}

/* Bottom Action Dock Primary Weapon & Equipment Button */
.skill-btn.equip-dock-primary-btn {
  background: linear-gradient(135deg, #2e1505 0%, #451a03 52%, #064e3b 100%);
  border: 2px solid #f59e0b;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.85),
    0 0 14px rgba(245, 158, 11, 0.45),
    inset 0 1px 0 rgba(254, 240, 138, 0.35);
  min-width: 158px;
}

.skill-btn.equip-dock-primary-btn:hover {
  border-color: #fde047;
  box-shadow:
    0 4px 16px rgba(250, 204, 21, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
}

.equip-dock-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.equip-dock-inner canvas {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 40%, #3b1d5e 0%, #140924 100%);
  border: 1.5px solid #fbbf24;
  flex-shrink: 0;
}

.equip-dock-text {
  flex: 1;
  min-width: 0;
}

/* Character Sheet Right Panel Mini Stats & Bag Grid */
.paperdoll-mini-stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  background: rgba(6, 18, 22, 0.78);
  border: 1px solid rgba(201, 157, 69, 0.35);
  border-radius: 7px;
  padding: 6px 8px;
}

.mini-stat-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.66rem;
}

.mini-stat-pill span {
  color: var(--text-muted-silk);
}

.mini-stat-pill strong {
  font-family: var(--font-mono);
  color: var(--text-silk);
  font-size: 0.72rem;
}

.compact-bag-grid {
  max-height: 225px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding-right: 3px;
}

.selected-item-showcase {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selected-item-canvas-wrap {
  width: 66px;
  height: 66px;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, #451a03 0%, #1a0902 75%, #090401 100%);
  border: 2px solid #fbbf24;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.85), inset 0 0 12px rgba(251, 191, 36, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.selected-item-canvas-wrap canvas {
  width: 60px;
  height: 60px;
  display: block;
}

.bag-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bag-item-canvas {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 42%, #2e1505 0%, #120802 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.65);
  flex-shrink: 0;
}

/* ============================================================================
   One-Click Martial Power Auto-Equip ("武力值：高的上、低的下") Buttons & Banner
   ============================================================================ */
.auto-equip-cta-btn {
  background: linear-gradient(135deg, #065f46 0%, #047857 50%, #10b981 100%) !important;
  border: 1.5px solid #6ee7b7 !important;
  color: #ecfdf5 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.auto-equip-cta-btn:hover {
  filter: brightness(1.14);
  transform: translateY(-1px);
}

.hud-auto-equip-btn {
  background: linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%) !important;
  border: 1.5px solid #6ee7b7 !important;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.5) !important;
}

.hud-auto-equip-btn .equip-btn-shine {
  color: #ecfdf5 !important;
}

.hud-auto-equip-btn small {
  color: #fde047 !important;
}

.auto-equip-hero-btn {
  background: linear-gradient(135deg, #b45309 0%, #d97706 45%, #15803d 100%) !important;
  border: 2px solid #fde047 !important;
  color: #fffbeb !important;
  font-weight: 900 !important;
  font-size: 0.84rem !important;
  padding: 7px 14px !important;
  border-radius: 7px !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

.auto-equip-hero-btn:hover {
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.12);
  box-shadow: 0 6px 22px rgba(52, 211, 153, 0.65), 0 0 14px rgba(250, 204, 21, 0.65);
}

.full-width-auto-equip-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.9rem !important;
  padding: 9px 14px !important;
  letter-spacing: 0.5px;
}

.auto-equip-master-panel {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.65) 0%, rgba(20, 30, 48, 0.88) 100%);
  border: 1.5px solid rgba(52, 211, 153, 0.65);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auto-equip-result-banner {
  font-size: 0.7rem;
  line-height: 1.4;
  color: #e2e8f0;
  background: rgba(0, 0, 0, 0.45);
  border-left: 3px solid #34d399;
  border-radius: 4px;
  padding: 5px 8px;
}

@keyframes slotUpgradePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.9), 0 0 18px #fde047;
    transform: scale(1.06);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(74, 222, 128, 0), 0 4px 12px rgba(0, 0, 0, 0.8);
    transform: scale(1);
  }
}

.paperdoll-slot-box.slot-just-swapped {
  outline: 2.5px solid #4ade80 !important;
  animation: slotUpgradePulse 0.85s ease-out;
}

/* ============================================================================
   5-PACK ATTACK & CRITICAL STRIKE SOUND SELECTOR UI (攻擊音效試聽與選擇器)
   ============================================================================ */
.sfx-selector-cta-btn {
  background: linear-gradient(135deg, #b45309 0%, #78350f 100%) !important;
  border: 1.5px solid #fde047 !important;
  color: #fef9c3 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
}

.sfx-selector-cta-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.hud-sfx-quick-bar {
  margin-top: 5px;
  padding: 5px 7px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.88));
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 6px;
  pointer-events: auto;
}

.hud-sfx-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.hud-sfx-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #fde68a;
}

.hud-sfx-expand-btn {
  background: rgba(180, 83, 9, 0.55);
  border: 1px solid #fbbf24;
  color: #fef08a;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.hud-sfx-expand-btn:hover {
  background: rgba(217, 119, 6, 0.85);
}

.hud-sfx-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hud-sfx-pill {
  flex: 1 1 auto;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #cbd5e1;
  font-size: 0.63rem;
  font-weight: 700;
  padding: 3px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.hud-sfx-pill:hover {
  border-color: #fbbf24;
  color: #fef08a;
  background: rgba(51, 65, 85, 0.95);
}

.hud-sfx-pill.active {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: #fde047;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.55);
}

.sfx-selector-modal {
  max-width: 920px !important;
  width: 94vw !important;
}

.sfx-pack-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 10px;
}

.sfx-pack-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(30, 27, 24, 0.95));
  border: 1.5px solid rgba(251, 191, 36, 0.32);
  border-radius: 8px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;
  transition: all 0.16s ease;
}

.sfx-pack-card.active-pack {
  border: 2px solid #4ade80;
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.28);
  background: linear-gradient(145deg, rgba(6, 78, 59, 0.42), rgba(15, 23, 42, 0.95));
}

.sfx-pack-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sfx-pack-name {
  font-size: 0.88rem;
  font-weight: 800;
}

.sfx-pack-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fde68a;
  white-space: nowrap;
}

.sfx-pack-desc {
  font-size: 0.73rem;
  color: var(--text-muted-silk);
  line-height: 1.45;
  margin: 0;
}

.sfx-pack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sfx-test-btn {
  flex: 1 1 45%;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fef08a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.sfx-test-btn:hover {
  background: rgba(51, 65, 85, 1);
  border-color: #fde047;
  transform: translateY(-1px);
}

.sfx-test-btn.crit {
  background: rgba(127, 29, 29, 0.65);
  border-color: #f87171;
  color: #fecaca;
}

.sfx-test-btn.crit:hover {
  background: rgba(185, 28, 28, 0.85);
}

.sfx-apply-btn {
  flex: 1 1 100%;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  border: 1.5px solid #fde047;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.sfx-apply-btn.active {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: #86efac;
}

/* ============================================================================
   ICON-ONLY SKILL BAR & HOVER TOOLTIPS (精簡圖標戰技列 + 懸浮 Tips 說明)
   ============================================================================ */
.tactical-control-bar.icon-only-dock {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: auto;
  max-width: 96%;
  justify-content: center;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(24, 20, 17, 0.88) 0%, rgba(14, 12, 10, 0.94) 100%);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: visible;
}

.skill-buttons-group.icon-skill-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.skill-btn.skill-icon-slot {
  position: relative;
  width: 54px;
  height: 54px;
  min-width: 54px;
  padding: 0;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 36%, #31271e 0%, #16120e 78%, #0b0907 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.68);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(254, 240, 138, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  overflow: visible;
}

.skill-btn.skill-icon-slot.equip-dock-primary-btn {
  min-width: 54px;
  width: 54px;
  height: 54px;
  margin-right: 6px;
  background: radial-gradient(circle at 50% 38%, #451a03 0%, #1c0a02 68%, #064e3b 100%);
  border: 2px solid #fbbf24;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.85),
    0 0 14px rgba(245, 158, 11, 0.45),
    inset 0 1px 0 rgba(254, 240, 138, 0.4);
}

.skill-btn.skill-icon-slot:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: #fde047;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(52, 211, 153, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  z-index: 30;
}

.skill-btn.skill-icon-slot:active {
  transform: translateY(0) scale(0.97);
}

.skill-icon-graphic {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-radius: 6px;
  overflow: hidden;
  background: #0b0908;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.85);
}

.skill-icon-graphic canvas,
.skill-photo-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;
  filter: contrast(1.06) saturate(1.08);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.skill-btn.skill-icon-slot:hover .skill-photo-icon,
.skill-btn.skill-icon-slot:hover .skill-icon-graphic canvas {
  transform: scale(1.08);
  filter: contrast(1.12) saturate(1.15) brightness(1.08);
}

.skill-svg-icon {
  width: 36px;
  height: 36px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
}

/* Top-Left Hotkey Micro Badge */
.skill-key-badge {
  position: absolute;
  top: 2px;
  left: 3px;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(10, 9, 8, 0.84);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #fde68a;
  pointer-events: none;
  z-index: 3;
}

/* Cooldown / Unlock / Enhance Badge inside Icon Slot */
.skill-btn.skill-icon-slot .skill-cd {
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 3px;
  color: #4ade80;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  pointer-events: none;
  z-index: 4;
}

.skill-btn.skill-icon-slot .skill-cd:empty {
  display: none;
}

/* Active Cooldown Dark Sweep Overlay */
.skill-btn.skill-icon-slot.on-cooldown::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 6px;
  background: rgba(8, 10, 14, 0.72);
  pointer-events: none;
  z-index: 2;
}

.skill-btn.skill-icon-slot.on-cooldown .skill-cd {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  color: #fde047;
  background: transparent;
}

/* Locked Skill State */
.skill-btn.skill-icon-slot.locked-skill {
  opacity: 0.55;
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.45);
}

.skill-btn.skill-icon-slot.locked-skill .skill-icon-graphic {
  filter: grayscale(0.85) brightness(0.75);
}

.skill-btn.skill-icon-slot.locked-skill .skill-cd {
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* Floating Tooltip (Tips) on Hover / Focus */
.skill-tip-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 228px;
  padding: 9px 11px;
  border-radius: 7px;
  background: linear-gradient(165deg, rgba(22, 19, 16, 0.98) 0%, rgba(12, 16, 22, 0.98) 100%);
  border: 1.5px solid #fbbf24;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.92),
    0 0 16px rgba(251, 191, 36, 0.28);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 90;
}

.skill-tip-pop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fbbf24 transparent transparent transparent;
}

.skill-btn.skill-icon-slot:hover .skill-tip-pop,
.skill-btn.skill-icon-slot:focus-visible .skill-tip-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.tip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.26);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.tip-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: #fde047;
}

.tip-key {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: #6ee7b7;
  background: rgba(6, 78, 59, 0.55);
  border: 1px solid rgba(52, 211, 153, 0.5);
  padding: 1px 5px;
  border-radius: 4px;
}

.tip-desc {
  font-size: 0.74rem;
  font-weight: 700;
  color: #a7f3d0;
  margin-bottom: 3px;
}

.tip-sub {
  font-size: 0.68rem;
  color: var(--text-muted-silk);
  line-height: 1.4;
}

/* ============================================================================
   五銖金幣經濟系統與公開透明掉寶機率公示視窗 (Gold Economy & Drop Rate Disclosure Modal)
   ============================================================================ */
/* 24K 純金五銖錢幣立體圖標（取代 macOS 預設銀色 🪙 Emoji） */
.gold-coin-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: -2.5px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    #ffffff 0%,
    #fef08a 24%,
    #facc15 54%,
    #eab308 78%,
    #b45309 100%
  );
  border: 1.5px solid #fef08a;
  box-shadow:
    0 0 8px rgba(250, 204, 21, 0.85),
    0 1px 2px rgba(0, 0, 0, 0.75),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.9);
  position: relative;
  margin-right: 2px;
  flex-shrink: 0;
}

.gold-coin-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.5px;
  height: 4.5px;
  transform: translate(-50%, -50%);
  background: #451a03;
  border: 1px solid #fde047;
  border-radius: 1px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.imperial-gold-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(161, 98, 7, 0.92) 0%, rgba(113, 63, 18, 0.96) 55%, rgba(69, 26, 3, 0.98) 100%);
  border: 1.5px solid #fde047;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: #fef9c3;
  box-shadow:
    0 2px 12px rgba(250, 204, 21, 0.45),
    inset 0 1px 2px rgba(254, 249, 195, 0.45);
}

.imperial-gold-pill strong {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: #fef08a;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.65);
  font-weight: 800;
}

.hud-gold-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(161, 98, 7, 0.9), rgba(92, 45, 12, 0.95));
  border: 1px solid #fde047;
  color: #fef08a;
  font-size: 0.66rem;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 4px;
  font-family: var(--font-mono);
}

.drop-rate-cta-btn {
  background: linear-gradient(135deg, #0f766e 0%, #115e59 55%, #134e4a 100%) !important;
  border-color: #2dd4bf !important;
  color: #ccfbf1 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.35);
}

.drop-rate-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.6);
  border-color: #99f6e4 !important;
}

.hud-prob-quick-btn {
  background: linear-gradient(135deg, #0f766e, #115e59) !important;
  border-color: #2dd4bf !important;
  color: #ecfdf5 !important;
}

.drop-rates-modal {
  max-width: 960px !important;
  width: 95vw !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.drop-rates-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dr-summary-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 8px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
}

.dr-kpi-card {
  background: rgba(9, 13, 22, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  padding: 8px 10px;
}

.dr-kpi-label {
  font-size: 0.7rem;
  color: var(--text-muted-silk);
  margin-bottom: 3px;
}

.dr-kpi-value {
  font-family: var(--font-mono);
  font-size: 0.96rem;
  font-weight: 800;
  color: #fde047;
}

.dr-kpi-sub {
  font-size: 0.66rem;
  color: #94a3b8;
  margin-top: 2px;
}

.dr-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 820px) {
  .dr-two-col {
    grid-template-columns: 1fr;
  }
}

.dr-panel {
  background: rgba(12, 16, 24, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 8px;
  padding: 10px 12px;
}

.dr-panel h4 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: #fde047;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dr-prob-row {
  margin-bottom: 7px;
}

.dr-prob-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  margin-bottom: 3px;
}

.dr-prob-bar-bg {
  width: 100%;
  height: 8px;
  background: rgba(30, 41, 59, 0.9);
  border-radius: 999px;
  overflow: hidden;
}

.dr-prob-bar-fill {
  height: 100%;
  border-radius: 999px;
}

.dr-suppression-callout {
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.52), rgba(69, 10, 10, 0.35));
  border-left: 3px solid #f87171;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  color: #fecaca;
  line-height: 1.45;
}

.dr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
}

.dr-table th,
.dr-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  text-align: left;
}

.dr-table th {
  color: #fbbf24;
  font-weight: 700;
}

/* ============================================================================
   UI Front-End Best Practices: Accessibility, Tabular Numerals, Custom Scrollbars,
   Modal Entrance Choreography & Responsive Multi-Viewport Polish
   ============================================================================ */

/* 1. Tabular Numerals: Prevent layout jitter during 60fps HP/CD/Gold updates */
#top-gold-count,
#hud-gold-count,
#char-gold-count,
#hud-hp-text,
#hud-enemy-hp-text,
#hud-level-badge,
#hud-exp-text,
#hud-gear-score,
#char-total-gs-badge,
#paperdoll-cp-number,
.skill-cd,
.stat-chip b,
.mini-stat-pill strong,
.dr-kpi-value,
.dr-prob-header,
.dr-table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 2. High-Contrast Keyboard Focus States (:focus-visible) */
.imperial-btn:focus-visible,
.imperial-command-btn:focus-visible,
.chapter-pill:focus-visible,
.skill-btn:focus-visible,
.paperdoll-slot-box:focus-visible,
.paperdoll-hammer-btn:focus-visible,
.hud-mini-btn:focus-visible,
.attr-plus-btn:focus-visible,
.quiz-option-btn:focus-visible,
.sfx-quick-pill:focus-visible,
details.historical-codex-drawer > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}

button,
.chapter-pill,
.skill-btn,
.paperdoll-slot-box,
summary {
  touch-action: manipulation;
  user-select: none;
}

/* 3. Custom Themed Scrollbars (Dark Obsidian & Imperial Gold) */
.imperial-modal,
.chapter-syllabus-bar,
.compact-bag-grid,
.codex-drawer-body,
.code-inspector {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.45) rgba(12, 11, 10, 0.65);
}

.imperial-modal::-webkit-scrollbar,
.chapter-syllabus-bar::-webkit-scrollbar,
.compact-bag-grid::-webkit-scrollbar,
.codex-drawer-body::-webkit-scrollbar,
.code-inspector::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.imperial-modal::-webkit-scrollbar-track,
.chapter-syllabus-bar::-webkit-scrollbar-track,
.compact-bag-grid::-webkit-scrollbar-track,
.codex-drawer-body::-webkit-scrollbar-track,
.code-inspector::-webkit-scrollbar-track {
  background: rgba(12, 11, 10, 0.65);
  border-radius: 999px;
}

.imperial-modal::-webkit-scrollbar-thumb,
.chapter-syllabus-bar::-webkit-scrollbar-thumb,
.compact-bag-grid::-webkit-scrollbar-thumb,
.codex-drawer-body::-webkit-scrollbar-thumb,
.code-inspector::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.45);
  border-radius: 999px;
}

.imperial-modal::-webkit-scrollbar-thumb:hover,
.chapter-syllabus-bar::-webkit-scrollbar-thumb:hover,
.compact-bag-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(251, 191, 36, 0.78);
}

/* 4. Smooth Modal Choreography */
@keyframes modalBackdropFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalPanelPop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-backdrop:not(.hidden) {
  animation: modalBackdropFade 0.18s ease-out;
}

.modal-backdrop:not(.hidden) .imperial-modal {
  animation: modalPanelPop 0.24s var(--ease-out-expo);
}

/* 5. Streamlined HUD SFX Strip to Keep Left Battlefield Unobstructed */
.hud-sfx-quick-bar {
  margin-top: 3px !important;
  padding-top: 3px !important;
}

/* 6. Responsive Breakpoints for Tablet & Mobile Viewports */
@media (max-width: 960px) {
  .imperial-topbar {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .topbar-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .vs-matchup-grid {
    grid-template-columns: 140px 1fr 140px;
    gap: 10px;
  }

  .portrait-frame canvas,
  .rival-portrait-img {
    width: 122px;
    height: 162px;
  }

  .hero-vitals-card {
    width: 242px;
    max-width: 46vw;
  }

  .enemy-vitals-card {
    width: 196px;
    max-width: 42vw;
  }
}

@media (max-width: 680px) {
  .vs-matchup-grid {
    grid-template-columns: 1fr;
  }

  .portrait-frame {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 8px 12px;
  }

  .portrait-frame canvas,
  .rival-portrait-img {
    width: 72px;
    height: 92px;
    margin: 0;
  }

  .combat-hud-overlay {
    top: 4px;
    left: 6px;
    right: 6px;
  }

  .hero-vitals-card .hud-sfx-quick-bar,
  .hero-vitals-card .hud-live-equip-bar {
    display: none;
  }

  .compact-bag-grid {
    grid-template-columns: 1fr;
  }
}

/* 7. Reduced Motion Accessibility Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   8. Ultra-Minimalist UI Mode (極簡純淨戰場介面 — 能少則少、最大化戰場視野)
   ============================================================================ */
#btn-open-sfx-selector,
#hud-sfx-quick-bar,
.hud-sfx-quick-bar,
#modal-sfx-selector {
  display: none !important;
}

.imperial-topbar {
  padding: 5px 14px;
  min-height: 40px;
}

.brand-title {
  font-size: 1.05rem;
}

.chapter-syllabus-bar {
  padding: 4px 10px;
  gap: 6px;
}

.chapter-pill {
  padding: 4px 9px;
}

.combat-hud-overlay {
  top: 8px;
  left: 10px;
  right: 10px;
}

.hero-vitals-card {
  width: 206px;
  padding: 6px 9px;
  background: rgba(12, 11, 10, 0.56);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.hud-hero-header {
  gap: 7px;
  margin-bottom: 4px;
}

.hud-avatar-wrap canvas {
  width: 34px;
  height: 34px;
}

.hud-special-pill {
  background: rgba(12, 11, 10, 0.56);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 3px 9px;
  font-size: 0.72rem;
}

.tactical-control-bar.icon-only-dock {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: auto;
  max-width: 96%;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(14, 12, 10, 0.82);
  backdrop-filter: blur(8px);
}

/* ============================================================================
   9. Simplified Character Equipment Modal (一目了然：有無強裝 + 其他賣金幣)
   ============================================================================ */
.char-modal-clean-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(250, 204, 21, 0.25);
}

.simplified-action-hub {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(6, 78, 59, 0.38));
  border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.simplified-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
}

.simplified-status-line.upgrade-ready {
  background: rgba(22, 101, 52, 0.55);
  border: 1px solid #4ade80;
  color: #ecfdf5;
}

.simplified-status-line.no-upgrade {
  background: rgba(120, 53, 15, 0.45);
  border: 1px solid rgba(250, 204, 21, 0.55);
  color: #fef3c7;
}

.simplified-status-line.all-clean {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

.simplified-status-line .sell-hint {
  font-size: 0.82rem;
  color: #fde047;
}

.simplified-action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.simplified-action-buttons .imperial-btn {
  flex: 1;
  min-width: 145px;
  padding: 9px 12px;
  font-size: 0.86rem;
  font-weight: 800;
  justify-content: center;
}

.sell-unused-hero-btn {
  background: linear-gradient(135deg, #92400e 0%, #b45309 55%, #78350f 100%) !important;
  border: 1.5px solid #facc15 !important;
  color: #fef08a !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(250, 204, 21, 0.25);
}

.sell-unused-hero-btn:hover {
  filter: brightness(1.15);
  border-color: #fef08a !important;
}

.simplified-bag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 6px;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--jade-bright);
}

.simplified-bag-header small {
  color: #fde047;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.empty-bag-clean-notice {
  grid-column: 1 / -1;
  padding: 22px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.84rem;
  background: rgba(15, 23, 42, 0.45);
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 8px;
}

.simplified-bag-card {
  padding: 8px 10px !important;
}

.simplified-bag-card.is-upgrade-card {
  border: 1.5px solid #4ade80 !important;
  background: linear-gradient(90deg, rgba(6, 78, 59, 0.52), rgba(15, 23, 42, 0.85)) !important;
}

.simplified-bag-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.simplified-bag-info {
  flex: 1;
  min-width: 0;
}

.simplified-bag-title {
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simplified-bag-sub {
  font-size: 0.72rem;
  color: #cbd5e1;
  font-family: var(--font-mono);
  margin-top: 2px;
}

.simplified-bag-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.upgrade-power-pill {
  background: rgba(22, 101, 52, 0.75);
  border: 1px solid #4ade80;
  color: #86efac;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.downgrade-power-pill {
  color: #94a3b8;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.bag-item-equip-btn {
  background: linear-gradient(135deg, #059669, #047857);
  border: 1px solid #6ee7b7;
  color: #ecfdf5;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
}

.bag-item-sell-btn {
  background: linear-gradient(135deg, #92400e, #78350f);
  border: 1px solid #facc15;
  color: #fef08a;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.compact-selected-strip {
  padding: 6px 8px;
}

/* ============================================================================
 * PATH OF EXILE 2 (流放之路二) EQUIPMENT BOARD & DETAILED AFFIX TOOLTIP UI
 * 1:1 Spatial Layout & Tooltip Styling matching https://zhuanlan.zhihu.com/p/1951795595984476153
 * ============================================================================ */
.poe2-equip-modal {
  max-width: 1120px !important;
  width: 96vw !important;
  background: radial-gradient(circle at 50% 15%, #1c1610 0%, #0d0a08 68%, #060504 100%) !important;
  border: 2px solid #785c38 !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.95),
    inset 0 0 0 1px rgba(212, 175, 55, 0.25),
    inset 0 0 42px rgba(0, 0, 0, 0.9) !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Top Gothic / Imperial Bronze Crest Header ("道具" Plaque like img1_overview.jpg) */
.poe2-top-crest-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(180deg, #261e15 0%, #14100b 65%, #0b0906 100%);
  border-bottom: 2px solid #7c5e36;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}

.poe2-header-left-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
}

.poe2-stone-tab {
  background: linear-gradient(180deg, #2d261e 0%, #191510 100%);
  border: 1.5px solid #6b563b;
  color: #a89a84;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.poe2-stone-tab.active,
.poe2-stone-tab:hover {
  background: linear-gradient(180deg, #433729 0%, #261f16 100%);
  border-color: #c9a354;
  color: #f3e3b8;
  box-shadow: 0 0 10px rgba(201, 163, 84, 0.28);
}

.poe2-header-center-plaque {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 46px;
  background: linear-gradient(180deg, #ebd28e 0%, #c89f49 48%, #8f6822 100%);
  border: 2px solid #5c4114;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 214, 0.8),
    inset 0 0 10px rgba(92, 65, 20, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.85);
}

.poe2-plaque-title {
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--font-display);
  font-size: 1.25rem !important;
  font-weight: 900;
  letter-spacing: 0.28em;
  color: #1f1406 !important;
  text-shadow: 0 1px 0 rgba(255, 245, 190, 0.65);
}

.poe2-header-right-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.poe2-gold-pill {
  background: rgba(18, 14, 9, 0.92) !important;
  border: 1px solid #96733f !important;
  padding: 4px 12px !important;
  border-radius: 999px;
}

.poe2-crimson-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #dc2626 0%, #7f1d1d 70%, #450a0a 100%);
  border: 2px solid #c9a354;
  color: #fde68a;
  font-weight: 900;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.poe2-crimson-close-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
}

/* Main Two-Column PoE2 Workspace */
.paperdoll-layout-grid.poe2-main-grid {
  display: grid !important;
  grid-template-columns: 468px 1fr !important;
  gap: 16px !important;
  padding: 14px 18px 18px !important;
  max-height: calc(92vh - 64px);
  overflow-y: auto;
  align-items: start;
}

@media (max-width: 980px) {
  .paperdoll-layout-grid.poe2-main-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Left Column: Dark Stone-Relief Equipment Board (matching img1_overview.jpg) */
.paperdoll-stage-box.poe2-equipment-board {
  position: relative !important;
  width: 464px !important;
  height: 492px !important;
  margin: 0 auto;
  background:
    radial-gradient(circle at 31% 18%, rgba(212, 175, 55, 0.14) 0%, transparent 18%),
    radial-gradient(circle at 69% 18%, rgba(212, 175, 55, 0.14) 0%, transparent 18%),
    radial-gradient(circle at 50% 42%, #29241e 0%, #171411 65%, #0c0a08 100%) !important;
  border: 2px solid #6b5335 !important;
  border-radius: 6px !important;
  padding: 0 !important;
  box-shadow:
    inset 0 0 0 2px #1a140e,
    inset 0 0 42px rgba(0, 0, 0, 0.92),
    0 10px 28px rgba(0, 0, 0, 0.85) !important;
  overflow: hidden !important;
}

/* Make background figure look like a subtle monochrome dark-stone relief carving, not blocking center slots */
.poe2-relief-bg {
  opacity: 0.12 !important;
  filter: grayscale(1) sepia(0.35) brightness(0.45) contrast(1.3) !important;
  z-index: 0 !important;
}

.poe2-board-vignette {
  z-index: 1 !important;
  pointer-events: none;
}

/* The 10-Slot Absolute Stage inside the 464x492 Board */
#poe2-slots-stage.poe2-slots-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 3 !important;
}

/* Individual PoE2 Equipment Slot Container (Overriding old .paperdoll-slot-box!) */
.paperdoll-slot-box.poe2-slot-cell {
  position: absolute !important;
  background: #080706 !important;
  border: 2px solid #755b38 !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 0 0 1px #2e2315,
    inset 0 0 18px rgba(0, 0, 0, 0.96),
    0 4px 12px rgba(0, 0, 0, 0.85) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease !important;
}

.paperdoll-slot-box.poe2-slot-cell:hover {
  transform: none !important;
  border-color: #d4af37 !important;
  box-shadow:
    inset 0 0 0 1px #fde047,
    inset 0 0 16px rgba(212, 175, 55, 0.25),
    0 0 14px rgba(212, 175, 55, 0.45) !important;
  z-index: 6 !important;
}

.paperdoll-slot-box.poe2-slot-cell.selected-slot {
  transform: none !important;
  border-color: #fde047 !important;
  box-shadow:
    0 0 0 1px #fde047,
    0 0 16px rgba(250, 204, 21, 0.6),
    inset 0 0 16px rgba(250, 204, 21, 0.25) !important;
  z-index: 7 !important;
}

/* PoE2 Rarity Frame Accents */
.paperdoll-slot-box.poe2-slot-cell.rarity-legendary {
  border-color: #c2410c !important;
}

.paperdoll-slot-box.poe2-slot-cell.rarity-epic {
  border-color: #9a7b3e !important;
}

.paperdoll-slot-box.poe2-slot-cell.rarity-rare {
  border-color: #3b6998 !important;
}

.paperdoll-slot-box.poe2-slot-cell.rarity-common {
  border-color: #57534e !important;
}

/* ============================================================================
 * SYMMETRICAL 3-COLUMN SPATIAL COORDINATES OF ALL 10 SLOTS
 * Stage Size: 464px wide x 492px high
 * Left Col:   left=24px,  width=118px (y: 32..334, accessories y: 346..430)
 * Center Col: left=172px, width=120px (y: 14..334, accessories y: 346..430)
 * Right Col:  left=322px, width=118px (y: 32..334, accessories y: 346..430)
 * ============================================================================ */
/* 1. Left Column Row 1: Main Hand Weapon (主手武器) */
.paperdoll-slot-box.poe2-slot-mainhand {
  left: 24px !important;
  top: 32px !important;
  width: 118px !important;
  height: 184px !important;
}

/* 2. Right Column Row 1: Off-Hand / Warhorse Mount (副手戰駒) */
.paperdoll-slot-box.poe2-slot-offhand {
  left: 322px !important;
  top: 32px !important;
  width: 118px !important;
  height: 184px !important;
}

/* 3. Center Column Row 1: Helmet (頭部防具) */
.paperdoll-slot-box.poe2-slot-helmet {
  left: 172px !important;
  top: 14px !important;
  width: 120px !important;
  height: 92px !important;
}

/* 4. Center Column Row 2: Body Armor (胸部防具) */
.paperdoll-slot-box.poe2-slot-body {
  left: 172px !important;
  top: 116px !important;
  width: 120px !important;
  height: 128px !important;
}

/* 5. Center Column Row 3: War Skirt / Leggings (戰裙防具) */
.paperdoll-slot-box.poe2-slot-belt {
  left: 172px !important;
  top: 254px !important;
  width: 120px !important;
  height: 80px !important;
}

/* 6. Left Column Row 3 (Bottom): Military Scroll / Relic (兵書竹簡) */
.paperdoll-slot-box.poe2-slot-ring-left {
  left: 24px !important;
  top: 346px !important;
  width: 118px !important;
  height: 84px !important;
}

/* 7. Center Column Row 4 (Bottom): Amulet / Necklace (護心戰鏈) */
.paperdoll-slot-box.poe2-slot-amulet {
  left: 172px !important;
  top: 346px !important;
  width: 120px !important;
  height: 84px !important;
}

/* 8. Right Column Row 3 (Bottom): General Ring (武將指環) */
.paperdoll-slot-box.poe2-slot-ring-right {
  left: 322px !important;
  top: 346px !important;
  width: 118px !important;
  height: 84px !important;
}

/* 9. Left Column Row 2: Pauldrons / Gloves (護肩防具) */
.paperdoll-slot-box.poe2-slot-gloves {
  left: 24px !important;
  top: 228px !important;
  width: 118px !important;
  height: 106px !important;
}

/* 10. Right Column Row 2: Boots (腳部防具) */
.paperdoll-slot-box.poe2-slot-boots {
  left: 322px !important;
  top: 228px !important;
  width: 118px !important;
  height: 106px !important;
}

/* Canvas inside each PoE2 slot fills 100% of the slot */
.poe2-slot-cell .paperdoll-slot-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 2px !important;
}

/* Weapon Set I / II Roman Numeral Stone Tabs above Mainhand & Offhand (img1_overview.jpg) */
.poe2-weapon-set-tabs {
  position: absolute;
  top: -21px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  z-index: 5;
}

.poe2-weapon-set-tabs .ws-tab {
  background: linear-gradient(180deg, #2b2319 0%, #14100b 100%);
  border: 1.5px solid #755b38;
  border-bottom: none;
  color: #a89882;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 1px 12px;
  border-radius: 3px 3px 0 0;
}

.poe2-weapon-set-tabs .ws-tab.active {
  background: linear-gradient(180deg, #4a3a24 0%, #241b10 100%);
  border-color: #c9a354;
  color: #fde68a;
}

/* Compact Rune Sockets docked neatly on the upper-left side so weapon art stays unobstructed */
.poe2-sockets-overlay {
  position: absolute;
  top: 24px;
  left: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  pointer-events: none;
  z-index: 4;
}

.poe2-sockets-overlay.sockets-horizontal {
  flex-direction: row;
  gap: 6px;
}

.poe2-rune-socket {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #e0f2fe 0%, #38bdf8 28%, rgba(3, 105, 161, 0.88) 62%, #08101d 100%);
  border: 1.5px solid #9a7b4f;
  box-shadow:
    0 0 6px rgba(56, 189, 248, 0.78),
    inset 0 0 4px #bae6fd;
  position: relative;
}

.poe2-rune-socket::after {
  content: '✦';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f0f9ff;
  font-size: 0.56rem;
  text-shadow: 0 0 4px #38bdf8;
}

/* Total Martial Power Plaque cleanly docked at bottom of board */
.paperdoll-cp-plaque.poe2-cp-plaque {
  position: absolute !important;
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;
  min-width: 240px !important;
  height: 36px !important;
  z-index: 5 !important;
}

/* ============================================================================
 * RIGHT COLUMN: PoE2 DETAILED ITEM TOOLTIP CARD (img2 - img10)
 * Matching all classes emitted by renderCharacterSheet() in src/main.js
 * ============================================================================ */
.poe2-right-inspector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#paperdoll-selected-card.poe2-item-tooltip-card {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.poe2-tooltip-box {
  background: rgba(8, 8, 10, 0.96);
  border: 2px solid #6b5335;
  border-radius: 5px;
  overflow: hidden;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.92),
    inset 0 0 24px rgba(0, 0, 0, 0.85);
  color: #cbd5e1;
}

/* PoE2 Ornate Rarity Header Banner */
.poe2-tooltip-header {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 2px solid #6b5335;
}

.poe2-tooltip-header.rarity-legendary {
  background: linear-gradient(90deg, #1f0d05 0%, #4a1808 50%, #1f0d05 100%);
  border-bottom-color: #ea580c;
}

.poe2-tooltip-header.rarity-epic {
  background: linear-gradient(90deg, #1f1906 0%, #453008 50%, #1f1906 100%);
  border-bottom-color: #ca8a04;
}

.poe2-tooltip-header.rarity-rare {
  background: linear-gradient(90deg, #0a1529 0%, #172b5c 50%, #0a1529 100%);
  border-bottom-color: #3b82f6;
}

.poe2-tooltip-header.rarity-common {
  background: linear-gradient(90deg, #111827 0%, #1f2937 50%, #111827 100%);
  border-bottom-color: #64748b;
}

.poe2-tooltip-icon-wrap {
  width: 52px;
  height: 52px;
  border: 1.5px solid #7c5e36;
  border-radius: 4px;
  overflow: hidden;
  background: #070605;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poe2-tooltip-icon-wrap canvas,
#selected-slot-art-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.poe2-tooltip-title-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.poe2-item-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fde047;
}

.rarity-legendary .poe2-item-name,
.rarity-legendary .poe2-item-basetype {
  color: #fb923c;
}

.rarity-epic .poe2-item-name,
.rarity-epic .poe2-item-basetype {
  color: #fde047;
}

.rarity-rare .poe2-item-name,
.rarity-rare .poe2-item-basetype {
  color: #60a5fa;
}

.rarity-common .poe2-item-name,
.rarity-common .poe2-item-basetype {
  color: #e2e8f0;
}

.poe2-item-basetype {
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.92;
}

.poe2-plus-tag {
  color: #4ade80;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.poe2-bag-preview-tag {
  font-size: 0.72rem;
  color: #86efac;
  background: rgba(6, 78, 59, 0.8);
  border: 1px solid #4ade80;
  padding: 1px 6px;
  border-radius: 4px;
}

.poe2-rarity-pill {
  font-size: 0.72rem;
  text-align: right;
  line-height: 1.35;
  color: #cbd5e1;
}

/* Tooltip Body: Base Properties, Requirements, Implicit & Explicit Affixes */
.poe2-tooltip-body {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.poe2-base-props {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}

.poe2-prop-row {
  font-size: 0.80rem;
  color: #9ca3af;
}

.poe2-prop-row.category-row {
  display: flex;
  justify-content: space-between;
  color: #d6c7b2;
  font-weight: 700;
  padding: 0 8px 2px;
}

.poe2-val-white {
  color: #f8fafc;
  font-weight: 700;
}

.poe2-val-blue {
  color: #7dd3fc;
  font-weight: 700;
}

.poe2-val-elem {
  color: #f97316;
  font-weight: 700;
}

.poe2-val-muted {
  color: #94a3b8;
}

.poe2-sep {
  height: 1px;
  margin: 3px 12px;
  background: linear-gradient(90deg, transparent 0%, #6b5335 50%, transparent 100%);
}

.poe2-req-row {
  text-align: center;
  font-size: 0.78rem;
  color: #9ca3af;
}

.poe2-enchant-row {
  text-align: center;
  font-size: 0.78rem;
  color: #38bdf8;
  font-weight: 600;
}

/* PoE2 3-Column Affix Rows: Left (前綴/後綴/基底) | Center (Mod + Roll Range) | Right (T1~T8) */
.poe2-affix-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.poe2-affix-row {
  display: grid;
  grid-template-columns: 44px 1fr 36px;
  align-items: center;
  gap: 6px;
}

.poe2-affix-side {
  font-size: 0.68rem;
  color: #78716c;
  text-align: left;
  font-family: var(--font-mono);
}

.poe2-affix-text {
  color: #7dd3fc;
  font-size: 0.80rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}

.poe2-affix-row.unique-mod-row .poe2-affix-text {
  color: #fdba74;
}

.poe2-affix-tier {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #a8a29e;
  text-align: center;
  background: rgba(28, 25, 23, 0.8);
  border: 1px solid rgba(120, 113, 108, 0.4);
  padding: 1px 4px;
  border-radius: 3px;
}

.poe2-flavor-quote {
  text-align: center;
  color: #fb923c;
  font-style: italic;
  font-size: 0.76rem;
  line-height: 1.4;
  padding: 4px 14px;
}

.poe2-tooltip-CraftBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(18, 14, 10, 0.96);
  border-top: 1px solid #57452e;
  flex-wrap: wrap;
}

.poe2-craft-btn {
  flex: 1;
  background: linear-gradient(180deg, #3b2c1a 0%, #1f160d 100%);
  border: 1px solid #a17c48;
  color: #fef08a;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.15s ease, border-color 0.15s ease;
}

.poe2-craft-btn.enhance-btn {
  background: linear-gradient(180deg, #14532d 0%, #064e3b 100%);
  border-color: #4ade80;
  color: #ecfdf5;
}

.poe2-craft-btn:hover:not(:disabled) {
  filter: brightness(1.18);
  border-color: #fde047;
}

.poe2-craft-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

/* 三國歷代名鎧圖鑑（1~5階寫實鎧甲即時預覽與換穿面板） */
.tk-armor-gallery-panel {
  padding: 6px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tk-armor-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.tk-armor-gallery-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fde047;
  letter-spacing: 0.03em;
}

.tk-armor-era-pill {
  font-size: 0.68rem;
  color: #cbd5e1;
  background: rgba(30, 24, 18, 0.9);
  border: 1px solid rgba(161, 124, 72, 0.55);
  padding: 1px 7px;
  border-radius: 999px;
}

.tk-armor-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.tk-armor-tier-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: linear-gradient(180deg, #16120e 0%, #090806 100%);
  border: 1px solid #4b3b28;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.tk-armor-tier-btn:hover {
  transform: translateY(-2px);
  border-color: #eab308;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.28);
}

.tk-armor-tier-btn.active {
  border-color: #fde047;
  background: linear-gradient(180deg, #2d2112 0%, #140e08 100%);
  box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.65), 0 4px 14px rgba(234, 179, 8, 0.35);
}

.tk-armor-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  overflow: hidden;
  background: #070605;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tk-armor-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tk-armor-tier-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 0.60rem;
  font-weight: 800;
  color: #fef08a;
  background: rgba(12, 9, 6, 0.85);
  border: 1px solid rgba(234, 179, 8, 0.55);
  padding: 0 4px;
  border-radius: 3px;
  line-height: 1.3;
}

.tk-armor-tier-label {
  font-size: 0.67rem;
  font-weight: 700;
  color: #e7e5e4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tk-armor-tier-btn.active .tk-armor-tier-label {
  color: #fde047;
}

/* ============================================================================
   Three Kingdoms 5-Tier Historical Set Resonance & 10,000-Player Social/Save UI
   ============================================================================ */
.tk-set-resonance-bar {
  background: linear-gradient(180deg, rgba(28, 22, 14, 0.96) 0%, rgba(15, 12, 8, 0.96) 100%);
  border: 1px solid rgba(250, 204, 21, 0.35);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tk-res-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.tk-res-title-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tk-res-badge {
  font-size: 0.66rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #facc15;
  background: rgba(250, 204, 21, 0.12);
}

.tk-res-setname {
  font-size: 0.78rem;
  font-weight: 800;
}

.tk-res-count-tag {
  font-size: 0.70rem;
  color: #cbd5e1;
}

.tk-res-quick-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.tk-res-quick-lbl {
  font-size: 0.66rem;
  color: #94a3b8;
}

.tk-tier-quick-pill {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #1c1917;
  color: #d6d3d1;
  border: 1px solid #57534e;
  cursor: pointer;
  transition: all 0.14s ease;
}

.tk-tier-quick-pill:hover {
  border-color: #facc15;
  color: #fef08a;
}

.tk-tier-quick-pill.full-active {
  background: linear-gradient(180deg, #422006 0%, #1c1917 100%);
  border-color: #fde047;
  color: #fde047;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.35);
}

.tk-res-stages-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.tk-res-stage-pill {
  font-size: 0.66rem;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.55);
  color: #64748b;
}

.tk-res-stage-pill.active {
  border-color: rgba(74, 222, 128, 0.55);
  background: rgba(20, 83, 45, 0.42);
  color: #86efac;
  font-weight: 700;
}

.tk-set-sync-footer {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(212, 175, 55, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.tk-set-sync-status {
  font-size: 0.69rem;
  color: #d6d3d1;
}

.tk-set-sync-status b {
  color: #fde047;
}

.tk-fullset-sync-btn {
  font-size: 0.70rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid #facc15;
  background: linear-gradient(180deg, #422006 0%, #1f1408 100%);
  color: #fef08a;
  cursor: pointer;
  transition: all 0.14s ease;
}

.tk-fullset-sync-btn:hover {
  background: linear-gradient(180deg, #713f12 0%, #362009 100%);
  box-shadow: 0 2px 10px rgba(250, 204, 21, 0.35);
}

.tk-social-save-drawer {
  margin-bottom: 8px;
}

.tk-social-save-drawer.hidden {
  display: none !important;
}

.tk-drawer-card {
  background: linear-gradient(180deg, #17130f 0%, #0b0907 100%);
  border: 1px solid rgba(250, 204, 21, 0.45);
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65);
}

.tk-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.tk-drawer-title {
  display: block;
  font-size: 0.80rem;
  color: #fde047;
}

.tk-drawer-sub {
  display: block;
  font-size: 0.68rem;
  color: #94a3b8;
}

.tk-drawer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tk-poster-canvas-wrap {
  width: 100%;
  background: #060504;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 4px;
  overflow: hidden;
}

#tk-hero-poster-canvas {
  width: 100%;
  height: auto;
  display: block;
}

.tk-save-token-textarea {
  width: 100%;
  background: #090806;
  color: #fef08a;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  resize: vertical;
}

/* ============================================================================
   暗黑破壞神 II (Diablo II) 經典石雕浮雕風格：武聖十階技能樹 (Skill Tree Modal)
   ============================================================================ */
.skill-tree-cta-topbar {
  background: linear-gradient(135deg, #3f2e14 0%, #261b0b 55%, #171006 100%) !important;
  border-color: #d4af37 !important;
  color: #fef08a !important;
  font-weight: 800 !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

.skill-tree-cta-topbar:hover {
  border-color: #fef08a !important;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.65);
  transform: translateY(-1px);
}

.d2-topbar-sp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: 1px solid #fde047;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.85);
}

.d2-topbar-sp-badge.empty {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.4);
  color: #94a3b8;
  box-shadow: none;
}

.d2-dock-sp-pill {
  color: #fde047 !important;
  font-weight: 800;
}

.d2-skill-tree-modal {
  max-width: 920px !important;
  width: 95vw !important;
  max-height: 92vh !important;
  padding: 16px 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(161, 98, 7, 0.16), transparent 65%),
    linear-gradient(180deg, #161411 0%, #0d0c0a 100%) !important;
  border: 2px solid #85682a !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.95),
    inset 0 0 0 1px rgba(254, 240, 138, 0.18),
    0 0 32px rgba(180, 130, 45, 0.25) !important;
  overflow-y: auto !important;
}

.d2-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1.5px solid rgba(180, 135, 56, 0.42);
}

.d2-tree-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.d2-tree-seal {
  background: linear-gradient(135deg, #991b1b, #450a0a);
  border: 1.5px solid #f59e0b;
  color: #fef08a;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.76rem;
  padding: 5px 9px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.d2-tree-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.24rem;
  color: #fde047;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.d2-tree-subtitle {
  margin: 2px 0 0;
  font-size: 0.74rem;
  color: #cbd5e1;
}

.d2-tree-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.d2-remaining-points-plaque {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: linear-gradient(180deg, #2b1d0c 0%, #150e06 100%);
  border: 1.5px solid #eab308;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 2px rgba(254, 240, 138, 0.35),
    0 0 14px rgba(234, 179, 8, 0.3);
}

.d2-points-label {
  font-family: var(--font-display);
  font-size: 0.76rem;
  color: #fde68a;
}

.d2-points-value {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 900;
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.65);
}

.d2-level-summary-pill {
  font-size: 0.76rem;
  color: #e2e8f0;
  background: rgba(24, 22, 19, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.3);
  padding: 5px 10px;
  border-radius: 6px;
}

.d2-level-summary-pill strong {
  color: #fde047;
  font-family: var(--font-mono);
}

.d2-tree-workspace {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 860px) {
  .d2-tree-workspace {
    grid-template-columns: 1fr;
  }
}

/* 暗黑破壞神 II 石雕石板外框 */
.d2-stone-tablet-frame {
  background:
    radial-gradient(circle at 30% 25%, rgba(68, 63, 54, 0.45), transparent 60%),
    radial-gradient(circle at 75% 75%, rgba(55, 49, 41, 0.45), transparent 60%),
    linear-gradient(180deg, #26231f 0%, #1c1a17 50%, #151310 100%);
  border: 3px solid #6b5735;
  border-radius: 8px;
  padding: 10px 12px 12px;
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.92),
    inset 0 0 0 1.5px #383229,
    0 10px 28px rgba(0, 0, 0, 0.85);
  position: relative;
}

.d2-stone-column-headers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: #d6c7a9;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(133, 104, 42, 0.38);
  letter-spacing: 0.03em;
}

/* 5列 x 3欄 暗黑2石板浮雕容器 */
.d2-stone-board {
  position: relative;
  width: 100%;
  height: 540px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.22) 0px,
      rgba(0, 0, 0, 0.22) 2px,
      transparent 2px,
      transparent 136px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.25) 0px,
      rgba(0, 0, 0, 0.25) 2px,
      transparent 2px,
      transparent 108px
    ),
    radial-gradient(circle at 50% 45%, #2f2b25 0%, #211e1a 62%, #171512 100%);
  border: 2px solid #4a3f2d;
  border-radius: 4px;
  box-shadow:
    inset 0 0 36px rgba(0, 0, 0, 0.92),
    inset 0 2px 6px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.d2-skill-tree-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.d2-skill-tree-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
}

/* 暗黑2 單顆石雕技能凹槽節點 */
.d2-skill-node {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 5px;
  background: #141210;
  border: 2.5px solid #6e5d43;
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.9),
    inset 0 0 10px rgba(0, 0, 0, 0.92);
  cursor: pointer;
  padding: 0;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.d2-skill-node:hover {
  transform: scale(1.06);
  z-index: 5;
}

.d2-skill-node.selected {
  outline: 2px solid #fef08a;
  outline-offset: 2px;
}

/* 狀態 1：已點亮 (Rank > 0) — 耀眼純金邊框與神威光暈 */
.d2-skill-node.state-allocated {
  border-color: #facc15;
  box-shadow:
    0 0 16px rgba(250, 204, 21, 0.55),
    0 5px 14px rgba(0, 0, 0, 0.9),
    inset 0 0 8px rgba(250, 204, 21, 0.35);
}

/* 狀態 2：可投資 (前置已達成且有技能點) — 翠綠/金芒呼吸提示 */
.d2-skill-node.state-available {
  border-color: #4ade80;
  box-shadow:
    0 0 15px rgba(74, 222, 128, 0.55),
    0 5px 14px rgba(0, 0, 0, 0.9);
}

/* 狀態 3：未解鎖 (前置未達成或等級不足) — 石化暗沉浮雕 */
.d2-skill-node.state-locked {
  border-color: #443c32;
  opacity: 0.72;
}

.d2-skill-node.state-locked .d2-node-icon-img {
  filter: grayscale(0.72) brightness(0.62) contrast(1.1);
}

.d2-node-icon-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
  position: relative;
}

.d2-node-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.18s ease, transform 0.18s ease;
}

/* 節點左上角：對應暗黑2參考圖的 1~10 編號銘牌 */
.d2-node-num-tag {
  position: absolute;
  top: -7px;
  left: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, #3b3328 0%, #1c1813 100%);
  border: 1px solid #a38956;
  color: #fde68a;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
  z-index: 3;
}

/* 節點底部名稱微型銘牌 */
.d2-node-name-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 9, 8, 0.92) 45%, rgba(10, 9, 8, 0.98) 100%);
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 8px 3px 2px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* 暗黑破壞神 II 標誌性右下角凹陷技能等級小方框 (Rank Counter Socket) */
.d2-node-rank-socket {
  position: absolute;
  bottom: -9px;
  right: -11px;
  min-width: 28px;
  height: 22px;
  padding: 0 5px;
  background: linear-gradient(180deg, #1b1814 0%, #090806 100%);
  border: 1.5px solid #8c7344;
  border-radius: 3px;
  color: #94a3b8;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.95),
    inset 0 1px 3px rgba(0, 0, 0, 0.9);
  z-index: 4;
}

.d2-skill-node.state-allocated .d2-node-rank-socket {
  border-color: #facc15;
  color: #fef08a;
  background: linear-gradient(180deg, #3b280a 0%, #1a1104 100%);
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.8);
}

/* 可直接點擊 +1 的小金號提示 */
.d2-node-plus-indicator {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #15803d);
  border: 1.5px solid #fef08a;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.9);
  z-index: 4;
}

/* 石板底部暗黑2經典控制列與紅底金框 [X] 關閉按鈕 */
.d2-stone-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(133, 104, 42, 0.35);
}

.d2-respec-btn {
  background: linear-gradient(180deg, #3a2e21 0%, #211a12 100%);
  border: 1px solid #9a7b45;
  color: #fde68a;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.d2-respec-btn:hover {
  border-color: #fef08a;
  color: #ffffff;
}

.d2-footer-hint {
  font-size: 0.7rem;
  color: #a8a29e;
}

.d2-classic-close-x {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 60%, #450a0a 100%);
  border: 2px solid #d4af37;
  border-radius: 4px;
  color: #fef08a;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.85),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.d2-classic-close-x:hover {
  filter: brightness(1.18);
  border-color: #fef08a;
}

/* 右側：暗黑2武學碑文詳情與加點面板 */
.d2-skill-inspector-panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(180, 130, 45, 0.14), transparent 70%),
    linear-gradient(180deg, #1b1814 0%, #110f0c 100%);
  border: 2px solid #786036;
  border-radius: 8px;
  padding: 16px;
  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.88),
    0 10px 24px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.d2-insp-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(180, 135, 56, 0.35);
}

.d2-insp-icon-box {
  width: 68px;
  height: 68px;
  border-radius: 6px;
  border: 2px solid #facc15;
  overflow: hidden;
  flex-shrink: 0;
  background: #0d0b09;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.35);
}

.d2-insp-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.d2-insp-title-block h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #fde047;
}

.d2-insp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.d2-insp-pill {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

.d2-insp-pill.gold {
  background: rgba(113, 63, 18, 0.65);
  border-color: #facc15;
  color: #fef08a;
  font-weight: 700;
}

.d2-insp-pill.jade {
  background: rgba(6, 78, 59, 0.65);
  border-color: #34d399;
  color: #a7f3d0;
  font-weight: 700;
}

.d2-insp-lore {
  margin: 0;
  font-size: 0.82rem;
  color: #d6d3d1;
  line-height: 1.55;
  background: rgba(12, 10, 8, 0.72);
  border-left: 3px solid #d4af37;
  padding: 8px 12px;
  border-radius: 4px;
}

.d2-insp-effects-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.d2-effect-box {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px;
  padding: 9px 12px;
}

.d2-effect-box.current {
  border-color: rgba(250, 204, 21, 0.5);
  background: rgba(66, 32, 6, 0.32);
}

.d2-effect-box.next {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(6, 78, 59, 0.28);
}

.d2-effect-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 3px;
  color: #fde047;
}

.d2-effect-box.next .d2-effect-label {
  color: #6ee7b7;
}

.d2-effect-value {
  font-size: 0.84rem;
  font-weight: 700;
  color: #f8fafc;
}

.d2-allocate-cta-btn {
  width: 100%;
  padding: 11px 16px;
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 900;
  border-radius: 6px;
  cursor: pointer;
  background: linear-gradient(135deg, #15803d 0%, #166534 55%, #14532d 100%);
  border: 2px solid #4ade80;
  color: #ecfdf5;
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.4);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.d2-allocate-cta-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.d2-allocate-cta-btn:disabled {
  background: rgba(30, 41, 59, 0.75);
  border-color: rgba(100, 116, 139, 0.45);
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}

/* 依序解鎖之章節導覽鎖定狀態與裝備詳情圖鑑收合手風琴（精簡介面） */
.chapter-pill.locked {
  opacity: 0.46;
  background: rgba(18, 16, 15, 0.72);
  border-color: rgba(120, 113, 108, 0.35);
  color: #78716c;
  cursor: not-allowed;
}

.chapter-pill.locked .ch-num {
  color: #a8a29e;
}

.chapter-pill.locked:hover {
  border-color: rgba(248, 113, 113, 0.55);
  transform: none;
}

.tk-gallery-accordion {
  margin-top: 6px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 6px;
  background: rgba(15, 13, 11, 0.65);
  padding: 5px 8px;
}

.tk-gallery-summary {
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fcd34d;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tk-gallery-summary::-webkit-details-marker {
  display: none;
}

.tk-gallery-summary::after {
  content: '▾';
  font-size: 0.8rem;
  color: #a7f3d0;
  transition: transform 0.15s ease;
}

.tk-gallery-accordion[open] .tk-gallery-summary::after {
  transform: rotate(180deg);
}

.tk-gallery-accordion[open] .tk-armor-gallery-panel {
  margin-top: 8px;
}

/* ============================================================================
   9. 零信箱・生物辨識 (Face ID / Touch ID 指紋 WebAuthn Passkey) 虎符帳號與獨立存檔金庫視窗
   ============================================================================ */
.account-cta-topbar {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(15, 23, 42, 0.9) 100%);
  border-color: rgba(52, 211, 153, 0.55);
  color: #a7f3d0;
  font-weight: 800;
}

.account-cta-topbar.logged-in {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.28) 0%, rgba(6, 78, 59, 0.88) 100%);
  border-color: rgba(251, 191, 36, 0.75);
  color: #fef08a;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.28);
}

.account-auth-modal {
  max-width: 1020px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 18px 22px;
}

.account-auth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(251, 191, 36, 0.3);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.account-status-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(6, 78, 59, 0.55) 0%, rgba(15, 23, 42, 0.78) 100%);
  border: 1px solid rgba(52, 211, 153, 0.45);
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: #ecfdf5;
}

.account-recovery-banner {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.65) 0%, rgba(30, 27, 24, 0.95) 100%);
  border: 1.5px solid #fbbf24;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.25);
}

.recovery-banner-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  color: #fef3c7;
  font-size: 0.84rem;
}

.recovery-banner-sub {
  font-size: 0.75rem;
  color: #fde68a;
}

.recovery-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.recovery-key-code {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  border-radius: 6px;
  background: rgba(10, 9, 8, 0.9);
  border: 1px dashed #fde047;
  color: #4ade80;
  user-select: all;
}

.account-feedback-toast {
  padding: 9px 14px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  border-left: 4px solid #4ade80;
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
}

.account-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 860px) {
  .account-auth-grid {
    grid-template-columns: 1fr;
  }
}

.account-auth-card {
  background: rgba(16, 15, 13, 0.78);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-card-section h3 {
  margin: 0 0 5px 0;
  font-size: 0.96rem;
  color: #fde047;
  font-family: var(--font-display);
}

.account-card-desc {
  margin: 0 0 10px 0;
  font-size: 0.76rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.account-1tap-actions,
.account-register-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-biometric-hero-btn {
  flex: 1;
  min-width: 210px;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 800;
  background: linear-gradient(135deg, #059669 0%, #047857 55%, #064e3b 100%);
  border: 1.5px solid #6ee7b7;
  color: #ecfdf5;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.38);
}

.account-divider {
  border: none;
  border-top: 1px solid rgba(212, 175, 55, 0.22);
  margin: 4px 0;
}

.account-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.account-form-group label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #e2e8f0;
}

.account-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  border-radius: 6px;
  background: rgba(9, 11, 16, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.42);
  color: #f8fafc;
  font-size: 0.84rem;
  font-family: var(--font-sans);
}

.account-input.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-input:focus {
  outline: none;
  border-color: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.22);
}

.account-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.74rem;
  color: #a7f3d0;
  margin-bottom: 10px;
  cursor: pointer;
  line-height: 1.4;
}

.account-vault-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

.account-vault-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-radius: 7px;
  background: rgba(20, 24, 33, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.3);
  transition: border-color 0.14s ease, background 0.14s ease;
}

.account-vault-item.active-vault {
  background: linear-gradient(90deg, rgba(6, 78, 59, 0.5) 0%, rgba(20, 24, 33, 0.92) 100%);
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.2);
}

.account-vault-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-vault-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #fef08a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-vault-stats {
  font-size: 0.72rem;
  color: #cbd5e1;
  font-family: var(--font-mono);
}

.account-vault-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.account-recovery-inputs {
  display: grid;
  grid-template-columns: 1fr 1.25fr auto;
  gap: 8px;
  align-items: center;
}

@media (max-width: 640px) {
  .account-recovery-inputs {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
 * MOBILE & FLAGSHIP SMARTPHONE OPTIMIZATION (iPhone 17 Pro Max 440x956 / 956x440)
 * Dynamic Viewport Units (dvh/dvw), Safe-Area Insets, Touch Ergonomics & Fluid Boards
 * ============================================================================ */

body {
  min-block-size: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  -webkit-tap-highlight-color: transparent;
}

#battle-canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.chapter-syllabus-bar {
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.chapter-syllabus-bar::-webkit-scrollbar {
  display: none;
}

.imperial-modal,
.paperdoll-layout-grid.poe2-main-grid,
.d2-tree-workspace,
.d2-inspector-pane,
.poe2-stash-grid,
.prelude-body-grid {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.imperial-command-dock {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}

/* Touch & Coarse Pointer Ergonomics (iPhone / iPad / Android) */
@media (pointer: coarse) {
  .imperial-btn,
  .chap-pill,
  .poe2-stone-tab,
  .poe2-forge-btn,
  .d2-tree-tab,
  .poe2-crimson-close-btn {
    min-block-size: 36px;
    min-inline-size: 36px;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }

  .skill-btn.skill-icon-slot {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Hide desktop keyboard shortcut badges ([J], [K], [1]-[4], [Space]) on touch screens */
  .skill-key-badge {
    display: none !important;
  }

  /* Prevent iOS Safari from auto-zooming page when focusing text inputs */
  .account-input,
  input[type="text"],
  textarea {
    font-size: 1rem !important;
  }
}

/* Suppress sticky hover-only skill tooltips on touch screens so they never block the canvas */
@media (hover: none) and (pointer: coarse) {
  .skill-btn.skill-icon-slot:hover .skill-tip-pop,
  .skill-btn.skill-icon-slot:focus .skill-tip-pop,
  .skill-btn.skill-icon-slot:focus-visible .skill-tip-pop {
    opacity: 0 !important;
    transform: translate(-50%, 6px) scale(0.95) !important;
    pointer-events: none !important;
  }
}

/* ============================================================================
 * MOBILE FULL-SCREEN LANDSCAPE LAYOUT FOR ALL MOBILE DEVICES
 * (incl. iPhone 17 Pro Max 956x440 in landscape & auto-rotated 440x956 portrait)
 * - In portrait orientation, automatically rotates 90deg clockwise into landscape
 *   so the widescreen battlefield fills 100% of the vertical screen even with
 *   iOS Portrait Orientation Lock enabled.
 * - In native landscape orientation, fills 100dvw x 100dvh edge-to-edge.
 * ============================================================================ */
@media (max-width: 900px) and (orientation: portrait) {
  html {
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    background: #0d0b0a;
  }

  body {
    position: fixed;
    top: 0;
    left: 100dvw;
    width: 100dvh !important;
    height: 100dvw !important;
    min-height: 100dvw !important;
    max-height: 100dvw !important;
    transform-origin: 0 0;
    transform: rotate(90deg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: #0d0b0a;
  }
}

@media (max-width: 1024px) and (orientation: landscape),
       (max-height: 560px) and (orientation: landscape) {
  html,
  body {
    width: 100dvw;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: #0d0b0a;
  }
}

@media (max-width: 900px) and (orientation: portrait),
       (max-width: 1024px) and (orientation: landscape),
       (max-height: 560px) and (orientation: landscape) {
  /* 1. Sleek Single-Row Imperial Topbar (36px height) */
  .imperial-topbar {
    flex: 0 0 auto;
    height: 36px;
    min-height: 36px;
    padding: 2px max(12px, env(safe-area-inset-right, 12px)) 2px max(12px, env(safe-area-inset-left, 12px));
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .brand-cluster {
    flex: 0 0 auto;
    gap: 5px;
  }

  .cinnabar-seal-stamp {
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
  }

  .brand-titles h1 {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .chapter-syllabus-bar {
    order: 0;
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    padding: 0 4px;
    gap: 4px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .chapter-syllabus-bar::-webkit-scrollbar {
    display: none;
  }

  .chap-pill {
    padding: 2px 7px;
    font-size: 0.66rem;
    min-block-size: 24px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .topbar-actions {
    flex: 0 0 auto;
    width: auto;
    margin-left: 0;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
  }

  .imperial-gold-pill {
    padding: 2px 6px;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .imperial-btn {
    padding: 2px 7px;
    font-size: 0.66rem;
    min-block-size: 24px;
    white-space: nowrap;
  }

  /* 2. Full-Screen Landscape Battlefield Workspace & Canvas Stage */
  .game-workspace {
    flex: 1 1 0%;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .canvas-stage-wrapper {
    flex: 1 1 0%;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    display: flex;
    flex-direction: column;
    box-shadow: none;
  }

  #battle-canvas {
    flex: 1 1 0%;
    min-height: 0;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    display: block;
  }

  /* 3. Compact Floating HUD Overlay */
  .combat-hud-overlay {
    top: 6px;
    left: max(10px, env(safe-area-inset-left, 10px));
    right: max(10px, env(safe-area-inset-right, 10px));
    gap: 6px;
    align-items: flex-start;
  }

  .hero-vitals-card {
    padding: 4px 8px;
    transform: scale(0.86);
    transform-origin: top left;
  }

  .hud-right-cluster {
    transform: scale(0.88);
    transform-origin: top right;
  }

  /* 4. Floating Bottom-Center Single-Row Tactical Skill Dock */
  .tactical-control-bar.icon-only-dock {
    position: absolute;
    bottom: max(5px, env(safe-area-inset-bottom, 5px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: auto;
    max-width: 96%;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.42);
    background: rgba(14, 12, 10, 0.84);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65);
  }

  .skill-buttons-group.icon-skill-bar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: auto;
  }

  .skill-btn.skill-icon-slot {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .skill-key-badge {
    display: none;
  }

  /* 5. Landscape-Optimized Modals (Percentage-based so both rotated-portrait and native-landscape fit) */
  .modal-backdrop {
    padding: 6px;
  }

  .imperial-modal {
    width: 96% !important;
    max-width: 920px !important;
    max-height: 92% !important;
    padding: 10px 14px;
  }

  .modal-title {
    font-size: 1.05rem;
  }

  /* 6. PoE2 Equipment Modal in Landscape */
  .imperial-modal.paperdoll-modal-shell.poe2-equip-modal {
    width: 98% !important;
    max-width: 940px !important;
    max-height: 94% !important;
    padding: 0 !important;
  }

  .poe2-top-crest-header {
    padding: 6px 12px;
    gap: 8px;
  }

  .poe2-header-center-plaque {
    display: none;
  }

  .poe2-stone-tab {
    padding: 5px 10px;
    font-size: 0.74rem;
    white-space: nowrap;
  }

  .paperdoll-layout-grid.poe2-main-grid {
    padding: 8px 10px 12px !important;
    gap: 10px !important;
    max-height: calc(100% - 50px);
    overflow-y: auto;
  }

  /* 7. Diablo II Skill Tree Modal in Landscape */
  .imperial-modal.d2-skill-modal-shell {
    width: 98% !important;
    max-width: 940px !important;
    max-height: 94% !important;
  }

  .d2-tree-workspace {
    padding: 8px 10px !important;
    gap: 10px !important;
    max-height: calc(100% - 50px);
    overflow-y: auto;
  }
}

/* ============================================================================
 * FLUID 10-SLOT POE2 EQUIPMENT BOARD FOR COMPACT LANDSCAPE / NARROW CONTAINERS
 * Preserves exact 464:492 aspect ratio & 3-column symmetrical alignment
 * ============================================================================ */
@media (max-width: 900px) and (orientation: portrait),
       (max-width: 1024px) and (orientation: landscape),
       (max-height: 560px) and (orientation: landscape),
       (max-width: 540px) {
  .paperdoll-stage-box.poe2-equipment-board {
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    aspect-ratio: 464 / 492 !important;
    margin: 0 auto;
  }

  /* 1. Left Column Row 1: Main Hand Weapon */
  .paperdoll-slot-box.poe2-slot-mainhand {
    left: 5.17% !important;
    top: 6.50% !important;
    width: 25.43% !important;
    height: 37.40% !important;
  }

  /* 2. Right Column Row 1: Off-Hand / Warhorse Mount */
  .paperdoll-slot-box.poe2-slot-offhand {
    left: 69.40% !important;
    top: 6.50% !important;
    width: 25.43% !important;
    height: 37.40% !important;
  }

  /* 3. Center Column Row 1: Helmet */
  .paperdoll-slot-box.poe2-slot-helmet {
    left: 37.07% !important;
    top: 2.85% !important;
    width: 25.86% !important;
    height: 18.70% !important;
  }

  /* 4. Center Column Row 2: Body Armor */
  .paperdoll-slot-box.poe2-slot-body {
    left: 37.07% !important;
    top: 23.58% !important;
    width: 25.86% !important;
    height: 26.02% !important;
  }

  /* 5. Center Column Row 3: War Skirt / Belt */
  .paperdoll-slot-box.poe2-slot-belt {
    left: 37.07% !important;
    top: 51.63% !important;
    width: 25.86% !important;
    height: 16.26% !important;
  }

  /* 6. Left Column Row 3 (Bottom): Military Scroll / Relic */
  .paperdoll-slot-box.poe2-slot-ring-left {
    left: 5.17% !important;
    top: 70.33% !important;
    width: 25.43% !important;
    height: 17.07% !important;
  }

  /* 7. Center Column Row 4 (Bottom): Amulet / Necklace */
  .paperdoll-slot-box.poe2-slot-amulet {
    left: 37.07% !important;
    top: 70.33% !important;
    width: 25.86% !important;
    height: 17.07% !important;
  }

  /* 8. Right Column Row 3 (Bottom): General Ring */
  .paperdoll-slot-box.poe2-slot-ring-right {
    left: 69.40% !important;
    top: 70.33% !important;
    width: 25.43% !important;
    height: 17.07% !important;
  }

  /* 9. Left Column Row 2: Pauldrons / Gloves */
  .paperdoll-slot-box.poe2-slot-gloves {
    left: 5.17% !important;
    top: 46.34% !important;
    width: 25.43% !important;
    height: 21.54% !important;
  }

  /* 10. Right Column Row 2: Boots */
  .paperdoll-slot-box.poe2-slot-boots {
    left: 69.40% !important;
    top: 46.34% !important;
    width: 25.43% !important;
    height: 21.54% !important;
  }

  .poe2-slot-Socket-tag {
    font-size: 0.56rem;
    padding: 1px 4px;
  }

  .poe2-slot-enhance-pill,
  .poe2-slot-gs-pill {
    font-size: 0.56rem;
    padding: 0 3px;
  }

  .poe2-board-footer-bar {
    height: 34px;
    padding: 0 8px;
  }

  .poe2-hero-identity-pill {
    font-size: 0.7rem;
  }

  .poe2-board-action-btn {
    padding: 3px 7px;
    font-size: 0.66rem;
  }
}

/* ============================================================================
 * UNIVERSAL ALWAYS-VISIBLE MODAL ESCAPE / CLOSE BUTTON & STICKY HEADER BAR
 * Ensures every modal screen has a consistent, pinned top-right exit button
 * on both desktop and mobile landscape even when scrolling inside the modal.
 * ============================================================================ */
.modal-sticky-header-bar,
.poe2-top-crest-header,
.d2-tree-header,
.account-auth-header,
.vs-modal-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
}

.modal-sticky-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.32);
  background: linear-gradient(180deg, rgba(34, 29, 25, 0.98) 0%, rgba(24, 20, 17, 0.95) 100%);
  backdrop-filter: blur(8px);
}

.vs-modal-top.modal-sticky-header-bar {
  position: sticky !important;
  top: 0 !important;
  justify-content: space-between;
  padding: 6px 4px 10px;
}

.vs-modal-top.modal-sticky-header-bar .vs-header-titles {
  flex: 1 1 auto;
  align-items: center;
  text-align: center;
}

.modal-universal-esc-btn,
button.poe2-crimson-close-btn.modal-universal-esc-btn,
button.d2-top-close-btn.modal-universal-esc-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1.5px solid #fbbf24 !important;
  background: linear-gradient(180deg, #991b1b 0%, #5c0f0f 100%) !important;
  color: #fef3c7 !important;
  font-family: var(--font-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.65),
    0 0 12px rgba(239, 68, 68, 0.35),
    inset 0 1px 0 rgba(254, 240, 138, 0.45) !important;
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease !important;
}

.modal-universal-esc-btn:hover,
button.poe2-crimson-close-btn.modal-universal-esc-btn:hover,
button.d2-top-close-btn.modal-universal-esc-btn:hover {
  filter: brightness(1.16);
  transform: translateY(-1px);
  border-color: #fde047 !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.78),
    0 0 16px rgba(251, 191, 36, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

.modal-universal-esc-btn:active,
button.poe2-crimson-close-btn.modal-universal-esc-btn:active,
button.d2-top-close-btn.modal-universal-esc-btn:active {
  transform: scale(0.96);
}

.modal-universal-esc-btn .esc-x-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(253, 224, 71, 0.55);
  color: #fde047;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.modal-universal-esc-btn .esc-label-text {
  letter-spacing: 0.03em;
  color: #fffbeb;
}

.modal-universal-esc-btn .esc-key-pill {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(15, 12, 10, 0.65);
  border: 1px solid rgba(251, 191, 36, 0.48);
  color: #fde047;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 900px) and (orientation: portrait),
       (max-width: 1024px) and (orientation: landscape),
       (max-height: 560px) and (orientation: landscape) {
  .modal-sticky-header-bar {
    padding: 4px 0 6px;
    margin-bottom: 8px;
    gap: 8px;
  }

  .modal-universal-esc-btn,
  button.poe2-crimson-close-btn.modal-universal-esc-btn,
  button.d2-top-close-btn.modal-universal-esc-btn {
    min-height: 30px !important;
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    gap: 5px !important;
  }

  .modal-universal-esc-btn .esc-key-pill {
    display: none;
  }
}

/* ============================================================================
 * STREAMLINED 1-CLICK LOGIN / REGISTER ACCOUNT MODAL
 * ============================================================================ */
.imperial-modal.account-auth-simple-modal {
  max-width: 640px !important;
  width: 94vw !important;
  padding: 16px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-quick-enter-card {
  background: linear-gradient(180deg, rgba(24, 32, 28, 0.92) 0%, rgba(16, 22, 19, 0.96) 100%);
  border: 1.5px solid rgba(74, 222, 128, 0.38);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.account-quick-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.account-quick-name-input {
  flex: 1 1 auto;
  font-size: 0.96rem !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(251, 191, 36, 0.5) !important;
  background: rgba(10, 14, 12, 0.9) !important;
  color: #fef3c7 !important;
}

.account-dice-btn {
  flex: 0 0 auto;
  padding: 8px 12px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(251, 191, 36, 0.55) !important;
  background: linear-gradient(180deg, rgba(66, 52, 24, 0.95) 0%, rgba(38, 29, 13, 0.98) 100%) !important;
  color: #fde047 !important;
  white-space: nowrap;
}

.account-quick-cta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.account-main-quick-btn {
  flex: 1 1 240px;
  padding: 10px 16px !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  text-align: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

.account-biometric-compact-btn {
  flex: 0 1 auto;
  padding: 9px 12px !important;
  font-size: 0.78rem !important;
  border-radius: 8px !important;
  white-space: nowrap;
}

.account-quick-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.account-saved-section {
  background: rgba(18, 16, 14, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-saved-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.account-saved-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #fde047;
}

.account-saved-section .account-vault-list {
  max-height: 155px;
  overflow-y: auto;
}

.account-advanced-drawer {
  background: rgba(18, 15, 13, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  overflow: hidden;
}

.account-advanced-summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.account-advanced-summary::-webkit-details-marker {
  display: none;
}

.account-advanced-drawer[open] .account-advanced-chevron {
  transform: rotate(180deg);
}

.account-advanced-body {
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ============================================================================
   10. 武聖無雙塔・三國名將將魂錄視窗 (Musou Tower & General Soul Compendium)
   ============================================================================ */
.musou-tower-modal {
  width: min(1160px, 96vw) !important;
  max-height: 92vh !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 16px 20px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(168, 85, 247, 0.16), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(251, 191, 36, 0.14), transparent 50%),
    linear-gradient(180deg, rgba(20, 16, 24, 0.98) 0%, rgba(12, 10, 16, 0.99) 100%) !important;
  border: 1.5px solid rgba(192, 132, 252, 0.48) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85), 0 0 36px rgba(168, 85, 247, 0.22) !important;
}

.tower-essence-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.65), rgba(30, 27, 75, 0.85));
  border: 1px solid rgba(192, 132, 252, 0.65);
  color: #f3e8ff;
  font-size: 0.85rem;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}

.tower-essence-pill strong {
  color: #fde047;
  font-size: 1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.tower-challenge-hero-banner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(32, 22, 42, 0.92), rgba(20, 17, 26, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.38);
}

.tower-floor-selector-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tower-floor-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(12, 10, 16, 0.78);
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid rgba(192, 132, 252, 0.3);
}

.tower-floor-step-btn {
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
}

.tower-floor-title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tower-floor-sub {
  font-size: 0.72rem;
  color: #c084fc;
  font-weight: 700;
}

.tower-floor-main {
  font-size: 1.15rem;
  color: #fde047;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.tower-floor-preview-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(15, 13, 20, 0.88);
  border: 1px solid rgba(251, 191, 36, 0.28);
}

.tower-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tower-preview-boss {
  font-size: 0.98rem;
  font-weight: 900;
  color: #fef08a;
}

.tower-preview-mod {
  font-size: 0.76rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.24);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fca5a5;
  font-weight: 700;
}

.tower-preview-drop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed rgba(192, 132, 252, 0.28);
  font-size: 0.82rem;
  color: #e9d5ff;
}

.tower-active-soul-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.tower-equipped-soul-banner {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(59, 25, 92, 0.55), rgba(18, 15, 26, 0.92));
  border: 1px solid rgba(192, 132, 252, 0.55);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.tower-start-battle-btn {
  width: 100%;
  padding: 12px 18px !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #b45309 0%, #d97706 45%, #f59e0b 100%) !important;
  color: #fffbeb !important;
  border: 1.5px solid #fde047 !important;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.45) !important;
}

.tower-compendium-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tower-compendium-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.tower-compendium-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #fde047;
}

.tower-compendium-header p {
  margin: 3px 0 0 0;
  font-size: 0.78rem;
  color: #cbd5e1;
}

.tower-collection-badge {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(250, 204, 21, 0.45);
  color: #fde047;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.musou-soul-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 10px;
}

.musou-soul-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(19, 17, 26, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.25);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.musou-soul-card.owned {
  border-color: rgba(192, 132, 252, 0.52);
  background: linear-gradient(160deg, rgba(40, 24, 60, 0.72), rgba(17, 15, 24, 0.95));
}

.musou-soul-card.equipped {
  border: 1.5px solid #fde047;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.32), inset 0 0 14px rgba(168, 85, 247, 0.22);
}

.musou-soul-card.max-star-foil {
  border-color: #facc15;
  background: linear-gradient(155deg, rgba(66, 32, 6, 0.78) 0%, rgba(46, 16, 101, 0.65) 55%, rgba(17, 15, 24, 0.96) 100%);
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.28), inset 0 0 16px rgba(251, 191, 36, 0.16);
}

.musou-faction-pill {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.musou-faction-pill.wei {
  background: rgba(30, 58, 138, 0.75);
  border-color: #60a5fa;
  color: #dbeafe;
}

.musou-faction-pill.wu {
  background: rgba(127, 29, 29, 0.75);
  border-color: #f87171;
  color: #fee2e2;
}

.musou-faction-pill.qun {
  background: rgba(88, 28, 135, 0.75);
  border-color: #c084fc;
  color: #f3e8ff;
}

.musou-soul-card.locked {
  opacity: 0.78;
}

.musou-soul-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.musou-soul-title-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.musou-soul-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: rgba(15, 12, 22, 0.9);
  border: 1px solid rgba(250, 204, 21, 0.4);
  flex-shrink: 0;
}

.musou-soul-name {
  font-size: 0.9rem;
  font-weight: 900;
  color: #fef08a;
  line-height: 1.2;
}

.musou-soul-sub {
  font-size: 0.71rem;
  color: #c4b5fd;
  margin-top: 2px;
}

.musou-soul-stars {
  font-size: 0.76rem;
  font-weight: 900;
  color: #facc15;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(250, 204, 21, 0.35);
}

.musou-soul-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.musou-soul-stat-pill {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #e2e8f0;
  font-weight: 600;
}

.musou-soul-passive-box {
  font-size: 0.74rem;
  line-height: 1.38;
  color: #f3e8ff;
  background: rgba(88, 28, 135, 0.24);
  border-left: 3px solid #c084fc;
  padding: 5px 8px;
  border-radius: 4px;
}

.musou-soul-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.musou-soul-actions .imperial-btn {
  flex: 1;
  padding: 5px 8px !important;
  font-size: 0.74rem !important;
  text-align: center;
  justify-content: center;
}

@media (max-width: 820px) {
  .tower-challenge-hero-banner {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
 * CHARACTER SHEET EQUIPPED GENERAL SOUL STRIP & OFF-SCREEN RENDERING (CWV)
 * ============================================================================ */
.tk-res-soul-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(216, 180, 254, 0.25);
  flex-wrap: wrap;
}

.tk-res-soul-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.74rem;
}

.tk-res-soul-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 5px;
  border: 1px solid rgba(192, 132, 252, 0.55);
  background: rgba(88, 28, 135, 0.35);
  color: #e9d5ff;
  font-weight: 800;
  font-size: 0.68rem;
}

.tk-res-soul-stars {
  color: #facc15;
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: 0.72rem;
}

.tk-res-soul-passive {
  color: #cbd5e1;
  font-size: 0.71rem;
}

.tk-open-tower-pill {
  border-color: rgba(192, 132, 252, 0.65) !important;
  background: linear-gradient(180deg, rgba(88, 28, 135, 0.55) 0%, rgba(46, 16, 101, 0.75) 100%) !important;
  color: #f3e8ff !important;
  font-weight: 800 !important;
}

.tk-open-tower-pill:hover {
  border-color: #facc15 !important;
  color: #fef08a !important;
}

/* Defer off-screen rendering for heavy modal card grids (modern-web-guidance: defer-rendering-heavy-content) */
.musou-soul-card,
.arpg-item-card,
.gear-card {
  content-visibility: auto;
  contain-intrinsic-size: auto none auto 180px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}