/* Dashboard & challenges layout */

.dash {
  position: relative;
  z-index: var(--z-content);
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-9);
}

.dash__hero {
  margin-bottom: var(--sp-6);
  max-width: 48ch;
}

.dash__title {
  font-size: var(--fs-2xl);
  margin: var(--sp-3) 0;
}

.dash__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.stat {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.stat__label {
  display: block;
  font-family: var(--font-type);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--parchment-500);
  margin-bottom: var(--sp-2);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text-bright);
}

.dash__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.7fr);
  gap: var(--sp-5);
  align-items: start;
}

@media (max-width: 960px) {
  .dash__grid {
    grid-template-columns: 1fr;
  }
}

.dash__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.dash__side-title {
  font-size: var(--fs-md);
  margin: var(--sp-2) 0;
}

/* ---------------- Mansion rooms on the table ---------------- */

.rooms {
  margin-bottom: var(--sp-7);
}

.rooms__head {
  margin-bottom: var(--sp-5);
  max-width: 52ch;
}

.rooms__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin: var(--sp-2) 0;
  color: var(--text-bright);
}

.rooms__lede {
  margin: 0;
}

.rooms__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

@media (max-width: 960px) {
  .rooms__grid {
    grid-template-columns: 1fr;
  }
}

.room-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(88, 60, 28, 0.18), transparent 55%),
    var(--surface);
  min-height: 100%;
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

a.room-card:hover {
  border-color: rgba(217, 169, 74, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

a.room-card:hover .room-card__cta {
  border-color: var(--brass-400);
  color: var(--brass-200);
}

.room-card__cta {
  pointer-events: none;
  text-align: center;
}

.room-card.is-current {
  border-color: rgba(217, 169, 74, 0.45);
  box-shadow: 0 0 0 1px rgba(217, 169, 74, 0.12) inset;
}

.room-card.is-cleared {
  border-color: rgba(127, 212, 193, 0.28);
}

.room-card.is-locked {
  opacity: 0.72;
  filter: saturate(0.75);
}

.room-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

.room-card__pts {
  font-family: var(--font-type);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brass-400);
}

.room-card__num {
  margin: 0;
  font-family: var(--font-type);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-500);
}

.room-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--parchment-100);
  line-height: 1.2;
}

.room-card__lede {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.55;
  flex: 1;
}

.room-card__progress {
  height: 4px;
  background: rgba(244, 236, 216, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.room-card__progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brass-600), var(--brass-300));
}

.room-card.is-cleared .room-card__progress > span {
  background: linear-gradient(90deg, var(--spectre-600), var(--spectre-400));
}

.room-card__meta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--parchment-500);
}

.room-hero .room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.ladder--compact li {
  padding: var(--sp-3) var(--sp-1);
  grid-template-columns: 2.4ch 1fr auto;
}

.ladder--compact .ladder__sigil {
  display: none;
}

.challenge-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.challenge-filters .btn.is-active {
  border-color: var(--brass-400);
  color: var(--brass-300);
  box-shadow: var(--glow-brass);
}

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.challenge-card {
  cursor: pointer;
  text-align: left;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(120, 80, 36, 0.18), transparent 50%),
    linear-gradient(165deg, rgba(42, 30, 18, 0.78) 0%, rgba(16, 12, 10, 0.82) 100%);
  border-color: rgba(217, 169, 74, 0.22);
}

.challenge-card:hover {
  border-color: rgba(217, 169, 74, 0.45);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(150, 100, 45, 0.22), transparent 50%),
    linear-gradient(165deg, rgba(52, 36, 20, 0.88) 0%, rgba(18, 14, 10, 0.9) 100%);
}

.challenge-card .card__title {
  font-family: var(--font-display, Cinzel, serif);
  color: var(--parchment-100);
}

.challenge-card .card__text {
  color: var(--parchment-400);
}

.challenge-card.is-solved {
  border-color: rgba(127, 212, 193, 0.45);
}

.challenge-card.is-current:not(.is-solved) {
  border-color: rgba(200, 64, 47, 0.55);
  box-shadow: 0 0 0 1px rgba(200, 64, 47, 0.2);
}

.challenge-card__top {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.challenge-card__points {
  font-family: var(--font-display);
  color: var(--brass-300);
}

.flag-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--brass-300);
  padding: 0.1em 0.4em;
  border: 1px solid rgba(217, 169, 74, 0.25);
  border-radius: var(--r-xs);
  background: rgba(217, 169, 74, 0.08);
}

.challenge-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(34rem, calc(100vw - 1.5rem));
  width: 100%;
  max-height: min(92vh, 52rem);
  overflow: visible;
  color: #2a1c12;
}

.challenge-modal:focus {
  outline: none;
}

.challenge-modal::backdrop {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(40, 24, 12, 0.45), rgba(0, 0, 0, 0.78) 70%),
    rgba(4, 3, 6, 0.55);
  backdrop-filter: blur(10px) saturate(0.85);
  -webkit-backdrop-filter: blur(10px) saturate(0.85);
}

