/* Tu Tiên Chi Lộ — dark ink-wash (thủy mặc) theme.
   Mobile-first: bottom nav; ≥900px switches to sidebar layout. */

:root {
  --ink-0: #070b11;          /* deepest ink */
  --ink-1: #0a0f16;          /* page bg */
  --ink-2: #101826;          /* raised */
  --ink-3: #16202f;          /* card */
  --ink-4: #1e2b3f;          /* border-ish */
  --line: rgba(140, 170, 200, 0.14);
  --jade: #46b8a0;           /* teal accent */
  --jade-dim: #2e7f70;
  --gold: #d4af5f;           /* gold highlight */
  --gold-dim: #9a7d3f;
  --text: #e2e8f0;
  --muted: #8b99ab;
  --danger: #d2604f;
  --font-body: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --nav-h: 60px;
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(70, 184, 160, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(212, 175, 95, 0.05), transparent 55%),
    linear-gradient(180deg, var(--ink-1), var(--ink-0));
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: 0.02em;
}

a { color: var(--jade); text-decoration: none; }

.muted { color: var(--muted); }
.gold { color: var(--gold); }
.jade { color: var(--jade); }
.danger { color: var(--danger); }
.center { text-align: center; }

/* ---------- layout ---------- */

#app { min-height: 100dvh; }

.screen {
  padding: 16px 14px calc(var(--nav-h) + 24px);
  max-width: 720px;
  margin: 0 auto;
}

/* Auth/boot screens have no nav — reclaim the space. */
body[data-route="auth"] .nav,
body[data-route="boot"] .nav { display: none; }
body[data-route="auth"] .screen,
body[data-route="boot"] .screen { padding-bottom: 24px; }

/* ---------- cards / panels ---------- */

.card {
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.card-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--gold);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(140, 170, 200, 0.1);
}
.stat-row:last-child { border-bottom: 0; }
.stat-row .k { color: var(--muted); }
.stat-row .v { font-variant-numeric: tabular-nums; }

/* ---------- forms ---------- */

.label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 12px 0 4px;
}

.input {
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ink-0);
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
  outline: none;
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(70, 184, 160, 0.15);
}
.input::placeholder { color: #5a6a7d; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s, background 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; }

.btn-gold {
  background: linear-gradient(180deg, #e3c37c, var(--gold) 45%, var(--gold-dim));
  color: #241a08;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.08); }

.btn-jade {
  background: linear-gradient(180deg, #55cdb4, var(--jade) 45%, var(--jade-dim));
  color: #06231d;
}
.btn-jade:hover:not(:disabled) { filter: brightness(1.08); }

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover:not(:disabled) { background: rgba(140, 170, 200, 0.08); }

.btn-danger {
  background: transparent;
  border-color: rgba(210, 96, 79, 0.5);
  color: var(--danger);
}

.btn-row { display: flex; gap: 10px; }
.btn-row .btn { width: auto; flex: 1; }

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  gap: 4px;
  background: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}
.tabs button {
  flex: 1;
  padding: 9px 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tabs button.active {
  background: linear-gradient(180deg, var(--ink-4), var(--ink-3));
  color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--nav-h);
  display: flex;
  align-items: stretch;
  background: rgba(10, 15, 22, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 40;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 6px 2px;
}
.nav-item .ico { font-size: 1.15rem; line-height: 1; filter: grayscale(0.6); }
.nav-item.active { color: var(--gold); }
.nav-item.active .ico { filter: none; }

/* "Thêm" overflow popup (Hành Trang / Xếp Hạng / Đăng Xuất). */
.nav-menu {
  position: fixed;
  right: 8px;
  bottom: calc(var(--nav-h) + 10px);
  min-width: 170px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  padding: 6px;
  z-index: 50;
}
.nav-menu[hidden] { display: none; }
.nav-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nav-menu button:hover { background: rgba(140, 170, 200, 0.1); }
.nav-menu button.active { color: var(--gold); }

/* ---------- toast ---------- */

#toast-root {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
  width: min(92vw, 420px);
}

.toast {
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  font-size: 0.9rem;
  animation: toast-in 0.22s ease-out;
  max-width: 100%;
}
.toast-error { border-color: rgba(210, 96, 79, 0.55); color: #f0b5aa; }
.toast-ok { border-color: rgba(70, 184, 160, 0.55); color: #b9e8dd; }
.toast.hide { opacity: 0; transition: opacity 0.3s; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 11, 0.7);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 90;
  animation: toast-in 0.18s ease-out;
}
.modal {
  width: min(94vw, 460px);
  max-height: 84dvh;
  overflow: auto;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-size: 1rem; color: var(--gold); }
.modal-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 16px; }

/* ---------- auth ---------- */

.auth-wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}
.auth-card { width: min(92vw, 380px); }
.brand {
  text-align: center;
  margin: 0 0 4px;
  font-size: 2rem;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(212, 175, 95, 0.25);
}
.brand-sub {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 22px;
  font-style: italic;
}
.brand-logo {
  display: block;
  width: 92px;
  height: 92px;
  margin: 0 auto 12px;
  filter: drop-shadow(0 0 18px rgba(212, 175, 95, 0.3));
}

/* nav brand — mobile bottom bar hides it; the ≥900px sidebar shows it
   (replaces the old .nav::before wordmark) */
.nav-brand { display: none; }

/* ---------- misc ---------- */

.stub-note {
  text-align: center;
  color: var(--muted);
  padding: 40px 16px;
  font-style: italic;
}
.realm-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 95, 0.45);
  color: var(--gold);
  font-size: 0.8rem;
  background: rgba(212, 175, 95, 0.08);
}

