/* ============================================================
   STONKPEDIA — Global Design System
   Premium Web3 encyclopedia × stonk-market culture

   THEME: ocean. Sampled straight from the brand artwork — a silver
   puzzle globe with slate-ink glyphs, floating over a flat ocean
   blue. Panels are cool silver paper so the archive reads like a
   page; slate ink carries every primary action (the colour of the
   glyphs), logo blue marks live signal on paper, stonk green marks
   the Machine and anything that's going up, indigo marks Rare,
   and gold marks Legendary.
   ============================================================ */

:root {
  /* Brand ramp — deep ocean → logo blue → globe silver.
     Legacy `blue/violet/pink` names are kept so every existing
     gradient (which reads blue→violet→pink, i.e. dark→mid→bright)
     picks the new ramp up untouched. */
  --brand-blue: #024E6C;
  --brand-blue-deep: #013447;
  --brand-violet: #037099;
  --brand-violet-deep: #025A7C;
  --brand-pink: #C8E0E8;
  --brand-pink-deep: #9DBCC6;
  --brand-sweep: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-violet) 52%, #9FC9D9 100%);
  /* the sweep for type set on paper, where silver would wash out */
  --brand-sweep-ink: linear-gradient(120deg, #15272D 0%, #025A7C 55%, #037099 100%);

  /* Primary accent — logo blue on paper, silver on the ocean. Legacy
     `lime` names kept so every page's existing rules pick it up. */
  --lime: #036890;
  --lime-bright: #C8E0E8;
  --lime-deep: #024A66;
  --lime-dim: rgba(3, 104, 144, 0.11);
  --lime-glow: rgba(200, 224, 232, 0.45);

  /* Surfaces — silver paper panels over the ocean */
  --ink: #037099;
  --ink-2: #023A52;
  --ink-3: #012C3F;
  /* the logo's own backdrop: flat ocean blue, a touch brighter
     overhead and deepening at the foot like the globe's shadow */
  --sky-ground: linear-gradient(180deg, #0479A6 0%, #037099 34%, #036A91 70%, #025676 100%);
  --surface: rgba(247, 250, 251, 0.90);
  --surface-2: rgba(251, 253, 253, 0.96);
  --surface-3: #FBFDFD;

  /* Type that sits directly ON the sky, not inside a panel.
     Everything inside a card keeps the dark --rice ink instead. */
  --on-ground: #F4FAFC;
  --on-ground-dim: rgba(220, 236, 242, 0.86);
  --on-ground-line: rgba(200, 224, 232, 0.34);
  --line: rgba(21, 39, 45, 0.10);
  --line-strong: rgba(21, 39, 45, 0.20);
  --shadow-1: 0 10px 30px rgba(1, 30, 44, 0.22);
  --shadow-2: 0 18px 50px rgba(1, 30, 44, 0.32);
  --shadow-3: 0 28px 70px rgba(1, 30, 44, 0.40);

  /* Type colours (slate ink, the globe's glyphs) */
  --rice: #15272D;
  --rice-dim: #3B5158;
  --muted: #64767C;

  --gold: #A9760D;
  --gold-dim: rgba(169, 118, 13, 0.14);
  /* the counterpoint — stonk green: live feeds, the spin CTA, up only */
  --crimson: #0F8A4F;
  --crimson-bright: #34D27F;

  --sky: #3658AA;
  --pinkish: #C8E0E8;
  --violet: #037099;

  /* Rarity */
  --rar-common: #64767C;
  --rar-rare: #3658AA;
  --rar-legendary: #A9760D;

  /* Type */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Motion — Premium personality */
  --ease-brand: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ease-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --t-quick: 150ms;
  --t-std: 300ms;
  --t-slow: 500ms;

  --radius: 12px;
  --radius-lg: 20px;
  --nav-h: 64px;
  --maxw: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--rice);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

/* The ocean ground, fixed to the viewport — the logo's backdrop. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--sky-ground);
  pointer-events: none;
}
/* Fine grain keeps the large flat field from looking plastic */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.06;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  pointer-events: none;
}

