/* ═══════════════════════════════════════════════════════════════════
   XMR JACKPOT — getmonero.org DESIGN SYSTEM (Sep 25 visual redesign)

   Visual-only redesign. ALL text content, links, routes, and DOM
   structure are unchanged (drive-verified against the baseline
   commit). Per https://gitreverse.com/designs/getmonero-org:

     Page Gray     #EDEEF0   page background / canvas
     Surface       #FFFFFF   cards, buttons, readable blocks
     Monero Orange #D26E2B   primary buttons, brand emphasis
     Link Orange   #CE5E14   hyperlinks, secondary emphasis
     Slate Gray    #4C4C4C   body text
     Secondary blue#2F6F9F   informational accent (the system's own)
     Radius        0px       flat corners everywhere
     Type          Open Sans (headings) + Hind (body) system stack

   The tokens below keep their ORIGINAL names (--gold, --bg-deep,
   --text-dim, ...) so the page's inline styles and the other
   workstream's app.js keep resolving; only the VALUES are re-pointed
   to the design system. All original selectors are preserved.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Block palette — re-pointed: light gray surfaces, white cards */
  --bg-void:        #EDEEF0;   /* page canvas (was near-black) */
  --bg-deep:        #FFFFFF;   /* raised surface (cards, modals) */
  --bg-stone:       #F7F7F8;   /* soft inset surface */
  --bg-cobble:      #E4E6E9;   /* bordered panel */
  --bg-cobble-hi:   #DCDEE2;   /* panel edge */
  --bg-dirt:        #EFEAE4;   /* warm inset */

  /* Ore colors — Monero Orange carries the primary signal */
  --gold:           #D26E2B;   /* primary action (the old arcade gold) */
  --gold-bright:    #CE5E14;   /* link orange (the old bright gold) */
  --gold-dark:      #A8551C;   /* pressed state */
  --gold-glow:      rgba(210,110,43,0.10);

  --diamond:        #2F6F9F;   /* informational blue (the system's own) */
  --diamond-bright: #3A7Fb4;
  --diamond-dark:   #25587D;
  --diamond-glow:   rgba(47,111,159,0.10);

  --emerald:        #2E7D46;   /* success, kept quiet */
  --emerald-bright: #357F4C;
  --emerald-dark:   #245F36;

  --redstone:       #B3382E;   /* error, desaturated for print-like calm */
  --lapis:          #2F6F9F;
  --netherite:      #6B6E73;
  --obsidian:       #2B2D31;

  /* Text — slate, with real contrast on the light surfaces */
  --text:           #4C4C4C;
  --text-dim:       #5A5C60;
  --text-mute:      #6E7076;

  /* Pixel borders — retired: flat hairlines, square corners */
  --px-border:      #C9CCD1;
  --px-shadow:      0 1px 5px rgba(0,0,0,0.07), 0 7px 17px rgba(0,0,0,0.10);

  /* Layout */
  --max-w: 1200px;

  /* Design-system tokens */
  --mono-orange:    #D26E2B;
  --link-orange:    #CE5E14;
  --page-gray:      #EDEEF0;
  --surface-white:  #FFFFFF;
  --slate:          #4C4C4C;
  --hairline:       #D8DADD;
  --radius:         0px;
  --shadow-btn:     rgba(0,0,0,0.07) 0px 1px 5px 0px,
                    rgba(0,0,0,0.10) 0px 7px 17px 0px;
  --font-head: "Open Sans", "Segoe UI", -apple-system, "Helvetica Neue",
               Arial, sans-serif;
  --font-body: Hind, "Segoe UI", -apple-system, "Helvetica Neue",
               Arial, sans-serif;
}

/* ── base ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body, #app {
  margin: 0;
  background: var(--page-gray);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--slate);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.2rem; }

p, li { color: var(--slate); }

a, .linkish { color: var(--link-orange); text-decoration: none; }
a:hover { text-decoration: underline; }

::placeholder { color: var(--text-mute); opacity: 1; }

::selection { background: rgba(210,110,43,0.22); }

:focus-visible {
  outline: 2px solid var(--mono-orange);
  outline-offset: 2px;
}

hr, .hairline-rule {
  border: 0; border-top: 1px solid var(--hairline); margin: 20px 0;
}

/* the arcade pixel-font hook retires to the heading face */
.font-pixel {
  font-family: var(--font-head);
  letter-spacing: 0;
}