.challenge-modal__inner.panel,
.challenge-modal__inner {
  width: 100%;
  max-height: min(92vh, 52rem);
  overflow: auto;
  border: 1px solid rgba(42, 28, 18, 0.55);
  border-radius: 0;
  background:
    radial-gradient(ellipse at 28% 12%, rgba(255, 236, 196, 0.5), transparent 42%),
    radial-gradient(ellipse at 82% 88%, rgba(60, 28, 12, 0.28), transparent 40%),
    linear-gradient(148deg, #efe2bf 0%, #e0c89a 38%, #c9a978 72%, #a88452 100%);
  box-shadow:
    0 0 0 1px rgba(255, 220, 170, 0.16) inset,
    0 28px 70px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(180, 90, 30, 0.1);
  clip-path: polygon(
    0.8% 2.5%,
    3.5% 0%,
    97% 1.5%,
    100% 7%,
    98.5% 96%,
    93% 100%,
    5% 98.5%,
    0% 91%
  );
  transform: rotate(-0.35deg);
  color: #2a1c12;
}

.challenge-modal__inner.panel::before {
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  height: auto;
  opacity: 0.9;
  background:
    radial-gradient(circle at 10% 14%, rgba(20, 10, 4, 0.35), transparent 20%),
    radial-gradient(circle at 90% 10%, rgba(20, 10, 4, 0.28), transparent 16%),
    radial-gradient(circle at 72% 90%, rgba(20, 10, 4, 0.4), transparent 22%),
    linear-gradient(90deg, transparent, rgba(90, 50, 18, 0.22), transparent);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.challenge-modal .panel__body {
  position: relative;
  z-index: 1;
  padding: clamp(1.4rem, 3.5vw, 2.1rem) clamp(1.25rem, 3.5vw, 2rem);
}

.challenge-modal .eyebrow {
  color: rgba(42, 28, 18, 0.72);
}

.challenge-modal .eyebrow::before,
.challenge-modal .eyebrow::after {
  background: linear-gradient(90deg, transparent, rgba(90, 50, 18, 0.55), transparent);
}

.challenge-modal #modalTitle,
.challenge-modal h2 {
  font-family: var(--font-display, Cinzel, serif);
  color: #1a100a;
  letter-spacing: 0.04em;
}

.challenge-modal #modalMeta,
.challenge-modal .muted,
.challenge-modal .artifact-box__note,
.challenge-modal #hintCostNote {
  color: rgba(42, 28, 18, 0.7) !important;
}

.challenge-modal #modalDesc {
  color: rgba(42, 28, 18, 0.9);
  font-family: var(--font-body, "Cormorant Garamond", serif);
  font-size: 1.08rem;
  line-height: 1.55;
}

.challenge-modal .hint,
.challenge-modal .artifact-box {
  border-top-color: rgba(42, 28, 18, 0.22);
}

.challenge-modal .typewriter-note {
  color: rgba(42, 28, 18, 0.78);
}

.challenge-modal .field__label {
  color: rgba(42, 28, 18, 0.72);
}

.challenge-modal .field__shell {
  background: rgba(255, 244, 220, 0.55);
  border: 1px solid rgba(42, 28, 18, 0.4);
  border-radius: 0;
}

.challenge-modal .field__shell:focus-within {
  border-color: rgba(90, 50, 18, 0.85);
  box-shadow: 0 0 0 2px rgba(160, 100, 40, 0.22);
}

.challenge-modal .field__input {
  color: #1a100a;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}

.challenge-modal .field__input::placeholder {
  color: rgba(42, 28, 18, 0.45);
}

.challenge-modal .field__error {
  color: #7a2218;
}

.challenge-modal .btn {
  border-radius: 0;
  font-family: var(--font-type, "Special Elite", monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.challenge-modal .btn--primary {
  background: linear-gradient(180deg, #6f4a23 0%, #3d2914 100%);
  border-color: rgba(42, 28, 18, 0.65);
  color: #f4ecd8;
  box-shadow: 0 1px 0 rgba(255, 220, 170, 0.18) inset;
}

.challenge-modal .btn--primary:hover {
  background: linear-gradient(180deg, #8a5d2c 0%, #55391b 100%);
  color: #fff8e8;
}

.challenge-modal .btn--spectral,
.challenge-modal .btn--ghost {
  background: rgba(255, 244, 220, 0.35);
  border: 1px solid rgba(42, 28, 18, 0.45);
  color: #2a1c12;
  box-shadow: none;
}

.challenge-modal .btn--spectral:hover,
.challenge-modal .btn--ghost:hover {
  background: rgba(255, 244, 220, 0.55);
  border-color: rgba(42, 28, 18, 0.7);
  color: #1a100a;
}

.challenge-modal .btn--spectral::before {
  display: none;
}

.challenge-modal .auth__between {
  margin-top: 0.35rem;
  gap: 0.75rem;
}

@media (max-width: 520px) {
  .challenge-modal {
    max-width: calc(100vw - 1rem);
    transform: none;
  }

  .challenge-modal__inner.panel,
  .challenge-modal__inner {
    transform: none;
    clip-path: none;
    border-radius: 2px;
  }
}

.hint {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-1);
  border-top: 1px solid var(--border);
}

.artifact-box {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-1);
  border-top: 1px solid var(--border);
}

.artifact-box[hidden] {
  display: none !important;
}

.artifact-box__note {
  margin: 0;
  font-size: var(--fs-xs);
  opacity: 0.78;
}

.hint .typewriter-note {
  margin: 0;
  white-space: pre-wrap;
}

.hint .muted {
  margin: 0;
  font-size: var(--fs-xs);
  opacity: 0.78;
}

.ladder__score.is-gain {
  color: var(--brass-300);
}

.ladder__score.is-loss {
  color: color-mix(in srgb, #c45c5c 80%, var(--parchment-400));
}

#ledgerTotals {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
}

.whoami__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.35em 0.85em;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--brass-300);
  background: rgba(4, 3, 6, 0.5);
}