::selection { background: var(--brand-pink); color: #15272D; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
input, select { font-family: inherit; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.mono { font-family: var(--font-mono); font-size: 0.86em; }
.muted { color: var(--muted); }
.lime { color: var(--lime); }
.gold { color: var(--gold); }

/* Brand-gradient text — the premium accent for numbers and marks */
.grad-text {
  background: var(--brand-sweep);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ============ NAVBAR ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(247, 250, 251, 0.90);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-std) var(--ease-brand);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: 0 24px;
  display: flex; align-items: center; gap: 28px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  flex-shrink: 0;
}
.nav-logo img { width: 34px; height: 34px; transition: transform var(--t-slow) var(--ease-pop); }
.nav-logo:hover img { transform: rotate(-14deg) scale(1.08); }
.nav-logo .pedia {
  background: var(--brand-sweep-ink);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav-links { display: flex; gap: 4px; align-items: center; flex: 1; }
.nav-links a {
  padding: 7px 12px;
  font-size: 13.5px; font-weight: 500;
  color: var(--rice-dim);
  border-radius: 8px;
  position: relative;
  transition: color var(--t-quick) var(--ease-brand), background var(--t-quick) var(--ease-brand);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--rice); background: rgba(21, 39, 45, 0.06); }
.nav-links a.active { color: var(--lime); font-weight: 600; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--brand-sweep);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  font-size: 14px; font-weight: 600;
  border-radius: 10px;
  transition: transform var(--t-quick) var(--ease-brand), box-shadow var(--t-std) var(--ease-brand),
              background var(--t-quick) var(--ease-brand), color var(--t-quick) var(--ease-brand);
  will-change: transform;
  user-select: none;
}
.btn:active { transform: scale(0.97); }
/* Primary — slate ink, the colour of the globe's glyphs, with silver
   type. The signal colour, used only where we want the eye to land first. */
.btn-lime {
  background: linear-gradient(135deg, #2A444C 0%, #15272D 55%, #0B1A1F 100%);
  background-size: 160% 100%;
  color: #F4FAFC;
  box-shadow: 0 6px 22px rgba(1, 30, 44, 0.34);
}
.btn-lime:hover { background-position: 100% 0; box-shadow: 0 10px 30px rgba(1, 30, 44, 0.50); transform: translateY(-1px); }
/* Secondary CTA — stonk green, reserved for the Machine */
.btn-crimson {
  background: linear-gradient(135deg, #14A05C, #0B6B3D);
  color: #F0FFF6;
  box-shadow: 0 6px 22px rgba(4, 48, 26, 0.38);
}
.btn-crimson:hover { box-shadow: 0 10px 30px rgba(4, 48, 26, 0.5); transform: translateY(-1px); }
.btn-ghost {
  background: rgba(247, 250, 251, 0.94);
  color: var(--rice);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), var(--shadow-1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: #FBFDFD; box-shadow: inset 0 0 0 1px rgba(3, 104, 144, 0.35); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 15px 30px; font-size: 15.5px; }

.buy-btn { flex-shrink: 0; }
.wallet-btn { flex-shrink: 0; }
.wallet-btn.connected {
  background: var(--lime-dim);
  color: var(--lime-deep);
  box-shadow: inset 0 0 0 1px rgba(3, 104, 144, 0.3);
}
.wallet-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 6px var(--lime-glow); animation: pulse 2.2s ease-in-out infinite; }

.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-burger span { width: 22px; height: 2px; background: var(--rice); border-radius: 2px; transition: transform var(--t-std) var(--ease-brand), opacity var(--t-quick); }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Global ticker strip under nav (page-level opt-in) */
.global-ticker {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
  height: 34px;
  display: flex; align-items: center;
  background: rgba(242, 247, 248, 0.84);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  font-size: 12px;
}
.ticker-track { display: flex; gap: 42px; white-space: nowrap; animation: ticker 42s linear infinite; padding-left: 100%; }
.ticker-track span { display: inline-flex; align-items: center; gap: 7px; color: var(--rice-dim); }
.ticker-track b { color: var(--lime); font-weight: 700; }
.ticker-track .t-gold b { color: var(--gold); }
@keyframes ticker { to { transform: translateX(-100%); } }

main { padding-top: var(--nav-h); }
main.with-ticker { padding-top: calc(var(--nav-h) + 34px); }

/* ============ PAGE HEADERS ============ */
.page-head { padding: 64px 0 36px; }
.page-head .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--on-ground);
  margin-bottom: 14px;
}
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--on-ground); }
.page-head h1 { font-size: clamp(34px, 5vw, 52px); color: var(--on-ground); }
.page-head p.lead { max-width: 640px; margin-top: 14px; color: var(--on-ground-dim); font-size: 16px; }

