/* Detective Lands: nightfall palette. Layout remains in styles.css/shop.css. */
:root {
  color-scheme: dark;
  --ink: #f1eee5;
  --deep: #121815;
  --sea: #b8c8ad;
  --teal: #a5b99f;
  --sky: #303a32;
  --paper: #1b211e;
  --white: #f1eee5;
  --line: #526056;
  --muted: #bec8bc;
  --gold: #cf9275;
  --green: #849b7c;
  --blue: var(--sea);
  --navy: var(--ink);
  --surface: #29312b;
  --field: #ecebe2;
  --field-ink: #1a231d;
  --shop-navy: #f1eee5;
  --shop-cream: #29312b;
  --shop-gold: #cf9275;
  --faction-selected: #3b483c;
}

body { background: var(--paper); color: var(--ink); }
::selection { background: #b67e68; color: #111815; }
html { scrollbar-color: #566759 #1b211e; }
input, textarea { caret-color: #405e47; }
a { color: var(--sea); text-underline-offset: 4px; }
:focus-visible { outline-color: #dca586; }
.skip-link { background: var(--gold); color: #171d18; }
.site-header, header, .site-footer, footer { background: var(--deep); }
.site-nav a, header nav a, .site-footer a, footer a { color: var(--ink); }
.site-nav a:hover, header nav a:hover { color: var(--gold); }
.nav-account { border-color: #788d7c; }
header nav>a[aria-current="page"], .nav-links a[aria-current="page"] { color: var(--gold); }
.footer-main p, .footer-bottom { color: var(--muted); }
.footer-bottom { border-color: #4e5a50; }

.lede, .field-hint, .status, .section-heading p,
.loop-steps p, .collection-copy p, .feature-details p { color: var(--muted); }
.eyebrow, .feature-status { color: var(--sea); }
.button, button.button {
  background: var(--gold);
  color: #182019;
  border: 0;
  box-shadow: 0 7px 20px #090d0a80;
}
.button:hover, button.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 24px #090d0a9c;
}
.button.secondary, button.button.secondary {
  background: var(--surface);
  border: 1px solid #6c7c6d;
  color: var(--ink);
  box-shadow: none;
}
.button-dark {
  background: #aebfa8;
  border: 0;
  color: #182019;
  box-shadow: 0 7px 20px #090d0a80;
}
.button-dark:hover { color: #182019; }
.card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}
.warning { background: #45342f; border-color: #916d5c; }
code { background: #394139; color: var(--ink); }
.page-intro { border-color: var(--line); }
.page-intro>img { filter: drop-shadow(8px 12px 5px #090e0ab3); }

/* An illustrated city at dusk, with the artwork carrying the color. */
.home-hero { background: #222b25; border-color: #566356; }
.hero-copy h1 em { color: #c9a08b; }
.scene-sun { display: none; }
.world-board { filter: drop-shadow(0 23px 18px #080d08ba); }
.hero-character { filter: drop-shadow(5px 13px 8px #080d08bf); }
.scene-caption { background: #111815; color: var(--ink); }
.loop-steps { border-color: var(--line); }
.arcade-section { background: #131a16; }
.arcade-intro p, .section-note, .arcade-gallery figcaption span { color: #d1dacf; }
.arcade-gallery figure { background: #29312b; border-color: #5b6b5d; }
.collection-art { background: #343d35; border-color: #6c7b6d; }
.collection-art .pack { filter: drop-shadow(7px 12px 8px #080d08ad); }
.future-strip { background: #40312d; border-color: #755448; }
.future-inner .button { background: var(--gold); color: #182019; }

/* Account, onboarding and information pages. */
input, select {
  background: var(--field);
  border-color: #a4b2a3;
  color: var(--field-ink);
}
input::placeholder { color: #536354; }
fieldset, .divider::before, .divider::after,
.ledger-row, .feature-details .two-col,
.feature-details .two-col article+article { border-color: var(--line); }
.avatar-placeholder { background: #3b4a3d; color: var(--ink); }
.avatar-option { background: #333c34; color: var(--ink); border-color: #647467; }
.avatar-option[aria-pressed="true"] { background: #455849; border-color: #b8c8ad; }
.avatar-option img { background: #444f45; }
.tutorial { background: #344237; border-color: #667d68; }
.invite-code { background: #344237; border-color: var(--sea); }
.referral-friend span { color: var(--muted); }
.feature-art { background: #303b31; border-color: #657866; }
.feature-art>img { filter: drop-shadow(10px 14px 7px #0b110ca6); }
main.shell>p { max-width: 75ch; }

/* Collector Shop: quiet surfaces around the vivid game art. */
.shop-top { background: var(--deep); }
.shop-top a, .shop-top .brand { color: var(--ink); }
.shop-title { background: #242d26; border-color: #5a685b; }
.shop-title-art { background: #493b38; border-color: #8b7268; }
.shop-title-art img { filter: drop-shadow(5px 8px 6px #0b0d0ad9); }
.shop-balances span {
  background: #161d18;
  color: var(--ink);
  border-color: #677a68;
}
.shop-balances b { color: var(--gold); }
.shop-intro { background: var(--surface); color: var(--ink); border-color: var(--line); }
.shop-status { background: #39332e; color: var(--ink); border-color: #766359; }
.shop-tabs button {
  background: var(--surface);
  border-color: #657468;
  color: var(--ink);
}
.shop-tabs button.active { background: var(--gold); border-color: var(--gold); color: #182019; }
.shop-filters label, .shop-result-bar, .album-filter,
.shop-product-info h3, .shop-product-info strong { color: var(--ink); }
.shop-filters select, .shop-filters input[type=number],
.shop-result-bar select, .album-filter select,
.shop-dialog input[type=number] {
  background: var(--field);
  border-color: #a4b2a3;
  color: var(--field-ink);
}
.shop-product { background: var(--surface); border-color: var(--line); box-shadow: none; }
.shop-product.rarity-rare { border-color: #90ad97; }
.shop-product.rarity-epic { border-color: #a68db1; }
.shop-product.rarity-legendary { border-color: #ce9d77; }
.shop-product-art { background: #212a23; }
.shop-product-info .button { background: var(--gold); color: #182019; }
.owned-indicator { color: var(--muted); }
.shop-dialog { color: var(--ink); background: var(--surface); border-color: #9d725e; }
.shop-dialog::backdrop { background: #070a08d9; }
.copy-row { border-color: var(--line); }
.copy-row button { background: #354036; border-color: #6d7b6e; color: var(--ink); }
.reveal-flip.rarity-epic { filter: drop-shadow(0 0 12px #8e7598); }
.reveal-flip.rarity-legendary { filter: drop-shadow(0 0 12px #b78162); }

@media (max-width: 600px) {
  .shop-balances { background: transparent; }
}