/* ── shell ────────────────────────────────────────────────────────── */
#app { min-height: 100vh; }

.pixel-border, .pixel-border-gold, .pixel-border-diamond {
  border: 1px solid var(--hairline);
  background: var(--surface-white);
  border-radius: var(--radius);
  box-shadow: none;
}
.pixel-border-gold { border-left: 3px solid var(--mono-orange); }
.pixel-border-diamond { border-left: 3px solid var(--diamond); }

.navbar {
  background: var(--surface-white);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 20px;
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.nav-logo {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--mono-orange);
  font-size: 1.05rem;
}
.nav-links { display: flex; gap: 16px; flex-wrap: wrap; }
.nav-links a {
  color: var(--slate); font-size: 0.92rem; padding: 4px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--link-orange);
  border-bottom-color: var(--link-orange);
  text-decoration: none;
}

.mode-badge, .mode-badge.free, .mode-badge.real {
  display: inline-block;
  font-size: 0.72rem;
  font-family: var(--font-head);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--bg-stone);
  color: var(--text-dim);
  border: 1px solid var(--hairline);
}
.mode-badge.real { background: var(--mono-orange); color: #fff; border-color: var(--mono-orange); }

.page { display: none; padding: 28px 20px 64px; }
.page.active { display: block; }
.page > * { max-width: var(--max-w); margin-left: auto; margin-right: auto; }

/* ── hero ─────────────────────────────────────────────────────────── */
.hero {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 44px 32px;
  margin-bottom: 24px;
}
.hero h1 { font-size: 2.6rem; margin-bottom: 10px; }
.hero p, .hero .sub { color: var(--text-dim); font-size: 1.06rem; }
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ── buttons: orange primary, white secondary, square ─────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease,
              color 0.12s ease, box-shadow 0.12s ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn-gold {
  background: var(--mono-orange);
  color: #FFFFFF;
  border-color: var(--mono-orange);
  box-shadow: var(--shadow-btn);
}
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn-gold:active { background: #9A4C18; }

.btn-blue, .btn-emerald {
  background: var(--surface-white);
  color: var(--mono-orange);
  border-color: var(--mono-orange);
}
.btn-blue:hover, .btn-emerald:hover { background: var(--bg-stone); }
.btn-blue:active, .btn-emerald:active { background: var(--bg-cobble); }

.btn-outline {
  background: var(--surface-white);
  color: var(--slate);
  border-color: var(--hairline);
}
.btn-outline:hover { border-color: var(--mono-orange); color: var(--mono-orange); }
.btn-outline:active { background: var(--bg-stone); }

.btn-sm { padding: 8px 12px; font-size: 0.85rem; }
.btn-lg { padding: 15px 26px; font-size: 1.02rem; }

/* ── cards & grids ────────────────────────────────────────────────── */
.card, .card-gold {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
}
.card-gold { border-left: 3px solid var(--mono-orange); }

.card-header {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--slate);
  font-size: 1.05rem;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.stat-card {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color 0.12s ease;
}
.stat-card:hover { border-color: var(--mono-orange); }
.stat-value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--slate);
  line-height: 1.2;
}
.stat-value.gold    { color: var(--mono-orange); }
.stat-value.green   { color: var(--emerald); }
.stat-value.blue    { color: var(--diamond); }
.stat-value.diamond { color: var(--diamond); }
.stat-label {
  font-size: 0.8rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mute);
  margin-top: 4px;
}

/* ── jackpot surface ──────────────────────────────────────────────── */
.jackpot-hero {
  position: relative;
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--mono-orange);
  border-radius: var(--radius);
  padding: 34px 28px;
  text-align: center;
  margin-bottom: 22px;
  overflow: hidden;
}
.jackpot-hero::before { content: none; }
.jackpot-label {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.jackpot-amount {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 3rem;
  color: var(--mono-orange);
  line-height: 1.1;
  margin: 8px 0;
}
.jackpot-usd { color: var(--text-dim); font-size: 1.05rem; }
.jackpot-detail { color: var(--text-mute); font-size: 0.9rem; margin-top: 8px; }

/* ── inputs ───────────────────────────────────────────────────────── */
.spin-box { display: flex; flex-direction: column; gap: 10px; }
.spin-input,
input[type="text"], input[type="password"], input[type="number"],
input[type="email"], select, textarea {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 11px 12px;
  width: 100%;
  transition: border-color 0.12s ease;
}
.spin-input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--mono-orange);
}

