:root {
  --void-black: #0a0c10;
  --deep-abyss: #0b0f14;
  --ash-black: #0c0c0c;
  --storm-blue: #12212f;
  --abyss-teal: #17333b;
  --blood-red: #8b0e14;
  --ember-orange: #d66a1a;
  --aged-gold: #c9a66b;
  --bone-white: #e6e0d1;
  --ash-grey: #7e838a;
  --corruption-purple: #8a2c6f;
  --bg: var(--void-black);
  --panel: #10151b;
  --panel-2: #17110d;
  --line: #4b3420;
  --gold: var(--aged-gold);
  --gold-dim: #8e6a3a;
  --red: var(--blood-red);
  --red-bright: #d63b2f;
  --violet: var(--corruption-purple);
  --green: #81b95d;
  --ink: var(--bone-white);
  --muted: #b9a17a;
  --shadow: rgba(0, 0, 0, 0.72);
  --font-heading: Cinzel, Trajan Pro, Georgia, serif;
  --font-body: Lora, Merriweather, Georgia, serif;
  --font-ui: Cinzel, Garamond, Georgia, serif;
  --brand-border: 1px solid rgba(201, 166, 107, 0.32);
  --brand-glow: 0 0 24px rgba(214, 106, 26, 0.18);
  --danger-glow: 0 0 24px rgba(139, 14, 20, 0.3);
  --layout-scale: 0.86;
  --ui-scale: var(--layout-scale);
  --space-xs: clamp(0.25rem, 0.3vw, 0.4rem);
  --space-sm: clamp(0.4rem, 0.5vw, 0.65rem);
  --space-md: clamp(0.65rem, 0.8vw, 1rem);
  --space-lg: clamp(1rem, 1.2vw, 1.4rem);
  --space-xl: clamp(1.4rem, 1.8vw, 2rem);
  --font-xs: clamp(0.7rem, 0.75vw, 0.8rem);
  --font-sm: clamp(0.78rem, 0.85vw, 0.9rem);
  --font-base: clamp(0.88rem, 0.95vw, 1rem);
  --font-lg: clamp(1rem, 1.1vw, 1.2rem);
  --font-xl: clamp(1.25rem, 1.6vw, 1.75rem);
  --font-2xl: clamp(1.6rem, 2.1vw, 2.4rem);
  --panel-padding: clamp(0.65rem, 0.85vw, 1.05rem);
  --card-padding: clamp(0.55rem, 0.75vw, 0.9rem);
  --section-padding-y: clamp(0.9rem, 1.3vw, 1.65rem);
  --section-padding-x: clamp(0.85rem, 1.4vw, 1.5rem);
  --nav-height: clamp(52px, 5.4vh, 64px);
  --sidebar-width: clamp(200px, 14vw, 248px);
  --content-max-width: 1280px;
  --compact-line-height: 1.35;
  --asset-symbol: url("assets/brand/symbol-256.png");
  --asset-title-horizontal: url("assets/brand/horizontal-title.png");
  --asset-title-stacked: url("assets/brand/stacked-title.png");
  --asset-button-frame: url("assets/ui/button-frame.png");
  --asset-divider: url("assets/ui/divider.png");
  --asset-corner: url("assets/frames/corner-piece.png");
  --asset-ornate-frame: url("assets/frames/ornate-frame.png");
  --asset-sidebar-frame: url("assets/frames/sidebar-panel.png");
  --asset-modal-frame: url("assets/frames/modal-frame.png");
  --asset-main-frame: url("assets/frames/main-panel-frame.png");
  --asset-shadowmark: url("assets/brand/shadowmark-vip-symbol.png");
}

.react-app-active #legacy-prototype {
  display: none;
}

.react-app-active #root {
  min-height: 100vh;
}

.app-shell,
.react-auth-page,
.react-signup-board {
  min-height: 100vh;
  padding: 1rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.88)),
    radial-gradient(circle at 50% 0, rgba(146, 17, 24, 0.24), transparent 24rem),
    #050505;
  color: var(--ink);
}

.react-game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  border-bottom: 1px solid rgba(169, 130, 86, 0.22);
}

.react-game-header nav {
  display: flex;
  gap: 0.5rem;
}

.react-game-header button,
.brand-button,
.tab-row button {
  border: 1px solid rgba(169, 130, 86, 0.28);
  color: #e5d1b8;
  background: rgba(7, 6, 6, 0.7);
  padding: 0.65rem 0.9rem;
  text-transform: uppercase;
  cursor: pointer;
}

.react-game-header button.active,
.tab-row button.active {
  color: #f33b41;
  border-color: rgba(207, 28, 35, 0.72);
  background: rgba(84, 11, 14, 0.34);
}

.world-clock-panel {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) minmax(14rem, 1.35fr) minmax(15rem, 1.3fr) auto;
  align-items: stretch;
  gap: 0.8rem;
  width: min(58rem, 100%);
  margin: 0 auto 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(201, 166, 107, 0.28);
  background:
    linear-gradient(135deg, rgba(12, 10, 9, 0.92), rgba(26, 13, 15, 0.86)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.035) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), 0 14px 30px rgba(0, 0, 0, 0.42);
}

.world-clock-panel.compact {
  grid-template-columns: minmax(10rem, 1fr) minmax(13rem, 1.15fr) auto;
  width: min(33rem, 42vw);
  margin: 0;
  padding: 0.55rem;
  gap: 0.55rem;
}

.world-clock-main,
.world-clock-countdowns > div {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(201, 166, 107, 0.16);
  background: rgba(0, 0, 0, 0.28);
}

.world-clock-main span,
.world-clock-countdowns span,
.world-clock-main small,
.world-clock-countdowns small {
  color: #a99983;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.world-clock-main strong {
  color: #f2d8b2;
  font-size: 1.05rem;
}

.world-clock-effects {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.45rem;
}

.world-clock-effects span {
  border: 1px solid rgba(208, 71, 79, 0.32);
  color: #e8c4a8;
  background: rgba(76, 7, 11, 0.28);
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem;
}

.world-clock-countdowns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.world-clock-countdowns strong {
  color: #d0474f;
  font-size: 0.92rem;
}

.world-clock-sync {
  align-self: stretch;
  min-width: 5.4rem;
  border: 1px solid rgba(208, 71, 79, 0.52);
  color: #e9dbc5;
  background: linear-gradient(180deg, rgba(111, 34, 42, 0.9), rgba(57, 20, 23, 0.9));
  text-transform: uppercase;
  cursor: pointer;
}

.world-clock-sync:disabled {
  cursor: wait;
  opacity: 0.68;
}

.world-clock-error {
  grid-column: 1 / -1;
  margin: 0;
  color: #d0474f;
  font-size: 0.82rem;
}

.react-auth-page .world-clock-panel {
  margin-top: clamp(1rem, 6vh, 4rem);
}

.world-state-gameplay-card {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(20rem, 1.45fr);
  gap: 0.85rem;
  margin: 1rem 0;
  padding: 0.9rem;
  border: 1px solid rgba(208, 71, 79, 0.34);
  background:
    linear-gradient(135deg, rgba(76, 7, 11, 0.2), rgba(0, 0, 0, 0.28)),
    rgba(8, 7, 6, 0.62);
}

.world-state-gameplay-card span,
.world-state-gameplay-card p,
.world-state-note {
  color: #b8a898;
}

.world-state-gameplay-card strong {
  display: block;
  color: #f2d8b2;
  font-size: 1.05rem;
}

.world-state-gameplay-card p,
.world-state-note {
  margin: 0.25rem 0 0;
}

.world-state-modifier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  align-content: stretch;
}

.world-state-modifier-grid span {
  display: grid;
  place-items: center;
  min-height: 3rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  background: rgba(0, 0, 0, 0.32);
  color: #e8c4a8;
  text-align: center;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.public-layout,
.game-layout {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.site-header {
  position: sticky;
  top: var(--space-sm);
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  width: min(100%, var(--content-max-width));
  min-height: var(--nav-height);
  margin-inline: auto;
  padding: var(--space-sm);
  border: 1px solid rgba(201, 166, 107, 0.28);
  background:
    linear-gradient(135deg, rgba(8, 6, 5, 0.95), rgba(28, 12, 15, 0.92)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.035) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.82), 0 16px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}

.site-wordmark {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: var(--space-sm);
  align-items: center;
  min-height: 2.75rem;
  border: 0 !important;
  color: #f2ddbf !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.site-wordmark-sigil {
  width: 2.25rem;
  height: 2.25rem;
  background: var(--asset-symbol) center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(214, 59, 47, 0.28));
}

.site-header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.header-status {
  display: grid;
  gap: 0.1rem;
  min-height: 2.75rem;
  min-width: 8rem;
  text-align: left;
}

.header-status span {
  color: var(--muted);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.public-content {
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
}

.game-body {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--space-md);
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  align-items: start;
}

.game-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
  max-height: calc(100svh - var(--nav-height) - var(--space-xl));
  overflow: auto;
  border: 1px solid rgba(201, 166, 107, 0.24);
  background:
    linear-gradient(rgba(10, 8, 7, 0.92), rgba(6, 5, 5, 0.96)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.035) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.82), 0 14px 28px rgba(0, 0, 0, 0.42);
  padding: var(--space-sm);
}

.game-sidebar nav {
  display: grid;
  gap: var(--space-xs);
}

.game-sidebar-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  min-height: 2.45rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(201, 166, 107, 0.16);
  color: #d8c5a9;
  background: rgba(0, 0, 0, 0.28);
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.game-sidebar-link::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border: 1px solid currentColor;
  opacity: 0.62;
  transform: rotate(45deg);
}

.game-sidebar-link.active {
  color: #fff0d2;
  border-color: rgba(214, 59, 47, 0.75);
  background: linear-gradient(90deg, rgba(117, 13, 18, 0.62), rgba(0, 0, 0, 0.28));
  box-shadow: inset 3px 0 0 rgba(214, 59, 47, 0.82);
}

.game-sidebar-link em {
  color: #b9885c;
  font-size: 0.62rem;
  font-style: normal;
  letter-spacing: 0.08em;
}

.game-sidebar-link:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-layout .site-header {
  border-color: rgba(214, 59, 47, 0.34);
  background:
    linear-gradient(135deg, rgba(12, 5, 6, 0.96), rgba(30, 11, 12, 0.93)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.035) 0 1px, transparent 1px 8px);
}

.admin-sidebar {
  border-color: rgba(214, 59, 47, 0.24);
}

.admin-sidebar .return-link {
  margin-bottom: var(--space-sm);
  color: #f0d6b6;
  border-color: rgba(201, 166, 107, 0.32);
}

.console-link {
  border-color: rgba(214, 59, 47, 0.42) !important;
}

.game-content {
  min-width: 0;
}

.section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: start;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(201, 166, 107, 0.18);
}

.section-header span {
  display: block;
  color: var(--red-bright);
  font-size: var(--font-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-header p {
  max-width: 52rem;
  margin: var(--space-xs) 0 0;
  color: #cdbb9f;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs);
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-sm);
}

.panel-card {
  border: 1px solid rgba(201, 166, 107, 0.18);
  padding: var(--card-padding);
  background:
    linear-gradient(rgba(5, 5, 6, 0.66), rgba(9, 7, 7, 0.82)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.025) 0 1px, transparent 1px 8px);
}

.console-page,
.access-denied-page {
  display: grid;
  gap: var(--space-md);
}

.console-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.console-card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  min-height: 11rem;
  border-color: rgba(201, 166, 107, 0.24);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.64);
}

.console-card h2,
.access-denied-card h2 {
  margin: 0;
  color: #f0d6b6;
  font-size: var(--font-lg);
}

.console-card p,
.access-denied-card p {
  margin: 0;
  color: #cdbb9f;
  line-height: var(--compact-line-height);
}

.console-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: 0;
}

.console-card dt {
  color: var(--muted);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.console-card dd {
  margin: 0.1rem 0 0;
  color: #e8c4a8;
}

.access-denied-card {
  border-color: rgba(214, 59, 47, 0.45);
  background:
    linear-gradient(rgba(41, 7, 9, 0.42), rgba(5, 5, 6, 0.78)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.025) 0 1px, transparent 1px 8px);
}

.hunter-creation-page {
  position: relative;
  overflow: hidden;
}

.hunter-creation-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 8%, rgba(214, 106, 26, 0.12), transparent 18rem),
    radial-gradient(circle at 78% 18%, rgba(139, 14, 20, 0.14), transparent 18rem);
  opacity: 0.9;
}

.hunter-creation-page > * {
  position: relative;
  z-index: 1;
}

.hunter-creation-shell {
  display: grid;
  grid-template-columns: minmax(11rem, 0.55fr) minmax(0, 1.55fr) minmax(13rem, 0.62fr);
  gap: var(--space-md);
  align-items: start;
}

.hunter-ritual-rail,
.hunter-summary-panel,
.ritual-panel {
  border: 1px solid rgba(201, 166, 107, 0.22);
  background:
    linear-gradient(rgba(5, 5, 6, 0.76), rgba(12, 8, 8, 0.88)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.025) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72), 0 18px 40px rgba(0, 0, 0, 0.28);
}

.hunter-ritual-rail,
.hunter-summary-panel {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
  display: grid;
  gap: var(--space-sm);
  padding: var(--card-padding);
}

.old-ash-mini {
  display: grid;
  gap: var(--space-xs);
}

.old-ash-mini img {
  width: 100%;
  max-height: 8.5rem;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(201, 166, 107, 0.2);
  filter: saturate(0.78) contrast(1.08);
}

.old-ash-mini p,
.hunter-summary-panel p {
  margin: 0;
  color: #cdbb9f;
  font-size: var(--font-sm);
  line-height: var(--compact-line-height);
}

.ritual-steps {
  display: grid;
  gap: var(--space-xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

.ritual-steps li {
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: center;
  min-height: 2.15rem;
  color: #a8906c;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.ritual-steps span {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid rgba(201, 166, 107, 0.28);
  color: #c9a66b;
  background: rgba(0, 0, 0, 0.3);
}

.ritual-steps li.active,
.ritual-steps li.complete {
  color: #f2ddbf;
}

.ritual-steps li.active span {
  border-color: rgba(214, 59, 47, 0.72);
  color: #fff0d2;
  background: rgba(117, 13, 18, 0.42);
  box-shadow: 0 0 18px rgba(214, 59, 47, 0.24);
}

.hunter-ritual-stage {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.ritual-panel {
  display: grid;
  gap: var(--space-md);
  min-height: clamp(24rem, 58vh, 34rem);
  padding: var(--panel-padding);
}

.ritual-panel-heading {
  display: grid;
  gap: var(--space-xs);
  border-bottom: 1px solid rgba(201, 166, 107, 0.16);
  padding-bottom: var(--space-sm);
}

.ritual-panel h2,
.hunter-summary-panel h2 {
  margin: 0;
  color: #f2ddbf;
  font-size: var(--font-xl);
}

.ritual-panel p,
.ritual-panel blockquote {
  margin: 0;
  color: #d4c2a4;
  line-height: var(--compact-line-height);
}

.warning-panel {
  place-content: center;
  text-align: center;
  background:
    linear-gradient(rgba(5, 5, 6, 0.82), rgba(12, 8, 8, 0.9)),
    radial-gradient(circle at 50% 22%, rgba(214, 106, 26, 0.16), transparent 12rem);
}

.ritual-sigil {
  width: 5rem;
  height: 5rem;
  margin-inline: auto;
  background: var(--asset-symbol) center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(214, 59, 47, 0.32));
  animation: lanternPulse 3.2s ease-in-out infinite;
}

.warning-panel blockquote {
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--space-sm);
  border-top: 1px solid rgba(201, 166, 107, 0.2);
  border-bottom: 1px solid rgba(201, 166, 107, 0.2);
  color: #e8c4a8;
  font-style: italic;
}

.ritual-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-sm);
}

.ritual-choice-card,
.portrait-card {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  min-height: 9.5rem;
  padding: var(--card-padding);
  overflow: hidden;
  border: 1px solid rgba(201, 166, 107, 0.2);
  color: #e6d5ba;
  background:
    linear-gradient(rgba(5, 5, 6, 0.74), rgba(5, 5, 6, 0.9)),
    var(--choice-art, none) center / cover no-repeat;
  text-align: left;
  cursor: pointer;
}

.ritual-choice-card::before,
.portrait-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(201, 166, 107, 0.07), transparent 42%, rgba(139, 14, 20, 0.12));
  opacity: 0.72;
}

.ritual-choice-card > *,
.portrait-card > * {
  position: relative;
  z-index: 1;
}

.ritual-choice-card:hover,
.ritual-choice-card.selected,
.portrait-card:hover,
.portrait-card.selected {
  border-color: rgba(214, 59, 47, 0.72);
  box-shadow: inset 0 0 0 1px rgba(214, 59, 47, 0.24), 0 0 22px rgba(139, 14, 20, 0.22);
}

.choice-symbol {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(201, 166, 107, 0.35);
  color: #e8c4a8;
  background: rgba(0, 0, 0, 0.36);
}

.ritual-choice-card strong,
.portrait-card strong {
  color: #f2ddbf;
  font-size: var(--font-lg);
}

.ritual-choice-card p,
.ritual-choice-card em,
.ritual-choice-card small,
.portrait-card span {
  margin: 0;
  color: #cdbb9f;
  font-size: var(--font-sm);
  line-height: var(--compact-line-height);
}

.ritual-choice-card em {
  color: #e1a980;
  font-style: italic;
}

.ritual-panel-heading em,
.mechanical-hint,
.warning-label,
.relic-badges,
.choice-tags,
.chosen-board-summary,
.portrait-card em,
.name-validation,
.name-step blockquote {
  position: relative;
  z-index: 1;
}

.ritual-panel-heading em {
  display: inline-block;
  margin-top: var(--space-xs);
  color: #e1a980;
  font-size: var(--font-sm);
  font-style: italic;
}

.warning-label {
  justify-self: start;
  border: 1px solid rgba(214, 59, 47, 0.48);
  padding: 0.18rem 0.4rem;
  color: #ffd8bd;
  background: rgba(117, 13, 18, 0.46);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mechanical-hint {
  display: block;
  border-left: 2px solid rgba(201, 166, 107, 0.32);
  padding-left: 0.5rem;
  color: #d8bd87;
  font-size: var(--font-xs);
  line-height: 1.35;
}

.relic-badges {
  color: #f2ddbf;
  text-transform: uppercase;
}

.choice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.choice-tags i {
  border: 1px solid rgba(201, 166, 107, 0.16);
  padding: 0.18rem 0.32rem;
  color: #bba783;
  background: rgba(0, 0, 0, 0.3);
  font-size: var(--font-xs);
  font-style: normal;
}

.chosen-board-summary {
  display: grid;
  gap: 0.15rem;
  margin-top: var(--space-sm);
  border: 1px solid rgba(201, 166, 107, 0.18);
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.28);
}

.chosen-board-summary span {
  color: #bba783;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.chosen-board-summary strong {
  color: #f2ddbf;
  font-family: var(--font-display);
}

.chosen-board-summary p,
.name-validation,
.name-step blockquote {
  margin: 0;
  color: #cdbb9f;
  font-size: var(--font-sm);
}

.relic-grid {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.relic-grid .ritual-choice-card {
  min-height: 17rem;
}

.relic-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(201, 166, 107, 0.18);
  filter: saturate(0.82) contrast(1.05);
}

.rarity-forbidden,
.rarity-nightmare,
.rarity-legendary {
  border-color: rgba(214, 59, 47, 0.34);
}

.portrait-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.45fr);
  gap: var(--space-md);
}

.portrait-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}

.portrait-card {
  min-height: 14rem;
}

.portrait-card img,
.summary-portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(201, 166, 107, 0.18);
  filter: saturate(0.72) contrast(1.08);
}

.portrait-card em {
  color: #bba783;
  font-size: var(--font-xs);
  font-style: normal;
}

.appearance-controls,
.confirmation-ledger {
  display: grid;
  gap: var(--space-sm);
}

.appearance-controls label,
.hunter-name-field {
  display: grid;
  gap: var(--space-xs);
  color: #c9a66b;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.appearance-controls select,
.hunter-name-field input {
  width: 100%;
  border: 1px solid rgba(201, 166, 107, 0.24);
  padding: 0.7rem 0.8rem;
  color: #f2ddbf;
  background: rgba(0, 0, 0, 0.42);
}

.hunter-name-field input {
  font-size: var(--font-lg);
  text-transform: none;
}

.name-validation {
  color: #e1a980;
}

.name-step blockquote {
  border-top: 1px solid rgba(201, 166, 107, 0.16);
  padding-top: var(--space-sm);
  color: #e8c4a8;
  font-style: italic;
}

.summary-line {
  display: grid;
  grid-template-columns: minmax(5rem, 0.6fr) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  padding-block: var(--space-xs);
  border-bottom: 1px solid rgba(201, 166, 107, 0.12);
}

.summary-line span {
  color: var(--muted);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.summary-line strong {
  color: #f2ddbf;
  font-size: var(--font-sm);
}

.hunter-creation-actions {
  position: sticky;
  bottom: var(--space-sm);
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border: 1px solid rgba(201, 166, 107, 0.16);
  background: rgba(4, 4, 5, 0.78);
  backdrop-filter: blur(10px);
}

.arrival-transition {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  gap: var(--space-md);
  background:
    radial-gradient(circle at 50% 45%, rgba(246, 190, 104, 0.34), transparent 12rem),
    rgba(0, 0, 0, 0.78);
  text-align: center;
}

.arrival-transition span {
  width: 5rem;
  height: 5rem;
  background: var(--asset-symbol) center / contain no-repeat;
  filter: drop-shadow(0 0 28px rgba(214, 106, 26, 0.58));
  animation: lanternPulse 0.85s ease-in-out infinite;
}

.arrival-transition p {
  color: #fff0d2;
  font-size: var(--font-lg);
}

.codex-page {
  display: grid;
  gap: var(--space-md);
}

.codex-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 0.62fr) minmax(0, 1.45fr) minmax(17rem, 0.82fr);
  gap: var(--space-md);
  align-items: start;
}

.codex-category-nav,
.codex-main-panel,
.codex-detail-panel {
  border: 1px solid rgba(201, 166, 107, 0.2);
  background:
    linear-gradient(rgba(5, 5, 6, 0.74), rgba(9, 7, 7, 0.86)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.025) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72);
}

.codex-category-nav,
.codex-detail-panel {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
  max-height: calc(100svh - var(--nav-height) - var(--space-xl));
  overflow: auto;
  padding: var(--card-padding);
}

.codex-category-nav {
  display: grid;
  gap: var(--space-xs);
}

.codex-category-nav details {
  border: 1px solid rgba(201, 166, 107, 0.14);
  background: rgba(0, 0, 0, 0.22);
}

.codex-category-nav summary {
  list-style: none;
}

.codex-category-nav summary::-webkit-details-marker {
  display: none;
}

.codex-category-nav button {
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: center;
  width: 100%;
  min-height: 2.45rem;
  padding: 0.42rem 0.5rem;
  border: 0;
  color: #d8c5a9;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.codex-category-nav button.active {
  color: #fff0d2;
  background: linear-gradient(90deg, rgba(117, 13, 18, 0.62), rgba(0, 0, 0, 0.18));
  box-shadow: inset 3px 0 0 rgba(214, 59, 47, 0.82);
}

.codex-category-nav button span {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid rgba(201, 166, 107, 0.32);
  color: #e8c4a8;
  font-size: var(--font-xs);
}

.codex-category-nav em {
  color: #b9885c;
  font-size: var(--font-xs);
  font-style: normal;
}

.codex-category-nav p {
  margin: 0;
  padding: 0 var(--space-sm) var(--space-sm) 2.3rem;
  color: #bba98c;
  font-size: var(--font-xs);
  line-height: var(--compact-line-height);
}

.codex-main-panel {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--card-padding);
}

.codex-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: var(--space-xs);
}

.codex-summary-strip span {
  display: grid;
  gap: 0.1rem;
  min-height: 3rem;
  border: 1px solid rgba(201, 166, 107, 0.16);
  padding: 0.45rem 0.55rem;
  color: #a99472;
  background: rgba(0, 0, 0, 0.28);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.codex-summary-strip strong {
  color: #f2ddbf;
  font-size: var(--font-lg);
  font-family: "Cinzel", serif;
  line-height: 1;
}

.codex-filter-bar {
  display: grid;
  grid-template-columns: minmax(12rem, 1.3fr) repeat(3, minmax(8rem, 0.8fr)) auto auto;
  gap: var(--space-xs);
  align-items: end;
}

.codex-filter-bar label {
  display: grid;
  gap: 0.2rem;
  color: #c9a66b;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.codex-filter-bar input,
.codex-filter-bar select {
  width: 100%;
  min-height: 2.35rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  padding: 0.45rem 0.55rem;
  color: #f2ddbf;
  background: rgba(0, 0, 0, 0.42);
}

.codex-toggle {
  min-height: 2.35rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  color: #d8c5a9;
  background: rgba(0, 0, 0, 0.28);
  text-transform: uppercase;
  cursor: pointer;
}

.codex-toggle.active {
  border-color: rgba(214, 59, 47, 0.72);
  color: #fff0d2;
  background: rgba(117, 13, 18, 0.45);
}

.codex-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--space-sm);
}

.codex-entry-card {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  min-height: 13.5rem;
  padding: var(--card-padding);
  border: 1px solid rgba(201, 166, 107, 0.18);
  color: #d8c5a9;
  background:
    linear-gradient(rgba(5, 5, 6, 0.72), rgba(8, 6, 6, 0.9)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.018) 0 1px, transparent 1px 8px);
  text-align: left;
  cursor: pointer;
}

.codex-entry-card:hover,
.codex-entry-card.selected {
  border-color: rgba(214, 59, 47, 0.64);
  box-shadow: inset 0 0 0 1px rgba(214, 59, 47, 0.2), 0 0 20px rgba(139, 14, 20, 0.2);
}

.codex-entry-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(201, 166, 107, 0.16);
  background:
    radial-gradient(circle, rgba(201, 166, 107, 0.16), transparent 58%),
    rgba(0, 0, 0, 0.34);
}

.codex-entry-art img,
.codex-detail-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.76) contrast(1.08);
}

.codex-entry-art span,
.codex-detail-art span {
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(201, 166, 107, 0.28);
  background: rgba(0, 0, 0, 0.36);
  transform: rotate(45deg);
  filter: blur(0.4px);
}

.codex-entry-art em {
  position: absolute;
  bottom: var(--space-xs);
  left: 50%;
  transform: translateX(-50%);
  color: #d6a071;
  font-size: var(--font-xs);
  font-style: normal;
  text-transform: uppercase;
}

.codex-entry-card strong {
  color: #f2ddbf;
  font-size: var(--font-base);
}

.codex-entry-card span,
.codex-entry-card small {
  color: #bba98c;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.codex-entry-card.state-locked {
  border-style: dashed;
  opacity: 0.82;
}

.codex-entry-card.state-mastered {
  border-color: rgba(201, 166, 107, 0.42);
}

.codex-detail-panel {
  display: grid;
  gap: var(--space-sm);
}

.codex-detail-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(201, 166, 107, 0.18);
  background:
    radial-gradient(circle at 50% 30%, rgba(214, 106, 26, 0.14), transparent 9rem),
    rgba(0, 0, 0, 0.34);
}

.codex-state-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.18rem;
}

.codex-state-strip span {
  min-height: 0.35rem;
  overflow: hidden;
  color: transparent;
  background: rgba(201, 166, 107, 0.12);
}

.codex-state-strip span.lit {
  background: linear-gradient(90deg, rgba(214, 59, 47, 0.8), rgba(201, 166, 107, 0.62));
}

.codex-detail-panel h2 {
  margin: 0;
  color: #f2ddbf;
  font-size: var(--font-xl);
}

.codex-detail-panel h3 {
  margin: 0 0 var(--space-xs);
  color: #e8c4a8;
  font-size: var(--font-base);
}

.codex-detail-panel p,
.codex-detail-panel li {
  color: #cdbb9f;
  line-height: var(--compact-line-height);
}

.codex-copy {
  margin: 0;
  color: #e1a980 !important;
  font-style: italic;
}

.codex-summary-line {
  display: grid;
  grid-template-columns: minmax(6rem, 0.65fr) minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-bottom: 1px solid rgba(201, 166, 107, 0.12);
}

.codex-summary-line span {
  color: var(--muted);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.codex-summary-line strong {
  color: #f2ddbf;
  font-size: var(--font-sm);
}

.codex-detail-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-sm);
}

.codex-detail-lists ul {
  display: grid;
  gap: 0.2rem;
  padding-left: 1rem;
  margin: 0;
}

.battle-survival-page {
  display: grid;
  gap: var(--space-md);
}

.encounter-intro-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.46fr);
  gap: var(--space-md);
  align-items: center;
  min-height: clamp(26rem, 62vh, 38rem);
  padding: var(--panel-padding);
  border: 1px solid rgba(201, 166, 107, 0.22);
  background:
    linear-gradient(rgba(5, 5, 6, 0.82), rgba(7, 6, 6, 0.94)),
    radial-gradient(circle at 28% 18%, rgba(214, 59, 47, 0.16), transparent 16rem);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72), 0 18px 40px rgba(0, 0, 0, 0.3);
}

.encounter-intro-panel > div:first-child {
  display: grid;
  gap: var(--space-sm);
}

.encounter-intro-panel span,
.battle-round-strip span,
.combat-status-panel h3,
.combat-meter span,
.fear-state-card span {
  color: var(--red-bright);
  font-size: var(--font-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.encounter-intro-panel h2 {
  max-width: 42rem;
  color: #f2ddbf;
  font-size: clamp(2rem, 5vw, 4.2rem);
}

.encounter-intro-panel p,
.encounter-intro-panel blockquote {
  max-width: 42rem;
  margin: 0;
  color: #d8c5a9;
  line-height: var(--compact-line-height);
}

.encounter-intro-panel blockquote {
  padding: var(--space-sm);
  border-left: 3px solid rgba(214, 59, 47, 0.7);
  color: #e8c4a8;
  font-style: italic;
  background: rgba(0, 0, 0, 0.28);
}

.encounter-intro-panel img {
  width: 100%;
  max-height: 24rem;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(201, 166, 107, 0.2);
  filter: saturate(0.72) contrast(1.08);
}

.encounter-selector {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.encounter-selector button {
  display: grid;
  gap: 0.2rem;
  min-height: 4rem;
  border: 1px solid rgba(201, 166, 107, 0.18);
  padding: var(--card-padding);
  color: #d8c5a9;
  background: rgba(0, 0, 0, 0.34);
  text-align: left;
  cursor: pointer;
}

.encounter-selector button.active {
  border-color: rgba(214, 59, 47, 0.7);
  background: rgba(117, 13, 18, 0.34);
}

.battle-survival-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 0.68fr) minmax(0, 1.55fr) minmax(16rem, 0.82fr);
  gap: var(--space-md);
  align-items: start;
}

.combat-status-panel,
.combat-encounter-panel,
.battle-log-panel {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.combat-status-panel,
.battle-log-panel {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
  max-height: calc(100svh - var(--nav-height) - var(--space-xl));
  overflow: auto;
  padding: var(--card-padding);
  border: 1px solid rgba(201, 166, 107, 0.2);
  background:
    linear-gradient(rgba(5, 5, 6, 0.74), rgba(9, 7, 7, 0.88)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.025) 0 1px, transparent 1px 8px);
}

.combat-meter {
  display: grid;
  gap: var(--space-xs);
}

.combat-meter div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}

.combat-meter strong {
  color: #f2ddbf;
}

.combat-meter i {
  display: block;
  height: 0.55rem;
  overflow: hidden;
  border: 1px solid rgba(201, 166, 107, 0.22);
  background: rgba(0, 0, 0, 0.42);
}

.combat-meter b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7fa35f, #d2a65e);
}

.combat-meter.danger b {
  background: linear-gradient(90deg, #d2a65e, #b91f28);
}

.fear-state-card,
.status-cloud,
.enemy-stage-card,
.battle-action-panel,
.battle-result-panel,
.battle-log-entry {
  border: 1px solid rgba(201, 166, 107, 0.18);
  padding: var(--card-padding);
  background: rgba(0, 0, 0, 0.28);
}

.fear-state-card strong {
  display: block;
  color: #f2ddbf;
  font-size: var(--font-lg);
}

.fear-state-card p,
.status-cloud p,
.battle-log-panel p,
.enemy-stage-card p,
.battle-result-panel p {
  margin: 0;
  color: #cdbb9f;
  line-height: var(--compact-line-height);
}

.fear-state-card.panicked,
.fear-state-card.broken {
  border-color: rgba(214, 59, 47, 0.58);
  background: rgba(91, 8, 13, 0.26);
}

.combat-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}

