/* Phase 16F — Torn Visual Texture: CSS Variables + Global Surface */
:root {
  --bg-base: #0a0a0a;
  --bg-surface: #111111;
  --bg-raised: #1a1a1a;
  --bg-elevated: #222222;
  --border-dark: #1a1a1a;
  --border-mid: #2a2a2a;
  --border-light: #333333;
  --gold: #c9a45c;
  --gold-dim: #8a6a2a;
  --text: #c9c9c9;
  --text-muted: #666666;
  --text-dim: #444444;
  --blue: #4f6d8f;
  --red: #a84a4a;
  --green: #688f5a;
  --purple: #7a5a9a;
}

/* Worn metallic body surface */
body {
  background: var(--bg-base);
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  line-height: 1.3;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,.03) 2px,
      rgba(0,0,0,.03) 4px
    );
  background-attachment: fixed;
}

/* Phase 16D — Empty space population: mm-section always fills viewport */
.page-frame {
  min-height: calc(100vh - 80px);
  padding: 4px 4px 60px;
}

.guidance-strip {
  font-size: 13px;
  font-weight: 600;
  color: rgba(230,192,123,0.85);
  padding: 6px 10px;
  letter-spacing: 0.02em;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Phase 46: Session rhythm — live cultivating indicator pulse */
.guidance-strip.culti-live {
  color: #4fc3f7;
  animation: culti-pulse 2s ease-in-out infinite;
}
@keyframes culti-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.mm-section-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-bottom: 1px solid var(--border-mid);
  margin-bottom: 2px;
  margin-top: 2px;
}
.mm-row-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 36px;
}
.mm-row-value {
  font-size: 11px;
  color: var(--text);
}
.mm-section {
  border: 1px solid var(--border-mid);
  background: var(--bg-surface);
  padding: 4px;
  margin-bottom: 4px;
}
.mm-row {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 6px;
  border-bottom: 1px solid var(--border-dark);
  gap: 4px;
  font-size: 10px;
}
.mm-row:nth-child(even) {
  background: rgba(255,255,255,.015);
}
.mm-strip {
  display: flex;
  gap: 3px;
  padding: 3px 2px;
  flex-wrap: wrap;
}

/* Phase 16 — Torn Visual Parity: Global Resets */
*, *::before, *::after {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0 !important;
}