/* ── slot machine & win badges — flattened, still legible ─────────── */
.slot-machine { display: flex; gap: 10px; justify-content: center; }
.slot-reel {
  background: var(--bg-stone);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--slate);
  font-family: var(--font-head);
  font-weight: 700;
  min-width: 84px;
  padding: 18px 10px;
  text-align: center;
}
.slot-reel.spinning { color: var(--text-mute); }

.win-badge {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--bg-stone);
  color: var(--text-dim);
  border: 1px solid var(--hairline);
}
.win-badge.won    { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.win-badge.active { background: var(--mono-orange); color: #fff; border-color: var(--mono-orange); }
.win-badge.pending{ background: var(--diamond); color: #fff; border-color: var(--diamond); }

/* ── tutorial / steps ─────────────────────────────────────────────── */
.tutorial-step { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
.tutorial-step + .tutorial-step { border-top: 1px solid var(--hairline); }
.tutorial-step-num {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mono-orange);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  border-radius: var(--radius);
}

/* ── balance bar ──────────────────────────────────────────────────── */
.balance-bar, .balance-bar.free, .balance-bar.real {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.balance-bar.real { border-left: 3px solid var(--mono-orange); }
.balance-icon { font-size: 1.1rem; }
.balance-amount {
  font-family: var(--font-head); font-weight: 700; color: var(--slate);
}

/* ── banners & toasts ─────────────────────────────────────────────── */
.winner-banner, .toast {
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--surface-white);
  color: var(--slate);
  padding: 12px 16px;
}
.winner-banner { border-left: 3px solid var(--mono-orange); margin-bottom: 16px; }
.toast { box-shadow: var(--shadow-btn); }
.toast.success { border-left: 3px solid var(--emerald); }
.toast.error   { border-left: 3px solid var(--redstone); }

.loading {
  color: var(--text-mute);
  font-family: var(--font-head);
  font-size: 0.9rem;
}

.connect-box {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
}

/* ── confetti / coin rain / 3d coin — retired decoration ──────────── */
.confetti-container, .confetti-piece, .coin-rain, .coin3d,
.coin3d-spin, .coin3d-face, .coin3d-front { display: none !important; }

/* ── countdown ────────────────────────────────────────────────────── */
.countdown-timer {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.countdown-timer.is-zero { color: var(--redstone); }

/* ── economy flow ─────────────────────────────────────────────────── */
.econ-flow { display: flex; flex-direction: column; gap: 0; }
.econ-step {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.12s ease;
}
.econ-step:hover { border-color: var(--mono-orange); }
.econ-step-winner { border-left: 3px solid var(--mono-orange); }
.econ-step-house  { border-left: 3px solid var(--netherite); }
.econ-step-kraken { border-left: 3px solid var(--diamond); }
.econ-icon { font-size: 1.2rem; margin-right: 8px; }
.econ-title { font-family: var(--font-head); font-weight: 700; color: var(--slate); }
.econ-desc  { color: var(--text-dim); font-size: 0.92rem; margin-top: 2px; }
.econ-arrow, .econ-split-arrow {
  color: var(--text-mute); text-align: center; padding: 6px 0;
}
.econ-split {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 12px; align-items: center;
}
/* the ↓ connector spans the full width ABOVE the split row
   (Sep 26: the cards used to sit in an extra .econ-flow wrapper,
   which the grid flung into the right cell — off in the margin) */
.econ-split-arrow { grid-column: 1 / -1; }

/* ── game levels / xp / badges ────────────────────────────────────── */
.game-level-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 8px;
}
.game-level-badge {
  font-family: var(--font-head); font-weight: 700;
  color: var(--mono-orange);
}
.game-level-emoji { font-size: 1.2rem; }
.game-level-num   { color: var(--text-mute); font-size: 0.85rem; }
.game-xp-wrap {
  background: var(--bg-stone);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  height: 14px; overflow: hidden; flex: 1;
}
.game-xp-bar { height: 100%; }
.game-xp-fill {
  height: 100%;
  background: var(--mono-orange);
  transition: width 0.3s ease;
}
.game-xp-fill::after { content: none; }
.game-xp-text { font-size: 0.8rem; color: var(--text-mute); }

.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.badge-tile {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px; text-align: center;
}
.badge-tile:hover { border-color: var(--mono-orange); }
.badge-tile.earned  { border-left: 3px solid var(--emerald); }
.badge-tile.unearned{ opacity: 0.6; }
.badge-emoji  { font-size: 1.4rem; }
.badge-name   { font-family: var(--font-head); font-size: 0.85rem; color: var(--slate); margin-top: 4px; }
.badge-status { font-size: 0.72rem; color: var(--text-mute); }

/* ── security / faq / code ────────────────────────────────────────── */
.security-item {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.security-item:last-child { margin-bottom: 0; }
.security-item-title {
  font-family: var(--font-head); font-weight: 700; color: var(--slate);
}
.code-block {
  background: var(--bg-stone);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--slate);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.88rem;
  padding: 12px 14px;
  overflow-x: auto;
}

.faq-item {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.faq-item:last-child { margin-bottom: 0; }

/* ── winners / leaderboard ────────────────────────────────────────── */
.winner-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 8px;
  transition: border-color 0.12s ease;
}
.winner-row:hover, .winner-row:last-child:hover { border-color: var(--mono-orange); }
.winner-row:last-child { margin-bottom: 0; }
.winner-wallet {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.85rem; color: var(--slate);
}
.winner-prize { font-family: var(--font-head); font-weight: 700; color: var(--mono-orange); }
.winner-time  { font-size: 0.8rem; color: var(--text-mute); }

/* ── modals ───────────────────────────────────────────────────────── */
.modal, [id$="Modal"] {
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
[style*="background:rgba(0,0,0,0.92)"] { background: rgba(43,45,49,0.55) !important; }

#walletConnectModal { animation: fadeIn 0.2s ease; }
#walletConnectModal > div { animation: modalPop 0.2s ease; }

/* ── miner wizard: the inline-grid two-column step ────────────────── */
#minerWizard > div[style*="grid-template-columns:1fr 1fr"] {
  grid-template-columns: 1fr 1fr;
}

/* ── signup inputs full-width on their page ───────────────────────── */
#page-signup .spin-input { width: 100%; }

/* ── winner claim banner ──────────────────────────────────────────── */
#winnerClaimBanner .winner-banner {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  text-align: center;
}
#winnerClaimBanner .winner-banner-title {
  font-family: var(--font-head);
  font-size: 1.15em;
  font-weight: 700;
  color: var(--mono-orange);
  line-height: 1.4;
}
#winnerClaimBanner .winner-banner-deadline {
  font-size: 0.9em;
  color: var(--diamond);
  font-weight: 700;
}
#winnerClaimBanner .winner-claim-row .spin-input {
  flex: 1;
  min-width: 240px;
}
#winnerClaimBanner .winner-confirmed {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--emerald);
  padding: 20px 30px;
  margin: 20px 0;
}
#winnerClaimBanner .winner-confirmed-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--emerald);
}
#winnerClaimBanner .winner-confirmed-tx {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.badge-tile.earned .badge-name { font-weight: 700; }
.code-block code {
  font-family: inherit;
  color: inherit;
}
/* the retired coin decoration: its face descendants stay hidden */
.coin3d-back, .coin3d-back::after, .coin3d-front::after { display: none; }
.coin3d-mid { display: none; }
.coin3d.sm, .coin3d.md, .coin3d.lg, .coin3d.xl { display: none; }