.combat-stat-grid span,
.status-cloud span,
.battle-result-panel span,
.consumable-list span,
.world-state-mini-card span {
  display: grid;
  gap: 0.1rem;
  border: 1px solid rgba(201, 166, 107, 0.14);
  padding: 0.4rem 0.48rem;
  color: #cdbb9f;
  background: rgba(0, 0, 0, 0.24);
  font-size: var(--font-xs);
}

.combat-stat-grid strong {
  color: #f2ddbf;
  font-size: var(--font-lg);
}

.status-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.status-cloud h3 {
  flex-basis: 100%;
  margin: 0;
}

.enemy-stage-card {
  display: grid;
  grid-template-columns: minmax(13rem, 0.55fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: stretch;
  min-height: 18rem;
  background:
    linear-gradient(rgba(5, 5, 6, 0.72), rgba(5, 5, 6, 0.9)),
    radial-gradient(circle at 22% 12%, rgba(214, 59, 47, 0.18), transparent 16rem);
}

.enemy-art-frame {
  overflow: hidden;
  border: 1px solid rgba(201, 166, 107, 0.18);
  background: rgba(0, 0, 0, 0.36);
}

.enemy-art-frame img {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.72) contrast(1.08);
}

.enemy-stage-card h2,
.battle-log-panel h2,
.battle-result-panel h2 {
  color: #f2ddbf;
  font-size: var(--font-xl);
}

.enemy-stage-card > div:last-child {
  display: grid;
  gap: var(--space-sm);
  align-content: center;
}

.battle-round-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: space-between;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(201, 166, 107, 0.15);
}

.survival-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.survival-action-grid button {
  display: grid;
  gap: 0.2rem;
  min-height: 5.8rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  padding: var(--card-padding);
  color: #d8c5a9;
  background:
    linear-gradient(rgba(5, 5, 6, 0.72), rgba(12, 8, 8, 0.86)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.02) 0 1px, transparent 1px 8px);
  text-align: left;
  cursor: pointer;
}

.survival-action-grid button:hover {
  border-color: rgba(214, 59, 47, 0.62);
  box-shadow: inset 0 0 0 1px rgba(214, 59, 47, 0.18);
}

.survival-action-grid button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.survival-action-grid strong {
  color: #f2ddbf;
  font-size: var(--font-lg);
}

.survival-action-grid span,
.survival-action-grid em {
  color: #cdbb9f;
  font-size: var(--font-xs);
}

.survival-action-grid em {
  color: #e1a980;
  font-style: normal;
  text-transform: uppercase;
}

.battle-result-panel {
  display: grid;
  gap: var(--space-sm);
  border-color: rgba(214, 59, 47, 0.38);
}

.battle-result-panel.victory {
  border-color: rgba(201, 166, 107, 0.46);
}

.battle-log-list {
  display: grid;
  gap: var(--space-xs);
}

.battle-log-entry {
  display: grid;
  gap: 0.18rem;
}

.battle-log-entry span {
  color: #a8906c;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.battle-log-entry p {
  margin: 0;
  color: #d8c5a9;
  line-height: var(--compact-line-height);
}

.battle-log-entry.enemy,
.battle-log-entry.harm,
.battle-log-entry.wound {
  border-color: rgba(214, 59, 47, 0.28);
}

.world-state-mini-card,
.consumable-list {
  display: grid;
  gap: var(--space-xs);
}

.hunter-profile-page {
  display: grid;
  gap: var(--space-md);
}

.hunter-banner-panel {
  display: grid;
  grid-template-columns: minmax(8rem, 0.28fr) minmax(0, 1fr) minmax(14rem, 0.42fr);
  gap: var(--space-md);
  align-items: center;
  padding: var(--panel-padding);
  border: 1px solid rgba(201, 166, 107, 0.24);
  background:
    linear-gradient(135deg, rgba(5, 5, 6, 0.82), rgba(14, 8, 8, 0.9)),
    radial-gradient(circle at 20% 15%, rgba(214, 59, 47, 0.16), transparent 16rem),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.025) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72), 0 18px 40px rgba(0, 0, 0, 0.28);
}

.hunter-portrait-frame {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(201, 166, 107, 0.28);
  background: rgba(0, 0, 0, 0.42);
}

.hunter-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.72) contrast(1.08);
}

.hunter-banner-copy {
  display: grid;
  gap: var(--space-xs);
}

.hunter-banner-copy > span,
.profile-section-panel h2,
.profile-side-panel h2 {
  color: var(--red-bright);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hunter-banner-copy h2 {
  margin: 0;
  color: #f2ddbf;
  font-size: clamp(2rem, 4.2vw, 3.8rem);
}

.hunter-banner-copy p,
.lineage-panel p,
.muted-note {
  margin: 0;
  color: #cdbb9f;
  line-height: var(--compact-line-height);
}

.profile-xp-bar {
  display: grid;
  gap: var(--space-xs);
}

.profile-xp-bar i {
  display: block;
  height: 0.55rem;
  overflow: hidden;
  border: 1px solid rgba(201, 166, 107, 0.22);
  background: rgba(0, 0, 0, 0.42);
}

.profile-xp-bar b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(214, 59, 47, 0.82), rgba(201, 166, 107, 0.75));
}

.profile-xp-bar strong {
  color: #e8c4a8;
  font-size: var(--font-sm);
}

.hunter-condition-stack,
.profile-ledger-side,
.profile-ledger-main,
.reputation-list,
.profile-status-cloud {
  display: grid;
  gap: var(--space-sm);
}

.profile-info-pill {
  display: grid;
  gap: 0.12rem;
  padding: 0.48rem 0.55rem;
  border: 1px solid rgba(201, 166, 107, 0.16);
  background: rgba(0, 0, 0, 0.28);
}

.profile-info-pill span {
  color: var(--muted);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.profile-info-pill strong {
  color: #f2ddbf;
  font-size: var(--font-sm);
}

.profile-ledger-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border: 1px solid rgba(201, 166, 107, 0.16);
  background: rgba(0, 0, 0, 0.24);
}

.profile-ledger-tabs button {
  min-height: 2.2rem;
  border: 1px solid rgba(201, 166, 107, 0.16);
  padding: 0.42rem 0.7rem;
  color: #d8c5a9;
  background: rgba(0, 0, 0, 0.22);
  text-transform: uppercase;
  cursor: pointer;
}

.profile-ledger-tabs button.active {
  border-color: rgba(214, 59, 47, 0.68);
  color: #fff0d2;
  background: rgba(117, 13, 18, 0.45);
}

.profile-ledger-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(16rem, 0.55fr);
  gap: var(--space-md);
  align-items: start;
}

.profile-section-panel,
.profile-side-panel {
  border: 1px solid rgba(201, 166, 107, 0.18);
  padding: var(--card-padding);
  background:
    linear-gradient(rgba(5, 5, 6, 0.68), rgba(9, 7, 7, 0.84)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.02) 0 1px, transparent 1px 8px);
}

.profile-side-panel {
  display: grid;
  gap: var(--space-sm);
}

.profile-section-panel h2,
.profile-side-panel h2 {
  margin: 0;
  font-size: var(--font-base);
}

.attribute-grid,
.title-ledger-grid,
.discovery-summary-grid,
.survival-record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-sm);
}

.attribute-grid article,
.title-ledger-grid article,
.achievement-ledger-list article,
.profile-timeline article,
.reputation-list article {
  display: grid;
  gap: 0.22rem;
  padding: var(--card-padding);
  border: 1px solid rgba(201, 166, 107, 0.15);
  background: rgba(0, 0, 0, 0.26);
}

.attribute-grid span,
.title-ledger-grid span,
.achievement-ledger-list span,
.profile-timeline span,
.reputation-list span {
  color: var(--muted);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.attribute-grid strong {
  color: #f2ddbf;
  font-size: var(--font-xl);
}

.attribute-grid p,
.attribute-grid em,
.title-ledger-grid p,
.title-ledger-grid em,
.achievement-ledger-list p,
.achievement-ledger-list em,
.profile-timeline p,
.profile-timeline em,
.reputation-list p {
  margin: 0;
  color: #cdbb9f;
  font-size: var(--font-sm);
  line-height: var(--compact-line-height);
}

.attribute-grid em,
.title-ledger-grid em,
.achievement-ledger-list em,
.profile-timeline em {
  color: #e1a980;
  font-style: normal;
}

.profile-relic-grid,
.achievement-ledger-list,
.profile-timeline {
  display: grid;
  gap: var(--space-sm);
}

.profile-relic-grid article {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.28fr) minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--card-padding);
  border: 1px solid rgba(201, 166, 107, 0.18);
  background: rgba(0, 0, 0, 0.3);
}

.profile-relic-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(201, 166, 107, 0.16);
  filter: saturate(0.76) contrast(1.06);
}

.profile-relic-grid div {
  display: grid;
  gap: 0.16rem;
}

.profile-relic-grid span,
.profile-relic-grid em,
.profile-relic-grid small {
  color: #cdbb9f;
  font-size: var(--font-xs);
}

.profile-relic-grid strong,
.title-ledger-grid strong,
.achievement-ledger-list strong,
.profile-timeline strong,
.reputation-list strong {
  color: #f2ddbf;
  font-size: var(--font-lg);
}

.title-ledger-grid article.equipped {
  border-color: rgba(214, 59, 47, 0.58);
  background: rgba(91, 8, 13, 0.24);
}

.title-ledger-grid article.locked {
  opacity: 0.62;
  border-style: dashed;
}

.reputation-list i {
  display: block;
  height: 0.45rem;
  overflow: hidden;
  border: 1px solid rgba(201, 166, 107, 0.18);
  background: rgba(0, 0, 0, 0.34);
}

.reputation-list b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(91, 8, 13, 0.84), rgba(201, 166, 107, 0.7));
}

.profile-status-cloud {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.profile-status-cloud span {
  padding: 0.42rem 0.5rem;
  border: 1px solid rgba(201, 166, 107, 0.14);
  color: #d8c5a9;
  background: rgba(0, 0, 0, 0.26);
  font-size: var(--font-xs);
}

@keyframes lanternPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.045);
    opacity: 1;
  }
}

.state-message {
  margin: 0;
  padding: var(--card-padding);
  border: 1px solid rgba(201, 166, 107, 0.18);
  color: #d8c5a9;
  background: rgba(0, 0, 0, 0.26);
}

.error-state {
  border-color: rgba(214, 59, 47, 0.42);
  color: #ffb7ad;
  background: rgba(91, 8, 13, 0.24);
}

.empty-state {
  color: #b9a17a;
  font-style: italic;
}

.arrival-page-card,
.sealed-page-card {
  display: grid;
  gap: var(--space-md);
}

.arrival-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}

.arrival-action-grid button {
  display: grid;
  gap: 0.25rem;
  align-content: center;
  min-height: 5.25rem;
  text-align: left;
}

.arrival-action-grid span,
.sealed-page-card p {
  color: #cdbb9f;
}

.sealed-page-card {
  min-height: clamp(18rem, 48vh, 27rem);
  place-content: center;
  text-align: center;
  background:
    linear-gradient(rgba(8, 7, 6, 0.9), rgba(8, 7, 6, 0.95)),
    radial-gradient(circle at 50% 20%, rgba(214, 106, 26, 0.13), transparent 16rem),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.035) 0 1px, transparent 1px 8px);
}

.sealed-kicker {
  color: var(--red-bright);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sealed-page-card h1 {
  color: #f2ddbf;
}

.sealed-lead {
  color: var(--gold) !important;
  font-size: var(--font-lg);
}

.sealed-action-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (max-width: 760px) {
  .world-clock-panel,
  .world-clock-panel.compact {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .world-clock-effects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .world-clock-effects span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .world-clock-countdowns {
    grid-template-columns: 1fr;
  }

  .world-clock-sync {
    min-height: 2.8rem;
  }

  .world-state-gameplay-card,
  .world-state-modifier-grid {
    grid-template-columns: 1fr;
  }
}

.react-page-card {
  width: min(72rem, 100%);
  margin: 1rem auto;
}

.profile-grid,
.choice-grid,
.tab-row {
  display: grid;
  gap: 0.75rem;
}

.profile-grid {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.choice-grid button,
.info-cardlet,
.ranking-row {
  border: 1px solid rgba(169, 130, 86, 0.24);
  background: rgba(0, 0, 0, 0.34);
  color: #dcc8ae;
  padding: 0.8rem;
}

.choice-grid button {
  text-align: left;
  cursor: pointer;
}

.choice-grid button.selected {
  border-color: rgba(207, 28, 35, 0.72);
  background: rgba(84, 11, 14, 0.38);
}

.info-cardlet span,
.ranking-row span {
  display: block;
  color: #b8a898;
}

.info-cardlet strong,
.ranking-row strong {
  color: #f2d8b2;
}

.ranking-row {
  display: grid;
  grid-template-columns: 5rem 1fr auto auto;
  gap: 0.8rem;
  align-items: center;
  margin-top: 0.5rem;
}

.tab-row {
  grid-template-columns: repeat(4, max-content);
  margin: 1rem 0;
}

.success-message {
  color: #8be66a;
}

.check-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 14, 20, 0.18), transparent 34rem),
    radial-gradient(circle at 80% 15%, rgba(138, 44, 111, 0.12), transparent 26rem),
    linear-gradient(120deg, var(--void-black) 0%, var(--deep-abyss) 48%, #050506 100%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
}

h1,
h2,
h3,
.brand,
.nav-item,
.eyebrow,
button {
  font-family: var(--font-heading);
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

.is-hidden {
  display: none !important;
}

.auth-page {
  --auth-red: #b6161e;
  --auth-red-deep: #4c070b;
  --auth-gold: #a98256;
  --auth-gold-dim: #5a3f26;
  min-height: 100vh;
  padding: 1.15rem min(2vw, 2rem) 1.8rem;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.98), rgba(5, 4, 4, 0.42) 42%, rgba(0, 0, 0, 0.98)),
    radial-gradient(circle at 72% 12%, rgba(130, 14, 21, 0.42), transparent 9rem),
    radial-gradient(circle at 22% 20%, rgba(72, 85, 78, 0.22), transparent 14rem),
    linear-gradient(180deg, #030303 0 3rem, #12100f 26rem, #050505 100%);
  overflow-x: hidden;
  position: relative;
}

.auth-page {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(4, 8, 12, 0.12) 48%, rgba(0, 0, 0, 0.84)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.48) 55%, rgba(0, 0, 0, 0.94) 100%),
    url("assets/ui/onboarding/hero-landing.png") center top / cover no-repeat,
    #030607;
}

.auth-page::before,
.auth-page::after {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  width: min(16vw, 13rem);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent);
  opacity: 0.45;
}

.auth-page::after {
  inset: 0 0 0 auto;
  transform: scaleX(-1);
}

.auth-header,
.auth-main,
.auth-stat-strip,
.auth-footer {
  width: min(100%, 92rem);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.auth-header {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 15rem;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.3rem;
  border-bottom: 1px solid rgba(169, 130, 86, 0.18);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
}

.auth-brand > span:last-child {
  display: block;
  width: 9.2rem;
  height: 3rem;
  background: var(--asset-title-horizontal) center / contain no-repeat;
}

.auth-brand > span:last-child strong,
.auth-brand > span:last-child em {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.auth-brand-mark,
.footer-seal {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid #651117;
  color: transparent;
  font-size: 0;
  background:
    var(--asset-symbol) center / 88% auto no-repeat,
    radial-gradient(circle, rgba(151, 18, 25, 0.28), transparent 60%),
    #080505;
  box-shadow: inset 0 0 0 1px rgba(169, 130, 86, 0.22), 0 0 22px rgba(142, 8, 15, 0.35);
}

.auth-brand strong,
.auth-brand em {
  display: block;
  font-style: normal;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0;
}

.auth-brand em {
  color: var(--auth-red);
}

.auth-nav {
  display: flex;
  justify-content: center;
  gap: clamp(0.7rem, 1.55vw, 1.55rem);
  min-width: 0;
}

.auth-nav a {
  color: #c7beb0;
  font-size: 0.78rem;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.auth-nav a.active,
.auth-nav a:hover {
  color: #f14a4f;
}

.auth-frame-btn,
.auth-submit,
.provider {
  position: relative;
  min-height: 2.8rem;
  border: 1px solid #712127;
  color: #f2e7d8;
  background:
    linear-gradient(180deg, rgba(151, 29, 34, 0.92), rgba(68, 9, 12, 0.96)),
    #4b0b0d;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(185, 108, 62, 0.28), 0 0 18px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

.auth-frame-btn,
.auth-submit {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.auth-frame-btn::before,
.auth-submit::before,
.primary-btn::before {
  content: "";
  position: absolute;
  inset: 0.46rem 0.9rem;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(154, 31, 36, 0.9), rgba(61, 9, 12, 0.94)),
    #4b0b0d;
  box-shadow: inset 0 0 0 1px rgba(185, 108, 62, 0.18), 0 0 14px rgba(141, 21, 27, 0.28);
}

.auth-frame-btn::after,
.auth-submit::after,
.primary-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--asset-button-frame) center / 100% 100% no-repeat;
  opacity: 0.78;
}

.auth-frame-btn.wide {
  width: 100%;
}

.auth-main {
  display: grid;
  grid-template-columns: minmax(17rem, 1fr) minmax(25rem, 1.08fr) minmax(16rem, 0.86fr);
  gap: 1.2rem;
  padding-top: 2.5rem;
}

.landing-main {
  grid-template-columns: minmax(34rem, 1fr) minmax(17rem, 23rem);
  grid-template-areas:
    "hero updates"
    "features features"
    "lower lower";
  align-items: end;
  min-height: calc(100vh - 14rem);
  padding-top: clamp(3rem, 9vw, 9rem);
}

.auth-panel {
  border: 1px solid rgba(169, 130, 86, 0.42);
  background:
    linear-gradient(rgba(9, 9, 8, 0.88), rgba(10, 8, 7, 0.96)),
    repeating-linear-gradient(135deg, rgba(205, 165, 106, 0.04) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), 0 20px 46px rgba(0, 0, 0, 0.78);
  position: relative;
}

.auth-panel::before {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border: 1px solid rgba(93, 61, 35, 0.42);
  pointer-events: none;
}

.auth-lore-panel,
.auth-login-panel,
.auth-side-stack .auth-panel {
  padding: 1.45rem;
}

.landing-main .auth-lore-panel {
  grid-area: hero;
  max-width: 43rem;
  align-self: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 1rem;
}

.landing-main .auth-lore-panel::before {
  display: none;
}

.landing-updates {
  grid-area: updates;
  align-self: start;
  padding: 1.15rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.88)),
    rgba(7, 7, 7, 0.84);
}

.ribbon {
  width: 82%;
  margin-inline: auto;
  padding: 0.7rem 1rem;
  color: #efe1cd;
  text-align: center;
  font-size: 1.05rem;
  font-style: italic;
  background: linear-gradient(90deg, rgba(64, 10, 13, 0.92), rgba(113, 29, 28, 0.88), rgba(64, 10, 13, 0.92));
  border: 1px solid rgba(169, 130, 86, 0.34);
}

.character-art {
  min-height: 30rem;
  margin: 1rem 0;
  border: 1px solid rgba(169, 130, 86, 0.36);
  background:
    radial-gradient(circle at 50% 18%, #f2d1c4 0 0.48rem, transparent 0.52rem),
    radial-gradient(circle at 51% 22%, #191111 0 2.1rem, transparent 2.2rem),
    linear-gradient(150deg, transparent 0 37%, rgba(148, 14, 28, 0.78) 38% 58%, transparent 59%),
    radial-gradient(circle at 50% 42%, rgba(130, 15, 27, 0.8), transparent 9rem),
    linear-gradient(180deg, #141313, #070606);
}

.auth-lore-panel .character-art {
  min-height: 21rem;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.72)),
    url("assets/ui/mockups/onboarding/landing-page.png") center / cover no-repeat;
}

.auth-copy h2 {
  color: #f0e3d0;
  font-size: clamp(2rem, 3.9vw, 4.7rem);
  line-height: 1.02;
  text-transform: none;
}

.landing-main .auth-copy h2 {
  margin: 0 0 1.3rem;
  color: #eee6d8;
  font-size: clamp(2.9rem, 5vw, 5.4rem);
  line-height: 1.08;
  text-transform: none;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.92);
}

.landing-main .auth-copy h2::after {
  content: "";
  display: block;
  width: min(100%, 27rem);
  height: 1px;
  margin-top: 1rem;
  background: linear-gradient(90deg, rgba(139, 14, 20, 0.9), transparent);
}

.landing-main .auth-copy p {
  max-width: 32rem;
  color: #d5c6b2;
  font-size: 1.06rem;
  line-height: 1.55;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9);
}

.landing-main .auth-copy h2 span,
.landing-main .auth-copy h2 em {
  color: var(--blood-red);
}

.auth-copy h2::first-line {
  color: #f0e3d0;
}

.auth-login-panel {
  background:
    linear-gradient(rgba(7, 7, 7, 0.78), rgba(5, 5, 5, 0.96)),
    url("assets/ui/mockups/onboarding/login-page.png") center / cover no-repeat;
}

.auth-copy h2,
.pitch-panel h2,
.landing-updates h2,
.landing-feature-strip strong,
.landing-old-ash h2,
.feature-list strong,
.info-card h2,
.devices-card h2,
.create-legacy h2,
.login-card h2,
.auth-footer h2 {
  color: #f33b41;
  font-size: 1rem;
  text-transform: uppercase;
}

.auth-copy p,
.pitch-panel p,
.landing-updates p,
.landing-feature-strip small,
.landing-old-ash p,
.feature-list small,
.info-card p,
.devices-card p,
.create-legacy p,
.auth-footer p,
.auth-footer blockquote {
  color: #b9ad9e;
  line-height: 1.45;
}

.pitch-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(169, 130, 86, 0.22);
  background: rgba(0, 0, 0, 0.28);
}

.landing-cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.45rem;
}

.landing-cta-row .auth-frame-btn {
  min-width: 12rem;
  padding-inline: 1.3rem;
}

.landing-cta-row .ghost {
  background: linear-gradient(180deg, rgba(19, 17, 15, 0.9), rgba(3, 3, 3, 0.96)) !important;
  border-color: rgba(169, 130, 86, 0.42) !important;
}

.landing-updates h2 {
  color: #efdfc8;
  font-size: 1.15rem;
  line-height: 1.25;
  text-align: center;
}

.landing-updates h2::first-line {
  color: #d7b98e;
}

.landing-updates em {
  color: #e23236;
  font-style: normal;
}

.landing-feature-strip {
  grid-area: features;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(169, 130, 86, 0.25);
  background: rgba(169, 130, 86, 0.16);
}

.landing-feature-strip article {
  display: grid;
  grid-template-columns: 3.8rem 1fr;
  gap: 0.8rem;
  align-items: center;
  min-height: 5.9rem;
  padding: 0.9rem;
  background: rgba(4, 5, 6, 0.82);
}

.landing-feature-strip span {
  display: grid;
  place-items: center;
  width: 3.2rem;
  aspect-ratio: 1;
  border: 1px solid rgba(169, 130, 86, 0.35);
  color: #d7a15f;
  font-size: 0.62rem;
  background: radial-gradient(circle, rgba(139, 14, 20, 0.36), rgba(0, 0, 0, 0.7));
}

.landing-feature-strip strong,
.landing-feature-strip small {
  display: block;
}

.landing-feature-strip strong {
  color: #dfc39b;
}

.landing-lower-grid {
  grid-area: lower;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.landing-lower-grid .pitch-panel {
  display: grid;
  grid-template-columns: minmax(18rem, 0.95fr) minmax(18rem, 1fr);
  gap: 1rem;
  margin-top: 0;
}

.landing-trailer-art {
  min-height: 12rem;
  border: 1px solid rgba(169, 130, 86, 0.3);
  background:
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.36)),
    url("assets/ui/onboarding/hero-landing.png") left center / cover no-repeat;
}

.landing-old-ash {
  padding: 1.2rem 1.4rem;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(8, 8, 8, 0.72)),
    rgba(0, 0, 0, 0.85);
}

.landing-old-ash blockquote {
  margin: 0.8rem 0;
  color: #eee1cd;
  font-size: clamp(1.45rem, 2vw, 2.1rem);
  font-style: italic;
  line-height: 1.3;
}

.pitch-panel p {
  margin-bottom: 0.65rem;
}

.pitch-panel p:last-child {
  margin-bottom: 0;
}

.pitch-panel strong {
  display: block;
  color: #dfc59f;
  text-transform: uppercase;
}

.login-card.is-highlighted {
  border-color: rgba(220, 42, 49, 0.72);
  box-shadow: 0 0 28px rgba(156, 22, 28, 0.32), inset 0 0 0 1px rgba(220, 42, 49, 0.24);
}

.feature-list {
  display: grid;
  gap: 0.8rem;
  padding: 0;
  margin: 1.2rem 0;
  list-style: none;
}

.feature-list li,
.info-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.65rem;
  align-items: start;
}

.feature-list span,
.info-row span,
.device-row span {
  display: grid;
  place-items: center;
  min-height: 2rem;
  color: var(--auth-gold);
  border: 1px solid rgba(169, 130, 86, 0.28);
  background: rgba(0, 0, 0, 0.38);
  font-size: 0.64rem;
}

.feature-list strong,
.feature-list small,
.info-row strong {
  display: block;
}

.auth-login-panel {
  padding-top: 6rem;
}

.panel-jewel {
  position: absolute;
  top: -1.1rem;
  left: 50%;
  width: 8rem;
  height: 7rem;
  transform: translateX(-50%);
  background:
    var(--asset-symbol) center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(189, 24, 32, 0.45));
}

.welcome-kicker {
  margin: 0;
  text-align: center;
  color: #ddd0c0;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

.auth-login-panel h1 {
  margin: 0 0 1.8rem;
  min-height: clamp(8rem, 16vw, 12.5rem);
  background: var(--asset-title-stacked) center / contain no-repeat;
  color: transparent;
  font-size: 0;
}

.auth-login-panel h1 span {
  display: none;
}

.login-card {
  padding: 1.4rem;
  border: 1px solid rgba(169, 130, 86, 0.3);
  background: rgba(0, 0, 0, 0.36);
}

.login-card label {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.8rem;
}

.login-card label span {
  color: #8f806f;
  font-size: 0.72rem;
}

.login-card input {
  width: 100%;
  min-height: 3rem;
  border: 1px solid rgba(169, 130, 86, 0.3);
  color: var(--ink);
  background: #080707;
  padding: 0 0.9rem;
}

.login-options {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  color: #d6b888;
  font-size: 0.78rem;
}

.login-options .remember {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.login-options input {
  width: auto;
  min-height: auto;
}

.login-options a {
  color: #d6b888;
  text-decoration: none;
}

.auth-submit {
  width: 100%;
  min-height: 3.25rem;
  font-size: 1.05rem;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.25rem 0;
  color: #928677;
  font-size: 0.76rem;
  text-align: center;
  text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(169, 130, 86, 0.24);
}

.provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin-top: 0.55rem;
  border-color: rgba(169, 130, 86, 0.3);
  background: rgba(10, 9, 8, 0.9);
  text-transform: none;
}

.provider span {
  color: #f34a50;
  font-weight: bold;
}

.create-legacy {
  display: grid;
  grid-template-columns: 1fr 10rem;
  gap: 1rem;
  margin-top: 1.2rem;
  padding: 1.2rem;
  border: 1px solid rgba(169, 130, 86, 0.3);
  background: rgba(0, 0, 0, 0.34);
}

.skull-still-life {
  min-height: 9rem;
  background:
    radial-gradient(circle at 52% 42%, #c9b9a0 0 1.9rem, transparent 2rem),
    radial-gradient(circle at 39% 39%, #080606 0 0.28rem, transparent 0.32rem),
    radial-gradient(circle at 63% 39%, #080606 0 0.28rem, transparent 0.32rem),
    radial-gradient(circle at 50% 58%, #080606 0 0.45rem, transparent 0.5rem),
    radial-gradient(circle at 50% 65%, rgba(134, 13, 20, 0.72), transparent 4rem),
    linear-gradient(180deg, #15110f, #060505);
}

.auth-side-stack {
  display: grid;
  gap: 1.2rem;
}

.info-row {
  margin-top: 1rem;
}

.status-line span {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #4ac64c;
  box-shadow: 0 0 10px rgba(74, 198, 76, 0.7);
}

.device-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  margin: 1rem 0;
}

.auth-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 1.2rem;
  border: 1px solid rgba(169, 130, 86, 0.34);
  background: rgba(0, 0, 0, 0.74);
}

.auth-stat-strip div {
  padding: 1.1rem;
  text-align: center;
  background: rgba(13, 11, 10, 0.82);
}

.auth-stat-strip strong,
.auth-stat-strip span {
  display: block;
}

.auth-stat-strip strong {
  color: #d9232c;
  font-size: 1.4rem;
}

.auth-stat-strip span {
  color: #d7c9b9;
  font-size: 0.8rem;
}

.auth-footer {
  display: grid;
  grid-template-columns: 1.2fr 1fr 6rem 1fr 1.2fr;
  gap: 1.2rem;
  align-items: center;
  margin-top: 1.2rem;
  padding: 1.2rem;
  border: 1px solid rgba(169, 130, 86, 0.28);
  background: rgba(0, 0, 0, 0.78);
}

.footer-seal {
  width: 5rem;
  height: 5rem;
  margin: auto;
}

.auth-footer blockquote {
  margin: 0;
  color: #e0d2bf;
  font-size: 1rem;
  font-style: italic;
  text-align: center;
}

.auth-lore-panel .auth-copy h2 {
  color: #f0e3d0;
  font-size: clamp(2rem, 3.9vw, 4.7rem);
  line-height: 1.02;
  text-transform: none;
}

.auth-lore-panel .auth-copy h2::first-line {
  color: #f0e3d0;
}

.auth-side-stack blockquote {
  margin: 1rem 0 0;
  color: #ead8c1;
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.35;
}

.legal-links {
  display: grid;
  gap: 0.3rem;
}

.legal-strip {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0 0;
  font-size: 0.8rem;
}

.game-legal-strip {
  padding-bottom: 1rem;
}

.legal-links a,
.policy-check a {
  color: var(--auth-gold);
  text-decoration: none;
}

.legal-links a:hover,
.policy-check a:hover {
  color: var(--auth-red);
}

.signup-error {
  min-height: 1.2rem;
  color: var(--auth-red);
  font-size: 0.82rem;
}

.legal-page {
  min-height: 100vh;
  padding: 1rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.86)),
    radial-gradient(circle at 50% 8%, rgba(146, 17, 24, 0.22), transparent 18rem),
    #050505;
}

.legal-shell {
  width: min(100%, 72rem);
  margin: 0 auto;
}

.legal-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border-bottom: 1px solid rgba(169, 130, 86, 0.22);
  padding-bottom: 1rem;
}

.legal-card {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  border: 1px solid rgba(169, 130, 86, 0.36);
  background:
    linear-gradient(rgba(12, 11, 10, 0.88), rgba(8, 7, 6, 0.96)),
    repeating-linear-gradient(135deg, rgba(205, 165, 106, 0.035) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px #030303, 0 18px 42px rgba(0, 0, 0, 0.72);
  padding: clamp(1rem, 3vw, 2rem);
}

.legal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--asset-modal-frame) center / 100% 100% no-repeat;
  opacity: 0.2;
}

.legal-card > * {
  position: relative;
}

.legal-card h1 {
  color: #e2c79d;
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-transform: uppercase;
}

.legal-card h2 {
  color: #f33b41;
  margin-top: 1.5rem;
  text-transform: uppercase;
}

.legal-card p,
.legal-card li {
  color: #c5b7a6;
  line-height: 1.55;
}

.legal-card a {
  color: var(--gold);
}

.signup-board {
  min-height: 100vh;
  padding: 0.5rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.88)),
    radial-gradient(circle at 18% 30%, rgba(126, 14, 20, 0.28), transparent 17rem),
    radial-gradient(circle at 78% 24%, rgba(133, 18, 23, 0.24), transparent 18rem),
    url("assets/ui/mockups/onboarding/create-hunter-flow.png") center / cover no-repeat,
    #070606;
}

.signup-header,
.signup-shell {
  width: min(100%, 78rem);
  margin-inline: auto;
}

.signup-header {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: 3.6rem;
  border-bottom: 1px solid rgba(169, 130, 86, 0.2);
}

.signup-shell {
  margin-top: .5rem;
}