/* ---------- tu luyện screen ---------- */

/* Several classes below set display:flex/inline-flex, which beats the UA
   [hidden] rule — restore the attribute's semantics globally. */
[hidden] { display: none !important; }

/* Hero: realm background (manifest.svg) under a legibility scrim. */
.tl-hero {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 14px;
  min-height: 168px;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-1)); /* pre-manifest fallback */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.tl-hero-inner {
  position: relative;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, rgba(7, 11, 17, 0.15), rgba(7, 11, 17, 0.72) 78%);
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tl-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.tl-dao {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  margin-bottom: 6px;
}
.tl-power-box { text-align: right; }
.tl-power-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(212, 175, 95, 0.35);
}
.tl-power-cap {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tl-stats {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10, 15, 22, 0.6);
  font-size: 0.74rem;
  color: var(--muted);
}
.chip-guild { color: var(--jade); border-color: rgba(70, 184, 160, 0.4); }
.chip-debuff {
  color: #f0b5aa;
  border-color: rgba(210, 96, 79, 0.55);
  background: rgba(90, 26, 18, 0.4);
  animation: debuff-pulse 1.6s ease-in-out infinite;
}
.chip-debuff b { font-variant-numeric: tabular-nums; }
@keyframes debuff-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(210, 96, 79, 0); }
  50% { box-shadow: 0 0 14px rgba(210, 96, 79, 0.45); }
}