/* countdown: tabular, calm, no blink bait */
.countdown-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.countdown-label {
  font-family: var(--font-head);
  font-size: 0.8em;
  letter-spacing: 0.05em;
  color: var(--text-mute);
}
.cursor-blink { animation: blink 0.5s step-end infinite; }

/* ── carried forward: every remaining selector, re-themed ─────────── */
/* .econ-split .econ-flow: the wrapper div is gone from the markup
   (Sep 26 — its nesting was flinging the cards into the right grid
   cell); the rule is retained so the selector-preservation contract
   (test_redesign_push 2.6) stays absolute. */
.econ-split .econ-flow { display: flex; flex-direction: column; gap: 8px; }
.econ-split .econ-step { margin-bottom: 0; }
.econ-step-house .econ-title { color: var(--netherite); }
.econ-step-kraken .econ-title { color: var(--diamond); }
.econ-step-winner .econ-title { color: var(--mono-orange); }
.game-xp-text b { font-family: var(--font-head); color: var(--slate); }
.jackpot-detail span { color: var(--text-mute); }
.jackpot-flash {
  position: fixed; inset: 0; pointer-events: none;
  background: transparent; z-index: 9990;
}
.jackpot-text {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--mono-orange);
}
.jackpot-vignette { display: none; }
.mine-scene {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
}
.mine-status {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-dim); font-size: 0.9rem;
}
.mine-status.active { color: var(--emerald); }
.mine-status:not(.active) { color: var(--text-mute); }
.miner-bubble {
  position: relative;
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--slate);
  font-size: 0.82rem;
  padding: 8px 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.miner-bubble.show { opacity: 1; }
