/* =========================================================
   $RULLETE — base styles
   ========================================================= */

:root {
  --bg-deep:        #04130a;
  --bg-elev:        #0b2114;
  --bg-section:     #061a10;
  --bg-section-2:   #08231a;
  --felt-1:         #13743b;
  --felt-2:         #0a4a28;
  --felt-3:         #052213;

  --text:           #f1efe6;
  --text-dim:       #cfcdc1;
  --text-mute:      rgba(241, 239, 230, .58);
  --text-faint:     rgba(241, 239, 230, .38);

  --gold:           #ffe17b;
  --gold-soft:      #f5d77a;
  --gold-deep:      #c88720;
  --gold-glow:      rgba(255, 225, 123, .35);

  --red:            #c50b1e;
  --green:          #0c9c47;
  --green-bright:   #1ed760;

  /* ---- Pocket palette ----------------------------------------
     These three vars are the SINGLE source of truth for every
     pocket-coloured surface in the UI (SVG wheel, keypad, num-
     pills in the slot tiles / last-result card / hall of fame).
     They are set to the same hex values exported by
     public/wheel-constants.js and are re-applied at runtime by
     applyPocketCssVars() so JS owns the canonical palette. */
  --pocket-red:     #c50b1e;
  --pocket-black:   #0b0b0b;
  --pocket-green:   #0c9c47;

  --panel:          rgba(7, 18, 12, .58);
  --panel-strong:   rgba(7, 18, 12, .85);
  --panel-border:   rgba(255, 225, 123, .16);
  --panel-shadow:   0 22px 60px rgba(0, 0, 0, .45);
  --panel-glow:     inset 0 0 60px rgba(255, 225, 123, .04);

  --radius:         18px;
  --radius-sm:      12px;
  --radius-lg:      24px;

  --nav-h:          68px;
  --container:      1280px;

  /* ---- Side-panel typography tokens -----------------------------------
     Used by BOTH the left timer/pot panel and the right queue panel so
     their headings, meta pills and body text always look like a matched
     pair. Big display numerics (the SOL amount and the mm:ss clock)
     keep their own larger sizes; everything else flows through these. */
  --panel-title-size:     13px;
  --panel-title-weight:   800;
  --panel-title-tracking: 0.18em;
  --panel-meta-size:      12px;
  --panel-meta-weight:    700;
  --panel-body-text-size: 14px;
  --panel-body-mono-size: 13px;
  --side-panel-min-height: 560px;
  --mono-stack: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html {
  /* Make HTML the scroll container so scrollbar-gutter has an element
     to apply to. Without overflow-y:scroll on html, body would hijack the
     scroll role and the scrollbar would land on the right edge of body
     only, shifting the centred container ~17px to the left. */
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
}
html, body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', Roboto, system-ui, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Body must NOT compete with html for the scroll container; if it did,
   the scrollbar would land asymmetrically and break the gutter rule. */
body { overflow: visible; }

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -10%, var(--felt-1) 0%, var(--felt-2) 38%, var(--felt-3) 70%, var(--bg-deep) 100%);
  background-attachment: fixed;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}
a:hover { color: var(--gold-soft); }

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; }
::selection { background: var(--gold); color: #1b1300; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================================================
   Layout primitives
   ========================================================= */

.container {
  max-width: var(--container);
  /* Symmetric inline padding + auto margin keeps the container dead-centre
     in the visible viewport (paired with scrollbar-gutter: stable). */
  margin-inline: auto;
  padding-inline: 28px;
  padding-block: 0;
}
.container.narrow { max-width: 880px; }

section { position: relative; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}
h1 { font-size: clamp(34px, 5.4vw, 64px); line-height: 1.05; }
h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; }
h3 { font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }

p { margin: 0 0 12px; color: var(--text-dim); }

.lede {
  font-size: 17px;
  color: var(--text-mute);
  max-width: 60ch;
  margin-bottom: 28px;
}

.kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(255, 225, 123, .08);
  border: 1px solid var(--panel-border);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  color: #1b1300;
  background: linear-gradient(135deg, #ffe582, #d39400);
  box-shadow: 0 10px 22px rgba(255, 195, 40, .25);
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(255, 195, 40, .32); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn.ghost {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: none;
}
.btn.ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.btn.danger {
  background: linear-gradient(135deg, #ff8585, #b81f1f);
  color: #fff;
}

.btn.small {
  padding: 9px 16px;
  font-size: 13px;
}

.btn.block { width: 100%; }

.btn.cta-register {
  font-size: 14px;
  padding: 11px 16px;
}

/* =========================================================
   Top nav
   ========================================================= */

.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(4, 19, 10, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 225, 123, .1);
}
.topnav .container {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
}
@media (max-width: 1200px) {
  .topnav .container { gap: 12px; }
  .navlinks { gap: 16px; }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--text);
  text-shadow: 0 4px 14px rgba(0, 0, 0, .55);
}
.brand:hover { color: var(--text); }
.brand .dollar { color: var(--gold); }

.navlinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
  flex: 1;
  justify-content: center;
}
.navlinks a {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 6px 0;
  position: relative;
}
.navlinks a:hover { color: var(--text); }
.navlinks a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.navlinks a:hover::after { transform: scaleX(1); }

.auth-widget {
  display: flex;
  align-items: center;
  gap: 10px;
}
.who {
  font-size: 13px;
  color: var(--text-mute);
}
.who strong { color: var(--gold); font-weight: 700; }

/* ---- Social icon (inline SVG, used in navbar + footer) ---- */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text-dim);
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.social-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.social-icon:hover {
  color: var(--gold);
  background: rgba(255, 225, 123, .08);
  border-color: rgba(255, 225, 123, .35);
  transform: translateY(-1px);
}

/* ---- Contract-address chip (navbar, compact) ---- */
.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  max-width: 240px;
  white-space: nowrap;
}
.ca-chip:hover {
  background: rgba(255, 225, 123, .08);
  border-color: rgba(255, 225, 123, .35);
}
.ca-chip .ca-key {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 800;
}
.ca-chip .ca-mono {
  font-family: var(--mono-stack);
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.ca-chip .ca-copy-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .05em;
}
.ca-chip.copied .ca-copy-label { color: #b6f0c8; }

@media (max-width: 1100px) {
  .ca-chip .ca-mono { max-width: 96px; font-size: 11px; }
}
@media (max-width: 900px) {
  .navlinks { display: none; }
  .ca-chip { display: none; }
  .social-icon { width: 32px; height: 32px; }
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  padding: 56px 0 60px;
}
.hero-head {
  text-align: center;
  margin-bottom: 36px;
}
.hero-head h1 {
  font-size: clamp(34px, 5vw, 56px);
  margin-bottom: 10px;
}
.hero-head p {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-mute);
  max-width: 56ch;
  margin: 0 auto;
}

/* 3-column row: timer/pot panel | wheel (truly centered) | queue panel.
   Side columns are tighter (~300px) so the wheel gets more breathing room
   without pushing the container wider than --container. */
.hero-row {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr) 296px;
  column-gap: 28px;
  row-gap: 28px;
  align-items: stretch;
  /* Belt-and-braces: with three explicit tracks and `1fr` in the middle,
     `justify-content: center` is a no-op, but stating it makes the intent
     explicit and survives future template-column edits. */
  justify-content: center;
}
/* Both side panels fill their 296px tracks; these `justify-self` rules
   make the wheel-facing edge of each panel sit exactly column-gap (28px)
   away from the wheel's column, regardless of any internal width quirks. */
.hero-row > .hero-side:first-child  { justify-self: stretch; }
.hero-row > .hero-side:last-child   { justify-self: stretch; }
.hero-center {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: var(--side-panel-min-height);
}
.hero-side {
  min-width: 0;
  min-height: var(--side-panel-min-height);
}