.signup-stage {
  display: none;
  min-height: 28rem;
  border: 1px solid rgba(169, 130, 86, 0.36);
  background:
    linear-gradient(rgba(8, 8, 7, 0.9), rgba(9, 8, 7, 0.96)),
    repeating-linear-gradient(135deg, rgba(205, 165, 106, 0.04) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px #030303, 0 18px 42px rgba(0, 0, 0, 0.75);
  padding: 1rem;
}

.signup-stage.active {
  display: grid;
}

.signup-stage[data-signup-step="1"].active {
  grid-template-columns: minmax(16rem, 0.85fr) minmax(22rem, 1fr);
  gap: 1rem;
}

.signup-title {
  text-align: center;
}

.signup-title.full {
  grid-column: 1 / -1;
}

.signup-title h1 {
  margin-bottom: 0.15rem;
  color: #f2eadc;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  text-transform: uppercase;
}

.signup-title p,
.signup-title span {
  color: #afa292;
}

.signup-title strong {
  color: #e03137;
  text-transform: uppercase;
}

.signup-card {
  align-self: center;
  display: grid;
  gap: 0.75rem;
}

.signup-card label {
  display: grid;
  gap: 0.35rem;
  color: #c5b7a6;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.signup-card input,
.choice-row button {
  min-height: 2.8rem;
  border: 1px solid rgba(169, 130, 86, 0.24);
  color: var(--ink);
  background: rgba(0, 0, 0, 0.5);
  padding: 0 0.8rem;
}

.policy-check {
  display: flex !important;
  align-items: center;
  grid-template-columns: auto 1fr;
  text-transform: none !important;
}

.policy-check input {
  min-height: auto;
  width: auto;
}

.ritual-checklist {
  display: grid;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
  padding: 0;
  color: #c6b8a5;
  list-style: none;
}

.ritual-checklist li::before {
  content: "◇";
  margin-right: 0.45rem;
  color: #d4a35c;
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.signup-art {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 24rem;
  padding: 1rem;
  border: 1px solid rgba(169, 130, 86, 0.26);
  background:
    radial-gradient(circle at 50% 23%, rgba(166, 18, 25, 0.78) 0 4.5rem, transparent 4.7rem),
    radial-gradient(circle at 50% 23%, rgba(0, 0, 0, 0.9) 0 7rem, transparent 7.2rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.92)),
    #11100e;
}

.account-art::before,
.skull-art::before {
  content: "";
  display: block;
  width: 11rem;
  height: 17rem;
  margin: 0 auto auto;
  background:
    radial-gradient(circle at 50% 16%, #141111 0 2rem, transparent 2.1rem),
    linear-gradient(150deg, transparent 0 28%, #171111 29% 72%, transparent 73%),
    linear-gradient(180deg, #121111, #080707);
}

.skull-art::before {
  background:
    radial-gradient(circle at 50% 28%, #aa1117 0 0.45rem, transparent 0.5rem),
    radial-gradient(circle at 40% 34%, #a91117 0 0.4rem, transparent 0.46rem),
    radial-gradient(circle at 60% 34%, #a91117 0 0.4rem, transparent 0.46rem),
    radial-gradient(circle at 50% 36%, #17110f 0 5rem, transparent 5.1rem),
    linear-gradient(180deg, #0e0d0c, #050505);
}

.signup-art p {
  max-width: 21rem;
  color: #d5c8b8;
}

.choice-grid {
  display: grid;
  gap: 0.8rem;
}

.origin-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-card,
.list-choice,
.avatar-grid button,
.banner-grid button,
.swatch-row button {
  border: 1px solid rgba(169, 130, 86, 0.24);
  color: var(--ink);
  background: rgba(11, 10, 9, 0.88);
  cursor: pointer;
}

.choice-card {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.8rem;
  align-items: center;
  min-height: 8rem;
  padding: 0.8rem;
  text-align: left;
}

.choice-card.selected,
.list-choice.selected,
.avatar-grid button.selected,
.banner-grid button.selected,
.swatch-row button.selected,
.choice-row button.selected {
  border-color: #b5161d;
  box-shadow: inset 0 0 0 1px rgba(181, 22, 29, 0.42), 0 0 18px rgba(112, 8, 12, 0.34);
}

.choice-card strong,
.list-choice strong {
  display: block;
  color: #d7c7b2;
  text-transform: uppercase;
}

.choice-card small,
.list-choice small {
  color: #b9aa98;
}

.origin-art,
.avatar {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(169, 130, 86, 0.18);
  background: linear-gradient(145deg, #191715, #060606);
}

.origin-art.lantern {
  background:
    radial-gradient(circle at 50% 56%, #e5a34d 0 1.1rem, transparent 1.2rem),
    radial-gradient(circle at 50% 52%, rgba(211, 101, 32, 0.58), transparent 3.4rem),
    linear-gradient(180deg, #13110f, #050505);
}

.origin-art.heir,
.origin-art.hollow,
.origin-art.ash {
  background: radial-gradient(circle at 50% 28%, #2d2622 0 2.2rem, transparent 2.3rem), linear-gradient(150deg, #27211d, #050505);
}

.origin-art.oath,
.origin-art.tide {
  background: radial-gradient(circle at 50% 50%, rgba(156, 19, 26, 0.65), transparent 3.5rem), linear-gradient(150deg, #1a0d0d, #050505);
}

.origin-art.large {
  width: min(100%, 14rem);
  margin-inline: auto;
}

.affliction-layout.active,
.relic-layout.active {
  grid-template-columns: minmax(22rem, 1fr) minmax(18rem, 0.8fr);
  gap: 1.2rem;
}

.stacked-choices {
  display: grid;
  gap: 0.65rem;
}

.list-choice {
  display: grid;
  grid-template-columns: 3.8rem 1fr;
  gap: 0.8rem;
  align-items: center;
  min-height: 4.8rem;
  padding: 0.7rem;
  text-align: left;
}

.list-choice span {
  width: 3.4rem;
  height: 3.4rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(150, 18, 24, 0.68), transparent 1.3rem),
    #0b0908;
  border: 1px solid rgba(169, 130, 86, 0.22);
}

.relic-preview {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: 2rem;
  border: 1px solid rgba(169, 130, 86, 0.24);
  text-align: center;
}

.relic-preview h2 {
  color: #dbc7a8;
  text-transform: uppercase;
}

.relic-preview p,
.journey-warning {
  color: #c3b4a2;
  line-height: 1.45;
}

.appearance-layout.active {
  gap: 1rem;
}

.appearance-columns {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(20rem, 1fr);
  gap: 1.2rem;
}

.appearance-columns h2 {
  color: #d7c6b0;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.avatar-grid,
.banner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.banner-grid {
  grid-template-columns: repeat(4, 1fr);
}

.avatar-grid button,
.banner-grid button {
  aspect-ratio: 1;
  padding: 0.35rem;
}

.avatar {
  height: 100%;
  background:
    radial-gradient(circle at 50% 32%, #d2b6a1 0 1.1rem, transparent 1.15rem),
    radial-gradient(circle at 50% 27%, #191111 0 2rem, transparent 2.1rem),
    linear-gradient(150deg, #26211e, #080707);
}

.avatar.redhood,
.avatar.large {
  background:
    radial-gradient(circle at 50% 32%, #d8b9a6 0 1.15rem, transparent 1.2rem),
    radial-gradient(circle at 50% 27%, #531018 0 2.3rem, transparent 2.4rem),
    linear-gradient(150deg, #61111a, #080707);
}

.avatar.large {
  width: min(100%, 16rem);
  margin-inline: auto;
}

.banner-grid button {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 1rem, rgba(169, 130, 86, 0.55) 1.05rem 1.12rem, transparent 1.18rem),
    linear-gradient(150deg, #16110f, #050505);
}

.swatch-row {
  display: grid;
  grid-template-columns: repeat(6, 2.6rem);
  gap: 0.65rem;
}

.swatch-row button {
  width: 2.6rem;
  height: 2.6rem;
  background: var(--swatch);
}

.confirm-layout.active {
  grid-template-columns: minmax(18rem, 0.72fr) minmax(22rem, 1fr);
  gap: 1.2rem;
}

.character-preview,
.confirm-list,
.journey-warning {
  border: 1px solid rgba(169, 130, 86, 0.24);
  background: rgba(0, 0, 0, 0.32);
  padding: 1.2rem;
}

.character-preview {
  text-align: center;
}

.character-preview h2 {
  margin: 1rem 0 0.2rem;
  color: #d7b46f;
  text-transform: uppercase;
}

.confirm-list {
  display: grid;
  gap: 0.7rem;
}

.confirm-list div {
  padding: 0.8rem;
  border: 1px solid rgba(169, 130, 86, 0.18);
  background: rgba(9, 8, 7, 0.72);
}

.confirm-list span,
.confirm-list strong,
.confirm-list small {
  display: block;
}

.confirm-list span {
  color: #9e8f7d;
  text-transform: uppercase;
}

.confirm-list strong {
  color: #dcccb7;
}

.confirm-list small {
  color: #b6a696;
}

.journey-warning {
  grid-column: 1 / -1;
  text-align: center;
  color: #dec4a0;
  border-color: rgba(181, 22, 29, 0.46);
}

.oath-layout.active {
  grid-template-columns: minmax(16rem, 0.65fr) minmax(23rem, 1fr);
}

.oath-contract {
  display: grid;
  gap: 0.75rem;
  text-align: left;
  background:
    linear-gradient(rgba(195, 160, 113, 0.12), rgba(0, 0, 0, 0.38)),
    #1b120c;
}

.oath-contract h2 {
  margin: 0;
  color: #2b120c;
  color: #f0dfc3;
  text-align: center;
  text-transform: uppercase;
}

.oath-contract p {
  margin: 0;
  color: #d8c7b0;
  text-align: center;
}

.oath-links {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.oath-links a {
  min-height: 2rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(169, 130, 86, 0.32);
  color: #e5c694;
  text-decoration: none;
  text-transform: uppercase;
}

.signup-controls {
  display: grid;
  grid-template-columns: 12rem 1fr 12rem;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

.signup-controls button {
  min-height: 3rem;
}

.step-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.step-dots button {
  width: 0.72rem;
  height: 0.72rem;
  padding: 0;
  border: 1px solid rgba(169, 130, 86, 0.42);
  border-radius: 50%;
  background: #1b1512;
  cursor: pointer;
}

.step-dots button.active {
  background: #bd1a21;
  border-color: #e13a3f;
}

.game-root {
  min-height: 100vh;
}

.dashboard-page {
  min-height: 100vh;
  padding: 0.75rem 1rem 1rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.9)),
    radial-gradient(circle at 50% 6%, rgba(118, 13, 19, 0.24), transparent 18rem),
    url("assets/ui/onboarding/hero-arrival-page.png") center top / cover fixed no-repeat,
    #050505;
}

.dashboard-header {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr) auto 10rem;
  gap: 0.65rem;
  align-items: center;
  min-height: 4.2rem;
  border-bottom: 1px solid rgba(169, 130, 86, 0.2);
}

.dashboard-nav {
  display: flex;
  gap: 0.4rem;
  min-width: 0;
  overflow-x: auto;
}

.dashboard-nav button {
  min-height: 3.7rem;
  padding: 0 0.58rem;
  border: 0;
  border-left: 1px solid rgba(169, 130, 86, 0.14);
  color: #d2c4b2;
  background: transparent;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 0.82rem;
}

.dashboard-nav button.active {
  color: #f33b41;
  border-bottom: 2px solid #cf1c23;
}

.dashboard-nav span {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  border-radius: 50%;
  background: #9c1d22;
  color: #fff;
}

.top-resources {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.top-resources div,
.top-resources .resource-link,
.dashboard-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}

.top-resources .resource-link {
  width: auto;
  height: auto;
  border: 0;
  color: #e8d6bd;
  background: transparent;
  cursor: pointer;
}

.user-button {
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.top-resources strong,
.top-resources span,
.dashboard-user strong,
.dashboard-user span {
  display: block;
}

.top-resources span,
.dashboard-user span {
  color: #a99b8b;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.top-resources button {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(169, 130, 86, 0.36);
  color: #e8d6bd;
  background: #0b0908;
}

.top-resources button.resource-link {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
}

.dash-avatar {
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid #5a3924;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, #d0b29d 0 0.7rem, transparent 0.74rem),
    radial-gradient(circle at 50% 30%, #4a1118 0 1.45rem, transparent 1.5rem),
    #080707;
}

.dashboard-grid-page {
  display: grid;
  grid-template-columns: minmax(17rem, 0.86fr) minmax(32rem, 2fr) minmax(17rem, 0.92fr);
  gap: 1rem;
  margin-top: 1rem;
}

.dash-left,
.dash-center,
.dash-right {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.dash-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(169, 130, 86, 0.36);
  background:
    linear-gradient(rgba(12, 11, 10, 0.88), rgba(8, 7, 6, 0.96)),
    repeating-linear-gradient(135deg, rgba(205, 165, 106, 0.035) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px #030303, 0 18px 38px rgba(0, 0, 0, 0.65);
  padding: 0.86rem;
}

.dash-panel::before,
.dash-panel::after {
  content: "";
  position: absolute;
  width: 3.6rem;
  height: 3.6rem;
  pointer-events: none;
  background: var(--asset-corner) center / contain no-repeat;
  opacity: 0.28;
}

.dash-panel::before {
  left: -0.28rem;
  top: -0.28rem;
}

.dash-panel::after {
  right: -0.28rem;
  bottom: -0.28rem;
  transform: scale(-1, -1);
}

.dash-panel > * {
  position: relative;
}

.location-hero::before,
.duel-panel::before,
.timeline-panel::before,
.messages-main::before,
.inventory-main::before,
.shadowmark-status-hero::before {
  inset: 0;
  width: auto;
  height: auto;
  background: var(--asset-main-frame) center / 100% 100% no-repeat;
  opacity: 0.16;
}

.location-hero::before {
  display: none;
}

.location-hero::after,
.duel-panel::after,
.timeline-panel::after,
.messages-main::after,
.inventory-main::after,
.shadowmark-status-hero::after {
  display: none;
}

.character-panel {
  text-align: center;
}

.character-portrait {
  min-height: 22rem;
  border: 1px solid rgba(169, 130, 86, 0.32);
  background:
    var(--asset-ornate-frame) center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 26%, #dfb9a5 0 1.35rem, transparent 1.42rem),
    radial-gradient(circle at 50% 22%, #561019 0 3.8rem, transparent 3.9rem),
    radial-gradient(circle at 50% 24%, rgba(156, 20, 28, 0.44), transparent 8rem),
    linear-gradient(150deg, transparent 0 34%, #7d1720 35% 63%, transparent 64%),
    linear-gradient(180deg, #171210, #050505);
}

.character-panel h1 {
  margin: 0.8rem 0 0.1rem;
  font-size: 2rem;
}

.character-panel > p,
.location-hero h2,
.bound-panel h2 {
  color: #f13b42;
}

.xp-line,
.status-meter span {
  height: 0.45rem;
  overflow: hidden;
  border: 1px solid rgba(169, 130, 86, 0.18);
  background: #080706;
}

.xp-line span,
.status-meter i {
  display: block;
  width: 62%;
  height: 100%;
  background: linear-gradient(90deg, #94171c, #cf242b);
}

.xp-line.purple span {
  width: 68%;
  background: linear-gradient(90deg, #6e2e96, #b355e1);
}

.profile-facts {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  text-align: left;
}

.profile-facts span {
  display: block;
  color: #9d8e7f;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.profile-facts strong,
.bound-panel h3,
.house-panel h3 {
  color: #e0cdb7;
  font-weight: normal;
}

.bound-panel ul {
  padding-left: 1.2rem;
  color: #b7a897;
}

.dash-button {
  position: relative;
  width: 100%;
  min-height: 2.7rem;
  border: 0;
  color: #ead9c0;
  background: transparent;
  text-transform: uppercase;
  overflow: hidden;
}

.dash-button::before {
  content: "";
  position: absolute;
  inset: 0.44rem 0.88rem;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(83, 15, 15, 0.72), rgba(20, 10, 8, 0.9)),
    #210807;
  box-shadow: inset 0 0 0 1px rgba(185, 108, 62, 0.16), 0 0 12px rgba(141, 21, 27, 0.24);
}

.dash-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--asset-button-frame) center / 100% 100% no-repeat;
  opacity: 0.76;
}

.location-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: 1rem;
  min-height: 23rem;
  padding: 2.5rem;
  background:
    linear-gradient(90deg, rgba(7, 7, 7, 0.28), rgba(7, 7, 7, 0.52), rgba(7, 7, 7, 0.84)),
    url("assets/ui/onboarding/hero-arrival-page.png") center 46% / 118% auto no-repeat;
}

.location-hero h1 {
  margin: 0;
  max-width: 48rem;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 0.98;
  color: #e3cfb3;
  text-transform: uppercase;
}

.location-hero p {
  max-width: 27rem;
  line-height: 1.55;
}

.location-hero h3 {
  color: #f33b41;
}

.location-hero aside {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  color: #d8c9b7;
}

.location-hero aside span {
  display: block;
  color: #a99a8b;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.decision-row,
.dash-card-row,
.dash-bottom-row,
.relic-row,
.quickbar {
  display: grid;
  gap: 0.8rem;
}

.decision-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decision-row button {
  min-height: 5rem;
  border: 1px solid rgba(169, 130, 86, 0.38);
  color: #e5d3bb;
  background: rgba(12, 10, 9, 0.86);
  text-align: left;
  padding: 0.8rem 1rem;
  text-transform: uppercase;
}

.decision-row span {
  display: block;
  color: #aaa;
  margin-top: 0.3rem;
  text-transform: none;
}

.dash-card-row {
  grid-template-columns: 1.15fr 1fr 0.75fr;
}

.dash-bottom-row {
  grid-template-columns: 1fr 1.25fr;
}

.dash-panel-title {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
  padding-bottom: 1rem;
}

.dash-panel-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.15rem;
  width: min(17rem, 70%);
  height: 1.05rem;
  transform: translateX(-50%);
  background: var(--asset-divider) center / contain no-repeat;
  opacity: 0.44;
}

.dash-panel-title h2,
.status-panel h2,
.resources-panel h2,
.house-panel h2,
.rest-panel h2 {
  color: #e4cdb1;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.dash-panel-title button {
  border: 0;
  color: #c69ae8;
  background: transparent;
  text-transform: uppercase;
}

.quest-item,
.alert-item,
.achievements-panel div,
.activity-panel p {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.72rem 0;
  border-top: 1px solid rgba(169, 130, 86, 0.16);
}

.quest-item strong,
.alert-item strong {
  color: #d7c6b1;
}

.quest-item span,
.alert-item span,
.achievements-panel span,
.activity-panel p,
.resources-panel p,
.house-panel p,
.rest-panel p,
.bound-panel p {
  color: #b8a998;
}

.quest-item em,
.alert-item em,
.activity-panel span {
  position: absolute;
  right: 0;
  bottom: 0.72rem;
  color: #aa9c8f;
  font-style: normal;
}

.quest-item.purple strong,
.alert-item.purple strong {
  color: #c076ff;
}

.quest-item.green strong {
  color: #70d89a;
}

.quest-item.red strong,
.alert-item.red strong {
  color: #f2454a;
}

.alert-item.gold strong {
  color: #dca85e;
}

.relic-row {
  grid-template-columns: repeat(5, 1fr);
}

.relic-row span {
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(169, 130, 86, 0.3);
  background:
    radial-gradient(circle at 50% 55%, rgba(186, 25, 31, 0.58), transparent 1.8rem),
    linear-gradient(150deg, #17110f, #060505);
}

.status-meter {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.8rem;
}

.status-meter label {
  display: flex;
  justify-content: space-between;
  color: #d8c5ad;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.status-meter strong {
  font-weight: normal;
}

.status-meter.purple i {
  background: linear-gradient(90deg, #7135aa, #b554d7);
}

.status-meter.gold i {
  background: linear-gradient(90deg, #a77235, #d79a4e);
}

.status-meter.green i {
  background: linear-gradient(90deg, #3d842f, #8bd15c);
}

.status-meter.blue i {
  background: linear-gradient(90deg, #2d6f99, #4d9fd4);
}

.status-meter em {
  justify-self: end;
  color: #f33b41;
  font-style: normal;
  text-transform: uppercase;
}

.resources-panel div {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0;
  color: #d9c7b1;
}

.rest-panel strong {
  display: block;
  margin-top: 1rem;
  color: #d8b47a;
  font-size: 2rem;
  font-weight: normal;
}

.rest-panel span {
  color: #b7a998;
}

.quickbar {
  grid-template-columns: repeat(7, 1fr);
  margin-top: 1rem;
  border: 1px solid rgba(169, 130, 86, 0.3);
  background: rgba(8, 7, 6, 0.9);
  padding: 0.65rem;
}

.quickbar button {
  min-height: 4.3rem;
  border: 0;
  border-left: 1px solid rgba(169, 130, 86, 0.16);
  color: #dfcbb4;
  background: transparent;
  text-transform: uppercase;
}

.quickbar span {
  display: block;
  margin-top: 0.25rem;
  color: #9f9284;
  font-size: 0.72rem;
  text-transform: none;
}

.profile-page {
  min-height: 100vh;
  padding: 0.75rem 1rem 1rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.86)),
    radial-gradient(circle at 56% 8%, rgba(127, 14, 19, 0.24), transparent 17rem),
    #050505;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 0.85fr) minmax(34rem, 1.72fr) minmax(17rem, 0.92fr);
  gap: 1rem;
  margin-top: 1rem;
}

.profile-left,
.profile-center,
.profile-right {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.profile-identity-card {
  position: relative;
  text-align: center;
}

.profile-identity-card::before,
.bond-profile-mini::before,
.message-self-card::before,
.battle-self-card::before,
.inventory-detail::before,
.message-target-card::before {
  inset: 0;
  width: auto;
  height: auto;
  background: var(--asset-sidebar-frame) center / 100% 100% no-repeat;
  opacity: 0.2;
}

.profile-identity-card::after,
.bond-profile-mini::after,
.message-self-card::after,
.battle-self-card::after,
.inventory-detail::after,
.message-target-card::after {
  display: none;
}

.profile-identity-card h1 {
  margin: 0.8rem 0 0.1rem;
  font-size: 2.1rem;
}

.profile-identity-card > p {
  color: #f33b41;
}

.edit-float {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(169, 130, 86, 0.45);
  border-radius: 50%;
  color: #e1c9aa;
  background: rgba(0, 0, 0, 0.64);
  font-size: 0.65rem;
  cursor: pointer;
}

.profile-rank-panel {
  display: grid;
  grid-template-columns: minmax(13rem, 0.7fr) minmax(18rem, 1fr);
  gap: 1.2rem;
  min-height: 19rem;
  background:
    linear-gradient(90deg, rgba(8, 8, 7, 0.95), rgba(8, 8, 7, 0.62)),
    radial-gradient(circle at 74% 25%, rgba(159, 54, 55, 0.56), transparent 4.5rem),
    linear-gradient(180deg, #171819, #070707);
}

.profile-rank-panel > h1 {
  grid-column: 1 / -1;
  margin: -0.4rem 0 0;
  color: #e2c79d;
  text-align: center;
  font-size: clamp(2rem, 4vw, 3.25rem);
  text-transform: uppercase;
}

.rank-block {
  text-align: center;
}

.rank-block h2,
.profile-meta span,
.bond-person span,
.bond-chain span {
  color: #cba66d;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.rank-sigil {
  width: 8rem;
  height: 8rem;
  margin: 0.8rem auto;
  background:
    radial-gradient(circle at 50% 44%, #bb1921 0 0.6rem, transparent 0.66rem),
    radial-gradient(circle at 50% 48%, #15100f 0 2.8rem, transparent 2.9rem),
    radial-gradient(circle at 50% 50%, rgba(169, 130, 86, 0.38), transparent 4rem);
  border: 1px solid rgba(169, 130, 86, 0.2);
  border-radius: 50%;
}

.rank-block strong {
  display: block;
  color: #dfbd7b;
  font-size: 1.25rem;
  font-weight: normal;
}

.profile-meta {
  display: grid;
  align-content: center;
  gap: 1rem;
}

.profile-meta strong {
  display: block;
  margin-top: 0.25rem;
  color: #e3d0b8;
  font-size: 1.05rem;
  font-weight: normal;
}

.profile-meta strong:first-letter {
  color: inherit;
}

.online-dot {
  color: #7fc85a !important;
}

.online-dot::before {
  content: "";
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: #71c34b;
  box-shadow: 0 0 10px rgba(113, 195, 75, 0.7);
}

.bond-profile-panel {
  display: grid;
  grid-template-columns: minmax(17rem, 1fr) minmax(18rem, 1fr) 7rem;
  gap: 1rem;
  align-items: center;
}

.bond-person {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.partner-portrait {
  width: 7rem;
  height: 7rem;
  border: 1px solid rgba(169, 130, 86, 0.38);
  border-radius: 50%;
  background:
    var(--asset-ornate-frame) center / 128% 128% no-repeat,
    radial-gradient(circle at 50% 34%, #cdb5a4 0 1.05rem, transparent 1.1rem),
    radial-gradient(circle at 50% 30%, #d4d0c8 0 2.5rem, transparent 2.6rem),
    linear-gradient(150deg, #2a2523, #060606);
}

.bond-person h2 {
  margin: 0;
  color: #ead8c1;
  font-size: 1.65rem;
  font-weight: normal;
}

.bond-person p,
.bond-chain strong {
  color: #f33b41;
}

.chain-nodes {
  display: flex;
  gap: 0.55rem;
  margin: 0.7rem 0;
}

.chain-nodes i {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #bd1820;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ca2028 0 0.35rem, transparent 0.4rem),
    rgba(32, 5, 7, 0.78);
  box-shadow: 0 0 16px rgba(189, 24, 32, 0.36);
}

.chain-nodes i.dim {
  border-color: rgba(169, 130, 86, 0.34);
  background: rgba(6, 6, 6, 0.8);
  box-shadow: none;
}

.bond-benefits {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  border-top: 1px solid rgba(169, 130, 86, 0.18);
  padding-top: 1rem;
}

.bond-benefits div {
  min-height: 4rem;
  color: #d6c5af;
  text-align: center;
}

.bond-benefits span {
  display: block;
  color: #a99a8b;
  margin-top: 0.25rem;
}

.profile-lower-grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 1rem;
}

.achievement-row {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(169, 130, 86, 0.16);
}

.achievement-row strong {
  color: #e1c9aa;
}

.achievement-row span {
  color: #b7a897;
}

.achievement-row em {
  position: absolute;
  right: 0;
  top: 0.7rem;
  color: #a99a8b;
  font-style: normal;
}

.play-record-panel {
  display: grid;
  gap: 0.65rem;
}

.play-record-panel h2,
.effects-panel h2,
.quote-panel h2 {
  color: #e4cdb1;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.play-record-panel div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #cdbca8;
}

.effects-panel {
  display: grid;
  gap: 0.8rem;
}

.effects-panel div {
  position: relative;
  display: grid;
  gap: 0.2rem;
  border-top: 1px solid rgba(169, 130, 86, 0.16);
  padding-top: 0.8rem;
}

.effects-panel strong {
  color: #d9c7b0;
}

.effects-panel span {
  color: #b7a897;
}

.effects-panel em {
  position: absolute;
  right: 0;
  top: 0.8rem;
  color: #d1b890;
  font-style: normal;
}

.quote-panel {
  position: relative;
}

.quote-panel blockquote {
  margin: 1.5rem 0 0;
  padding: 1.4rem;
  border: 1px solid rgba(169, 130, 86, 0.2);
  color: #e0c9a9;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

.bond-page {
  min-height: 100vh;
  padding: 0.55rem 0.7rem 0.8rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.86)),
    radial-gradient(circle at 52% 9%, rgba(146, 17, 24, 0.28), transparent 18rem),
    #050505;
}

.bond-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 0.58fr) minmax(44rem, 2.55fr) minmax(15rem, 0.82fr);
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.bond-sidebar,
.bond-main,
.bond-right {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.bond-profile-mini {
  text-align: center;
}

.bond-profile-mini .character-portrait {
  min-height: 11rem;
}

.bond-profile-mini h1 {
  margin: 0.55rem 0 0.05rem;
  color: #ecd8bf;
  font-size: 1.24rem;
}

.bond-profile-mini p {
  color: #f33b41;
}

.bond-menu,
.bond-premium {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem;
  border: 1px solid rgba(169, 130, 86, 0.28);
  background: rgba(8, 7, 6, 0.86);
}

.bond-menu button,
.bond-premium button {
  display: flex;
  justify-content: space-between;
  min-height: 2.05rem;
  border: 0;
  border-bottom: 1px solid rgba(169, 130, 86, 0.12);
  color: #bfb09e;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 0.82rem;
}

.bond-menu button.active,
.bond-premium button.active {
  color: #f14247;
  border: 1px solid rgba(181, 22, 29, 0.6);
  background: rgba(84, 11, 14, 0.34);
}

.bond-menu span {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #9c1d22;
  color: #fff;
}

.bond-premium h2 {
  color: #d2b484;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.bond-hero {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) auto 7rem auto auto;
  gap: 0.9rem;
  align-items: center;
}

.bond-hero h1 {
  margin: 0;
  color: #e2c79d;
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  text-transform: uppercase;
}

.bond-hero p {
  color: #c7b6a2;
}

.bond-fact span,
.vault-totals span,
.contribution-row span {
  display: block;
  color: #a99989;
}

.bond-fact strong {
  color: #e4d1ba;
  font-weight: normal;
}

.bond-fact small {
  display: block;
  color: #82d35f;
  margin-top: 0.35rem;
}

.bond-symbol {
  width: 6.8rem;
  height: 6.8rem;
  background:
    radial-gradient(circle at 38% 50%, transparent 0 1.8rem, #a8151b 1.9rem 2rem, transparent 2.1rem),
    radial-gradient(circle at 62% 50%, transparent 0 1.8rem, #a8151b 1.9rem 2rem, transparent 2.1rem),
    radial-gradient(circle, rgba(189, 24, 32, 0.32), transparent 4rem);
  filter: drop-shadow(0 0 16px rgba(189, 24, 32, 0.5));
}

.bond-pair-row {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(10rem, 0.42fr) minmax(18rem, 1fr);
  gap: 0.7rem;
  align-items: center;
}

.bond-timeline-callout {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.bond-timeline-callout span {
  color: #a99989;
  text-transform: uppercase;
}

.bond-timeline-callout h2 {
  margin: 0.25rem 0;
  color: #d8bd87;
  font-size: 1rem;
  text-transform: uppercase;
}

.bond-timeline-callout p {
  display: none;
  color: #b8a898;
  line-height: 1.45;
}

.bond-combatant {
  display: grid;
  grid-template-columns: 7.2rem 1fr;
  gap: 0.75rem;
  align-items: center;
}

.character-portrait.compact,
.partner-portrait.square {
  min-height: 8rem;
  width: 7.2rem;
  height: 8rem;
  border-radius: 0;
}

.bond-combatant h2 {
  margin: 0;
  color: #e5d1b8;
  font-size: 1.25rem;
  font-weight: normal;
}

.portrait-link,
.name-link,
.panel-link-title {
  border: 0;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  font: inherit;
}

.portrait-link {
  display: block;
  padding: 0;
}

.portrait-link:hover,
.portrait-link:focus-visible {
  outline: 1px solid rgba(207, 28, 35, 0.72);
  outline-offset: 3px;
  filter: saturate(1.12) drop-shadow(0 0 12px rgba(207, 28, 35, 0.36));
}

.name-link {
  padding: 0;
  color: #e5d1b8;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.name-link:hover,
.name-link:focus-visible,
.panel-link-title:hover,
.panel-link-title:focus-visible {
  color: #f5dcc0;
  text-shadow: 0 0 12px rgba(207, 28, 35, 0.45);
}

.panel-link-title {
  display: block;
  width: 100%;
  padding: 0;
  color: #d8bd87;
  font-family: var(--font-display);
  font-size: 0.98rem;
  text-align: center;
  text-transform: uppercase;
}

.bond-combatant p,
.bond-quest strong,
.pending-request strong {
  color: #f33b41;
}

.timeline-button {
  align-self: center;
}

.bond-content-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr) minmax(18rem, 1fr);
  gap: 0.7rem;
}

.shared-vault-panel h2,
.bond-quests-panel h2,
.bond-perks-panel h2,
.vault-activity-panel h2,
.bond-actions-panel h2 {
  color: #d8bd87;
  font-size: 0.98rem;
  text-align: center;
  text-transform: uppercase;
}

.safe-label {
  color: #c8b8a5;
  text-align: center;
}

.safe-label strong,
.contribution-row em {
  color: #78c85b;
  font-style: normal;
}

.vault-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 1rem 0;
  border-top: 1px solid rgba(169, 130, 86, 0.14);
  border-bottom: 1px solid rgba(169, 130, 86, 0.14);
}

.vault-totals div {
  padding: 1rem;
}

.vault-totals strong {
  color: #e4d0b6;
  font-size: 1.08rem;
  font-weight: normal;
}

.contribution-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.8rem;
  align-items: center;
  margin-top: 0.55rem;
  padding: 0.58rem;
  border: 1px solid rgba(169, 130, 86, 0.16);
  background: rgba(0, 0, 0, 0.26);
}

.vault-actions {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0.55rem;
  margin: 1rem 0;
}

.vault-actions .wide {
  grid-column: 1 / -1;
}

.dash-button.ghost {
  border-color: rgba(169, 130, 86, 0.28);
  background: rgba(8, 7, 6, 0.72);
}

.bond-quest {
  display: grid;
  grid-template-columns: 4rem 1fr 3.7rem;
  gap: 0.65rem;
  align-items: center;
  padding: 0.62rem 0;
  border-top: 1px solid rgba(169, 130, 86, 0.16);
}

.bond-quest > span {
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid rgba(169, 130, 86, 0.22);
  background:
    radial-gradient(circle at 50% 50%, rgba(190, 22, 30, 0.62), transparent 2rem),
    #070606;
}

.bond-quest p,
.bond-quest small,
.pending-request p,
.bond-perks-panel span,
.vault-activity-panel span,
.bond-actions-panel span {
  color: #b8a898;
}

.bond-quest button,
.pending-request button {
  min-height: 2rem;
  border: 1px solid rgba(181, 22, 29, 0.62);
  color: #e8c8ad;
  background: rgba(78, 10, 12, 0.48);
  text-transform: uppercase;
}

.pending-request {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  padding: 0.62rem;
  border: 1px solid rgba(169, 130, 86, 0.18);
}

.pending-request em {
  color: #f33b41;
  font-style: normal;
}

.pending-request .approve {
  border-color: rgba(89, 163, 70, 0.75);
  color: #91df71;
  background: rgba(24, 76, 22, 0.4);
}

.pending-request .deny {
  color: #f33b41;
}

.bond-perks-panel div,
.vault-activity-panel div {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 0.58rem 0;
  border-top: 1px solid rgba(169, 130, 86, 0.16);
}

.bond-perks-panel strong,
.vault-activity-panel strong,
.bond-actions-panel strong {
  color: #e0cbb0;
}

.bond-perks-panel .locked {
  opacity: 0.48;
}

.bond-perks-panel em,
.vault-activity-panel em {
  position: absolute;
  right: 0;
  top: 0.58rem;
  color: #82d35f;
  font-style: normal;
}

.bond-actions-panel {
  display: grid;
  gap: 0.55rem;
}

.bond-actions-panel button {
  display: grid;
  gap: 0.25rem;
  min-height: 3.45rem;
  border: 1px solid rgba(181, 22, 29, 0.55);
  color: #e2cbb1;
  background: rgba(74, 10, 13, 0.48);
  text-align: left;
  padding: 0.62rem 0.82rem;
  text-transform: uppercase;
}

.bond-actions-panel button.danger {
  border-color: rgba(220, 30, 36, 0.72);
  color: #f2454a;
}

.bond-actions-panel p {
  border: 1px solid rgba(220, 30, 36, 0.45);
  color: #f2454a;
  padding: 0.7rem;
  text-align: center;
}

.vault-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.64fr) minmax(39rem, 1.75fr) minmax(19rem, 0.86fr);
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.vault-partners,
.vault-main,
.vault-right,
.bond-subpage-layout {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.vault-partner-card {
  text-align: center;
}

.vault-partner-card .portrait-link {
  margin: 0 auto 0.5rem;
}

.vault-partner-card p {
  color: #f33b41;
}

.vault-chain {
  height: 3rem;
  background:
    linear-gradient(90deg, transparent, rgba(207, 28, 35, 0.65), transparent),
    radial-gradient(circle at 50% 50%, rgba(175, 28, 143, 0.55), transparent 1.2rem);
}

.vault-bond-status {
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem;
  border: 1px solid rgba(169, 130, 86, 0.2);
}

.vault-bond-status strong,
.vault-security strong,
.vault-action-grid strong,
.bond-subpage-grid div {
  color: #ead6bd;
}

.vault-bond-status span {
  color: #8be66a;
  text-transform: uppercase;
}

.vault-hero-panel {
  text-align: center;
}

.vault-hero-panel h1,
.bond-subpage-card h1 {
  margin: 0;
  color: #e2c79d;
  font-size: clamp(2rem, 4vw, 3.1rem);
  text-transform: uppercase;
}

.vault-hero-panel p,
.bond-subpage-card p {
  color: #c7b6a2;
}

.vault-chest {
  min-height: 9rem;
  margin: 0.6rem auto;
  max-width: 32rem;
  border: 1px solid rgba(169, 130, 86, 0.24);
  background:
    radial-gradient(circle at 50% 58%, rgba(207, 28, 35, 0.75), transparent 2.3rem),
    radial-gradient(ellipse at 50% 62%, rgba(132, 76, 29, 0.78), transparent 10rem),
    linear-gradient(90deg, rgba(107, 14, 20, 0.35), rgba(92, 58, 24, 0.5), rgba(71, 11, 78, 0.32)),
    #080706;
  box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.8), 0 0 26px rgba(207, 28, 35, 0.18);
}

.vault-currency-grid,
.vault-action-grid,
.bond-subpage-grid {
  display: grid;
  gap: 0.65rem;
}

.vault-currency-grid {
  grid-template-columns: repeat(3, 1fr);
}

.vault-currency-grid button,
.vault-action-grid button,
.bond-subpage-grid div {
  min-height: 4rem;
  padding: 0.75rem;
  border: 1px solid rgba(169, 130, 86, 0.26);
  color: #e8d6bd;
  background:
    linear-gradient(rgba(28, 18, 14, 0.62), rgba(7, 6, 6, 0.88)),
    rgba(0, 0, 0, 0.36);
}

.vault-currency-grid button {
  cursor: pointer;
}

.vault-currency-grid span,
.vault-action-grid span,
.vault-glance span,
.vault-security span {
  display: block;
  color: #b8a898;
}

.vault-currency-grid strong {
  color: #f2d8b2;
  font-size: 1.6rem;
  font-weight: normal;
}

.vault-split-panel h2,
.vault-action-grid h2,
.vault-security h2,
.vault-glance h2 {
  color: #d8bd87;
  font-size: 0.98rem;
  text-align: center;
  text-transform: uppercase;
}

.vault-split-line {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 0.8rem;
  align-items: center;
  text-align: center;
}

.vault-split-line i {
  height: 0.7rem;
  border: 1px solid rgba(169, 130, 86, 0.26);
  background:
    linear-gradient(90deg, rgba(207, 28, 35, 0.58) 0 50%, rgba(141, 54, 191, 0.58) 50% 100%);
}

.vault-split-line strong {
  display: block;
  color: #f33b41;
  font-size: 1.45rem;
}

.vault-action-grid {
  grid-template-columns: repeat(4, 1fr);
}

.vault-action-grid h2 {
  grid-column: 1 / -1;
}

.vault-action-grid button {
  cursor: pointer;
  text-transform: uppercase;
}

.vault-security div,
.vault-glance div {
  padding: 0.7rem 0;
  border-top: 1px solid rgba(169, 130, 86, 0.14);
}

.vault-glance div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.bond-subpage-layout {
  min-height: calc(100vh - 6rem);
  place-items: center;
}

.bond-subpage-card {
  width: min(58rem, 100%);
  padding: 2rem;
}

.bond-subpage-card > span {
  color: #f33b41;
  text-transform: uppercase;
}

.bond-subpage-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 1.2rem;
}

.back-link {
  width: fit-content;
  margin-bottom: 1.2rem;
}

.bond-timeline-page {
  min-height: 100vh;
  padding: 0.75rem 1rem 1rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.88)),
    radial-gradient(circle at 50% 8%, rgba(146, 17, 24, 0.24), transparent 19rem),
    #050505;
}

.bond-timeline-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.62fr) minmax(44rem, 2.35fr) minmax(17rem, 0.86fr);
  gap: 1rem;
  margin-top: 1rem;
}

.bond-timeline-main,
.bond-timeline-right {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.timeline-hero {
  display: grid;
  grid-template-columns: minmax(22rem, 1fr) 9rem minmax(15rem, 0.55fr);
  gap: 1.5rem;
  align-items: center;
  min-height: 11rem;
}

.timeline-hero span,
.timeline-panel-head p,
.timeline-entry span,
.timeline-entry time,
.timeline-summary span,
.timeline-note p {
  color: #a99989;
}

.timeline-hero h1 {
  margin: 0.25rem 0 0.45rem;
  color: #e2c79d;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: normal;
  letter-spacing: 0;
  text-transform: uppercase;
}

.timeline-hero p {
  max-width: 34rem;
  color: #d1c0ac;
  line-height: 1.55;
}

.timeline-bond-mark {
  width: 9rem;
  height: 9rem;
  background:
    radial-gradient(circle at 38% 50%, transparent 0 2rem, rgba(188, 20, 28, 0.95) 2.05rem 2.18rem, transparent 2.25rem),
    radial-gradient(circle at 62% 50%, transparent 0 2rem, rgba(188, 20, 28, 0.95) 2.05rem 2.18rem, transparent 2.25rem),
    linear-gradient(90deg, transparent 0 45%, rgba(188, 20, 28, 0.85) 46% 54%, transparent 55%),
    radial-gradient(circle, rgba(190, 22, 30, 0.25), transparent 4.5rem);
  filter: drop-shadow(0 0 18px rgba(189, 24, 32, 0.45));
}

.timeline-stats {
  display: grid;
  gap: 0.7rem;
}

.timeline-stats div,
.timeline-summary div {
  padding: 0.75rem;
  border: 1px solid rgba(169, 130, 86, 0.16);
  background: rgba(0, 0, 0, 0.22);
}

.timeline-stats strong,
.timeline-summary strong {
  display: block;
  margin-top: 0.2rem;
  color: #e3ccb0;
  font-weight: normal;
}

.timeline-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(169, 130, 86, 0.18);
}

.timeline-panel-head h2,
.timeline-summary h2,
.timeline-note h2 {
  margin: 0 0 0.35rem;
  color: #d8bd87;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.timeline-rail {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding: 1rem 0 0 2.2rem;
}

.timeline-rail::before {
  content: "";
  position: absolute;
  top: 1.3rem;
  bottom: 1.2rem;
  left: 0.8rem;
  width: 1px;
  background: linear-gradient(transparent, rgba(190, 22, 30, 0.9), rgba(169, 130, 86, 0.55), transparent);
  box-shadow: 0 0 12px rgba(190, 22, 30, 0.32);
}

.timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: 9rem 1fr 5.5rem;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(169, 130, 86, 0.18);
  background:
    linear-gradient(135deg, rgba(65, 12, 14, 0.22), transparent 42%),
    rgba(5, 5, 5, 0.72);
}

.timeline-entry::before {
  content: "";
  position: absolute;
  left: -1.8rem;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid rgba(219, 42, 48, 0.78);
  border-radius: 50%;
  background: #080606;
  box-shadow: 0 0 14px rgba(219, 42, 48, 0.55);
}

.timeline-entry h3 {
  margin: 0.18rem 0 0.25rem;
  color: #ead2b5;
  font-size: 1.1rem;
  font-weight: normal;
}

.timeline-entry p {
  color: #c0b09f;
  line-height: 1.45;
}

.timeline-entry strong {
  justify-self: end;
  color: #e2c79d;
  font-weight: normal;
  text-transform: uppercase;
}

.timeline-entry.important {
  border-color: rgba(210, 34, 42, 0.48);
  box-shadow: inset 0 0 22px rgba(136, 15, 19, 0.18);
}

.timeline-entry.quest span {
  color: #b76aff;
}

.timeline-entry.warning {
  border-color: rgba(194, 118, 45, 0.42);
}

.timeline-entry.warning strong {
  color: #f24a4f;
}

.timeline-summary,
.timeline-note {
  display: grid;
  gap: 0.7rem;
}

.timeline-summary button {
  min-height: 2.35rem;
  border: 1px solid rgba(169, 130, 86, 0.22);
  color: #cbbba8;
  background: rgba(8, 7, 6, 0.78);
  text-align: left;
  padding: 0 0.8rem;
  text-transform: uppercase;
  cursor: pointer;
}

.timeline-summary button.active {
  border-color: rgba(181, 22, 29, 0.68);
  color: #f14247;
  background: rgba(84, 11, 14, 0.36);
}

.timeline-note p {
  color: #cbbba8;
  font-style: italic;
  line-height: 1.55;
}

.battle-page {
  min-height: 100vh;
  padding: 0.75rem 1rem 1rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.9)),
    radial-gradient(circle at 50% 8%, rgba(146, 17, 24, 0.23), transparent 20rem),
    #050505;
}

.battle-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.62fr) minmax(42rem, 2.1fr) minmax(16rem, 0.72fr);
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.battle-left,
.battle-main,
.battle-right {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.battle-self-card {
  text-align: center;
}

.battle-self-card > span,
.duel-title span,
.combat-feed-panel h2,
.battle-actions-panel h2,
.combat-state-panel h2,
.current-turn-panel h2,
.active-effects-panel h2,
.battle-quick-actions h2,
.turn-info-panel h2,
.battle-bond-card h2 {
  color: #d8bd87;
  text-transform: uppercase;
}

.battle-self-card h1 {
  margin: 0.2rem 0 0.7rem;
  color: #f33b41;
  font-size: 1.2rem;
}

.battle-self-card p,
.battle-bond-card span,
.battle-bond-card strong,
.combat-feed-item p,
.battle-action-grid p,
.battle-actions-panel > p,
.current-turn-panel p,
.active-effects-panel span,
.turn-info-panel span {
  color: #b8a898;
}

.battle-portrait {
  min-height: 20rem;
  border: 1px solid rgba(169, 130, 86, 0.32);
  background:
    var(--asset-ornate-frame) center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 23%, #e0b9a4 0 1.2rem, transparent 1.28rem),
    radial-gradient(circle at 50% 22%, #60101a 0 4rem, transparent 4.1rem),
    radial-gradient(circle at 50% 27%, rgba(182, 19, 28, 0.44), transparent 8rem),
    linear-gradient(150deg, transparent 0 35%, #781722 36% 62%, transparent 63%),
    linear-gradient(180deg, #171210, #050505);
}

.battle-portrait.enemy {
  background:
    var(--asset-ornate-frame) center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 24%, #c9b9a5 0 1.15rem, transparent 1.22rem),
    radial-gradient(circle at 50% 23%, #2b2a29 0 4.1rem, transparent 4.2rem),
    radial-gradient(circle at 50% 30%, rgba(160, 40, 42, 0.24), transparent 8rem),
    linear-gradient(150deg, transparent 0 35%, #2a2a29 36% 62%, transparent 63%),
    linear-gradient(180deg, #161616, #050505);
}

.battle-portrait.compact {
  width: 9rem;
  min-height: 10.5rem;
}

.battle-menu {
  padding: 0.7rem;
}

.battle-bond-card {
  display: grid;
  gap: 0.8rem;
}

.battle-bond-card div {
  display: grid;
  gap: 0.35rem;
}

.battle-bond-card i {
  display: block;
  height: 0.45rem;
  background: linear-gradient(90deg, #94171c, #cf242b);
}

.battle-bond-card div:nth-of-type(2) i {
  background: linear-gradient(90deg, #7135aa, #b554d7);
}

.duel-panel,
.combat-feed-panel,
.battle-actions-panel {
  padding: 1.1rem;
}

.duel-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(169, 130, 86, 0.18);
}

.duel-title h1 {
  margin: 0;
  color: #e2c79d;
  font-size: clamp(2rem, 3vw, 2.8rem);
  text-transform: uppercase;
}

.duel-title p,
.duel-title strong {
  color: #f33b41;
}

.duel-row {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) 5rem minmax(18rem, 1fr);
  gap: 1rem;
  align-items: center;
  min-height: 17rem;
}

.duel-combatant {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  align-items: center;
}

.duel-combatant.enemy {
  grid-template-columns: 1fr 9rem;
  text-align: right;
}

.duel-combatant h2 {
  margin: 0;
  color: #e3ccb0;
  text-transform: uppercase;
}

.duel-combatant p {
  color: #f33b41;
}

.versus-mark {
  color: #ef2f37;
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  text-shadow: 0 0 18px rgba(239, 47, 55, 0.55);
}

.duel-icon-row {
  display: grid;
  grid-template-columns: repeat(4, 2.35rem) 1fr repeat(4, 2.35rem);
  gap: 0.45rem;
  align-items: center;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(169, 130, 86, 0.16);
}

.duel-icon-row span,
.duel-icon-row em,
.combat-feed-item > span,
.battle-action-grid span {
  display: block;
  border: 1px solid rgba(181, 22, 29, 0.58);
  background:
    radial-gradient(circle, rgba(204, 34, 42, 0.45), transparent 56%),
    #070606;
}

.duel-icon-row span,
.duel-icon-row em {
  width: 2.35rem;
  height: 2.35rem;
}

.duel-icon-row .green {
  border-color: rgba(90, 158, 60, 0.6);
  background: radial-gradient(circle, rgba(90, 158, 60, 0.45), transparent 56%), #070606;
}

.duel-icon-row .purple,
.duel-icon-row .violet {
  border-color: rgba(144, 70, 188, 0.6);
  background: radial-gradient(circle, rgba(144, 70, 188, 0.45), transparent 56%), #070606;
}

.duel-icon-row em {
  justify-self: end;
}

.combat-feed-list {
  display: grid;
  gap: 0.45rem;
  max-height: 18rem;
  overflow-y: auto;
}

.combat-feed-item {
  display: grid;
  grid-template-columns: 3rem 1fr 7rem;
  gap: 0.8rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(169, 130, 86, 0.14);
  background: rgba(0, 0, 0, 0.3);
}

.combat-feed-item > span {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
}

.combat-feed-item strong {
  color: #f33b41;
  text-transform: uppercase;
}

.combat-feed-item em {
  color: #f33b41;
  font-style: normal;
  text-align: right;
}

.combat-feed-item.green strong,
.combat-feed-item.green em {
  color: #78c85b;
}

.combat-feed-item.purple strong,
.combat-feed-item.purple em {
  color: #b76aff;
}

.battle-actions-panel {
  text-align: center;
}

.battle-action-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
  text-align: left;
}

.battle-action-grid button {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.4rem 0.75rem;
  min-height: 9.4rem;
  padding: 1rem;
  border: 1px solid rgba(181, 22, 29, 0.62);
  color: #ead9c0;
  background:
    linear-gradient(135deg, rgba(105, 15, 18, 0.38), transparent 52%),
    rgba(8, 7, 6, 0.86);
  cursor: pointer;
}

.battle-action-grid button strong,
.battle-action-grid button p,
.battle-action-grid button em {
  grid-column: 2;
}

.battle-action-grid button strong {
  align-self: end;
  color: #ecd7bd;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.battle-action-grid button em {
  align-self: end;
  color: #f33b41;
  font-style: normal;
}

.battle-action-grid span {
  grid-row: 1 / span 3;
  width: 3rem;
  height: 3rem;
}

.battle-action-grid .gold {
  border-color: rgba(188, 128, 43, 0.7);
  background: linear-gradient(135deg, rgba(114, 76, 23, 0.35), transparent 52%), rgba(8, 7, 6, 0.86);
}

.battle-action-grid .gold em {
  color: #e0a94d;
}

.battle-action-grid .green {
  border-color: rgba(76, 145, 54, 0.65);
  background: linear-gradient(135deg, rgba(35, 82, 25, 0.34), transparent 52%), rgba(8, 7, 6, 0.86);
}

.battle-action-grid .green em {
  color: #78c85b;
}

.battle-action-grid .purple {
  border-color: rgba(120, 54, 154, 0.72);
  background: linear-gradient(135deg, rgba(69, 25, 89, 0.36), transparent 52%), rgba(8, 7, 6, 0.86);
}

.battle-action-grid .purple em {
  color: #d5a0ff;
}

.combat-state-panel h3 {
  color: #f33b41;
}

.current-turn-panel strong {
  color: #e3ccb0;
}

.active-effects-panel div,
.turn-info-panel div {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(169, 130, 86, 0.16);
}

.active-effects-panel strong,
.turn-info-panel strong {
  color: #e0cbb0;
}

.active-effects-panel em {
  position: absolute;
  right: 0;
  top: 0.8rem;
  color: #d2b484;
  font-style: normal;
}

.active-effects-panel .green strong {
  color: #78c85b;
}

.active-effects-panel .purple strong {
  color: #b76aff;
}

.active-effects-panel .red strong {
  color: #f33b41;
}

.battle-quick-actions {
  display: grid;
  gap: 0.65rem;
}

.battle-quick-actions button {
  min-height: 2.9rem;
  border: 1px solid rgba(169, 130, 86, 0.24);
  color: #ead9c0;
  background: rgba(8, 7, 6, 0.78);
  text-transform: uppercase;
}

.messages-page {
  min-height: 100vh;
  padding: 0.75rem 1rem 1rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.88)),
    radial-gradient(circle at 58% 8%, rgba(146, 17, 24, 0.22), transparent 18rem),
    #050505;
}

.messages-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.62fr) minmax(44rem, 2.25fr) minmax(18rem, 0.85fr);
  gap: 1rem;
  margin-top: 1rem;
}

.message-left,
.message-right {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.message-self-card,
.message-bound-mini,
.message-target-card {
  text-align: center;
}

.message-self-card .character-portrait {
  margin-inline: auto;
  min-height: 13rem;
}

.message-self-card h1,
.message-target-card h2 {
  margin: 0.8rem 0 0.15rem;
  color: #ead8c1;
  font-weight: normal;
}

.message-self-card p,
.message-bound-mini h3,
.message-target-card p {
  color: #f33b41;
}

.quick-actions-panel {
  display: grid;
  gap: 0.55rem;
}

.quick-actions-panel h2,
.message-bound-mini h2,
.messages-main h1,
.message-target-card h3 {
  color: #d8bd87;
  text-transform: uppercase;
}

.quick-actions-panel button,
.message-target-card button {
  min-height: 2.35rem;
  border: 0;
  border-bottom: 1px solid rgba(169, 130, 86, 0.14);
  color: #c8b8a5;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.message-bound-mini .partner-portrait {
  margin-inline: auto;
}

.messages-main {
  min-width: 0;
}

.messages-main h1 {
  margin-bottom: 1.1rem;
  font-size: 2rem;
}

.message-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.message-tabs button,
.message-tools button,
.message-pages button,
.message-compose button {
  border: 1px solid rgba(169, 130, 86, 0.28);
  color: #e1d0b8;
  background: rgba(9, 8, 7, 0.88);
  text-transform: uppercase;
}

.message-tabs button {
  min-height: 2.8rem;
}

.message-tabs button.active,
.message-pages button.active {
  border-color: rgba(216, 36, 43, 0.75);
  background: linear-gradient(180deg, rgba(133, 22, 26, 0.72), rgba(32, 7, 8, 0.94));
}

.message-tools {
  display: grid;
  grid-template-columns: 10rem auto minmax(18rem, 1fr) 7rem 4.5rem;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.7rem;
}

.message-tools select,
.message-tools input,
.message-compose textarea {
  border: 1px solid rgba(169, 130, 86, 0.22);
  color: var(--ink);
  background: rgba(0, 0, 0, 0.56);
}

.message-tools select,
.message-tools input {
  min-height: 2.5rem;
  padding: 0 0.75rem;
}

.message-tools label {
  color: #b8a898;
}

.message-workspace {
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(28rem, 1.28fr);
  gap: 0.7rem;
  min-height: 33rem;
}

.inbox-list {
  border: 1px solid rgba(169, 130, 86, 0.18);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.inbox-list > button {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 0.7rem;
  width: 100%;
  min-height: 4.4rem;
  padding: 0.65rem;
  border: 0;
  border-bottom: 1px solid rgba(169, 130, 86, 0.14);
  color: #d8c7b2;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.inbox-list > button.active {
  background: linear-gradient(90deg, rgba(128, 21, 26, 0.72), rgba(42, 8, 10, 0.42));
}

.sender-icon {
  grid-row: 1 / 3;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(169, 130, 86, 0.32);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, #d1b09c 0 0.6rem, transparent 0.65rem),
    radial-gradient(circle at 50% 30%, #321116 0 1.25rem, transparent 1.3rem),
    #070606;
}

.sender-icon.danger {
  background:
    radial-gradient(circle at 50% 50%, rgba(217, 38, 45, 0.78), transparent 1.7rem),
    #070606;
}

.sender-icon.pale {
  background:
    radial-gradient(circle at 50% 36%, #cbb8a7 0 0.8rem, transparent 0.85rem),
    #090807;
}

.sender-icon.system {
  background:
    radial-gradient(circle, rgba(169, 130, 86, 0.55), transparent 1.6rem),
    #070606;
}

.inbox-list strong,
.inbox-list small,
.inbox-list em {
  display: block;
}

.inbox-list small {
  grid-column: 2 / 4;
  color: #a99a8a;
}

.inbox-list em {
  color: #f33b41;
  font-style: normal;
}

.message-pages {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.6rem;
}

.message-pages button {
  width: 2.2rem;
  height: 2.2rem;
}

.conversation-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  border: 1px solid rgba(169, 130, 86, 0.18);
  background: rgba(0, 0, 0, 0.22);
}

.conversation-header {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 0.8rem;
  align-items: center;
  min-height: 4rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid rgba(169, 130, 86, 0.14);
}

.conversation-header h2 {
  margin: 0;
  color: #d8c7b2;
}

.conversation-header small {
  color: #77cc5c;
}

.conversation-header button {
  border: 0;
  color: #f33b41;
  background: transparent;
}

.conversation-feed {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: 1.2rem;
}

.message-bubble {
  width: min(70%, 26rem);
  padding: 0.8rem;
  border: 1px solid rgba(169, 130, 86, 0.22);
  background: rgba(22, 20, 18, 0.88);
}

.message-bubble.theirs {
  border-color: rgba(188, 31, 36, 0.42);
  background: rgba(86, 14, 17, 0.56);
}

.message-bubble.ours {
  justify-self: end;
}

.message-bubble.wide {
  width: min(82%, 32rem);
}

.message-bubble small {
  display: block;
  color: #8f8277;
  margin-bottom: 0.3rem;
}

.message-bubble p {
  margin: 0;
  color: #e0d1bf;
}

.message-compose {
  border-top: 1px solid rgba(169, 130, 86, 0.14);
  padding: 0.75rem;
}

.message-compose textarea {
  width: 100%;
  min-height: 4.8rem;
  resize: vertical;
  padding: 0.8rem;
}

.compose-tools {
  display: grid;
  grid-template-columns: auto auto 1fr 7rem;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.compose-tools span {
  justify-self: end;
  color: #8f8277;
}

.target-silhouette {
  width: 12rem;
  height: 12rem;
  margin: 0 auto 1rem;
  border: 1px solid rgba(169, 130, 86, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 54%, #080707 0 2.8rem, transparent 2.9rem),
    radial-gradient(circle at 50% 50%, rgba(215, 37, 44, 0.7), transparent 4.5rem),
    #090807;
}

.message-target-card div:not(.target-silhouette) {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.48rem 0;
  border-top: 1px solid rgba(169, 130, 86, 0.14);
  color: #b8a898;
}

.message-target-card strong {
  color: #d7c4ac;
  font-weight: normal;
}

.delete-conversation {
  width: 100%;
  margin-top: 1rem;
  border: 1px solid rgba(220, 42, 49, 0.64) !important;
  color: #f33b41 !important;
  background: rgba(75, 8, 10, 0.45) !important;
  text-align: center !important;
  text-transform: uppercase;
}

.inventory-page {
  min-height: 100vh;
  padding: 0.75rem 1rem 1rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.88)),
    radial-gradient(circle at 58% 8%, rgba(146, 17, 24, 0.2), transparent 18rem),
    #050505;
}

.inventory-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.62fr) minmax(42rem, 1.9fr) minmax(18rem, 0.86fr);
  gap: 1rem;
  margin-top: 1rem;
}

.inventory-main {
  min-width: 0;
}

.inventory-main h1 {
  color: #e2c79d;
  font-size: 2.4rem;
  text-transform: uppercase;
}

.inventory-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 1rem;
}

.inventory-tabs button,
.item-toolbar button,
.item-toolbar select,
.item-pages button {
  min-height: 2.8rem;
  border: 1px solid rgba(169, 130, 86, 0.24);
  color: #d8c7b2;
  background: rgba(8, 7, 6, 0.88);
  text-transform: uppercase;
}

.inventory-tabs button.active,
.item-toolbar button.active {
  border-color: rgba(216, 36, 43, 0.72);
  color: #f33b41;
  background: linear-gradient(180deg, rgba(117, 14, 18, 0.72), rgba(30, 7, 8, 0.92));
}

.item-toolbar {
  display: grid;
  grid-template-columns: repeat(8, minmax(4.2rem, auto)) minmax(8rem, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 1rem;
}

.item-toolbar span {
  color: #d8c7b2;
  text-align: right;
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(4.6rem, 1fr));
  gap: 0.55rem;
}

.item-card {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid rgba(169, 130, 86, 0.28);
  background: rgba(7, 6, 5, 0.9);
  cursor: pointer;
}

.item-card.selected {
  border-color: #9b39d6;
  box-shadow: inset 0 0 0 1px rgba(155, 57, 214, 0.42), 0 0 18px rgba(117, 36, 160, 0.34);
}

.item-card span {
  position: absolute;
  inset: 0.55rem;
  display: block;
  background:
    radial-gradient(circle at 50% 50%, rgba(169, 130, 86, 0.45), transparent 2rem),
    linear-gradient(150deg, #17110f, #050505);
}

.item-card em {
  position: absolute;
  right: 0.45rem;
  bottom: 0.35rem;
  color: #d8c7b2;
  font-style: normal;
}

.item-card.weapon span,
.item-card.dagger span {
  background:
    linear-gradient(135deg, transparent 42%, #d9d0c7 43% 49%, transparent 50%),
    radial-gradient(circle at 55% 60%, rgba(135, 43, 152, 0.72), transparent 2.8rem),
    #070606;
}

.item-card.potion span,
.item-card.vial span,
.item-card.bottle span,
.item-card.jar span {
  background:
    radial-gradient(circle at 50% 62%, rgba(170, 29, 36, 0.72), transparent 1.4rem),
    linear-gradient(180deg, transparent 0 28%, #b08965 29% 36%, transparent 37%),
    #070606;
}

.item-card.skull span,
.item-card.mask span {
  background:
    radial-gradient(circle at 50% 42%, #b9aa99 0 1.35rem, transparent 1.42rem),
    radial-gradient(circle at 42% 40%, #080706 0 0.25rem, transparent 0.3rem),
    radial-gradient(circle at 58% 40%, #080706 0 0.25rem, transparent 0.3rem),
    #070606;
}

.item-card.heart span {
  background:
    radial-gradient(circle at 43% 45%, #8f171d 0 1rem, transparent 1.08rem),
    radial-gradient(circle at 58% 45%, #8f171d 0 1rem, transparent 1.08rem),
    linear-gradient(135deg, transparent 0 42%, #8f171d 43% 64%, transparent 65%),
    #070606;
}

.item-card.relic span,
.item-card.shard span {
  background:
    radial-gradient(circle at 50% 50%, #8d4bd3 0 1rem, transparent 1.05rem),
    radial-gradient(circle at 50% 50%, rgba(141, 75, 211, 0.55), transparent 2.5rem),
    #070606;
}

.item-card.lantern span {
  background:
    radial-gradient(circle at 50% 60%, #df9b45 0 1.1rem, transparent 1.18rem),
    radial-gradient(circle at 50% 55%, rgba(223, 155, 69, 0.45), transparent 2.7rem),
    #070606;
}

.item-pages {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 1rem 0;
  color: #d8c7b2;
}

.inventory-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  border-top: 1px solid rgba(169, 130, 86, 0.18);
  padding-top: 1rem;
}

.inventory-footer h2,
.inventory-detail h3 {
  color: #d8bd87;
  font-size: 1rem;
  text-transform: uppercase;
}

.inventory-footer strong {
  display: block;
  color: #e1d0b8;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.inventory-footer label {
  display: block;
  color: #b8a898;
  margin: 0.6rem 0;
}

.inventory-footer input[type="search"] {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid rgba(169, 130, 86, 0.22);
  color: var(--ink);
  background: rgba(0, 0, 0, 0.56);
  padding: 0 0.8rem;
}

.inventory-detail {
  align-self: start;
}

.detail-item-art {
  width: 12rem;
  height: 12rem;
  margin: 0 auto 1rem;
  background:
    linear-gradient(135deg, transparent 42%, #ddd5cc 43% 49%, transparent 50%),
    radial-gradient(circle at 55% 60%, rgba(135, 43, 152, 0.72), transparent 4rem),
    #070606;
}

.inventory-detail h2 {
  color: #c978ff;
  font-size: 1.55rem;
}

.inventory-detail p,
.inventory-detail li,
.inventory-detail span {
  color: #b8a898;
}

.inventory-detail > strong {
  display: block;
  color: #c978ff;
  text-transform: uppercase;
}

.item-detail-stats,
.item-value-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  border-top: 1px solid rgba(169, 130, 86, 0.16);
  border-bottom: 1px solid rgba(169, 130, 86, 0.16);
  margin: 1rem 0;
  padding: 1rem 0;
}

.item-detail-stats strong,
.item-value-row strong {
  display: block;
  color: #e1d0b8;
  font-size: 1.2rem;
  font-weight: normal;
}

.inventory-detail .flavor {
  font-style: italic;
}

.inventory-detail ul {
  padding-left: 1.1rem;
}

.equip-button {
  margin-top: 1rem;
}

.danger-button {
  border-color: rgba(220, 42, 49, 0.64);
  color: #f33b41;
  background: rgba(75, 8, 10, 0.45);
}

.inventory-system-page {
  display: grid;
  gap: var(--space-md);
}

.inventory-topbar {
  display: grid;
  gap: var(--space-sm);
  border: 1px solid rgba(201, 166, 107, 0.16);
  padding: var(--card-padding);
  background:
    linear-gradient(135deg, rgba(18, 13, 10, 0.82), rgba(7, 6, 6, 0.9)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.03) 0 1px, transparent 1px 8px);
}

.inventory-meter-row,
.inventory-control-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.inventory-meter {
  display: grid;
  gap: 0.15rem;
}

.inventory-meter span,
.inventory-control-row span,
.inventory-result-row,
.inventory-possession-card small,
.inventory-detail-panel span,
.equipped-slot span {
  color: #a99983;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.inventory-meter strong {
  color: #f0d8b6;
  font-size: var(--font-lg);
}

.burden-heavy strong {
  color: #d8bd87;
}

.burden-encumbered strong,
.burden-overburdened strong {
  color: #f33b41;
}

.inventory-control-row label {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.inventory-control-row input,
.inventory-control-row select {
  width: 100%;
  min-height: 2.6rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  color: #eadcc8;
  background: rgba(0, 0, 0, 0.42);
  padding: 0 0.65rem;
}

.inventory-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.inventory-filter-row button {
  min-height: 2.25rem;
  padding-inline: 0.65rem;
}

.inventory-filter-row button.active {
  border-color: rgba(214, 59, 47, 0.8) !important;
  color: #fff0d2 !important;
  background: linear-gradient(180deg, rgba(117, 14, 18, 0.86), rgba(30, 7, 8, 0.94)) !important;
}

.inventory-system-layout {
  display: grid;
  grid-template-columns: minmax(22rem, 1.6fr) minmax(18rem, 0.95fr) minmax(12rem, 0.58fr);
  gap: var(--space-md);
  align-items: start;
}

.inventory-grid-panel {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.inventory-result-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  border-bottom: 1px solid rgba(201, 166, 107, 0.16);
  padding-bottom: var(--space-xs);
}

.inventory-possession-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr));
  gap: var(--space-sm);
}

.inventory-possession-card {
  position: relative;
  display: grid;
  gap: 0.24rem;
  min-height: 10.2rem;
  padding: var(--card-padding) !important;
  border: 1px solid rgba(201, 166, 107, 0.24) !important;
  color: #eadcc8 !important;
  background:
    linear-gradient(rgba(7, 6, 5, 0.78), rgba(9, 6, 6, 0.92)),
    radial-gradient(circle at 50% 20%, rgba(201, 166, 107, 0.08), transparent 5rem) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75) !important;
  text-align: left;
  cursor: pointer;
}

.inventory-possession-card:hover,
.inventory-possession-card.selected {
  transform: translateY(-1px);
  border-color: rgba(214, 59, 47, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(214, 59, 47, 0.28), 0 0 18px rgba(117, 14, 18, 0.28) !important;
}

.inventory-possession-card strong {
  color: #f0d8b6;
  font-size: var(--font-sm);
  line-height: 1.15;
}

.inventory-possession-card em {
  position: absolute;
  right: 0.45rem;
  top: 0.42rem;
  color: #d8bd87;
  font-size: var(--font-xs);
  font-style: normal;
  text-transform: uppercase;
}

.possession-icon,
.detail-relic-art {
  display: block;
  border: 1px solid rgba(201, 166, 107, 0.2);
  background:
    radial-gradient(circle at 50% 50%, rgba(201, 166, 107, 0.42), transparent 2rem),
    linear-gradient(150deg, #17110f, #050505);
}

.possession-icon {
  width: 100%;
  aspect-ratio: 1.25;
}

.icon-relics {
  background:
    radial-gradient(circle at 50% 50%, rgba(141, 75, 211, 0.75), transparent 1.9rem),
    radial-gradient(circle at 50% 50%, rgba(141, 75, 211, 0.34), transparent 3rem),
    #070606;
}

.icon-consumables {
  background:
    radial-gradient(circle at 50% 62%, rgba(170, 29, 36, 0.72), transparent 1.6rem),
    linear-gradient(180deg, transparent 0 30%, #b08965 31% 38%, transparent 39%),
    #070606;
}

.icon-materials {
  background:
    repeating-linear-gradient(45deg, rgba(201, 166, 107, 0.36) 0 3px, transparent 3px 10px),
    radial-gradient(circle at 45% 50%, rgba(120, 120, 112, 0.42), transparent 2.4rem),
    #070606;
}

.icon-quest-items,
.icon-ritual-items {
  background:
    radial-gradient(circle at 50% 50%, rgba(139, 14, 20, 0.65), transparent 2rem),
    linear-gradient(135deg, transparent 38%, rgba(229, 211, 181, 0.5) 39% 44%, transparent 45%),
    #070606;
}

.icon-valuables,
.icon-curios {
  background:
    radial-gradient(circle at 50% 45%, rgba(216, 189, 135, 0.68), transparent 1.7rem),
    radial-gradient(circle at 50% 55%, rgba(139, 14, 20, 0.3), transparent 3rem),
    #070606;
}

.inventory-card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.inventory-card-flags span {
  border: 1px solid rgba(201, 166, 107, 0.18);
  color: #cdbb9f;
  padding: 0.12rem 0.28rem;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.rarity-forbidden,
.rarity-nightmare,
.rarity-legendary {
  border-color: rgba(155, 57, 214, 0.48) !important;
}

.rarity-nightmare {
  box-shadow: inset 0 0 0 1px rgba(155, 57, 214, 0.22), 0 0 20px rgba(88, 21, 117, 0.22) !important;
}

.rarity-legendary {
  border-color: rgba(216, 189, 135, 0.68) !important;
}

.inventory-detail-panel,
.equipped-relics-panel {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
  display: grid;
  gap: var(--space-sm);
}

.detail-relic-art {
  width: min(100%, 11rem);
  aspect-ratio: 1;
  margin-inline: auto;
}

.inventory-detail-panel h2 {
  color: #f0d8b6;
  font-size: var(--font-xl);
}

.inventory-detail-panel h3 {
  color: var(--gold);
  font-size: var(--font-sm);
  text-transform: uppercase;
}

.inventory-detail-panel p,
.inventory-detail-panel li {
  color: #cdbb9f;
}

.inventory-detail-panel .flavor {
  color: #d8bd87;
  font-style: italic;
}

.inventory-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inventory-stat-grid .panel-card {
  display: grid;
  gap: 0.1rem;
}

.inventory-stat-grid strong,
.equipped-slot strong {
  color: #f0d8b6;
}

.inventory-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.inventory-action-row button {
  min-height: 2.45rem;
}

.inventory-action-row button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.inventory-action-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: var(--space-sm);
}

.inventory-action-hints span {
  border: 1px solid rgba(201, 166, 107, 0.18);
  background: rgba(0, 0, 0, 0.24);
  color: var(--muted);
  padding: 0.25rem 0.4rem;
  font-size: var(--font-xs);
}

.inventory-notice {
  border-color: rgba(216, 189, 135, 0.34);
  color: #f0d8b6;
}

.equipped-slot {
  width: 100%;
  display: grid;
  gap: 0.1rem;
  border-top: 1px solid rgba(201, 166, 107, 0.14);
  padding-top: var(--space-sm);
  text-align: left;
  color: inherit;
  background: transparent;
}

button.equipped-slot:not(:disabled):hover {
  color: #f0d8b6;
}

button.equipped-slot:disabled {
  opacity: 0.72;
  cursor: default;
}

.inventory-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  background: rgba(3, 2, 2, 0.78);
  backdrop-filter: blur(4px);
}

.inventory-modal {
  width: min(520px, 100%);
  max-height: 85vh;
  overflow: auto;
  border: 1px solid rgba(201, 166, 107, 0.34);
  background:
    linear-gradient(180deg, rgba(46, 23, 18, 0.92), rgba(8, 7, 6, 0.96)),
    var(--panel-bg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62);
  padding: var(--panel-padding);
}

.inventory-modal h2 {
  color: var(--ash-gold);
  margin: 0 0 var(--space-sm);
}

.inventory-modal p {
  color: var(--bone);
}

.inventory-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.shadowmark-page {
  min-height: 100vh;
  padding: 0.75rem 1rem 1rem;
  background:
    linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.86)),
    radial-gradient(circle at 50% 7%, rgba(146, 17, 24, 0.24), transparent 20rem),
    #050505;
}

.shadowmark-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.62fr) minmax(42rem, 1.9fr) minmax(17rem, 0.8fr);
  gap: 1rem;
  margin-top: 1rem;
}

.shadowmark-main,
.shadowmark-right {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.gift-shadowmark-panel h2,
.shadowmark-status-hero h1,
.shadowmark-benefits h2,
.offerings-panel h2,
.shadowmark-overview-panel h2,
.shadowmark-levels-panel h2,
.extend-status-panel h2 {
  color: #d8bd87;
  text-transform: uppercase;
}

.gift-shadowmark-panel p,
.shadowmark-status-hero p,
.shadowmark-benefits p,
.extend-status-panel p {
  color: #b8a898;
}

.shadowmark-status-hero {
  text-align: center;
}

.shadowmark-status-hero h1 {
  margin-bottom: 0.4rem;
  font-size: clamp(2.4rem, 5vw, 4rem);
}

.shadowmark-status-hero p strong {
  color: #f33b41;
}

.current-shadowmark-card {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1.2rem;
  margin-top: 1.2rem;
  padding: 1.2rem;
  border: 1px solid rgba(169, 130, 86, 0.24);
  text-align: left;
}

.shadowmark-sigil {
  width: 10rem;
  height: 10rem;
  background:
    var(--asset-shadowmark) center / contain no-repeat,
    radial-gradient(circle, rgba(213, 31, 39, 0.18), transparent 68%);
  filter: drop-shadow(0 0 20px rgba(189, 24, 32, 0.45));
}

.current-shadowmark-card span,
.status-pill-grid span,
.shadowmark-overview-panel span,
.shadowmark-levels-panel span,
.extend-status-panel span {
  display: block;
  color: #a99989;
}

.current-shadowmark-card h2 {
  color: #e7d3bc;
  font-size: 2rem;
  font-weight: normal;
}

.current-shadowmark-card h2 em {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #c21d24;
  border-radius: 50%;
  color: #f33b41;
  font-style: normal;
  font-size: 1rem;
}

.status-pill-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(169, 130, 86, 0.16);
}

.status-pill-grid strong {
  color: #e1d0b8;
  font-weight: normal;
}

.manage-status-button {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 16rem);
}

.benefit-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  text-align: center;
}

.benefit-row span {
  display: block;
  width: 4.6rem;
  height: 4.6rem;
  margin: 0 auto 0.7rem;
  border: 1px solid rgba(169, 130, 86, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(189, 24, 32, 0.38), transparent 2.5rem),
    #080706;
}

.benefit-row strong {
  color: #e1d0b8;
  font-weight: normal;
}

.benefit-row small {
  display: block;
  color: #b8a898;
}

.offerings-panel .dash-panel-title span {
  color: #d8bd87;
}

.offering-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

.offering-grid article {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  min-height: 18rem;
  padding: 0.8rem;
  border: 1px solid rgba(169, 130, 86, 0.24);
  background: rgba(8, 7, 6, 0.7);
  text-align: center;
}

.offering-art {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
  border: 1px solid rgba(169, 130, 86, 0.22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(189, 24, 32, 0.65), transparent 2.5rem), #070606;
}

.offering-art.blue {
  background: radial-gradient(circle, rgba(66, 134, 190, 0.65), transparent 2.5rem), #070606;
}

.offering-art.gold {
  background: radial-gradient(circle, rgba(206, 154, 60, 0.72), transparent 2.5rem), #070606;
}

.offering-art.violet {
  background: radial-gradient(circle, rgba(139, 75, 211, 0.7), transparent 2.5rem), #070606;
}

.offering-grid h3 {
  color: #e1d0b8;
  font-size: 0.95rem;
}

.offering-grid p,
.offering-grid small {
  color: #b8a898;
}

.offering-grid strong {
  color: #c978ff;
  font-size: 1.1rem;
}

.offering-grid button {
  align-self: end;
  min-height: 2.2rem;
  border: 1px solid rgba(169, 130, 86, 0.32);
  color: #d8bd87;
  background: rgba(0, 0, 0, 0.42);
  text-transform: uppercase;
}

.view-offerings-button {
  display: block;
  width: min(100%, 16rem);
  margin: 1rem auto;
}

.shadowmark-warning-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-top: 1px solid rgba(169, 130, 86, 0.16);
  padding-top: 1rem;
}

.shadowmark-warning-row p {
  color: #b8a898;
  text-align: center;
}

.shadowmark-overview-panel div,
.shadowmark-levels-panel div {
  padding: 0.9rem 0;
  border-top: 1px solid rgba(169, 130, 86, 0.16);
}

.shadowmark-overview-panel strong,
.shadowmark-levels-panel strong {
  color: #e1d0b8;
  font-weight: normal;
}

.shadowmark-levels-panel .active {
  border: 1px solid rgba(220, 42, 49, 0.54);
  padding: 0.9rem;
  color: #f33b41;
  background: rgba(80, 8, 10, 0.32);
}

.extend-status-panel {
  display: grid;
  gap: 0.75rem;
}

.extend-status-panel button:not(.dash-button) {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  min-height: 4rem;
  border: 1px solid rgba(169, 130, 86, 0.24);
  color: #e1d0b8;
  background: rgba(9, 8, 7, 0.82);
  padding: 0.8rem;
  text-align: left;
}

.extend-status-panel em {
  grid-column: 2;
  color: #d8bd87;
  font-style: normal;
}

.payment-note {
  border-top: 1px solid rgba(169, 130, 86, 0.16);
  padding-top: 0.8rem;
  text-align: center;
}

.payment-row {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  color: #e1d0b8;
}

.app-shell {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0, rgba(214, 106, 26, 0.08), transparent 28rem),
    radial-gradient(circle at 90% 10%, rgba(138, 44, 111, 0.12), transparent 24rem),
    var(--void-black);
}

.prototype-shell {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.prototype-shell .sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) 18rem;
  gap: 0.8rem;
  align-items: center;
  border-right: 0;
  border-bottom: var(--brand-border);
  padding: 0.55rem 0.8rem;
  background:
    linear-gradient(180deg, rgba(6, 8, 10, 0.98), rgba(7, 7, 8, 0.94)),
    radial-gradient(circle at 8% 20%, rgba(214, 106, 26, 0.18), transparent 12rem);
}

.prototype-shell .brand {
  border-bottom: 0;
  padding-bottom: 0;
}

.prototype-shell .brand-mark {
  width: 2.9rem;
  height: 2.9rem;
}

.prototype-shell .brand h1 {
  font-size: 1.15rem;
}

.prototype-shell .brand p {
  color: var(--red-bright);
}

.prototype-shell .nav-list {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-left: 1px solid rgba(201, 166, 107, 0.12);
  border-right: 1px solid rgba(201, 166, 107, 0.12);
}

.prototype-shell .nav-item {
  min-height: 3.25rem;
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid rgba(201, 166, 107, 0.12);
  border-right: 1px solid rgba(201, 166, 107, 0.12);
  text-align: center;
  padding: 0.55rem 0.4rem;
  text-transform: uppercase;
}

.prototype-shell .whisper-card {
  margin-top: 0;
  padding: 0.75rem;
}

.prototype-shell .whisper-card h2 {
  margin-bottom: 0.25rem;
}

.prototype-shell .whisper-card p {
  margin-bottom: 0;
  font-size: 0.78rem;
}

.prototype-shell .main {
  padding: 0.8rem;
}

.sidebar {
  border-right: 1px solid var(--line);
  background:
    linear-gradient(rgba(6, 7, 7, 0.82), rgba(6, 7, 7, 0.96)),
    radial-gradient(circle at top, rgba(148, 43, 52, 0.28), transparent 20rem);
  padding: 1rem;
}

.brand {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  background: #170d0d;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.brand h1 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1;
  text-transform: uppercase;
}

.brand p,
.eyebrow,
small,
.player-pill span {
  color: var(--muted);
  font-size: 0.78rem;
}

.nav-list {
  display: grid;
  gap: 0.4rem;
  margin: 1rem 0;
}

.nav-item,
.ghost-btn,
.primary-btn,
.text-btn,
.choice-stack button,
.reply-box button,
.action-cards button,
.action-panel button,
.region-tile {
  border: var(--brand-border);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(19, 25, 31, 0.94), rgba(13, 12, 11, 0.96)),
    rgba(24, 18, 16, 0.88);
  cursor: pointer;
}

.nav-item {
  width: 100%;
  padding: 0.75rem 0.8rem;
  text-align: left;
}

.nav-item.active,
.primary-btn,
.region-tile.active {
  border-color: rgba(214, 106, 26, 0.72);
  background: linear-gradient(180deg, rgba(214, 106, 26, 0.22), rgba(139, 14, 20, 0.26));
  box-shadow: inset 0 -1px 0 rgba(201, 166, 107, 0.28), var(--brand-glow);
}

.primary-btn {
  position: relative;
  border-color: transparent;
  background: transparent;
  overflow: hidden;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.whisper-card,
.card,
.ai-panel,
.scene-panel {
  border: var(--brand-border);
  background:
    linear-gradient(180deg, rgba(18, 33, 47, 0.34), rgba(10, 12, 16, 0.92)),
    rgba(17, 15, 13, 0.9);
  box-shadow: 0 18px 42px var(--shadow);
}

.whisper-card {
  padding: 1rem;
  margin-top: 1.4rem;
  background:
    linear-gradient(rgba(26, 18, 12, 0.82), rgba(13, 11, 10, 0.95)),
    repeating-linear-gradient(45deg, rgba(205, 165, 106, 0.05) 0 1px, transparent 1px 6px);
}

.whisper-card h2 {
  font-size: 1rem;
}

.main {
  min-width: 0;
  padding: 1rem;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.8rem;
}

.topbar strong {
  display: block;
}

.meters {
  display: flex;
  gap: 0.75rem;
}

.meters div,
.player-pill {
  border: 1px solid rgba(205, 165, 106, 0.25);
  background: rgba(12, 10, 9, 0.78);
  padding: 0.45rem 0.65rem;
}

.meters span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
}

.player-pill {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.portrait {
  border: 1px solid var(--gold-dim);
  background:
    radial-gradient(circle at 52% 34%, rgba(230, 207, 170, 0.38), transparent 0.35rem),
    radial-gradient(circle at 48% 30%, #1d1b1b 0 1.4rem, transparent 1.45rem),
    linear-gradient(150deg, #1a1715, #0a0909);
}

.portrait.small {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
}

.portrait.large {
  width: min(100%, 16rem);
  aspect-ratio: 4 / 5;
}

.view {
  display: none;
  padding-top: 1rem;
}

.view.active {
  display: block;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25rem;
  gap: 1rem;
}

.scene-panel {
  min-height: 25rem;
  position: relative;
  overflow: hidden;
}

.tavern-scene {
  background:
    linear-gradient(90deg, rgba(4, 4, 4, 0.82), rgba(6, 4, 4, 0.28)),
    radial-gradient(circle at 54% 54%, rgba(214, 134, 59, 0.38), transparent 5rem),
    radial-gradient(circle at 25% 52%, rgba(202, 90, 42, 0.22), transparent 9rem),
    linear-gradient(135deg, #191311 0%, #070606 60%, #180e12 100%);
}

.tavern-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(205, 165, 106, 0.08) 44% 45%, transparent 45%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 8rem);
  opacity: 0.7;
}

.scene-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem;
  max-width: 45rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9) 34%);
}

.scene-overlay h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  margin-bottom: 0.7rem;
}

.action-row {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.primary-btn,
.ghost-btn {
  padding: 0.72rem 1rem;
}

.text-btn {
  padding: 0.25rem 0.45rem;
  color: var(--gold);
  background: transparent;
}

.ai-panel,
.card {
  padding: 1rem;
}

.panel-heading.split {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.npc-row {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: 0.8rem;
}

.old-ash {
  width: 5.25rem;
  height: 6rem;
  background:
    radial-gradient(circle at 45% 34%, #b07f52 0 0.5rem, transparent 0.56rem),
    radial-gradient(circle at 55% 34%, #b07f52 0 0.5rem, transparent 0.56rem),
    radial-gradient(circle at 50% 45%, #5d3d27 0 2.2rem, transparent 2.3rem),
    linear-gradient(#21180f, #090807);
}

.choice-stack {
  display: grid;
  gap: 0.4rem;
  margin: 1rem 0;
}

.choice-stack button,
.reply-box input,
.reply-box button {
  padding: 0.62rem;
}

.reply-box {
  display: grid;
  grid-template-columns: 1fr 3rem;
}

.reply-box input {
  min-width: 0;
  border: 1px solid var(--line);
  border-right: 0;
  background: #0b0a09;
  color: var(--ink);
}

.ai-response {
  min-height: 3.2rem;
  color: var(--gold);
  margin-top: 0.8rem;
}

.dashboard-grid,
.profile-grid,
.companion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.progress,
.meter {
  height: 0.5rem;
  border: 1px solid #32261c;
  background: #090807;
  overflow: hidden;
}

.progress span,
.meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red), #e16f61);
}

.meter.gold span {
  background: linear-gradient(90deg, #c6933d, #efd18d);
}

.meter.violet span {
  background: linear-gradient(90deg, #5f43a5, #b796ff);
}

.event,
.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(205, 165, 106, 0.18);
  padding: 0.62rem 0;
}

.event span,
.stat-row strong {
  color: var(--gold);
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1rem;
}

.map-art-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(205, 165, 106, 0.28);
  background: #0d0c0a;
}

.map-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.realm-hotspot {
  position: absolute;
  border: 1px solid rgba(205, 165, 106, 0.48);
  color: #ead9c0;
  background:
    radial-gradient(circle at 50% 50%, rgba(155, 18, 25, 0.5), rgba(6, 5, 5, 0.74) 62%),
    rgba(0, 0, 0, 0.64);
  box-shadow: 0 0 18px rgba(189, 24, 32, 0.34);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.map-art-shell .realm-hotspot {
  display: none;
}

.realm-hotspot strong,
.realm-hotspot span {
  display: block;
}

.realm-hotspot strong {
  font-size: 0.8rem;
}

.realm-hotspot span {
  color: #82d35f;
  font-size: 0.65rem;
}

.realm-hotspot.never-wake {
  left: 42%;
  top: 45%;
  width: 8rem;
  min-height: 3rem;
}

.realm-hotspot:hover {
  border-color: rgba(239, 58, 64, 0.78);
  color: #fff;
  box-shadow: 0 0 26px rgba(219, 42, 48, 0.54);
}

.region-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.region-tile {
  display: grid;
  gap: 0.25rem;
  min-height: 5.6rem;
  padding: 0.8rem;
  text-align: left;
}

.region-tile.locked {
  opacity: 0.58;
  cursor: pointer;
}

.region-tile.unlocked {
  border-color: rgba(181, 22, 29, 0.48);
}

.region-tile span,
.region-tile small {
  color: var(--muted);
}

.region-tile span b {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-right: 0.3rem;
  border: 1px solid rgba(205, 165, 106, 0.45);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.78rem;
}

.region-tile strong {
  color: var(--gold);
  font-size: 1.05rem;
}

.region-tile.active {
  border-color: rgba(239, 58, 64, 0.7);
  box-shadow: 0 0 20px rgba(181, 22, 29, 0.22);
}

.region-tile.locked strong {
  color: rgba(205, 165, 106, 0.76);
}

.location-list,
.inventory-list,
.intel-card {
  margin-top: 1rem;
  border-top: 1px solid rgba(205, 165, 106, 0.2);
  padding-top: 0.8rem;
}

.location-list h3,
.inventory-list h3 {
  margin-bottom: 0.45rem;
}

.location-list p {
  display: grid;
  gap: 0.15rem;
  color: var(--muted);
  margin-bottom: 0.7rem;
}

.location-list strong {
  color: var(--ink);
}

.location-list .requirement-row {
  border-left: 2px solid rgba(205, 165, 106, 0.28);
  padding-left: 0.65rem;
}

.location-list .requirement-row.unmet strong {
  color: #d45f55;
}

.location-list .requirement-row.met strong {
  color: #97c96b;
}

.atlas-region-meta,
.atlas-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 0;
}

.atlas-region-meta span,
.atlas-reward {
  border: 1px solid rgba(205, 165, 106, 0.28);
  background: rgba(5, 4, 4, 0.42);
  color: var(--gold);
  padding: 0.35rem 0.5rem;
  font-size: 0.76rem;
}

.region-detail {
  align-self: start;
}

.story-quest-shell {
  display: grid;
  grid-template-columns: minmax(14rem, 16.5rem) minmax(18rem, 1fr) minmax(17rem, 21rem);
  gap: 1rem;
  align-items: start;
}

.story-sidebar,
.story-right {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.story-main {
  min-width: 0;
}

.region-select {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(205, 165, 106, 0.42);
  background: rgba(7, 6, 6, 0.72);
  color: var(--ink);
  padding: 0.75rem 0.8rem;
  text-align: left;
}

.story-quest-list,
.story-main,
.objective-list {
  display: grid;
  gap: 0.75rem;
}

.story-quest-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.65rem;
  width: 100%;
  min-height: 5.5rem;
  border: 1px solid rgba(205, 165, 106, 0.22);
  background:
    linear-gradient(90deg, rgba(156, 38, 48, 0.12), transparent),
    rgba(7, 6, 6, 0.52);
  color: var(--muted);
  padding: 0.7rem;
  text-align: left;
}

.story-quest-card.active {
  color: var(--ink);
  border-color: rgba(205, 165, 106, 0.55);
  background:
    linear-gradient(90deg, rgba(156, 38, 48, 0.34), rgba(8, 10, 12, 0.72)),
    url("assets/story/region1/hollow-bride-story-board.png") center / cover;
  box-shadow: inset 0 0 0 999px rgba(5, 6, 8, 0.58);
}

.story-quest-card.locked {
  opacity: 0.72;
}

.story-quest-card strong,
.story-quest-card small,
.story-quest-card em {
  position: relative;
  z-index: 1;
}

.story-quest-card strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.05;
}

.story-quest-card small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
  grid-column: 2;
}

.story-quest-card em {
  position: absolute;
  right: 0.7rem;
  bottom: 0.55rem;
}

.quest-card-icon {
  color: var(--red-bright);
  font-size: 1.4rem;
  line-height: 1;
}

.story-quest-link {
  position: relative;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.7rem;
  text-align: left;
  border: 1px solid rgba(205, 165, 106, 0.24);
  background:
    linear-gradient(90deg, rgba(8, 10, 12, 0.9), rgba(18, 16, 14, 0.72)),
    radial-gradient(circle at 0% 50%, rgba(156, 38, 48, 0.18), transparent 38%);
  color: var(--ink);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
}

.story-quest-link strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.18;
}

.story-quest-link em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  white-space: nowrap;
}

.story-quest-link.active {
  border-color: rgba(220, 168, 94, 0.72);
  background:
    linear-gradient(90deg, rgba(156, 38, 48, 0.32), rgba(8, 10, 12, 0.84)),
    url("assets/story/region1/hollow-bride-story-board.png") center / cover;
  box-shadow:
    inset 0 0 0 999px rgba(5, 6, 8, 0.68),
    0 0 0 1px rgba(220, 168, 94, 0.12);
}

.story-quest-link.locked {
  opacity: 0.58;
}

.story-quest-link.completed .quest-card-icon {
  color: var(--green);
}

.story-quest-link.in-progress .quest-card-icon,
.story-quest-link.available .quest-card-icon {
  color: var(--gold);
}

.other-regions {
  border-top: 1px solid rgba(205, 165, 106, 0.18);
  padding-top: 0.8rem;
}

.other-regions p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.45rem 0;
  color: var(--muted);
  border-bottom: 1px solid rgba(205, 165, 106, 0.12);
}

.old-ash-log {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  border-top: 1px solid rgba(205, 165, 106, 0.2);
  padding-top: 0.85rem;
}

.old-ash-portrait {
  width: 3.25rem;
  aspect-ratio: 1;
  border: 1px solid rgba(205, 165, 106, 0.32);
  background:
    radial-gradient(circle at 50% 28%, #2d2926 0 0.85rem, transparent 0.9rem),
    linear-gradient(160deg, #171717, #050505);
}

.old-ash-log p,
.related-card p {
  margin: 0.25rem 0;
  color: var(--muted);
}

.detail-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.detail-chip-list span,
.fear-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(205, 165, 106, 0.25);
  background: rgba(8, 10, 12, 0.7);
  color: var(--ink);
  font-size: 0.78rem;
}

.enemy-codex-card {
  overflow: hidden;
}

.enemy-codex-grid,
.encounter-table-list {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.6rem;
}

.enemy-card {
  position: relative;
  display: grid;
  gap: 0.4rem;
  padding: 0.75rem;
  border: 1px solid rgba(205, 165, 106, 0.2);
  background:
    linear-gradient(135deg, rgba(5, 7, 9, 0.92), rgba(22, 15, 14, 0.75)),
    radial-gradient(circle at 100% 0%, rgba(156, 38, 48, 0.18), transparent 35%);
}

.enemy-card-top {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
}

.enemy-card-top span {
  display: grid;
  place-items: center;
  min-height: 2rem;
  border: 1px solid rgba(156, 38, 48, 0.6);
  color: var(--red-bright);
  font-size: 0.7rem;
}

.enemy-card strong {
  color: var(--ink);
  line-height: 1.1;
}

.enemy-card small,
.enemy-card p,
.enemy-stats {
  color: var(--muted);
}

.enemy-card p {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.42;
}

.enemy-card.locked {
  opacity: 0.62;
}

.enemy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.enemy-tags em {
  padding: 0.15rem 0.4rem;
  border: 1px solid rgba(138, 124, 108, 0.28);
  color: var(--gold);
  font-size: 0.7rem;
  font-style: normal;
}

.enemy-stats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  font-size: 0.72rem;
}

.enemy-portrait-fallback {
  display: grid;
  place-items: center;
  min-height: 11rem;
  border: 1px solid rgba(205, 165, 106, 0.2);
  background:
    radial-gradient(circle at 50% 28%, rgba(94, 143, 151, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(7, 11, 13, 0.95), rgba(18, 11, 11, 0.84));
  color: var(--gold);
  font-size: 3rem;
}

.encounter-table-list p {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-left: 2px solid rgba(156, 38, 48, 0.72);
  background: rgba(8, 10, 12, 0.48);
  color: var(--muted);
}

.story-hero {
  min-height: 21rem;
  background:
    linear-gradient(90deg, rgba(7, 7, 8, 0.94), rgba(7, 7, 8, 0.62)),
    url("assets/story/region1/hollow-bride-story-board.png") center / cover;
}

.story-breadcrumb {
  color: var(--muted);
  margin-bottom: 1rem;
}

.story-title-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.story-sigil {
  width: 4.5rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(208, 71, 79, 0.55);
  color: var(--red-bright);
  font-size: 2.3rem;
  background: rgba(61, 8, 12, 0.28);
}

.story-hero h1 {
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 0.95;
  color: var(--ink);
}

.story-hero h2 {
  font-size: clamp(1.3rem, 2vw, 2rem);
  color: var(--gold);
}

.story-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(205, 165, 106, 0.2);
  border-bottom: 1px solid rgba(205, 165, 106, 0.2);
  margin-bottom: 1rem;
}

.story-meta-grid div {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  border-right: 1px solid rgba(205, 165, 106, 0.18);
}

.story-meta-grid div:last-child {
  border-right: 0;
}

.story-meta-grid span,
.reward-grid small,
.objective-row small {
  color: var(--muted);
}

.story-meta-grid strong,
.objective-row strong {
  color: var(--ink);
}

.objective-row small {
  display: block;
  margin-top: 0.15rem;
}

.phase-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.6rem;
}

.phase-node {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
  color: var(--muted);
}

.phase-node span {
  width: 3.35rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(205, 165, 106, 0.28);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(4, 5, 6, 0.86);
  font-size: 1.25rem;
}

.phase-node strong {
  font-size: 0.85rem;
}

.phase-node small {
  font-size: 0.78rem;
}

.phase-node.done span {
  border-color: rgba(127, 158, 99, 0.75);
  color: var(--green);
}

.phase-node.active span {
  border-color: rgba(117, 184, 218, 0.78);
  color: #91cdec;
  box-shadow: 0 0 1.2rem rgba(80, 150, 190, 0.28);
}

.objective-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  border-bottom: 1px solid rgba(205, 165, 106, 0.16);
  padding: 0.75rem 0;
}

.objective-row em {
  color: var(--gold);
  font-style: normal;
}

.objective-row.complete em,
.objective-row.complete .objective-diamond {
  color: var(--green);
}

.objective-row.locked {
  opacity: 0.62;
}

.objective-diamond {
  color: var(--gold);
  font-size: 1.35rem;
}

.sr-quest-steps {
  display: none;
}

.story-action-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-top: 1rem;
}

.quest-map-button {
  display: block;
  width: min(18rem, 100%);
  margin: 1rem auto 0;
  border-color: rgba(205, 165, 106, 0.48);
  color: var(--ink);
  background: rgba(7, 6, 6, 0.68);
}

.story-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.story-tabs button {
  padding: 0.55rem 0.35rem;
  color: var(--gold);
  border-color: rgba(205, 165, 106, 0.2);
  background: rgba(7, 6, 6, 0.55);
}

.story-tabs .active {
  color: var(--ink);
  border-bottom-color: var(--gold);
  background: rgba(156, 38, 48, 0.22);
}

.horror-feature {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
  gap: 0.85rem;
}

.horror-feature img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border: 1px solid rgba(205, 165, 106, 0.28);
  filter: saturate(0.8);
}

.horror-feature h2,
.rewards-card h2,
.endings-card h2,
.related-card h2 {
  color: var(--gold);
}

.horror-feature strong {
  color: var(--red-bright);
}

.horror-feature p {
  color: var(--ink);
  margin: 0.45rem 0;
}

.reward-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}

.reward-grid div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  border-top: 1px solid rgba(205, 165, 106, 0.18);
  padding-top: 0.55rem;
}

.reward-icon {
  font-size: 1.5rem;
}

.reward-icon.blue {
  color: #58b6e8;
}

.reward-icon.gold {
  color: var(--gold);
}

.reward-icon.red {
  color: var(--red-bright);
}

.reward-icon.parchment {
  color: var(--ink);
}

.ending {
  display: grid;
  gap: 0.25rem;
  border: 1px solid rgba(205, 165, 106, 0.2);
  margin-top: 0.6rem;
  padding: 0.65rem 0.75rem;
}

.ending.release {
  border-color: rgba(127, 158, 99, 0.48);
}

.ending.bargain {
  border-color: rgba(141, 110, 232, 0.44);
}

.ending.destroy {
  border-color: rgba(208, 71, 79, 0.46);
}

.ending.release strong {
  color: var(--green);
}

.ending.bargain strong {
  color: var(--violet);
}

.ending.destroy strong {
  color: var(--red-bright);
}

.ending span {
  color: var(--muted);
}

.compact-clues {
  margin-top: 1rem;
}

.quest-steps {
  padding-left: 1.3rem;
}

.quest-steps li {
  margin: 0.72rem 0;
  color: var(--muted);
}

.quest-steps .done {
  color: var(--green);
}

.battle-stage {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) 16rem;
  gap: 1rem;
}

.battle-command-shell {
  display: grid;
  gap: 0.8rem;
}

.battle-subnav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
}

.battle-subnav button {
  min-height: 3.2rem;
  border: var(--brand-border);
  color: var(--gold);
  background: linear-gradient(180deg, rgba(18, 33, 47, 0.64), rgba(6, 6, 7, 0.96));
  text-transform: uppercase;
  cursor: pointer;
}

.battle-subnav button.active {
  color: #f1d8aa;
  border-color: rgba(214, 59, 47, 0.8);
  background: linear-gradient(180deg, rgba(139, 14, 20, 0.5), rgba(10, 12, 16, 0.96));
  box-shadow: inset 0 -2px 0 rgba(214, 106, 26, 0.7), var(--danger-glow);
}

.battle-tab-panel {
  display: none;
  grid-template-columns: 17rem minmax(0, 1fr) 20rem;
  gap: 0.8rem;
}

.battle-tab-panel.active {
  display: grid;
}

.battle-left-rail,
.battle-center,
.battle-right-rail,
.battle-full-panel {
  min-height: 33rem;
}

.battle-full-panel {
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  text-align: center;
}

.battle-list {
  display: grid;
  gap: 0.2rem;
  border: 1px solid rgba(201, 166, 107, 0.18);
  padding: 0.75rem;
  margin-bottom: 0.45rem;
  background: rgba(8, 10, 12, 0.72);
}

.battle-list.selected {
  border-color: rgba(214, 59, 47, 0.78);
  box-shadow: inset 3px 0 0 rgba(214, 59, 47, 0.82);
}

.battle-list strong,
.hunt-card h3,
.battle-right-rail h2 {
  color: var(--gold);
}

.battle-list span,
.battle-mini-panel p,
.hunt-card p,
.hunt-card span,
.battle-right-rail p {
  color: var(--muted);
}

.battle-mini-panel {
  border-top: 1px solid rgba(201, 166, 107, 0.2);
  margin-top: 1rem;
  padding-top: 0.8rem;
}

.battle-mini-panel p {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.battle-threat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: 1rem;
  min-height: 9rem;
  border: var(--brand-border);
  padding: 1rem;
  background:
    linear-gradient(90deg, rgba(10, 12, 16, 0.35), rgba(5, 5, 6, 0.92)),
    url("assets/story/region1/hollow-bride-story-board.png") center / cover;
}

.battle-threat-hero h2 {
  color: var(--gold);
  font-size: 2rem;
}

.battle-threat-meter {
  border-left: 1px solid rgba(201, 166, 107, 0.22);
  padding-left: 1rem;
}

.battle-threat-meter strong {
  display: block;
  color: var(--red-bright);
  font-size: 1.65rem;
  text-transform: uppercase;
}

.battle-hunt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.hunt-card {
  border: var(--brand-border);
  min-height: 20rem;
  padding: 0.75rem;
  background: rgba(8, 10, 12, 0.78);
  text-align: center;
}

.hunt-card.selected {
  border-color: rgba(214, 59, 47, 0.82);
  box-shadow: var(--danger-glow);
}

.hunt-art,
.battle-detail-image {
  min-height: 9.5rem;
  border: 1px solid rgba(201, 166, 107, 0.22);
  margin-bottom: 0.8rem;
  background: radial-gradient(circle at 50% 40%, rgba(214, 59, 47, 0.28), transparent 35%), linear-gradient(135deg, #111923, #050506);
}

.hunt-art.leviathan,
.battle-detail-image.leviathan {
  background-image: linear-gradient(rgba(10, 12, 16, 0.15), rgba(10, 12, 16, 0.62)), url("assets/enemies/region1/elyra-vale.png");
  background-size: cover;
  background-position: center top;
}

.hunt-art.choir {
  background-image: linear-gradient(rgba(10, 12, 16, 0.12), rgba(10, 12, 16, 0.55)), url("assets/enemies/region1/drowned-echoes.png");
  background-size: cover;
  background-position: center;
}

.hunt-art.saint {
  background-image: linear-gradient(rgba(10, 12, 16, 0.12), rgba(10, 12, 16, 0.55)), url("assets/enemies/region1/lantern-wraith.png");
  background-size: cover;
  background-position: center;
}

.hunt-art.court {
  background-image: linear-gradient(rgba(10, 12, 16, 0.12), rgba(10, 12, 16, 0.55)), url("assets/enemies/region1/reefbound.png");
  background-size: cover;
  background-position: center;
}

.battle-detail-image.hunter {
  background-image: linear-gradient(rgba(10, 12, 16, 0.08), rgba(10, 12, 16, 0.58)), url("assets/story/region1/elyra-vale-hollow-bride.png");
  background-size: cover;
  background-position: center;
}

.hunter-registry {
  display: grid;
  gap: 0.4rem;
}

.hunter-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(9rem, 1fr) 8rem 9rem 6rem;
  gap: 0.75rem;
  align-items: center;
  border: 1px solid rgba(201, 166, 107, 0.18);
  padding: 0.55rem;
  background: rgba(6, 8, 10, 0.7);
}

.hunter-row.selected {
  border-color: rgba(214, 59, 47, 0.74);
}

.hunter-row span {
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid rgba(201, 166, 107, 0.22);
  background: url("assets/enemies/region1/drowned-echoes.png") center / cover;
}

.hunter-row em,
.hunter-row small {
  color: var(--muted);
  font-style: normal;
}

.hunter-row b {
  color: var(--red-bright);
  font-weight: 400;
}

.hunter-row button {
  border: 1px solid rgba(201, 166, 107, 0.28);
  color: var(--gold);
  background: rgba(139, 14, 20, 0.2);
  padding: 0.5rem;
}

.battle-status-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  border: var(--brand-border);
  padding: 0.75rem;
  color: var(--gold);
  background: rgba(5, 6, 8, 0.88);
  text-align: center;
}

.battle-runtime {
  display: none;
}

.combatant .portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 1rem;
}

.fighter {
  background:
    radial-gradient(circle at 50% 28%, #211d1c 0 2rem, transparent 2.1rem),
    linear-gradient(150deg, #2c2925, #070707);
}

.rival {
  background:
    radial-gradient(circle at 50% 28%, #050506 0 2rem, transparent 2.1rem),
    linear-gradient(150deg, #111318, #070707);
}

.battle-log {
  min-height: 30rem;
}

.log-line {
  border-top: 1px solid rgba(205, 165, 106, 0.18);
  padding: 0.8rem 0;
}

.action-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}

.action-cards button {
  min-height: 7rem;
  padding: 0.6rem;
}

.profile-card {
  display: grid;
  gap: 0.8rem;
}

.action-panel {
  display: grid;
  gap: 0.55rem;
}

.action-panel button {
  padding: 0.68rem 0.75rem;
  text-align: left;
}

.action-panel p {
  margin: 0.25rem 0 0;
  color: var(--gold);
  min-height: 2.6rem;
}

.inventory-list ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

.log-stack {
  margin-top: 1rem;
}

.wide-left {
  grid-template-columns: minmax(0, 1fr) 24rem;
}

@media (max-width: 1100px) {
  .auth-header,
  .auth-main,
  .auth-footer,
  .dashboard-header,
  .dashboard-grid-page,
  .profile-layout,
  .profile-rank-panel,
  .bond-profile-panel,
  .bond-layout,
  .bond-timeline-layout,
  .battle-layout,
  .bond-hero,
  .bond-timeline-callout,
  .timeline-hero,
  .timeline-entry,
  .duel-row,
  .bond-pair-row,
  .bond-content-grid,
  .messages-layout,
  .message-workspace,
  .inventory-layout,
  .inventory-footer,
  .shadowmark-layout,
  .current-shadowmark-card,
  .status-pill-grid,
  .benefit-row,
  .shadowmark-warning-row,
  .profile-lower-grid,
  .signup-stage[data-signup-step="1"].active,
  .affliction-layout.active,
  .relic-layout.active,
  .appearance-columns,
  .confirm-layout.active {
    grid-template-columns: 1fr;
  }

  .auth-nav {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.6rem;
  }

  .signup-header {
    grid-template-columns: 1fr;
  }

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

  .dashboard-header {
    align-items: start;
  }

  .top-resources {
    flex-wrap: wrap;
  }

  .dash-card-row,
  .dash-bottom-row,
  .location-hero,
  .quickbar,
  .battle-action-grid,
  .bond-benefits {
    grid-template-columns: 1fr;
  }

  .location-hero {
    padding: 1.4rem;
  }

  .location-hero aside {
    justify-content: flex-start;
  }

  .auth-login-panel {
    padding-top: 5.5rem;
  }

  .app-shell,
  .hero-grid,
  .two-column,
  .quest-layout,
  .story-quest-shell,
  .battle-stage {
    grid-template-columns: 1fr;
  }

  .story-meta-grid,
  .phase-track,
  .reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .topbar,
  .dashboard-grid,
  .profile-grid,
  .companion-grid,
  .region-grid {
    grid-template-columns: 1fr;
  }

  .meters {
    flex-wrap: wrap;
  }
}

@media (max-width: 680px) {
  .auth-page {
    padding: 0.75rem;
  }

  .auth-main {
    padding-top: 1rem;
  }

  .auth-lore-panel,
  .auth-login-panel,
  .auth-side-stack .auth-panel,
  .login-card,
  .create-legacy {
    padding: 1rem;
  }

  .character-art {
    min-height: 21rem;
  }

  .create-legacy,
  .auth-stat-strip,
  .origin-grid,
  .choice-row,
  .signup-controls {
    grid-template-columns: 1fr;
  }

  .signup-stage {
    padding: 1rem;
  }

  .signup-art {
    min-height: 20rem;
  }

  .choice-card {
    grid-template-columns: 4rem 1fr;
    min-height: 6.5rem;
  }

  .avatar-grid,
  .banner-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .swatch-row {
    grid-template-columns: repeat(3, 2.6rem);
  }

  .dashboard-page {
    padding: 0.75rem;
  }

  .dashboard-nav {
    width: 100%;
  }

  .character-portrait {
    min-height: 18rem;
  }

  .decision-row,
  .relic-row,
  .vault-totals,
  .vault-actions,
  .bond-combatant,
  .bond-quest {
    grid-template-columns: 1fr;
  }

  .message-tabs,
  .message-tools,
  .compose-tools,
  .inventory-tabs,
  .item-toolbar,
  .item-detail-stats,
  .item-value-row {
    grid-template-columns: 1fr;
  }

  .item-grid {
    grid-template-columns: repeat(4, minmax(4rem, 1fr));
  }

  .offering-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bond-symbol {
    width: 6rem;
    height: 6rem;
  }

  .skull-still-life {
    min-height: 7rem;
  }

  .login-options {
    display: grid;
  }

  .device-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .main,
  .sidebar {
    padding: 0.75rem;
  }

  .action-cards {
    grid-template-columns: 1fr 1fr;
  }

  .landing-main,
  .landing-lower-grid,
  .landing-feature-strip {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .landing-main .auth-lore-panel,
  .landing-updates,
  .landing-feature-strip,
  .landing-lower-grid {
    grid-area: auto;
  }

  .landing-lower-grid .pitch-panel {
    grid-template-columns: 1fr;
  }

  .story-title-row,
  .horror-feature,
  .story-action-row,
  .story-meta-grid,
  .phase-track,
  .reward-grid {
    grid-template-columns: 1fr;
  }

  .story-hero {
    min-height: auto;
  }

  .scene-overlay {
    padding: 1rem;
  }
}

/* Button refresh: remove ornate frame overlays and use darker raised crimson controls. */
button:not([data-step-dot]):not(.atlas-region-pin):not(.realm-hotspot):not(.edit-float),
.auth-frame-btn,
.auth-submit,
.provider,
.dash-button,
.primary-btn,
.ghost-btn,
.text-btn,
.nav-item,
.story-tabs button,
.battle-subnav button,
.quest-map-button,
.manage-status-button,
.equip-button,
.danger-button,
.view-offerings-button {
  border: 1px solid rgba(130, 18, 22, 0.95) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, #7d1118 0%, #4b080d 48%, #190305 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 190, 0.22),
    inset 0 -4px 0 rgba(0, 0, 0, 0.42),
    0 3px 0 rgba(21, 2, 3, 0.92),
    0 12px 22px rgba(0, 0, 0, 0.52) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.auth-frame-btn::before,
.auth-frame-btn::after,
.auth-submit::before,
.auth-submit::after,
.primary-btn::before,
.primary-btn::after,
.dash-button::before,
.dash-button::after {
  display: none !important;
}

button:not([data-step-dot]):not(.atlas-region-pin):not(.realm-hotspot):not(.edit-float):hover,
.auth-frame-btn:hover,
.auth-submit:hover,
.provider:hover,
.dash-button:hover,
.primary-btn:hover,
.ghost-btn:hover,
.text-btn:hover,
.nav-item:hover,
.story-tabs button:hover,
.battle-subnav button:hover,
.quest-map-button:hover,
.manage-status-button:hover,
.equip-button:hover,
.danger-button:hover,
.view-offerings-button:hover {
  background:
    linear-gradient(180deg, #9a161f 0%, #610b12 48%, #230406 100%) !important;
  border-color: rgba(220, 55, 62, 0.98) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 225, 205, 0.28),
    inset 0 -4px 0 rgba(0, 0, 0, 0.44),
    0 4px 0 rgba(21, 2, 3, 0.92),
    0 0 18px rgba(139, 14, 20, 0.34),
    0 14px 24px rgba(0, 0, 0, 0.58) !important;
}

button:not([data-step-dot]):not(.atlas-region-pin):not(.realm-hotspot):not(.edit-float):active,
.auth-frame-btn:active,
.auth-submit:active,
.provider:active,
.dash-button:active,
.primary-btn:active,
.ghost-btn:active,
.text-btn:active,
.nav-item:active,
.story-tabs button:active,
.battle-subnav button:active,
.quest-map-button:active,
.manage-status-button:active,
.equip-button:active,
.danger-button:active,
.view-offerings-button:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.58),
    inset 0 -1px 0 rgba(255, 214, 190, 0.12),
    0 1px 0 rgba(21, 2, 3, 0.92) !important;
}

button:disabled,
.primary-btn:disabled,
.dash-button:disabled {
  color: rgba(255, 255, 255, 0.5) !important;
  background: linear-gradient(180deg, #2a1112 0%, #170808 100%) !important;
  border-color: rgba(86, 54, 45, 0.75) !important;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35) !important;
  transform: none;
}

/* Whispers - Covenant messaging network */
.whispers-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background:
    radial-gradient(circle at 52% 0%, rgba(130, 11, 18, 0.2), transparent 22rem),
    linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.84)),
    url("assets/ui/onboarding/hero-login.png") center bottom / cover fixed no-repeat,
    #040404;
  color: #e8d8c1;
}

.whispers-rail {
  min-height: 100vh;
  padding: 1rem 0.65rem;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 1rem;
  border-right: 1px solid rgba(169, 130, 86, 0.34);
  background:
    linear-gradient(180deg, rgba(7, 7, 7, 0.96), rgba(3, 3, 3, 0.98)),
    radial-gradient(circle at 50% 70%, rgba(127, 14, 20, 0.14), transparent 10rem);
  box-shadow: inset -18px 0 38px rgba(0, 0, 0, 0.55);
}

.whispers-logo {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.7rem;
  align-items: center;
  color: #e5cfaa;
  text-decoration: none;
}

.whispers-logo strong {
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.45rem;
  line-height: 0.95;
  text-transform: uppercase;
}

.whispers-logo em {
  grid-column: 2;
  color: #cf1d25;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.whispers-nav {
  display: grid;
  align-content: start;
  gap: 0.28rem;
}

.whispers-nav button {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  min-height: 3.85rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  color: #cdbb9f;
  background: transparent;
  text-align: left;
  text-transform: uppercase;
}

.whispers-nav button span {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: transparent;
  border: 1px solid rgba(169, 130, 86, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(187, 32, 38, 0.58) 0 18%, transparent 20%),
    conic-gradient(from 30deg, transparent 0 12%, rgba(196, 145, 72, 0.9) 13% 15%, transparent 16% 38%, rgba(196, 145, 72, 0.85) 39% 42%, transparent 43%),
    #070605;
}

.whispers-nav button.active {
  border-color: rgba(175, 21, 28, 0.72);
  color: #fff0db;
  background:
    linear-gradient(90deg, rgba(112, 13, 17, 0.78), rgba(19, 8, 7, 0.34));
  box-shadow: inset 3px 0 0 #b5161d, 0 0 18px rgba(146, 16, 22, 0.26);
}

.whispers-rail-seal {
  width: 8.5rem;
  height: 8.5rem;
  margin: 0 auto;
  border: 1px solid rgba(169, 130, 86, 0.5);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(188, 28, 35, 0.82) 0 8%, transparent 9%),
    repeating-conic-gradient(from 12deg, rgba(198, 151, 80, 0.84) 0 4deg, transparent 4deg 24deg),
    radial-gradient(circle, transparent 0 43%, rgba(169, 130, 86, 0.22) 44% 48%, transparent 49%),
    #050505;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.75);
}

.whispers-rail > p {
  margin: 0;
  color: #cbb58f;
  font-family: "Cinzel", Georgia, serif;
  text-align: center;
  text-transform: uppercase;
}

.whispers-rail small {
  color: #d82028;
}

.whispers-shell {
  min-width: 0;
  padding: 1.35rem;
}

.whispers-statusbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.whispers-statusbar p {
  margin: 0;
  color: #b8a58a;
  font-style: italic;
}

.whispers-currencies {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgba(169, 130, 86, 0.36);
  background: rgba(0, 0, 0, 0.56);
}

.whispers-currencies span {
  min-width: 8rem;
  padding: 0.65rem 0.85rem;
  border-right: 1px solid rgba(169, 130, 86, 0.18);
  color: #bfae96;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.whispers-currencies strong {
  display: block;
  color: #f0dcc0;
  font-size: 1.05rem;
}

.whispers-user {
  display: grid;
  grid-template-columns: 1fr 3rem;
  gap: 0.65rem;
  align-items: center;
  min-width: 12rem;
  padding: 0.55rem 0.7rem;
  color: #e8d8c1;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(169, 130, 86, 0.38);
  text-align: left;
}

.whispers-user span {
  color: #c39f6a;
}

.whispers-user i {
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(169, 130, 86, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(221, 205, 180, 0.78) 0 18%, rgba(20, 10, 9, 0.9) 19% 100%);
}

.whispers-main-panel {
  border: 1px solid rgba(169, 130, 86, 0.42);
  background:
    linear-gradient(135deg, rgba(10, 10, 10, 0.93), rgba(4, 4, 4, 0.89)),
    radial-gradient(circle at 8% 16%, rgba(139, 15, 20, 0.14), transparent 18rem);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 176, 0.04), 0 28px 70px rgba(0, 0, 0, 0.42);
}

.whispers-titlebar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  padding: 1.55rem 1.65rem 1.15rem;
  border-bottom: 1px solid rgba(169, 130, 86, 0.2);
}

.whispers-titlebar h1 {
  margin: 0;
  color: #d7b878;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(2rem, 3vw, 3rem);
  text-transform: uppercase;
}

.whispers-titlebar p {
  margin: 0.25rem 0;
  color: #cdbb9f;
}

.whispers-titlebar small {
  color: #aa8c68;
  font-style: italic;
}

.whisper-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(6rem, auto)) 1fr minmax(9rem, auto);
  gap: 0.45rem;
  align-items: center;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid rgba(169, 130, 86, 0.16);
}

.whisper-controls button,
.whisper-controls label {
  min-height: 2.65rem;
  border: 1px solid rgba(169, 130, 86, 0.18);
  background: rgba(0, 0, 0, 0.34);
  color: #cbb899;
  text-transform: uppercase;
}

.whisper-controls button.active {
  color: #fff1db;
  border-color: rgba(202, 23, 30, 0.72);
  background: linear-gradient(180deg, rgba(114, 14, 18, 0.78), rgba(18, 6, 6, 0.9));
}

.whisper-controls label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0 0.75rem;
}

.whisper-controls input {
  min-width: 0;
  color: #eadcc5;
  background: transparent;
  border: 0;
  outline: 0;
}

.whisper-workspace {
  display: grid;
  grid-template-columns: minmax(19rem, 0.84fr) minmax(28rem, 1.16fr);
  min-height: 46rem;
}

.whisper-thread-list {
  border-right: 1px solid rgba(169, 130, 86, 0.22);
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.whisper-thread-list > button {
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 0.7rem;
  width: 100%;
  min-height: 5.65rem;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-bottom: 1px solid rgba(169, 130, 86, 0.14);
  color: #d8c7b2;
  background: transparent;
  text-align: left;
}

.whisper-thread-list > button.active {
  background:
    linear-gradient(90deg, rgba(104, 14, 18, 0.78), rgba(29, 8, 8, 0.46)),
    radial-gradient(circle at 92% 48%, rgba(213, 28, 36, 0.22), transparent 8rem);
}

.whisper-thread-list .sender-icon {
  grid-row: 1 / 3;
}

.whisper-thread-list strong,
.whisper-thread-list small,
.whisper-thread-list em {
  display: block;
}

.whisper-thread-list strong {
  color: #e6d0b2;
  font-size: 1.1rem;
}

.whisper-thread-list small {
  grid-column: 2 / 4;
  color: #a99a8a;
}

.whisper-thread-list em {
  color: #d4bd91;
  font-style: normal;
}

.whisper-thread-list i,
.whisper-thread-list .favorite::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #c31820;
  box-shadow: 0 0 12px rgba(231, 33, 41, 0.75);
}

.whisper-thread-list .favorite::after {
  width: auto;
  height: auto;
  color: #d6a74b;
  background: transparent;
  box-shadow: none;
  content: "Star";
}

.whisper-conversation {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(9, 9, 9, 0.36), rgba(0, 0, 0, 0.54)),
    radial-gradient(circle at 72% 30%, rgba(143, 14, 20, 0.09), transparent 18rem);
}

.whispers-page .conversation-header {
  border-bottom: 1px solid rgba(169, 130, 86, 0.16);
}

.covenant-warning {
  margin: 1rem 1.2rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(169, 130, 86, 0.22);
  background:
    radial-gradient(circle at 7% 50%, rgba(188, 139, 68, 0.15), transparent 8rem),
    rgba(0, 0, 0, 0.32);
  color: #cbb899;
}

.covenant-warning strong,
.covenant-warning span {
  display: block;
}

.covenant-warning strong {
  color: #d7b878;
  margin-bottom: 0.35rem;
}

.whisper-feed {
  overflow-y: auto;
  padding: 1.6rem;
}

.whisper-feed time {
  justify-self: center;
  color: #8f7658;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.whisper-feed .message-bubble {
  background: rgba(24, 23, 21, 0.9);
}

.whisper-feed .message-bubble.theirs {
  border-color: rgba(169, 130, 86, 0.24);
  background: rgba(20, 20, 19, 0.9);
}

.whisper-feed .message-bubble.ours {
  border-color: rgba(143, 21, 27, 0.5);
  background: rgba(82, 13, 16, 0.62);
}

.whisper-feed .message-bubble small {
  margin: 0.4rem 0 0;
  text-align: right;
}

.whisper-compose textarea {
  min-height: 3.2rem;
  background: rgba(0, 0, 0, 0.5);
}

.whispers-info-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.whispers-info-row .dash-panel {
  min-height: 10rem;
}

.whispers-info-row h2 {
  color: #d7b878;
  text-transform: uppercase;
}

.whispers-info-row ul {
  margin: 0.6rem 0 1rem;
  padding-left: 1.1rem;
  color: #cdbb9f;
}

.whispers-info-row p {
  color: #cdbb9f;
  line-height: 1.5;
}

.whispers-info-row .secure strong {
  display: block;
  margin-top: 1rem;
  color: #7dcc65;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .whispers-page {
    grid-template-columns: 1fr;
  }

  .whispers-rail {
    min-height: auto;
    grid-template-rows: auto;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid rgba(169, 130, 86, 0.34);
  }

  .whispers-nav {
    display: flex;
    overflow-x: auto;
  }

  .whispers-nav button {
    min-width: 8.5rem;
  }

  .whispers-rail-seal,
  .whispers-rail > p {
    display: none;
  }
}

@media (max-width: 900px) {
  .whispers-statusbar,
  .whisper-controls,
  .whisper-workspace,
  .whispers-info-row {
    grid-template-columns: 1fr;
  }

  .whisper-thread-list {
    border-right: 0;
    border-bottom: 1px solid rgba(169, 130, 86, 0.22);
  }

  .whispers-titlebar {
    display: grid;
  }
}

/* Inventory cards are selectable possessions, not crimson command buttons. */
.inventory-possession-card {
  border: 1px solid rgba(201, 166, 107, 0.24) !important;
  border-radius: 0 !important;
  color: #eadcc8 !important;
  background:
    linear-gradient(rgba(7, 6, 5, 0.78), rgba(9, 6, 6, 0.92)),
    radial-gradient(circle at 50% 20%, rgba(201, 166, 107, 0.08), transparent 5rem) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75) !important;
}

.inventory-possession-card:hover,
.inventory-possession-card.selected {
  border-color: rgba(214, 59, 47, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(214, 59, 47, 0.28), 0 0 18px rgba(117, 14, 18, 0.28) !important;
}

/* Site-wide compact density pass. Keeps the gothic skin, trims the furniture. */
html {
  font-size: calc(16px * var(--layout-scale));
  min-height: 100%;
  background: #050505;
}

body {
  min-height: 100svh;
  background-color: #050505;
  font-size: var(--font-base);
  line-height: var(--compact-line-height);
}

#root,
#legacy-prototype {
  min-height: 100svh;
  background-color: #050505;
}

body,
.app-shell,
.react-auth-page,
.react-signup-board,
.auth-page,
.dashboard-page,
.profile-page,
.bond-page,
.battle-page,
.messages-page,
.inventory-page,
.shadowmark-page,
.whispers-page,
.game-root {
  overflow-x: hidden;
}

.app-shell,
.react-auth-page,
.react-signup-board,
.auth-page,
.dashboard-page,
.profile-page,
.bond-page,
.battle-page,
.messages-page,
.inventory-page,
.shadowmark-page {
  min-height: 100svh;
  padding: var(--section-padding-y) var(--section-padding-x);
}

.react-game-header,
.dashboard-header {
  min-height: var(--nav-height);
  gap: var(--space-sm);
}

.react-game-header {
  padding-block: var(--space-xs);
}

.dashboard-header {
  grid-template-columns: 12rem minmax(0, 1fr) auto 8.5rem;
}

.dashboard-nav {
  gap: var(--space-xs);
}

.dashboard-nav button,
.react-game-header button,
.brand-button,
.tab-row button,
.battle-subnav button,
.auth-submit,
.auth-frame-btn,
.provider,
.dash-button,
.primary-btn,
.ghost-btn,
.text-btn,
.nav-item,
.quest-map-button,
.manage-status-button,
.equip-button,
.danger-button,
.view-offerings-button {
  min-height: clamp(2.35rem, 4.6vh, 2.85rem);
  padding: clamp(0.42rem, 0.55vw, 0.6rem) clamp(0.58rem, 0.75vw, 0.85rem);
  font-size: var(--font-sm);
  line-height: 1.12;
}

.top-resources,
.dashboard-user {
  gap: var(--space-sm);
}

.dash-avatar {
  width: clamp(2.45rem, 3.5vw, 2.9rem);
  height: clamp(2.45rem, 3.5vw, 2.9rem);
}

.dashboard-grid-page,
.profile-layout,
.bond-layout,
.vault-layout,
.battle-layout,
.messages-layout,
.inventory-layout,
.shadowmark-layout,
.whispers-page {
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  gap: var(--space-md);
}

.dashboard-grid-page {
  grid-template-columns: minmax(14rem, 0.75fr) minmax(25rem, 1.7fr) minmax(14rem, 0.8fr);
  margin-top: var(--space-md);
}

.profile-layout {
  grid-template-columns: minmax(14rem, 0.8fr) minmax(27rem, 1.65fr) minmax(14rem, 0.85fr);
}

.bond-layout {
  grid-template-columns: minmax(11.5rem, 0.55fr) minmax(34rem, 2.4fr) minmax(13rem, 0.8fr);
}

.vault-layout {
  grid-template-columns: minmax(12rem, 0.6fr) minmax(30rem, 1.7fr) minmax(15rem, 0.82fr);
}

.battle-layout {
  grid-template-columns: minmax(12rem, 0.6fr) minmax(32rem, 2fr) minmax(13rem, 0.7fr);
}

.shadowmark-layout {
  grid-template-columns: minmax(12rem, 0.6fr) minmax(32rem, 1.85fr) minmax(14rem, 0.8fr);
}

.dash-left,
.dash-center,
.dash-right,
.battle-command-shell,
.hunter-registry,
.whispers-main,
.whispers-content {
  gap: var(--space-md);
}

.dash-panel,
.auth-panel,
.login-card,
.create-legacy,
.signup-stage,
.battle-list,
.battle-status-bar,
.hunt-card,
.whispers-card,
.whisper-compose,
.whispers-info-row .dash-panel,
.modal,
[role="dialog"] {
  padding: var(--panel-padding);
}

.dash-panel {
  box-shadow: inset 0 0 0 1px #030303, 0 12px 26px rgba(0, 0, 0, 0.56);
}

.dash-panel::before,
.dash-panel::after {
  width: 2.75rem;
  height: 2.75rem;
}

:where(h1) {
  font-size: var(--font-2xl);
  line-height: 1.05;
  margin-block: 0 var(--space-sm);
}

:where(h2) {
  font-size: var(--font-xl);
  line-height: 1.1;
  margin-block: 0 var(--space-xs);
}

:where(h3) {
  font-size: var(--font-lg);
  line-height: 1.15;
  margin-block: 0 var(--space-xs);
}

p,
li {
  line-height: 1.42;
}

.auth-main {
  gap: var(--space-md);
  padding-top: var(--space-lg);
}

.landing-main {
  min-height: min(70svh, 42rem);
  grid-template-columns: minmax(28rem, 1fr) minmax(15rem, 20rem);
  gap: var(--space-md);
  padding-top: clamp(1.5rem, 4vw, 4.5rem);
}

.landing-main .auth-lore-panel {
  max-width: 37rem;
  padding-bottom: var(--space-sm);
}

.landing-main .auth-copy h2 {
  margin-bottom: var(--space-md);
  font-size: clamp(2.25rem, 3.9vw, 4.15rem);
}

.landing-main .auth-copy p {
  max-width: 29rem;
  font-size: var(--font-base);
  line-height: 1.45;
}

.landing-updates,
.auth-lore-panel,
.auth-login-panel,
.auth-side-stack .auth-panel {
  padding: var(--panel-padding);
}

.auth-lore-panel .character-art,
.character-art,
.signup-art,
.character-portrait {
  min-height: clamp(13rem, 34vh, 21rem);
}

.signup-shell {
  width: min(100%, var(--content-max-width));
}

.signup-stage {
  gap: var(--space-md);
}

.choice-card {
  min-height: clamp(4.8rem, 9vh, 6rem);
  padding: var(--card-padding);
}

.location-hero,
.timeline-hero,
.story-hero,
.shadowmark-status-hero,
.battle-threat-hero {
  min-height: auto;
  padding: var(--space-lg);
}

.location-hero {
  gap: var(--space-md);
}

.location-hero h1,
.timeline-hero h1,
.story-hero h1,
.shadowmark-status-hero h1,
.battle-threat-hero h2,
.profile-rank-panel > h1 {
  font-size: var(--font-2xl);
}

.location-hero p,
.timeline-hero p,
.story-hero p,
.shadowmark-status-hero p {
  font-size: var(--font-base);
  line-height: 1.45;
}

.battle-stage {
  grid-template-columns: 13rem minmax(0, 1fr) 13rem;
  gap: var(--space-md);
}

.battle-tab-panel {
  grid-template-columns: 14rem minmax(0, 1fr) 16rem;
  gap: var(--space-md);
}

.battle-left-rail,
.battle-center,
.battle-right-rail,
.battle-full-panel {
  min-height: clamp(20rem, 62vh, 28rem);
}

.battle-subnav {
  gap: var(--space-xs);
}

.battle-threat-hero {
  grid-template-columns: minmax(0, 1fr) 11rem;
  gap: var(--space-md);
}

.battle-threat-meter {
  padding-left: var(--space-md);
}

.battle-threat-meter strong {
  font-size: var(--font-xl);
}

.battle-hunt-grid {
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.hunt-card {
  min-height: clamp(13rem, 32vh, 16rem);
}

.hunt-art,
.battle-detail-image {
  min-height: clamp(6.5rem, 18vh, 8rem);
  margin-bottom: var(--space-sm);
}

.battle-log {
  min-height: clamp(16rem, 38vh, 22rem);
}

.action-cards {
  gap: var(--space-sm);
}

.action-cards button {
  min-height: clamp(4.5rem, 10vh, 5.75rem);
}

.hunter-row {
  grid-template-columns: 2.75rem minmax(8rem, 1fr) 6.5rem 7.5rem 5rem;
  gap: var(--space-sm);
  padding: var(--card-padding);
}

.hunter-row span {
  width: 2.75rem;
  height: 2.75rem;
}

.current-shadowmark-card {
  grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr);
  gap: var(--space-md);
}

.offering-grid,
.benefit-grid,
.status-pill-grid,
.vault-totals,
.profile-lower-grid,
.reward-grid,
.story-meta-grid {
  gap: var(--space-sm);
}

.offering-grid article,
.benefit-row,
.shadowmark-warning-row,
.vault-totals article,
.profile-lower-grid article {
  padding: var(--card-padding);
  min-height: auto;
}

.world-clock-panel {
  width: min(50rem, 100%);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--card-padding);
}

.world-clock-panel.compact {
  width: min(30rem, 38vw);
  gap: var(--space-xs);
}

.world-clock-main,
.world-clock-countdowns > div {
  padding: var(--space-sm);
}

.modal,
[role="dialog"] {
  max-height: 85vh;
  overflow: auto;
}

@media (max-width: 1180px) {
  html {
    font-size: 90%;
  }

  .dashboard-grid-page,
  .profile-layout,
  .bond-layout,
  .vault-layout,
  .battle-layout,
  .messages-layout,
  .inventory-layout,
  .shadowmark-layout,
  .whispers-page {
    width: 100%;
  }

  .dashboard-header {
    grid-template-columns: 10rem minmax(0, 1fr);
  }

  .world-clock-panel.compact {
    width: 100%;
  }

  .site-header {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
  }

  .site-header-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .game-body {
    grid-template-columns: 1fr;
  }

  .game-sidebar {
    position: relative;
    top: auto;
    max-height: none;
  }

  .game-sidebar nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: var(--space-xs);
  }

  .game-sidebar-link {
    min-width: 10rem;
  }

  .inventory-system-layout {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.7fr);
  }

  .hunter-creation-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .codex-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .battle-survival-layout,
  .encounter-intro-panel,
  .hunter-banner-panel,
  .profile-ledger-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .codex-category-nav,
  .codex-detail-panel,
  .combat-status-panel,
  .battle-log-panel {
    position: relative;
    top: auto;
    max-height: none;
  }

  .codex-category-nav {
    grid-template-columns: repeat(3, minmax(10rem, 1fr));
    overflow-x: auto;
  }

  .codex-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enemy-stage-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .survival-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hunter-ritual-rail,
  .hunter-summary-panel {
    position: relative;
    top: auto;
  }

  .old-ash-mini {
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: center;
  }

  .old-ash-mini img {
    max-height: 5rem;
  }

  .ritual-steps {
    grid-template-columns: repeat(6, minmax(7rem, 1fr));
    overflow-x: auto;
    padding-bottom: var(--space-xs);
  }

  .portrait-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .equipped-relics-panel {
    position: relative;
    top: auto;
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 760px) {
  html {
    font-size: 94%;
  }

  .app-shell,
  .react-auth-page,
  .react-signup-board,
  .auth-page,
  .dashboard-page,
  .profile-page,
  .bond-page,
  .battle-page,
  .messages-page,
  .inventory-page,
  .shadowmark-page {
    padding: var(--space-sm);
  }

  .landing-main {
    min-height: auto;
    padding-top: var(--space-lg);
  }

  .landing-main .auth-copy h2 {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .world-clock-panel,
  .world-clock-panel.compact,
  .world-clock-countdowns {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
  }

  .world-clock-effects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-header-actions .world-clock-panel {
    order: 3;
    flex-basis: 100%;
  }

  .site-wordmark {
    width: 100%;
  }

  .arrival-action-grid,
  .sealed-action-row {
    grid-template-columns: 1fr;
  }

.arrival-action-grid {
  display: grid;
}

.player-hub-page {
  display: grid;
  gap: var(--space-md);
}

.hub-top-grid,
.hub-mid-grid,
.hub-lower-grid {
  display: grid;
  gap: var(--space-md);
}

.hub-top-grid {
  grid-template-columns: minmax(18rem, 0.95fr) minmax(20rem, 1.2fr) minmax(17rem, 0.85fr);
}

.hub-mid-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hub-lower-grid {
  grid-template-columns: minmax(18rem, 0.95fr) minmax(18rem, 1fr) minmax(18rem, 0.95fr);
}

.hub-action-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: var(--space-xs);
  padding: var(--space-xs);
  border: 1px solid rgba(201, 166, 107, 0.18);
  background: rgba(8, 6, 5, 0.76);
  box-shadow: inset 0 0 24px rgba(117, 13, 18, 0.12);
}

.hub-action-row button,
.hub-card-actions button,
.hub-compact-panel button,
.hub-wide-panel > button {
  min-height: 2.25rem;
  border: 1px solid rgba(201, 166, 107, 0.22);
  color: #ead8ba;
  background: linear-gradient(180deg, rgba(74, 12, 14, 0.88), rgba(24, 8, 8, 0.94));
  font-family: var(--font-display);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hub-action-row button:hover,
.hub-card-actions button:hover,
.hub-compact-panel button:hover,
.hub-wide-panel > button:hover {
  border-color: rgba(214, 59, 47, 0.64);
  color: #fff4d8;
}

.hub-status-panel,
.hub-quest-panel,
.hub-region-panel,
.hub-compact-panel,
.hub-wide-panel {
  min-height: 0;
  border: 1px solid rgba(201, 166, 107, 0.18);
  background:
    linear-gradient(180deg, rgba(22, 15, 12, 0.92), rgba(8, 6, 5, 0.96)),
    linear-gradient(180deg, rgba(22, 15, 12, 0.92), rgba(8, 6, 5, 0.96));
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.38);
}

.hub-status-panel h2,
.hub-quest-panel h2,
.hub-region-panel h2,
.hub-compact-panel h2,
.hub-wide-panel h2 {
  margin-bottom: var(--space-xs);
  color: #d8bd87;
  font-size: var(--font-base);
}

.hub-hunter-row,
.old-ash-row {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
}

.hub-hunter-row img,
.old-ash-row img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(201, 166, 107, 0.28);
  background: rgba(0, 0, 0, 0.45);
}

