/* ==========================================================================
   Knight Estate — design tokens
   Palette: near-black ground, aged parchment ink, muted antique gold,
   deep burgundy accent, cold steel for structural UI (inputs/panels).
   Type: Cinzel for eyebrows only (used sparingly) — the wordmark itself
   is now the supplied logo art, not set type.
   Spectral for reading copy, Inter for anything interactive (forms,
   buttons, nav) so the login flow reads as trustworthy, not thematic.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --void: #0c0d0f;
  --panel: #17191c;
  --panel-raised: #1f2226;
  --steel: #2b3138;
  --steel-line: #3a424b;

  --ink: #ece5d4;
  --ink-dim: #a79d8a;
  --ink-faint: #6f6a60;

  --gold: #b3904f;
  --gold-bright: #d3ae6f;
  --burgundy: #7a2431;
  --burgundy-bright: #9c2f3f;
  --success: #5c8a68;
  --danger: #b1544a;

  --font-display: "Cinzel", serif;
  --font-body: "Spectral", serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;

  --radius: 6px;
  --shadow-panel: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

body {
  min-height: 100vh;
}

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

/* ---------- backdrop ----------
   bg.jpg is the same asset on both pages; we darken it with a layered
   scrim rather than shipping a second, pre-darkened image, so it stays
   in sync no matter which page loads it. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("assets/bg.png");
  background-size: cover;
  background-position: center;
}

.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 10, 11, 0.72) 0%, rgba(9, 10, 11, 0.52) 40%, rgba(9, 10, 11, 0.8) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.4) 70%);
}

/* ---------- brand (logo emblem + 3D wordmark art) ---------- */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.brand-emblem {
  height: 34px;
  width: auto;
  aspect-ratio: 231 / 285;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.brand-text {
  height: 26px;
  width: auto;
  aspect-ratio: 442 / 325;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.brand-lg .brand-emblem {
  height: 52px;
}

.brand-lg .brand-text {
  height: 38px;
}

.brand-sm {
  justify-content: flex-start;
}

.brand-sm .brand-emblem {
  height: 26px;
}

.brand-sm .brand-text {
  height: 19px;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- layout shells ---------- */
.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.center-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ---------- panel / card ---------- */
.panel {
  background: linear-gradient(180deg, rgba(31, 34, 38, 0.88), rgba(23, 25, 28, 0.9));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}

/* ---------- form controls (Inter — kept plain and legible) ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-dim);
}

.field input {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--steel);
  border: 1px solid var(--steel-line);
  border-radius: 4px;
  padding: 11px 12px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.field input::placeholder {
  color: var(--ink-faint);
}

.field input:focus {
  border-color: var(--gold);
  background: #313841;
}

.field input:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 1px;
}

.form-error {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--danger);
  min-height: 1.2em;
  margin-top: -4px;
  margin-bottom: 12px;
}

.form-note {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--success);
  min-height: 1.2em;
  margin-top: -4px;
  margin-bottom: 12px;
}

/* primary UI button — used for auth actions, logout, etc. Plain and
   professional on purpose; the gold "buy" buttons are the only place
   the store gets ornamental. */
.btn {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 11px 18px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--gold);
  color: #1a1408;
  width: 100%;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-primary:disabled {
  filter: grayscale(0.4) brightness(0.7);
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  border-color: var(--steel-line);
  color: var(--ink-dim);
}

.btn-ghost:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}

/* ---------- auth card ---------- */
.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 32px 28px;
}

.auth-header {
  text-align: center;
  margin-bottom: 28px;
}

.auth-header p {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin: 8px 0 0;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--steel-line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;
}

.tab {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  padding: 10px 0;
  background: var(--void);
  color: var(--ink-faint);
  cursor: pointer;
  border: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab[aria-selected="true"] {
  background: var(--steel);
  color: var(--ink);
}

.auth-footer {
  text-align: center;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ---------- store header ---------- */
.store-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--steel-line);
  background: rgba(12, 13, 15, 0.55);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.store-header .identity {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.store-header .identity .greeting {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.store-header .identity .name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}

/* ---------- store body ---------- */
.store-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  width: 100%;
}

.store-intro {
  text-align: center;
  margin-bottom: 40px;
}

.store-intro h1 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 10px 0 0;
  color: var(--ink);
}

.store-intro p {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--ink-dim);
  max-width: 480px;
  margin: 10px auto 0;
}

.status-banner {
  max-width: 620px;
  margin: 0 auto 28px;
  padding: 12px 16px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  text-align: center;
  border: 1px solid;
}

.status-banner.success {
  background: rgba(92, 138, 104, 0.12);
  border-color: var(--success);
  color: #bfe0c9;
}

.status-banner.error {
  background: rgba(177, 84, 74, 0.12);
  border-color: var(--danger);
  color: #f0c3bd;
}

.status-banner.pending {
  background: rgba(179, 144, 79, 0.12);
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* ---------- product card ----------
   Each bundle is its own full-width block — stacked vertically, never
   side by side, per spec — split image / content, collapsing to a
   single column on narrow screens. */
.bundle {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding: 28px;
  margin-bottom: 28px;
}

.bundle-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.bundle-media img {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 500 / 506;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
}

.rarity-seal {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 4px 12px;
}

.bundle-content h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 4px;
  color: var(--ink);
}