@media (max-width: 1280px) {
  .hero-row { grid-template-columns: 288px minmax(0, 1fr) 288px; gap: 24px; }
}
@media (max-width: 1100px) {
  .hero-row { grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 20px; }
}
@media (max-width: 1024px) {
  .hero-row {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hero-side { min-height: 0; }
  .hero-center { min-height: 0; }
  /* On mobile: timer/pot → wheel → queue (source order is already correct). */
}

/* ==========================================================
   Shared side-panel system (timer-panel + queue-panel)
   ----------------------------------------------------------
   Both side panels MUST look like a matched pair. All the
   shared structure / typography lives here under .side-panel
   and the .panel-header / .panel-title / .panel-meta utilities;
   each panel only specialises its body content.
   ========================================================== */
/* Compound `.side-panel.card` selector (specificity 0,2,0) beats the
   later `.card` rule so we can override its asymmetric 18/18/16 padding
   and small radius without `!important`. */
.side-panel,
.side-panel.card {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  min-height: var(--side-panel-min-height);
  padding: 22px;
  border-radius: var(--radius-lg);
  gap: 14px;
  /* Stack the panels above the wheel so its drop-shadow / 3D rim shadow
     can never paint over the panel body when logged in. */
  position: relative;
  z-index: 2;
  /* Belt-and-braces: clip any internal child that tries to overflow the
     rounded card box (long Solana wallets, wide pills, etc). */
  overflow: hidden;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  min-height: 28px;
  min-width: 0;
}
.panel-title {
  margin: 0;
  font-family: inherit;
  font-size: var(--panel-title-size);
  font-weight: var(--panel-title-weight);
  letter-spacing: var(--panel-title-tracking);
  text-transform: uppercase;
  color: var(--gold);
  /* Title can shrink, but never wrap — the meta pill on the right gets
     priority width via flex-shrink: 0 below. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-meta {
  display: inline-flex;
  align-items: center;
  font-size: var(--panel-meta-size);
  font-weight: var(--panel-meta-weight);
  font-variant-numeric: tabular-nums;
  color: var(--text-mute);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.panel-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  font-size: var(--panel-body-text-size);
}
.panel-footer {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: var(--panel-body-text-size);
  color: var(--text-dim);
}

/* ---- Timer / Prize Pool panel body ----------------------- */
.timer-panel .panel-body {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}
.timer-panel .pot-amount.large {
  font-family: var(--mono-stack);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.timer-panel .pot-amount.large .unit {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}

.phase-pill {
  /* Variant of .panel-meta — same size, gold fill instead of muted. */
  color: #052213;
  background: var(--gold);
  border-color: transparent;
}
.phase-pill.spinning { background: #ffb347; color: #2b1300; }
.phase-pill.settling { background: rgba(255, 255, 255, .82); color: #1a1a1a; }

.big-clock {
  font-family: var(--mono-stack);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--gold);
  text-shadow:
    0 0 18px rgba(255, 225, 123, .55),
    0 0 36px rgba(255, 225, 123, .25),
    0 4px 0 rgba(0, 0, 0, .4);
  text-align: center;
  padding: 0;
}
.big-clock.pulse {
  animation: clockPulse 1s ease-in-out infinite;
  color: #ff7e7e;
  text-shadow:
    0 0 22px rgba(255, 100, 100, .65),
    0 0 44px rgba(255, 100, 100, .35),
    0 4px 0 rgba(0, 0, 0, .4);
}
@keyframes clockPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.04); opacity: .85; }
}
.clock-label {
  text-align: center;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 700;
}

/* ---- Last 10 drawn numbers strip ---------------------------- */
.last-draws {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.last-draws-label {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 700;
}
.last-draws-list {
  display: grid;
  grid-template-columns: repeat(5, 26px);
  grid-auto-rows: 26px;
  gap: 6px;
  justify-content: center;
  min-height: 58px;
}
.last-draws-list .num-pill {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-family: var(--mono-stack);
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.last-draws-list .num-pill.red   { background: var(--pocket-red); }
.last-draws-list .num-pill.black { background: var(--pocket-black); border: 1px solid rgba(255,255,255,.16); }
.last-draws-list .num-pill.green { background: var(--pocket-green); }
.last-draws-list .num-pill.fresh {
  box-shadow: 0 0 0 2px rgba(255, 215, 0, .55), 0 2px 6px rgba(0,0,0,.45);
  animation: freshPulse 1.6s ease-out 1;
}
@keyframes freshPulse {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.last-draws-empty {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
}
.dev-force-btn {
  margin-top: 10px;
  align-self: center;
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .85;
}
.dev-force-btn:hover { opacity: 1; }

.phase-detail {
  display: flex;
  justify-content: space-between;
}
.phase-detail strong { color: var(--text); font-weight: 700; }

/* ---- Queue panel body ------------------------------------- */
.queue-body { padding: 0; }
.queue-list {
  list-style: none;
  margin: 0;
  padding: 2px 4px 2px 0;
  /* Show roughly the first ~10 rows; the rest scrolls within the panel
     body. The panel itself stays at --side-panel-min-height so it never
     looks shorter than the timer panel on the left. */
  max-height: calc(10 * 44px + 8px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 225, 123, .35) transparent;
  flex: 1 1 auto;
  min-height: 0;
  font-size: var(--panel-body-text-size);
}
.queue-list::-webkit-scrollbar { width: 8px; }
.queue-list::-webkit-scrollbar-thumb {
  background: rgba(255, 225, 123, .25);
  border-radius: 999px;
}
.queue-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 225, 123, .45); }
.queue-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: 13px;
  min-height: 44px;
  min-width: 0;
}
.queue-list li:last-child { border-bottom: 0; }
.queue-list li.me {
  background: rgba(255, 225, 123, .12);
  border-bottom-color: rgba(255, 225, 123, .25);
  border-radius: 8px;
}
.queue-list li.active::before {
  content: 'PLAYING';
  display: inline-block;
  font-size: 9px;
  letter-spacing: .15em;
  font-weight: 900;
  color: #052213;
  background: var(--gold);
  padding: 2px 5px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: 1px;
}
.queue-list li.waiting::before {
  content: 'WAITING';
  display: inline-block;
  font-size: 9px;
  letter-spacing: .15em;
  font-weight: 800;
  color: var(--text-mute);
  background: rgba(255, 255, 255, .08);
  padding: 2px 5px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: 1px;
}
.queue-list .who-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.queue-list .who-name {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-list .who-wallet {
  font-family: var(--mono-stack);
  font-size: 11px;
  color: var(--text-mute);
  /* Solana addresses are 32–44 chars and would otherwise blow the 296px
     side-panel column wide open — clip with ellipsis so the row stays
     inside the queue card. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.queue-list .picks {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  min-width: 22px;
}
.queue-list .picks .num-pill {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-family: var(--mono-stack);
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.queue-list .picks .num-pill.red   { background: var(--pocket-red); }
.queue-list .picks .num-pill.black { background: var(--pocket-black); border: 1px solid rgba(255,255,255,.16); }
.queue-list .picks .num-pill.green { background: var(--pocket-green); }
.queue-list .picks.empty {
  color: var(--text-faint);
  font-weight: 600;
  font-size: 14px;
}
.queue-empty {
  /* When the list has only the empty-state row, vertically center the
     message so the right panel never looks top-heavy next to the left
     timer panel. */
  padding: 0 14px;
  text-align: center;
  color: var(--text-mute);
  font-size: var(--panel-body-text-size);
  border-bottom: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--side-panel-min-height) - 90px);
  line-height: 1.55;
}