.hub-hunter-row span,
.hub-quest-panel > span,
.hub-region-panel > span,
.hub-info-list span,
.hub-list span,
.hub-relic-panel span,
.hub-status-tags span,
.hub-threat-list small {
  color: #bba783;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hub-hunter-row strong,
.hub-quest-panel > strong,
.hub-region-panel > strong,
.hub-compact-panel > strong,
.old-ash-row strong,
.hub-list strong {
  display: block;
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-lg);
  line-height: 1.05;
}

.hub-hunter-row p,
.hub-quest-panel p,
.hub-region-panel p,
.hub-compact-panel p,
.hub-wide-panel p,
.hub-list p,
.old-ash-row p {
  margin: 0;
  color: #cdbb9f;
  font-size: var(--font-sm);
  line-height: 1.42;
}

.hub-meter {
  display: grid;
  gap: 0.25rem;
  margin-top: var(--space-xs);
}

.hub-meter i {
  display: block;
  height: 0.42rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  background: rgba(0, 0, 0, 0.58);
  overflow: hidden;
}

.hub-meter b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7d151b, #d8a24d);
}

.hub-meter.danger b {
  background: linear-gradient(90deg, #422b1d, #8d161d, #d63b2f);
}

.hub-meter span,
.hub-quest-panel em {
  color: #a99a85;
  font-size: var(--font-xs);
  font-style: normal;
}

.hub-status-tags,
.hub-info-list,
.hub-threat-list,
.hub-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.hub-status-tags span,
.hub-info-list span,
.hub-threat-list small {
  border: 1px solid rgba(201, 166, 107, 0.16);
  padding: 0.28rem 0.42rem;
  background: rgba(0, 0, 0, 0.28);
}

.hub-card-actions button {
  flex: 1 1 7rem;
}

.hub-compact-panel {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}

.hub-relic-panel img {
  width: min(5.25rem, 42%);
  aspect-ratio: 1;
  object-fit: contain;
  justify-self: start;
  border: 1px solid rgba(201, 166, 107, 0.16);
  background: radial-gradient(circle, rgba(150, 21, 25, 0.22), rgba(0, 0, 0, 0.52));
}

.hub-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.hub-resource-grid span {
  display: grid;
  gap: 0.15rem;
  border: 1px solid rgba(201, 166, 107, 0.16);
  padding: 0.48rem;
  background: rgba(0, 0, 0, 0.26);
  color: #a99a85;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.hub-resource-grid b {
  color: #f2ddbf;
  font-size: var(--font-lg);
}

.hub-list {
  display: grid;
  gap: var(--space-xs);
}

.hub-list article {
  border-left: 2px solid rgba(201, 166, 107, 0.24);
  padding: 0.45rem 0.6rem;
  background: rgba(0, 0, 0, 0.24);
}

.hub-list article.unread {
  border-left-color: rgba(214, 59, 47, 0.82);
  background: rgba(117, 13, 18, 0.18);
}

.old-ash-guidance {
  display: grid;
  gap: var(--space-sm);
}

  .inventory-meter-row,
  .inventory-control-row,
  .inventory-system-layout,
  .inventory-action-row,
  .inventory-stat-grid,
  .equipped-relics-panel {
    grid-template-columns: 1fr;
  }

  .inventory-detail-panel,
  .equipped-relics-panel {
    position: relative;
    top: auto;
  }

  .inventory-possession-grid {
    grid-template-columns: 1fr;
  }

  .ritual-panel {
    min-height: auto;
  }

  .ritual-choice-grid,
  .relic-grid,
  .portrait-grid,
  .codex-entry-grid,
  .codex-filter-bar,
  .encounter-selector,
  .survival-action-grid,
  .combat-stat-grid,
  .profile-relic-grid article {
    grid-template-columns: 1fr;
  }

  .codex-category-nav {
    grid-template-columns: 1fr;
  }

  .ritual-choice-card,
  .portrait-card {
    min-height: auto;
  }

  .relic-grid .ritual-choice-card {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: start;
    min-height: auto;
  }

  .relic-grid .ritual-choice-card img {
    grid-row: span 5;
    aspect-ratio: 1;
  }

  .summary-line {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .hunter-creation-actions {
    justify-content: stretch;
  }

  .hunter-creation-actions button {
    flex: 1;
  }

  .inventory-possession-card {
    grid-template-columns: 4.4rem minmax(0, 1fr) auto;
    min-height: auto;
    align-items: center;
  }

  .inventory-possession-card .possession-icon {
    grid-row: span 3;
    aspect-ratio: 1;
  }

  .inventory-possession-card em {
    position: static;
  }

  .inventory-card-flags {
    grid-column: 2 / -1;
  }

  .battle-left-rail,
  .battle-center,
  .battle-right-rail,
  .battle-full-panel {
    min-height: auto;
  }

  .battle-threat-hero,
  .hunter-row,
  .current-shadowmark-card {
    grid-template-columns: 1fr;
  }

  .dashboard-nav button,
  .react-game-header button,
  .brand-button,
  .tab-row button,
  .battle-subnav button,
  .auth-submit,
  .auth-frame-btn,
  .provider,
  .dash-button,
  .primary-btn,
  .ghost-btn,
  .text-btn,
  .nav-item,
  .quest-map-button,
  .manage-status-button,
  .equip-button,
  .danger-button,
  .view-offerings-button {
    min-height: 2.75rem;
  }
}

/* Dashboard / Player Hub */
.player-hub-page {
  display: grid;
  gap: var(--space-md);
}

.hub-top-grid,
.hub-mid-grid,
.hub-lower-grid {
  display: grid;
  gap: var(--space-md);
}

.hub-top-grid {
  grid-template-columns: minmax(18rem, 0.95fr) minmax(20rem, 1.2fr) minmax(17rem, 0.85fr);
}

.hub-mid-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hub-lower-grid {
  grid-template-columns: minmax(18rem, 0.95fr) minmax(18rem, 1fr) minmax(18rem, 0.95fr);
}

.hub-action-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: var(--space-xs);
  padding: var(--space-xs);
  border: 1px solid rgba(201, 166, 107, 0.18);
  background: rgba(8, 6, 5, 0.76);
  box-shadow: inset 0 0 24px rgba(117, 13, 18, 0.12);
}

