/* =============================================================================
   MARBLE CLASH — UI v2 "Modern Brass" for standalone pages
   -----------------------------------------------------------------------------
   * Linked by standalone pages (showcase, fairness, terms, privacy, rules, socials)
     that don't load ui-v2.css. Presentation only.
   * Same design tokens as ui-v2.css. Page-specific rules key off a body class
     (body.mc-page + body.mc-<page>), so linking this file changes nothing else.
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

body.mc-page {
  --mc-bg: #1a110a;
  --mc-bg-2: #22170e;
  --mc-surface: #2c1e12;
  --mc-surface-2: #382717;
  --mc-surface-3: #46311e;
  --mc-line: rgba(214, 170, 92, 0.24);
  --mc-line-strong: rgba(214, 170, 92, 0.55);
  --mc-brass: #deb366;
  --mc-brass-hi: #f6d898;
  --mc-gold-grad: linear-gradient(180deg, #f8dea0 0%, #e0b464 52%, #b98a3c 100%);
  --mc-ink: #2a1a07;
  --mc-text: #fbf1de;
  --mc-muted: #cdb48d;
  --mc-dim: #a08a69;
  --mc-radius-sm: 8px;
  --mc-radius: 12px;
  --mc-radius-lg: 16px;
  --mc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mc-font-display: 'Barlow Condensed', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  background: radial-gradient(120% 80% at 50% 0%, #2a1c10 0%, #1a110a 55%, #120b06 100%) !important;
  color: var(--mc-text) !important;
  font-family: var(--mc-font) !important;
}

/* -----------------------------------------------------------------------------
   3D Showcase (designer_capsules_showcase.html)
   -------------------------------------------------------------------------- */