/* ---- Cards row below the wheel --------------------------- */
.info-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}
.status-card .status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 20px;
  margin-bottom: 4px;
}
@media (max-width: 900px) {
  .status-card .status-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .status-card .status-grid { grid-template-columns: 1fr; }
}
.my-round-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 196, 77, .08);
  border: 1px solid rgba(255, 196, 77, .22);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.my-round-note strong { color: var(--gold); }
.settle-banner {
  margin-top: 14px;
  background: rgba(88, 196, 120, .1);
  border: 1px solid rgba(88, 196, 120, .28);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}
.settle-banner .winner-line {
  font-family: var(--mono-stack);
  font-size: 12px;
  word-break: break-all;
}
.my-numbers {
  display: inline-flex !important;
  gap: 6px;
  align-items: center;
}
.my-numbers .num-pill {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-family: var(--mono-stack);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}
.my-numbers .num-pill.red { background: var(--pocket-red); }
.my-numbers .num-pill.black { background: var(--pocket-black); border: 1px solid rgba(255,255,255,.16); }
.my-numbers .num-pill.green { background: var(--pocket-green); }

.info-row .card { display: flex; flex-direction: column; }
.info-row .button-row { margin-top: auto; padding-top: 12px; }

.pick-card { margin-top: 16px; }
.players-card { margin-top: 16px; }