.hub-action-row button,
.hub-card-actions button,
.hub-compact-panel button,
.hub-wide-panel > button {
  min-height: 2.25rem;
  border: 1px solid rgba(201, 166, 107, 0.22);
  color: #ead8ba;
  background: linear-gradient(180deg, rgba(74, 12, 14, 0.88), rgba(24, 8, 8, 0.94));
  font-family: var(--font-display);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hub-action-row button:hover,
.hub-card-actions button:hover,
.hub-compact-panel button:hover,
.hub-wide-panel > button:hover {
  border-color: rgba(214, 59, 47, 0.64);
  color: #fff4d8;
}

.hub-status-panel,
.hub-quest-panel,
.hub-region-panel,
.hub-compact-panel,
.hub-wide-panel {
  min-height: 0;
  border: 1px solid rgba(201, 166, 107, 0.18);
  background: linear-gradient(180deg, rgba(22, 15, 12, 0.92), rgba(8, 6, 5, 0.96));
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.38);
}

.hub-status-panel h2,
.hub-quest-panel h2,
.hub-region-panel h2,
.hub-compact-panel h2,
.hub-wide-panel h2 {
  margin-bottom: var(--space-xs);
  color: #d8bd87;
  font-size: var(--font-base);
}

.hub-hunter-row,
.old-ash-row {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
}