/* ============ CARDS ============ */
.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.65);
  transition: transform var(--t-std) var(--ease-brand), border-color var(--t-std) var(--ease-brand),
              box-shadow var(--t-std) var(--ease-brand);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(3, 104, 144, 0.3);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.7);
}
.card-flat:hover { transform: none; }

/* Rarity chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 99px;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-common { color: var(--rar-common); background: rgba(100, 118, 124, 0.12); }
.chip-rare { color: var(--rar-rare); background: rgba(54, 88, 170, 0.12); }
.chip-legendary { color: var(--rar-legendary); background: var(--gold-dim); }
.chip-live { color: var(--crimson); background: rgba(52, 210, 127, 0.14); }
.chip-live::before { animation: pulse 1.6s ease-in-out infinite; }
.chip-soon { color: var(--sky); background: rgba(54, 88, 170, 0.12); }
.chip-locked { color: var(--muted); background: rgba(100, 118, 124, 0.12); }

/* Progress bars */
.progress {
  height: 8px; border-radius: 99px;
  background: rgba(21, 39, 45, 0.10);
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-violet) 45%, var(--brand-pink-deep));
  box-shadow: 0 0 12px var(--lime-glow);
  transition: width 900ms var(--ease-brand);
  position: relative;
}
.progress-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.6s var(--ease-brand) infinite;
}
.progress-gold .progress-fill { background: linear-gradient(90deg, #C99A2A, var(--gold)); box-shadow: 0 0 12px rgba(169, 118, 13, 0.35); }
@keyframes shimmer { 55% { transform: translateX(100%); } 100% { transform: translateX(100%); } }

/* Stat tiles */
.stat-tile { padding: 18px 20px; }
.stat-tile .label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stat-tile .value { font-family: var(--font-display); font-size: 30px; font-weight: 600; margin-top: 4px; letter-spacing: -0.01em; }
.stat-tile .sub { font-size: 12px; color: var(--rice-dim); margin-top: 2px; }

/* ============ FOOTER ============ */
footer {
  margin-top: 100px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(242,247,248,0.88), rgba(251,253,253,0.97));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 32px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
.footer-brand img { width: 52px; margin-bottom: 14px; }
.footer-brand .name { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.footer-brand p { color: var(--muted); font-size: 13px; margin-top: 10px; max-width: 300px; }
.footer-col h4 { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rice-dim); margin-bottom: 16px; font-family: var(--font-mono); font-weight: 600; }
.footer-col a { display: block; padding: 5px 0; color: var(--muted); font-size: 13.5px; transition: color var(--t-quick), transform var(--t-quick) var(--ease-brand); }
.footer-col a:hover { color: var(--lime); transform: translateX(3px); }
.footer-bottom {
  max-width: var(--maxw); margin: 0 auto; padding: 22px 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}

/* ============ REVEAL ON SCROLL ============ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease-enter), transform 600ms var(--ease-enter); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 70ms; }
.reveal-d2 { transition-delay: 140ms; }
.reveal-d3 { transition-delay: 210ms; }

/* ============ ANIMATIONS ============ */
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}
@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes glow-breathe {
  0%, 100% { filter: drop-shadow(0 8px 18px rgba(1, 30, 44, 0.28)); }
  50% { filter: drop-shadow(0 14px 38px rgba(200, 224, 232, 0.35)); }
}
/* Flash via glow, not colour — animating `color` would blow away
   the gold/accent class colours mid-transition. */
@keyframes num-flash {
  0% { text-shadow: 0 0 16px var(--lime-glow), 0 0 4px rgba(3, 104, 144, 0.5); transform: translateY(-1px); }
  100% { text-shadow: none; transform: none; }
}
.num-flash { animation: num-flash 900ms var(--ease-brand); }

/* Page enter */
.page-enter { animation: fade-up 500ms var(--ease-enter) both; }

/* ============ TABLES ============ */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
}
table.data {
  width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px;
}
table.data th {
  text-align: left; padding: 12px 16px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0; background: var(--surface-3);
}
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
table.data tbody tr { transition: background var(--t-quick); }
table.data tbody tr:hover { background: rgba(3, 104, 144, 0.05); }
table.data tbody tr.new-row { animation: row-in 600ms var(--ease-enter); }
@keyframes row-in { from { opacity: 0; transform: translateY(-8px); background: var(--lime-dim); } }