/* Last result card */
.last-result-empty {
  font-size: 14px;
  color: var(--text-mute);
  padding: 18px 0;
  text-align: center;
}
.last-result-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.last-result-badge .num-pill {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.last-result-badge .num-pill.red   { background: var(--pocket-red); }
.last-result-badge .num-pill.black { background: var(--pocket-black); border: 1px solid rgba(255,255,255,.16); }
.last-result-badge .num-pill.green { background: var(--pocket-green); }
.last-result-badge .meta { display: flex; flex-direction: column; gap: 2px; }
.last-result-badge .meta .color-name {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.last-result-badge .meta .outcome {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.last-result-tx {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-mute);
}
.last-result-tx a {
  font-family: var(--mono-stack);
  font-size: 12px;
}

/* ---- Players in Round (Row C) tiles ---------------------- */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .slot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .slot-grid { grid-template-columns: 1fr; } }

.slot-tile {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 68px;
}
.slot-tile.me {
  border-color: var(--gold);
  background: rgba(255, 225, 123, .12);
  box-shadow: inset 0 0 14px rgba(255, 225, 123, .14);
}
.slot-tile.empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .12);
  background: transparent;
  color: var(--text-faint);
  align-items: center;
  justify-content: center;
}
.slot-tile .who {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-tile .picks {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 13px;
  color: var(--text-mute);
}
.slot-tile .picks .num-pill {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono-stack);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}
.slot-tile .picks .num-pill.red { background: var(--pocket-red); }
.slot-tile .picks .num-pill.black { background: var(--pocket-black); border: 1px solid rgba(255,255,255,.16); }
.slot-tile .picks .num-pill.green { background: var(--pocket-green); }
.slot-tile .picks.unpicked { color: var(--text-faint); font-style: italic; }

/* =========================================================
   Wheel scene
   ========================================================= */

.scene {
  position: relative;
  /* CRITICAL: the wheel must NEVER exceed its centre grid column. The
     previous `width: min(85vw, 720px, 70vh)` (and any `min(100%, ...)`
     variant) did NOT actually honour a 100%-column bound on a grid item
     that also has `aspect-ratio: 1/1` + `place-items: center` — a Chromium
     quirk where the box defaults to the *vh*-derived size. On intermediate
     viewports (≈1080–1240px) that made the wheel render at 70vh ≈ 538px
     in a ~470px column, overflowing to the RIGHT (because `justify-self:
     center` falls back to safe-`start` for overflowing items in LTR),
     dragging the wheel visually toward the queue panel.

     Fix: plain `width: 100%` + `max-width`. The aspect-ratio derives the
     height; `max-height: 70vh` keeps short screens sane (aspect-ratio
     then back-solves a smaller width). The wheel can no longer overflow
     its column at any viewport. */
  width: 100%;
  max-width: 720px;
  max-height: 70vh;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  margin-inline: auto;
  /* Stack below the side panels so any drop-shadow can't bleed visually. */
  z-index: 1;
}
@media (max-width: 1024px) {
  .scene { max-width: min(92vw, 720px); }
}
.roulette {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-style: preserve-3d;
  /* Tighter blur (was 22 28) so the shadow stays inside the centre column
     instead of fading into the right queue panel when the user is logged
     in and the page is at narrow desktop widths. */
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .42));
}
.roulette::before {
  content: "";
  position: absolute;
  inset: 1.8%;
  border-radius: 50%;
  transform: translateZ(-34px);
  background: rgba(45, 16, 3, .55);
  /* Soft drop shadow only — no visible brown lip protruding below the wheel. */
  box-shadow: 0 22px 26px rgba(0, 0, 0, .55);
  z-index: -1;
}
.roulette svg { width: 100%; height: 100%; display: block; overflow: visible; }