/* Big counters */
.tl-cult { transition: box-shadow 0.4s; }
.tl-cult.glow { box-shadow: 0 0 28px rgba(212, 175, 95, 0.4); }
.tl-big-row {
  display: flex;
  gap: 8px;
}
.tl-big { flex: 1; text-align: center; min-width: 0; }
.tl-big-num {
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.tl-big-cap {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tl-rate {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  color: var(--jade);
  font-size: 0.72rem;
}

/* Progress + breakthrough */
.tl-prog-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82rem;
  margin-bottom: 6px;
}
.tl-prog-head .k { color: var(--muted); }
.tl-prog-label { font-variant-numeric: tabular-nums; }
.tl-prog {
  height: 12px;
  border-radius: 999px;
  background: var(--ink-0);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 14px;
}
.tl-prog-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jade-dim), var(--jade));
  transition: width 0.9s linear;
}
.tl-prog-fill.full {
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  box-shadow: 0 0 12px rgba(212, 175, 95, 0.55);
}
.tl-bt { font-size: 1.05rem; }
.tl-dan {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed rgba(70, 184, 160, 0.4);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.tl-dan input { accent-color: var(--jade); width: 16px; height: 16px; }
.tl-bt-hint {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  min-height: 1.1em;
}

/* ---------- độ kiếp overlay (CSS-only thunder) ---------- */

.dk-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(122, 95, 212, 0.28), transparent 65%),
    linear-gradient(180deg, #120a20 0%, #070b11 70%);
  padding: 20px;
  animation: toast-in 0.25s ease-out;
  overflow: hidden;
}
.dk-flash {
  position: absolute;
  inset: 0;
  background: #cfd8ff;
  opacity: 0;
  pointer-events: none;
}
.rolling .dk-flash { animation: dk-flash 0.9s linear infinite; }
@keyframes dk-flash {
  0%, 62%, 100% { opacity: 0; }
  64% { opacity: 0.55; }
  68% { opacity: 0.08; }
  72% { opacity: 0.4; }
  80% { opacity: 0; }
}
.dk-bolt {
  position: absolute;
  top: -6%;
  width: 90px;
  height: 46%;
  background: linear-gradient(180deg, #f2ecff, #a98fe0);
  clip-path: polygon(52% 0, 78% 0, 58% 38%, 82% 38%, 30% 100%, 44% 55%, 24% 55%);
  opacity: 0;
  filter: drop-shadow(0 0 18px rgba(190, 160, 255, 0.9));
  pointer-events: none;
}
.rolling .dk-bolt { animation: dk-bolt 1.4s linear infinite; }
.dk-bolt.b1 { left: 18%; animation-delay: 0s; }
.dk-bolt.b2 { left: 46%; height: 60%; animation-delay: 0.45s; }
.dk-bolt.b3 { left: 72%; height: 40%; animation-delay: 0.9s; }
@keyframes dk-bolt {
  0%, 58%, 100% { opacity: 0; }
  60% { opacity: 1; }
  66% { opacity: 0.25; }
  70% { opacity: 0.9; }
  78% { opacity: 0; }
}
.dk-panel {
  position: relative;
  z-index: 2;
  width: min(92vw, 420px);
  text-align: center;
  padding: 26px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(169, 143, 224, 0.35);
  background: rgba(10, 8, 20, 0.78);
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.6);
}
.dk-title {
  font-family: var(--font-title);
  font-size: 1.7rem;
  letter-spacing: 0.28em;
  color: #d9c8ff;
  text-shadow: 0 0 24px rgba(169, 143, 224, 0.6);
}
.dk-realm { margin-top: 4px; color: var(--gold); font-size: 1rem; }
.dk-chance { margin-top: 4px; font-size: 0.85rem; color: var(--muted); }
.dk-stage { margin: 18px 0 6px; min-height: 64px; }
.dk-rolling-txt {
  color: #b9a8e8;
  font-style: italic;
  animation: debuff-pulse 1.2s ease-in-out infinite;
}
.dk-big { font-family: var(--font-title); font-size: 1.35rem; letter-spacing: 0.06em; }
.dk-big.win { color: var(--gold); text-shadow: 0 0 26px rgba(212, 175, 95, 0.65); }
.dk-big.lose { color: var(--danger); text-shadow: 0 0 22px rgba(210, 96, 79, 0.55); }
.dk-sub { margin-top: 8px; font-size: 0.88rem; color: var(--text); }
.dk-sub.lose { color: #e6b3ab; }
.dk-ok { margin-top: 16px; }

/* result moods: calm the storm, tint the sky */
.dk-overlay.won {
  background:
    radial-gradient(900px 460px at 50% -10%, rgba(212, 175, 95, 0.32), transparent 65%),
    linear-gradient(180deg, #1c1a10 0%, #070b11 70%);
}
.dk-overlay.won .dk-bolt,
.dk-overlay.won .dk-flash { animation: none; opacity: 0; }
.dk-overlay.lost {
  background:
    radial-gradient(900px 460px at 50% -10%, rgba(210, 96, 79, 0.22), transparent 65%),
    linear-gradient(180deg, #1c0d0d 0%, #070b11 70%);
}
.dk-overlay.lost .dk-bolt { animation-duration: 2.6s; opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .rolling .dk-flash, .rolling .dk-bolt, .chip-debuff, .dk-rolling-txt { animation: none; }
  .rolling .dk-bolt { opacity: 0.5; }
  .tl-prog-fill { transition: none; }
}

/* ---------- quality colors (phẩm chất) ---------- */
/* Phàm <white> / Linh <jade> / Địa <purple> / Thiên <gold> */
.q-pham { color: var(--text); }
.q-linh { color: var(--jade); }
.q-dia { color: #b79cf0; }
.q-thien { color: var(--gold); text-shadow: 0 0 12px rgba(212, 175, 95, 0.4); }

/* ---------- hành trang ---------- */

.btn-sm {
  width: auto;
  padding: 9px 14px;
  font-size: 0.8rem;
  flex: none;
}

/* icon tiles (manifest art — public/assets/*.svg) */
.inv-ico,
.eq-ico,
.r-ico,
.dg-ico,
.loot-ico,
.craft-ico {
  flex: none;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--ink-0);
}
.inv-ico { width: 34px; height: 34px; }
.eq-ico { width: 42px; height: 42px; margin-top: 6px; }
.eq-ico.dim { opacity: 0.35; filter: grayscale(0.7); }
.r-ico { width: 34px; height: 34px; }
.dg-ico { width: 42px; height: 42px; }
.loot-ico { width: 26px; height: 26px; }
.craft-ico { width: 56px; height: 56px; margin: 8px auto 2px; display: block; }

.eq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.eq-slot {
  background: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eq-slot-name {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.eq-item {
  margin: 6px 0 2px;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.25;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eq-empty { color: #54637a; font-style: italic; font-weight: 400; }
.eq-mult {
  font-size: 0.72rem;
  color: var(--jade);
  min-height: 1.2em;
  margin-bottom: 8px;
}

.inv-group .inv-title {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.inv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(140, 170, 200, 0.1);
}
.inv-row:last-child { border-bottom: 0; }
.inv-main { flex: 1; min-width: 0; }
.inv-name { font-size: 0.92rem; font-weight: 600; }
.inv-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
}
.inv-qty {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  flex: none;
}
.inv-note {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
  flex: none;
  max-width: 34%;
  text-align: right;
}
/* active công pháp badge ("Đang Tu") — jade chip instead of a dead button */
.inv-note.cp-active {
  color: var(--jade);
  font-style: normal;
  font-weight: 700;
  border: 1px solid var(--jade);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ---------- luyện đan / luyện khí ---------- */

.ld-sec-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin: -4px 0 12px;
  font-style: italic;
}
.recipe {
  background: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.recipe:last-child { margin-bottom: 0; }
.r-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.r-head .r-name { flex: 1; min-width: 0; }
.r-name { font-weight: 600; font-size: 0.95rem; }
.r-rate { font-variant-numeric: tabular-nums; font-size: 0.85rem; font-weight: 700; }
.r-desc { font-size: 0.78rem; color: var(--muted); margin: 3px 0 0; }
.r-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 8px;
}
.ing {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(70, 184, 160, 0.35);
  color: var(--jade);
  font-size: 0.74rem;
  background: rgba(70, 184, 160, 0.07);
  font-variant-numeric: tabular-nums;
}
.ing.lack {
  border-color: rgba(210, 96, 79, 0.45);
  color: #f0b5aa;
  background: rgba(90, 26, 18, 0.25);
}
.r-odds { font-size: 0.74rem; color: var(--muted); margin-bottom: 4px; }
.r-note { font-size: 0.72rem; color: var(--muted); margin-bottom: 10px; }

/* craft result modal */
.craft-res { text-align: center; padding: 6px 4px 2px; }
.craft-res-q {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  animation: craft-pop 0.45s ease-out;
}
.craft-res-big {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 4px;
  animation: craft-pop 0.55s ease-out;
}
.craft-res-sub { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
.craft-consumed { margin-top: 12px; font-size: 0.82rem; color: #f0b5aa; }
@keyframes craft-pop {
  0% { opacity: 0; transform: scale(0.7); }
  60% { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- bí cảnh ---------- */

.dg-run { border-color: rgba(70, 184, 160, 0.35); }
.dg-run-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.dg-cd {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.dg-cd.ready { color: var(--jade); }
.dg-prog {
  height: 10px;
  border-radius: 999px;
  background: var(--ink-0);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 10px 0 12px;
}
.dg-prog-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jade-dim), var(--jade));
  transition: width 1s linear;
}
.dg-prog-fill.full {
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  box-shadow: 0 0 12px rgba(212, 175, 95, 0.55);
}
.dg-run-hint {
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--muted);
  text-align: center;
}

.dg-card {
  background: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.dg-card:last-child { margin-bottom: 0; }
.dg-card.locked { opacity: 0.6; }
.dg-card.active { border-color: rgba(70, 184, 160, 0.5); }
.dg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.dg-head .r-name { flex: 1; min-width: 0; }
.dg-run-head { align-items: center; }
.dg-run-head .r-name { flex: 1; min-width: 0; }
.dg-dur {
  font-size: 0.74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.dg-req { font-size: 0.76rem; color: var(--muted); margin: 4px 0 10px; }
.dg-foot { display: flex; justify-content: flex-end; min-height: 32px; align-items: center; }
.dg-badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.dg-badge.dg-active {
  color: var(--jade);
  border: 1px solid rgba(70, 184, 160, 0.4);
  animation: debuff-pulse 1.8s ease-in-out infinite;
}

/* loot modal */
.loot-lt {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
}
.loot-list {
  margin-top: 12px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  text-align: left;
}
.loot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.9rem;
}
.loot-row .loot-name { flex: 1; min-width: 0; }
.loot-qty { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- đấu pháp ---------- */

.opp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(140, 170, 200, 0.1);
}
.opp-row:last-child { border-bottom: 0; }
.opp-main { flex: 1; min-width: 0; }
.opp-name { display: block; font-weight: 600; font-size: 0.95rem; }
.opp-realm { font-size: 0.74rem; color: var(--muted); }
.opp-nums {
  text-align: right;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.opp-power { display: block; }
.opp-score { display: block; color: var(--gold); }
.opp-cd {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
  flex: none;
  min-width: 76px;
  text-align: center;
}

.plog-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(140, 170, 200, 0.1);
}
.plog-row:last-child { border-bottom: 0; }
.plog-main { flex: 1; min-width: 0; }
.plog-opp { display: block; font-size: 0.9rem; font-weight: 600; }
.plog-meta { font-size: 0.72rem; color: var(--muted); }
.plog-res { font-size: 0.78rem; font-weight: 700; flex: none; }
.plog-res.win { color: var(--jade); }
.plog-res.lose { color: var(--danger); }

/* combat replay overlay */
.fight-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 7, 11, 0.78);
  backdrop-filter: blur(3px);
  animation: toast-in 0.2s ease-out;
}
.fight-panel {
  width: min(94vw, 480px);
  max-height: 88dvh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.fight-title {
  font-family: var(--font-title);
  text-align: center;
  letter-spacing: 0.28em;
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.fight-arena { display: flex; align-items: flex-start; gap: 10px; }
.fside { flex: 1; min-width: 0; }
.fs-name {
  font-weight: 700;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-sub { font-size: 0.7rem; color: var(--muted); margin: 2px 0 6px; }
.fside:last-child .fs-name,
.fside:last-child .fs-sub,
.fside:last-child .hp-num { text-align: right; }
.fight-vs {
  align-self: center;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.85rem;
  padding-top: 16px;
  flex: none;
}
.hp {
  height: 10px;
  border-radius: 999px;
  background: var(--ink-0);
  border: 1px solid var(--line);
  overflow: hidden;
}
.hp-fill { height: 100%; width: 100%; transition: width 0.25s ease; }
.hp-fill.a { background: linear-gradient(90deg, var(--jade-dim), var(--jade)); }
.hp-fill.d { background: linear-gradient(90deg, #8f3f33, var(--danger)); }
.hp-num {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.fight-log {
  margin-top: 14px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-0);
  padding: 8px 10px;
  font-size: 0.8rem;
}
.fl-line { display: flex; gap: 8px; padding: 3px 0; animation: toast-in 0.25s ease-out; }
.fl-turn {
  flex: none;
  width: 22px;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fl-txt { flex: 1; min-width: 0; }
.fight-result { margin-top: 14px; text-align: center; animation: craft-pop 0.4s ease-out; }
.fr-big { font-family: var(--font-title); font-size: 1.5rem; letter-spacing: 0.1em; }
.fr-big.win { color: var(--gold); text-shadow: 0 0 26px rgba(212, 175, 95, 0.65); }
.fr-big.lose { color: var(--danger); text-shadow: 0 0 22px rgba(210, 96, 79, 0.5); }
.fr-line { margin-top: 6px; font-size: 0.85rem; }
.fight-btns { margin-top: 14px; }

/* ---------- tông môn ---------- */

.tm-g-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(140, 170, 200, 0.1);
}
.tm-g-row:last-child { border-bottom: 0; }
.tm-g-main { flex: 1; min-width: 0; }
.tm-g-name {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.tm-g-sub { font-size: 0.74rem; color: var(--muted); }
.tm-g-nums {
  text-align: right;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.tm-g-mem { display: block; color: var(--text); font-weight: 600; }
.tm-g-memcap { display: block; font-size: 0.68rem; }
.tm-g-full {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
  flex: none;
  min-width: 76px;
  text-align: center;
}
.tm-cost {
  margin: 10px 0 14px;
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tm-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.tm-id { min-width: 0; }
.tm-name {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
  overflow-wrap: anywhere;
}
.tm-lv {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--jade);
  border: 1px solid rgba(70, 184, 160, 0.4);
  border-radius: 999px;
  padding: 2px 9px;
}
.tm-buff-box { text-align: right; flex: none; }
.tm-buff-num {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--jade);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(70, 184, 160, 0.35);
}
.tm-buff-cap {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tm-exp-note { margin-top: 10px; font-size: 0.8rem; color: var(--gold); }
.tm-count { font-size: 0.8rem; color: var(--muted); font-family: var(--font-body); font-weight: 400; }

.tm-m-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(140, 170, 200, 0.1);
}
.tm-m-row:last-child { border-bottom: 0; }
.tm-m-row.self { background: rgba(212, 175, 95, 0.05); border-radius: 6px; }
.tm-role {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  min-width: 74px;
  text-align: center;
}
.tm-role.leader {
  color: var(--gold);
  border-color: rgba(212, 175, 95, 0.45);
  background: rgba(212, 175, 95, 0.08);
}
.tm-m-main { flex: 1; min-width: 0; }
.tm-m-name {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.tm-me { color: var(--gold); font-size: 0.76rem; font-weight: 400; }
.tm-m-realm { font-size: 0.74rem; color: var(--muted); }
.tm-m-today {
  flex: none;
  font-size: 0.78rem;
  color: var(--jade);
  font-variant-numeric: tabular-nums;
}

.tm-cap-line {
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.tm-contrib-row { display: flex; gap: 8px; }
.tm-contrib-row .input { flex: 1; min-width: 0; }
.tm-contrib-row .btn { width: auto; flex: none; }
.tm-prev {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  min-height: 1.1em;
}
.tm-leave-note {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}
.tm-confirm-txt { font-size: 0.9rem; margin: 4px 0 16px; overflow-wrap: anywhere; }

/* ---------- xếp hạng ---------- */

.xh-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.xh-c-rank { flex: none; width: 34px; text-align: center; }
.xh-c-name { flex: 1; }
.xh-c-val { flex: none; min-width: 84px; text-align: right; }

.xh-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(140, 170, 200, 0.1);
}
.xh-row:last-child { border-bottom: 0; }
.xh-row.self {
  background: rgba(212, 175, 95, 0.07);
  border-radius: 6px;
  box-shadow: inset 2px 0 0 var(--gold);
  padding-left: 8px;
}
.xh-rank {
  flex: none;
  width: 34px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.xh-rank.top1 { color: var(--gold); text-shadow: 0 0 10px rgba(212, 175, 95, 0.5); }
.xh-rank.top2 { color: #c9d4e0; }
.xh-rank.top3 { color: #c08a5a; }
.xh-main { flex: 1; min-width: 0; }
.xh-name {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.xh-me { color: var(--gold); font-size: 0.76rem; font-weight: 400; }
.xh-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.xh-val {
  flex: none;
  min-width: 84px;
  text-align: right;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ---------- desktop ≥900px: sidebar ---------- */

@media (min-width: 900px) {
  #app {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 100dvh;
  }
  .screen {
    grid-column: 2;
    padding: 28px 32px 48px;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
  }
  .nav {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 0;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    border-top: 0;
    border-right: 1px solid var(--line);
    padding: 20px 10px;
    gap: 4px;
    background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  }
  .nav-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 0 18px;
  }
  .nav-logo { width: 46px; height: 46px; }
  .nav-brand-txt {
    font-family: var(--font-title);
    color: var(--gold);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-align: center;
  }
  .nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 0.9rem;
  }
  .nav-item:hover { background: rgba(140, 170, 200, 0.07); }
  .nav-item.active { background: rgba(212, 175, 95, 0.1); }
  .nav-item .ico { font-size: 1.05rem; width: 22px; text-align: center; }
  .nav-item.more { margin-top: auto; }
  .nav-menu {
    left: 226px;
    right: auto;
    bottom: 16px;
  }
}