/* ============ FORMS ============ */
.input {
  width: 100%;
  background: rgba(251, 253, 253, 0.78);
  border: 1px solid var(--line-strong);
  color: var(--rice);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  transition: border-color var(--t-quick), box-shadow var(--t-quick), background var(--t-quick);
}
.input:focus { outline: none; background: #FBFDFD; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(3, 104, 144, 0.15); }
.input::placeholder { color: var(--muted); }

select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236A7A8C'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }

/* ============ MISC ============ */
.divider { height: 1px; background: var(--on-ground-line); margin: 32px 0; }
.section { padding: 72px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(24px, 3.4vw, 34px); color: var(--on-ground); }
.section-head .more { font-size: 13px; color: var(--on-ground); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.section-head .more:hover { text-decoration: underline; }

.tx-link { color: var(--sky); font-family: var(--font-mono); font-size: 12px; }
.tx-link:hover { text-decoration: underline; }

.tooltip { position: relative; cursor: help; border-bottom: 1px dotted var(--muted); }

.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty-state img { width: 76px; margin: 0 auto 18px; opacity: 0.6; animation: floaty 5s ease-in-out infinite; }

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.5) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s linear infinite;
  border-radius: 8px;
}
@keyframes skeleton { to { background-position: -200% 0; } }

/* Loading overlay */
#loader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--sky-ground);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  transition: opacity 450ms var(--ease-exit), visibility 450ms;
}
#loader.done { opacity: 0; visibility: hidden; }
#loader img { width: 84px; animation: floaty 3s ease-in-out infinite, glow-breathe 3s ease-in-out infinite; }
#loader .bar { width: 160px; height: 3px; background: rgba(255,255,255,0.16); border-radius: 99px; overflow: hidden; }
#loader .bar i { display: block; height: 100%; width: 40%; background: var(--brand-sweep); border-radius: 99px; animation: loader-slide 1.1s var(--ease-brand) infinite; }
@keyframes loader-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

/* Toast */
#toast-root { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: rgba(247, 250, 251, 0.95); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--lime);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 10px; padding: 13px 18px;
  font-size: 13.5px; max-width: 320px;
  box-shadow: var(--shadow-2);
  animation: toast-in 350ms var(--ease-pop);
}
.toast.gold { border-left-color: var(--gold); }
.toast.out { opacity: 0; transform: translateX(20px); transition: all 300ms var(--ease-exit); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }

/* ============ SOCIAL / CONTRACT-ADDRESS BUTTONS ============ */
.social-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.nav-social { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 36px; height: 36px; border-radius: 10px;
  color: var(--rice-dim);
  background: rgba(247, 250, 251, 0.6);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform var(--t-quick) var(--ease-brand), color var(--t-quick),
              background var(--t-quick), box-shadow var(--t-std) var(--ease-brand);
}
.social-btn:hover {
  transform: translateY(-2px); color: var(--lime); background: #FBFDFD;
  box-shadow: inset 0 0 0 1px rgba(3,104,144,0.35), var(--shadow-1);
}
/* ambient sound toggle — breathes gently while it is playing */
.music-btn.on {
  color: var(--lime);
  background: #FBFDFD;
  box-shadow: inset 0 0 0 1px rgba(3,104,144,0.35), var(--shadow-1);
}
.music-btn.on::after {
  content: ""; position: absolute; inset: -3px; border-radius: 12px;
  border: 1px solid rgba(3, 104, 144, 0.35);
  animation: music-breathe 2.8s var(--ease-brand) infinite;
  pointer-events: none;
}
.music-btn { position: relative; }
@keyframes music-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.18); }
}

/* the CA pill widens to hold its label */
.social-btn.ca {
  width: auto; padding: 0 14px; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.social-btn.ca .ca-k { font-weight: 700; color: var(--lime); }
.social-btn.ca .ca-v { color: var(--muted); }
.social-btn.ca:hover .ca-v { color: var(--rice); }

/* ============ WALLET MODAL ============ */
.wallet-modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(1, 30, 44, 0.58);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fade-up 220ms var(--ease-enter);
}
.wallet-modal[hidden] { display: none; }
.wallet-sheet {
  width: 100%; max-width: 420px;
  background: rgba(251, 253, 253, 0.97);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 24px 24px 20px;
  animation: toast-in 320ms var(--ease-pop);
  max-height: 90vh; overflow-y: auto;
}
.wallet-sheet .ws-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wallet-sheet h3 { font-size: 20px; }
.wallet-sheet .ws-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.wallet-sheet .ws-close { font-size: 20px; line-height: 1; color: var(--muted); padding: 2px 6px; border-radius: 8px; }
.wallet-sheet .ws-close:hover { background: rgba(21, 39, 45, 0.08); color: var(--rice); }
.wallet-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.wallet-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,0.7);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform var(--t-quick) var(--ease-brand), box-shadow var(--t-std) var(--ease-brand), background var(--t-quick);
}
.wallet-opt:hover { transform: translateY(-1px); background: #FBFDFD; box-shadow: inset 0 0 0 1px rgba(3,104,144,0.4), var(--shadow-1); }
.wallet-opt:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.wallet-opt .wo-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.wallet-opt .wo-ico img { width: 24px; height: 24px; }
.wallet-opt .wo-txt { display: block; min-width: 0; }
.wallet-opt .wo-name { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.wallet-opt .wo-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; line-height: 1.35; }
.wallet-opt .wo-tag {
  margin-left: auto; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime);
  background: var(--lime-dim); padding: 3px 8px; border-radius: 99px; white-space: nowrap;
}
.wallet-opt .wo-tag.warn { color: var(--muted); background: rgba(100,118,124,0.12); }
.wallet-sheet .ws-foot { margin-top: 18px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.wallet-sheet .ws-foot b { color: var(--rice-dim); }

/* Decorative puzzle piece motif */
.motif {
  position: absolute; pointer-events: none; opacity: 0.09; z-index: 0;
  animation: floaty 8s ease-in-out infinite;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: rgba(247, 250, 251, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    padding: 12px 20px 20px;
    gap: 2px;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: all var(--t-std) var(--ease-brand);
  }
  .nav-links.open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a { padding: 12px 14px; font-size: 15px; }
  .nav-burger { display: flex; }
  .nav-inner { justify-content: space-between; }
  /* socials fold into the burger menu on small screens, but the sound
     toggle stays reachable — it is a control, not a link */
  .nav-social a { display: none; }
  .buy-btn { padding: 8px 12px; }
}
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .page-head { padding: 40px 0 24px; }
  .section { padding: 48px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}