.hub-hunter-row img,
.old-ash-row img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(201, 166, 107, 0.28);
  background: rgba(0, 0, 0, 0.45);
}

.hub-hunter-row span,
.hub-quest-panel > span,
.hub-region-panel > span,
.hub-info-list span,
.hub-list span,
.hub-relic-panel span,
.hub-status-tags span,
.hub-threat-list small {
  color: #bba783;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hub-hunter-row strong,
.hub-quest-panel > strong,
.hub-region-panel > strong,
.hub-compact-panel > strong,
.old-ash-row strong,
.hub-list strong {
  display: block;
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-lg);
  line-height: 1.05;
}

.hub-hunter-row p,
.hub-quest-panel p,
.hub-region-panel p,
.hub-compact-panel p,
.hub-wide-panel p,
.hub-list p,
.old-ash-row p {
  margin: 0;
  color: #cdbb9f;
  font-size: var(--font-sm);
  line-height: 1.42;
}

.hub-meter {
  display: grid;
  gap: 0.25rem;
  margin-top: var(--space-xs);
}

.hub-meter i {
  display: block;
  height: 0.42rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  background: rgba(0, 0, 0, 0.58);
  overflow: hidden;
}

.hub-meter b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7d151b, #d8a24d);
}

.hub-meter.danger b {
  background: linear-gradient(90deg, #422b1d, #8d161d, #d63b2f);
}

.hub-meter span,
.hub-quest-panel em {
  color: #a99a85;
  font-size: var(--font-xs);
  font-style: normal;
}

.hub-status-tags,
.hub-info-list,
.hub-threat-list,
.hub-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.hub-status-tags span,
.hub-info-list span,
.hub-threat-list small {
  border: 1px solid rgba(201, 166, 107, 0.16);
  padding: 0.28rem 0.42rem;
  background: rgba(0, 0, 0, 0.28);
}

.hub-card-actions button {
  flex: 1 1 7rem;
}

.hub-compact-panel {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}

.hub-relic-panel img {
  width: min(5.25rem, 42%);
  aspect-ratio: 1;
  object-fit: contain;
  justify-self: start;
  border: 1px solid rgba(201, 166, 107, 0.16);
  background: radial-gradient(circle, rgba(150, 21, 25, 0.22), rgba(0, 0, 0, 0.52));
}

.hub-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.hub-resource-grid span {
  display: grid;
  gap: 0.15rem;
  border: 1px solid rgba(201, 166, 107, 0.16);
  padding: 0.48rem;
  background: rgba(0, 0, 0, 0.26);
  color: #a99a85;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.hub-resource-grid b {
  color: #f2ddbf;
  font-size: var(--font-lg);
}

.hub-list {
  display: grid;
  gap: var(--space-xs);
}

.hub-list article {
  border-left: 2px solid rgba(201, 166, 107, 0.24);
  padding: 0.45rem 0.6rem;
  background: rgba(0, 0, 0, 0.24);
}

.hub-list article.unread {
  border-left-color: rgba(214, 59, 47, 0.82);
  background: rgba(117, 13, 18, 0.18);
}

.old-ash-guidance {
  display: grid;
  gap: var(--space-sm);
}

@media (max-width: 1180px) {
  .hub-top-grid,
  .hub-lower-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hub-mid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-action-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hub-top-grid,
  .hub-mid-grid,
  .hub-lower-grid,
  .hub-action-row,
  .hub-resource-grid {
    grid-template-columns: 1fr;
  }

  .hub-hunter-row,
  .old-ash-row {
    grid-template-columns: 3.8rem minmax(0, 1fr);
  }
}

/* Vault System Shell */
.vault-shell-page {
  display: grid;
  gap: var(--space-md);
}

.vault-shell-grid,
.vault-storage-grid,
.vault-ledger-grid,
.vault-management-grid {
  display: grid;
  gap: var(--space-md);
}

.vault-shell-grid {
  grid-template-columns: minmax(19rem, 1fr) minmax(24rem, 1.35fr) minmax(14rem, 0.72fr);
}

.vault-storage-grid {
  grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 1fr) minmax(14rem, 0.72fr);
}