/* Phase 16A — Torn Button System */
.console-btn {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  min-height: 24px;
  height: auto;
  padding: 2px 8px;
  border: 1px solid #111;
  background: linear-gradient(to bottom, #4b4b4b 0%, #2d2d2d 48%, #1c1c1c 52%, #2a2a2a 100%);
  color: #d4d4d4;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.6);
  transition: none;
}
.console-btn:hover {
  background: linear-gradient(to bottom, #585858 0%, #3a3a3a 48%, #262626 52%, #363636 100%);
  border-color: #222;
  color: #e6c377;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.6);
  filter: none;
}
.console-btn:active {
  background: linear-gradient(to bottom, #1c1c1c 0%, #2a2a2a 48%, #3a3a3a 52%, #2a2a2a 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
  transform: none;
}
.console-btn.primary {
  background: linear-gradient(to bottom, #5a4a2a 0%, #3d321a 48%, #2a220e 52%, #3a2a14 100%);
  border-color: #8a6a2a;
  color: #e6c377;
  box-shadow: inset 0 1px 0 rgba(230,192,123,.2), inset 0 -1px 0 rgba(0,0,0,.6), 0 0 6px rgba(230,192,123,.15);
}
.console-btn.primary:hover {
  background: linear-gradient(to bottom, #6a5a3a 0%, #4d422a 48%, #3a321e 52%, #4a3a24 100%);
  color: #f0d090;
  box-shadow: inset 0 1px 0 rgba(230,192,123,.3), inset 0 -1px 0 rgba(0,0,0,.6), 0 0 8px rgba(230,192,123,.25);
}
.console-btn.secondary {
  background: linear-gradient(to bottom, #2a3a4a 0%, #1c2836 48%, #121c28 52%, #1c2836 100%);
  border-color: #2a4a6a;
  color: #7ab8e6;
  box-shadow: inset 0 1px 0 rgba(100,160,220,.1), inset 0 -1px 0 rgba(0,0,0,.6);
}
.console-btn.danger {
  background: linear-gradient(to bottom, #4a2a2a 0%, #3a1c1c 48%, #2a1010 52%, #3a1c1c 100%);
  border-color: #6a2a2a;
  color: #e68080;
  box-shadow: inset 0 1px 0 rgba(220,100,100,.1), inset 0 -1px 0 rgba(0,0,0,.6);
}
.console-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.console-btn.small {
  padding: 1px 5px;
  font-size: 10px;
  min-height: 20px;
}

/* Phase 16B — HUD Visual Rebuild */
.mm-hud-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 3px 6px;
  height: auto;
  min-height: 26px;
  background: linear-gradient(to bottom, #151515 0%, #0d0d0d 50%, #111 100%);
  border-bottom: 1px solid #222;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  color: #aaa;
  position: relative;
}
.mm-hud-strip::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,192,123,0.2), transparent);
}
.hud-label {
  font-size: 9px;
  color: #666;
  margin-right: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hud-val {
  color: #ccc;
  margin: 0 3px;
}
.hud-gold { color: #e6c377; }
.hud-hp-fill { background: #4ade80; }
.hud-qi-fill { background: #60a5fa; }
.hud-stamina-fill { background: #fb923c; }
.hud-bar-wrap {
  display: inline-block;
  width: 32px;
  height: 3px;
  background: #1a1a1a;
  border: 1px solid #333;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  margin: 0 2px;
}
.hud-bar-fill {
  display: block;
  height: 100%;
  transition: width 0.3s;
}
.hud-sep2 {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: #2a2a2a;
  margin: 0 5px;
  vertical-align: middle;
}
.hud-sep3 {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: #333;
  margin: 0 6px;
  vertical-align: middle;
}
.hud-realm { color: #e6c377; font-size: 10px; }
.hud-level { color: #aaa; font-size: 10px; }
.hud-culti { color: #4fc3f7; font-size: 10px; }
.hud-offline { color: #a78bfa; font-size: 10px; }
.hud-cd { color: #f97316; font-size: 10px; }

/* Phase 17 FIX #7 — Text collision prevention: ALL critical labels */
.hud-label, .hud-val, .mm-row-label, .mm-row-value, .mm-section-header,
.shell-top-nav-item, .shell-top-nav-item .nav-icon, .shell-top-nav-item .nav-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Phase 18D — Inline action button: auto-width, NOT full-width */
.mm-btn-inline {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 8px;
  font-size: 10px;
  min-width: 0;
  white-space: nowrap;
}

/* Phase 18E — Persistent side info strip at page bottom */
.mm-side-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px 6px;
  border-top: 1px solid var(--border-mid);
  background: var(--bg-surface);
  font-size: 9px;
  line-height: 1.3;
}
.mm-side-info .side-info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  padding: 1px 4px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border-dark);
  color: var(--text-muted);
  min-width: 0;
  overflow: hidden;
}
.mm-side-info .side-info-label {
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.mm-side-info .side-info-value {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Phase 18F — Combat log: 120px, 9px, auto-append */
.mm-combat-log {
  height: 120px;
  overflow-y: auto;
  padding: 4px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  font-size: 9px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mm-combat-log .log-entry {
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mm-combat-log .log-entry.log-damage { color: #e07070; }
.mm-combat-log .log-entry.log-heal { color: #70c070; }
.mm-combat-log .log-entry.log-loot { color: #c9a45c; }
.mm-combat-log .log-entry.log-system { color: #7090c0; }
.mm-combat-log .log-entry.log-crit { color: #f97316; }
.mm-combat-log .log-entry.log-dodge { color: #60a5fa; }
/* Phase 19C — Realm Progression Strip */
.realm-progress-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  padding: 3px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  overflow: hidden;
}
.realm-progress-strip .realm-bar {
  flex: 1;
  height: 3px;
  background: var(--border-dark);
}
.realm-progress-strip .realm-fill {
  height: 100%;
  background: var(--gold);
}
.realm-progress-strip .realm-label { color: var(--text); }
.realm-progress-strip .realm-rate { color: var(--gold); font-size: 9px; }
.debug-layout * { outline: 1px solid rgba(255, 0, 0, 0.15) !important; }

/* Phase 18A — Layout Engine: Unified MMO Chrome 54px Top
   Single source of truth for all shell heights */
:root {
  /* Shell layer heights */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Phase 18C: topbar now = 74px (3px accent + 24px stats + 27px nav + 20px ticker) */
  --topbar-height: 74px;

  /* Combined offsets — no more separate hud-height */
  --shell-height: calc(var(--safe-top) + var(--topbar-height));

  /* Mobile override (no desktop topbar/sidebar) */
  --shell-top: var(--safe-top);    /* historical alias, keep for compat */
}

@media (max-width: 767px) {
  :root {
    --topbar-height: 74px;
  }
}
@media (min-width: 768px) {
  :root {
    --topbar-height: 0px;
  }
}

/* Phase 18C — Global Live Ticker (inside topbar on mobile, hidden on desktop sidebar) */
.mm-live-ticker {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  background: rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(230,192,123,0.15);
  font-size: 10px;
  color: rgba(200,200,200,0.8);
  overflow: hidden;
  flex-shrink: 0;
}
.mm-live-ticker .ticker-tag {
  color: var(--gold-dim, #8a6a2a);
  flex-shrink: 0;
  font-size: 9px;
}
.mm-live-ticker .ticker-msg {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.4s ease;
  opacity: 1;
}
/* Phase 19A: World feed rarity color tiers */
.ticker-msg.rare { color: #c9a45c; }
.ticker-msg.legendary { color: #e6c377; text-shadow: 0 0 8px rgba(230,192,123,0.6); }

/* Phase 19E: Status strip indicator in topbar */
.topbar-status-indicator {
  font-size: 9px;
  color: var(--text-muted, rgba(200,200,200,0.5));
  white-space: nowrap;
}

/* Phase 19I: Dopamine popup animations */
.mmo-dopamine-popup {
  position: fixed;
  bottom: 80px;
  right: 12px;
  z-index: 9999;
  padding: 4px 8px;
  font-size: 9px;
  background: var(--bg-surface, #1a1a2e);
  border: 1px solid var(--gold, #c9a45c);
  color: var(--gold, #c9a45c);
  animation: dopamine-pop 3s forwards;
  pointer-events: none;
}
@keyframes dopamine-pop {
  0% { opacity: 0; transform: translateY(8px); }
  10% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
.mmo-dopamine-popup.rare {
  box-shadow: 0 0 12px rgba(230,192,123,0.5);
  border-color: #e6c377;
}
.mmo-dopamine-popup.loot { border-color: #3fb950; color: #3fb950; }
.mmo-dopamine-popup.buff { border-color: #7090c0; color: #7090c0; }

/* Also apply rarity styling to sidebar ticker-text */
.ticker-text.rare { color: #c9a45c; }
.ticker-text.legendary { color: #e6c377; text-shadow: 0 0 8px rgba(230,192,123,0.6); }

* { box-sizing: border-box; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(230,192,123,0.2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(230,192,123,0.4); }

/* ── Torn KPI Card — home dashboard numeric panels ───────────────────── */
.kpi-cards-row {
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-top: 3px;
}
.kpi-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(230,192,123,0.15);
  border-radius: 3px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
  overflow: hidden;
}
/* subtle top accent line */
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0.4;
}
.kpi-card .kpi-icon {
  font-size: 14px;
  margin-bottom: 2px;
}
.kpi-card .kpi-label {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kpi-card .kpi-value {
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  line-height: 1.2;
}
.kpi-card .kpi-sub {
  color: var(--muted);
  font-size: 10px;
}
.kpi-card.accent-blue::before { background: linear-gradient(90deg, #58a6ff, transparent); }
.kpi-card.accent-purple::before { background: linear-gradient(90deg, #bc8cff, transparent); }
.kpi-card.accent-green::before { background: linear-gradient(90deg, #3fb950, transparent); }
.kpi-card.accent-red::before { background: linear-gradient(90deg, #f85149, transparent); }
.kpi-card.accent-amber::before { background: linear-gradient(90deg, #e6c377, transparent); }

/* ── Toast / Floating Notification (Phase UI-REDESIGN) ──────────────── */
#toast-container {
  position: fixed;
  top: 60px;
  right: 10px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
  max-width: 260px;
}
.toast {
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 11px;
  font-family: var(--font-mono, 'Courier New', monospace);
  color: var(--text, #c9d1d9);
  background: rgba(12, 16, 24, 0.96);
  border: 1px solid rgba(230,192,123,0.3);
  border-left: 3px solid rgba(230,192,123,0.6);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateX(20px);
  animation: toast-in 0.2s ease forwards, toast-out 0.2s ease 1.8s forwards;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.success { border-left-color: rgba(63,185,80,0.7); color: #3fb950; }
.toast.error   { border-left-color: rgba(248,81,73,0.7);  color: #f85149; }
.toast.gold    { border-left-color: rgba(230,192,123,0.7); color: #e6c377; }
.toast.info    { border-left-color: rgba(88,166,255,0.7);  color: #58a6ff; }
.toast.warning { border-left-color: rgba(255,166,87,0.7);  color: #ffa657; }
.toast.loot    { border-left-color: rgba(230,192,123,0.8); color: #e6c377; font-weight: bold; }
@keyframes toast-in  { to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* ── Activity Feed Timestamps (Phase UI-REDESIGN) ────────────────────── */
.activity-item { position: relative; }
.activity-item .activity-time {
  font-size: 9px;
  color: var(--muted);
  margin-left: auto;
  flex-shrink: 0;
}
.activity-item.loot-type .activity-dot { background: #e6c377; }
.activity-item.loot-type .activity-text { color: #e6c377; }
.activity-item.success-type .activity-dot { background: #3fb950; }
.activity-item.success-type .activity-text { color: #3fb950; }
.activity-item.danger-type .activity-dot { background: #f85149; }
.activity-item.danger-type .activity-text { color: #f85149; }
.activity-item.warning-type .activity-dot { background: #ffa657; }
.activity-item.warning-type .activity-text { color: #ffa657; }

/* ── Button Polish (Phase UI-REDESIGN) ─────────────────────────────── */
.console-btn {
  transition: background 0.1s, border-color 0.1s, transform 0.05s;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 3px;
}
.console-btn:hover { filter: brightness(1.15); }
.console-btn:active { transform: scale(0.97); filter: brightness(0.9); }
.console-btn.primary { background: rgba(230,192,123,0.15); border-color: rgba(230,192,123,0.35); }
.console-btn.primary:hover { background: rgba(230,192,123,0.25); }
.console-btn.danger { background: rgba(248,81,73,0.12); border-color: rgba(248,81,73,0.3); }
.console-btn.danger:hover { background: rgba(248,81,73,0.22); }
.console-btn.small { padding: 2px 7px; font-size: 10px; }
.console-btn.small:active { transform: scale(0.95); }

/* ── Active Nav State (Phase UI-REDESIGN) ──────────────────────────── */
.shell-top-nav-item.active,
.shell-nav-item.active {
  background: rgba(230,192,123,0.15);
  border-color: rgba(230,192,123,0.5);
  color: #e6c377;
}

/* ── Battle Party HP Summary (Phase UI-REDESIGN) ────────────────────── */
.battle-party-hp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
  margin: 4px 0;
}
.battle-party-member { flex: 1; min-width: 60px; }
.bpm-name { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bpm-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; margin: 2px 0; }
.bpm-fill { height: 100%; transition: width 0.3s; border-radius: 2px; }
.bpm-fill.hp-high { background: #3fb950; }
.bpm-fill.hp-mid  { background: #ffa657; }
.bpm-fill.hp-low  { background: #f85149; }
.bpm-val { font-size: 9px; color: var(--muted); text-align: center; }
/* Enemy HP bar in member card */
.battle-member-hp-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.battle-member-hp-fill { height: 100%; border-radius: 2px; }
.battle-member-hp-fill.hp-high { background: #f85149; }
.battle-member-hp-fill.hp-mid  { background: #ffa657; }
.battle-member-hp-fill.hp-low  { background: #3fb950; }
/* Boss HP bar */
.battle-member-card.is-boss .battle-member-hp-fill { background: #bc8cff; }
/* ── Battle Result Banner Rewards (Phase UI-REDESIGN) ──────────────── */
.battle-result-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 3px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}
.victory-banner {
  background: linear-gradient(135deg, rgba(230,192,123,0.15), rgba(63,185,80,0.08));
  border: 1px solid rgba(230,192,123,0.4);
  color: #e6c377;
}
.defeat-banner {
  background: rgba(248,81,73,0.08);
  border: 1px solid rgba(248,81,73,0.3);
  color: #f85149;
}
.br-icon { font-size: 18px; }
.br-label { font-size: 15px; font-weight: 700; min-width: 40px; }
.br-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.br-reward-item {
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
}
.br-reward-item.gold { color: #e6c377; }
.br-reward-item.muted { color: var(--muted); }

/* ── Battle Action Row (Phase UI-REDESIGN) ──────────────────────────── */
.battle-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 4px;
}
.battle-primary-action {
  font-size: 13px !important;
  padding: 6px 16px !important;
  font-weight: 700 !important;
}
.battle-primary-action[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.battle-secondary-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.battle-danger-zone {
  margin-left: auto;
}

/* ── Battle Party HP — mobile readable (Phase UI-REDESIGN) ─────────── */
.battle-party-hp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}
.battle-party-member {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 80px;
  background: rgba(255,255,255,0.03);
  border-radius: 2px;
  padding: 2px 4px;
}
.bpm-name {
  font-size: 9px;
  color: var(--muted);
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bpm-bar {
  flex: 1;
  min-width: 30px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.bpm-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}
.bpm-fill.hp-high { background: #3fb950; }
.bpm-fill.hp-mid { background: #ffa657; }
.bpm-fill.hp-low { background: #f85149; }
.bpm-val { font-size: 8px; color: var(--muted); white-space: nowrap; }

/* ── Battle Member Card HP (enemy cards) (Phase UI-REDESIGN) ───────── */
.battle-member-hp-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin: 2px 0;
}
.battle-member-hp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}
.battle-member-card.enemy .bpm-fill,
.battle-member-card.enemy .battle-member-hp-fill {
  background: #f85149;
}
.battle-member-card.enemy.is-boss .battle-member-hp-fill {
  background: #bc8cff;
}

/* ── Battle Phase Indicator (Phase UI-REDESIGN) ─────────────────────── */
.battle-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
}
.battle-phase-badge.idle { background: rgba(255,255,255,0.06); color: var(--muted); }
.battle-phase-badge.active, .battle-phase-badge.battle { background: rgba(248,81,73,0.12); color: #f85149; }
.battle-phase-badge.victory { background: rgba(63,185,80,0.12); color: #3fb950; }
.battle-phase-badge.defeat { background: rgba(248,81,73,0.12); color: #f85149; }

/* ── Inventory Rarity Borders (Phase UI-REDESIGN) ───────────────────── */
.inventory-detail-item.rarity-common    { border-left: 2px solid #8b8b8b; }
.inventory-detail-item.rarity-uncommon  { border-left: 2px solid #3fb950; }
.inventory-detail-item.rarity-rare      { border-left: 2px solid #58a6ff; }
.inventory-detail-item.rarity-epic      { border-left: 2px solid #bc8cff; }
.inventory-detail-item.rarity-legendary { border-left: 2px solid #e6c377; }
/* Equipped state */
.inventory-slot-item.is-equipped {
  background: rgba(230,192,123,0.1);
  border: 1px solid rgba(230,192,123,0.3);
}
.inventory-slot-item.is-equipped::before {
  content: '⚡ ';
  font-size: 10px;
}

/* ── Torn Activity Feed ──────────────────────────────────────────────── */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  max-height: 120px;
  overflow-y: auto;
}
/* Scrolling live game log — auto-scrolls to bottom on new entries */
.live-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 160px;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 4px 0;
}
.live-log::-webkit-scrollbar { width: 3px; }
.live-log::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.live-log::-webkit-scrollbar-thumb { background: rgba(230,192,123,0.3); border-radius: 2px; }
.live-log-entry {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text);
  padding: 1px 4px;
/* ── Torn Activity Feed ──────────────────────────────────────────────── */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  max-height: 120px;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding-right: 2px;
}
.activity-feed::-webkit-scrollbar { width: 3px; }
.activity-feed::-webkit-scrollbar-thumb { background: rgba(230,192,123,0.2); border-radius: 2px; }
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 2px 4px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(230,192,123,0.15);
  border-radius: 0 2px 2px 0;
  font-size: 10px;
  transition: background 0.1s;
}
.activity-item:hover { background: rgba(255,255,255,0.05); }
.activity-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(200,200,200,0.3);
  flex-shrink: 0;
  margin-top: 4px;
}
.activity-item.loot-type .activity-dot { background: #e6c377; box-shadow: 0 0 4px rgba(230,192,123,0.5); }
.activity-item.success-type .activity-dot { background: #3fb950; box-shadow: 0 0 4px rgba(63,185,80,0.5); }
.activity-item.danger-type .activity-dot { background: #f85149; box-shadow: 0 0 4px rgba(248,81,73,0.5); }
.activity-item.warning-type .activity-dot { background: #ffa657; box-shadow: 0 0 4px rgba(255,166,87,0.5); }
.activity-item.event { border-left-color: rgba(88,166,255,0.4); }
.activity-item.warning { border-left-color: rgba(255,166,87,0.4); }
.activity-item.danger { border-left-color: rgba(248,81,73,0.4); }
.activity-item.success { border-left-color: rgba(63,185,80,0.4); }
.activity-item.event .activity-dot { background: #58a6ff; box-shadow: 0 0 4px rgba(88,166,255,0.5); }
.activity-item.warning .activity-dot { background: #ffa657; box-shadow: 0 0 4px rgba(255,166,87,0.5); }
.activity-item.danger .activity-dot { background: #f85149; box-shadow: 0 0 4px rgba(248,81,73,0.5); }
.activity-item.success .activity-dot { background: #3fb950; box-shadow: 0 0 4px rgba(63,185,80,0.5); }
.activity-text {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}
.activity-time {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
}

/* ── Home Dashboard RPG Status Rows (Phase UI-REDESIGN) ─────────────── */
.home-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.03);
  border-radius: 2px;
  border-left: 2px solid rgba(230,192,123,0.3);
  margin-bottom: 3px;
}
.hud-realm-tag { font-size: 11px; color: #e6c377; font-weight: bold; }
.hud-level-tag { font-size: 11px; color: #bc8cff; }
.hud-hp-tag    { font-size: 11px; color: #f85149; }
.hud-mp-tag   { font-size: 11px; color: #58a6ff; }
.hud-stones-tag { font-size: 11px; color: #3fb950; }
.home-realm-bar-row { padding: 0 6px; margin-bottom: 3px; }
.compact-bar { display: flex; align-items: center; gap: 6px; }
.compact-bar .realm-bar { flex: 1; }
.realm-bar-pct { font-size: 10px; color: var(--muted); flex-shrink: 0; }
.home-action-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 6px; margin-bottom: 3px; }
.home-action-row .console-btn.small { padding: 2px 6px; font-size: 10px; }
.home-info-row { gap: 4px; }
.home-compact-section { flex: 1; min-width: 0; }
.home-team-list { font-size: 11px; line-height: 1.5; }
.home-team-member { padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.home-skills-block { margin-top: 4px; }
.compact-chips { flex-wrap: wrap; gap: 3px; }
.home-loot-indicator { padding: 2px 6px 0; }
.pill-amber { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 2px; font-size: 10px; font-weight: bold; background: rgba(230,192,123,0.15); color: #e6c377; border: 1px solid rgba(230,192,123,0.3); }
.home-status-block { margin-bottom: 4px; }

/* ── Home Command Center (Phase UI-REDESIGN) ─────────────────────────── */
.home-warning-strip {
  background: rgba(248,81,73,0.12);
  border: 1px solid rgba(248,81,73,0.3);
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 10px;
  color: #f85149;
  margin-bottom: 3px;
  animation: hud-pulse 1.5s ease-in-out infinite;
}
.home-activity-block {
  margin-bottom: 3px;
}
.home-next-action {
  margin-top: 3px;
  padding: 2px 0;
}
.home-next-action .hud-cooldown-indicator {
  font-size: 10px;
  color: var(--muted);
  display: block;
}

/* ── Torn-style home command table (Phase 13B) ─────────────────── */
.home-cmd-table {
  width: 100%;
  border-collapse: collapse;
}
.home-cmd-row {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  gap: 4px;
  font-size: 11px;
}
.home-cmd-label {
  color: rgba(255,255,255,0.5);
  width: 50px;
  flex-shrink: 0;
}
.home-cmd-value {
  color: rgba(255,255,255,0.9);
}
.home-cmd-value.gold { color: #e6c377; }
.home-cmd-value.blue { color: #58a6ff; }
.home-cmd-value.green { color: #3fb950; }
.home-cmd-value.purple { color: #bc8cff; }
.home-cmd-value.red { color: #f85149; }

/* ── Torn-style battle rows (Phase 13B) ─────────────────────── */
.battle-row {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 6px;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 11px;
}
.battle-row-icon { width: 16px; text-align: center; }
.battle-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-row-hp { width: 60px; text-align: right; font-size: 10px; color: rgba(255,255,255,0.6); }
.battle-row-action { width: 32px; }
.battle-action-strip {
  display: flex;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.battle-roster-row { gap: 4px; }
.battle-roster-row .torn-module { margin-bottom: 0; }

/* ── Torn-style inventory rows (Phase 13B) ───────────────────── */
.inv-table {
  width: 100%;
  border-collapse: collapse;
}
.inv-row {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  gap: 4px;
  font-size: 11px;
}
.inv-rarity-stripe {
  width: 3px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 1px;
}
.inv-icon { width: 18px; text-align: center; font-size: 12px; }
.inv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-qty { width: 36px; text-align: right; color: rgba(255,255,255,0.6); font-size: 10px; }
.inv-actions { width: 24px; }
.material-dense-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 4px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 11px;
}
.material-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-qty { color: rgba(255,255,255,0.5); font-size: 10px; flex-shrink: 0; }

/* ── Hero Panel — KEPT for backward compat (hidden via .home-status-row priority) */
.home-hero-panel { display: none; }
.home-hero-avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(230,192,123,0.10);
  border: 1px solid rgba(230,192,123,0.30);
  border-radius: 8px;
  flex-shrink: 0;
}
.home-hero-info {
  flex: 1;
  min-width: 0;
}
.home-hero-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.home-hero-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.home-hero-vitals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.phase4-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.phase4-kpi-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.phase4-kpi {
  padding: 8px 10px;
  border: 1px solid rgba(230,192,123,0.1);
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phase4-kpi span {
  color: var(--muted);
  font-size: 10px;
}

.phase4-kpi strong {
  color: var(--gold);
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.phase4-delta-row,
.phase4-relations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.phase4-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
}

.phase4-pill.friendly {
  color: var(--green);
  border-color: rgba(63,185,80,0.35);
  background: rgba(63,185,80,0.12);
  box-shadow: 0 0 6px rgba(63,185,80,0.15);
}

.phase4-pill.neutral {
  color: var(--cyan);
  border-color: rgba(121,192,255,0.30);
  background: rgba(121,192,255,0.10);
  box-shadow: 0 0 6px rgba(121,192,255,0.12);
}

.phase4-pill.hostile {
  color: var(--red);
  border-color: rgba(248,81,73,0.30);
  background: rgba(248,81,73,0.10);
  box-shadow: 0 0 6px rgba(248,81,73,0.15);
}

.phase4-market-list,
.phase4-growth-list,
.phase4-task-list,
.phase4-pending-list,
.phase4-flow-list,
.phase4-world-events,
.phase4-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phase4-market-item,
.phase4-growth-item,
.phase4-event-item,
.phase4-pending-item,
.phase4-flow-item,
.phase4-check-item,
.phase4-task-item,
.phase4-next-card {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
}

.phase4-market-item,
.phase4-event-item,
.phase4-pending-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.phase4-market-item strong,
.phase4-event-item strong,
.phase4-pending-item strong,
.phase4-next-card strong,
.phase4-flow-item strong,
.phase4-offline-state,
.phase4-faction-head strong {
  color: var(--gold);
  display: block;
}

.phase4-market-item span,
.phase4-market-item em,
.phase4-event-item span,
.phase4-event-item p,
.phase4-pending-item span,
.phase4-pending-item p,
.phase4-next-card span,
.phase4-next-card em,
.phase4-flow-item span,
.phase4-offline-time,
.phase4-faction-head span,
.phase4-trend {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.phase4-market-meta {
  text-align: right;
}

.phase4-trend.hot,
.phase4-trend.rising {
  color: #ffa657;
}

.phase4-trend.steady {
  color: #79c0ff;
}

.phase4-check-head,
.phase4-faction-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 6px;
}

.phase4-offline-box,
.phase4-faction-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phase4-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

@media (max-width: 720px) {
  /* ── KPI grid: 2-col ─── */
  .phase4-kpi-grid,
  .phase4-kpi-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ── Two-column rows → stacked ─── */
  .torn-row-2col {
    flex-direction: column;
    gap: 8px;
  }

  /* ── City / Map Page (Phase UI-REDESIGN) ─────────────────────────────── */
.city-map-page .location-group { margin-bottom: 8px; }
.city-map-page .location-group-header {
  font-size: 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-bottom: 1px solid rgba(230,192,123,0.15);
  margin-bottom: 3px;
}
.location-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
  margin-bottom: 3px;
  cursor: pointer;
}
.location-row:hover, .location-row:active { background: rgba(255,255,255,0.06); }
.location-row.disabled { opacity: 0.5; cursor: not-allowed; }
.location-row.disabled:hover { background: rgba(255,255,255,0.03); }
.location-icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.location-info { flex: 1; min-width: 0; }
.location-name { font-size: 12px; color: var(--text); font-weight: bold; }
.location-desc { font-size: 10px; color: var(--muted); margin-top: 1px; }
.location-status { font-size: 10px; padding: 2px 6px; border-radius: 2px; background: rgba(230,192,123,0.1); color: var(--gold); border: 1px solid rgba(230,192,123,0.2); flex-shrink: 0; }
.location-row.disabled .location-status { background: rgba(100,100,100,0.1); color: var(--muted); border-color: rgba(100,100,100,0.2); }

/* ── KPI cards: 2-col grid ─── */
  .kpi-cards-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  /* ── Nav: icon-only on very small screens ─── */
  .shell-nav-item .nav-label { display: none; }
  .shell-nav-item .nav-icon { font-size: 22px; }
  .shell-nav { gap: 0; justify-content: space-around; }

  /* ── Page padding: reduce ─── */
  .page-frame { padding: 6px; }
  .torn-module { padding: 8px; }

  /* ── Cards: full-width list ─── */
  .console-card.roster-card,
  .console-card.recipe-card,
  .item-card { margin-left: 0; margin-right: 0; }

  /* ── monster-card-header: tighter ─── */
  .monster-card-header { padding: 6px 8px; }
  .monster-avatar { width: 36px; height: 36px; font-size: 18px; }

  /* ── Console stat row: compact ─── */
  .console-stat-row { font-size: 10px; padding: 2px 6px; }
  .console-stat-row.compact { display: none; /* hide ATK/DEF on very small screens */ }

  /* ── Home hero panel: stack vertically ─── */
  .home-hero-panel { flex-direction: column; align-items: flex-start; gap: 6px; }
  .home-hero-vitals { flex-direction: row; flex-wrap: wrap; gap: 6px; }

  /* ── Group page header: stack subnav ─── */
  .group-page-header { padding: 8px 10px; }
  .group-page-subnav { flex-wrap: wrap; gap: 4px; }

  /* ── Battle console: stack controls ─── */
  .battle-control-row { flex-direction: column; gap: 6px; }

  /* ── Market items ─── */
  .phase4-market-item,
  .phase4-event-item,
  .phase4-pending-item,
  .phase4-faction-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .phase4-market-meta { text-align: left; }
}

/* ── Small screens (360px and below): ultra-compact nav ─── */
@media (max-width: 360px) {
  .shell-nav-item { padding: 4px 2px; }
  .kpi-card { padding: 6px 4px; }
  .kpi-value { font-size: 16px; }

  /* ── Inventory grid: 1-col on very small ─── */
  .inventory-detail-list { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
}

@media (max-width: 720px) {
  /* ── Inventory grid: 2-col on mobile ─── */
  .inventory-detail-list { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

.console-module {
  position: relative;
}

.console-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.console-summary-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.console-kpi {
  padding: 10px 12px;
  border: 1px solid rgba(230,192,123,0.12);
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.console-kpi span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.console-kpi strong {
  color: var(--gold);
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.console-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px;
}
.battle-member-card {
  padding: 4px 6px;
  min-height: unset;
}
.battle-member-name { font-size: 11px; }
.battle-member-role { font-size: 10px; }

.reserve-grid,
.recruit-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.console-card {
  border: 1px solid rgba(230,192,123,0.14);
  border-left: 3px solid rgba(230,192,123,0.45);
  border-radius: 4px;
  background: rgba(8,10,14,0.85);
  padding: 4px 6px;
  margin-bottom: 3px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: all 0.18s ease;
}

.console-card:hover {
  border-color: rgba(230,192,123,0.30);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 12px rgba(230,192,123,0.10);
}

.console-card.is-critical {
  border-left-color: var(--red);
  box-shadow: inset 0 0 0 1px rgba(248,81,73,0.1);
}

.console-card.is-worn {
  border-left-color: #ffa657;
}

.console-card.is-dead {
  opacity: 0.55;
  filter: grayscale(0.25);
}

/* ── Monster Avatar — Torn-style enemy visual identifier ─────────────── */
/* Left-side icon box in battle member cards — distinguishes boss/elite/normal */
.monster-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  margin-right: 2px;
}
/* Normal enemy — muted steel */
.monster-avatar.normal {
  background: rgba(110,118,129,0.15);
  border-color: rgba(110,118,129,0.30);
  color: #8b949e;
}
/* Elite — blood red pulse */
.monster-avatar.elite {
  background: rgba(248,81,73,0.18);
  border-color: rgba(248,81,73,0.40);
  color: #f85149;
  box-shadow: 0 0 8px rgba(248,81,73,0.15);
}
/* Boss — imperial gold glow */
.monster-avatar.boss {
  background: rgba(230,192,123,0.20);
  border-color: rgba(230,192,123,0.55);
  color: #e6c377;
  box-shadow: 0 0 12px rgba(230,192,123,0.20);
  border-radius: 6px;
}
/* Player char — jade */
.monster-avatar.player {
  background: rgba(63,185,80,0.15);
  border-color: rgba(63,185,80,0.35);
  color: #3fb950;
}

/* Monster card header: avatar + name + badges in one row */
.monster-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.monster-card-header .monster-name-wrap {
  flex: 1;
  min-width: 0;
}

/* Boss-specific: danger stripe top border on card */
.console-card.tier-boss {
  border-top: 2px solid rgba(230,192,123,0.45);
}
.console-card.tier-elite {
  border-top: 2px solid rgba(248,81,73,0.30);
}

/* ── Torn HP/MP Bar Enhancement ──────────────────────────────────────── */
/* HP bar: wider, stronger red fill with subtle glow for low HP */
.console-progress-fill.hp {
  background: linear-gradient(90deg, #c83a3a, #e85555);
  border-radius: 2px;
  height: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  transition: width 0.3s ease;
}
.console-progress-fill.hp.critical {
  background: linear-gradient(90deg, #9b2020, #c83030);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 6px rgba(248,81,73,0.30);
  animation: hp-critical-pulse 1.5s ease-in-out infinite;
}
@keyframes hp-critical-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 6px rgba(248,81,73,0.30); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 12px rgba(248,81,73,0.50); }
}

.console-progress-fill.mp {
  background: linear-gradient(90deg, #3a6ac8, #5580e8);
  border-radius: 2px;
  height: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  transition: width 0.3s ease;
}

.console-card.is-recommended {
  border-left-color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(63,185,80,0.1);
}

.console-card-head,
.console-meta-row,
.console-state-row,
.console-badge-row,
.console-stat-row,
.console-action-grid {
  display: flex;
  align-items: center;
  gap: 8px;
}

.console-card-head,
.console-meta-row,
.console-state-row,
.console-stat-row {
  justify-content: space-between;
}

.console-card-title {
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
}

.console-card-sub {
  color: var(--muted);
  font-size: 11px;
}

.console-card-badges,
.console-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.console-progress {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}

.console-progress-fill {
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 6px rgba(63,185,80,0.4);
}

/* Removed duplicate .hp/.mp — now at .console-progress-fill.hp.mp section above */

.console-stat-row span,
.console-meta-row span {
  color: var(--muted);
  font-size: 11px;
}

.console-stat-row strong,
.console-meta-row strong {
  color: var(--text);
  font-size: 11px;
}

.console-action-grid {
  flex-wrap: wrap;
}

.console-action-grid.compact {
  justify-content: flex-start;
}

.console-helper-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.console-helper-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  transition: all 0.18s ease;
}

.cultivation-info-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cultivation-info-note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}

/* (Phase 16A button styles moved to top of file) */

.console-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.console-log-list {
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scroll-behavior: smooth;
}
.console-log-list.collapsed {
  display: none;
}
.console-log-entry {
  font-size: 11px;
  padding: 1px 4px;
  border-left: 2px solid rgba(230,192,123,0.2);
  background: rgba(255,255,255,0.03);
}
.console-log-entry.damage { border-left-color: rgba(248,81,73,0.5); color: #f85149; }
.console-log-entry.heal   { border-left-color: rgba(63,185,80,0.5);  color: #3fb950; }
.console-log-entry.loot  { border-left-color: rgba(230,192,123,0.5); color: #e6c377; }
.console-log-entry.info  { border-left-color: rgba(88,166,255,0.4); color: #58a6ff; }
.console-log-entry.warning { border-left-color: rgba(255,166,87,0.5); color: #ffa657; }
.console-log-entry.victory { border-left-color: rgba(63,185,80,0.6); color: #3fb950; font-weight: bold; }
.console-log-entry.defeat { border-left-color: rgba(248,81,73,0.6); color: #f85149; font-weight: bold; }

.console-log-entry.turn,
.console-log-entry.log-line-turn {
  border-left-color: var(--gold);
  color: var(--gold);
}

.console-log-entry.crit,
.console-log-entry.log-line-crit,
.console-log-entry.system,
.console-log-entry.log-line-system {
  border-left-color: #ffa657;
}

.console-log-entry.error,
.console-log-entry.log-line-error {
  border-left-color: var(--red);
  color: #ffb4ac;
}

.console-log-entry.turn-summary,
.console-log-entry.log-line-turn-summary {
  border-left-color: var(--blue);
}

.console-empty,
.torn-empty-inline {
  color: var(--muted);
  font-size: 11px;
}

.console-analysis-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.console-analysis-item {
  color: var(--text);
  font-size: 11px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
}

.console-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.legacy-shell-panel {
  margin-top: 12px;
  border-top: 1px solid rgba(230,192,123,0.12);
  padding-top: 10px;
}

.torn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.08);
  text-transform: uppercase;
}

.torn-badge.role-badge {
  color: var(--cyan);
  border-color: rgba(121,192,255,0.35);
  background: rgba(121,192,255,0.12);
  box-shadow: 0 0 6px rgba(121,192,255,0.15);
}

.torn-badge.safe-badge,
.torn-badge.status-safe {
  color: var(--green);
  border-color: rgba(63,185,80,0.35);
  background: rgba(63,185,80,0.12);
  box-shadow: 0 0 6px rgba(63,185,80,0.15);
}

.torn-badge.danger-badge,
.torn-badge.status-danger {
  color: var(--red);
  border-color: rgba(248,81,73,0.35);
  background: rgba(248,81,73,0.12);
  box-shadow: 0 0 6px rgba(248,81,73,0.20);
}

.torn-badge.elite-badge {
  color: var(--gold);
  border-color: rgba(230,192,123,0.45);
  background: rgba(230,192,123,0.15);
  box-shadow: 0 0 8px rgba(230,192,123,0.25);
}

.torn-badge.rare-badge {
  color: var(--purple);
  border-color: rgba(188,140,255,0.40);
  background: rgba(188,140,255,0.12);
  box-shadow: 0 0 6px rgba(188,140,255,0.20);
}
.home-module {
  min-height: 0;
}
.home-stat-grid,
.home-team-readiness,
.home-next-action,
.home-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-hero-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(230,192,123,0.5), 0 2px 6px rgba(0,0,0,0.6);
  letter-spacing: 0.05em;
}
.home-hero-meta {
  color: var(--text);
  font-size: 12px;
}
.home-vitals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vital-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vital-label {
  font-size: var(--font-xs);
  color: var(--muted);
  min-width: 28px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.vital-bar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vital-bar {
  flex: 1;
  height: 16px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.vital-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.vital-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent);
}
.vital-hp .vital-bar { border: 1px solid rgba(248,81,73,0.35); }
.vital-hp .vital-bar-fill { background: linear-gradient(90deg, #f85149, #ff7b72); }
.vital-mp .vital-bar { border: 1px solid rgba(121,192,255,0.35); }
.vital-mp .vital-bar-fill { background: linear-gradient(90deg, #58a6ff, #79c0ff); }
.vital-num {
  font-size: var(--font-xs);
  font-weight: 700;
  min-width: 60px;
  text-align: right;
}
.vital-num.hp { color: var(--red); }
.vital-num.mp { color: var(--blue); }
.vital-progress {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2px;
}
.vital-progress .prog-fill-hp {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #c83a3a, #e85555);
  transition: width 0.4s ease;
}
.vital-progress .prog-fill-mp {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #3a6ac8, #5580e8);
  transition: width 0.4s ease;
}
.vital-res-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.vital-res-row .res-icon { font-size: 12px; }
.vital-res-row .res-label { color: var(--muted); font-size: var(--font-xs); min-width: 36px; }
.vital-res-row .res-val { color: var(--text); font-size: var(--font-sm); font-weight: 600; }
.home-summary-note,
.home-progress-caption {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.home-progress-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.home-readiness-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
}
.home-readiness-top strong {
  color: var(--gold);
  font-size: 18px;
}
.home-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(121,192,255,0.30);
  background: linear-gradient(135deg, rgba(121,192,255,0.12), rgba(188,140,255,0.08));
  font-size: 11px;
  color: var(--cyan);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}
.home-chip:hover {
  background: linear-gradient(135deg, rgba(121,192,255,0.20), rgba(188,140,255,0.15));
  box-shadow: 0 0 8px rgba(121,192,255,0.25);
}
.home-chip.muted {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  box-shadow: none;
}
.home-action-title {
  color: var(--gold);
  font-size: 16px;
  font-weight: 700;
}
.home-cta-btn,
.home-shortcut-btn,
.inv-resource-item.is-link,
.mini-link-btn,
.module-toggle-btn {
  cursor: pointer;
}
.home-cta-btn {
  min-height: 40px;
  border: 1px solid rgba(230,192,123,0.35);
  background: linear-gradient(135deg, rgba(230,192,123,0.22), rgba(188,140,255,0.12));
  color: var(--gold);
  font-weight: 700;
  border-radius: 4px;
  padding: 10px 12px;
}
.home-cta-btn.secondary,
.mini-link-btn,
.module-toggle-btn {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
}
.module-toggle-btn {
  margin-left: auto;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
}
.home-event-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-event-list.collapsed {
  display: none;
}
.home-event-line {
  font-size: 11px;
  color: var(--text);
  padding: 7px 8px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid rgba(188,140,255,0.45);
}
.home-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.home-shortcut-btn,
.inv-resource-item.is-link {
  width: 100%;
  border: 1px solid rgba(230,192,123,0.15);
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all 0.18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.inv-resource-item.is-link:hover {
  border-color: rgba(230,192,123,0.35);
  background: rgba(230,192,123,0.08);
  box-shadow: 0 0 12px rgba(230,192,123,0.15), 0 4px 12px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}
.shortcut-icon {
  color: var(--gold);
  font-size: 18px;
}
.shortcut-main {
  font-size: 13px;
  font-weight: 700;
}
.shortcut-hint,
.inv-resource-item.is-link em {
  font-size: 10px;
  color: var(--muted);
  font-style: normal;
}
.inv-resources-strip {
  padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.cultivation-anchor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cultivation-craft-brief {
  border-style: dashed;
}
.mini-link-btn {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.08);
  letter-spacing: 0.03em;
  font-weight: 600;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.mini-link-btn:hover {
  border-color: rgba(230,192,123,0.28);
  color: var(--gold);
  background: rgba(230,192,123,0.08);
}

.mini-link-btn.active {
  background: linear-gradient(135deg, rgba(230,192,123,0.22), rgba(188,140,255,0.10));
  border-color: rgba(230,192,123,0.45);
  color: var(--gold);
  box-shadow: 0 0 10px rgba(230,192,123,0.20), inset 0 1px 0 rgba(255,255,255,0.05);
  text-shadow: 0 0 8px rgba(230,192,123,0.4);
}

.group-page-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12, 16, 24, 0.97), rgba(12, 16, 24, 0.92));
  backdrop-filter: blur(8px);
  border-radius: 3px;
  padding: 4px 6px;
  min-height: unset;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.group-page-header .torn-module-header {
  font-size: 11px;
  margin-bottom: 0;
}
.group-page-subnav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  padding: 4px 10px;
  position: relative;
  min-height: 36px;
  background: linear-gradient(180deg, rgba(230,192,123,0.04), transparent);
  border-bottom: 1px solid rgba(230,192,123,0.10);
}
.group-page-subnav::-webkit-scrollbar { display: none; }
.practice-section,
.management-section,
.inventory-section,
.console-module {
  scroll-margin-top: calc(var(--shell-height) + 12px);
}

.battle-console-page .group-page-header {
  border-top: 2px solid rgba(248,81,73,0.35);
}

.team-console-page .group-page-header {
  border-top: 2px solid rgba(88,166,255,0.32);
}

.recruit-console-page .group-page-header {
  border-top: 2px solid rgba(188,140,255,0.34);
}

.page-management-content .group-page-header,
.page-management-content .management-section,
.page-management-content .torn-module,
.page-management-content .phase4-module {
  border-color: rgba(230,192,123,0.12);
}

.page-management-content .management-section {
  background: linear-gradient(180deg, rgba(17, 22, 30, 0.98), rgba(12, 16, 24, 0.92));
}

.page-management-content #management-offline-expedition {
  box-shadow: inset 0 0 0 1px rgba(188,140,255,0.08);
}

.page-management-content #management-daily {
  box-shadow: inset 0 0 0 1px rgba(63,185,80,0.08);
}

.page-management-content #management-task {
  box-shadow: inset 0 0 0 1px rgba(86,211,100,0.08);
}

.page-management-content #management-market {
  box-shadow: inset 0 0 0 1px rgba(230,192,123,0.08);
}

.page-management-content #management-faction,
.page-management-content #management-world {
  box-shadow: inset 0 0 0 1px rgba(88,166,255,0.08);
}
.home-route-grid {
  align-items: stretch;
}
.home-route-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.inventory-section-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 10px;
}
.inventory-equipped-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.inventory-equip-box {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 5px;
  min-height: unset;
  text-align: center;
}
.inventory-slot-label { font-size: 9px; color: var(--muted); margin-bottom: 4px; }
.inventory-slot-hint { font-size: 9px; color: var(--muted); display: none; }
.slot-item-name { font-size: 11px; }
.slot-item-stats { font-size: 10px; }
.inventory-slot-label {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 4px;
}
.inventory-slot-item {
  color: var(--text);
  font-size: 11px;
  margin-bottom: 4px;
}
.inventory-slot-hint {
  font-size: 10px;
  color: var(--muted);
}
.inventory-equip-preview {
  padding: 8px 10px 6px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
}
.inventory-detail-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-height: 40px;
  font-size: 11px;
  color: var(--muted);
}
.inventory-detail-list-tight {
  margin-top: 10px;
}
.inventory-detail-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.15s, filter 0.15s;
}
.inventory-detail-item:hover {
  border-color: rgba(255, 179, 0, 0.4);
  filter: brightness(1.08);
}
.inventory-detail-item .item-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
.inventory-detail-item .item-meta {
  font-size: 10px;
  color: var(--muted);
}
.inventory-detail-item .item-count,
.inventory-detail-item .item-badges {
  margin-top: auto;
}
.inventory-detail-item span,
.inventory-detail-item em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}
.practice-skill-stack,
.practice-cave-shell,
.practice-offline-box,
.practice-satori-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.practice-realm-hero,
.practice-progress-row,
.practice-cave-status-row,
.practice-cave-actions,
.practice-satori-grid,
.management-market-chip-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.practice-hero-level {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  margin-right: 10px;
}
.practice-hero-realm {
  font-size: 13px;
  color: var(--cyan);
}
.practice-breakthrough-btn,
.practice-action-btn {
  font-size: 11px;
}
.practice-progress-card,
.practice-cave-gain-panel,
.practice-skill-card,
.practice-satori-card,
.management-market-block {
  padding: 12px;
  border: 1px solid rgba(230,192,123,0.12);
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.03);
}
.practice-card-label,
.management-market-block-title {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.practice-progress-bar-text {
  font-family: monospace;
  font-size: 11px;
  color: var(--text);
}
.practice-progress-meta,
.practice-breakthrough-status,
.practice-cave-recommend,
.practice-skill-card span,
.practice-satori-label,
.management-market-row span,
.management-market-summary,
.management-market-empty {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.practice-skill-grid,
.management-market-inventory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.practice-skill-groups,
.practice-craft-list,
.practice-craft-jobs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.practice-skill-group,
.practice-craft-item,
.practice-craft-job,
.management-expedition-card {
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
}
.practice-skill-group-head,
.practice-craft-item-head,
.management-expedition-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 6px;
}
.practice-skill-chip-row,
.management-expedition-loot,
.practice-craft-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.practice-skill-chip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(121,192,255,0.28);
  background: rgba(121,192,255,0.10);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 600;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.practice-skill-chip:hover {
  background: rgba(121,192,255,0.18);
  border-color: rgba(121,192,255,0.45);
  box-shadow: 0 0 8px rgba(121,192,255,0.20);
}
  font-size: 10px;
}
.practice-skill-chip em {
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
}
.practice-skill-empty,
.practice-craft-empty,
.practice-craft-item-state,
.practice-craft-item-meta,
.management-expedition-summary {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.practice-craft-item.is-ready {
  border-color: rgba(63,185,80,0.2);
  background: rgba(63,185,80,0.06);
}
.practice-craft-item.is-blocked {
  border-color: rgba(248,81,73,0.16);
}
.practice-craft-item-head strong,
.practice-skill-group-head strong,
.management-expedition-head strong {
  color: var(--gold);
}
.practice-craft-item-meta,
.practice-craft-item-state,
.practice-craft-job {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.practice-craft-item-state {
  justify-content: flex-start;
}
.management-expedition-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.practice-skill-card strong,
.management-market-row strong {
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}
.practice-cave-status {
  font-size: 13px;
  color: var(--text);
}
.practice-cave-gain {
  font-size: 12px;
  color: var(--green);
  min-height: 18px;
}
.practice-cave-recommend {
  flex: 1;
  min-width: 180px;
}
.practice-action-btn {
  min-width: 110px;
}
.practice-satori-card {
  min-width: 110px;
  text-align: center;
}
.practice-satori-primary {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
}
.practice-satori-secondary {
  font-size: 16px;
  color: var(--text);
}
.practice-satori-tier {
  font-size: 15px;
  color: var(--gold);
}
.management-market-summary {
  margin-bottom: 8px;
}
.management-market-inventory {
  margin-top: 10px;
}
.management-market-block {
  min-height: 0;
}
.management-market-row + .management-market-row {
  margin-top: 8px;
}
@media (max-width: 767px) {
  .practice-realm-hero,
  .practice-progress-row,
  .practice-cave-status-row,
  .practice-cave-actions,
  .practice-satori-grid,
  .management-market-chip-row {
    align-items: flex-start;
  }

  .practice-action-btn {
    width: 100%;
  }

  .practice-skill-grid,
  .management-market-inventory,
  .inventory-equipped-grid {
    grid-template-columns: 1fr;
  }

  .practice-skill-group-head,
  .practice-craft-item-head,
  .management-expedition-head,
  .practice-craft-item-meta,
  .practice-craft-job {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 767px) {
  .home-shortcut-grid,
  .home-progress-meta,
  .home-vitals,
  .console-summary-grid,
  .console-overview-grid {
    grid-template-columns: 1fr;
  }

  .console-card-grid,
  .reserve-grid,
  .recruit-grid {
    grid-template-columns: 1fr;
  }

  .console-action-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .console-btn {
    width: 100%;
  }

  .group-page-header {
    gap: 8px;
    padding-bottom: 4px;
    margin-bottom: 8px;
  }

  .group-page-subnav {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 2px 4px 2px;
    margin: 0 -2px;
    min-height: 34px;
    scroll-padding-inline: 6px;
  }

  .group-page-subnav .mini-link-btn {
    font-size: 10px;
    padding: 5px 9px;
  }

  .home-summary-note {
    font-size: 10px;
    line-height: 1.45;
  }
}

/* ── Shell Page Visibility ──────────────────────────────────── */
/* Only the active page is shown; all others are hidden */
/* D5: Page transition — improved fade with scale micro-effect */
.page { display: none; opacity: 0; transition: opacity 0.22s ease, transform 0.22s ease; transform: scale(0.98); }
.page.active { display: block; opacity: 1; transform: scale(1); }

/* ── Torn Layout: Desktop Sidebar ─────────────────────────── */
@media (min-width: 768px) {
  #shell {
    flex-direction: row;
    max-width: none;
    margin: 0;
    width: 100%;
  }

  /* Desktop: topbar is hidden — stats live in sidebar */
  #shell-topbar {
    display: none;
  }

  /* Desktop: top nav is hidden — sidebar handles navigation */
  #shell-top-nav {
    display: none;
  }

  /* Sidebar: fixed left, full height */
  #shell-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 200;
    overflow-y: auto;
    flex-shrink: 0;
  }

  /* Content area: push right by sidebar width */
  #shell-content {
    position: fixed;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Bottom nav hidden on desktop */
  #shell-nav {
    display: none;
  }
}

/* Mobile: sidebar hidden */
@media (max-width: 767px) {
  :root {
    --shell-top-nav-h: 42px;
  }

  #shell-sidebar {
    display: none;
  }
  .shell-nav-item {
    flex: 1;
    gap: 2px;
    font-size: 10px;
    padding: 8px 2px;
    min-height: 56px;
    justify-content: center;
  }
  .shell-nav-item .nav-icon {
    font-size: 22px;
  }
  #shell-topbar {
    position: fixed;
    top: var(--safe-top);
    left: 0;
    right: 0;
    z-index: 1000;
  }
  #shell-nav {
    display: none !important;
  }
}

/* Mobile: content sits below fixed topbar (54px) */
@media (max-width: 767px) {
  #shell-content {
    top: 0;
    /* Phase 18A: topbar is now 54px = accent(3) + stats(24) + nav(27) */
    padding: calc(var(--shell-height) + 6px) 10px calc(24px + var(--safe-bottom) + 36px);
    padding-bottom: calc(24px + var(--safe-bottom) + 36px);
  }
  /* Phase C: Page children get tighter vertical rhythm — content hugs the top
     of the viewport rather than having extra breathing room that makes it
     feel like a floating modal instead of a direct nav-child. */
  #shell-content .page {
    padding: 0;
  }
  /* Phase C: Gym/training panels — tighten top margin so they feel like
     direct children of the nav viewport, not floating sections. */
  #shell-content #cave-panel,
  #shell-content #progression-bar,
  #shell-content #craft-panel {
    margin-top: 0;
    padding: 8px 0;
  }
  /* Phase C: Active page wrapper — reduce extra padding that makes
     content feel disconnected from top-nav. */
  #shell-content .page.active {
    padding-top: 0;
  }

  #shell-content .page.active > .torn-dashboard:first-child,
  #shell-content .page.active > .legacy-shell-panel:first-child,
  #shell-content .page.active > #app:first-child {
    margin-top: 0;
  }

  #shell-content .page.active > .torn-dashboard:first-child > .torn-row:first-child > .torn-module:first-child,
  #shell-content .page.active > .torn-dashboard:first-child > .torn-module:first-child,
  #shell-content .page.active > .legacy-shell-panel:first-child,
  #shell-content .page.active > #app:first-child {
    scroll-margin-top: calc(var(--shell-height) + 12px);
  }

  #page-dungeon,
  #page-team,
  #page-recruit,
  #page-inventory,
  #page-cultivation,
  #page-home,
  #page-battle {
    min-height: 100%;
  }
}

/* ── Topbar (mobile-only) — Phase A Fix #1: Unified brand cluster + gold accent bar
   Torn-like: single compact strip, gold accent bar at top, logo+title as one unit. */
#shell-topbar {
  background: linear-gradient(180deg, rgba(22,27,34,0.98), rgba(16,20,28,0.98));
  border-bottom: none;
  padding: 0 12px;
  gap: 8px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  flex-wrap: nowrap;
  overflow: hidden;
  position: relative;
}
/* Gold accent bar at top edge — Torn's signature panel underline */
.topbar-accent-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(230,192,123,0.80), rgba(230,192,123,0.30) 60%, transparent);
  pointer-events: none;
}
/* Phase A Fix #1: unified brand cluster — logo + title as one block */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.topbar-logo {
  font-size: 18px;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(230,192,123,0.4));
}
.topbar-game-title {
  font-size: var(--font-sm);
  color: var(--gold);
  font-weight: bold;
  letter-spacing: 0.04em;
}
/* Phase A Retry: removed legacy title duplicate — brand cluster is the single header unit */
.topbar-title {
  display: none;
}
/* Unified HUD cluster — Deficiency 5: consolidated resource grouping */
.topbar-hud {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.topbar-hp-line,
.topbar-mp-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
}
.topbar-hp-line .hbar,
.topbar-mp-line .mbar {
  height: 5px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(230,192,123,0.15);
  border-radius: 2px;
  overflow: hidden;
  min-width: 28px;
  width: 42px;
}
.topbar-hp-line .hbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3fb950, #56d364);
  border-radius: 1px;
  transition: width 0.4s ease;
  box-shadow: 0 0 4px rgba(63,185,80,0.4);
}
.topbar-mp-line .mbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #58a6ff, #79c0ff);
  border-radius: 1px;
  transition: width 0.4s ease;
  box-shadow: 0 0 4px rgba(88,166,255,0.4);
}
.topbar-hp-line .hbar-label,
.topbar-mp-line .mbar-label {
  color: var(--muted);
  flex-shrink: 0;
  font-size: 9px;
  font-family: 'Courier New', monospace;
}
/* Stats cluster — Deficiency 5: grouped with gold accent pill style */
.topbar-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-xs);
  color: rgba(201,209,217,0.65);
  padding: 2px 6px;
  background: rgba(230,192,123,0.08);
  border: 1px solid rgba(230,192,123,0.15);
  border-radius: 3px;
}
/* Phase A Fix #5: gold left accent — Torn-style visual grouping for resource/currency pills */
.stat-item-accent {
  border-left: 2px solid rgba(230,192,123,0.55);
}
.stat-item .stat-icon { font-size: 11px; }
.stat-item .stat-val {
  color: var(--gold);
  font-size: var(--font-xs);
  font-weight: bold;
}

/* ── Desktop Sidebar ───────────────────────────────────────── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-logo {
  font-size: 22px;
  color: var(--gold);
}
.sidebar-game-title {
  font-size: var(--font-sm);
  color: var(--muted);
  font-family: 'Courier New', monospace;
}

/* Player card in sidebar */
.sidebar-player-card {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Phase UI-2: Skeleton loading state — subtle pulse until data arrives */
.sidebar-player-card.skeleton .spc-name,
.sidebar-player-card.skeleton .spc-realm {
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  color: transparent;
  min-width: 60px;
  display: inline-block;
}
.sidebar-player-card.skeleton .spc-realm {
  min-width: 80px;
  height: 10px;
}
.spc-name {
  font-size: var(--font-sm);
  font-weight: bold;
  color: var(--gold);
  margin-bottom: 2px;
  text-shadow: 0 0 12px rgba(230,192,123,0.35);
  letter-spacing: 0.03em;
}
.spc-realm {
  font-size: var(--font-xs);
  color: var(--gold);
  margin-bottom: 8px;
}
.spc-hud {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}
/* Deficiency 3/4: Torn-style HP/MP bars with borders + fill glow */
.spc-hp-bar,
.spc-mp-bar {
  height: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(230,192,123,0.15);
  border-radius: 3px;
  overflow: hidden;
}
.spc-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #3fb950, #56d364);
  border-radius: 2px;
  transition: width 0.4s ease;
  box-shadow: 0 0 5px rgba(63,185,80,0.4);
}
.spc-mp-fill {
  height: 100%;
  background: linear-gradient(90deg, #58a6ff, #79c0ff);
  border-radius: 2px;
  transition: width 0.4s ease;
  box-shadow: 0 0 5px rgba(88,166,255,0.4);
}
/* Deficiency 3: Sidebar stats with gold value treatment */
.spc-stats {
  display: flex;
  gap: 10px;
  font-size: var(--font-xs);
  color: rgba(201,209,217,0.65);
  padding: 4px 0;
}
/* Deficiency 5: Sidebar nav icon consistency */
.sidebar-nav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.spc-level {
  font-size: var(--font-xs);
  color: var(--gold);
  opacity: 0.8;
}
.spc-stats .stat-icon {
  margin-right: 2px;
}

.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
  flex-shrink: 0;
}

/* Desktop sidebar nav */
#shell-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  flex: 1;
}
/* Deficiency 5: Torn-style section labels — uppercase gold, monospace */
.sidebar-nav-section {
  padding: 16px 14px 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--gold);
  opacity: 0.70;
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
  flex-shrink: 0;
  margin-top: 8px;
  /* Deficiency 5: gold underline accent */
  border-bottom: 1px solid rgba(230,192,123,0.15);
}
.sidebar-nav-section + .sidebar-nav-item {
  border-top: none;
}
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: var(--font-sm);
  font-family: 'Courier New', monospace;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-left-color: rgba(230,192,123,0.30);
}
.sidebar-nav-item.active {
  background: rgba(230,192,123,0.12);
  border-left-color: var(--gold);
  color: var(--gold);
  text-shadow: 0 0 12px rgba(230,192,123,0.4);
  box-shadow: inset 0 0 20px rgba(230,192,123,0.05);
}

/* Phase UI-2 Fix D2: Active nav dot indicator */
.nav-active-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  animation: nav-dot-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(230,192,123,0.6);
}
/* Phase UI-HERMES-TORN-LAYOUT-REPLICA-02: notification badge on nav items */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  padding: 0 3px;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(248,81,73,0.5);
}
.nav-badge.dot-badge {
  /* Small red dot — just indicates presence, no count */
  min-width: 7px;
  height: 7px;
  border-radius: 50%;
  padding: 0;
  font-size: 0;
}
@keyframes nav-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

/* Phase UI-2: Keyboard focus indicator */
.sidebar-nav-item:focus-visible,
.shell-nav-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: 3px;
}
.sidebar-nav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-nav-label {
  font-size: var(--font-sm);
  flex: 1;
}
.sidebar-nav-hint {
  font-size: 10px;
  color: rgba(110, 118, 129, 0.85);
  opacity: 1;
  transition: color 0.15s;
}
.sidebar-nav-item:hover .sidebar-nav-hint {
  color: rgba(201, 209, 217, 0.75);
}
.sidebar-nav-item.active .sidebar-nav-hint {
  color: rgba(230, 192, 123, 0.75);
  opacity: 1;
}

/* ── Bottom Nav (mobile only) — Torn-style compact row ──────
   Deficiency 1: Reduce nav density — 4 primary items visible
   on small screens, each with larger touch target.
   Deficiency 6: Increase touch target sizing.
   Deficiency 10: Consistent visual rhythm.

   NOTE: This nav is suppressed on mobile (top-only nav per spec).
   All media blocks force display:none. */
#shell-nav {
  /* display:none is set per-media; keep this for desktop-only fallback visibility */
  background: linear-gradient(180deg, rgba(16,20,28,0.96), rgba(10,13,18,0.98));
  border-top: 1px solid rgba(230,192,123,0.15);
  box-shadow: 0 -2px 0 rgba(230,192,123,0.08), 0 -8px 28px rgba(0,0,0,0.36);
  padding: 0 4px;
  justify-content: center;
  gap: 0;
  /* FIX: always hidden on mobile — top-nav is the only nav on mobile */
  display: none !important;
}
.shell-nav-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 14px;
  background: none;
  border: none;
  border-top: 3px solid transparent;
  color: rgba(201,209,217,0.5);
  font-size: 10px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.12s;
  min-height: 52px;
  min-width: 60px;
  position: relative;
}
/* Deficiency 13: Game-feel micro-interaction */
.shell-nav-item:hover {
  color: var(--text);
  transform: translateY(-1px);
}
.shell-nav-item:active {
  transform: scale(0.95);
}
.shell-nav-item .nav-icon {
  font-size: 22px;
  line-height: 1;
  transition: filter 0.15s;
}
/* Deficiency 1: Active state — gold top border + subtle bg glow */
.shell-nav-item.active {
  color: var(--gold);
  border-top-color: var(--gold);
  background: linear-gradient(180deg, rgba(230,192,123,0.10), transparent 60%);
}
/* Animated gold pulse dot — current-section indicator (Deficiency 13) */
.shell-nav-item.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,192,123,0.18), transparent 70%);
  pointer-events: none;
  animation: nav-active-pulse 2.4s ease-in-out infinite;
}
@keyframes nav-active-pulse {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.6; transform: translate(-50%, -50%) scale(1.15); }
}
@media (max-width: 400px) {
  .shell-nav-item { padding: 10px 10px; min-width: 54px; }
  .shell-nav-item .nav-icon { font-size: 20px; }
}
/* FIX: also kill bottom-nav at 400px breakpoint */
@media (max-width: 400px) {
  #shell-nav { display: none !important; }
}

/* ── Torn-style Module Cards — Deficiency 5/8: Stronger Torn panel framing ── */
.torn-module {
  background: linear-gradient(145deg, rgba(22,26,33,0.98) 0%, rgba(15,18,24,0.99) 100%);
  border: 1px solid rgba(230,192,123,0.12);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 2px 8px rgba(0,0,0,0.4);
  padding: 6px 8px;
  margin-bottom: 4px;
  position: relative;
}
.torn-module-header {
  font-size: 11px;
  color: var(--gold, #e6c377);
  margin-bottom: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(230,192,123,0.15);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  border-left: 3px solid var(--gold);
  padding-left: 6px;
  height: 22px;
  line-height: 22px;
}
/* Small accent bar before header text */
.torn-module-header::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 10px;
  background: var(--gold);
  border-radius: 2px;
  flex-shrink: 0;
}
/* Phase UI-HERMES-TORN-LAYOUT-REPLICA-02: badge/tag system for module classification */
.torn-module-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.torn-module-badge.badge-combat  { background: rgba(248,81,73,0.15);  color: #f85149; border: 1px solid rgba(248,81,73,0.25); }
.torn-module-badge.badge-resource{ background: rgba(230,192,123,0.12); color: #e6c07b; border: 1px solid rgba(230,192,123,0.22); }
.torn-module-badge.badge-team   { background: rgba(88,166,255,0.12); color: #58a6ff; border: 1px solid rgba(88,166,255,0.22); }
.torn-module-badge.badge-system { background: rgba(188,140,255,0.12);color: #bc8cff; border: 1px solid rgba(188,140,255,0.22); }
.torn-module-badge.badge-status { background: rgba(63,185,80,0.12); color: #3fb950; border: 1px solid rgba(63,185,80,0.22); }
.torn-module-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-sm);
  color: var(--text);
  padding: 4px 0;
}
.torn-module-row + .torn-module-row {
  border-top: 1px solid rgba(255,255,255,0.03);
}
.torn-module-label {
  color: var(--muted);
}
.torn-module-val {
  font-weight: bold;
  color: var(--text);
}
.torn-module-val.gold { color: var(--gold); }
.torn-module-val.green { color: var(--green); }
.torn-module-val.red { color: var(--red); }
.torn-module-val.blue { color: var(--blue); }

/* ── TORN-GAME-FEEL: HP/MP Visual Bar System ── */
.game-bar {
  height: 14px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  position: relative;
}
.game-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
  position: relative;
}
.game-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
  border-radius: 3px 3px 0 0;
}
.hp-bar {
  border: 1px solid rgba(248,81,73,0.35);
  background: rgba(248,81,73,0.08);
}
.hp-bar .game-bar-fill {
  background: linear-gradient(90deg, #f85149, #ff7b72);
}
.mp-bar {
  border: 1px solid rgba(121,192,255,0.35);
  background: rgba(121,192,255,0.08);
}
.mp-bar .game-bar-fill {
  background: linear-gradient(90deg, #58a6ff, #79c0ff);
}
.resource-bar {
  border: 1px solid rgba(230,192,123,0.30);
  background: rgba(230,192,123,0.06);
}
.resource-bar .game-bar-fill {
  background: linear-gradient(90deg, var(--gold), #f0d080);
}
.game-stat-icon {
  display: inline-block;
  margin-right: 2px;
}
.game-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.game-stat-row-label {
  color: var(--muted);
  font-size: var(--font-xs);
  min-width: 32px;
}
.game-stat-row-val {
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 600;
}

/* ── TORN-GAME-FEEL: Hero Name Glow ── */
.home-hero-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(230,192,123,0.4), 0 2px 4px rgba(0,0,0,0.5);
}
.home-hero-meta {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ── TORN-GAME-FEEL: Vitals Bar Grid ── */
.home-vitals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Two-column grid on desktop, single column on mobile */
.torn-dashboard {
  background: transparent;
  padding: 0;
  box-shadow: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Phase UI-2: Ensure row-level gap on mobile too */
.torn-dashboard > .torn-row {
  gap: 12px;
}
.torn-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.torn-row-2col > * { gap: 4px; }
/* Mobile: single column — torn-modules in each row need vertical spacing */
@media (max-width: 599px) {
  .torn-row > .torn-module + .torn-module {
    margin-top: 12px;
  }
  .torn-dashboard { gap: 10px; }
}

/* Desktop: side-by-side columns */
@media (min-width: 600px) {
  .torn-row-2col {
    flex-direction: row;
    gap: 10px;
  }
  .torn-row-2col > .torn-module {
    flex: 1;
    min-width: 0;
  }
  /* Phase UI-2: Space between rows in dashboard */
  .torn-dashboard > .torn-row + .torn-row {
    margin-top: 4px;
  }
}

/* ── Torn Action Row — Deficiency 2/8: CTA container with proper spacing ── */
.torn-action-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
/* ── Torn Action Card — Deficiency 2: Strong primary CTA with gold border + bold weight ── */
.torn-action-card {
  background: linear-gradient(135deg, rgba(230,192,123,0.14), rgba(188,140,255,0.08));
  border: 2px solid rgba(230,192,123,0.55);
  border-radius: 4px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
  margin-bottom: 0;
  min-height: var(--tap-min);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(230,192,123,0.08), 0 4px 16px rgba(0,0,0,0.20);
}
/* Phase UI-2: keyboard accessible */
.torn-action-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.torn-action-card:hover {
  border-color: rgba(230,192,123,0.82);
  background: linear-gradient(135deg, rgba(230,192,123,0.22), rgba(188,140,255,0.14));
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(230,192,123,0.18), 0 8px 24px rgba(0,0,0,0.32);
}
.torn-action-card:active {
  transform: translateY(0);
  box-shadow: 0 0 0 1px rgba(230,192,123,0.08), 0 2px 8px rgba(0,0,0,0.20);
}
/* Torn-action-cta text: Deficiency 2 — bold, gold, larger for prominence */
.torn-action-cta {
  font-size: var(--font-md);
  color: var(--gold);
  font-weight: bold;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(230,192,123,0.40);
}
/* Phase UI-HERMES-IMPROVE-04: torn-action-card CTA variants — battle/dungeon prominence */
.torn-action-card.cta-battle {
  background: linear-gradient(135deg, rgba(248,81,73,0.16), rgba(230,192,123,0.12));
  border-color: rgba(248,81,73,0.38);
  box-shadow: 0 0 0 1px rgba(248,81,73,0.12), 0 4px 16px rgba(248,81,73,0.10);
}
.torn-action-card.cta-battle:hover {
  background: linear-gradient(135deg, rgba(248,81,73,0.22), rgba(230,192,123,0.18));
  border-color: rgba(248,81,73,0.55);
  box-shadow: 0 0 0 1px rgba(248,81,73,0.20), 0 6px 22px rgba(248,81,73,0.16);
  transform: translateY(-2px);
}
.torn-action-card.cta-primary {
  background: linear-gradient(135deg, rgba(230,192,123,0.24), rgba(188,140,255,0.14));
  border-color: rgba(230,192,123,0.55);
  box-shadow: 0 0 0 1px rgba(230,192,123,0.12), 0 4px 16px rgba(230,192,123,0.12);
  padding: 16px 18px;
}
.torn-action-card.cta-primary:hover {
  background: linear-gradient(135deg, rgba(230,192,123,0.30), rgba(188,140,255,0.20));
  border-color: rgba(230,192,123,0.72);
  box-shadow: 0 0 0 1px rgba(230,192,123,0.20), 0 6px 22px rgba(230,192,123,0.20);
  transform: translateY(-2px);
}
.torn-action-card.cta-primary .torn-action-cta { font-size: var(--font-base); }

/* Phase A Fix #4: torn-training-card — Torn-like attribute/training card
   Structure: title row | stat-focus row | amount row | TRAIN CTA
   Each card has a clear top accent bar, bold title, stat highlight, amount control, primary CTA */
.torn-training-card {
  background: var(--surface);
  border: 1px solid rgba(230,192,123,0.20);
  border-top: 3px solid rgba(230,192,123,0.50);
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
/* Title row — Phase A Retry Fix #4: bold gold, reduced padding, stronger accent bar */
.torn-training-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(230,192,123,0.15);
  border-left: 3px solid var(--gold);
  padding-left: 8px;
}
.torn-training-card-title {
  font-size: var(--font-sm);
  font-weight: bold;
  color: var(--gold);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.torn-training-card-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--gold);
  border-radius: 2px;
}
.torn-training-card-badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(230,192,123,0.12);
  color: var(--gold);
  border: 1px solid rgba(230,192,123,0.22);
}
/* Stat focus row */
.torn-training-card-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.torn-training-card-stat-label {
  font-size: var(--font-xs);
  color: var(--muted);
}
.torn-training-card-stat-val {
  font-size: var(--font-lg);
  font-weight: bold;
  color: var(--text);
}
.torn-training-card-stat-val.gold { color: var(--gold); }
.torn-training-card-stat-val.green { color: var(--green); }
.torn-training-card-stat-val.blue  { color: var(--blue); }
/* Amount row */
.torn-training-card-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.torn-training-card-amount-label {
  font-size: var(--font-xs);
  color: var(--muted);
}
.torn-training-card-amount-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.torn-training-card-amount-btn {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  border: 1px solid rgba(230,192,123,0.30);
  background: rgba(230,192,123,0.08);
  color: var(--gold);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}
.torn-training-card-amount-btn:hover {
  background: rgba(230,192,123,0.18);
  border-color: rgba(230,192,123,0.50);
}
.torn-training-card-amount-val {
  font-size: var(--font-sm);
  color: var(--text);
  font-weight: bold;
  min-width: 28px;
  text-align: center;
}
/* Primary TRAIN CTA — Phase D: visually dominant, 44px touch target, strong gold affordance */
.torn-training-card .torn-train-cta {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 13px 18px;
  background: linear-gradient(135deg, rgba(230,192,123,0.32), rgba(188,140,255,0.18));
  border: 2px solid var(--gold);
  border-radius: 4px;
  color: var(--gold);
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  cursor: pointer;
  text-shadow: 0 0 20px rgba(230,192,123,0.80);
  box-shadow: 0 0 0 3px rgba(230,192,123,0.30), 0 0 28px rgba(230,192,123,0.35), 0 4px 18px rgba(0,0,0,0.28);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.torn-training-card .torn-train-cta:hover {
  background: linear-gradient(135deg, rgba(230,192,123,0.40), rgba(188,140,255,0.24));
  border-color: #f4e6ba;
  box-shadow: 0 0 0 4px rgba(230,192,123,0.38), 0 0 36px rgba(230,192,123,0.45), 0 6px 24px rgba(0,0,0,0.32);
  transform: translateY(-2px);
}
.torn-training-card .torn-train-cta:active {
  transform: translateY(0);
  box-shadow: 0 0 0 1px rgba(230,192,123,0.08), 0 2px 8px rgba(0,0,0,0.20);
}
.torn-training-card .torn-train-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Secondary CTA — clearly weaker than TRAIN */
.torn-training-card .torn-train-secondary {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(230,192,123,0.15);
  border-radius: 4px;
  color: rgba(201,209,217,0.65);
  font-size: var(--font-xs);
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.torn-training-card .torn-train-secondary:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(230,192,123,0.30);
  color: var(--text);
}

/* Phase D: Gym/training stat hierarchy — quick-scan primary stats
   Structure: gym-stat-primary (largest, gold) | gym-stat-secondary (medium, muted) */
.gym-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: rgba(230,192,123,0.06);
  border: 1px solid rgba(230,192,123,0.12);
  border-radius: 4px;
}
.gym-stat-row::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 100%;
  min-height: 18px;
  background: var(--gold);
  border-radius: 2px;
  flex-shrink: 0;
}
.gym-stat-label {
  font-size: var(--font-xs);
  color: var(--muted);
  flex: 1;
}
.gym-stat-val {
  font-size: var(--font-lg);
  font-weight: bold;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.gym-stat-val.green { color: var(--green); }
.gym-stat-val.blue  { color: var(--blue); }
.gym-stat-val.red   { color: var(--red); }

/* Phase D: Gym as dedicated cultivation detail viewport
   — tighter padding, no decorative spacing, focused layout */
#page-cultivation {
  flex-direction: column;
  gap: 0;
}
#page-cultivation #progression-bar {
  display: flex !important;
  border-radius: 4px;
  margin-bottom: 10px;
  /* Phase D: distinct gold accent top bar signals "this is the primary stat" */
  border-top: 2px solid rgba(230,192,123,0.50);
  padding-top: 8px;
}
#page-cultivation #cave-panel {
  border-radius: 4px;
  /* Phase D: feels like a direct nav-child viewport, not a floating summary */
  margin-top: 0;
  padding: 10px 12px;
}
#page-cultivation #craft-panel {
  border-radius: 4px;
}

/* Phase D: Progression bar / cave panel inner stat hierarchy */
#progression-bar .prog-stat,
#cave-panel .cave-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
#progression-bar .prog-stat-label,
#cave-panel .cave-stat-label {
  font-size: var(--font-xs);
  color: var(--muted);
}
#progression-bar .prog-stat-val,
#cave-panel .cave-stat-val {
  font-size: var(--font-lg);
  font-weight: bold;
  color: var(--gold);
}
#progression-bar .prog-stat-val.green,
#cave-panel .cave-stat-val.green { color: var(--green); }
#progression-bar .prog-stat-val.blue,
#cave-panel .cave-stat-val.blue  { color: var(--blue); }

/* Phase UI-HERMES-IMPROVE-07: torn-action-card — cta-dungeon (副本/歷練 primary action) */
.torn-action-card.cta-dungeon {
  background: linear-gradient(135deg, rgba(230,192,123,0.18), rgba(188,140,255,0.10));
  border-color: rgba(230,192,123,0.40);
  box-shadow: 0 0 0 1px rgba(230,192,123,0.10), 0 4px 16px rgba(230,192,123,0.08);
}
.torn-action-card.cta-dungeon:hover {
  background: linear-gradient(135deg, rgba(230,192,123,0.26), rgba(188,140,255,0.16));
  border-color: rgba(230,192,123,0.60);
  box-shadow: 0 0 0 1px rgba(230,192,123,0.18), 0 6px 22px rgba(230,192,123,0.16);
  transform: translateY(-2px);
}
.torn-action-card.cta-dungeon .torn-action-cta { color: #f4e6ba; }

/* Phase UI-HERMES-IMPROVE-05: Disabled/inactive action explanation tooltip */
.action-disabled-hint {
  font-size: var(--font-xs);
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.75;
}
.action-disabled-hint::before { content: 'ℹ'; font-size: 10px; }

/* Phase UI-HERMES-IMPROVE-06: Xianxia skin — jade/purple/emerald/gold/blue/crimson accent variants */
.torn-module-header.gold {
  border-left: 2px solid rgba(230,192,123,0.6);
  padding-left: 6px;
}
.torn-module-header.blue {
  border-left: 2px solid rgba(88,166,255,0.5);
  padding-left: 6px;
}
.torn-module-header.crimson {
  border-left: 2px solid rgba(248,81,73,0.5);
  padding-left: 6px;
}
.torn-module-header.purple {
  border-left: 2px solid rgba(188,140,255,0.5);
  padding-left: 6px;
}
.torn-module-header.emerald {
  border-left: 2px solid rgba(63,185,80,0.5);
  padding-left: 6px;
}
.torn-module-header.jade {
  border-left: 2px solid rgba(63,185,80,0.4);
  padding-left: 6px;
}

/* Jade-tinted module background variant for cultivation/nature sections */
.torn-module.jade-bg {
  background: linear-gradient(135deg, rgba(121,192,255,0.06), rgba(63,185,80,0.04));
  border-color: rgba(121,192,255,0.15);
}
/* Purple-tinted module background variant for spirit/mystical sections */
.torn-module.purple-bg {
  background: linear-gradient(135deg, rgba(188,140,255,0.08), rgba(121,192,255,0.04));
  border-color: rgba(188,140,255,0.18);
}
/* Crimson-tinted module background variant for battle/combat sections */
.torn-module.crimson-bg {
  background: linear-gradient(135deg, rgba(248,81,73,0.08), rgba(230,192,123,0.05));
  border-color: rgba(248,81,73,0.18);
}

/* ═══════════════════════════════════════════════════════════════════
   PAD FRAME SYSTEM — Phase UI-PAD
   Puzzle & Dragons-style panel framing: page > module > card hierarchy
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page Frame ────────────────────────────────────────────────────── */
/* Outermost shell frame — wraps the full page content area.
   Provides double-border illusion + inset depth. */
.page-frame {
  background: linear-gradient(160deg, #0a0c10 0%, #111419 50%, #0a0c10 100%);
  border: 1px solid rgba(230,192,123,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 4px 20px rgba(0,0,0,0.6);
  padding: 4px;
  min-height: 100%;
}
/* Top accent line — Torn's signature gold bar */
.page-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(230,192,123,0.70) 0%,
    rgba(230,192,123,0.25) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 10;
}

/* ── Module Frame ───────────────────────────────────────────────────── */
/* Mid-level panel — wraps a logical group of content inside a page.
   Mirrors .torn-module but as a standalone frame class for non-module panels.
   Header + body separation via border. */
.module-frame {
  background: var(--surface);
  border: 1px solid rgba(230,192,123,0.20);
  border-top: 2px solid rgba(230,192,123,0.38);
  border-radius: 5px;
  padding: 0;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.25),
    0 4px 12px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.03);
  overflow: hidden;
}
.module-frame-head {
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(230,192,123,0.15);
  display: flex;
  align-items: center;
  gap: 6px;
}
.module-frame-head .torn-module-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.module-frame-body {
  padding: 12px;
}

/* ── Card Frame ─────────────────────────────────────────────────────── */
/* Innermost card unit — wraps a single entity (character, item, monster).
   Double-border illusion via layered box-shadow. */
.card-frame {
  border: 1px solid rgba(230,192,123,0.14);
  border-left: 3px solid rgba(230,192,123,0.45);
  border-radius: 4px;
  background: rgba(8,10,14,0.90);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.03);
  transition: all 0.18s ease;
  overflow: hidden;
}
.card-frame:hover {
  border-color: rgba(230,192,123,0.30);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 12px rgba(230,192,123,0.08);
}

/* ── Rarity / Tier Accent Variants (card-frame + module-frame) ──────── */
/* Common / Normal — muted gray accent */
.card-frame.rarity-common,
.module-frame.rarity-common { border-left-color: rgba(110,118,129,0.7); }
.card-frame.rarity-common:hover { border-left-color: rgba(110,118,129,0.9); }
/* Uncommon — green accent */
.card-frame.rarity-uncommon,
.module-frame.rarity-uncommon { border-left-color: rgba(63,185,80,0.75); }
.card-frame.rarity-uncommon:hover { border-left-color: rgba(63,185,80,0.95); }
/* Rare — blue accent */
.card-frame.rarity-rare,
.module-frame.rarity-rare { border-left-color: rgba(88,166,255,0.80); }
.card-frame.rarity-rare:hover { border-left-color: rgba(88,166,255,1.0); }
/* Epic — purple accent */
.card-frame.rarity-epic,
.module-frame.rarity-epic { border-left-color: rgba(188,140,255,0.80); }
.card-frame.rarity-epic:hover { border-left-color: rgba(188,140,255,1.0); }
/* Legendary — gold accent (stronger than default) */
.card-frame.rarity-legendary,
.module-frame.rarity-legendary {
  border-left-color: rgba(230,192,123,0.75);
  background: linear-gradient(135deg, rgba(230,192,123,0.07), rgba(8,10,14,0.95) 60%);
}
.card-frame.rarity-legendary:hover {
  border-left-color: rgba(230,192,123,1.0);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 18px rgba(230,192,123,0.15);
}
/* Boss / Elite — red accent + top danger stripe */
.card-frame.rarity-elite,
.module-frame.rarity-elite {
  border-left-color: rgba(248,81,73,0.80);
  border-top: 2px solid rgba(248,81,73,0.50);
}
.card-frame.rarity-elite:hover { border-left-color: rgba(248,81,73,1.0); }

/* ── Item Card — inventory / loot / market items ────────────────────── */
/* Torn-style item card: icon box left, info right, rarity accent border */
.item-card {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 4px 6px;
  min-height: unset;
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid rgba(110,118,129,0.60);
  border-radius: 4px;
  background: rgba(8,10,14,0.85);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: default;
}
.item-card:hover {
  border-color: rgba(230,192,123,0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Item icon box — left-side visual identifier */
.item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 18px;
  color: var(--text-muted);
}

/* Item info block */
.item-info {
  flex: 1;
  min-width: 0;
}
.item-name { font-size: 12px; }
.item-meta { font-size: 10px; }
.item-icon { font-size: 14px; }
.item-count {
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
}

/* Equip card — slightly taller, shows slot + stats */
.item-card.equip-card {
  padding: 10px 12px;
}
.item-card.equip-card .item-icon {
  width: 44px;
  height: 44px;
  font-size: 20px;
  border-radius: 5px;
}
.item-card.equip-card .item-name {
  font-size: 13px;
}
.item-card.equip-card .item-stats {
  font-size: 11px;
  color: var(--gold);
  margin-top: 2px;
}

/* Material card — compact, count badge right */
.item-card.material-card {
  padding: 8px 10px;
}
.item-card.material-card .item-icon {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
.item-card.material-card .item-name {
  font-size: 12px;
}

/* Elixir / book — distinguish via icon bg */
.item-card.elixir-card .item-icon {
  background: rgba(188,140,255,0.10);
  border-color: rgba(188,140,255,0.15);
  color: #bc8cff;
}
.item-card.book-card .item-icon {
  background: rgba(88,166,255,0.10);
  border-color: rgba(88,166,255,0.15);
  color: #58a6ff;
}

/* Rarity accent variants for item cards */
.item-card.rarity-common   { border-left-color: rgba(110,118,129,0.70); }
.item-card.rarity-uncommon { border-left-color: rgba(63,185,80,0.75); }
.item-card.rarity-rare     { border-left-color: rgba(88,166,255,0.80); }
.item-card.rarity-epic     { border-left-color: rgba(188,140,255,0.80); }
.item-card.rarity-legendary {
  border-left-color: rgba(230,192,123,0.80);
  background: linear-gradient(135deg, rgba(230,192,123,0.07), rgba(8,10,14,0.90) 70%);
}
.item-card.rarity-legendary .item-icon {
  background: rgba(230,192,123,0.08);
  border-color: rgba(230,192,123,0.20);
  color: var(--gold);
}

/* In-list flow: items stack with small gap */
.inventory-detail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Monster Tier Variants (card-frame only) ───────────────────────── */
/* Normal monster */
.card-frame.tier-normal { border-left-color: rgba(110,118,129,0.60); }
/* Elite / 精英 */
.card-frame.tier-elite {
  border-left-color: rgba(248,81,73,0.75);
  border-top: 2px solid rgba(248,81,73,0.35);
}
/* Boss */
.card-frame.tier-boss {
  border-left-color: rgba(230,192,123,0.90);
  border-top: 3px solid rgba(230,192,123,0.55);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 0 16px rgba(230,192,123,0.10), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Layout Mode: Full-Width vs Compact ─────────────────────────────── */
/* Applied to .page-frame or page-level containers to switch layout density */

/* FULL-WIDTH mode: content expands to fill available space */
.layout-full-width {
  max-width: 100%;
  padding: 10px 12px;
}
/* Inner modules in full-width get tighter gap */
.layout-full-width .torn-module,
.layout-full-width .module-frame {
  margin-bottom: 0;
}

/* COMPACT mode: content constrained with side gutters — focus / reading rhythm */
.layout-compact {
  max-width: 680px;
  margin: 0 auto;
  padding: 4px 8px;
}
/* Inner modules in compact get more breathing room */
.layout-compact .torn-module,
.layout-compact .module-frame {
  margin-bottom: 6px;
}
/* Compact cards also get subtle inward shadow for focus feel */
.layout-compact .console-card,
.layout-compact .card-frame {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(230,192,123,0.04);
}

/* Mobile: compact stays compact but with reduced padding */
@media (max-width: 599px) {
  .layout-compact {
    max-width: 100%;
    padding: 4px 6px;
  }
}

.torn-action-label {
  font-size: var(--font-xs);
  color: var(--gold);
  letter-spacing: 0.10em;
  margin-bottom: 4px;
}
.torn-action-title {
  font-size: var(--font-lg);
  font-weight: bold;
  color: var(--text);
  margin-bottom: 4px;
}
.torn-action-sub {
  font-size: var(--font-sm);
  color: var(--text); /* D2: was rgba(110,118,129,0.92) — insufficient contrast on dark bg */
  line-height: 1.5;
  margin-bottom: 8px;
}
.torn-action-cta {
  font-size: var(--font-sm);
  color: var(--gold);
  font-weight: bold;
}

/* ── Torn Progress Bar — Deficiency 4: Torn-style fills with gold gradient + border ── */
.torn-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(230,192,123,0.18);
  border-radius: 3px;
  overflow: hidden;
  min-width: 80px;
}
.torn-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #e6c07b 0%, #f4e6ba 60%, #e6c07b 100%);
  border-radius: 2px;
  transition: width 0.4s ease;
  box-shadow: 0 0 6px rgba(230,192,123,0.35);
  position: relative;
}
/* Shimmer effect for active progress */
.torn-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  animation: progress-shimmer 1.6s ease-in-out infinite;
}
@keyframes progress-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ── Realm / Barrier Progress — color-coded by realm tier ─── */
.realm-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.realm-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
}
.realm-bar-label span:last-child { color: var(--gold); font-weight: 600; }
.torn-progress-bar.realm-bar {
  height: 8px;
  border-radius: 4px;
}
.torn-progress-fill.realm-fill {
  border-radius: 4px;
}
/* Realm tier colors */
.realm-fill.mortal   { background: linear-gradient(90deg, #5a7a5a, #7a9a7a); box-shadow: 0 0 4px rgba(90,130,90,0.3); }
.realm-fill.incense  { background: linear-gradient(90deg, #4a6a8a, #6a8aaa); box-shadow: 0 0 4px rgba(70,110,170,0.3); }
.realm-fill.core     { background: linear-gradient(90deg, #6a4a9a, #8a6aba); box-shadow: 0 0 4px rgba(130,80,190,0.3); }
.realm-fill.xiandao  { background: linear-gradient(90deg, #c8a030, #e8c060); box-shadow: 0 0 6px rgba(230,180,60,0.4); }
.realm-fill.tianren  { background: linear-gradient(90deg, #c83030, #e85050); box-shadow: 0 0 6px rgba(230,60,60,0.4); }

/* ── XP / Experience Progress ─────────────────────────────── */
.xp-progress-wrap { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.xp-bar-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.xp-bar-label span:last-child { color: var(--green); font-weight: 600; }
.torn-progress-bar.xp-bar { height: 5px; border-radius: 2px; }
.torn-progress-fill.xp-fill { background: linear-gradient(90deg, #3a8a4a, #5aba6a); box-shadow: 0 0 4px rgba(63,185,80,0.3); }

/* ── Stamina / Energy Bar ─────────────────────────────────── */
.torn-progress-bar.stamina-bar { height: 5px; }
.torn-progress-fill.stamina-fill { background: linear-gradient(90deg, #e89030, #f4b060); box-shadow: 0 0 4px rgba(240,150,50,0.3); }

/* ── Torn Event Log ───────────────────────────────────────── */
.torn-log-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.torn-log-entry {
  display: flex;
  gap: 8px;
  font-size: var(--font-xs);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  align-items: baseline;
}
.torn-log-entry:last-child {
  border-bottom: none;
}
.torn-log-empty {
  font-size: var(--font-xs);
  color: rgba(110, 118, 129, 0.8);
  padding: 8px 0;
  font-style: italic;
}
.torn-log-time {
  color: var(--muted);
  flex-shrink: 0;
  font-size: 10px;
}
.torn-log-type {
  color: var(--blue);
  flex-shrink: 0;
  font-size: 10px;
  margin-right: 4px;
}
.torn-log-text {
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

* { box-sizing: border-box; }
:root {
  --bg: #080a0d;
  --surface: #0f1218;
  --border: #21262d;
  --text: #c9d1d9;
  --muted: #6e7681;
  --gold: #e6c07b;
  --green: #3fb950;
  --red: #f85149;
  --blue: #58a6ff;
  --purple: #bc8cff;
  --cyan: #79c0ff;

  /* Phase UI-8: Responsive shell dimensions */
  /* Mobile defaults */
  --shell-top: 52px;
  --shell-bottom: 64px;
  --shell-content-pad: 12px;

  /* New layers: account-bar + ticker height (mobile top strip) */
  --shell-account-h: 34px;
  --shell-ticker-h: 30px;
  /* Total top offset on mobile: account-bar + ticker + topbar */
  --shell-mobile-top: calc(var(--shell-account-h) + var(--shell-ticker-h) + var(--shell-top));

  /* Mobile-first base font scale */
  --font-xs:   11px;
  --line-tight: 1.25;
  --font-sm:   12px;
  --font-base: 14px;
  --font-md:   15px;
  --font-lg:   16px;
  --font-xl:   18px;

  /* Mobile-first tap target minimum */
  --tap-min: 44px;

  /* Desktop column width (applied via media query) */
  --desktop-col-width: 600px;
}

/* ── Layer 1: Account Bar ────────────────────────────────── */
/* Torn-style: persistent game title / server / account meta strip.
   Mobile: hidden (collapsed into topbar brand).
   Desktop: lives inside the sidebar as its header section. */
#shell-account-bar {
  display: none; /* mobile hidden */
}
@media (min-width: 768px) {
  #shell-account-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .account-bar-brand {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .account-bar-icon {
    font-size: 16px;
    color: var(--gold);
  }
  .account-bar-game {
    font-size: var(--font-sm);
    color: var(--text);
    font-weight: bold;
    font-family: 'Courier New', monospace;
  }
  .account-bar-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-xs);
    color: var(--muted);
    font-family: 'Courier New', monospace;
  }
  .account-bar-divider { opacity: 0.4; }
  .account-bar-status { color: var(--green); }
}

/* ── Layer 2: Notification Ticker ─────────────────────────── */
/* Single-line strip showing live events. Placeholder-ready.
   Mobile: appears below account-bar, above topbar.
   Desktop: appears below account-bar, above sidebar content. */
#shell-ticker {
  display: none; /* hidden on mobile, visible on desktop */
  height: var(--shell-ticker-h);
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 0 14px;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  #shell-ticker {
    display: flex;
  }
}
.ticker-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  font-family: 'Courier New', monospace;
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 2px;
}
.ticker-track {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.ticker-text {
  font-size: var(--font-xs);
  color: var(--text);
  white-space: nowrap;
  font-family: 'Courier New', monospace;
  opacity: 0.85;
}

/* Phase UI-2: Improved ticker animation — smooth infinite marquee
   Uses a two-part text duplication so the loop is seamless. */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-text {
  animation: ticker-scroll 20s linear infinite;
  display: inline-block;
  padding-right: 60px; /* gap between end and restart */
}

/* ── Phase UI-HERMES-TORN-LAYOUT-REPLICA-02 ──────────────────────
   Mobile Adaptation: account-bar + ticker slots
   Mobile (<768px): both slots collapse into topbar area.
   The topbar (fixed) now carries compact versions of these signals.
   Desktop (≥768px): full desktop sidebar with all 6 layers.
   ─────────────────────────────────────────────────────────────── */

/* Mobile: topbar receives compact inline account status indicators */
@media (max-width: 767px) {
  /* Compact status chip in topbar — realm + HP% inline */
  #shell-topbar {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 0;
    padding: 0;
  }
  /* Stats row: 24px */
  .topbar-stats-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    gap: 4px;
    overflow: hidden;
    flex-shrink: 0;
  }
  /* Nav row: 27px */
  .topbar-nav-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 27px;
    border-top: 1px solid var(--border-mid);
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
  }
  .topbar-nav-row::-webkit-scrollbar { display: none; }
  .topbar-nav-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 100%;
    font-size: 9px;
    color: var(--text-muted);
    cursor: pointer;
    border-right: 1px solid var(--border-dark);
    transition: color 0.15s;
  }
  .topbar-nav-item:hover { color: var(--text); }
  .topbar-nav-item.active {
    color: var(--gold);
    background: rgba(230,192,123,0.06);
    box-shadow: inset 0 -2px 0 var(--gold);
  }
  .topbar-nav-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  /* Inline bars in stats row */
  .hbar-label {
    font-size: 9px;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  .hbar {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(230,192,123,0.15);
    border-radius: 2px;
    overflow: hidden;
    width: 28px;
    flex-shrink: 0;
  }
  .hbar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3fb950, #56d364);
    border-radius: 1px;
    transition: width 0.4s ease;
    box-shadow: 0 0 4px rgba(63,185,80,0.4);
  }
  .hbar-fill[style*="width: 0%"] { background: #3fb950; }
  .hbar-fill[style*="width: 1"]:not([style*="width: 10"]):not([style*="width: 2"]):not([style*="width: 3"]):not([style*="width: 4"]):not([style*="width: 5"]):not([style*="width: 6"]):not([style*="width: 7"]):not([style*="width: 8"]):not([style*="width: 9"]) { background: #e6c377; }
  .hbar-fill[style*="width: 2"]:not([style*="width: 20"]):not([style*="width: 21"]):not([style*="width: 22"]):not([style*="width: 23"]):not([style*="width: 24"]):not([style*="width: 25"]):not([style*="width: 26"]):not([style*="width: 27"]):not([style*="width: 28"]):not([style*="width: 29"]) { background: #e6c377; }
  .hbar-fill[style*="width: 3"]:not([style*="width: 30"]):not([style*="width: 31"]):not([style*="width: 32"]):not([style*="width: 33"]):not([style*="width: 34"]):not([style*="width: 35"]):not([style*="width: 36"]):not([style*="width: 37"]):not([style*="width: 38"]):not([style*="width: 39"]) { background: #e6c377; }
  .hbar-fill[style*="width: 4"]:not([style*="width: 40"]):not([style*="width: 41"]):not([style*="width: 42"]):not([style*="width: 43"]):not([style*="width: 44"]):not([style*="width: 45"]):not([style*="width: 46"]):not([style*="width: 47"]):not([style*="width: 48"]):not([style*="width: 49"]) { background: #e6c377; }
  .hbar-fill[style*="width: 5"]:not([style*="width: 50"]):not([style*="width: 51"]):not([style*="width: 52"]):not([style*="width: 53"]):not([style*="width: 54"]):not([style*="width: 55"]):not([style*="width: 56"]):not([style*="width: 57"]):not([style*="width: 58"]):not([style*="width: 59"]) { background: #e6c377; }
  .hbar-fill[style*="width: 6"]:not([style*="width: 60"]):not([style*="width: 61"]):not([style*="width: 62"]):not([style*="width: 63"]):not([style*="width: 64"]):not([style*="width: 65"]):not([style*="width: 66"]):not([style*="width: 67"]):not([style*="width: 68"]):not([style*="width: 69"]) { background: #e6c377; }
  .hbar-fill[style*="width: 7"]:not([style*="width: 70"]):not([style*="width: 71"]):not([style*="width: 72"]):not([style*="width: 73"]):not([style*="width: 74"]):not([style*="width: 75"]):not([style*="width: 76"]):not([style*="width: 77"]):not([style*="width: 78"]):not([style*="width: 79"]) { background: #e6c377; }
  .hbar-fill[style*="width: 8"]:not([style*="width: 80"]):not([style*="width: 81"]):not([style*="width: 82"]):not([style*="width: 83"]):not([style*="width: 84"]):not([style*="width: 85"]):not([style*="width: 86"]):not([style*="width: 87"]):not([style*="width: 88"]):not([style*="width: 89"]) { background: #e6c377; }
  .hbar-fill[style*="width: 9"]:not([style*="width: 90"]):not([style*="width: 91"]):not([style*="width: 92"]):not([style*="width: 93"]):not([style*="width: 94"]):not([style*="width: 95"]):not([style*="width: 96"]):not([style*="width: 97"]):not([style*="width: 98"]):not([style*="width: 99"]) { background: #e6c377; }
  /* Level + realm */
  .topbar-level-realm {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    flex-shrink: 0;
  }
  #shell-topbar-level { color: var(--purple); font-weight: 700; }
  #shell-topbar-realm { color: var(--gold); }
  /* Separator */
  .topbar-sep { color: var(--border-mid); font-size: 9px; flex-shrink: 0; }
  /* Currency */
  .topbar-currency {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    flex-shrink: 0;
  }
  .topbar-currency .stat-icon { font-size: 9px; }
  .topbar-currency .stat-val { color: var(--text); }
  /* Scroll hints */
  .topnav-scroll-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--text-dim);
    flex-shrink: 0;
    padding: 0 4px;
  }
  .topnav-scroll-hint-left { display: none; }
  .topnav-scroll-hint-right { display: none; }
  /* Brand */
  .topbar-brand {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .topbar-logo {
    font-size: 14px;
    color: var(--gold);
  }
  #shell-topbar-title {
    font-size: 10px;
    color: var(--gold);
    font-weight: bold;
  }
}

/* Mobile-only ticker slot: shows as a compact scrolling strip below topbar */
@media (max-width: 767px) {
  #shell-ticker {
    display: flex;  /* Phase UI-2 Fix D7: removed !important — later source order overrides */
    height: 26px;
    padding: 0 10px;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
    position: relative; /* stays in flex flow within #shell */
    z-index: 99;
  }
  #shell-ticker .ticker-label {
    font-size: 9px;
    padding: 1px 4px;
  }
  #shell-ticker .ticker-text {
    font-size: 10px;
    opacity: 0.75;
  }
  /* On mobile, content top is pushed by topbar height only (ticker is in flex flow) */
}

/* ── Shell Root ───────────────────────────────────────────── */
#shell {
  /* NOT fixed — let flex flow naturally, topbar is fixed at absolute top */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  font-family: 'Courier New', monospace;
  font-size: var(--font-base);
  color: var(--text);
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: calc(var(--safe-top) + var(--topbar-height));
}

/* ── Top Status Bar (Phase 18A: unified 54px chrome) ──────────*/
#shell-topbar {
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
}
#shell-topbar-title {
  color: var(--gold);
  font-size: var(--font-lg);
  font-weight: bold;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#shell-topbar-meta {
  font-size: var(--font-xs);
  color: var(--muted);
  white-space: nowrap;
}
#shell-topbar-meta span { margin-left: 10px; }
#shell-topbar-meta .val { color: var(--text); }

/* ── Main Content ─────────────────────────────────────────── */
#shell-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* ── Bottom Navigation — REMOVED from ALL viewports ──────────── */
/* Phase A Fix #2: Torn-style — 4 primary items, larger touch targets, breathing room */
/* Phase C Retry Fix: bottom nav is NEVER shown — top-nav is the sole nav on mobile */
/* Override desktop media query block to keep nav hidden everywhere */
@media (min-width: 768px) {
#shell-nav {
  display: none !important;
}
}
.shell-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: var(--font-xs);
  color: rgba(201,209,217,0.5);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  transition: color 0.15s, transform 0.15s;
  border-top: 2px solid transparent;
  min-width: 0;
  min-height: 64px;
}
.shell-nav-item .nav-icon { font-size: 24px; line-height: 1; filter: drop-shadow(0 0 10px rgba(121,192,255,0.04)); }
.shell-nav-item:hover { color: var(--text); transform: translateY(-1px); }
/* Phase UI-HERMES-IMPROVE-03: Mobile nav — stronger active section awareness */
.shell-nav-item.active {
  color: #f4e6ba;
  border-top-color: rgba(230,192,123,0.88);
  background: linear-gradient(180deg, rgba(230,192,123,0.08), transparent 80%);
  position: relative;
}
/* Animated gold pulse dot — current-section indicator */
.shell-nav-item.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,192,123,0.18), transparent 70%);
  pointer-events: none;
  animation: nav-active-pulse 2.4s ease-in-out infinite;
}
@keyframes nav-active-pulse {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.6; transform: translate(-50%, -50%) scale(1.15); }
}
/* Desktop nav item dot positioning — inside the button's flex gap area */
.sidebar-nav-item .nav-active-dot {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.sidebar-nav-item {
  position: relative;
}

/* ── Battle Overlay ────────────────────────────────────────── */
#shell-battle-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: none;
  flex-direction: column;
}
#shell-battle-overlay.active { display: flex; }

/* ── Mobile-first safe zone ───────────────────────────────── */
@media (max-width: 480px) {
  .shell-nav-item .nav-icon { font-size: 16px; }
  .shell-nav-item { font-size: 9px; }
}

/* ── Legacy compatibility wrapper ─────────────────────────── */
/* Old #app area is mounted here; shell.js will redirect */
#legacy-app-container {
  display: block;
}

/* ── Page Placeholder ────────────────────────────────────── */
.page-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
}
.page-placeholder .placeholder-icon {
  font-size: 40px;
  margin-bottom: 8px;
}
.page-placeholder .placeholder-title {
  color: var(--gold);
  margin-bottom: 4px;
  font-size: 14px;
}
.page-placeholder .placeholder-sub {
  font-size: 11px;
}

/* ── Page Section Card ────────────────────────────────────── */
.page-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.section-title {
  color: var(--gold);
  font-size: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.section-row .val {
  color: var(--text);
}

/* ── Dungeon Page wrapper ────────────────────────────────── */
#page-dungeon {
  /* Dungeon page mounts #app directly */
}

/* ── Team Page wrapper ───────────────────────────────────── */
#page-team {
  flex-direction: column;
  gap: 0;
}
#page-team #team-panel {
  display: block; /* unhide; was hidden by default */
  margin-bottom: 0;
  border-radius: 4px;
}

/* ── Recruit Page wrapper ────────────────────────────────── */
#page-recruit {
  flex-direction: column;
  gap: 12px;
}
#page-recruit > .torn-dashboard,
#page-recruit > .legacy-shell-panel {
  flex: 0 0 auto;
}
#page-recruit #recruit-panel {
  display: block; /* unhide; was hidden by default */
  margin-bottom: 0;
  border-radius: 4px;
}

#page-team {
  flex-direction: column;
  gap: 12px;
}

#page-team > .torn-dashboard,
#page-team > .legacy-shell-panel {
  flex: 0 0 auto;
}

#page-team #team-panel,
#page-recruit #recruit-panel {
  position: static !important;
  transform: none !important;
  top: auto !important;
}

/* ── Mobile-First Breakpoint (≤480px) ──────────────────────── */
/* Phase UI-9: Home IA — full-width, compact hero, action strip */
@media (max-width: 480px) {
  :root {
    --font-xs:   11px;
    --font-sm:   12px;
    --font-base: 14px;
    --font-md:   15px;
    --font-lg:   16px;
    --font-xl:   18px;
  }

  .shell-nav-item .nav-icon { font-size: 20px; }
  .shell-nav-item { font-size: 10px; gap: 2px; }
  .page-section { padding: 12px 14px; }
}

/* ── Tablet (481px–767px) ─────────────────────────────────── */
/* Phase UI-9: Same mobile-first approach — bottom nav is primary */
@media (min-width: 481px) and (max-width: 767px) {
}

/* ═══════════════════════════════════════════════════════════
   Phase UI-9: Desktop Adaptive Layout (≥768px)
   Desktop: centered fixed-width column (600px), no horizontal scroll
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    --shell-top: 56px;
    --shell-content-pad: 16px;
    --font-xs: 12px;
    --font-sm: 13px;
    --font-base: 15px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --shell-top-nav-h: 0px;
  }

  #shell {
    position: relative;
    flex-direction: row;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 0;
  }
  #shell-topbar { padding: 0 20px; }
  #shell-content {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    padding: 18px 22px 40px;
    background:
      radial-gradient(circle at top left, rgba(88,166,255,0.08), transparent 32%),
      radial-gradient(circle at top right, rgba(230,192,123,0.08), transparent 28%),
      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  }
  #page-home {
    display: block;
    min-height: calc(100dvh - 64px);
  }
  /* Desktop: bottom nav stays compact but readable */
  .shell-nav-item { min-height: 56px; }
  .shell-nav-item .nav-icon { font-size: 22px; }
  .shell-nav-item { font-size: var(--font-xs); gap: 4px; }

  /* Desktop: page sections more spacious */
  .page-section { padding: 16px 20px; }

  /* Desktop: battle team sections side by side */
  #battle-teams {
    flex-direction: row;
    align-items: flex-start;
  }
  #battle-teams .battle-team-section {
    flex: 1;
  }
  #battle-teams .battle-char-list {
    max-height: 50vh;
    overflow-y: auto;
  }
}

/* ── Extra Wide Desktop (>1024px) ─────────────────────────── */
@media (min-width: 1024px) {
  :root {
    --desktop-col-width: 1080px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Phase UI-9: Horizontal Scroll Prevention
   Ensures no element can cause horizontal overflow on both
   mobile (full-width) and desktop (centered column).
   ═══════════════════════════════════════════════════════════ */
#shell, #shell-content, #shell-topbar, #shell-nav {
  overflow-x: hidden;
}

.page {
  display: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  transform: scale(0.98);
  min-height: 100%;
}

.page.active {
  display: block;
  opacity: 1;
  transform: scale(1);
}

#page-team,
#page-recruit,
#page-inventory,
#page-cultivation {
  display: none;
}

#page-team.active,
#page-recruit.active,
#page-inventory.active,
#page-cultivation.active {
  display: flex;
}

.page > *:first-child {
  margin-top: 0;
}

.legacy-shell-panel {
  margin-top: 12px;
  border-top: 1px solid rgba(230,192,123,0.12);
  padding-top: 10px;
  min-width: 0;
  overflow: visible;
}


/* ═══════════════════════════════════════════════════════════
   Phase UI-5: Visual System — Tokens & Utilities
   Provides consistent spacing, card, button, badge, and
   typography primitives across all shell pages.
   ═══════════════════════════════════════════════════════════ */

/* ── Page Section Card (shared across all pages) ─────────── */
.page-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.section-title {
  color: var(--gold);
  font-size: var(--font-base);
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title .st-icon { font-size: 16px; }
.section-title .st-count {
  margin-left: auto;
  font-size: var(--font-xs);
  color: var(--muted);
  font-weight: normal;
}
.section-sub {
  font-size: var(--font-sm);
  color: var(--muted);
  margin-bottom: 10px;
}
.section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-sm);
  color: var(--muted);
  margin-bottom: 6px;
}
.section-row .sr-val { color: var(--text); }

/* ── Status Pill / Badge ─────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
}
.pill-green  { background: #1c3a1c; color: #3fb950; }
.pill-red    { background: #3a1c1c; color: #f85149; }
.pill-gold   { background: #3b3217; color: #e6c07b; }
.pill-blue   { background: #1c2e3a; color: #58a6ff; }
.pill-purple { background: #2c1a3a; color: #bc8cff; }
.pill-gray   { background: #21262d; color: #8b949e; }

/* ── Resource Strip — Deficiency 3: Consistent gold accent bars for Torn-like grouping ── */
.resource-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  padding: 6px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(230,192,123,0.12);
  border-radius: 4px;
  margin-bottom: 10px;
  align-items: center;
}
/* Gold accent bar before strip label — Torn resource grouping */
.resource-strip::before {
  content: '';
  display: inline-block;
.resource-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(230,192,123,0.12);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  font-size: var(--font-sm);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.resource-strip .rs-icon { font-size: 13px; }
.resource-strip .rs-val { color: var(--gold); font-weight: bold; }
.resource-strip .rs-divider {
  width: 1px;
  height: 12px;
  background: rgba(230,192,123,0.20);
  flex-shrink: 0;
}

/* ── Torn Page Panel — Deficiency 7: Unified page-level panel framing ── */
.torn-page-panel {
  background: var(--surface);
  border: 1px solid rgba(230,192,123,0.18);
  border-top: 3px solid rgba(230,192,123,0.38);
  border-radius: 4px;
  padding: 14px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  margin-bottom: 12px;
}
.torn-page-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(230,192,123,0.15);
  font-size: var(--font-sm);
  color: var(--gold);
  font-weight: bold;
  letter-spacing: 0.05em;
}
.torn-page-panel-header::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--gold);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Card Row (compact list item) — Deficiency 4/5: Consistent card rhythm ── */
  border-color: rgba(230,192,123,0.30);
  background: rgba(230,192,123,0.04);
}
.card-row:active {
  transform: scale(0.99);
}
.card-row:last-child { margin-bottom: 0; }
.card-row .cr-icon { font-size: 20px; flex-shrink: 0; }
.card-row .cr-text { flex: 1; min-width: 0; }
.card-row .cr-name { font-size: var(--font-base); color: var(--text); font-weight: bold; }
.card-row .cr-sub { font-size: var(--font-xs); color: var(--muted); margin-top: 2px; }
.card-row .cr-action { flex-shrink: 0; }
/* Deficiency 11: Amount/stepper controls for mobile — larger touch targets */
.card-row .cr-amount {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(230,192,123,0.20);
  border-radius: 4px;
  overflow: hidden;
}
.card-row .cr-amount button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  background: rgba(255,255,255,0.04);
  border: none;
  border-radius: 0;
  color: var(--gold);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-row .cr-amount button:hover {
  background: rgba(230,192,123,0.15);
}
.card-row .cr-amount button:active {
  background: rgba(230,192,123,0.25);
}
.card-row .cr-amount .cr-qty {
  min-width: 36px;
  text-align: center;
  font-size: var(--font-sm);
  color: var(--gold);
  font-weight: bold;
  padding: 0 6px;
  border-left: 1px solid rgba(230,192,123,0.12);
  border-right: 1px solid rgba(230,192,123,0.12);
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Button Hierarchy — Deficiency 2/5/8: Torn-style primary CTA prominence ── */
button {
  font-family: 'Courier New', monospace;
  font-size: var(--font-sm); /* Phase UI-8: 12px (was 12px) */
  padding: 10px 16px;        /* Phase UI-8: taller buttons (was 4px 14px) */
  border-radius: 4px;
  min-height: var(--tap-min); /* Phase UI-8: minimum tap target */
  transition: all 0.15s ease;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button:disabled:active { transform: none; }

/* Primary CTA — the main Torn action button */
button.primary,
.torn-action-btn {
  background: linear-gradient(135deg, rgba(230,192,123,0.18) 0%, rgba(230,192,123,0.10) 100%);
  border: 1px solid rgba(230,192,123,0.45);
  border-bottom: 2px solid rgba(230,192,123,0.30);
  color: var(--gold);
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  box-shadow: 0 0 12px rgba(230,192,123,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
}
button.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(230,192,123,0.26) 0%, rgba(230,192,123,0.15) 100%);
  border-color: rgba(230,192,123,0.60);
  box-shadow: 0 0 18px rgba(230,192,123,0.14), inset 0 1px 0 rgba(255,255,255,0.06);
  color: #f0d890;
}
button.primary:active:not(:disabled) {
  background: rgba(230,192,123,0.10);
  border-color: rgba(230,192,123,0.35);
  box-shadow: 0 0 6px rgba(230,192,123,0.06);
}

/* D4: Loading state — spinner icon + muted color */
button.loading,
button:disabled {
  opacity: 0.40;
  cursor: not-allowed;
  color: var(--muted);
}
button.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
button.loading::after {
  content: '◌';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-size: 14px;
  animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* D4: Active/pressed state — distinct from disabled */
button:active:not(:disabled):not(.loading) {
  transform: scale(0.97);
  opacity: 0.85;
}
button:disabled:active { transform: none; }

/* Small/icon button — nav icons, close buttons */
button.small {
  padding: 6px 12px;         /* Phase UI-8: 6px 12px (was 2px 8px) */
  font-size: var(--font-xs);  /* Phase UI-8: 11px */
  min-height: 36px;
}
button.small:hover:not(:disabled) {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
}

/* D3: Danger button — distinct red for destructive actions (remove/kick/delete) */
button.btn-danger,
.btn-danger {
  background: rgba(248,81,73,0.12) !important;
  border: 1px solid rgba(248,81,73,0.40) !important;
  color: #f85149 !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
button.btn-danger:hover:not(:disabled) {
  background: rgba(248,81,73,0.22) !important;
  border-color: rgba(248,81,73,0.65) !important;
  box-shadow: 0 0 8px rgba(248,81,73,0.25);
  color: #ff8080 !important;
}
button.btn-danger:active:not(:disabled) {
  background: rgba(248,81,73,0.08) !important;
}

/* ── Inventory Page ──────────────────────────────────────── */
#page-inventory {
  flex-direction: column;
  gap: 0;
}
#page-inventory > .torn-dashboard,
#page-inventory > .legacy-shell-panel,
#page-cultivation > .torn-dashboard,
#page-cultivation > .legacy-shell-panel {
  flex: 0 0 auto;
}

#page-inventory > .page-inventory-content,
#page-cultivation > .page-cultivation-content,
#page-team > .torn-dashboard,
#page-recruit > .torn-dashboard,
#page-dungeon > #app,
#page-home > .torn-dashboard {
  margin-top: 0;
}

#page-team,
#page-recruit,
#page-dungeon,
#page-home,
#page-inventory,
#page-cultivation {
  flex-direction: column;
  gap: 12px;
  align-content: flex-start;
}

#page-team > .legacy-shell-panel,
#page-recruit > .legacy-shell-panel,
#page-dungeon > #app,
#page-cultivation > .page-cultivation-content,
#page-inventory > .page-inventory-content {
  width: 100%;
}

#page-inventory .page-inventory-resources {
  margin-bottom: 10px;
}

/* ── Cultivation Page ────────────────────────────────────── */
#page-cultivation {
  flex-direction: column;
  gap: 0;
}

/* Legacy panel wrappers for Inventory/Cultivation pages ────── */
/* When mounted into shell page, ensure panels show correctly */
#page-inventory #inventory-bar,
#page-inventory #equip-panel,
#page-cultivation #progression-bar,
#page-cultivation #cave-panel,
#page-cultivation #craft-panel {
  display: block !important;
  margin-bottom: 10px;
  border-radius: 4px;
}

#page-inventory #inventory-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 8px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  border-radius: 4px;
  margin-bottom: 10px;
}

#page-inventory #equip-panel {
  border-radius: 4px;
}

#page-cultivation #progression-bar {
  display: flex;
  border-radius: 4px;
  margin-bottom: 10px;
}

#page-cultivation #cave-panel {
  border-radius: 4px;
}

#page-cultivation #craft-panel {
  border-radius: 4px;
}

/* ── Cross-Page Consistency ───────────────────────────────── */
/* Ensure all page sections use same rhythm */
.page > .page-section:last-child {
  margin-bottom: 0;
}

/* Phase UI-HERMES-IMPROVE-01: Error/empty state panel — torn-guided pattern */
.page-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 10px;
}
.page-empty-state .pes-icon { font-size: 36px; margin-bottom: 10px; filter: grayscale(0.3); }
.page-empty-state .pes-title { color: var(--gold); margin-bottom: 6px; font-size: var(--font-base); font-weight: 600; }
.page-empty-state .pes-sub { font-size: var(--font-sm); color: var(--muted); line-height: 1.5; max-width: 240px; }
.page-empty-state .pes-cta { margin-top: 14px; }

/* Phase UI-HERMES-IMPROVE-01: Error message — prominent, dismissible, accessible */
#error-msg {
  display: none;
  position: fixed;
  top: calc(var(--shell-top) + 8px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(480px, calc(100vw - 32px));
  width: 100%;
  padding: 12px 16px;
  background: rgba(30,10,10,0.97);
  border: 1px solid rgba(248,81,73,0.5);
  border-radius: 6px;
  color: #f85149;
  font-size: var(--font-sm);
  font-family: 'Courier New', monospace;
  z-index: 999;
  box-shadow: 0 4px 20px rgba(248,81,73,0.18), 0 2px 8px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1.5;
  animation: error-slide-in 0.22s ease-out;
}
#error-msg.show { display: flex; align-items: center; gap: 10px; }
#error-msg::before { content: '⚠'; font-size: 16px; flex-shrink: 0; }
#error-msg::after {
  content: '✕';
  margin-left: auto;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.6;
  font-size: 12px;
  padding: 2px 4px;
}
#error-msg::after:hover { opacity: 1; }
@keyframes error-slide-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (min-width: 768px) {
  #error-msg {
    top: calc(var(--shell-top) + 16px);
    max-width: min(520px, calc(100vw - 32px));
  }
}

/* Phase UI-HERMES-IMPROVE-02: Battle Toolbar — system vs gameplay separation */
#battle-toolbar {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
}
body.battle-active #battle-toolbar { display: flex; }
.toolbar-system {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.toolbar-gameplay {
  display: flex;
  gap: 8px;
  align-items: center;
}
.toolbar-btn {
  font-family: 'Courier New', monospace;
  font-size: var(--font-sm);
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  cursor: pointer;
  min-height: var(--tap-min);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.toolbar-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}
/* System actions: muted styling — lower visual weight */
.toolbar-btn-system {
  color: var(--muted);
  border-color: rgba(255,255,255,0.06);
  font-size: var(--font-xs);
  padding: 6px 10px;
}
.toolbar-btn-system:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,0.06);
}
/* Primary CTA: prominent gold border — gameplay primary action */
.toolbar-btn-primary {
  background: linear-gradient(135deg, rgba(230,192,123,0.20), rgba(188,140,255,0.10));
  border-color: rgba(230,192,123,0.50);
  color: var(--gold);
  font-weight: bold;
  font-size: var(--font-base);
  padding: 10px 20px;
  box-shadow: 0 2px 12px rgba(230,192,123,0.15);
}
.toolbar-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(230,192,123,0.28), rgba(188,140,255,0.16));
  border-color: rgba(230,192,123,0.70);
  color: var(--gold);
  box-shadow: 0 4px 18px rgba(230,192,123,0.25);
  transform: translateY(-1px);
}
.toolbar-btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 6px rgba(230,192,123,0.15);
}
.toolbar-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (max-width: 400px) {
  #battle-toolbar { padding: 8px 10px; }
  .toolbar-btn-primary { padding: 9px 14px; font-size: var(--font-sm); }
}
.quality-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.quality-epic    { background: #bc8cff; }
.quality-rare    { background: #58a6ff; }
.quality-uncommon { background: #3fb950; }
.quality-common  { background: #8b949e; }

/* ═══════════════════════════════════════════════════════════
   Phase UI-HERMES-TORN-LAYOUT-REPLICA-02: Collapsible Panel Animation
   Smooth max-height transition for torn-module collapse/expand.
   ═══════════════════════════════════════════════════════════ */
.torn-panel {
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease;
}
.torn-panel.collapsed {
  max-height: 0 !important;
  opacity: 0;
}
.torn-panel.expanded {
  max-height: 2000px;
  opacity: 1;
}
/* Panel toggle button */
.torn-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-xs);
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.15s;
}
.torn-panel-toggle:hover { color: var(--text); }
.torn-panel-toggle .toggle-icon {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 10px;
}
.torn-panel-toggle.open .toggle-icon { transform: rotate(90deg); }
.quality-junk   { background: #484f58; }

/* ── Top Horizontal Nav (Phase B: nav-priority) ──────────────
   Torn-style horizontal scrollable nav bar for mobile-first.
   Sits directly below #shell-topbar, above #shell-content.
   Desktop: hidden (sidebar handles nav).
   Mobile: horizontal scroll, supports 10+ items.
────────────────────────────────────────────────────────────── */
#shell-top-nav {
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: linear-gradient(to bottom, #1a1a1a 0%, #111 40%, #0d0d0d 100%);
  border-bottom: 1px solid #2a2a2a;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 44px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.04);
}
#shell-top-nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,192,123,0.15), transparent);
}
.shell-top-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 8px;
  color: #555;
  font-size: 9px;
  font-family: 'Courier New', monospace;
  text-decoration: none;
  border-right: 1px solid #1a1a1a;
  cursor: pointer;
  transition: none;
  position: relative;
  overflow: hidden;
}
.shell-top-nav-item .nav-icon {
  font-size: 14px;
  line-height: 1;
  color: #444;
  overflow: hidden;
  white-space: nowrap;
}
.shell-top-nav-item .nav-label {
  font-size: 9px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.shell-top-nav-item:hover {
  background: rgba(255,255,255,.02);
  color: #888;
}
.shell-top-nav-item:hover .nav-icon { color: #777; }
.shell-top-nav-item:hover .nav-label { color: #777; }
.shell-top-nav-item.active {
  background: linear-gradient(to bottom, #1f1a10 0%, #18140a 100%);
  color: #e6c377;
  box-shadow: inset 0 2px 6px rgba(230,192,123,.08);
}
.shell-top-nav-item.active::before {
  content: '';
  position: absolute;
  bottom: 0; left: 20%; right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e6c377, transparent);
}
.shell-top-nav-item.active .nav-icon { color: #c9a45c; }
.shell-top-nav-item.active .nav-label { color: #e6c377; }

/* Phase D: TRAIN CTA — gold border + glow for maximum visual prominence */
.torn-action-card.train-action {
  border: 2px solid gold;
  font-weight: 700;
  min-height: 44px;
  box-shadow: 0 0 8px rgba(218,165,32,0.4);
  background: rgba(218,165,32,0.08);
}
.shell-top-nav-item.active .top-nav-hint { color: rgba(230,192,123,0.65); }

.topnav-scroll-hint,
.subnav-scroll-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(230,192,123,0.72);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  opacity: 0.9;
  transition: opacity 160ms ease;
}

.topnav-scroll-hint {
  position: static;
  flex: 0 0 auto;
  z-index: 0;
  min-width: 18px;
  height: auto;
  background: linear-gradient(90deg, rgba(7,10,15,0.92), rgba(7,10,15,0));
}
.topnav-scroll-hint-left { margin-right: 2px; }
.topnav-scroll-hint-right { margin-left: 2px; }

.subnav-scroll-hint {
  flex: 0 0 auto;
  align-self: center;
  min-height: 30px;
  padding: 0 2px;
  background: linear-gradient(90deg, rgba(11,14,20,0.92), rgba(11,14,20,0));
}

/* Phase G: Dungeon Page — feature-detail layout for #shell-content */
#page-dungeon {
  padding: 0;
  overflow: visible;
  min-height: 100%;
  box-sizing: border-box;
}

.dungeon-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dungeon-header {
  margin-bottom: 4px;
}

.dungeon-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e6c07b;
  margin: 0 0 4px;
}

.dungeon-subtitle {
  font-size: 0.8rem;
  color: #8b949e;
  margin: 0;
}

.instance-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.instance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.instance-card:hover {
  border-color: #c9a227;
  background: rgba(218,165,32,0.06);
  transform: scale(1.02);
}

.instance-card.selected {
  border: 2px solid var(--gold);
  background: rgba(230,192,123,0.12);
  box-shadow: 0 0 0 3px rgba(230,192,123,0.28), 0 4px 20px rgba(230,192,123,0.20);
  transform: scale(1.03);
  outline: 3px solid rgba(230,192,123,0.50);
  outline-offset: 1px;
}

.instance-card.selected:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.instance-card.selected:hover {
  transform: scale(1.04);
}

.instance-card.danger {
  border-color: rgba(248,81,73,0.5);
}

/* D8: Skeleton loading for instance-card grid */
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-card-title {
  height: 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  width: 70%;
}
.skeleton-card-meta {
  height: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  width: 50%;
}
.skeleton-card-desc {
  height: 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 3px;
  width: 90%;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.instance-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.instance-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e6c07b;
}

.instance-card-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.instance-card-badge.safe {
  background: rgba(63,185,80,0.2);
  color: #3fb950;
  border: 1px solid rgba(63,185,80,0.4);
}

.instance-card-badge.warning {
  background: rgba(248,81,73,0.2);
  color: #f85149;
  border: 1px solid rgba(248,81,73,0.4);
}

.instance-card-badge.moderate {
  background: rgba(230,192,123,0.2);
  color: #e6c07b;
  border: 1px solid rgba(230,192,123,0.4);
}

.instance-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.75rem;
  color: #8b949e;
}

.instance-card-meta span {
  color: #c9d1d9;
}

.instance-card-desc {
  font-size: 0.72rem;
  color: var(--muted); /* D2: was #999 — insufficient contrast on dark bg */
  line-height: 1.4;
  margin-top: 2px;
}

/* CTA row */
.dungeon-cta-row {
  margin-top: 4px;
}

.btn-train-cta {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 700;
  color: #0d1117;
  background: linear-gradient(135deg, #c9a227, #e6c07b);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(201,162,39,0.3);
}

.btn-train-cta:hover:not(:disabled) {
  background: linear-gradient(135deg, #e6c07b, #f4e6ba);
  box-shadow: 0 0 0 3px rgba(230,192,123,0.30), 0 4px 16px rgba(201,162,39,0.4);
  transform: translateY(-2px);
}

.btn-train-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn-train-cta:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(201,162,39,0.25);
}

.btn-train-cta:disabled {
  background: #21262d;
  color: #484f58;
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  border: 1px solid #30363d;
}

/* D12: Pulse animation for selected CTA */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,192,123,0.5), 0 2px 8px rgba(201,162,39,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(230,192,123,0), 0 2px 8px rgba(201,162,39,0.3); }
}
.btn-train-cta.cta-pulse:not(:disabled) {
  animation: cta-pulse 1.8s ease-in-out infinite;
}

/* Instance detail panel */
.instance-detail-panel {
  display: none;
  background: var(--surface);
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 14px;
  margin-top: 8px;
}

.instance-detail-panel.show {
  display: block;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.detail-name {
  font-size: 1rem;
  font-weight: 700;
  color: #e6c07b;
}

.detail-level {
  font-size: 0.75rem;
  color: #8b949e;
  background: #21262d;
  padding: 2px 6px;
  border-radius: 4px;
}

.detail-meta {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: #8b949e;
  margin-bottom: 10px;
}

.detail-waves { color: #c9d1d9; }

.detail-difficulty {
  color: #c9d1d9;
}

.detail-difficulty.elite {
  color: #f85149;
}

.detail-tags-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.75rem;
  margin-bottom: 6px;
}

.detail-tags-label {
  color: #6e7681;
  margin-right: 2px;
}

.detail-tag {
  display: inline-block;
  padding: 2px 6px;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 4px;
  color: #c9d1d9;
  font-size: 0.7rem;
}

.detail-tag.drop {
  border-color: rgba(63,185,80,0.4);
  color: #3fb950;
}

.detail-warning {
  display: none;
  font-size: 0.75rem;
  color: #f85149;
  background: rgba(248,81,73,0.1);
  border: 1px solid rgba(248,81,73,0.3);
  border-radius: 6px;
  padding: 8px;
  margin: 8px 0;
}

.detail-warning.show {
  display: block;
}

.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.detail-actions .btn-train-cta {
  flex: 1;
  width: auto;
  padding: 10px 16px;
  font-size: 0.9rem;
}

.btn-cancel {
  padding: 10px 16px;
  background: #21262d;
  color: #8b949e;
  border: 1px solid #30363d;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, border-color 0.15s;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--muted);
  text-align: center;
  gap: 12px;
}
.empty-state-icon { font-size: 40px; opacity: 0.4; }
.empty-state-title {
  font-size: var(--font-base);
  font-weight: bold;
  color: var(--text);
  opacity: 0.7;
}
.empty-state-sub {
  font-size: var(--font-xs);
  color: var(--muted);
  opacity: 0.7;
  line-height: 1.5;
}

/* D14: More welcoming empty state — dashed border + subtle bg */
.empty-state {
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
}
/* D15: Sidebar nav icon styled container */
.sidebar-nav-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  transition: background 0.15s;
}
.sidebar-nav-item.active .sidebar-nav-icon-wrap {
  background: rgba(230,192,123,0.18);
}
.sidebar-nav-item.active .sidebar-nav-icon-wrap .sidebar-nav-icon {
  color: var(--gold);
}

/* D11: Global keyboard focus indicators for all interactive elements */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* D8: Skeleton loading animation */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.skeleton-line {
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skeleton-card .skel {
  height: 12px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-card .skel-title { height: 16px; width: 60%; }
.skeleton-card .skel-badge { height: 10px; width: 40px; border-radius: 4px; }
.skeleton-card .skel-meta { height: 10px; width: 80%; }
.skeleton-card .skel-desc { height: 10px; width: 95%; }

.btn-cancel:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(230,192,123,0.30);
}

/* ══════════════════════════════════════════════════════════════
   D1: Instance card selected — golden glow border + subtle bg tint
   ══════════════════════════════════════════════════════════════ */
.instance-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.instance-card:hover {
  transform: scale(1.02);
}
.instance-card.selected {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(230,192,123,0.45), 0 0 16px rgba(230,192,123,0.25), inset 0 0 12px rgba(230,192,123,0.08);
  background: rgba(230,192,123,0.06) !important;
}

/* ══════════════════════════════════════════════════════════════
   D2: Instance card description — WCAG AA contrast (#999 on dark)
   ══════════════════════════════════════════════════════════════ */
.instance-card-desc {
  color: #999;
  font-size: var(--font-xs);
  line-height: 1.5;
}

/* D3: Danger label color coding — dynamic badge classes */
.instance-card-badge { font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 600; letter-spacing: 0.04em; }
.instance-card-badge.danger  { background: rgba(248,81,73,0.18); color: #f85149; border: 1px solid rgba(248,81,73,0.30); }
.instance-card-badge.moderate { background: rgba(210,153,34,0.18); color: #d29922; border: 1px solid rgba(210,153,34,0.30); }
.instance-card-badge.safe     { background: rgba(63,185,80,0.15); color: #3fb950; border: 1px solid rgba(63,185,80,0.25); }

/* ══════════════════════════════════════════════════════════════
   D4: Button hover gradient + shadow; disabled state
   ══════════════════════════════════════════════════════════════ */
.btn-train-cta {
  background: linear-gradient(135deg, rgba(230,192,123,0.28), rgba(188,140,255,0.16));
  border: 2px solid var(--gold);
  border-radius: 4px;
  color: var(--gold);
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(230,192,123,0.20), 0 4px 12px rgba(0,0,0,0.25);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.btn-train-cta:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(230,192,123,0.38), rgba(188,140,255,0.24));
  border-color: #f4e6ba;
  box-shadow: 0 0 0 3px rgba(230,192,123,0.30), 0 6px 18px rgba(230,192,123,0.30), 0 4px 14px rgba(0,0,0,0.30);
  transform: translateY(-1px);
}
.btn-train-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn-train-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* D12: CTA pulse animation when card is selected */
@keyframes cta-pulse-anim {
  0%, 100% { box-shadow: 0 0 0 2px rgba(230,192,123,0.20), 0 4px 12px rgba(0,0,0,0.25); }
  50% { box-shadow: 0 0 0 5px rgba(230,192,123,0.35), 0 4px 20px rgba(230,192,123,0.45), 0 4px 14px rgba(0,0,0,0.30); }
}
.btn-train-cta.cta-pulse {
  animation: cta-pulse-anim 1.6s ease-in-out infinite;
}
.btn-train-cta.cta-pulse:hover:not(:disabled) {
  animation: none;
}

/* D6: Toast notification system — improved positioning + auto-dismiss progress bar */
#toast-container {
  position: fixed;
  bottom: 80px; /* above mobile bottom nav (64px) + breathing room */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: min(480px, calc(100vw - 32px));
  width: 100%;
}
@media (min-width: 768px) {
  #toast-container { bottom: 24px; }
}
.toast-msg {
  background: rgba(16,20,28,0.97);
  border: 1px solid rgba(230,192,123,0.35);
  border-radius: 6px;
  padding: 10px 18px;
  color: var(--text);
  font-size: var(--font-sm);
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.50);
  animation: toast-slide-up 0.25s ease forwards;
  min-width: 140px;
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.toast-msg.gold  { border-color: rgba(230,192,123,0.55); color: var(--gold); }
.toast-msg.green { border-color: rgba(63,185,80,0.45); color: #3fb950; }
.toast-msg.red   { border-color: rgba(248,81,73,0.45); color: #f85149; }
.toast-msg.blue  { border-color: rgba(88,166,255,0.45); color: #58a6ff; }
.toast-msg.success { border-color: rgba(63,185,80,0.55); color: #3fb950; border-left: 3px solid #3fb950; }
.toast-msg.danger  { border-color: rgba(248,81,73,0.55); color: #f85149; border-left: 3px solid #f85149; }
.toast-msg.warning { border-color: rgba(230,192,123,0.55); color: #e8c060; border-left: 3px solid #e8c060; }
.wave-progress-wrap {
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.wave-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.wave-progress-fill.normal-wave {
  background: linear-gradient(90deg, rgba(88,166,255,0.6), rgba(88,166,255,0.9));
  box-shadow: 0 0 6px rgba(88,166,255,0.5);
}
.wave-progress-fill.boss-wave {
  background: linear-gradient(90deg, rgba(230,192,123,0.7), rgba(230,192,123,1));
  box-shadow: 0 0 8px rgba(230,192,123,0.6);
  animation: progress-shimmer 2s linear infinite;
}

.clickable-craft { cursor: pointer; }
.clickable-craft:hover { opacity: 0.85; }

/* ── Performance Polish ─────────────────────────────────── */

/* Smooth scrolling + custom scrollbar */
* { scroll-behavior: smooth; }

:root {
  scrollbar-width: thin;
  scrollbar-color: rgba(230,192,123,0.25) rgba(255,255,255,0.05);
}
:root::-webkit-scrollbar { width: 6px; height: 6px; }
:root::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
:root::-webkit-scrollbar-thumb { background: rgba(230,192,123,0.25); border-radius: 3px; }
:root::-webkit-scrollbar-thumb:hover { background: rgba(230,192,123,0.45); }

/* Text selection color */
::selection { background: rgba(230,192,123,0.3); color: var(--text); }

/* Focus-visible states */
:focus-visible {
  outline: 2px solid rgba(230,192,123,0.6);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* GPU-accelerated transform helpers */
.gpu { will-change: transform; transform: translateZ(0); }

/* Subtle pulse for active badges */
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.badge-active { animation: badge-pulse 2s ease-in-out infinite; }

/* Toast entrance animation */
@keyframes toast-slide-in {
  from { transform: translateX(110%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.toast-msg { animation: toast-slide-in 0.25s ease-out; }

/* ── Item Tooltip — Torn-style inspect popup ─────────────── */
.item-tooltip {
  position: fixed;
  z-index: 1000;
  background: rgba(10,14,20,0.98);
  border: 1px solid rgba(230,192,123,0.30);
  border-radius: 6px;
  padding: 12px 14px;
  min-width: 200px;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  pointer-events: none;
  animation: tooltip-fade-in 0.15s ease forwards;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@keyframes tooltip-fade-in {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.item-tooltip .tooltip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(230,192,123,0.15);
}
.item-tooltip .tooltip-icon { font-size: 22px; }
.item-tooltip .tooltip-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}
.item-tooltip .tooltip-rarity {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.item-tooltip .tooltip-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.item-tooltip .tooltip-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.item-tooltip .tooltip-stat-row .stat-key { color: var(--muted); }
.item-tooltip .tooltip-stat-row .stat-val { color: var(--text); font-weight: 600; }
.item-tooltip .tooltip-stat-row .stat-val.atk { color: #f85149; }
.item-tooltip .tooltip-stat-row .stat-val.def { color: #58a6ff; }
.item-tooltip .tooltip-stat-row .stat-val.hp  { color: #3fb950; }
.item-tooltip .tooltip-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(230,192,123,0.10);
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}
/* D6: Auto-dismiss progress bar at bottom of each toast */
.toast-msg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: rgba(255,255,255,0.30);
  animation: toast-progress 2s linear forwards;
  border-radius: 0 0 6px 6px;
}
.toast-msg.gold::after { background: var(--gold); }
@keyframes toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}
@keyframes toast-slide-up {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-msg.toast-out {
  animation: toast-slide-out 0.22s ease forwards;
}
@keyframes toast-slide-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.96); }
}

/* ══════════════════════════════════════════════════════════════
   D7: Mobile top-nav active — bold text + larger icon + gold + bottom bar
   ══════════════════════════════════════════════════════════════ */
.shell-top-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(201,209,217,0.50);
  font-size: 10px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, font-weight 0.15s;
  min-width: 48px;
}
.shell-top-nav-item .top-nav-icon {
  font-size: 20px;
  transition: font-size 0.15s, filter 0.15s;
}
.shell-top-nav-item .top-nav-label {
  font-size: 10px;
}
.shell-top-nav-item.active {
  color: var(--gold);
  border-bottom: 4px solid var(--gold); /* D7: thicker bar (was 3px) */
  font-weight: 700;
  transform: scale(1.06); /* D7: slight lift */
  text-shadow: 0 0 12px rgba(230,192,123,0.60); /* D7: stronger glow */
  background: rgba(230,192,123,0.10); /* D7: subtle bg fill */
  border-radius: 4px 4px 0 0;
}
.shell-top-nav-item.active .top-nav-icon {
  font-size: 26px; /* D7: larger icon (was 24px) */
  filter: drop-shadow(0 0 8px rgba(230,192,123,0.70)); /* D7: stronger glow */
}
.shell-top-nav-item.active .top-nav-label {
  font-weight: 700; /* D7: explicit bold for active label */
}
.shell-top-nav-item:hover {
  color: rgba(201,209,217,0.80);
}
.shell-top-nav-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: 3px;
}

/* D9: Tooltip for icon-only buttons (title attribute) */
[title] { cursor: pointer; }
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(16,20,28,0.97);
  border: 1px solid rgba(230,192,123,0.35);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  color: var(--text);
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.40);
  animation: tooltip-in 0.15s ease forwards;
}
@keyframes tooltip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* D10: Resource icons in stat items — already have inline emojis in HTML;
   add small sizing consistency */
.stat-item .stat-icon { font-size: 11px; opacity: 0.85; }
.stat-item-val { color: var(--text); font-size: var(--font-sm); }

/* D11: Enhanced global focus-visible (adds [tabindex] support) */
button:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* D13: Instance card grid */
.instance-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

/* Dungeon CTA row spacing */
.dungeon-cta-row {
  margin-top: 14px;
  padding: 12px 0;
}


/* Helper chips / placeholder text */
.console-helper-chip {
  font-size: 11px;
  color: #8a9ba8;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  padding: 5px 8px;
  display: inline-block;
  line-height: 1.4;
}


/* ── Stat chips on skill/ability cards ─── */
.console-stat-chip {
  font-size: 10px;
  color: #4fc3f7;
  background: rgba(79, 195, 247, 0.1);
  border: 1px solid rgba(79, 195, 247, 0.2);
  border-radius: 3px;
  padding: 2px 5px;
  display: inline-block;
  white-space: nowrap;
}
.console-stat-chip.amber {
  color: #ffb300;
  background: rgba(255, 179, 0, 0.1);
  border-color: rgba(255, 179, 0, 0.2);
}


/* ── Element badge ─── */
.torn-badge.element-badge {
  color: #ce93d8;
  background: rgba(206,147,216,0.15);
  border-color: rgba(206,147,216,0.3);
  font-size: 9px;
  padding: 1px 4px;
}

/* ── Compact stat row + stat separator ─── */
.console-stat-row.compact {
  font-size: 11px;
  color: #8a9ba8;
  padding: 3px 8px;
  gap: 0;
  align-items: center;
}
.console-stat-row.compact span { color: #6b7785; }
.console-stat-row.compact strong { color: #c9d1d9; margin: 0 2px; }
.console-stat-row.compact .stat-sep { color: #4a5568; margin: 0 4px; }


/* ── Item card badges container ─── */
.item-badges {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  flex-shrink: 0;
}
.inventory-detail-item .item-icon { font-size: 22px; flex-shrink: 0; }
.inventory-detail-item .item-info { flex: 1; min-width: 0; }
.inventory-detail-item .item-meta { font-size: 10px; color: #8a9ba8; margin-top: 2px; }
.inventory-detail-item.item-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }


/* ── Skill detail modal overlay ─── */
.skill-detail-card {
  animation: fadeInScale 0.15s ease-out;
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.skill-card:hover { filter: brightness(1.1); }
.skill-card { transition: filter 0.15s; }


/* ── Cave live cultivation timer ─── */
.cave-live-timer {
  font-family: monospace;
  letter-spacing: 0.5px;
  animation: pulseTimer 2s ease-in-out infinite;
}
.cave-live-timer.idle { animation: none; }
@keyframes pulseTimer {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}
.cave-live-timer .cave-elapsed-val { color: #4fc3f7; }

/* ── Cultivation State Header (Phase UI-REDESIGN) ──────────────────── */
.cultivation-state-header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
  margin-bottom: 6px;
}
.cultivation-state-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 50px;
}
.cs-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cs-value { font-size: 11px; color: var(--text); font-weight: 600; }
.cs-value.cs-active { color: #3fb950; }
.cs-value.cs-idle { color: var(--muted); }
.cs-value.cs-ready { color: #e6c377; }


/* ── Battle live turn timer ─── */
.battle-live-timer {
  font-family: monospace;
  letter-spacing: 0.5px;
  animation: pulseOrange 2.5s ease-in-out infinite;
}
/* ── Inventory slot boxes ─── */
.inventory-slot-item {
  padding: 8px 6px;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.2s;
}
.inventory-slot-item.is-equipped {
  background: rgba(46,160,67,0.15);
  border-color: rgba(46,160,67,0.4);
}
.slot-item-name {
  font-size: 11px;
  color: #e0e0e0;
  text-align: center;
  line-height: 1.3;
}
.slot-item-stats {
  font-size: 10px;
  color: #9e9e9e;
  margin-top: 2px;
  text-align: center;
}

/* ── Inventory rarity cards ─── */
.rarity-傳說 { border-left: 3px solid #ffd700; }
.rarity-史詩 { border-left: 3px solid #9b59b6; }
.rarity-優秀 { border-left: 3px solid #3498db; }
.rarity-精良 { border-left: 3px solid #2ecc71; }
.rarity-普通 { border-left: 3px solid #95a5a6; }

@keyframes pulseOrange {
  0%, 100% { opacity: 1; color: #ffa657; }
  50%       { opacity: 0.6; color: #ff8f00; }
}

/* ── Inventory Dense Rows (Phase UI-REDESIGN) ────────────────────────── */
.material-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
  margin-bottom: 3px;
}
.material-card .item-icon { font-size: 14px; flex-shrink: 0; }
.material-card .item-info { flex: 1; min-width: 0; }
.material-card .item-count { font-size: 11px; color: var(--gold); flex-shrink: 0; }
.inventory-detail-item { margin-bottom: 3px; }
.inventory-detail-item .item-icon { font-size: 14px; }

/* ── Training Cards (Phase UI-REDESIGN) ────────────────────────────── */
.training-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.training-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(230,192,123,0.15);
  border-radius: 3px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.training-card-header { display: flex; align-items: center; gap: 6px; }
.training-icon { font-size: 16px; }
.training-label { font-size: 12px; font-weight: bold; color: var(--text); }
.training-desc { font-size: 10px; color: var(--muted); }
.training-stat { font-size: 10px; color: var(--gold); }
.training-card .console-btn.small { margin-top: 3px; align-self: flex-start; }

/* ── Battle Console live-log (Phase UI-REDESIGN) ─────────────────── */
/* ── World State Bar (Phase UI-REDESIGN) ────────────────────────────── */
.world-state-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(230,192,123,0.08);
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}
.world-state-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 4px rgba(63,185,80,0.6);
  animation: world-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes world-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* ── Equip Slot Visual Enhancements (Phase UI-REDESIGN) ─────────────── */
.inventory-slot-item {
  position: relative;
  padding-left: 6px;
  min-height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-radius: 2px;
  transition: background 0.15s;
}
.slot-rarity-stripe {
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
}
.slot-rarity-stripe.rarity-common    { background: #8b8b8b; }
.slot-rarity-stripe.rarity-uncommon  { background: #3fb950; }
.slot-rarity-stripe.rarity-rare       { background: #58a6ff; }
.slot-rarity-stripe.rarity-epic       { background: #bc8cff; }
.slot-rarity-stripe.rarity-legendary  { background: #e6c377; }
.slot-empty { color: var(--muted); font-size: 11px; padding-left: 6px; }
.slot-item-name { font-size: 12px; color: var(--text); font-weight: 600; }
.slot-item-stats { font-size: 10px; color: var(--muted); }
.is-equipped.is-equipped { background: rgba(230,192,123,0.05); }

/* ── Inventory Category Strip (Phase UI-REDESIGN) ───────────────────── */
.inv-category-strip {
  display: flex;
  gap: 4px;
  padding: 4px 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.inv-category-strip::-webkit-scrollbar { display: none; }
.inv-cat-btn {
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.inv-cat-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.inv-cat-btn.active {
  background: rgba(230,192,123,0.12);
  border-color: rgba(230,192,123,0.35);
  color: #e6c377;
}
/* Dense material row */
.material-dense-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 11px;
}
.material-dense-row:last-child { border-bottom: none; }
.material-name { color: var(--text); }
.material-qty { color: var(--muted); font-size: 10px; }

/* ── Loot Summary Stats (Phase UI-REDESIGN) ─────────────────────────── */
.loot-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.loot-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
  background: rgba(255,255,255,0.03);
  border-radius: 2px;
  padding: 3px 6px;
}
.loot-stat-val { font-size: 14px; font-weight: 700; color: #e6c377; }
.loot-stat-label { font-size: 9px; color: var(--muted); text-transform: uppercase; }
.loot-rarity-group { margin-bottom: 6px; }
.loot-rarity-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 2px;
  margin-bottom: 2px;
}
.loot-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-left: 2px solid transparent;
}
.loot-item-icon { font-size: 12px; flex-shrink: 0; }
.loot-item-name { font-size: 11px; flex: 1; }
.loot-item-qty { font-size: 10px; color: var(--muted); }
.loot-empty { padding: 12px; text-align: center; font-size: 11px; }
/* Rarity left strips */
.rarity-strip-legendary { border-left-color: #e6c377; }
.rarity-strip-epic { border-left-color: #bc8cff; }
.rarity-strip-rare { border-left-color: #58a6ff; }
.rarity-strip-uncommon { border-left-color: #3fb950; }
.rarity-strip-common { border-left-color: #8b8b8b; }
.loot-rarity-header.rarity-strip-legendary { background: rgba(230,192,123,0.08); color: #e6c377; }
.loot-rarity-header.rarity-strip-epic { background: rgba(188,140,255,0.08); color: #bc8cff; }
.loot-rarity-header.rarity-strip-rare { background: rgba(88,166,255,0.08); color: #58a6ff; }
.loot-rarity-header.rarity-strip-uncommon { background: rgba(63,185,80,0.08); color: #3fb950; }
.loot-rarity-header.rarity-strip-common { background: rgba(139,139,139,0.08); color: #aaa; }
.world-state-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-log { overflow-y: auto; max-height: 320px; scroll-behavior: smooth; }

/* ── Realm Ladder (Phase UI-REDESIGN) ──────────────────────────────── */
.realm-ladder {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
  margin: 4px 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.realm-ladder::-webkit-scrollbar { display: none; }
.realm-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.realm-connector {
  flex: 1;
  min-width: 8px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 12px;
}
.realm-dot { font-size: 10px; line-height: 1; }
.realm-step.current .realm-dot { color: #e6c377; }
.realm-step.past .realm-dot { color: #3fb950; }
.realm-step.future .realm-dot { color: rgba(255,255,255,0.2); }
.realm-name {
  font-size: 8px;
  color: var(--muted);
  text-align: center;
  max-width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.realm-step.current .realm-name { color: #e6c377; font-weight: 700; }
.realm-step.past .realm-name { color: rgba(255,255,255,0.5); }

/* ── Stat Growth Row (Phase UI-REDESIGN) ──────────────────────────── */
.stat-growth-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
  margin-bottom: 6px;
}
.stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  padding: 2px 4px;
  border: 1px solid rgba(255,255,255,0.05);
}
.stat-label { font-size: 8px; color: var(--muted); text-transform: uppercase; }
.stat-val { font-size: 11px; font-weight: 700; color: var(--text); }

/* ── Skill Card Enhancements (Phase UI-REDESIGN) ─────────────────── */
.skill-card-desc {
  font-size: 9px;
  color: var(--muted);
  padding: 2px 0 2px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.04);
  line-height: 1.3;
}
.locked-skill .locked-title { text-decoration: line-through; opacity: 0.6; }
.muted-header { color: var(--muted) !important; border-left-color: rgba(255,255,255,0.1) !important; }

/* ── Practice Hero Enhancements (Phase UI-REDESIGN) ──────────────── */
.practice-hero-level {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-right: 8px;
}
.practice-hero-realm {
  font-size: 14px;
  font-weight: 700;
  color: #e6c377;
}

/* ── World Events Strip (Phase UI-REDESIGN) ──────────────────────── */
.world-events-strip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
  margin: 4px 0;
  max-height: 100px;
  overflow-y: auto;
}
.world-event-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: var(--muted);
  padding: 1px 0;
}
.event-dot-small {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.event-gold .event-dot-small { background: #e6c377; }
.event-crimson .event-dot-small { background: #f85149; }
.event-purple .event-dot-small { background: #bc8cff; }
.event-emerald .event-dot-small { background: #3fb950; }
.event-text-small { line-height: 1.3; }

/* ── Offline Summary Block (Phase UI-REDESIGN) ────────────────────── */
.offline-summary-block {
  background: rgba(230,192,123,0.06);
  border: 1px solid rgba(230,192,123,0.15);
  border-radius: 3px;
  padding: 6px 8px;
  margin: 4px 0;
}
.offline-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #e6c377;
  margin-bottom: 4px;
}
.offline-return-badge {
  font-size: 9px;
  background: rgba(230,192,123,0.15);
  padding: 1px 5px;
  border-radius: 2px;
}
.offline-gains-row, .offline-loot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.offline-gain-chip {
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  padding: 1px 5px;
  font-size: 9px;
  color: #3fb950;
}
.offline-loot-chip {
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  padding: 1px 5px;
  font-size: 9px;
  color: var(--text);
}
.offline-loot-chip.rarity-uncommon { border-left: 2px solid #3fb950; }
.offline-loot-chip.rarity-rare { border-left: 2px solid #58a6ff; }
.offline-loot-chip.rarity-epic { border-left: 2px solid #bc8cff; }

/* ── Daily Activities Panel (Phase UI-REDESIGN) ──────────────────── */
.daily-activities-panel {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
  margin: 4px 0;
  border: 1px solid rgba(255,255,255,0.05);
}
.daily-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.daily-title { font-size: 11px; font-weight: 700; color: var(--text); }
.daily-streak-badge {
  font-size: 10px;
  color: #ffa657;
  background: rgba(255,166,87,0.1);
  padding: 1px 5px;
  border-radius: 2px;
}
.daily-login-btn {
  margin-left: auto;
  font-size: 9px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #e6c377, #c4943a);
  color: #0a0c10;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 700;
}
.daily-claimed-badge {
  margin-left: auto;
  font-size: 9px;
  color: #3fb950;
}
.daily-task-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.daily-task-row:last-child { border-bottom: none; }
.daily-task-row.task-done { opacity: 0.5; }
.task-icon { font-size: 12px; }
.task-label { font-weight: 600; min-width: 55px; color: var(--text); }
.task-desc { flex: 1; color: var(--muted); font-size: 9px; }
.task-status { font-size: 11px; color: var(--muted); }

/* ── Notification Center (Phase UI-REDESIGN) ─────────────────────── */
.notification-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 11px;
}
.notification-row:last-child { border-bottom: none; }
.note-icon { font-size: 14px; flex-shrink: 0; padding-top: 1px; }
.note-body { flex: 1; min-width: 0; }
.note-text { color: var(--text); line-height: 1.4; }
.note-time { font-size: 9px; color: var(--muted); margin-top: 2px; }
.note-success .note-icon { color: #3fb950; }
.note-warning .note-icon { color: #ffa657; }
.note-loot .note-icon { color: #e6c377; }
.note-info .note-icon { color: #58a6ff; }
.unread-badge {
  background: #f85149;
  color: #fff;
  border-radius: 8px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 700;
  margin-left: 4px;
}

/* ── Offline Claim Button (Phase UI-REDESIGN) ──────────────────────── */
.offline-claim-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}
.offline-claim-btn {
  font-size: 10px;
  padding: 3px 10px;
  background: linear-gradient(135deg, #e6c377, #c4943a);
  color: #0a0c10;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 700;
}
.offline-claimed-btn {
  font-size: 10px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  cursor: not-allowed;
}

/* ── Sect Standing Row (Phase UI-REDESIGN) ────────────────────────── */
.sect-standing-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
  margin: 4px 0;
  flex-wrap: wrap;
}
.sect-rank-badge {
  font-size: 10px;
  font-weight: 700;
  color: #bc8cff;
  background: rgba(188,140,255,0.1);
  border: 1px solid rgba(188,140,255,0.2);
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
}
.sect-contrib-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 80px;
}
.sect-contrib-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.sect-contrib-fill {
  height: 100%;
  background: #bc8cff;
  border-radius: 2px;
  transition: width 0.5s;
}
.sect-contrib-val {
  font-size: 8px;
  color: var(--muted);
  white-space: nowrap;
}
.sect-favor-val {
  font-size: 9px;
  color: #ffa657;
  white-space: nowrap;
}
.sect-task-count {
  font-size: 8px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Notification Center Improvements (Phase UI-REDESIGN) ─────────── */
.note-filter-strip {
  display: flex;
  gap: 4px;
  padding: 4px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.note-filter-strip::-webkit-scrollbar { display: none; }
.note-cat-btn {
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.note-cat-btn.active {
  background: rgba(230,192,123,0.12);
  color: #e6c377;
  border-color: rgba(230,192,123,0.3);
}
.note-sect .note-icon { color: #bc8cff; }
.mark-all-read-btn {
  font-size: 9px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  cursor: pointer;
  margin-left: auto;
}
.mark-all-read-btn:hover { background: rgba(255,255,255,0.1); }
.group-page-header.torn-module {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.group-page-header.torn-module .torn-module-header { flex: 1; }
.note-list { padding: 0 !important; }

/* ── Debug Panel (Phase UI-REDESIGN) ──────────────────────────────── */
#debug-panel {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 280px;
  max-height: 70vh;
  background: rgba(10,12,16,0.97);
  border: 1px solid rgba(230,192,123,0.3);
  border-radius: 4px;
  z-index: 99999;
  overflow-y: auto;
  font-size: 11px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(230,192,123,0.08);
  border-bottom: 1px solid rgba(230,192,123,0.2);
  font-weight: 700;
  color: #e6c377;
  position: sticky;
  top: 0;
}
.debug-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}
.debug-section {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.debug-section:last-child { border-bottom: none; }
.debug-section-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 5px;
}
.debug-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 6px;
  margin-bottom: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  color: var(--text);
  font-size: 10px;
  cursor: pointer;
}
.debug-btn:hover { background: rgba(255,255,255,0.08); }
.debug-btn.danger { color: #f85149; border-color: rgba(248,81,73,0.2); }
.debug-btn.danger:hover { background: rgba(248,81,73,0.1); }
.debug-info {
  font-size: 10px;
  color: var(--muted);
  padding: 2px 0;
}
.debug-info span { color: var(--text); font-weight: 600; }
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 13B: Torn-like Layout Grammar — Global Density
   ═══════════════════════════════════════════════════════════════════════════ */

/* Global body — denser */
body {
  font-size: 12px;
  line-height: 1.3;
}

/* Module body — reduced padding */
.module-body {
  padding: 4px 6px;
}

/* Torn module header — shorter */
.torn-module-header {
  height: 22px;
  line-height: 22px;
  font-size: 10px;
  padding: 0 6px;
  letter-spacing: 0.03em;
}

/* Dense action buttons */
.console-btn,
.torn-btn {
  padding: 3px 7px;
  font-size: 11px;
  border-radius: 3px;
  min-height: unset;
  line-height: 1.3;
}

/* Dense input fields */
.torn-input,
.torn-select,
input[type="text"],
input[type="number"],
select {
  padding: 3px 5px;
  font-size: 11px;
  border-radius: 3px;
}

/* Dense page padding — reduce content area padding */
.page-frame,
.layout-full-width {
  padding: 4px;
}

/* Reduce all gap values in compact layouts */
.layout-compact .module-body {
  padding: 3px 5px;
}

.compact-bar {
  height: 14px;
}

/* Home page cmd-table — dense row-first layout */
.home-cmd-table {
  width: 100%;
  border-collapse: collapse;
}

.home-cmd-row {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  gap: 4px;
  font-size: 11px;
}

.home-cmd-label {
  color: rgba(255,255,255,0.45);
  width: 48px;
  flex-shrink: 0;
  font-size: 10px;
}

.home-cmd-value {
  color: rgba(255,255,255,0.85);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-cmd-row .console-btn {
  padding: 2px 6px;
  font-size: 10px;
}

/* Battle page row-first layout */
.battle-row {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 4px;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 11px;
}

.battle-row-icon {
  width: 16px;
  text-align: center;
  font-size: 12px;
  flex-shrink: 0;
}

.battle-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-row-hp {
  width: 56px;
  text-align: right;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}

.battle-action-strip {
  display: flex;
  gap: 3px;
  padding: 3px 4px;
  overflow-x: auto;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.battle-action-strip .console-btn {
  padding: 2px 7px;
  font-size: 10px;
  flex-shrink: 0;
}

/* Inventory row-first table */
.inv-table {
  width: 100%;
  border-collapse: collapse;
}

.inv-row {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 4px;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 11px;
}

.inv-rarity-stripe {
  width: 3px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 1px;
}

.inv-icon {
  width: 16px;
  text-align: center;
  font-size: 11px;
  flex-shrink: 0;
}

.inv-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-qty {
  width: 32px;
  text-align: right;
  color: rgba(255,255,255,0.55);
  font-size: 10px;
  flex-shrink: 0;
}

/* City/location dense rows */
.location-row {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 6px;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 11px;
}

.location-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.location-action {
  flex-shrink: 0;
  font-size: 10px;
}

/* Practice/training dense cards */
.training-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.training-card {
  padding: 4px 6px;
  min-height: 44px;
  border-radius: 3px;
}

.training-card-title {
  font-size: 11px;
}

.training-card-desc {
  font-size: 9px;
  color: rgba(255,255,255,0.5);
  margin-top: 1px;
}

/* Compact world events strip */
.world-events-strip {
  display: flex;
  gap: 8px;
  padding: 3px 4px;
  overflow-x: auto;
  font-size: 10px;
}

/* Remove empty bottom padding from pages */
.page-frame {
  padding-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 13C: Dense Rows — Battle Roster / Inventory / Practice
   ═══════════════════════════════════════════════════════════════════════════ */

/* Battle roster dense rows */
.battle-roster-dense {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.battle-roster-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.battle-roster-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}

.battle-roster-title {
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.battle-row.is-empty {
  justify-content: center;
  color: rgba(255,255,255,0.25);
  font-size: 10px;
  border-bottom-color: transparent;
}

/* Battle action strip — inline compact buttons */
.battle-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  align-items: center;
}

.battle-action-row .battle-primary-action {
  flex: 1;
  min-width: 80px;
}

/* Inventory supplies — filter strip compact */
.inv-category-strip {
  display: flex;
  gap: 3px;
  padding: 4px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.inv-cat-btn {
  padding: 2px 8px;
  font-size: 10px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Material dense row (for inventory filter results) */
.material-dense-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  height: 24px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.material-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-qty {
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  flex-shrink: 0;
}

/* Practice cave — dense activity feed */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 4px;
  font-size: 11px;
}

/* Cultivation state compact */
.cultivation-state-header {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px;
}

/* Reduce module-note text (Phase 13C) */
.inventory-section-note,
.home-summary-note,
.inventory-detail-note {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  padding: 2px 4px;
  line-height: 1.3;
}

/* Compact phase4-kpi (practice/inventory summary) */
.phase4-kpi-grid.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}

.phase4-kpi {
  min-width: unset;
  padding: 3px 6px;
  font-size: 11px;
}

/* Inventory detail list compact */
.inventory-detail-list {
  gap: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 15A: MMORPG HUD — Single-line Resource Monitor Strip
   Target height: 36px, font: 10px, industrial compact
   ═══════════════════════════════════════════════════════════════════════════ */

/* HUD container — single horizontal strip */
#persistent-hud.mm-hud-strip {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 6px;
  background: #0f0f14;
  border-bottom: 1px solid rgba(230,192,123,0.15);
  gap: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.hud-seg {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  flex-shrink: 0;
}

.hud-sep {
  font-size: 9px;
  color: rgba(255,255,255,0.15);
  margin: 0 3px;
  flex-shrink: 0;
}

.hud-val {
  color: rgba(255,255,255,0.85);
}

.hud-accent {
  color: #e6c377;
  font-size: 10px;
  font-weight: bold;
}

.hud-muted {
  color: rgba(255,255,255,0.3);
}

/* Remove old HUD rows — they're replaced by mm-hud-strip */
.hud-row1, .hud-row2, .hud-row3,
.hud-realm, .hud-level, .hud-stones, .hud-silver,
.hud-vital, .hud-bar, .hud-fill, .hud-text,
.hud-cooldown-indicator, .hud-offline, .hud-offline-indicator,
.hud-pill, .hud-badge {
  display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 15B: MMORPG Layout Primitives — Industrial Compact System
   These replace: card-grid, hero-panel, dashboard-section, torn-module
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── MM Primitives ─────────────────────────────────────────────────────── */

.mm-section {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0;
}

.mm-row {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 4px;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
}

.mm-row:last-child {
  border-bottom: none;
}

.mm-row-label {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  flex-shrink: 0;
  min-width: 36px;
}

.mm-row-value {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  flex-shrink: 0;
}

.mm-row-action {
  margin-left: auto;
  flex-shrink: 0;
}

/* ── MM Toolbar ────────────────────────────────────────────────────────── */

.mm-toolbar {
  display: flex;
  align-items: center;
  height: 30px;
  background: #14141c;
  border-bottom: 1px solid rgba(230,192,123,0.12);
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
}

.mm-toolbar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
  padding: 0 2px;
  min-width: max-content;
}

.shell-nav-item {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  transition: color 0.1s, background 0.1s;
}

.shell-nav-item:hover {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.04);
}

.shell-nav-item.active {
  color: #e6c377;
  background: rgba(230,192,123,0.08);
  border-bottom: 2px solid #e6c377;
  height: 28px;
}

.shell-nav-label {
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* ── MM Table ───────────────────────────────────────────────────────────── */

.mm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.mm-table th {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  text-align: left;
  padding: 2px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-weight: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mm-table td {
  padding: 3px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  vertical-align: middle;
}

.mm-table tr:hover td {
  background: rgba(255,255,255,0.03);
}

/* ── MM Strip (horizontal scroll row) ─────────────────────────────────── */

.mm-strip {
  display: flex;
  gap: 4px;
  padding: 3px 4px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  scrollbar-width: thin;
}

/* ── MM Grid ────────────────────────────────────────────────────────────── */

.mm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 3px 4px;
}

/* ── MM Action Strip ────────────────────────────────────────────────────── */

.mm-action-strip {
  display: flex;
  gap: 3px;
  padding: 3px 4px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── MM Section Header ──────────────────────────────────────────────────── */

.mm-section-header {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 4px;
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── MM Combat Log ─────────────────────────────────────────────────────── */

.mm-combat-log {
  font-size: 9px;
  line-height: 1.2;
  padding: 4px 6px;
  max-height: 120px;
  overflow-y: auto;
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.3);
}

.mm-combat-log .log-player { color: #60a5fa; }
.mm-combat-log .log-enemy  { color: #f87171; }
.mm-combat-log .log-heal   { color: #4ade80; }
.mm-combat-log .log-sys    { color: #e6c377; }
.mm-combat-log .log-item   { color: #c084fc; }

/* ── Phase 18E — MM Side Info Strip ─────────────────────────────────── */

.mm-side-info {
  padding: 4px 6px;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(230,192,123,0.12);
  font-size: 9px;
  color: rgba(200,200,200,0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
}
.mm-side-info .si-item {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.mm-side-info .si-label {
  color: rgba(200,200,200,0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 9px;
}
.mm-side-info .si-val {
  color: rgba(200,200,200,0.7);
}
.mm-side-info .si-val.live {
  color: #e6c377;
}
.mm-side-info .si-sep {
  color: rgba(200,200,200,0.15);
}
/* ── Global Reset: Remove old card/panel styles ───────────────────────── */

/* Remove these old patterns — they are Phase 15 replacements */
.home-hero-panel,
.dashboard-cards-row,
.torn-module,
.console-card,
.monster-card,
.recruit-card,
.kpi-cards-row,
.kpi-card,
.home-compact-section,
.home-next-action,
.home-activity-block,
.world-events-strip,
.offline-summary-block,
.home-loot-indicator,
.activity-feed,
.training-cards-grid,
.training-card {
  display: none !important;
}

/* Torn dashboard — remove card/padding feel */
.torn-dashboard {
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.torn-module-header {
  height: 20px !important;
  line-height: 20px !important;
  font-size: 10px !important;
  padding: 0 4px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.group-page-header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-frame {
  padding: 0 !important;
  background: transparent !important;
}

.console-btn {
  height: 22px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
  border-radius: 1px !important;
  line-height: 1 !important;
}

.console-btn.small,
.console-btn.primary {
  height: 22px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
}

.torn-badge {
  font-size: 9px !important;
  padding: 1px 4px !important;
  border-radius: 1px !important;
}

/* ═══════════════════════════════════════════
   Phase 44 — Emotional Layer CSS
   danger-low/medium/high/critical
   momentum-fragile/stable/focused/dominating/transcendent
   pressure-phase-1/2/3
   world-pressure-*
   ═══════════════════════════════════════════ */

body.danger-medium #shell-topbar {
  border-bottom-color: rgba(230, 162, 60, 0.4);
}
body.danger-high #shell-topbar {
  border-bottom: 2px solid rgba(248, 81, 73, 0.6);
  box-shadow: 0 0 8px rgba(248, 81, 73, 0.3);
}
body.danger-critical #shell-topbar {
  border-bottom: 2px solid rgba(248, 81, 73, 0.9);
  box-shadow: 0 0 12px rgba(248, 81, 73, 0.5);
  animation: danger-pulse-topbar 1.5s ease-in-out infinite;
}
@keyframes danger-pulse-topbar {
  0%, 100% { box-shadow: 0 0 8px rgba(248, 81, 73, 0.4); }
  50%       { box-shadow: 0 0 16px rgba(248, 81, 73, 0.7); }
}

/* momentum states — topbar tint */
body.momentum-fragile #shell-topbar {
  opacity: 0.85;
}
body.momentum-focused #shell-topbar {
  border-bottom-color: rgba(230, 192, 123, 0.3);
}
body.momentum-dominating #shell-topbar {
  border-bottom-color: rgba(230, 192, 123, 0.5);
  box-shadow: 0 0 6px rgba(230, 192, 123, 0.2);
}
body.momentum-transcendent #shell-topbar {
  border-bottom-color: rgba(230, 192, 123, 0.7);
  box-shadow: 0 0 10px rgba(230, 192, 123, 0.4);
  animation: transcendent-glow 2s ease-in-out infinite;
}
@keyframes transcendent-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(230, 192, 123, 0.3); }
  50%       { box-shadow: 0 0 14px rgba(230, 192, 123, 0.6); }
}

/* pressure phase escalation */
body.pressure-phase-2 .mm-live-ticker {
  color: rgba(230, 162, 60, 0.9);
  font-weight: 600;
}
body.pressure-phase-3 .mm-live-ticker {
  color: rgba(248, 81, 73, 0.9);
  font-weight: 700;
  animation: pressure-flash-ticker 2s ease-in-out infinite;
}
@keyframes pressure-flash-ticker {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* world pressure class — generic danger styling */
body[class*="world-pressure-demon"],
body[class*="world-pressure-misc"],
body[class*="world-pressure-"] {
  /* placeholder — per-pressure color applied via .world-pressure-{id} */
}

/* extraction warning strip — for future UISync integration */
.extraction-warning-strip {
  display: none;
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid rgba(248, 81, 73, 0.4);
  padding: 4px 8px;
  font-size: 10px;
  color: rgba(248, 81, 73, 0.9);
  text-align: center;
}
body.danger-high .extraction-warning-strip,
body.danger-critical .extraction-warning-strip {
  display: block;
}

/* Phase 50 — Visual Memory Anchors for Rare Loot */
.anchor-legendary,
.anchor-orange {
  color: #c9a45c !important;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(201, 164, 92, 0.6);
}
.anchor-epic,
.anchor-purple {
  color: #9a6abf !important;
  font-weight: 700;
  text-shadow: 0 0 5px rgba(154, 106, 191, 0.5);
}
.anchor-rare,
.anchor-blue {
  color: #6a9fcf !important;
}
.loot-source-tag {
  font-size: 10px;
  color: #666;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Phase 50 — Mobile 390px Overflow Guards */
.battle-log,
.combat-log,
#battle-combat-log {
  overflow: hidden;
  word-break: break-word;
  max-width: 100%;
}
.ticker-text,
.ticker-slot {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}
.guidance-strip,
[id*="guidance"] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}
.loot-name,
.loot-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
  white-space: nowrap;
}
.run-summary-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phase 50 — Danger Visual Restraint: max 2 simultaneous glow effects */
body:not(.danger-critical) .pulse-critical { animation: none !important; }
body.danger-medium .pulse-critical { animation: none !important; }
body.danger-medium .pulse-high { animation: none !important; }
body:not(.danger-high) .pulse-high { animation: none !important; }

/* Phase 51 — Build Identity Body Theme Accents */
body.build-sword  { --build-accent: #6a9fcf; }
body.build-poison{ --build-accent: #7ac97a; }
body.build-body  { --build-accent: #cf8a6a; }
body.build-spirit{ --build-accent: #9f9fcf; }
body.build-blood { --build-accent: #cf4a6a; }
body.build-support{ --build-accent: #cfcf6a; }
body.build-unknown{ --build-accent: #888888; }

/* Tier 1: topbar build-colored bottom border */
body.build-sword  #topbar,
body.build-poison #topbar,
body.build-body   #topbar,
body.build-spirit #topbar,
body.build-blood  #topbar,
body.build-support #topbar,
body.build-unknown #topbar {
  border-bottom: 2px solid var(--build-accent, #888);
}

/* Tier 1: ticker build accent border */
body.build-sword  .ticker-text,
body.build-poison .ticker-text,
body.build-body   .ticker-text,
body.build-spirit .ticker-text,
body.build-blood  .ticker-text {
  border-left: 3px solid var(--build-accent, #888);
  padding-left: 4px;
}

/* Tier 2: loot anchor per build */
body.build-sword  .loot-name,
body.build-poison .loot-name { color: var(--build-accent, #888); }

/* Phase 51 — Recent Legendary Strip (max-height 28px) */
.recent-legendary-strip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 28px;
  overflow: hidden;
  font-size: 10px;
  color: var(--text-muted, #666);
}
.recent-legendary-strip .legendary-entry {
  color: #c9a45c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-legendary-strip .legendary-entry::before {
  content: '🏆 ';
}

/* Phase 51 — MMO World Feed Strip */
.world-feed-strip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60px;
  overflow: hidden;
  font-size: 10px;
  color: var(--text-dim, #444);
}
.world-feed-strip .feed-entry {
  color: var(--text-muted, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}