.bundle-content .role {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.bundle-content .description {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 0 18px;
}

.bundle-includes {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--ink);
  margin: 0 0 18px;
  padding: 10px 14px;
  background: var(--void);
  border: 1px solid var(--steel-line);
  border-radius: 4px;
  display: inline-block;
}

/* stat grid */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 18px;
  margin-bottom: 16px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat .stat-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--ink-dim);
}

.stat .stat-label b {
  color: var(--ink);
  font-weight: 600;
}

.stat-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--steel);
  overflow: hidden;
}

.stat-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--burgundy), var(--gold));
}

.talents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.talent-chip {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--ink-dim);
  border: 1px solid var(--steel-line);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ---------- image-textured buy button ----------
   Background art comes from "buy button.png" / "buy button pressed.png"
   (520x111). The price is the only text drawn over it. */
.buy-button {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 520 / 111;
  border: none;
  padding: 0;
  cursor: pointer;
  background-image: url("assets/buy button.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.buy-button:active,
.buy-button.is-pressed {
  background-image: url("assets/buy button pressed.png");
}

.buy-button .price {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.05rem;
  color: #241a08;
  letter-spacing: 0.02em;
}

.buy-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.5) brightness(0.85);
}

.buy-button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .bundle {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  .bundle-media img {
    max-width: 180px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .store-header {
    padding: 14px 16px;
  }
}

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

/* ==========================================================================
   Landing page
   ========================================================================== */

.landing-nav {
  justify-content: space-between;
}

.landing-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px 100px;
  width: 100%;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 64px 20px 56px;
  max-width: 720px;
  margin: 0 auto;
}

.hero-heraldry {
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin: 0 auto 20px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.6));
}

.hero h1 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 14px 0 0;
}

.hero .subhead {
  font-family: var(--font-ui);
  font-size: 1.02rem;
  color: var(--ink-dim);
  max-width: 480px;
  margin: 16px auto 0;
  line-height: 1.6;
}

.hero-cta {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.btn-lg {
  padding: 15px 30px;
  font-size: 1rem;
  max-width: 380px;
}

.hero-cta .fine-print {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ---------- generic landing section ---------- */
.landing-section {
  margin: 68px 0;
}

.landing-section-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 32px;
}

.landing-section-head h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ink);
  margin: 10px 0 0;
}

.landing-section-head p {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--ink-dim);
  margin: 10px 0 0;
  line-height: 1.6;
}

.intro-copy {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-dim);
}

.intro-copy strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- screenshot feature rows ---------- */
.screen-feature-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
}

.screen-feature {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
}

.screen-feature img {
  flex: 0 0 auto;
  width: 110px;
  aspect-ratio: 1080 / 2400;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--steel-line);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.6);
}

.screen-feature-text h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  margin: 0 0 6px;
}

.screen-feature-text p {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
}

/* ---------- feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feature-card {
  padding: 26px 24px;
}

.feature-card .feature-icon {
  font-size: 1.4rem;
  margin-bottom: 12px;
  display: inline-block;
}

.feature-card h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.feature-card p {
  font-family: var(--font-ui);
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
}

/* ---------- commander card showcase ---------- */
.card-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.card-item img {
  width: 90px;
  aspect-ratio: 500 / 834;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
  transition: transform 0.2s ease;
}

.card-item:hover img {
  transform: translateY(-4px);
}

.card-item .card-tier {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.card-item.tier-legendary .card-tier {
  color: var(--gold-bright);
}

.card-item.tier-epic .card-tier {
  color: #9c7fd6;
}

/* ---------- legacy list ---------- */
.legacy-list {
  max-width: 560px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.legacy-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--ink-dim);
  line-height: 1.55;
}

.legacy-list .legacy-mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legacy-list strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- final CTA ---------- */
.cta-panel {
  text-align: center;
  padding: 44px 28px;
  max-width: 620px;
  margin: 0 auto;
}

.cta-panel h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink);
  margin: 10px 0 0;
}

.cta-panel .cta-body {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--ink-dim);
  max-width: 440px;
  margin: 12px auto 0;
  line-height: 1.6;
}

.cta-panel .cta-perk {
  display: inline-block;
  margin: 18px auto 0;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 6px 16px;
}

.cta-panel .hero-cta {
  margin-top: 24px;
}

/* ---------- footer ---------- */
.landing-footer {
  border-top: 1px solid var(--steel-line);
  padding: 32px 20px 40px;
  text-align: center;
}

.landing-footer .brand {
  display: inline-flex;
  margin-bottom: 10px;
}

.landing-footer .brand-emblem {
  height: 22px;
}

.landing-footer .brand-text {
  height: 16px;
}

.landing-footer p {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: 4px 0;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}

.social-links a {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-dim);
  border: 1px solid var(--steel-line);
  border-radius: 999px;
  padding: 6px 16px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.social-links a:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
}

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

  .screen-feature {
    flex-direction: column;
    text-align: center;
  }

  .screen-feature img {
    width: 130px;
  }

  .card-item img {
    width: 78px;
  }

  .hero {
    padding: 48px 16px 40px;
  }
}