body.mc-showcase header { border-bottom: 1px solid var(--mc-line) !important; }
body.mc-showcase .badge {
  background: rgba(214, 170, 92, 0.14) !important;
  color: var(--mc-brass-hi) !important;
  border: 1px solid var(--mc-line-strong) !important;
  font-family: var(--mc-font) !important;
}
body.mc-showcase h1 {
  font-family: var(--mc-font-display) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  background: none !important;
  -webkit-text-fill-color: var(--mc-brass-hi) !important;
  color: var(--mc-brass-hi) !important;
}
body.mc-showcase .subtitle { color: var(--mc-muted) !important; }
body.mc-showcase .mode-nav {
  background: var(--mc-bg-2) !important;
  border: 1px solid var(--mc-line) !important;
}
body.mc-showcase .mode-tab { color: var(--mc-muted) !important; font-family: var(--mc-font) !important; }
body.mc-showcase .mode-tab:hover { color: var(--mc-text) !important; background: rgba(214, 170, 92, 0.08) !important; }
body.mc-showcase .mode-tab.active {
  background: var(--mc-gold-grad) !important;
  color: var(--mc-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 14px rgba(214, 170, 92, 0.3) !important;
}
body.mc-showcase .viewport-container {
  background: #140d07 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--mc-line-strong) !important;
}
body.mc-showcase .hud-overlay {
  background: rgba(26, 17, 10, 0.88) !important;
  border: 1px solid var(--mc-line-strong) !important;
}
body.mc-showcase .hud-btn {
  border: 1px solid var(--mc-line-strong) !important;
  color: var(--mc-text) !important;
  font-family: var(--mc-font) !important;
}
body.mc-showcase .hud-btn:hover { background: rgba(214, 170, 92, 0.12) !important; border-color: var(--mc-brass) !important; }
body.mc-showcase .cat-pill {
  background: var(--mc-surface-2) !important;
  border: 1px solid var(--mc-line-strong) !important;
  color: var(--mc-muted) !important;
  font-family: var(--mc-font) !important;
}
body.mc-showcase .cat-pill.active {
  background: var(--mc-gold-grad) !important;
  color: var(--mc-ink) !important;
  border-color: rgba(255, 236, 190, 0.55) !important;
}
body.mc-showcase .skin-card {
  background: var(--mc-surface) !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: var(--mc-radius) !important;
}
body.mc-showcase .skin-card:hover { background: var(--mc-surface-2) !important; border-color: var(--mc-brass) !important; }
body.mc-showcase .skin-card.selected {
  border-color: var(--mc-brass-hi) !important;
  background: rgba(214, 170, 92, 0.14) !important;
  box-shadow: 0 0 0 3px rgba(214, 170, 92, 0.2) !important;
}
body.mc-showcase .skin-preview-thumb { border-color: var(--mc-line-strong) !important; }
body.mc-showcase .skin-title { color: var(--mc-text) !important; }
body.mc-showcase .skin-desc { color: var(--mc-muted) !important; }
@media (max-width: 700px) {
  body.mc-showcase h1 { font-size: 28px !important; }
  body.mc-showcase .viewport-container { height: 420px !important; border-radius: var(--mc-radius) !important; }
  body.mc-showcase .mode-nav { flex-wrap: wrap; border-radius: var(--mc-radius) !important; }
  body.mc-showcase .category-pills { flex-wrap: wrap; }
}
body.mc-showcase header a[href="/"] {
  color: var(--mc-brass-hi) !important;
  border: 1px solid var(--mc-line-strong);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
}
body.mc-showcase header a[href="/"]:hover { border-color: var(--mc-brass); background: rgba(214, 170, 92, 0.1); }
@media (max-width: 700px) {
  body.mc-showcase header { flex-wrap: wrap; gap: 10px; }
  body.mc-showcase .hud-overlay { left: 10px !important; right: 10px !important; transform: none !important; border-radius: var(--mc-radius) !important; }
}

/* -----------------------------------------------------------------------------
   Legal pages: terms.html, privacy.html, sweepstakes_rules.html (body.mc-legal)
   -------------------------------------------------------------------------- */
body.mc-legal { line-height: 1.7 !important; }
body.mc-legal .container,
body.mc-legal main {
  background: var(--mc-bg-2) !important;
  border: 1px solid var(--mc-line-strong) !important;
  border-radius: var(--mc-radius-lg) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 230, 180, 0.06) !important;
  padding: 40px !important;
}
body.mc-legal main { margin: 40px auto 60px !important; }
body.mc-legal h1 {
  font-family: var(--mc-font-display) !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: var(--mc-brass-hi) !important;
  margin-top: 0 !important;
}
body.mc-legal h2 {
  font-family: var(--mc-font) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--mc-brass) !important;
  border-bottom: 1px solid var(--mc-line) !important;
}
body.mc-legal p, body.mc-legal li { color: var(--mc-text) !important; opacity: 0.88; font-size: 15px !important; }
body.mc-legal strong { color: var(--mc-text) !important; }
body.mc-legal a { color: var(--mc-brass-hi) !important; }
body.mc-legal .badge {
  background: rgba(214, 170, 92, 0.14) !important;
  color: var(--mc-brass-hi) !important;
  border: 1px solid var(--mc-line-strong) !important;
  border-radius: 999px !important;
  font-family: var(--mc-font) !important;
}
body.mc-legal .footer { border-top: 1px solid var(--mc-line) !important; color: var(--mc-dim) !important; }
body.mc-legal .muted { color: var(--mc-muted) !important; }
body.mc-legal .box { background: var(--mc-surface) !important; border: 1px solid var(--mc-line) !important; border-radius: var(--mc-radius) !important; }
@media (max-width: 700px) {
  body.mc-legal { padding: 16px 12px !important; }
  body.mc-legal .container, body.mc-legal main { padding: 24px 18px !important; }
  body.mc-legal main { margin: 0 auto 30px !important; }
  body.mc-legal h1 { font-size: 30px !important; }
}

/* -----------------------------------------------------------------------------
   Provably fair verifier page: fairness.html (body.mc-fairness)
   The page is built on CSS variables, so most of it re-themes here. Green/red
   verification results keep their colours (they carry meaning).
   -------------------------------------------------------------------------- */