.miner-bubble::before, .miner-bubble::after {
  content: ""; position: absolute; left: -8px; top: 50%;
  border: 4px solid transparent;
  border-right-color: var(--hairline);
  transform: translateY(-50%);
}
.miner-bubble::after { left: -6px; border-right-color: var(--surface-white); }
.miner-compare {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: center;
}
.miner-compare-label {
  font-family: var(--font-head);
  font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-mute);
}
.miner-compare-result {
  font-family: var(--font-head); font-weight: 700; color: var(--slate);
}
.miner-compare-side { text-align: center; }
.miner-compare-side.pool .miner-compare-label,
.miner-compare-side.pool .miner-compare-result { color: var(--mono-orange); }
.miner-compare-side.solo .miner-compare-label,
.miner-compare-side.solo .miner-compare-result { color: var(--text-dim); }
.miner-compare-sprites { display: flex; gap: 8px; justify-content: center; }
.miner-compare-sprites img { width: 40px; height: auto; }
.miner-compare-sprites img.tiny,
.miner-compare-sprites img.tiny2 { width: 24px; }
.miner-compare-vs {
  font-family: var(--font-head); font-weight: 700; color: var(--text-mute);
}
.miner-display {
  display: flex; justify-content: center; padding: 10px 0;
}
.miner-display .miner-sprite-big { width: 120px; height: auto; }
.miner-sprite-big { width: 120px; height: auto; }
.miner-display.speed-2 .miner-sprite-big,
.miner-display.speed-3 .miner-sprite-big,
.miner-display.speed-4 .miner-sprite-big,
.miner-display.speed-5 .miner-sprite-big,
.miner-display.working .miner-sprite-big { transform: none; }
.miner-sprite-2 { width: 60px; height: auto; }
.nav-links button {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.92rem;
  color: var(--slate); padding: 4px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links button:hover, .nav-links button.active,
.nav-links a:active, .nav-links button:active {
  color: var(--link-orange);
  border-bottom-color: var(--link-orange);
}
.screen-shake { animation: screenShake 0.01ms; }
.security-item p { color: var(--text-dim); font-size: 0.9rem; }
.spin-input::placeholder { color: var(--text-mute); }
.tutorial-step h3 {
  font-family: var(--font-head); font-size: 1.02rem; color: var(--slate);
}
.tutorial-step p { color: var(--text-dim); font-size: 0.92rem; }

/* ── the miner sprite keeps its transparency; no arcade glow ──────── */
.miner-sprite, img[src*="miner_"] { image-rendering: auto; filter: none; }

/* ── misc utility ─────────────────────────────────────────────────── */
.tiny, .tiny2 { font-size: 0.78rem; color: var(--text-mute); }
.dim { color: var(--text-mute); }
.g  { color: var(--emerald); }
.off{ color: var(--text-mute); }

/* ── motion: reduced, informative only ────────────────────────────── */
@keyframes oreShimmer { from { opacity: 1; } to { opacity: 1; } }
@keyframes jackpotPulse { from { transform: none; } to { transform: none; } }
@keyframes slotSpin { to { transform: none; } }
@keyframes jackpotWin { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(16px); opacity: 0; }
                          to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes confettiFall { to { transform: none; opacity: 0; } }
@keyframes coinFall { to { transform: none; opacity: 0; } }
@keyframes coinSpin { to { transform: none; } }
@keyframes jackpotFlash { from { opacity: 1; } to { opacity: 1; } }
@keyframes screenShake { from { transform: none; } to { transform: none; } }
@keyframes jackpotTextPop { from { transform: none; } to { transform: none; } }
@keyframes vignetteFade { from { opacity: 0; } to { opacity: 0; } }
@keyframes blink { 50% { opacity: 0.55; } }
@keyframes minerIdle { from { transform: none; } to { transform: none; } }
@keyframes minerWork { from { transform: none; } to { transform: none; } }
@keyframes statusPulse { 50% { opacity: 0.6; } }
@keyframes countdownPulse { 50% { opacity: 0.75; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(6px); }
                      to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .badge-grid { grid-template-columns: repeat(2, 1fr); }
  h1, .hero h1 { font-size: 2rem; }
  .jackpot-amount { font-size: 2.3rem; }
  .page { padding: 20px 14px 56px; }
  .hero { padding: 30px 20px; }
  /* the absolute trust seal overlaps the headline at narrow widths:
     it becomes a normal block above the copy (visual-only). The seal
     is inline-styled, so only !important can reposition it. */
  .hero div[style*="position:absolute"] {
    position: static !important;
    transform: none !important;
    margin: 0 auto 14px !important;
    width: 150px !important;
    height: 150px !important;
  }
}
@media (max-width: 500px) {
  .grid-4 { grid-template-columns: 1fr; }
  .badge-grid { grid-template-columns: 1fr; }
  .econ-split { grid-template-columns: 1fr; }
  .econ-split .econ-arrow { transform: rotate(90deg); }
  h1 { font-size: 1.7rem; }
  .jackpot-amount { font-size: 1.9rem; }
  .slot-reel { min-width: 64px; padding: 14px 8px; }
  .nav-links { gap: 10px; }
}
@media (max-width: 600px) {
  .balance-bar { flex-wrap: wrap; }
  .winner-row { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE MASTER-KEY WORKFLOW LAYER (Sep 25 redesign, phase 2)
   Additive only: every class below is NEW (wf-* namespace), styled per
   the getmonero-org design system — Page Gray canvas, white surfaces,
   Monero Orange primaries, white secondaries with orange borders, slate
   text, radius 0, hairline borders, informative motion only (with the
   global prefers-reduced-motion kill-switch above still governing).
   NO existing selector, token, or rule is modified or overridden.
   ═══════════════════════════════════════════════════════════════════ */

/* ── the hero workflow layer (rides INSIDE the existing hero) ─────── */
.wf-hero-block { position: relative; }

.wf-trust-seal {
  position: absolute;
  left: 0;
  top: -28px;
  width: 128px;
  height: 128px;
  background: var(--surface-white);
  border: 2px solid var(--mono-orange);
  box-shadow: var(--shadow-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  padding: 10px;
}

.wf-trust-seal .wf-seal-icon { font-size: 1.4em; line-height: 1; }

.wf-trust-seal .wf-seal-top {
  font-size: 0.6em;
  font-weight: 800;
  color: var(--mono-orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wf-trust-seal .wf-seal-sub {
  font-size: 0.5em;
  color: var(--text-mute);
  font-weight: 600;
  margin-top: 3px;
}

.wf-badge-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px auto 0;
  max-width: 640px;
}

.wf-badge {
  font-size: 0.68em;
  font-weight: 600;
  padding: 3px 9px;
  border: 1px solid var(--hairline);
  background: var(--surface-white);
  color: var(--text-dim);
}

.wf-badge b { color: var(--mono-orange); }

.wf-miner-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 22px auto 0;
  padding: 16px 20px;
  background: var(--bg-deep);
  border: 2px solid var(--gold-dark);
  max-width: 560px;
}

.wf-miner-cta img {
  width: 64px;
  height: auto;
  display: block;
}

/* ── the five workflow sections ───────────────────────────────────── */
.wf-section {
  margin: 0 auto 26px;
  max-width: 980px;
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-btn);
  padding: 26px 28px;
}

.wf-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.wf-kicker {
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mono-orange);
  font-weight: 800;
  white-space: nowrap;
}

.wf-section h2 {
  margin: 0;
  font-size: 1.35em;
  color: var(--text);
  border: 0;
  padding: 0;
}

.wf-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  align-items: start;
}

.wf-cols p {
  color: var(--text-dim);
  line-height: 1.75;
  margin: 0 0 12px;
  font-size: 0.95em;
}

.wf-cols p b { color: var(--text); }

.wf-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.wf-list li {
  color: var(--text-dim);
  font-size: 0.9em;
  line-height: 1.7;
  padding: 7px 0 7px 22px;
  position: relative;
  border-bottom: 1px solid var(--hairline);
}

.wf-list li:last-child { border-bottom: 0; }

.wf-list li::before {
  content: "▸";
  position: absolute;
  left: 2px;
  color: var(--mono-orange);
  font-weight: 700;
}

.wf-list li b { color: var(--text); }

.wf-visual {
  background: var(--bg-deep);
  border: 1px solid var(--hairline);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.wf-visual img { width: 150px; height: auto; }

.wf-scale {
  font-family: var(--font-head);
  font-size: 0.66rem;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wf-scale b { color: var(--mono-orange); }

.wf-scale-bar {
  width: 100%;
  height: 10px;
  background: var(--hairline);
  position: relative;
}

.wf-scale-bar span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20%;
  background: var(--mono-orange);
}

.wf-signal-demo {
  font-family: var(--font-mono, monospace);
  font-size: 0.8em;
  width: 100%;
  text-align: left;
}

.wf-signal-demo .wf-sig {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  background: var(--surface-white);
  margin-bottom: 8px;
}

.wf-signal-demo .wf-sig b { color: var(--mono-orange); }

.wf-signal-demo .wf-sig time {
  color: var(--text-mute);
  font-size: 0.9em;
}

.wf-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

.wf-tier {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  padding: 14px 10px;
  text-align: center;
}

.wf-tier .wf-tier-price {
  font-size: 1.25em;
  font-weight: 800;
  color: var(--mono-orange);
}

.wf-tier .wf-tier-amt {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}

.wf-tier .wf-tier-note {
  font-size: 0.66em;
  color: var(--text-mute);
  margin-top: 6px;
}

.wf-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.8em;
  color: var(--text-dim);
  width: 100%;
}

.wf-loop .wf-node {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  padding: 8px 12px;
  white-space: nowrap;
}

.wf-loop .wf-node b { color: var(--mono-orange); }

.wf-loop .wf-arrow { color: var(--mono-orange); font-weight: 700; }

.wf-meter {
  width: 100%;
}

.wf-meter .wf-meter-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.72em;
  color: var(--text-mute);
  margin-bottom: 4px;
}