.vault-ledger-grid {
  grid-template-columns: minmax(22rem, 1.25fr) minmax(16rem, 0.78fr) minmax(15rem, 0.72fr);
}

.vault-management-grid {
  grid-template-columns: minmax(20rem, 1fr) minmax(18rem, 0.82fr) minmax(18rem, 0.82fr);
}

.vault-overview-panel,
.vault-currency-panel,
.vault-action-shell,
.vault-list-panel,
.vault-materials-panel,
.vault-transactions-panel,
.vault-security-shell,
.vault-shared-entry,
.vault-warnings-panel,
.vault-form-panel,
.vault-capacity-panel,
.vault-upgrade-panel {
  min-height: 0;
  border: 1px solid rgba(201, 166, 107, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 15, 13, 0.94), rgba(5, 5, 6, 0.98)),
    radial-gradient(circle at 18% 0%, rgba(128, 20, 24, 0.18), transparent 18rem);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.48);
}

.vault-overview-panel h2,
.vault-currency-panel h2,
.vault-action-shell h2,
.vault-list-panel h2,
.vault-materials-panel h2,
.vault-transactions-panel h2,
.vault-security-shell h2,
.vault-shared-entry h2,
.vault-warnings-panel h2,
.vault-form-panel h2,
.vault-capacity-panel h2,
.vault-upgrade-panel h2 {
  color: #d8bd87;
  font-size: var(--font-base);
}

.vault-door-sigil {
  display: grid;
  place-items: center;
  width: 3.3rem;
  height: 3.3rem;
  border: 1px solid rgba(201, 166, 107, 0.3);
  color: #f2ddbf;
  background:
    radial-gradient(circle, rgba(214, 59, 47, 0.28), transparent 62%),
    rgba(0, 0, 0, 0.34);
  font-family: var(--font-display);
}

.vault-overview-panel > strong {
  display: block;
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-xl);
  line-height: 1.04;
}

.vault-overview-panel p,
.vault-list-panel p,
.vault-shared-entry p,
.vault-security-shell p,
.vault-warnings-panel p,
.vault-form-panel p,
.vault-capacity-panel p,
.vault-upgrade-panel p,
.vault-currency-shell-grid p,
.vault-currency-shell-grid em,
.vault-item-list p,
.vault-item-list em,
.vault-transaction-scroll p,
.vault-transaction-scroll em {
  margin: 0;
  color: #cdbb9f;
  font-size: var(--font-sm);
  line-height: 1.38;
}

.vault-overview-stats,
.vault-material-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.vault-pill {
  display: grid;
  gap: 0.15rem;
  border: 1px solid rgba(201, 166, 107, 0.15);
  padding: 0.46rem;
  background: rgba(0, 0, 0, 0.24);
}

.vault-pill span,
.vault-currency-shell-grid span,
.vault-item-list span,
.vault-transaction-scroll span,
.vault-item-list small {
  color: #bba783;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vault-pill strong,
.vault-item-list strong,
.vault-transaction-scroll strong {
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-base);
}

.vault-capacity-meter {
  display: grid;
  gap: 0.25rem;
  margin-top: var(--space-xs);
}

.vault-capacity-meter i {
  height: 0.45rem;
  border: 1px solid rgba(201, 166, 107, 0.18);
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.vault-capacity-meter b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5c1116, #d8a24d);
}

.vault-capacity-meter span {
  color: #a99a85;
  font-size: var(--font-xs);
}

.vault-currency-shell-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.vault-currency-shell-grid article {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  gap: var(--space-xs);
  border: 1px solid rgba(201, 166, 107, 0.15);
  padding: 0.55rem;
  background: rgba(0, 0, 0, 0.24);
}

.vault-currency-shell-grid article.vault-currency-card-muted {
  border-style: dashed;
  opacity: 0.82;
}

.currency-icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(201, 166, 107, 0.25);
  color: #f2ddbf;
  background: rgba(117, 13, 18, 0.22);
  font-family: var(--font-display);
}

.vault-currency-shell-grid strong {
  color: #f2ddbf;
  font-size: var(--font-xl);
  line-height: 1;
}

.vault-action-shell {
  display: grid;
  gap: var(--space-xs);
}

.vault-action-shell button,
.vault-shared-entry button,
.vault-row-actions button,
.vault-form-panel button,
.vault-upgrade-panel button,
.vault-modal button {
  min-height: 2.3rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  padding: 0.4rem 0.55rem;
  color: #ead8ba;
  background: linear-gradient(180deg, rgba(74, 12, 14, 0.85), rgba(22, 8, 8, 0.96));
  font-family: var(--font-display);
  text-transform: uppercase;
}

.vault-action-shell button:disabled,
.vault-row-actions button:disabled,
.vault-form-panel button:disabled,
.vault-upgrade-panel button:disabled,
.vault-modal button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: rgba(0, 0, 0, 0.26);
}

.vault-action-shell button strong,
.vault-action-shell button span {
  display: block;
}

.vault-action-shell button span {
  color: #a99a85;
  font-size: var(--font-xs);
}

.vault-item-list,
.vault-transaction-scroll,
.vault-security-shell,
.vault-shared-entry,
.vault-warnings-panel {
  display: grid;
  gap: var(--space-xs);
}

.vault-transaction-scroll {
  max-height: 18rem;
  overflow: auto;
  padding-right: 0.2rem;
}

.vault-item-list article,
.vault-transaction-scroll article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xs);
  border-left: 2px solid rgba(201, 166, 107, 0.26);
  padding: 0.52rem 0.62rem;
  background: rgba(0, 0, 0, 0.24);
}

.vault-item-list article.relic-row {
  border-left-color: rgba(214, 59, 47, 0.72);
  background: rgba(117, 13, 18, 0.14);
}

.vault-row-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.vault-row-actions button {
  flex: 1 1 6rem;
  min-height: 2rem;
  font-size: var(--font-xs);
}

.vault-security-shell p {
  border-left: 2px solid rgba(214, 59, 47, 0.46);
  padding: 0.45rem 0.55rem;
  background: rgba(117, 13, 18, 0.14);
}

.vault-warnings-panel {
  border-left: 2px solid rgba(214, 59, 47, 0.5);
}

.vault-warnings-panel p,
.vault-warning-copy {
  color: #e1a27a;
}

.vault-action-note {
  margin: 0;
  border: 1px solid rgba(201, 166, 107, 0.18);
  border-left: 3px solid rgba(216, 162, 77, 0.7);
  padding: 0.52rem 0.65rem;
  color: #ead8ba;
  background: rgba(87, 55, 24, 0.22);
  font-size: var(--font-sm);
}

.vault-form-panel,
.vault-capacity-panel,
.vault-upgrade-panel {
  display: grid;
  gap: var(--space-xs);
}

.vault-form-currency-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-xs);
}

.vault-upgrade-panel > strong {
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-lg);
}

.vault-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background:
    radial-gradient(circle at 50% 12%, rgba(117, 13, 18, 0.24), transparent 28rem),
    rgba(0, 0, 0, 0.74);
}

.vault-modal {
  display: grid;
  gap: var(--space-sm);
  width: min(36rem, 100%);
  max-height: 85vh;
  overflow: auto;
  border: 1px solid rgba(201, 166, 107, 0.26);
  padding: var(--panel-padding);
  background:
    linear-gradient(180deg, rgba(22, 18, 15, 0.98), rgba(5, 5, 6, 0.99)),
    radial-gradient(circle at 18% 0%, rgba(216, 162, 77, 0.12), transparent 18rem);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.58), inset 0 0 34px rgba(0, 0, 0, 0.5);
}

.vault-modal h2 {
  margin: 0;
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-xl);
}

.vault-modal p {
  margin: 0;
  color: #cdbb9f;
  font-size: var(--font-sm);
  line-height: 1.4;
}

.vault-modal em {
  color: #bba783;
  font-size: var(--font-sm);
  line-height: 1.4;
}

.vault-inspect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.vault-modal label {
  display: grid;
  gap: 0.25rem;
  color: #bba783;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vault-modal input,
.vault-modal select {
  min-height: 2.35rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  padding: 0.42rem 0.55rem;
  color: #f2ddbf;
  background: rgba(0, 0, 0, 0.38);
}

.vault-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.vault-modal-actions button {
  flex: 1 1 8rem;
}

/* Player Settings / Owner Tools */
.settings-page {
  display: grid;
  gap: var(--space-md);
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.5fr);
  gap: var(--space-md);
}

.settings-account-panel,
.owner-tools-panel {
  border: 1px solid rgba(201, 166, 107, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 15, 13, 0.94), rgba(5, 5, 6, 0.98)),
    radial-gradient(circle at 16% 0%, rgba(128, 20, 24, 0.16), transparent 18rem);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.44);
}

.settings-account-panel h2,
.owner-tools-panel h2 {
  color: #d8bd87;
  font-size: var(--font-base);
}

.settings-account-mark {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
}

.settings-account-mark > span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(201, 166, 107, 0.28);
  color: #f2ddbf;
  background: radial-gradient(circle, rgba(214, 59, 47, 0.28), rgba(0, 0, 0, 0.34));
  font-family: var(--font-display);
  font-size: var(--font-xl);
}

.settings-account-mark strong,
.owner-tools-panel > div > strong,
.settings-option-card strong,
.owner-tools-grid strong {
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-lg);
  line-height: 1.05;
}

.settings-account-mark p,
.owner-tools-panel p,
.settings-option-card p,
.owner-tools-grid p {
  margin: 0;
  color: #cdbb9f;
  font-size: var(--font-sm);
  line-height: 1.38;
}

.settings-section-grid,
.owner-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.settings-option-card,
.owner-tools-grid article {
  display: grid;
  gap: var(--space-xs);
  min-height: 0;
  border: 1px solid rgba(201, 166, 107, 0.16);
  border-left: 2px solid rgba(201, 166, 107, 0.34);
  padding: var(--card-padding);
  background: rgba(0, 0, 0, 0.24);
}

.owner-tools-panel {
  display: grid;
  gap: var(--space-sm);
}

.owner-tools-grid article {
  border-left-color: rgba(214, 59, 47, 0.66);
  background:
    linear-gradient(180deg, rgba(117, 13, 18, 0.16), rgba(0, 0, 0, 0.24)),
    rgba(0, 0, 0, 0.2);
}

.settings-option-card button,
.owner-tools-grid button {
  min-height: 2.25rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  padding: 0.4rem 0.55rem;
  color: #ead8ba;
  background: linear-gradient(180deg, rgba(74, 12, 14, 0.85), rgba(22, 8, 8, 0.96));
  font-family: var(--font-display);
  text-transform: uppercase;
}

.settings-option-card button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  background: rgba(0, 0, 0, 0.24);
}

/* Bonded System Shell */
.bonded-page {
  display: grid;
  gap: var(--space-md);
}

.bond-top-grid,
.bond-middle-grid,
.bond-lower-grid,
.bond-bottom-grid {
  display: grid;
  gap: var(--space-md);
}

.bond-top-grid {
  grid-template-columns: minmax(19rem, 1fr) minmax(20rem, 1fr) minmax(18rem, 0.86fr);
}

.bond-middle-grid {
  grid-template-columns: minmax(20rem, 1fr) minmax(18rem, 0.8fr) minmax(16rem, 0.72fr);
}

.bond-lower-grid {
  grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1.15fr) minmax(18rem, 0.9fr);
}

.bond-bottom-grid {
  grid-template-columns: minmax(18rem, 0.9fr) minmax(20rem, 1fr) minmax(17rem, 0.78fr);
}

.bond-overview-panel,
.bond-status-panel,
.bond-partner-panel,
.bond-requests-panel,
.bond-ceremony-panel,
.bond-actions-panel,
.bond-perks-panel,
.bond-timeline-panel,
.bond-quests-panel,
.bond-shared-vault-panel,
.bond-warnings-panel,
.bond-dissolution-panel {
  min-height: 0;
  border: 1px solid rgba(201, 166, 107, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 15, 13, 0.94), rgba(5, 5, 6, 0.98)),
    radial-gradient(circle at 18% 0%, rgba(128, 20, 24, 0.18), transparent 18rem);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.48);
}

.bond-overview-panel h2,
.bond-status-panel h2,
.bond-partner-panel h2,
.bond-requests-panel h2,
.bond-ceremony-panel h2,
.bond-actions-panel h2,
.bond-perks-panel h2,
.bond-timeline-panel h2,
.bond-quests-panel h2,
.bond-shared-vault-panel h2,
.bond-warnings-panel h2,
.bond-dissolution-panel h2 {
  color: #d8bd87;
  font-size: var(--font-base);
}