.wood-base   { fill: url(#woodBase); }
.wood-inner  { fill: url(#woodInner); }
.gold-stroke { stroke: url(#gold); stroke-width: 12; fill: none; }
.thin-gold   { stroke: #f2ca65; stroke-width: 4; fill: none; opacity: .95; }
.pocket-border { stroke: rgba(255, 220, 120, .78); stroke-width: 2; }
.green-border  { stroke: rgba(255, 230, 140, .75); stroke-width: 2; }
.num-label {
  font-size: 28px;
  font-weight: 900;
  fill: white;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .68);
  stroke-width: 4px;
  user-select: none;
}
.metal-pin { fill: url(#pinGold); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }

.ball-wrap {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(0deg);
  z-index: 10;
  pointer-events: none;
}
.ball {
  position: absolute;
  left: 50%;
  top: 6.5%;
  width: clamp(20px, 4vw, 34px);
  height: clamp(20px, 4vw, 34px);
  margin-left: clamp(-17px, -2vw, -10px);
  border-radius: 50%;
  background: radial-gradient(circle at 31% 26%, #fff, #ececec 42%, #969696 100%);
  box-shadow: 0 9px 12px rgba(0, 0, 0, .58), inset -5px -6px 8px rgba(0, 0, 0, .25);
}
.ball::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  filter: blur(4px);
}
.pointer {
  position: absolute;
  left: 50%;
  top: -3.8%;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: clamp(20px, 4vw, 36px) solid transparent;
  border-right: clamp(20px, 4vw, 36px) solid transparent;
  border-top: clamp(34px, 7vw, 60px) solid var(--gold);
  z-index: 12;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .55));
}
.spinning .ball-wrap {
  animation: ballSpin var(--spinTime) cubic-bezier(.03, .86, .08, 1) forwards;
}
.spinning .ball {
  animation: ballDrop var(--spinTime) cubic-bezier(.03, .86, .08, 1) forwards;
}
@keyframes ballSpin {
  from { transform: rotate(var(--ballStartRot)); }
  to   { transform: rotate(var(--ballRot)); }
}
@keyframes ballDrop {
  0%   { top: 6.5%; transform: scale(1); }
  70%  { top: 6.5%; transform: scale(1); }
  82%  { top: 9.2%; transform: scale(.99); }
  90%  { top: 13.2%; transform: scale(.96) translateY(-7px); }
  95%  { top: 14.2%; transform: scale(.94) translateY(4px); }
  100% { top: 14.2%; transform: scale(.94); }
}

/* =========================================================
   Card / panel
   ========================================================= */

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--panel-shadow), var(--panel-glow);
}
.card h3 { margin-bottom: 10px; }

.kv {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 3px 0;
  color: var(--text-dim);
}
.kv strong { color: var(--text); font-weight: 700; }

.pot-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 36px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: .5px;
  line-height: 1;
  margin-bottom: 12px;
  text-shadow: 0 0 32px var(--gold-glow);
}
.pot-amount .unit { font-size: 18px; color: var(--text-mute); font-weight: 700; }

.timer {
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* (Legacy slot-list styles retained for backward compatibility, unused.) */

.button-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.button-row .btn { flex: 1; min-width: 120px; }

/* =========================================================
   Number picker (full-width roulette layout: 0 + 3×12 grid)
   ========================================================= */

.picker {
  display: grid;
  /* First column = the 0 cell (spans 3 rows). Then 12 number columns. */
  grid-template-columns: minmax(56px, 0.85fr) repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(48px, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.picker button {
  border: 0;
  border-radius: 10px;
  padding: 12px 0;
  font-family: var(--mono-stack);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  color: #fff;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, .06);
  transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
  min-width: 0;
}
.picker button.red   { background: var(--pocket-red);   border-color: rgba(255, 225, 123, .25); }
.picker button.black { background: var(--pocket-black); border-color: rgba(255, 225, 123, .35); }
.picker button.green { background: var(--pocket-green); border-color: rgba(255, 225, 123, .35); }
.picker button.zero  {
  /* Layout only — colour comes from the .green class so EVERY keypad
     button derives its background from pocketColorClass(n). */
  grid-row: 1 / 4;
  grid-column: 1;
  font-size: 22px;
}
.picker button.taken { opacity: .35; cursor: not-allowed; }
.picker button.mine  {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
  box-shadow: 0 0 18px var(--gold-glow);
  transform: scale(1.04);
  z-index: 1;
}
.picker button:hover:not(:disabled):not(.taken) {
  transform: scale(1.06);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.picker-guest-hint {
  grid-column: 1 / -1;
  margin-top: 10px;
}
.picker-hint {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: .02em;
}
.picker-help {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: .04em;
  font-style: italic;
}
@media (max-width: 720px) {
  .picker {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: none;
    gap: 5px;
  }
  .picker > * {
    grid-row: auto !important;
    grid-column: auto !important;
  }
  .picker button.zero {
    grid-column: 1 / -1 !important;
  }
}

/* =========================================================
   Banners
   ========================================================= */

.banner {
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  background: rgba(255, 225, 123, .1);
  border: 1px solid rgba(255, 225, 123, .26);
}
.banner.win  { background: rgba(40, 200, 100, .15); border-color: rgba(80, 220, 130, .42); color: #c8f7d8; }
.banner.warn { background: rgba(220, 130, 30, .15); border-color: rgba(255, 175, 80, .42); color: #ffd9a8; }
.banner.err  { background: rgba(200, 30, 50, .18); border-color: rgba(255, 90, 110, .42); color: #ffc6cc; }
.banner code { background: rgba(0, 0, 0, .4); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.parity-warn { margin-top: 16px; font-weight: 700; }
.parity-warn[hidden] { display: none !important; }

/* ?colorAudit=1 floating proof overlay */
#colorAuditOverlay {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  width: min(360px, calc(100vw - 32px));
  max-height: 70vh;
  overflow: auto;
  padding: 14px 16px 12px;
  background: rgba(4, 19, 10, .94);
  border: 1px solid rgba(255, 225, 123, .4);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55);
  font-family: var(--mono-stack);
  font-size: 12px;
  color: var(--text);
}
#colorAuditOverlay .cao-head {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .03em;
  margin-bottom: 10px;
}
#colorAuditOverlay .cao-head.ok  { color: #b6f0c8; }
#colorAuditOverlay .cao-head.bad { color: #ffb4b4; }
#colorAuditOverlay .cao-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
#colorAuditOverlay .cao-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .02);
}
#colorAuditOverlay .cao-cell.bad { border-color: #ff6e7c; background: rgba(200,30,50,.18); }
#colorAuditOverlay .cao-sw {
  width: 100%;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 3px;
}
#colorAuditOverlay .cao-n { font-weight: 800; font-size: 12px; }
#colorAuditOverlay .cao-x { font-size: 10px; opacity: .6; }
#colorAuditOverlay .cao-list {
  font-size: 11px;
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
#colorAuditOverlay .cao-list.ok { color: #b6f0c8; }
#colorAuditOverlay .cao-close {
  position: absolute;
  top: 6px; right: 8px;
  background: transparent;
  color: var(--text-mute);
  border: 0;
  font-size: 20px;
  cursor: pointer;
}

/* =========================================================
   Stats strip
   ========================================================= */

.stats {
  padding: 60px 0 30px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .25));
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .kpi-grid { grid-template-columns: 1fr; } }

.kpi {
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--panel-shadow);
}
.kpi label {
  display: block;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.kpi strong {
  display: block;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: .5px;
}
.kpi .unit { color: var(--text-mute); font-weight: 700; font-size: 16px; margin-left: 4px; }

/* =========================================================
   Hall of Fame
   ========================================================= */

.hof {
  padding: 50px 0 60px;
}
.hof-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.hof-head h2 { margin-bottom: 4px; }
.hof-card {
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}
.hof-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.hof-table th, .hof-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.hof-table th {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: rgba(0, 0, 0, .25);
  font-weight: 700;
}
.hof-table tr:last-child td { border-bottom: 0; }
.hof-table tr:hover td { background: rgba(255, 225, 123, .04); }
.hof-table .num-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 900;
  color: #fff;
  font-size: 14px;
}
.hof-table .num-pill.red   { background: var(--pocket-red); }
.hof-table .num-pill.black { background: var(--pocket-black); border: 1px solid rgba(255,255,255,.18); }
.hof-table .num-pill.green { background: var(--pocket-green); }
.hof-table .prize { color: var(--gold); font-weight: 800; }
.hof-table .wallet { font-family: var(--mono-stack); font-size: 13px; color: var(--text-mute); }
.hof-table .ago { color: var(--text-mute); }
.hof-table .sig a { font-family: var(--mono-stack); font-size: 12px; }

.hof-empty {
  padding: 38px 22px;
  text-align: center;
  color: var(--text-mute);
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

@media (max-width: 720px) {
  .hof-table th:nth-child(2),
  .hof-table td:nth-child(2) { display: none; }
  .hof-table th:nth-child(6),
  .hof-table td:nth-child(6) { display: none; }
}

/* =========================================================
   How it works
   ========================================================= */

.how {
  padding: 60px 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55));
}
.how h2 { margin-bottom: 8px; }
.steps {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.step {
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px 22px;
  box-shadow: var(--panel-shadow);
  position: relative;
}
.step .num {
  position: absolute;
  top: 16px; right: 18px;
  font-size: 56px;
  font-weight: 900;
  color: rgba(255, 225, 123, .14);
  line-height: 1;
}
.step .icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.step h4 {
  margin: 0 0 6px;
  font-size: 17px;
  letter-spacing: .02em;
}
.step p {
  font-size: 14px;
  color: var(--text-mute);
  margin: 0;
}

/* =========================================================
   About
   ========================================================= */

.about {
  padding: 60px 0;
  background: rgba(0, 0, 0, .55);
}
.about h2 { margin-bottom: 16px; }
.about p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.about .disclaimer {
  font-size: 13px;
  color: var(--text-mute);
  font-style: italic;
  padding: 14px 18px;
  border-left: 3px solid var(--gold-deep);
  background: rgba(0, 0, 0, .35);
  border-radius: 0 12px 12px 0;
  margin-top: 24px;
}

/* =========================================================
   FAQ
   ========================================================= */

.faq {
  padding: 60px 0 80px;
  background: rgba(0, 0, 0, .7);
}
.faq h2 { margin-bottom: 24px; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-list details {
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  transition: background .15s ease;
}
.faq-list details[open] {
  background: rgba(7, 18, 12, .95);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
  font-weight: 400;
  transition: transform .2s ease;
}
.faq-list details[open] summary::after { content: '−'; }
.faq-list .body {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.65;
}

/* =========================================================
   Footer
   ========================================================= */

.footer {
  padding: 40px 0 28px;
  background: #03110a;
  border-top: 1px solid rgba(255, 225, 123, .08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: 22px; } }

.footer-brand .brand { margin-bottom: 8px; }
.footer-brand p { font-size: 13px; color: var(--text-mute); max-width: 38ch; }

.footer-title {
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 10px;
}
.footer-links { display: flex; flex-direction: column; gap: 6px; }
.footer-links a {
  color: var(--text-dim);
  font-size: 14px;
}
.footer-links a:hover { color: var(--gold); }

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- Full-width contract-address row (footer) ------------- */
.contract-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
}
.contract-row-label {
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 800;
  white-space: nowrap;
}
.contract-row-addr {
  font-family: var(--mono-stack);
  font-size: 13px;
  color: var(--text);
  background: transparent;
  padding: 0;
  word-break: break-all;
  min-width: 0;
}
.contract-row-btn {
  background: rgba(255, 225, 123, .1);
  color: var(--gold);
  border: 1px solid rgba(255, 225, 123, .35);
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.contract-row-btn:hover {
  background: rgba(255, 225, 123, .2);
  border-color: var(--gold);
}
.contract-row-btn.copied {
  background: rgba(40, 200, 100, .15);
  border-color: rgba(80, 220, 130, .42);
  color: #b6f0c8;
}
@media (max-width: 720px) {
  .contract-row {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }
  .contract-row-btn { justify-self: center; }
}

.mint-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 8px 12px;
  border-radius: 999px;
  font-family: var(--mono-stack);
  font-size: 12px;
  color: var(--text);
}
.mint-chip button {
  background: transparent;
  border: 0;
  color: var(--gold);
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
}
.mint-chip button:hover { background: rgba(255, 225, 123, .15); }

.footer-bottom {
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 12px;
  color: var(--text-mute);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* =========================================================
   Auth pages
   ========================================================= */

.auth-page {
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  place-items: center;
  padding: 40px 18px 60px;
}
.auth-card {
  width: min(440px, 100%);
  padding: 30px 28px 28px;
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px);
}
.auth-card h1 {
  font-size: 26px;
  margin: 0 0 6px;
  letter-spacing: .3px;
}
.auth-card .sub {
  font-size: 14px;
  color: var(--text-mute);
  margin: 0 0 22px;
}
label.field {
  display: block;
  margin-bottom: 16px;
}
label.field span {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text-dim);
  font-weight: 600;
}
label.field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .42);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
label.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 225, 123, .18);
}
label.field .hint {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 6px;
}
.error {
  color: #ffb4b4;
  background: rgba(180, 30, 30, .22);
  border: 1px solid rgba(255, 120, 120, .35);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
}
.error.shown { display: block; }
.muted {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-mute);
}

/* =========================================================
   Responsive tweaks
   ========================================================= */

@media (max-width: 720px) {
  .topnav { height: 60px; }
  .navlinks { display: none; }
  .container { padding: 0 18px; }
  .hero { padding: 30px 0 40px; }
}