.wf-meter .wf-meter-top b { color: var(--text); }

.wf-meter-bar {
  height: 12px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}

.wf-meter-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--mono-orange);
}

/* ── the mandated phrases strip ───────────────────────────────────── */
.wf-phrases {
  margin: 0 auto 26px;
  max-width: 980px;
  padding: 12px 20px;
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  font-size: 0.78em;
  color: var(--text-mute);
  text-align: center;
  line-height: 1.8;
}

.wf-phrases a { color: var(--mono-orange); font-weight: 700; }

/* ── dashboard: the workflow status row + two new panels ──────────── */
.wf-status-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.wf-status {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-btn);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wf-status .wf-dot {
  width: 10px;
  height: 10px;
  background: var(--text-mute);
  flex: 0 0 auto;
}

.wf-status .wf-dot.on { background: var(--mono-orange); }

.wf-status .wf-status-label {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-family: var(--font-head);
}

.wf-status .wf-status-value {
  font-weight: 700;
  color: var(--text);
  font-size: 0.9em;
}

.wf-panel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.wf-panel {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-btn);
  padding: 18px 20px;
}

.wf-panel h3 {
  margin: 0 0 4px;
  font-size: 1.05em;
  color: var(--text);
}

.wf-panel .wf-panel-sub {
  font-size: 0.75em;
  color: var(--text-mute);
  margin-bottom: 12px;
}