body.mc-fairness {
  --bg-main: #1a110a;
  --panel-bg: #22170e;
  --card-bg: #2c1e12;
  --border-color: rgba(214, 170, 92, 0.24);
  --accent-blue: #deb366;
  --accent-gold: #f6d898;
  --text-main: #fbf1de;
  --text-muted: #cdb48d;
}
body.mc-fairness .navbar { background: rgba(26, 17, 10, 0.92) !important; border-bottom: 1px solid var(--mc-line) !important; }
body.mc-fairness .hero-header h1 {
  font-family: var(--mc-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: var(--mc-brass-hi) !important;
  background: none !important;
  -webkit-text-fill-color: var(--mc-brass-hi) !important;
}
body.mc-fairness .card { border-radius: var(--mc-radius-lg) !important; box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35) !important; }
body.mc-fairness .card-title { font-family: var(--mc-font) !important; color: var(--mc-brass-hi) !important; }
body.mc-fairness .form-input,
body.mc-fairness [style*="#090e1a"],
body.mc-fairness .formula-card code {
  background: var(--mc-bg) !important;
  border-color: var(--mc-line-strong) !important;
  color: var(--mc-text) !important;
}
body.mc-fairness .form-input:focus { border-color: var(--mc-brass) !important; box-shadow: 0 0 0 3px rgba(214, 170, 92, 0.18) !important; }
body.mc-fairness .btn-green,
body.mc-fairness .nav-btn-primary {
  background: var(--mc-gold-grad) !important;
  border: 1px solid rgba(255, 236, 190, 0.55) !important;
  color: var(--mc-ink) !important;
  font-family: var(--mc-font) !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 18px rgba(214, 170, 92, 0.28) !important;
}
body.mc-fairness .btn-secondary,
body.mc-fairness .nav-btn:not(.nav-btn-primary) {
  background: var(--mc-surface-2) !important;
  border: 1px solid var(--mc-line-strong) !important;
  color: var(--mc-text) !important;
}
body.mc-fairness .nav-badge { background: rgba(214, 170, 92, 0.14) !important; color: var(--mc-brass-hi) !important; border-color: var(--mc-line-strong) !important; }
body.mc-fairness .grid-cell { background: var(--mc-surface) !important; border-color: var(--mc-line) !important; }
body.mc-fairness .grid-cell.top-pick { border-color: var(--mc-brass) !important; background: rgba(214, 170, 92, 0.16) !important; }

/* -----------------------------------------------------------------------------
   Link-in-bio page: socials.html (body.mc-socials). Built on CSS variables.
   Platform icons keep their brand colours; LIVE badge stays red.
   -------------------------------------------------------------------------- */
body.mc-socials {
  --bg: #1a110a;
  --card-bg: rgba(44, 30, 18, 0.88);
  --card-border: rgba(214, 170, 92, 0.24);
  --accent-gold: #f6d898;
  --accent-cyan: #deb366;
  --accent-purple: #a77c38;
  --text: #fbf1de;
  --text-muted: #cdb48d;
}
body.mc-socials .brand-name {
  font-family: var(--mc-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  background: none !important;
  -webkit-text-fill-color: var(--mc-brass-hi) !important;
  color: var(--mc-brass-hi) !important;
}
body.mc-socials .avatar-glow { background: linear-gradient(135deg, #f8dea0, #b98a3c, #f6d898) !important; }
body.mc-socials .verified-badge { background: var(--mc-brass) !important; color: var(--mc-ink) !important; }
body.mc-socials .tag { background: rgba(214, 170, 92, 0.1) !important; border-color: var(--mc-line-strong) !important; color: var(--mc-text) !important; }
body.mc-socials .hero-btn {
  background: var(--mc-gold-grad) !important;
  color: var(--mc-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 26px rgba(214, 170, 92, 0.3) !important;
}
body.mc-socials .hero-btn-badge { background: var(--mc-ink) !important; color: var(--mc-brass-hi) !important; }
body.mc-socials .code-copy-btn { background: rgba(214, 170, 92, 0.14) !important; border-color: var(--mc-line-strong) !important; color: var(--mc-brass-hi) !important; }
body.mc-socials .link-item:hover, body.mc-socials .code-card:hover { border-color: var(--mc-brass) !important; }
body.mc-socials footer, body.mc-socials .footer-links a { color: var(--mc-dim) !important; }
body.mc-fairness .brand-logo { background: var(--mc-gold-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; font-family: var(--mc-font-display) !important; font-weight: 800 !important; letter-spacing: 0.6px !important; }