.bond-thread-sigil {
  display: grid;
  place-items: center;
  width: 3.3rem;
  height: 3.3rem;
  border: 1px solid rgba(201, 166, 107, 0.3);
  color: #f2ddbf;
  background:
    radial-gradient(circle, rgba(214, 59, 47, 0.28), transparent 62%),
    rgba(0, 0, 0, 0.34);
  font-family: var(--font-display);
}

.bond-overview-panel > strong {
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-xl);
  line-height: 1.04;
}

.bond-overview-panel p,
.bond-status-panel p,
.bond-partner-panel p,
.bond-requests-panel p,
.bond-ceremony-panel p,
.bond-perks-panel p,
.bond-timeline-panel p,
.bond-quests-panel p,
.bond-shared-vault-panel p,
.bond-warnings-panel p,
.bond-dissolution-panel p,
.bond-list p,
.bond-partner-card em,
.bond-modal p {
  margin: 0;
  color: #cdbb9f;
  font-size: var(--font-sm);
  line-height: 1.38;
}

.bond-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.bond-pill {
  display: grid;
  gap: 0.15rem;
  border: 1px solid rgba(201, 166, 107, 0.15);
  padding: 0.46rem;
  background: rgba(0, 0, 0, 0.24);
}

.bond-pill span,
.bond-list span,
.bond-meter span {
  color: #bba783;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bond-pill strong,
.bond-list strong,
.bond-partner-card strong,
.bond-meter strong {
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-base);
}

.bond-meter {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1.2fr) auto;
  gap: var(--space-xs);
  align-items: center;
}

.bond-meter i {
  height: 0.45rem;
  border: 1px solid rgba(201, 166, 107, 0.18);
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.bond-meter b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5c1116, #d8a24d);
}

.bond-partner-card {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
}

.bond-partner-portrait {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(201, 166, 107, 0.28);
  color: #f2ddbf;
  background: radial-gradient(circle, rgba(214, 59, 47, 0.28), rgba(0, 0, 0, 0.34));
  font-family: var(--font-display);
  font-size: var(--font-xl);
}

.bond-list,
.bond-actions-panel,
.bond-warnings-panel,
.bond-shared-vault-panel,
.bond-dissolution-panel {
  display: grid;
  gap: var(--space-xs);
}

.bond-list article {
  display: grid;
  gap: 0.25rem;
  border-left: 2px solid rgba(201, 166, 107, 0.26);
  padding: 0.52rem 0.62rem;
  background: rgba(0, 0, 0, 0.24);
}

.bond-timeline-list {
  max-height: 21rem;
  overflow: auto;
  padding-right: 0.2rem;
}

.bond-row-actions,
.bond-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.bond-requests-panel button,
.bond-ceremony-panel button,
.bond-actions-panel button,
.bond-shared-vault-panel button,
.bond-dissolution-panel button,
.bond-row-actions button,
.bond-modal button {
  min-height: 2.3rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  padding: 0.4rem 0.55rem;
  color: #ead8ba;
  background: linear-gradient(180deg, rgba(74, 12, 14, 0.85), rgba(22, 8, 8, 0.96));
  font-family: var(--font-display);
  text-transform: uppercase;
}

.bond-requests-panel button:disabled,
.bond-ceremony-panel button:disabled,
.bond-actions-panel button:disabled,
.bond-shared-vault-panel button:disabled,
.bond-dissolution-panel button:disabled,
.bond-row-actions button:disabled,
.bond-modal button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: rgba(0, 0, 0, 0.26);
}

.bond-warnings-panel p,
.bond-action-note {
  border-left: 2px solid rgba(214, 59, 47, 0.46);
  padding: 0.45rem 0.55rem;
  background: rgba(117, 13, 18, 0.14);
}

.bond-action-note {
  margin: 0;
  color: #ead8ba;
  font-size: var(--font-sm);
}

.bond-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background:
    radial-gradient(circle at 50% 12%, rgba(117, 13, 18, 0.24), transparent 28rem),
    rgba(0, 0, 0, 0.74);
}

.bond-modal {
  display: grid;
  gap: var(--space-sm);
  width: min(38rem, 100%);
  max-height: 85vh;
  overflow: auto;
  border: 1px solid rgba(201, 166, 107, 0.26);
  padding: var(--panel-padding);
  background:
    linear-gradient(180deg, rgba(22, 18, 15, 0.98), rgba(5, 5, 6, 0.99)),
    radial-gradient(circle at 18% 0%, rgba(216, 162, 77, 0.12), transparent 18rem);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.58), inset 0 0 34px rgba(0, 0, 0, 0.5);
}

.bond-modal h2 {
  margin: 0;
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-xl);
}

.bond-modal label {
  display: grid;
  gap: 0.25rem;
  color: #bba783;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bond-modal input,
.bond-modal textarea {
  min-height: 2.35rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  padding: 0.42rem 0.55rem;
  color: #f2ddbf;
  background: rgba(0, 0, 0, 0.38);
}

.bond-candidate-list {
  display: grid;
  gap: var(--space-xs);
  max-height: 10rem;
  overflow: auto;
}

.bond-candidate-list button {
  display: grid;
  gap: 0.15rem;
  text-align: left;
}

.bond-candidate-list button.active {
  border-color: rgba(214, 59, 47, 0.72);
  background: rgba(117, 13, 18, 0.45);
}

.bond-candidate-list small {
  color: var(--muted);
}

.bond-modal-actions button {
  flex: 1 1 8rem;
}

/* Hunter Chronicles */
.hunter-chronicles-page {
  display: grid;
  gap: var(--space-md);
}

.chronicle-summary-grid,
.chronicle-lower-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-sm);
}

.chronicle-stat {
  display: grid;
  gap: 0.18rem;
  border: 1px solid rgba(201, 166, 107, 0.18);
  padding: var(--card-padding);
  color: #a99472;
  background:
    linear-gradient(180deg, rgba(23, 18, 14, 0.74), rgba(6, 5, 5, 0.88)),
    repeating-linear-gradient(135deg, rgba(201, 166, 107, 0.02) 0 1px, transparent 1px 8px);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.chronicle-stat strong {
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-lg);
  line-height: 1.05;
}

.chronicle-controls {
  display: grid;
  grid-template-columns: minmax(14rem, 1.3fr) repeat(2, minmax(9rem, 0.65fr)) auto;
  gap: var(--space-xs);
  align-items: end;
}

.chronicle-controls label {
  display: grid;
  gap: 0.22rem;
  color: #c9a66b;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.chronicle-controls input,
.chronicle-controls select {
  min-height: 2.35rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  padding: 0.45rem 0.55rem;
  color: #f2ddbf;
  background: rgba(0, 0, 0, 0.42);
}

.chronicle-controls button,
.chronicle-category-panel button {
  min-height: 2.35rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  color: #d8c5a9;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.chronicle-controls button.active,
.chronicle-category-panel button.active {
  border-color: rgba(214, 59, 47, 0.72);
  color: #fff0d2;
  background: rgba(117, 13, 18, 0.45);
}

.chronicle-layout {
  display: grid;
  grid-template-columns: minmax(11rem, 0.55fr) minmax(0, 1.35fr) minmax(17rem, 0.8fr);
  gap: var(--space-sm);
  align-items: start;
}

.chronicle-category-panel,
.chronicle-list-panel,
.chronicle-detail-panel,
.chronicle-title-panel,
.chronicle-hidden-panel {
  min-width: 0;
}

.chronicle-category-panel {
  display: grid;
  gap: var(--space-xs);
}

.chronicle-category-panel button {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.45rem 0.55rem;
  text-align: left;
}

.chronicle-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-sm);
}

.chronicle-card-grid button,
.chronicle-title-list article,
.chronicle-hidden-panel article {
  display: grid;
  gap: 0.28rem;
  min-height: 10rem;
  border: 1px solid rgba(201, 166, 107, 0.18);
  padding: var(--card-padding);
  color: #d8c5a9;
  background:
    linear-gradient(180deg, rgba(8, 7, 6, 0.72), rgba(6, 5, 5, 0.92)),
    radial-gradient(circle at 88% 0%, rgba(201, 166, 107, 0.13), transparent 9rem);
  text-align: left;
}

.chronicle-card-grid button.unlocked {
  border-color: rgba(201, 166, 107, 0.38);
}

.chronicle-card-grid button.locked {
  opacity: 0.72;
  filter: grayscale(0.35);
}

.chronicle-card-grid button.rarity-nightmare {
  border-color: rgba(214, 59, 47, 0.55);
  box-shadow: inset 0 0 0 1px rgba(214, 59, 47, 0.14);
}

.chronicle-card-grid span,
.chronicle-title-list span,
.chronicle-detail-panel > span {
  color: #c9a66b;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.chronicle-card-grid strong,
.chronicle-title-list strong,
.chronicle-detail-panel h2,
.chronicle-hidden-panel strong {
  color: #f2ddbf;
  font-family: var(--font-display);
}

.chronicle-card-grid p,
.chronicle-title-list p,
.chronicle-detail-panel p,
.chronicle-hidden-panel p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: var(--compact-line-height);
}

.chronicle-card-grid em,
.chronicle-title-list em {
  color: #8f7760;
  font-size: var(--font-xs);
}

.chronicle-detail-panel {
  display: grid;
  gap: var(--space-sm);
}

.chronicle-title-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-sm);
}

.chronicle-title-list article.equipped {
  border-color: rgba(214, 59, 47, 0.48);
}

.chronicle-hidden-panel {
  display: grid;
  gap: var(--space-sm);
}

/* Black Ledger */
.black-ledger-page {
  display: grid;
  gap: var(--space-md);
}

.black-ledger-summary-grid,
.black-ledger-lower-grid,
.black-ledger-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-sm);
}

.black-ledger-stat {
  display: grid;
  gap: 0.18rem;
  border: 1px solid rgba(88, 22, 22, 0.72);
  padding: var(--card-padding);
  color: #a99472;
  background:
    linear-gradient(180deg, rgba(18, 9, 9, 0.86), rgba(3, 3, 4, 0.94)),
    radial-gradient(circle at 100% 0%, rgba(120, 12, 18, 0.2), transparent 8rem);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.black-ledger-stat strong {
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-lg);
  line-height: 1.05;
}

.black-ledger-stat.infamy strong,
.black-ledger-stat.grave strong {
  color: #e56f61;
}

.black-ledger-stat.sealed strong {
  color: #c9a66b;
}

.black-ledger-controls {
  display: grid;
  grid-template-columns: minmax(14rem, 1.2fr) repeat(2, minmax(9rem, 0.65fr));
  gap: var(--space-xs);
  align-items: end;
}

.black-ledger-controls label {
  display: grid;
  gap: 0.22rem;
  color: #c9a66b;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.black-ledger-controls input,
.black-ledger-controls select {
  min-height: 2.35rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  padding: 0.45rem 0.55rem;
  color: #f2ddbf;
  background: rgba(0, 0, 0, 0.46);
}

.black-ledger-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.85fr) minmax(16rem, 0.7fr);
  gap: var(--space-sm);
  align-items: start;
}

.black-ledger-entry-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-sm);
}

.black-ledger-entry-list button,
.black-ledger-consequence-panel article,
.black-ledger-impact-list article {
  display: grid;
  gap: 0.28rem;
  min-height: 9.5rem;
  border: 1px solid rgba(88, 22, 22, 0.68);
  padding: var(--card-padding);
  color: #d8c5a9;
  background:
    linear-gradient(180deg, rgba(10, 7, 7, 0.82), rgba(3, 3, 4, 0.95)),
    repeating-linear-gradient(135deg, rgba(214, 59, 47, 0.025) 0 1px, transparent 1px 9px);
  text-align: left;
}

.black-ledger-entry-list button {
  cursor: pointer;
}

.black-ledger-entry-list button:hover,
.black-ledger-entry-list button:focus-visible {
  border-color: rgba(214, 59, 47, 0.72);
  box-shadow: inset 0 0 0 1px rgba(214, 59, 47, 0.18);
}

.black-ledger-entry-list button.severity-infamous,
.black-ledger-entry-list button.severity-irreversible {
  border-color: rgba(214, 59, 47, 0.78);
}

.black-ledger-entry-list button.visibility-sealed {
  border-style: double;
}

.black-ledger-entry-list span,
.black-ledger-detail-panel > span,
.black-ledger-consequence-panel span,
.black-ledger-impact-list span {
  color: #c9a66b;
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.black-ledger-entry-list strong,
.black-ledger-detail-panel h2,
.black-ledger-consequence-panel strong,
.black-ledger-impact-list strong {
  color: #f2ddbf;
  font-family: var(--font-display);
}

.black-ledger-entry-list p,
.black-ledger-detail-panel p,
.black-ledger-consequence-panel p,
.black-ledger-impact-list p,
.black-ledger-lower-grid p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: var(--compact-line-height);
}

.black-ledger-entry-list em,
.black-ledger-consequence-panel em {
  color: #8f7760;
  font-size: var(--font-xs);
}

.black-ledger-detail-panel,
.black-ledger-consequence-panel,
.black-ledger-impact-list {
  display: grid;
  gap: var(--space-sm);
}

.black-ledger-profile-panel {
  border-color: rgba(88, 22, 22, 0.68);
}

/* Shared Vault System */
.shared-vault-page {
  display: grid;
  gap: var(--space-md);
}

.shared-vault-top-grid,
.shared-vault-currency-grid,
.shared-vault-storage-grid,
.shared-vault-ledger-grid {
  display: grid;
  gap: var(--space-md);
}

.shared-vault-top-grid {
  grid-template-columns: minmax(19rem, 1fr) minmax(21rem, 1.1fr) minmax(18rem, 0.85fr);
}

.shared-vault-currency-grid {
  grid-template-columns: minmax(24rem, 1.35fr) minmax(16rem, 0.72fr) minmax(16rem, 0.72fr);
}

.shared-vault-storage-grid {
  grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 1fr) minmax(15rem, 0.7fr);
}

.shared-vault-ledger-grid {
  grid-template-columns: minmax(24rem, 1.35fr) minmax(18rem, 0.85fr);
}

.shared-vault-overview-panel,
.shared-members-panel,
.shared-permissions-panel,
.shared-currency-panel,
.shared-capacity-panel,
.shared-security-panel,
.shared-items-panel,
.shared-relics-panel,
.shared-deposit-panel,
.shared-transactions-panel,
.shared-warnings-panel,
.shared-vault-create-panel {
  min-height: 0;
  border: 1px solid rgba(201, 166, 107, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 15, 13, 0.94), rgba(5, 5, 6, 0.98)),
    radial-gradient(circle at 18% 0%, rgba(128, 20, 24, 0.18), transparent 18rem);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.48);
}

.shared-vault-overview-panel h2,
.shared-members-panel h2,
.shared-permissions-panel h2,
.shared-currency-panel h2,
.shared-capacity-panel h2,
.shared-security-panel h2,
.shared-items-panel h2,
.shared-relics-panel h2,
.shared-deposit-panel h2,
.shared-transactions-panel h2,
.shared-warnings-panel h2,
.shared-vault-create-panel h2 {
  color: #d8bd87;
  font-size: var(--font-base);
}

.shared-vault-sigil {
  display: grid;
  place-items: center;
  width: 3.3rem;
  height: 3.3rem;
  border: 1px solid rgba(201, 166, 107, 0.3);
  color: #f2ddbf;
  background:
    radial-gradient(circle, rgba(214, 59, 47, 0.28), transparent 62%),
    rgba(0, 0, 0, 0.34);
  font-family: var(--font-display);
}

.shared-vault-overview-panel > strong {
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-xl);
  line-height: 1.04;
}

.shared-vault-overview-panel p,
.shared-members-panel p,
.shared-permissions-panel p,
.shared-currency-panel p,
.shared-security-panel p,
.shared-relics-panel p,
.shared-deposit-panel p,
.shared-warnings-panel p,
.shared-vault-create-panel p,
.shared-list p,
.shared-list em,
.shared-currency-grid p,
.shared-currency-grid em,
.shared-transaction-scroll p,
.shared-transaction-scroll em,
.shared-modal p {
  margin: 0;
  color: #cdbb9f;
  font-size: var(--font-sm);
  line-height: 1.38;
}

.shared-vault-pill-grid,
.shared-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.shared-permission-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shared-pill {
  display: grid;
  gap: 0.15rem;
  border: 1px solid rgba(201, 166, 107, 0.15);
  padding: 0.46rem;
  background: rgba(0, 0, 0, 0.24);
}

.shared-pill span,
.shared-list span,
.shared-currency-grid span,
.shared-transaction-scroll span {
  color: #bba783;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.shared-pill strong,
.shared-list strong,
.shared-currency-grid strong,
.shared-transaction-scroll strong {
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-base);
}

.shared-capacity-meter {
  display: grid;
  gap: 0.25rem;
}

.shared-capacity-meter i {
  height: 0.45rem;
  border: 1px solid rgba(201, 166, 107, 0.18);
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.shared-capacity-meter b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5c1116, #d8a24d);
}

.shared-capacity-meter span {
  color: #a99a85;
  font-size: var(--font-xs);
}

.shared-currency-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.shared-currency-grid article {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  gap: var(--space-xs);
  border: 1px solid rgba(201, 166, 107, 0.15);
  padding: 0.55rem;
  background: rgba(0, 0, 0, 0.24);
}

.shared-currency-grid article.shared-currency-locked {
  border-style: dashed;
  opacity: 0.78;
}

.shared-currency-icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(201, 166, 107, 0.25);
  color: #f2ddbf;
  background: rgba(117, 13, 18, 0.22);
  font-family: var(--font-display);
}

.shared-list,
.shared-members-panel,
.shared-permissions-panel,
.shared-currency-panel,
.shared-security-panel,
.shared-deposit-panel,
.shared-warnings-panel,
.shared-vault-create-panel {
  display: grid;
  gap: var(--space-xs);
}

.shared-list article,
.shared-transaction-scroll article {
  display: grid;
  gap: 0.25rem;
  border-left: 2px solid rgba(201, 166, 107, 0.26);
  padding: 0.52rem 0.62rem;
  background: rgba(0, 0, 0, 0.24);
}

.shared-list article.shared-relic-row {
  border-left-color: rgba(214, 59, 47, 0.72);
  background: rgba(117, 13, 18, 0.14);
}

.shared-transaction-scroll {
  display: grid;
  gap: var(--space-xs);
  max-height: 20rem;
  overflow: auto;
  padding-right: 0.2rem;
}

.shared-row-actions,
.shared-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.shared-members-panel button,
.shared-currency-panel button,
.shared-deposit-panel button,
.shared-list button,
.shared-vault-create-panel button,
.shared-modal button {
  min-height: 2.3rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  padding: 0.4rem 0.55rem;
  color: #ead8ba;
  background: linear-gradient(180deg, rgba(74, 12, 14, 0.85), rgba(22, 8, 8, 0.96));
  font-family: var(--font-display);
  text-transform: uppercase;
}

.shared-members-panel button:disabled,
.shared-currency-panel button:disabled,
.shared-deposit-panel button:disabled,
.shared-list button:disabled,
.shared-vault-create-panel button:disabled,
.shared-modal button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: rgba(0, 0, 0, 0.26);
}

.shared-warnings-panel p,
.shared-vault-note {
  border-left: 2px solid rgba(214, 59, 47, 0.46);
  padding: 0.45rem 0.55rem;
  background: rgba(117, 13, 18, 0.14);
}

.shared-vault-note {
  margin: 0;
  color: #ead8ba;
  font-size: var(--font-sm);
}

.shared-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background:
    radial-gradient(circle at 50% 12%, rgba(117, 13, 18, 0.24), transparent 28rem),
    rgba(0, 0, 0, 0.74);
}

.shared-modal {
  display: grid;
  gap: var(--space-sm);
  width: min(40rem, 100%);
  max-height: 85vh;
  overflow: auto;
  border: 1px solid rgba(201, 166, 107, 0.26);
  padding: var(--panel-padding);
  background:
    linear-gradient(180deg, rgba(22, 18, 15, 0.98), rgba(5, 5, 6, 0.99)),
    radial-gradient(circle at 18% 0%, rgba(216, 162, 77, 0.12), transparent 18rem);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.58), inset 0 0 34px rgba(0, 0, 0, 0.5);
}

.shared-modal h2 {
  margin: 0;
  color: #f2ddbf;
  font-family: var(--font-display);
  font-size: var(--font-xl);
}

.shared-modal form,
.shared-modal label {
  display: grid;
  gap: var(--space-xs);
}

.shared-modal label {
  color: #bba783;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.shared-modal input,
.shared-modal select {
  min-height: 2.35rem;
  border: 1px solid rgba(201, 166, 107, 0.2);
  padding: 0.42rem 0.55rem;
  color: #f2ddbf;
  background: rgba(0, 0, 0, 0.38);
}

.shared-modal-actions button {
  flex: 1 1 8rem;
}

/* Whispers System */
.whispers-page {
  min-height: calc(100vh - var(--nav-height) - var(--space-xl));
}

.whisper-summary,
.whisper-seal-row,
.whisper-detail-meta,
.whisper-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.whisper-summary span {
  border: 1px solid rgba(191, 162, 103, 0.28);
  background: rgba(19, 14, 11, 0.72);
  color: var(--muted-gold);
  padding: 0.35rem 0.55rem;
  text-transform: uppercase;
  font-size: var(--font-xs);
  letter-spacing: 0;
}

.whisper-summary b {
  color: var(--ash-gold);
  margin-right: 0.25rem;
}

.whisper-action-note {
  border: 1px solid rgba(191, 162, 103, 0.28);
  background: rgba(97, 61, 32, 0.24);
  color: var(--ash-gold);
  padding: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-md);
}

.whisper-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.6fr) repeat(3, auto);
  gap: var(--space-sm);
  align-items: end;
  margin-bottom: var(--space-md);
}

.whisper-controls label {
  display: grid;
  gap: 0.25rem;
  color: var(--muted-gold);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.whisper-controls input,
.whisper-controls select {
  min-height: 2.35rem;
  border: 1px solid rgba(191, 162, 103, 0.32);
  background: rgba(11, 9, 8, 0.82);
  color: var(--bone);
  padding: 0.45rem 0.6rem;
  font: inherit;
}

.whisper-controls button.active {
  border-color: rgba(184, 54, 39, 0.7);
  box-shadow: inset 0 0 18px rgba(184, 54, 39, 0.16);
  color: var(--ember);
}

.whisper-shell-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(280px, 1fr) minmax(340px, 1.35fr);
  gap: var(--space-md);
  align-items: start;
}

.whisper-category-rail,
.whisper-list-panel,
.whisper-detail-panel {
  min-width: 0;
}

.whisper-category-rail {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-md));
}

.whisper-category-rail button {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.5rem;
  text-align: left;
  border: 1px solid rgba(191, 162, 103, 0.2);
  background: rgba(12, 10, 9, 0.66);
  color: var(--bone);
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.35rem;
}

.whisper-category-rail button.active {
  border-color: rgba(184, 54, 39, 0.62);
  background: rgba(84, 25, 20, 0.3);
}

.whisper-category-rail span {
  font-size: var(--font-sm);
  color: var(--ash-gold);
}

.whisper-category-rail em {
  color: var(--ember);
  font-style: normal;
}

.whisper-category-rail small {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.25;
}

.whisper-list {
  display: grid;
  gap: var(--space-sm);
  max-height: min(62vh, 620px);
  overflow: auto;
  padding-right: 0.2rem;
}

.whisper-list button {
  position: relative;
  display: grid;
  gap: 0.25rem;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(191, 162, 103, 0.24);
  background:
    linear-gradient(90deg, rgba(184, 54, 39, 0.12), transparent 34%),
    rgba(14, 11, 10, 0.78);
  color: var(--bone);
  padding: var(--space-sm);
}

.whisper-list button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(191, 162, 103, 0.42);
}

.whisper-list button.unread {
  border-color: rgba(191, 162, 103, 0.5);
  box-shadow: inset 0 0 18px rgba(191, 162, 103, 0.08);
}

.whisper-list button.active {
  border-color: rgba(184, 54, 39, 0.78);
  background:
    linear-gradient(90deg, rgba(184, 54, 39, 0.22), transparent 40%),
    rgba(20, 12, 10, 0.88);
}

.whisper-list button.priority-urgent::before {
  background: var(--ember);
}

.whisper-list button.priority-high::before {
  background: #c88746;
}

.whisper-list span,
.whisper-seal-row span {
  color: var(--ember);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.whisper-list strong,
.whisper-compose-placeholder strong {
  color: var(--ash-gold);
}

.whisper-list p {
  margin: 0;
  color: var(--bone);
  line-height: 1.35;
}

.whisper-list em,
.whisper-detail-meta {
  color: var(--muted);
  font-style: normal;
  font-size: var(--font-xs);
}

.whisper-list small {
  justify-self: start;
  border: 1px solid rgba(184, 54, 39, 0.45);
  color: var(--ember);
  padding: 0.15rem 0.35rem;
  text-transform: uppercase;
  font-size: var(--font-xs);
}

.whisper-detail-panel.priority-urgent {
  border-color: rgba(184, 54, 39, 0.78);
}

.whisper-seal-row {
  justify-content: space-between;
  border-bottom: 1px solid rgba(191, 162, 103, 0.16);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.whisper-seal-row em {
  color: var(--ash-gold);
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--font-xs);
}

.whisper-detail-panel h2 {
  color: var(--ash-gold);
  margin: 0 0 var(--space-sm);
  font-size: var(--font-xl);
}

.whisper-detail-meta {
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.whisper-body {
  white-space: pre-wrap;
  color: var(--bone);
  line-height: 1.55;
  margin: 0 0 var(--space-md);
}

.whisper-required-copy,
.whisper-compose-placeholder {
  border: 1px solid rgba(184, 54, 39, 0.32);
  background: rgba(70, 22, 18, 0.18);
  color: var(--bone);
  padding: var(--space-sm);
  margin: 0 0 var(--space-md);
}

.whisper-compose-placeholder {
  margin: var(--space-md) 0 0;
  border-color: rgba(191, 162, 103, 0.22);
  background: rgba(19, 14, 11, 0.62);
}

.whisper-compose-placeholder p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.whisper-detail-actions button:disabled,
.whisper-controls button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.header-whisper-btn span {
  display: inline-grid;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.35rem;
  place-items: center;
  border: 1px solid rgba(214, 59, 47, 0.55);
  border-radius: 999px;
  color: #fff0d2;
  background: rgba(117, 13, 18, 0.82);
  font-size: var(--font-xs);
  line-height: 1;
}

/* Leaderboards System */
.leaderboards-page {
  min-height: calc(100vh - var(--nav-height) - var(--space-xl));
}

.leaderboard-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 0.55fr) minmax(320px, auto);
  gap: var(--space-sm);
  align-items: end;
  margin-bottom: var(--space-md);
}

.leaderboard-controls label {
  display: grid;
  gap: 0.25rem;
  color: var(--muted-gold);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.leaderboard-controls input,
.leaderboard-controls select {
  min-height: 2.35rem;
  border: 1px solid rgba(191, 162, 103, 0.32);
  background: rgba(11, 9, 8, 0.82);
  color: var(--bone);
  padding: 0.45rem 0.6rem;
  font: inherit;
}

.leaderboard-timeframes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.leaderboard-timeframes button.active,
.leaderboard-category-nav button.active {
  border-color: rgba(184, 54, 39, 0.72);
  background: rgba(84, 25, 20, 0.32);
  color: var(--ember);
}

.leaderboard-shell-grid {
  display: grid;
  grid-template-columns: minmax(170px, 0.52fr) minmax(520px, 1.55fr) minmax(270px, 0.78fr);
  gap: var(--space-md);
  align-items: start;
}

.leaderboard-category-nav,
.leaderboard-preview-panel {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-md));
}

.leaderboard-category-nav button {
  width: 100%;
  display: grid;
  gap: 0.15rem;
  text-align: left;
  border: 1px solid rgba(191, 162, 103, 0.2);
  background: rgba(12, 10, 9, 0.66);
  color: var(--bone);
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.35rem;
}

.leaderboard-category-nav span {
  color: var(--ash-gold);
  font-size: var(--font-sm);
}

.leaderboard-category-nav small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.leaderboard-main {
  min-width: 0;
  display: grid;
  gap: var(--space-md);
}

.leaderboard-top-panels {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-md);
}

.leaderboard-personal-panel strong {
  color: var(--ember);
  font-size: var(--font-xl);
}

.leaderboard-personal-panel p,
.leaderboard-featured-panel p,
.leaderboard-category-note {
  color: var(--muted);
  margin: 0.25rem 0 var(--space-sm);
}

.leaderboard-featured-panel strong {
  color: var(--ash-gold);
}

.leaderboard-table {
  display: grid;
  gap: 0.35rem;
}

.leaderboard-table-head,
.leaderboard-table button {
  display: grid;
  grid-template-columns: 0.42fr 1.35fr 1fr 0.78fr 0.92fr;
  gap: var(--space-sm);
  align-items: center;
}

.leaderboard-table-head {
  color: var(--muted-gold);
  font-size: var(--font-xs);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(191, 162, 103, 0.18);
  padding: 0 0 0.35rem;
}

.leaderboard-table button {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(191, 162, 103, 0.22);
  background:
    linear-gradient(90deg, rgba(191, 162, 103, 0.08), transparent 44%),
    rgba(13, 10, 9, 0.72);
  color: var(--bone);
  padding: 0.5rem 0.6rem;
}

.leaderboard-table button.active {
  border-color: rgba(184, 54, 39, 0.68);
  box-shadow: inset 0 0 18px rgba(184, 54, 39, 0.12);
}

.leaderboard-table button strong {
  color: var(--ember);
}

.leaderboard-table button span:nth-child(2) {
  color: var(--ash-gold);
}

.leaderboard-preview-panel {
  min-width: 0;
}

.leaderboard-preview-portrait {
  width: clamp(4rem, 6vw, 5.6rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(191, 162, 103, 0.45);
  background:
    radial-gradient(circle at center, rgba(184, 54, 39, 0.22), transparent 58%),
    rgba(6, 5, 5, 0.86);
  color: var(--ash-gold);
  font-size: var(--font-xl);
  margin-bottom: var(--space-sm);
}

.leaderboard-preview-panel > span {
  color: var(--ember);
  text-transform: uppercase;
  font-size: var(--font-xs);
}

.leaderboard-preview-panel > strong {
  display: block;
  color: var(--ash-gold);
  font-size: var(--font-lg);
  margin-top: 0.2rem;
}

.leaderboard-preview-panel > p,
.leaderboard-preview-panel > em {
  color: var(--muted);
}

.leaderboard-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.leaderboard-preview-grid div {
  border: 1px solid rgba(191, 162, 103, 0.2);
  background: rgba(0, 0, 0, 0.28);
  padding: 0.45rem 0.55rem;
}

.leaderboard-preview-grid span {
  display: block;
  color: var(--muted-gold);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.leaderboard-preview-grid strong {
  color: var(--bone);
  font-size: var(--font-sm);
}

@media (max-width: 1180px) {
  .vault-shell-grid,
  .vault-storage-grid,
  .vault-ledger-grid,
  .vault-management-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vault-form-currency-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-section-grid,
  .owner-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bond-top-grid,
  .bond-middle-grid,
  .bond-lower-grid,
  .bond-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shared-vault-top-grid,
  .shared-vault-currency-grid,
  .shared-vault-storage-grid,
  .shared-vault-ledger-grid,
  .black-ledger-layout,
  .whisper-shell-grid,
  .leaderboard-shell-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leaderboard-category-nav,
  .leaderboard-preview-panel {
    position: static;
  }

  .shared-permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .vault-shell-grid,
  .vault-storage-grid,
  .vault-ledger-grid,
  .vault-management-grid,
  .vault-currency-shell-grid,
  .vault-overview-stats,
  .vault-material-grid,
  .vault-form-currency-strip,
  .vault-inspect-grid,
  .vault-item-list article,
  .vault-transaction-scroll article {
    grid-template-columns: 1fr;
  }

  .settings-grid,
  .settings-section-grid,
  .owner-tools-grid,
  .bond-top-grid,
  .bond-middle-grid,
  .bond-lower-grid,
  .bond-bottom-grid,
  .bond-pill-grid,
  .bond-meter,
  .shared-vault-top-grid,
  .shared-vault-currency-grid,
  .shared-vault-storage-grid,
  .shared-vault-ledger-grid,
  .shared-vault-pill-grid,
  .shared-permission-grid,
  .shared-currency-grid,
  .black-ledger-controls,
  .black-ledger-layout,
  .black-ledger-entry-list,
  .whisper-controls,
  .whisper-shell-grid,
  .leaderboard-controls,
  .leaderboard-shell-grid,
  .leaderboard-top-panels,
  .leaderboard-preview-grid {
    grid-template-columns: 1fr;
  }

  .leaderboard-table-head {
    display: none;
  }

  .leaderboard-table button {
    grid-template-columns: 0.35fr 1fr;
  }

  .leaderboard-table button span:nth-child(n + 3) {
    grid-column: 2;
  }

  .whisper-category-rail {
    position: static;
  }

  .whisper-list {
    max-height: none;
  }
}