.wf-panel .wf-feed {
  font-size: 0.8em;
  color: var(--text-dim);
  border: 1px solid var(--hairline);
  background: var(--bg-deep);
  padding: 10px 12px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.wf-panel .wf-feed .wf-feed-empty {
  color: var(--text-mute);
}

.wf-panel .wf-feed .wf-feed-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--hairline);
}

.wf-panel .wf-feed .wf-feed-row:last-child { border-bottom: 0; }

.wf-panel .wf-feed b { color: var(--mono-orange); }

.wf-panel .wf-feed time { color: var(--text-mute); font-size: 0.9em; }

.wf-panel .wf-kv {
  display: flex;
  justify-content: space-between;
  font-size: 0.85em;
  color: var(--text-dim);
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
}

.wf-panel .wf-kv:last-of-type { border-bottom: 0; }

.wf-panel .wf-kv b { color: var(--text); }

/* ── responsive: single column, seal restacks ─────────────── */
@media (max-width: 860px) {
  .wf-cols { grid-template-columns: 1fr; }
  .wf-status-row { grid-template-columns: repeat(2, 1fr); }
  .wf-panel-row { grid-template-columns: 1fr; }
  .wf-tiers { grid-template-columns: 1fr; }
  .wf-trust-seal {
    position: static;
    margin: 0 auto 12px;
    transform: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   THE PANEL-GRID LAYER (Sep 25 redesign phase 3 — the Hostinger comps'
   design language, absorbed into the real files as style only)
   Comp takeaways, applied through the wf-* namespace ONLY:
     · status chips in a compact header strip (dot + label + value)
     · uniform white panel cards in a responsive grid, hairline borders
     · one consistent button row per panel (orange primary / white
       secondary), full-width on narrow screens
     · roomier panel padding and a slightly denser type scale inside
       panels, per the comps' visual hierarchy
   NO existing selector, token, string, or hook is modified.
   ═══════════════════════════════════════════════════════════════════ */

/* the dashboard shell becomes the comp's grid: the existing content
   blocks are targeted by their OWN containers, restyled in place */
#dashMain > .grid-2,
#dashMain > .card {
  border-radius: 0;
}

/* ── the status strip: chips like the comp's header row ───────────── */
.wf-status-row {
  gap: 10px;
  margin-bottom: 18px;
}

.wf-status {
  padding: 14px 16px;
  border-left: 3px solid var(--hairline);
  transition: border-color 160ms ease;
}

.wf-status:has(.wf-dot.on) {
  border-left-color: var(--mono-orange);
}

.wf-status .wf-status-label {
  letter-spacing: 0.14em;
}

/* ── the comp's uniform panel look for our workflow panels ────────── */
.wf-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 8px;
}

.wf-panel .wf-feed {
  flex: 1 1 auto;
}

.wf-panel .btn {
  width: 100%;
  text-align: center;
}

/* the challenge panel's key-value rows tighten to the comp's rhythm */
.wf-panel .wf-kv {
  padding: 8px 0;
}

/* ── the homepage workflow sections adopt the comp's panel rhythm ── */
.wf-section {
  padding: 0;
  overflow: hidden;
}

.wf-section .wf-section-head {
  margin: 0;
  padding: 18px 28px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-white);
}

.wf-section .wf-cols {
  padding: 20px 28px 24px;
}

/* the CTA rows sit flush like the comp's cta-row */
.wf-section .wf-cols > div > div:last-child {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .wf-status {
    border-left-width: 3px;
  }
  .wf-panel .btn {
    width: 100%;
  }
}


/* ── footer alignment (Oct 24) ────────────────────────────────────── */
/* Every section above is centred by its own hero/card rules; the footer
   was the only block left on the browser default, so it read as a
   different column. One rule, no layout change beyond the alignment. */
footer {
  text-align: center;
}

/* ── the referral block's reveal buttons (Oct 24) ─────────────────── */
/* The invite link and code are hidden behind <details><summary> so the
   values are not printed as page text; the summary wears .btn, so strip
   the disclosure marker and keep it looking (and feeling) like a button.
   No script needed — it still opens with JS off. */
summary.ref-reveal {
  list-style: none;
  cursor: pointer;
}

summary.ref-reveal::-webkit-details-marker {
  display: none;
}

details[open] > summary.ref-reveal {
  border-color: var(--gold);
  color: var(--gold);
}