/* garlicoin.org shared styles */

/* Self-hosted fonts (SIL Open Font License, see /assets/fonts/OFL-*.txt). Latin subset only;
   other characters fall back to the system font. Nunito is one variable file for 500-800. */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/fredoka-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --bg: #fbf7ec;
  --card: #ffffff;
  --line: #ece2c6;
  --ink: #2b2416;
  --muted: #5c5241;
  --gold: #f2b632;
  --gold-deep: #e09a12;
  --gold-text: #966000;
  --gold-soft: #fff4d4;
  --hero-bg: #fde7a3;
  --on-gold: #2b2416;
  --ok: #187a42;
  --ok-soft: #e3f5ea;
  --warn: #8a5a00;
  --warn-soft: #fff1d6;
  --bad: #b3261e;
  --bad-soft: #fdeceb;
  --shadow: 0 1px 2px rgba(60, 45, 10, .05), 0 6px 20px rgba(60, 45, 10, .06);
  --radius: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c160b;
    --card: #271f12;
    --line: #42361f;
    --ink: #f5ecd7;
    --muted: #c4b797;
    --gold-text: #ffcf5c;
    --gold-soft: #2c2412;
    --hero-bg: #3a2c10;
    --ok: #5fd08f;
    --ok-soft: #13291c;
    --warn: #ffc65c;
    --warn-soft: #2f2410;
    --bad: #ff8a80;
    --bad-soft: #321614;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
--bg: #1c160b;
  --card: #271f12;
  --line: #42361f;
  --ink: #f5ecd7;
  --muted: #c4b797;
  --gold-text: #ffcf5c;
  --gold-soft: #2c2412;
  --hero-bg: #3a2c10;
  --ok: #5fd08f;
  --ok-soft: #13291c;
  --warn: #ffc65c;
  --warn-soft: #2f2410;
  --bad: #ff8a80;
  --bad-soft: #321614;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--gold-text); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
.muted { color: var(--muted); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- top bar ---------- */
.topbar { background: var(--card); border-bottom: 1px solid var(--line); }
.topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); text-decoration: none; }
.brand img { width: 32px; height: 32px; flex: none; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: 7px 14px;
  border-radius: 999px;
}
.nav a:hover { color: var(--ink); background: var(--gold-soft); }
.nav a[aria-current="page"] { color: var(--on-gold); background: var(--gold); }

/* ---------- layout ---------- */
.wrap {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  min-width: 0;
}
/* keyboard focus: a ring that shows on both themes (mouse clicks don't trigger it) */
:where(a, button, summary, select, [tabindex], [role=button]):focus-visible { outline: 3px solid var(--gold-text); outline-offset: 2px; }
.card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; }
.label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  color: var(--on-gold);
  background: var(--gold);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease;
}
.btn:hover { color: var(--on-gold); background: var(--gold-deep); }
.btn.secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { background: var(--gold-soft); }
.btn svg { width: 18px; height: 18px; flex: none; }

.widget { overflow-x: auto; }
/* Third-party price widget: always shown on a light panel so its own blue/black text stays readable in dark mode */
.widget .coinmarketcap-currency-widget {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  color: #2b2416;
  border-radius: 12px;
  color-scheme: light;
}

/* ---------- home ---------- */
.hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 44px 48px;
  border-radius: 24px;
  background: var(--hero-bg);
}
.hero-band .eyebrow { font-weight: 700; color: var(--gold-text); margin-bottom: 10px; }
.hero-band h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 14px; }
.hero-band p.lead { font-size: 1.1rem; color: var(--muted); max-width: 46ch; margin-bottom: 26px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-logo { width: 200px; height: 200px; }

.services { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.services .service { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.service {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  text-decoration: none;
  color: var(--ink);
}
a.service:hover { color: var(--ink); border-color: var(--gold); }
.service .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--gold-soft);
  color: var(--gold-text);
}
.service .icon svg { width: 26px; height: 26px; }
.service h2 { font-size: 1.15rem; margin-bottom: 4px; }
.service p { color: var(--muted); }
.service .more { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--gold-text); }

.community {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.community h2 { font-size: 1.15rem; margin-bottom: 4px; }
.community p { color: var(--muted); }
.community .hero-actions { flex: none; }
.btn.discord, .btn.reddit { color: #fff; border-color: transparent; }
.btn.discord { background: #5865f2; }
.btn.discord:hover { background: #4752c4; color: #fff; }
.btn.reddit { background: #cc3700; }
.btn.reddit:hover { background: #d93a00; color: #fff; }

/* ---------- faucet ---------- */
.faucet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.roll-card { padding: 32px; }
.faucet-head { display: flex; align-items: center; gap: 16px; }
.faucet-head img { width: 56px; height: 56px; flex: none; }
.faucet-head h1 { font-size: clamp(1.6rem, 3.6vw, 2rem); }

/* The rebuild script swaps this exact <h1> markup (inline color) for maintenance mode. */
h1[style*="color:blue"] { color: var(--ink) !important; }
h1[style*="color:red"] {
  color: var(--bad) !important;
  font-size: 1.1rem !important;
  line-height: 1.4;
  background: var(--bad-soft);
  border-radius: 12px;
  padding: 12px 16px;
}

.amount { margin-top: 18px; font-size: 1.05rem; color: var(--muted); }
.amount:empty { display: none; }
.amount strong { color: var(--ink); }

.messages:empty { display: none; }
.messages { margin-top: 18px; }
.messages > * + * { margin-top: 10px; }
.messages strong {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none !important;
  overflow-wrap: anywhere;
}
.messages strong[style*="color:red"] { color: var(--bad) !important; background: var(--bad-soft); }
.messages strong[style*="color:green"] { color: var(--ok) !important; background: var(--ok-soft); }

/* "<br />Your Garlicoin address:" is printed first in the form line; it acts as the field label */
.roll { margin-top: 22px; font-weight: 700; font-size: .95rem; }
.roll:empty { display: none; }
.roll > br:first-child { display: none; }
.roll-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; font-weight: 400; }
.roll-form input[type="text"] {
  width: 100%;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  outline: none;
}
.roll-form input[type="text"]:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent);
}
.roll-form .g-recaptcha { min-height: 78px; }
.roll-form .btn { width: 100%; padding: 15px 22px; font-size: 1.1rem; }

.status { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.status.ready { color: var(--ok); }
.status.wait { color: var(--warn); }

.balance-value { display: block; font-size: 2.2rem; font-weight: 800; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.balance-value small { font-size: .5em; font-weight: 700; color: var(--muted); }

.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--muted); }
.activity li:first-child { border-top: 0; padding-top: 0; }
.activity strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.addr {
  display: block;
  color: var(--ink);
  font-size: .9rem;
  word-break: break-all;
  background: var(--gold-soft);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0 12px;
}
.btn-copy {
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.btn-copy:hover { background: var(--gold-soft); }

.how ol { margin: 0; padding-left: 1.3em; color: var(--muted); display: grid; gap: 6px; }
.how .ip { margin-top: 12px; font-size: .85rem; color: var(--muted); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 22px 24px calc(22px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
}
.site-footer p + p { margin-top: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .faucet-layout { grid-template-columns: minmax(0, 1fr); }
  .services { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding: 20px 16px 40px; gap: 16px; }
  .topbar-inner { padding: 10px 16px; justify-content: center; }
  .card, .roll-card { padding: 20px; }
  .side { gap: 16px; }
  .hero-band { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; text-align: center; gap: 18px; border-radius: 20px; }
  .hero-band .hero-logo { display: none; }
  .hero-band p.lead { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .community { flex-direction: column; align-items: stretch; text-align: center; }
}


/* ================= fun layer ================= */
:root {
  --font-fun: "Fredoka", "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dot: rgba(224, 154, 18, .16);
  --hero-grad: linear-gradient(135deg, #ffe9a6 0%, #fdd66d 55%, #f7b733 100%);
  --edge-gold: #b87a0c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dot: rgba(244, 192, 79, .13);
    --hero-grad: linear-gradient(135deg, #4a3810 0%, #3a2c0e 60%, #2b210b 100%);
    --edge-gold: #8a5a06;
  }
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(circle at 2px 2px, var(--dot) 2px, transparent 0);
  background-size: 26px 26px;
}

/* Readable rounded text everywhere; the playful display font only on big titles */
html { font-size: 17px; }
body { font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 1rem; font-weight: 500; }
h1, .balance-value { font-family: var(--font-fun); font-weight: 600; letter-spacing: .005em; }
h2, h3, .card-title, .brand, .btn, .nav a { font-weight: 800; letter-spacing: 0; }
.label { font-weight: 800; letter-spacing: .08em; }
.service p, .community p, .how ol, .activity li { font-size: 1rem; }

/* chunky, pressable buttons */
.btn {
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--edge-gold);
  transition: transform .1s ease, box-shadow .1s ease, background .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--edge-gold); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge-gold); }
.btn.secondary { box-shadow: 0 4px 0 var(--line); }
.btn.secondary:hover { box-shadow: 0 6px 0 var(--line); }
.btn.secondary:active { box-shadow: 0 1px 0 var(--line); }
.btn.discord { box-shadow: 0 4px 0 #3b44a8; }
.btn.discord:hover { box-shadow: 0 6px 0 #3b44a8; }
.btn.reddit { box-shadow: 0 4px 0 #b33000; }
.btn.reddit:hover { box-shadow: 0 6px 0 #b33000; }
.nav a[aria-current="page"] { box-shadow: 0 3px 0 var(--edge-gold); }

/* hero */
.hero-band {
  position: relative;
  overflow: hidden;
  background: var(--hero-grad);
  border: 2px solid rgba(184, 122, 12, .25);
}
.hero-band::before, .hero-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  pointer-events: none;
}
.hero-band::before { width: 320px; height: 320px; right: -70px; top: -90px; }
.hero-band::after { width: 160px; height: 160px; right: 230px; bottom: -80px; background: rgba(255, 255, 255, .18); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-band::before, :root:not([data-theme="light"]) .hero-band::after { background: rgba(255, 210, 100, .06); }
}
.hero-band > * { position: relative; z-index: 1; }
.hero-band .eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: #8a5a00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-band .eyebrow { background: rgba(255, 207, 92, .12); color: var(--gold-text); }
}
.hero-band p.lead { color: var(--ink); opacity: .78; }
.hero-logo {
  filter: drop-shadow(0 14px 18px rgba(120, 75, 0, .28));
  animation: bob 5s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}

/* playful cards */
a.service, .card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.service:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(60, 45, 10, .12); }
.service .icon {
  background: linear-gradient(135deg, var(--gold), #f7d26a);
  color: #2b2416;
  transform: rotate(-6deg);
  box-shadow: 0 3px 0 var(--edge-gold);
  transition: transform .2s ease;
}
a.service:hover .icon { transform: rotate(6deg) scale(1.06); }

/* faucet */
.roll-card { border-top: 6px solid var(--gold); }
.faucet-head img { animation: bob 5s ease-in-out infinite; }
.roll-form .btn { font-size: 1.25rem; }
.roll-form .btn svg { width: 24px; height: 24px; }
.roll-form .btn:hover svg { animation: spin .6s ease; }
@keyframes spin { to { transform: rotate(360deg); } }
.status { align-self: flex-start; padding: 6px 14px; border-radius: 999px; }
.status.ready { background: var(--ok-soft); }
.status.wait { background: var(--warn-soft); }

.balance-card {
  background: var(--hero-grad);
  border: 2px solid rgba(184, 122, 12, .25);
  position: relative;
  overflow: hidden;
}
.balance-card::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  right: -40px;
  top: -50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
}
.balance-card .label { color: #8a5a00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .balance-card .label { color: var(--gold-text); }
  :root:not([data-theme="light"]) .balance-card::after { background: rgba(255, 210, 100, .06); }
}
.balance-card .balance-value { font-size: 2.6rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  .hero-band::after { display: none; }
}

/* ---------- bootstrap ---------- */
.page-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 32px;
  border-top: 6px solid var(--gold);
}
.page-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold), #f7d26a);
  color: #2b2416;
  transform: rotate(-6deg);
  box-shadow: 0 3px 0 var(--edge-gold);
}
.page-icon svg { width: 32px; height: 32px; }
.page-head h1 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin-bottom: 10px; }
.page-head .lead { color: var(--muted); max-width: 60ch; margin-bottom: 22px; }
.page-head .file-note { margin-top: 14px; font-size: .9rem; color: var(--muted); }

.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.doc-layout code, .page-head code { font-size: .9em; }
.doc-layout p code, .steps code {
  background: var(--gold-soft);
  border-radius: 6px;
  padding: 1px 6px;
  overflow-wrap: anywhere;
}

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li {
  counter-increment: step;
  position: relative;
  min-height: 34px;
  padding: 5px 0 0 48px;
  color: var(--muted);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-fun);
  font-weight: 600;
  color: var(--on-gold);
  background: var(--gold);
  box-shadow: 0 3px 0 var(--edge-gold);
}
.steps strong { color: var(--ink); }

.paths { display: grid; gap: 18px; }
.paths .addr { margin-bottom: 6px; }
.small { font-size: .9rem; }

@media (max-width: 860px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .page-head { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; gap: 14px; }
  .page-icon { width: 54px; height: 54px; }
  .page-head .btn { width: 100%; }
}

/* ---------- status ---------- */
.page-head .status { display: inline-flex; margin-top: 4px; }
.stats { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-hero { grid-row: span 2; justify-content: center; background: var(--hero-grad); border: 2px solid rgba(184, 122, 12, .25); }
.stat-hero .label { color: #8a5a00; }
.stat-value { font-family: var(--font-fun); font-weight: 600; font-size: 1.7rem; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-hero .stat-value { font-size: clamp(1.9rem, 3.2vw, 2.9rem); white-space: nowrap; overflow-wrap: normal; }
.stat-sub { font-size: .9rem; color: var(--muted); }
.stat-hero .stat-sub { color: var(--ink); opacity: .78; }
pre.peers { white-space: pre-wrap; margin: 12px 0; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.btn-copy + a { margin-left: 12px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat-hero .label { color: var(--gold-text); }
}
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-hero { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- tipbot ---------- */
.commands { display: grid; gap: 14px; }
.command { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.command:first-child { border-top: 0; padding-top: 0; }
.command code { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.command p { color: var(--muted); }
.example { display: block; font-size: 1.05rem; margin: 12px 0; }
.notes { margin: 0; padding-left: 1.2em; color: var(--muted); display: grid; gap: 8px; }
@media (max-width: 640px) {
  .stats { gap: 16px; }
  .nav { gap: 0; justify-content: center; }
  .nav a { padding: 6px 9px; font-size: .88rem; }
  .command { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- home: four services in a 2x2 grid ---------- */
.services.services-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .services.services-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- faucet stats ---------- */
.payouts li { font-size: .92rem; }
.payouts code { color: var(--ink); }
code.hash { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }

/* ---------- 404 ---------- */
.notfound-logo { width: 64px; height: 64px; animation: bob 5s ease-in-out infinite; }

/* ---------- warmer dark mode: soft gold glow at the top of the page ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-image:
      radial-gradient(ellipse 90% 520px at 50% -120px, rgba(242, 182, 50, .16), transparent 70%),
      radial-gradient(circle at 2px 2px, var(--dot) 2px, transparent 0);
    background-size: 100% 100%, 26px 26px;
    background-repeat: no-repeat, repeat;
  }
}

/* ---------- charts ---------- */
:root { --chart: #b87a0c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chart: #c08a17; }
}
.charts { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-card { margin: 0; position: relative; }
.chart-card figcaption { margin-bottom: 12px; }
.chart-card figcaption .card-title { margin-bottom: 2px; }
.chart { position: relative; width: 100%; min-height: 210px; }
.chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.chart .tick.strong { fill: var(--ink); font-weight: 700; }
.chart .mark { fill: var(--chart); transition: opacity .1s; }
.chart .mark.on { opacity: .75; }
.chart .target { stroke: var(--ink); stroke-width: 1; opacity: .55; }
.chart .line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--chart); opacity: .1; }
.chart .dot { fill: var(--chart); stroke: var(--card); stroke-width: 2; }
.chart .cross { stroke: var(--muted); stroke-width: 1; }
.chart-tip {
  position: absolute;
  transform: translateY(-100%);
  pointer-events: none;
  background: var(--ink);
  color: var(--bg);
  font-size: .82rem;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 2;
}
.chart-tip strong { font-weight: 800; }
.chart-table { margin-top: 10px; font-size: .9rem; }
.chart-table summary { cursor: pointer; color: var(--gold-text); font-weight: 700; }
.chart-table table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { text-align: left; padding: 4px 8px 4px 0; border-top: 1px solid var(--line); }
.chart-table th { color: var(--muted); font-weight: 700; }
@media (max-width: 860px) {
  .charts { grid-template-columns: minmax(0, 1fr); }
}
.chart .halo { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }

/* ---------- home: live block line ---------- */
.live-strip {
  display: inline-block;
  max-width: 100%;
  margin-top: 22px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.live-strip[hidden] { display: none; }
.live-strip:hover { color: var(--ink); background: rgba(255, 255, 255, .8); }
.live-dot { display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(31, 138, 76, .5); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 138, 76, .45); } 100% { box-shadow: 0 0 0 9px rgba(31, 138, 76, 0); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .live-strip { background: rgba(255, 207, 92, .12); }
  :root:not([data-theme="light"]) .live-strip:hover { background: rgba(255, 207, 92, .2); }
}
.page-head .status[hidden] { display: none; }
.page-head .hero-actions + .status { margin-top: 18px; }

/* ---------- bootstrap checksum ---------- */
.page-head .checksum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.checksum code.hash { white-space: normal; word-break: break-all; font-size: .85rem; color: var(--ink); }
.checksum .btn-copy + a { margin-left: 0; }

/* ---------- tipbot stats ---------- */
.stats[hidden] { display: none; }

/* ---------- status chart range ---------- */
.range-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: -8px; }
.range-tabs button {
  font: inherit; font-size: .9rem; font-weight: 700; padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer;
}
.range-tabs button:hover { background: var(--gold-soft); }
.range-tabs button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); border-color: transparent; }
#verify .paths { margin-top: 14px; }
.cmds .addr { word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .nav a { padding: 6px 6px; font-size: .84rem; }
}
@media (max-width: 380px) {
  .nav a { padding: 6px 4px; font-size: .8rem; }
}

/* ================= 2026-10-16: price, health, supply, mining, node, api ================= */

/* footer links */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: 8px; font-weight: 700; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }

/* price card */
.price-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; }
.price-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.price-usd { font-family: var(--font-fun); font-weight: 600; font-size: 2.2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price-btc { color: var(--muted); font-variant-numeric: tabular-nums; }
.price-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; color: var(--muted); font-size: .92rem; }
.price-facts strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.price-source { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }
.price-card[hidden] { display: none; }
.chg-up { color: var(--ok); font-weight: 800; }
.chg-down { color: var(--bad); font-weight: 800; }

/* network agreement card */
.health-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.health-list li { display: flex; gap: 10px; align-items: baseline; color: var(--muted); }
.health-list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); transform: translateY(-1px); }
.health-list li.ok::before { background: var(--ok); }
.health-list li.bad::before { background: var(--bad); }
.health-list li.bad { color: var(--bad); font-weight: 700; }

/* big-number grids (supply, mining) */
.figures { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figures .stat-hero { grid-row: auto; }
@media (max-width: 860px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .figures .stat-hero { grid-column: 1 / -1; } }
@media (max-width: 480px) { .figures { grid-template-columns: minmax(0, 1fr); } }

/* progress bar */
.meter { height: 14px; border-radius: 999px; background: var(--gold-soft); overflow: hidden; margin: 12px 0 8px; border: 1px solid var(--line); }
.meter > span { display: block; height: 100%; background: var(--gold); border-radius: 999px; }

/* data tables */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
table.data th, table.data td { text-align: left; padding: 9px 12px 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
table.data thead th { border-top: 0; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }
table.data td.num, table.data th.num { text-align: right; padding-right: 0; padding-left: 12px; }
table.data tr.current td { font-weight: 800; color: var(--ink); background: var(--gold-soft); }
table.data tr.future td { color: var(--muted); }
.share-bar { display: inline-block; vertical-align: middle; height: 8px; border-radius: 999px; background: var(--chart); margin-right: 8px; min-width: 2px; }

/* calculator */
.calc { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.calc-row { display: flex; gap: 10px; flex-wrap: wrap; }
.calc input, .calc select {
  font: inherit; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); min-width: 0;
}
.calc input { flex: 1 1 140px; font-variant-numeric: tabular-nums; }
.calc input:focus, .calc select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.calc-out { list-style: none; margin: 0; padding: 0; }
.calc-out li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--muted); }
.calc-out li:first-child { border-top: 0; }
.calc-out strong { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }

/* callouts */
.callout { border-radius: 12px; padding: 14px 16px; background: var(--warn-soft); color: var(--ink); }
.callout strong { color: var(--warn); }

/* code blocks */
pre.code {
  margin: 10px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--gold-soft); color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; line-height: 1.6;
  white-space: pre; overflow-x: auto;
}

/* API reference */
.endpoints { display: grid; gap: 18px; }
.endpoint { padding-top: 18px; border-top: 1px solid var(--line); }
.endpoint:first-child { padding-top: 0; border-top: 0; }
.endpoint-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 6px; }
.endpoint-head code { font-weight: 800; font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.pill { display: inline-block; font-size: .78rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-text); }
.endpoint p { color: var(--muted); }
.fields { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .92rem; color: var(--muted); }
.fields code { color: var(--ink); font-weight: 700; }

/* ---------- polish: api, supply, mining, node ---------- */
:root { --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", "Droid Sans Mono", "DejaVu Sans Mono", monospace; }
code, pre.code, pre.peers, .addr { font-family: var(--font-mono); }
.fields code, .endpoint-head code, .command code { font-weight: 600; }
.steps code { white-space: nowrap; }
@media (max-width: 360px) { .steps code { white-space: normal; } }
.page-head .lead:last-child { margin-bottom: 0; }

/* wrap long lines instead of clipping them; copy still gets the original text */
pre.code { white-space: pre-wrap; overflow-wrap: break-word; font-size: .84rem; }
#datadir .addr { word-break: normal; overflow-wrap: anywhere; }

/* tables: keep a gap after right-aligned number columns */
table.data td.num + td, table.data th.num + th { padding-left: 20px; }
table.data td, table.data th { white-space: nowrap; }
table.data tr.current td:first-child { border-radius: 8px 0 0 8px; }
table.data tr.current td:last-child { border-radius: 0 8px 8px 0; }
table.data tr.current td:first-child { padding-left: 8px; }
.cell-sub { display: none; }

/* pool share: bar scaled to 100% of the column */
table.data th.share { width: 45%; }
td.share { display: flex; align-items: center; gap: 10px; }
.share-track { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--gold-soft); overflow: hidden; min-width: 40px; }
.share-track .share-bar { display: block; height: 100%; margin: 0; min-width: 3px; }
.share-pct { flex: none; min-width: 3.6em; text-align: right; }

/* mining: tall hero next to a 2x2 of small figures */
.figures-tall-hero .stat-hero { grid-row: span 2; justify-content: center; }

/* node: one two-column layout, no gap under the shorter column */
@media (max-width: 860px) {
  .node-layout > .side { display: contents; }
  .node-layout #setup { order: 1; }
  .node-layout #config { order: 2; }
  .node-layout #datadir { order: 3; }
  .node-layout #systemd { order: 4; }
  .node-layout > .side > .card { order: 5; }
  .node-layout { gap: 16px; }
  .figures-tall-hero .stat-hero { grid-row: auto; }
}

@media (max-width: 640px) {

  .page-head { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 12px; }
  .page-head .page-icon { width: 46px; height: 46px; border-radius: 14px; }
  .page-head .page-icon svg { width: 24px; height: 24px; }
  .page-head-text { display: contents; }
  .page-head h1 { align-self: center; margin: 0; font-size: 1.55rem; }
  .page-head .lead, .page-head-text > :not(h1) { grid-column: 1 / -1; }

  /* figures two per row */
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .figures .stat-hero { grid-column: 1 / -1; }
  .figures:has(.stat-hero) > .stat:last-child:nth-child(even),
  .figures:not(:has(.stat-hero)) > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .figures .stat { padding: 16px; }
  .figures .stat .label { font-size: .7rem; }
  .figures .stat-value { font-size: 1.3rem; }
  .figures .stat-hero .stat-value { font-size: 1.9rem; }
  .figures .stat-sub { font-size: .82rem; }

  /* supply table: block height moves under the halving number */
  table.data { font-size: .84rem; }
  table.data .col-block, table.data .col-date { display: none; }
  table.data td.num + td, table.data th.num + th { padding-left: 12px; }
  .card:has(> .table-wrap) { padding-left: 16px; padding-right: 16px; }
  #pools table.data td:first-child { white-space: normal; }
  table.data th, table.data td { padding-right: 8px; }
  table.data th.share { width: 38%; }
  .share-track { min-width: 24px; }
  .cell-sub { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); }

  .calc-row + .calc-row input { flex-basis: 100%; }
  pre.code { font-size: .8rem; padding: 12px 14px; }
}
pre.code.code-scroll { white-space: pre; overflow-wrap: normal; overflow-x: auto; }

/* ================= 2026-10-16: nav dropdowns, hero number fit ================= */
.nav { align-items: center; }
.nav-group { position: relative; }
.nav-group:not([open]) .nav-menu { display: none; }   /* closed menus take no room (they could widen narrow pages) */
.nav summary {
  list-style: none; cursor: pointer; user-select: none;
  color: var(--muted); font-weight: 800; font-size: .95rem;
  padding: 7px 12px 7px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
  transition: transform .15s;
}
.nav-group[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav summary:hover, .nav-group[open] summary { color: var(--ink); background: var(--gold-soft); }
.nav-group.is-current summary { color: var(--on-gold); background: var(--gold); box-shadow: 0 3px 0 var(--edge-gold); }
.nav-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 180px; padding: 6px; display: grid; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.nav .nav-menu a { padding: 9px 12px; border-radius: 10px; font-size: .95rem; box-shadow: none; white-space: nowrap; }
.nav .nav-menu a[aria-current="page"] { color: var(--ink); background: var(--gold-soft); }
@media (max-width: 640px) {
  .nav summary { padding: 6px 8px 6px 9px; font-size: .88rem; }
  /* phones: menus hang from the whole nav bar, centered, so none can run off the screen edge */
  .nav { position: relative; }
  .nav-group { position: static; }
  .nav-menu { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); }
  .nav .nav-menu a { white-space: normal; }
}
@media (max-width: 420px) { .nav summary { padding: 6px 5px 6px 6px; font-size: .84rem; } }
@media (max-width: 380px) { .nav summary { padding: 6px 3px 6px 4px; font-size: .8rem; gap: 3px; } }

/* hero figure scales with its own panel, not the viewport */
.stat-hero { container-type: inline-size; }
.stat-hero .stat-value, .figures .stat-hero .stat-value { font-size: clamp(1.4rem, 13.5cqi, 2.9rem); }
.stat-value .unit { font-size: .6em; letter-spacing: .02em; }
/* invisible bridge over the gap so the hover menu doesn't close on the way down */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.page-head .callout-chat { margin-top: 16px; font-size: .95rem; }

/* ================= 2026-10-17: home faucet form, compact mobile tiles, address + sync tools ================= */
.status.bad { color: var(--bad); background: var(--bad-soft); }
/* home hero: paste an address, go to the faucet */
.hero-band p.lead { margin-bottom: 18px; }
.hero-faucet { display: flex; gap: 10px; max-width: 560px; }
.hero-faucet input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem;
  padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); outline: none;
}
.hero-faucet input:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent); }
.hero-faucet .btn { flex: none; }
.hero-faucet-note { margin-top: 10px; font-size: .92rem; font-weight: 600; color: var(--ink); opacity: .8; }
.hero-faucet-note .bad { color: var(--bad); opacity: 1; }
.hero-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-weight: 700; }
.hero-links a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.hero-band .live-strip { margin-top: 18px; }
@media (max-width: 640px) {
  .hero-faucet { flex-direction: column; margin: 0 auto; }
  .hero-faucet input { text-align: center; }
  .hero-faucet .btn { width: 100%; }
  .hero-links { justify-content: center; }
}
/* home services: icon + title tiles, two per row on phones */
@media (max-width: 640px) {
  .services.services-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .services-4 .service { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 10px; padding: 18px 10px 16px; }
  .services-4 .service p, .services-4 .service .more { display: none; }
  .services-4 .service h2 { font-size: 1rem; margin: 0; line-height: 1.25; }
  .services-4 .service .icon { width: 44px; height: 44px; border-radius: 12px; }
  .services-4 .service .icon svg { width: 22px; height: 22px; }
}
/* address checker */
.addr-form input { flex: 1 1 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.addr-result { display: grid; gap: 8px; margin-top: 16px; }
.addr-result:empty { display: none; }
.addr-result .status { align-self: start; justify-self: start; }
.addr-qr { display: grid; justify-items: center; gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.addr-qr[hidden] { display: none; }
.addr-qr canvas { width: 240px; height: 240px; max-width: 100%; border-radius: 12px; border: 1px solid var(--line); image-rendering: pixelated; }
.addr-qr .addr { max-width: 100%; }
.addr-qr .hero-actions { justify-content: center; gap: 8px; }
.addr-qr a.btn-copy { text-decoration: none; }
/* sync checker */
.sync-form { margin-top: 12px; }
.sync-out { display: grid; gap: 6px; margin-top: 12px; }
.sync-out:empty { display: none; }
.sync-out .status { justify-self: start; }
.addr-qr .btn-copy + a { margin-left: 0; }

/* ================= 2026-10-17: gift cards, vanity, badges, verify, bakery ================= */
/* shared form bits */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label, .check {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: .95rem;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg);
}
.seg label:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.seg input, .check input { accent-color: var(--gold-deep); margin: 0; }
.calc .seg input, .calc .check input { flex: none; width: auto; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.check { border: 0; background: none; padding: 0; font-weight: 600; color: var(--muted); }
.check[hidden] { display: none; }
.calc textarea {
  font: inherit; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); resize: vertical; min-height: 96px;
}
.calc textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.field-label { font-weight: 800; font-size: .9rem; margin-bottom: -8px; }
.verify-form input, .verify-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; }
.verify-form textarea { font-family: inherit; font-size: 1rem; }
.verify-actions { margin-top: 12px; }
.steps-small { gap: 14px; font-size: .95rem; }
.steps-small .btn-copy { margin-top: 6px; }
.bad { color: var(--bad); }

/* vanity */
.prefix-field { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.prefix-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.prefix-fixed { display: grid; place-items: center; padding: 0 4px 0 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; color: var(--muted); }
.calc .prefix-field input { flex: 1; border: 0; background: transparent; box-shadow: none; padding-left: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; }
.vanity-odds { min-height: 1.4em; margin: 0; }
.vanity-progress { margin-top: 18px; }
.vanity-progress[hidden], .vanity-result[hidden] { display: none; }
.vanity-result { display: grid; gap: 14px; justify-items: start; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.vanity-addr { font-size: 1.05rem; }
.vanity-addr strong { color: var(--gold-text); }
.vanity-result canvas { width: 200px; height: 200px; border-radius: 12px; border: 1px solid var(--line); image-rendering: pixelated; }
.key-box { display: grid; gap: 8px; width: 100%; }
.key-box .hero-actions { gap: 8px; }
.vanity-table { width: 100%; }

/* gift cards */
.gift-form { margin-bottom: 20px; }
.gift-print { display: grid; gap: 8px; container-type: inline-size; }
.gift-card {
  --ink-print: #2b2416;
  display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 720px; aspect-ratio: 190 / 70;
  border: 1.5px dashed #b9a77c; border-radius: 10px; overflow: hidden; background: #fff; color: var(--ink-print);
  font-size: min(1.6cqi, 11.5px);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gift-panel { position: relative; padding: 4.5% 5%; min-width: 0; }
.gift-front { display: flex; flex-direction: column; background: linear-gradient(135deg, #fde7a3, #f6c454 60%, #f2b632); border-right: 1.5px dashed #b9a77c; }
.gift-logo { position: absolute; right: 5%; top: 7%; width: 18%; height: auto; }
.gift-kicker { margin: 0; font-weight: 700; font-size: 1.15em; opacity: .75; }
.gift-title { margin: 0; font-family: var(--font-fun); font-weight: 600; font-size: 2.8em; line-height: 1; letter-spacing: -.01em; }
.gift-amount { margin: .15em 0 0; font-weight: 800; font-size: 1.9em; line-height: 1.1; min-height: 1.1em; }
.gift-to { margin: .2em 0 0; font-weight: 700; font-size: 1.15em; }
.gift-msg { margin: .1em 0 0; font-size: 1.05em; font-style: italic; max-width: 70%; }
.gift-addr { margin-top: auto; padding-top: .6em; display: flex; gap: 4%; align-items: flex-end; }
.gift-addr canvas { width: 24%; height: auto; border-radius: 4px; flex: none; }
.gift-addr span, .gift-secret { display: block; font-weight: 800; font-size: .85em; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.gift-addr code, .gift-key code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; word-break: break-all; line-height: 1.3; }
.gift-inside { display: flex; flex-direction: column; gap: 3%; background: #fffdf6; }
.gift-secret { color: #b3261e; opacity: 1; }
.gift-key { display: flex; gap: 4%; align-items: center; }
.gift-key canvas { width: 32%; height: auto; flex: none; border-radius: 4px; }
.gift-key canvas, .gift-key code { filter: blur(6px); transition: filter .2s; }
.gift-key.revealed canvas, .gift-key.revealed code { filter: none; }
.gift-steps { margin: 0; padding-left: 1.3em; font-size: .95em; line-height: 1.35; }
.gift-steps b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.gift-site { margin: auto 0 0; font-weight: 700; font-size: .95em; opacity: .7; }
.gift-fold { font-size: .88rem; }
.gift-actions { margin-top: 18px; }
@media (max-width: 640px) {
  .gift-card { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; font-size: 3.3cqi; }
  .gift-panel { aspect-ratio: 95 / 70; }
  .gift-front { border-right: 0; border-bottom: 1.5px dashed #b9a77c; }
}
@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; }
  .topbar, .site-footer, .no-print, .side { display: none !important; }
  .wrap, .doc-layout, .gift-main { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
  .gift-card { width: 190mm; max-width: none; height: 70mm; aspect-ratio: auto; grid-template-columns: 95mm 95mm; font-size: 3.1mm; border-radius: 0; }
  .gift-print { container-type: normal; }
  .gift-main::before, .gift-main::after { display: none !important; }
  .gift-panel { aspect-ratio: auto; }
  .gift-front { border-right: 1.5px dashed #b9a77c; border-bottom: 0; }
  .gift-key canvas, .gift-key code { filter: none !important; transition: none !important; }
}

/* badges */
.badge-step { margin-top: 26px; }
.badge-picks { display: grid; gap: 10px; }
.badge-pick {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
}
.badge-pick:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.badge-pick input { grid-row: span 2; accent-color: var(--gold-deep); margin: 0; }
.badge-swatch img { display: block; height: auto; max-width: 100%; }
#b-code { margin: 12px 0; min-height: 3em; }

/* bakery */
.oven-card { display: flex; align-items: center; gap: 28px; }
.oven { position: relative; width: 150px; flex: none; aspect-ratio: 1; border-radius: 22px; background: linear-gradient(#5b4a32, #3d3122); box-shadow: inset 0 -6px 0 rgba(0,0,0,.25), var(--shadow); padding: 14px; display: grid; grid-template-rows: 1fr auto; gap: 10px; }
.oven-window { position: relative; border-radius: 12px; background: #1d150b; overflow: hidden; border: 3px solid #8a7351; }
.oven-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,140,30,.85), rgba(255,90,0,.15) 60%, transparent 75%); animation: glow 2.4s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .65; } to { opacity: 1; } }
.oven-loaf { position: absolute; left: 22%; right: 22%; bottom: 14%; height: 34%; border-radius: 50% 50% 18% 18%; background: linear-gradient(#f6c15b, #c47d1a); animation: rise 3s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes rise { from { transform: scaleY(.85); } to { transform: scaleY(1.05); } }
.oven-dial { display: flex; justify-content: center; }
.oven-ring { --p: 0; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--p) * 360deg), #6d5a3f 0); box-shadow: inset 0 0 0 5px #3d3122; transition: background .9s linear; }
.oven-text p { margin: 0; }
.oven-height { font-size: 1.15rem; margin-top: 4px !important; }
.oven-timer { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.oven-timer .muted { font-size: 1rem; font-weight: 600; }
.shelf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 8px; }
.shelf-head .card-title { margin: 0; }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.loaf { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.loaf svg { width: calc(54px * var(--w, 1)); flex: none; }
.loaf-text { display: grid; min-width: 0; font-size: .9rem; color: var(--muted); }
.loaf-height { font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.loaf-height:hover { color: var(--gold-text); text-decoration: underline; }
.loaf-pool { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loaf.fresh { animation: fresh 1.2s ease-out; border-color: var(--gold); }
@keyframes fresh { 0% { transform: translateY(-14px) scale(.9); opacity: 0; background: var(--gold-soft); } 60% { transform: none; opacity: 1; } 100% { background: var(--bg); } }
@media (max-width: 640px) {
  .oven-card { gap: 18px; }
  .oven { width: 104px; padding: 10px; border-radius: 18px; }
  .shelf { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .oven-glow, .oven-loaf, .loaf.fresh { animation: none; } }
@media (max-width: 640px) { .gift-form .calc-row input { flex-basis: 100%; } }
.shelf { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 10px; }
.loaf { padding: 10px 12px; }
.loaf-text { font-size: .85rem; line-height: 1.4; }
.loaf-meta, .loaf-when { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* home: "Fun stuff" row of small tiles */
.fun-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fun-tile {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.fun-tile:hover { color: var(--ink); border-color: var(--gold); transform: translateY(-2px); }
.fun-tile .icon {
  width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), #f7d26a); color: #2b2416; box-shadow: 0 3px 0 var(--edge-gold); transform: rotate(-6deg);
}
.fun-tile .icon svg { width: 20px; height: 20px; }
.fun-text { display: grid; min-width: 0; line-height: 1.3; }
.fun-text strong { font-size: .98rem; }
.fun-text span { font-size: .84rem; color: var(--muted); }
@media (max-width: 1000px) { .fun-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .fun-tile { flex-direction: column; text-align: center; gap: 8px; padding: 14px 8px; }
  .fun-text span { display: none; }
}

/* gift card: click to see it full size */
.gift-print > .gift-card { cursor: zoom-in; }
.gift-print > .gift-card:hover { box-shadow: 0 8px 24px rgba(60, 45, 10, .18); }
.gift-print > .gift-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.link-btn { font: inherit; font-weight: 700; color: var(--gold-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.gift-zoom { width: min(1100px, 96vw); max-width: none; max-height: 94vh; padding: 16px; border: 0; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.gift-zoom::backdrop { background: rgba(28, 22, 11, .7); }
.gift-zoom-bar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.gift-zoom-stage { container-type: inline-size; }
.gift-zoom .gift-card { max-width: none; font-size: 1.6cqi; cursor: default; }
.gift-zoom-note { margin: 10px 0 0; text-align: center; }
@media (max-width: 640px) {
  .gift-zoom { padding: 12px; }
  .gift-zoom .gift-card { font-size: 3.3cqi; }
}
/* small headings inside a nav dropdown (set_nav.py entries with no link) */
.nav .nav-sub { padding: 8px 12px 2px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav .nav-sub:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
/* keyboard users: a "skip to content" link that only shows while focused (2026-10-17 sweep) */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--ink, #1c160b); color: #fff; font-weight: 800; text-decoration: none; transition: top .15s; }
.skip-link:focus-visible { top: 12px; outline: 3px solid var(--gold); outline-offset: 2px; }
/* ---- round 3 (2026-10-17): sign, payment requests, live badges, dev reference, payout tracker, node map, offline ---- */
.offline-pill { margin-top: 12px; }
.key-field { display: flex; gap: 8px; align-items: center; }
.key-field input { flex: 1 1 auto; min-width: 0; }
.sign-result { display: grid; gap: 8px; margin-top: 16px; }
.sign-result .label { margin-top: 4px; }
.calc input.invalid { border-color: var(--bad); }
.req-box { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; }
.req-box summary { cursor: pointer; font-weight: 700; color: var(--gold-text); }
.req-box[open] summary { margin-bottom: 10px; }
.req-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.req-fields #req-amount { grid-column: 1 / -1; }
.req-box p { margin: 8px 0 0; }
.req-summary { margin: 0 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); color: var(--ink); }
.live-badges { display: grid; gap: 10px; margin-top: 14px; }
.live-badge { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.live-badge:first-child { border-top: 0; padding-top: 0; }
.live-badge code { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 14px; padding-bottom: 14px; }
.toc a { font-weight: 700; color: var(--gold-text); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
table.data.ref-table th, table.data.ref-table td { white-space: normal; }
table.data.ref-table tbody th { width: 22%; font-weight: 800; color: var(--ink); padding-right: 16px; }
table.data.ref-table td { padding-right: 12px; }
code.break { overflow-wrap: anywhere; word-break: break-all; }
.vectors { gap: 10px; }
.vectors li { display: grid; gap: 2px; }
.tx-track { display: grid; gap: 6px; margin: 4px 0 10px; }
.tx-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.tx-steps span { height: 8px; border-radius: 999px; background: var(--gold-soft); border: 1px solid var(--line); transition: background .3s; }
.tx-steps span.done { background: var(--gold); border-color: var(--gold-deep); }
.tx-done .tx-steps span.done { background: var(--ok); border-color: var(--ok); }
.tx-text { margin: 0; color: var(--muted); }
.node-map { position: relative; aspect-ratio: 1000 / 394.4; margin: 14px 0 6px; }
.node-land { position: absolute; inset: 0; background: var(--line);
  -webkit-mask: url(/assets/img/world.svg?v=2) center / 100% 100% no-repeat; mask: url(/assets/img/world.svg?v=2) center / 100% 100% no-repeat; }
.node-dots { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.node-dots circle { fill: var(--gold); fill-opacity: .8; stroke: var(--gold-deep); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.node-countries { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; }
.node-countries li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.node-countries .nc-name { flex: 0 0 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-countries strong { min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.node-countries .nc-more { color: var(--muted); }
.node-foot { margin-top: 12px; }
@media (max-width: 640px) {
  .req-fields { grid-template-columns: minmax(0, 1fr); }
  .live-badge { grid-template-columns: 1fr auto; }
  .live-badge img { grid-column: 1 / -1; }
  .node-countries { grid-template-columns: minmax(0, 1fr); }
  table.data.ref-table tbody th { width: 34%; }
}
@media (max-width: 640px) {
  table.data.ref-table thead { display: none; }
  table.data.ref-table tr { display: block; padding: 10px 0; border-top: 1px solid var(--line); }
  table.data.ref-table th, table.data.ref-table td { display: block; width: auto; border: 0; padding: 2px 0; }
  table.data.ref-table tbody th { width: auto; }
  table.data.ref-table td + td::before { content: "Testnet: "; color: var(--muted); font-weight: 700; }
}
/* ---- round 4 (2026-10-17): halving, activity, pool history, real supply, uptime, decoder, redeem ---- */
.charts.charts-1 { grid-template-columns: minmax(0, 1fr); }
.chart .col.on .mark { opacity: .75; }
.legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
#pool-history .shelf-head .range-tabs { margin: 0; }
.halving-hero { text-align: center; display: grid; justify-items: center; gap: 4px; padding-top: 28px; padding-bottom: 28px;
  background: linear-gradient(135deg, var(--hero-bg), var(--card)); }
.halving-hero .label { margin: 0; }
.hv-count { margin: 4px 0 0; font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; font-size: clamp(2.4rem, 9vw, 4.4rem); line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.hv-unit { display: block; font-size: 1rem; font-family: "Nunito", system-ui, sans-serif; font-weight: 700; color: var(--muted); }
.hv-time { margin: 8px 0 0; font-size: 1.25rem; font-weight: 800; color: var(--gold-text); }
.hv-meter { width: min(100%, 520px); }
.halving-hero .hero-actions { justify-content: center; margin-top: 10px; }
.hv-compare .stat-hero { grid-column: auto; }
.hv-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hv-timeline li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; font-size: .93rem; }
.hv-timeline .hv-n { font-weight: 800; color: var(--muted); text-align: right; }
.hv-timeline .hv-date { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hv-timeline li.next { background: var(--gold-soft); font-weight: 800; }
.hv-timeline li.next .hv-n { color: var(--gold-text); }
.hv-timeline li.future { color: var(--muted); }
.loaf.halving-loaf { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 12px; }
.up-services { display: grid; gap: 20px; }
.up-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.up-head .card-title { margin: 0; }
.up-days { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 34px; }
.up-days span { border-radius: 3px; background: var(--ok); }
.up-days span.some { background: var(--gold); }
.up-days span.bad { background: var(--bad); }
.up-days span.none { background: var(--line); }
.up-axis { display: flex; justify-content: space-between; margin-top: 4px; }
.up-pct { margin: 8px 0 0; }
.tx-out { display: grid; gap: 20px; }
.tx-out:empty { display: none; }
.tx-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0 0 12px; }
.tx-facts dt { font-weight: 800; color: var(--ink); }
.tx-facts dd { margin: 0; color: var(--muted); min-width: 0; }
.tx-facts a { color: var(--gold-text); }
.tx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: tx; }
.tx-list > li { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; min-width: 0; }
.tx-list > li:first-child { border-top: 0; padding-top: 0; }
.tx-list p { margin: 0; }
.tx-out-head { display: flex; justify-content: space-between; gap: 12px; }
.tx-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-raw summary { cursor: pointer; color: var(--gold-text); font-weight: 700; font-size: .88rem; }
.tx-raw code { display: block; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.shot { margin: 12px 0 4px; }
.shot img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.redeem-steps { gap: 26px; }
.redeem-check .addr-form { display: flex; flex-wrap: wrap; gap: 10px; }
.redeem-check .addr-form input { flex: 1 1 260px; }
@media (max-width: 640px) {
  .tx-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tx-facts dd { margin-bottom: 8px; }
  .hv-timeline li { grid-template-columns: 1.6em 1fr; }
  .hv-timeline .hv-date { grid-column: 2; }
  .up-days { gap: 2px; height: 28px; }
}

/* ================= 2026-10-17: dropdown section headings vs links ================= */
/* Headings: small caps label with a gold mark, not clickable. Links: indented under them, full ink. */
.nav .nav-sub {
  display: flex; align-items: center; gap: 8px; cursor: default;
  padding: 8px 12px 4px; font-size: .7rem; color: var(--muted);
}
.nav .nav-sub::before { content: ""; width: 10px; height: 3px; border-radius: 2px; background: var(--gold); flex: none; }
.nav .nav-sub:not(:first-child) { margin-top: 8px; padding-top: 12px; }
.nav .nav-menu .nav-sub ~ a { padding-left: 30px; }
.nav .nav-menu a { color: var(--ink); font-weight: 600; }
.nav .nav-menu a:hover { background: var(--gold-soft); }
.nav .nav-menu a[aria-current="page"] { color: var(--on-gold); background: var(--gold); }
.chart .col .dot { opacity: 0; }
.chart .col.on .dot { opacity: 1; }

/* ================= 2026-10-17: /market/ ================= */
.mk-hero { display: grid; grid-template-columns: 1fr auto; gap: 18px 32px; align-items: center; }
.mk-price { margin: 4px 0 6px; font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mk-sats { font-size: .45em; color: var(--muted); font-weight: 700; margin-left: 6px; white-space: nowrap; }
.mk-facts { display: grid; gap: 10px 24px; margin: 0; }
.mk-hero .mk-facts { grid-template-columns: repeat(3, auto); }
.mk-facts dt { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.mk-facts dd { margin: 2px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.mk-facts dd small { font-weight: 600; color: var(--muted); font-size: .85rem; }
.mk-method { grid-column: 1 / -1; margin: 0; }
.mk-markets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 18px; }
.mk-markets .card { margin: 0; }
.mk-market .mk-facts { grid-template-columns: 1fr 1fr; margin: 14px 0 18px; }
.mk-calc { margin: 14px 0; gap: 10px; }
.mk-calc select { flex: 0 1 auto; }
.mk-out { font-size: 1.05rem; line-height: 1.5; min-height: 3em; }
.mk-book td { padding-top: 5px; padding-bottom: 5px; }
.mk-book tr.ask td:first-child { color: var(--bad); font-weight: 700; }
.mk-book tr.bid td:first-child { color: var(--ok); font-weight: 700; }
.mk-book tr.mk-mid td { text-align: center; color: var(--muted); font-size: .85rem; background: var(--gold-soft); border-radius: 8px; padding: 6px; }
#ch-price .range-tabs { margin: 0 0 12px; }
#mk-book-card .range-tabs { margin: 0 0 8px; }
.chart.chart-vol { min-height: 130px; }
.chart-sub { margin: 14px 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; }
@media (max-width: 720px) {
  .mk-hero { grid-template-columns: minmax(0, 1fr); }
  .mk-hero .mk-facts { grid-template-columns: 1fr 1fr; }
}

/* ================= 2026-10-17: translated guides ================= */
.lang-switch { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 10px; font-size: .85rem; }
.lang-switch a { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-weight: 700; }
.lang-switch a:hover { color: var(--ink); background: var(--gold-soft); }
.lang-switch a[aria-current="page"] { color: var(--ink); border-color: var(--gold); background: var(--gold-soft); }
.price-card .price-more { align-self: center; white-space: nowrap; }
@media (max-width: 640px) { .price-card { grid-template-columns: minmax(0, 1fr); } .price-card .price-more { justify-self: start; } }

/* ================= 2026-10-17: play (block art, garden, miner, lotto) ================= */
.plain { margin: 0; padding-left: 1.2em; }
.plain li { margin: 6px 0; color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; word-break: break-all; }
.linkish { background: none; border: 0; padding: 4px 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; }
.linkish:hover { color: var(--bad); }
.ok { color: var(--ok); }
.warn { color: var(--bad); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow); z-index: 50; font-weight: 600; max-width: calc(100vw - 32px); margin: 0; text-align: center; }
table.kv { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.kv th { text-align: left; font-weight: 700; color: var(--muted); padding: 7px 14px 7px 0; white-space: nowrap; vertical-align: top; width: 1%; border-top: 1px solid var(--line); }
table.kv td { padding: 7px 0; border-top: 1px solid var(--line); word-break: break-all; }
table.kv tr:first-child th, table.kv tr:first-child td { border-top: 0; }
.field { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.field input:not([type="range"]) { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 1rem; background: var(--card); color: var(--ink); width: 100%; }
.field input[type="range"] { width: 100%; accent-color: var(--gold-deep); }

/* block art */
.garlic-art { display: block; width: 100%; height: auto; border-radius: 18%; }
.art-feature { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; margin-bottom: 16px; }
.art-big { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 22px; width: 180px; }
.art-big:hover .garlic-art { filter: brightness(1.04); }
.art-text p { margin: 0 0 4px; }
.art-name { font-size: 1.35rem; font-weight: 800; }
.art-hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; color: var(--muted); word-break: break-all; margin-top: 8px !important; }
.art-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.art-tile { padding: 2px; border: 2px solid transparent; border-radius: 16px; background: none; cursor: pointer; display: grid; gap: 2px; font: inherit; color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; transition: transform .15s; }
.art-tile[aria-pressed="true"] { border-color: var(--gold); }
.art-tile.rare .garlic-art { box-shadow: 0 0 0 2px var(--gold-deep); }
.art-tile:hover { transform: translateY(-2px); }
@media (max-width: 640px) { .art-feature { grid-template-columns: 120px 1fr; gap: 14px; } .art-big { width: 120px; } .art-name { font-size: 1.1rem; } }

/* garden */
.garden-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.garden-clock p { margin: 0; max-width: 60ch; }
.garden-height { font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.plots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plot { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); text-align: center; align-content: start; }
.plot-art svg { width: 100%; max-width: 160px; margin: 0 auto; display: block; }
.plot-art.ready .garlic-art { animation: pop .6s ease-out; }
.plot-text { display: grid; gap: 4px; }
.plot-text strong { font-size: 1.05rem; }
.plot-meter { display: block; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 4px auto; width: 100%; }
.plot-meter i { display: block; height: 100%; background: linear-gradient(90deg, #5a9a4a, var(--gold)); border-radius: 999px; transition: width .6s; }
.plot-actions { display: grid; gap: 4px; justify-items: center; }
.plot .btn { justify-self: center; }
.pantry { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pantry li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); font-size: .9rem; }
.pantry li .garlic-art { width: 56px; flex: none; }
.pantry li > span { display: grid; min-width: 0; }
@keyframes pop { from { transform: scale(.85); } to { transform: none; } }
@media (max-width: 640px) { .plots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .plot { padding: 10px; } }

/* miner */
.mine-controls { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 14px 18px; align-items: end; margin-bottom: 16px; }
.mine-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.mine-stats div, .lotto-facts div { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.mine-stats dt, .lotto-facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; }
.mine-stats dd, .lotto-facts dd { margin: 2px 0 0; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mine-progress { --p: 0; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.mine-progress i { display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--gold), var(--gold-deep)); transition: width .3s; }
.mine-rig.mining .mine-progress i { animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .55; } to { opacity: 1; } }
.mine-hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; word-break: break-all; margin: 10px 0 0; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.found-card { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; border-color: var(--gold); background: var(--gold-soft); }
.found-text p { margin: 0 0 8px; }
@media (max-width: 720px) { .mine-controls { grid-template-columns: minmax(0, 1fr); } .mine-stats { grid-template-columns: 1fr 1fr; } .found-card { grid-template-columns: minmax(0, 1fr); } .found-art { max-width: 200px; } }
@media (prefers-reduced-motion: reduce) { .mine-rig.mining .mine-progress i, .plot-art.ready .garlic-art { animation: none; } }

/* lotto */
.lotto-top { display: grid; grid-template-columns: auto 1fr; gap: 16px 32px; align-items: center; margin-bottom: 16px; }
.lotto-prize p { margin: 0; }
.lotto-amount { font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; line-height: 1.1; }
.lotto-amount .unit { font-size: .45em; color: var(--muted); font-weight: 700; }
.lotto-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.lotto-form { display: flex; gap: 10px; flex-wrap: wrap; }
.lotto-form input { flex: 1 1 280px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 1rem; background: var(--card); color: var(--ink); min-width: 0; }
.lotto-msg { margin: 10px 0 6px; font-weight: 600; min-height: 1.4em; }
.lotto-msg.ok { color: var(--ok); }
.lotto-msg.warn { color: var(--bad); }
.lotto-scheduled { border-color: var(--gold); background: var(--gold-soft); }
.lotto-result { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; }
.lotto-result-text p { margin: 0 0 8px; }
.lotto-winner { font-weight: 700; word-break: break-all; }
.lotto-hash { font-size: .75rem; color: var(--muted); }
#history tr.you td { background: var(--gold-soft); }
@media (max-width: 720px) { .lotto-top { grid-template-columns: minmax(0, 1fr); } .lotto-result { grid-template-columns: minmax(0, 1fr); } .lotto-result-art { max-width: 180px; } }
.found-card[hidden], .lotto-result[hidden], .lotto-scheduled[hidden], .toast[hidden] { display: none; }
@media (max-width: 480px) { .lotto-facts { grid-template-columns: minmax(0, 1fr); } .lotto-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .lotto-facts dd { font-size: 1rem; text-align: right; } }
.lotto-form .g-recaptcha { flex: 0 0 auto; }
/* lotto: prize on its own row, the three facts as equal cards underneath (they were squeezed beside a long prize note) */
.lotto-top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lotto-prize .muted { max-width: 60ch; }
.lotto-facts dt { white-space: nowrap; }
.lotto-facts dd { white-space: nowrap; font-size: 1.2rem; }
@media (min-width: 1000px) { .lotto-top { grid-template-columns: minmax(0, 1fr) 480px; align-items: center; } }

/* ================= 2026-10-17: oven clicker, flappy garlic, jackpot, certificate ================= */
.jackpot-hit { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--gold-soft); border: 2px solid var(--gold); color: var(--ink); font-weight: 600; animation: fresh 1.2s ease-out; }
.jackpot-hit strong { color: var(--gold-text); font-size: 1.2em; }
.jackpot-card { border-color: var(--gold); }
/* oven */
.oven-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.oven-panel { text-align: center; position: sticky; top: 80px; }
.oven-count { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.oven-count small { display: block; font-size: .9rem; color: var(--muted); font-weight: 700; }
.oven-btn { position: relative; width: min(100%, 260px); margin: 16px auto; border: 0; border-radius: 28px; background: linear-gradient(#5b4a32, #3d3122); box-shadow: inset 0 -8px 0 rgba(0,0,0,.25), var(--shadow); cursor: pointer; padding: 18px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.oven-btn:active, .oven-btn.pop { transform: scale(.96); }
.oven-btn .oven-window { display: block; width: 100%; height: 170px; border-radius: 16px; background: #1d150b; border: 4px solid #8a7351; position: relative; overflow: hidden; }
.oven-btn .oven-window::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,140,30,.9), rgba(255,90,0,.15) 60%, transparent 75%); }
.oven-btn .oven-window::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 14%; height: 36%; border-radius: 50% 50% 18% 18%; background: linear-gradient(#f6c15b, #c47d1a); }
.oven-btn .oven-label { color: #fff3d0; font-weight: 800; font-size: 1.1rem; }
.oven-btn .float { position: absolute; color: var(--gold-text); font-weight: 800; pointer-events: none; animation: floatup .9s ease-out forwards; transform: translate(-50%, -50%); }
@keyframes floatup { to { transform: translate(-50%, -140px); opacity: 0; } }
.block-bonus { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--gold-soft); border: 1px solid var(--gold); font-weight: 700; }
.block-bonus.show { animation: fresh 1s ease-out; }
.shop { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shop-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); opacity: .6; }
.shop-item.can { opacity: 1; }
.shop-item .shop-text { display: grid; min-width: 0; }
.shop-item .shop-text span { line-height: 1.35; }
.shop-owned { color: var(--gold-text); }
.shop-buy { display: grid; justify-items: center; gap: 2px; flex: none; }
.shop-item .btn { padding: 8px 12px; font-size: .85rem; min-width: 130px; }
.shop-item:not(.can) .btn { background: var(--line); color: var(--muted); box-shadow: none; border-color: var(--line); }
.upgrades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.upgrade { width: 100%; text-align: left; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font: inherit; color: var(--ink); cursor: pointer; opacity: .6; }
.upgrade.can { opacity: 1; border-color: var(--gold); }
.upgrade.can:hover { background: var(--gold-soft); }
.upgrade .shop-cost { color: var(--gold-text); font-weight: 700; }
.achievements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.achievements li { padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--line); display: grid; opacity: .55; }
.achievements li.got { opacity: 1; border: 1px solid var(--gold); background: var(--gold-soft); }
.oven-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0; }
.oven-stats div { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.oven-stats dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; }
.oven-stats dd { margin: 0; font-weight: 800; }
.oven-actions { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
@media (max-width: 760px) { .oven-stage { grid-template-columns: minmax(0, 1fr); } .oven-panel { position: static; } }
/* flappy */
.flappy-stage { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; justify-content: center; }
.flappy-frame { position: relative; width: 100%; max-width: 360px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); touch-action: none; }
.flappy-frame canvas { display: block; width: 100%; height: auto; }
.flappy-over { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: rgba(43,36,22,.72); color: #fff; padding: 20px; gap: 8px; }
.flappy-over h2 { margin: 0; font-size: 1.6rem; }
.flappy-over .big { font-size: 3rem; font-weight: 800; line-height: 1; }
.flappy-over p { margin: 0; }
.flappy-over form { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.flappy-over input { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font: inherit; width: 150px; background: #fff; color: #2b2416; }
.flappy-over .btn { padding: 8px 14px; }
.board { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.board li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.board li:first-child { border-top: 0; }
.board li span::before { counter-increment: rank; content: counter(rank) '. '; color: var(--muted); font-weight: 700; }
.board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .flappy-stage { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .board-grid { grid-template-columns: minmax(0, 1fr); } }
/* certificate */
.cert { --ink: #2b2416; position: relative; background: #fffdf5; border: 3px double var(--gold-deep); border-radius: 6px; padding: 28px 32px; max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 170px; gap: 24px; align-items: center; box-shadow: var(--shadow); }
.cert::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--gold); border-radius: 4px; pointer-events: none; }
.cert-title { font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-text); font-weight: 800; margin: 0 0 6px; }
.cert h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 14px; line-height: 1.15; }
.cert p { margin: 0 0 10px; line-height: 1.5; }
.cert .cert-addr { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; word-break: break-all; font-weight: 700; }
.cert .cert-amount { font-size: 1.6rem; font-weight: 800; }
.cert-art { text-align: center; font-size: .72rem; color: var(--muted); }
.cert-art .garlic-art { border-radius: 14px; margin-bottom: 6px; }
.cert-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .7rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.cert-foot .mono { font-size: .68rem; }
.cert-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 16px 0 0; }
@media (max-width: 560px) { .cert { grid-template-columns: minmax(0, 1fr); padding: 20px; } .cert-art { order: -1; } }
/* print only the certificate, and only on the page that has one (an unscoped version blanked gift-card printing) */
@media print { body:has(.cert) * { visibility: hidden; } body:has(.cert) .cert, body:has(.cert) .cert * { visibility: visible; } .cert { position: absolute; left: 0; top: 0; right: 0; margin: 0; box-shadow: none; } .cert-actions { display: none; } }
.flappy-over[hidden] { display: none; }

/* the hidden attribute always wins, even over display: flex/grid rules above */
[hidden] { display: none !important; }

/* ================= 2026-10-17: roulette, 2048, whack, play hub, theme toggle ================= */
.theme-btn { margin-left: 8px; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px; width: 34px; height: 34px; display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.theme-btn:hover { color: var(--ink); border-color: var(--gold); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .auto { display: none; }
:root[data-theme] .theme-btn .auto { display: none; }
.theme-btn[data-mode="auto"] .auto { display: inline; }
.theme-btn[data-mode="light"] .sun, .theme-btn[data-mode="dark"] .moon, .theme-btn[data-mode="auto"] .half { display: inline; }
.theme-btn .sun, .theme-btn .moon, .theme-btn .half { display: none; }
/* roulette */
.wheel { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 6px 0 12px; }
.digit { position: relative; aspect-ratio: 1; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); font: inherit; cursor: pointer; display: grid; place-items: center; overflow: hidden; padding: 0; color: var(--ink); }
.digit strong { font-size: clamp(1.1rem, 3.5vw, 1.6rem); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; z-index: 1; }
.digit .crowd { position: absolute; right: 5px; bottom: 3px; font-size: .65rem; color: var(--muted); z-index: 1; }
.digit::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--crowd, 0) * 100%); background: var(--gold-soft); transition: height .4s; }
.digit:hover { border-color: var(--gold); }
.digit.picked { border-color: var(--gold-deep); background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow); }
.digit.picked::after { background: rgba(0,0,0,.08); }
.roulette-name { max-width: 320px; margin-top: 6px; }
.ball { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--ink); color: var(--card); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; }
.ball.big { width: 64px; height: 64px; font-size: 1.8rem; }
.reveal { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 18px; border-radius: var(--radius); background: var(--card); border: 2px solid var(--line); box-shadow: var(--shadow); margin-bottom: 20px; font-weight: 700; animation: fresh 1s ease-out; }
.reveal.hit { border-color: var(--ok); background: var(--ok-soft); }
.reveal.miss { border-color: var(--line); }
.roulette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.roulette-facts { grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.spins { list-style: none; margin: 0; padding: 0; }
.spins li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.spins li:first-child { border-top: 0; }
.spins li em { font-style: normal; color: var(--muted); text-align: right; }
.spins li.hit em { color: var(--ok); font-weight: 700; }
.spins li.open em { color: var(--gold-text); }
.spins li strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 860px) { .roulette-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .wheel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 2048 */
.g2048-stage { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.g2048-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; margin-bottom: 10px; }
.g2048-score { min-width: 0; padding: 8px 10px; }
.g2048-score .label { font-size: .7rem; line-height: 1.2; }
.g2048-head .btn { grid-column: span 2; align-self: stretch; }
.g2048-score { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: grid; }
.g2048-score strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.g2048-head .btn { align-self: center; }
.g2048-frame { position: relative; max-width: 400px; border-radius: 16px; overflow: hidden; }
.g2048-board { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px; background: #8a7351; border-radius: 16px; touch-action: none; user-select: none; }
.g2048-board .cell { aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,.18); }
.g2048-tiles { position: absolute; inset: 8px; pointer-events: none; }
.tile { position: absolute; left: 0; top: 0; width: calc(25% - 6px); height: calc(25% - 6px); transition: transform .11s ease-in-out; color: #2b2416; z-index: 1; }
.tile-in { width: 100%; height: 100%; border-radius: 10px; background: var(--tbg, #f7f1e3); display: grid; place-content: center; text-align: center; box-shadow: var(--tring, none); }
.tile strong { font-size: clamp(1.1rem, 5vw, 1.8rem); line-height: 1; }
.tile span { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75; margin-top: 2px; }
.tile.new .tile-in { animation: tilein .18s ease-out; }
.tile.pop { z-index: 2; } .tile.pop .tile-in { animation: tilepop .2s ease-in-out; }
@keyframes tilein { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes tilepop { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }
.tile.v2 { --tbg: #f7f1e3; } .tile.v4 { --tbg: #f2e6cf; } .tile.v8 { --tbg: #f6d9a0; } .tile.v16 { --tbg: #f3c56f; } .tile.v32 { --tbg: #f2b632; }
.tile.v64 { --tbg: #e09a12; color: #fff; } .tile.v128 { --tbg: #c47d1a; color: #fff; } .tile.v256 { --tbg: #a8612a; color: #fff; } .tile.v512 { --tbg: #8a5410; color: #fff; }
.tile.v1024 { --tbg: #5a9a4a; color: #fff; } .tile.v2048 { --tbg: #2b2416; color: #fff4d4; --tring: 0 0 0 3px #f2b632 inset; }
.tile.v2048 .tile-in { background: var(--tbg) url(/assets/img/logo.svg) center / 78% no-repeat; }
.tile.v2048 strong, .tile.v2048 span { text-shadow: 0 1px 3px rgba(0,0,0,.8); } .tile.v4096, .tile.v8192 { --tbg: #2b2416; color: #f2b632; }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile.new .tile-in, .tile.pop .tile-in { animation: none; } }
.touch-pad { display: none; justify-items: center; gap: 6px; margin-top: 12px; }
.touch-pad div { display: flex; gap: 6px; }
.touch-pad button { width: 56px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 1.1rem; cursor: pointer; touch-action: manipulation; }
@media (hover: none), (max-width: 760px) { .touch-pad { display: grid; } }
/* whack */
.whack-frame { position: relative; max-width: 400px; border-radius: 16px; overflow: hidden; background: linear-gradient(#8fbf6a, #5a9a4a); padding: 14px; }
.holes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hole { position: relative; aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; overflow: hidden; border-radius: 50% / 40%; }
.hole .soil { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 38%; border-radius: 50%; background: radial-gradient(#8a6a3f, #5e4425); box-shadow: inset 0 -6px 0 rgba(0,0,0,.2); z-index: 2; }
.hole .clove { position: absolute; left: 25%; right: 25%; bottom: 20%; height: 70%; transform: translateY(110%); transition: transform .12s ease-out; z-index: 1; }
.hole.up .clove { transform: translateY(0); }
.hole .clove svg { width: 100%; height: 100%; }
.hole .skin { fill: #f7f1e3; stroke: #b9a98a; stroke-width: 3; }
.hole .lines { fill: none; stroke: #d9cdb2; stroke-width: 2.5; }
.hole .root { fill: none; stroke: #5a9a4a; stroke-width: 3; stroke-linecap: round; }
.hole.gold .skin { fill: #f8d464; stroke: #a86c00; } .hole.gold .lines { stroke: #e0a92a; }
.hole.rotten .skin { fill: #4a3630; stroke: #140c09; } .hole.rotten .lines { stroke: #2b1c17; } .hole.rotten .root { stroke: #8a5aa0; }
.hole.bonk .clove { transform: translateY(20%) scale(.9); }
.hole .float { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 800; font-size: 1.3rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); animation: floatup .7s ease-out forwards; z-index: 3; pointer-events: none; }
.hole .float.bad { color: #ff8a80; }
/* breadris */
.breadris-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.breadris-frame { position: relative; width: 240px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.breadris-frame canvas { display: block; width: 240px; height: 480px; }
.breadris-side { display: grid; gap: 16px; }
.breadris-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.breadris-pad { display: grid; }
.breadris-pad button { min-width: 56px; }
@media (max-width: 640px) { .breadris-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; } .breadris-side { width: 100%; } .breadris-facts { grid-template-columns: 1fr 1fr; } }
@media (hover: hover) and (min-width: 641px) { .breadris-pad { display: none; } }
/* play hub */
.play-live { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.play-live > div { display: grid; gap: 6px; justify-items: start; }
.play-live p { margin: 0; }
.play-big { font-size: 1.8rem; font-weight: 800; }
.play-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.play-card { text-decoration: none; color: inherit; display: grid; align-content: start; gap: 6px; transition: transform .15s, border-color .15s; }
.play-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.play-card h2 { margin: 0; font-size: 1.1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.play-card p { margin: 0; }
.play-card .pill { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: var(--on-gold); }
.play-card.coins { border-color: var(--gold); }
.play-best { color: var(--gold-text); font-weight: 700; }
.play-board { font-size: .85rem; margin-top: 4px; }
@media (max-width: 640px) { .play-live { grid-template-columns: minmax(0, 1fr); } }
.flappy-over { z-index: 5; }

@media (max-width: 760px) { .g2048-stage, .whack-stage { grid-template-columns: minmax(0, 1fr); } }

/* arcade round 4: landscape games (Garlic Run, Hash Sniper) get a wider frame */
.arcade-wide { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
.arcade-wide .flappy-frame { max-width: 480px; }
@media (max-width: 760px) { .arcade-wide { grid-template-columns: minmax(0, 1fr); } }
.flappy-frame canvas { touch-action: none; -webkit-user-select: none; user-select: none; }
/* the results overlay must fit a 480×320 canvas that is only ~240 px tall on a phone */
.arcade-wide .flappy-over { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; justify-content: safe center; overflow: auto; gap: 4px; padding: 10px 16px; }
.arcade-wide .flappy-over h2 { font-size: 1.15rem; }
.arcade-wide .flappy-over .big { font-size: 1.9rem; }
.arcade-wide .flappy-over p { font-size: .9rem; }
.arcade-wide .flappy-over form { margin-top: 2px; }

/* dark theme chosen with the toggle: the same component rules as the OS dark media blocks above */
:root[data-theme="dark"] {
    --dot: rgba(244, 192, 79, .13);
    --hero-grad: linear-gradient(135deg, #4a3810 0%, #3a2c0e 60%, #2b210b 100%);
    --edge-gold: #8a5a06;
  }
:root[data-theme="dark"] .hero-band::before, :root[data-theme="dark"] .hero-band::after { background: rgba(255, 210, 100, .06); }
:root[data-theme="dark"] .hero-band .eyebrow { background: rgba(255, 207, 92, .12); color: var(--gold-text); }
:root[data-theme="dark"] .balance-card .label { color: var(--gold-text); }
  :root[data-theme="dark"] .balance-card::after { background: rgba(255, 210, 100, .06); }
:root[data-theme="dark"] .stat-hero .label { color: var(--gold-text); }
:root[data-theme="dark"] body {
    background-image:
      radial-gradient(ellipse 90% 520px at 50% -120px, rgba(242, 182, 50, .16), transparent 70%),
      radial-gradient(circle at 2px 2px, var(--dot) 2px, transparent 0);
    background-size: 100% 100%, 26px 26px;
    background-repeat: no-repeat, repeat;
  }
:root[data-theme="dark"] { --chart: #c08a17; }
:root[data-theme="dark"] .live-strip { background: rgba(255, 207, 92, .12); }
  :root[data-theme="dark"] .live-strip:hover { background: rgba(255, 207, 92, .2); }
/* Super Garlic: touch pad and tools */
.super-pad { display: none; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; touch-action: none; }
.super-pad-left, .super-pad-right { display: flex; gap: 8px; }
.super-pad button { width: 64px; height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 800; font-size: 1.1rem; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.super-pad-right button { width: 110px; }
.super-pad button.on { background: var(--gold, #f2b632); color: #2b2416; }
@media (hover: none), (max-width: 760px) { .super-pad { display: flex; } }
.super-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.super-tools .btn { padding: 8px 12px; }

/* polish pass: medals, Garlicoin in whack, 2048 floats and bumps, hurry-up */
.medal { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0; font-weight: 800; }
.medal img { width: 36px; height: 36px; }
.medal.silver img { filter: grayscale(1) brightness(1.25); } .medal.bronze img { filter: sepia(1) hue-rotate(-25deg) saturate(1.6) brightness(.85); }
.hole .gcoin { display: none; width: 100%; height: 100%; }
.hole.gold .clove svg { display: none; } .hole.gold .gcoin { display: block; }
.holes.thump { animation: thump .12s ease-out; }
@keyframes thump { 50% { transform: translateY(2px); } }
.whack-frame.hurry { animation: hurry .5s ease-in-out infinite alternate; }
@keyframes hurry { to { box-shadow: 0 0 0 4px #ff8a80 inset; } }
.whack-combo strong { color: #966000; min-height: 1.3em; }
.g2048-float { position: absolute; left: 0; top: 0; width: calc(25% - 6px); height: calc(25% - 6px); display: grid; place-content: center; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; z-index: 3; animation: floatup .8s ease-out forwards; }
.g2048-score strong.bump { animation: bump .25s ease-out; }
@keyframes bump { 50% { transform: scale(1.25); color: #a86c00; } }
.g2048-board.party { animation: party 1s ease-in-out 2; }
@keyframes party { 50% { box-shadow: 0 0 0 6px #f2b632, 0 0 40px #f2b632; } }

/* round two: 2048 tight board, whack hammer, fever, swarm banner, dirt */
.g2048-board.tight { box-shadow: 0 0 0 3px #ff8a80; }
@media (hover: hover) { .whack-frame { cursor: none; } }
.hammer { position: absolute; width: 44px; height: 44px; margin: -36px 0 0 -6px; pointer-events: none; opacity: 0; z-index: 6; transform-origin: 10% 90%; transition: opacity .15s; }
.hammer.show { opacity: 1; }
.hammer::before { content: ""; position: absolute; left: 6px; top: 16px; width: 6px; height: 30px; background: #8a5410; border-radius: 3px; transform: rotate(-35deg); }
.hammer::after { content: ""; position: absolute; left: 10px; top: 0; width: 30px; height: 16px; background: linear-gradient(#d9a866, #a8702f); border: 2px solid #6b4a2a; border-radius: 5px; transform: rotate(-35deg); }
.hammer.swing { animation: swing .15s ease-out; }
@keyframes swing { 0% { transform: rotate(0); } 40% { transform: rotate(-55deg); } 100% { transform: rotate(0); } }
.whack-frame.fever { animation: feverglow .4s ease-in-out infinite alternate; }
@keyframes feverglow { from { box-shadow: 0 0 0 4px #f2b632 inset; } to { box-shadow: 0 0 0 10px #ffe28a inset; } }
.whack-banner { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-weight: 800; font-size: 1.6rem; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); pointer-events: none; z-index: 6; animation: floatup .9s ease-out forwards; }
.hole .dirt { position: absolute; left: 50%; top: 60%; width: 6px; height: 6px; border-radius: 50%; background: #6b4a2a; pointer-events: none; z-index: 3; animation: dirt .6s ease-out forwards; }
@keyframes dirt { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* bigger games on big screens: the canvas scales to its column, capped by the window height in the script */
@media (min-width: 761px) {
  /* the score card always keeps at least 300px; the game shrinks first */
  .flappy-stage { grid-template-columns: minmax(0, 560px) minmax(300px, 1fr); }
  .flappy-frame { max-width: 560px; }
  .arcade-wide { grid-template-columns: minmax(0, 820px) minmax(300px, 1fr); }
  .arcade-wide .flappy-frame { max-width: 820px; }
  .g2048-stage, .whack-stage { grid-template-columns: minmax(0, 520px) minmax(300px, 1fr); }
  .g2048-frame, .whack-frame { max-width: 520px; }
  .arcade-wide .flappy-over { gap: 8px; padding: 20px; } .arcade-wide .flappy-over h2 { font-size: 1.6rem; } .arcade-wide .flappy-over .big { font-size: 3rem; } .arcade-wide .flappy-over p { font-size: 1rem; }
}

/* mining page: miner cards */
.miner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.miner { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.miner h3 { margin: 0; font-size: 1.05rem; }
.miner p { margin: 0; }
.miner pre { margin: 4px 0 0; padding: 10px 12px; background: var(--gold-soft); border-radius: 8px; font-size: .82rem; white-space: pre-wrap; word-break: break-all; }
.miner pre code { background: none; padding: 0; }
/* Garlic Dash 3D */
.dash-frame { aspect-ratio: 16 / 9; background: #fde7a3; }
.dash-frame canvas { display: block; width: 100%; height: auto; touch-action: none; }
.dash-hud { position: absolute; left: 12px; top: 10px; color: #2b2416; font-weight: 800; font-size: 1.6rem; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.6); pointer-events: none; z-index: 2; display: grid; gap: 4px; }
.dash-hud .dash-sub { font-size: .85rem; font-weight: 700; opacity: .85; display: flex; align-items: center; gap: 4px; }
.dash-coin { width: 14px; height: 14px; vertical-align: middle; }
.dash-banner { position: absolute; left: 0; right: 0; top: 22%; text-align: center; font-weight: 800; font-size: 2rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); opacity: 0; pointer-events: none; z-index: 3; }
.dash-banner.show { animation: dashbanner 1.4s ease-out forwards; }
@keyframes dashbanner { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.dash-intro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; background: rgba(43,36,22,.45); z-index: 4; padding: 16px; gap: 6px; pointer-events: none; }
.dash-intro h2 { margin: 0; font-size: 2rem; text-shadow: 0 2px 8px rgba(0,0,0,.5); } .dash-intro p { margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.dash-intro[hidden] { display: none; }

/* Dash lane radar */
.dash-radar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 2; pointer-events: none; }
.dash-radar-lane { width: 34px; height: 12px; border-radius: 6px; background: rgba(43,36,22,.25); border: 2px solid rgba(255,255,255,.5); transition: background .15s, transform .15s; }
.dash-radar-lane.here { border-color: #fff; }
.dash-radar-lane.low { background: #c47d1a; } .dash-radar-lane.mid { background: #7a4410; } .dash-radar-lane.wide { background: #6b3a10; } .dash-radar-lane.tall { background: #2b7fc4; } .dash-radar-lane.air { background: #8e8e96; }
.dash-radar-lane.soon { transform: scaleY(1.5); box-shadow: 0 0 10px rgba(255,255,255,.7); }

/* ---------- /wall/: messages on the chain ---------- */
.wall-layout { display: grid; gap: 18px; }
.wall-compose textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.1rem; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); resize: vertical; min-height: 84px; }
.wall-compose textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242, 182, 50, .25); }
.wall-meter { height: 6px; border-radius: 3px; background: var(--line); margin-top: 8px; overflow: hidden; }
.wall-meter span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .15s ease, background .2s; }
.wall-meter span.near { background: #e07b12; }
.wall-meter span.over { background: #c8352b; }
.wall-count { margin: 6px 0 14px; }
.wall-count.over { color: #c8352b; font-weight: 700; }
.wall-compose .label { margin-bottom: 6px; }
.wall-compose form .btn { margin-top: 14px; }
.wall-compose form .btn:disabled { opacity: .55; cursor: not-allowed; }
.wall-msg-out.bad { color: #c8352b; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wall-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.wall-head .card-title { margin: 0; margin-right: auto; }
.wall-filters { display: flex; gap: 6px; }
.wall .chip, .wall-filters .chip { font: inherit; font-size: .9rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.wall-filters .chip.on { background: var(--gold); border-color: var(--gold-deep); color: #2b2416; font-weight: 700; }
.wall-search { font: inherit; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); min-width: 0; width: 200px; }
#wall-stats { margin: 10px 0 14px; }

.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.wall-brick { --b1: #f6e2bd; --b2: #ecc98b; --bt: #3a2a12; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; text-align: left; font: inherit; color: var(--bt);
  padding: 14px 16px 12px; border-radius: 10px; border: 1px solid rgba(90, 60, 20, .18); cursor: pointer; min-height: 92px;
  background: linear-gradient(160deg, var(--b1), var(--b2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(90, 55, 15, .14), 0 2px 6px rgba(60, 40, 10, .1);
  transition: transform .15s ease, box-shadow .15s ease; }
.wall-brick:hover, .wall-brick:focus-visible { transform: translateY(-2px) rotate(-.4deg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(90, 55, 15, .14), 0 8px 18px rgba(60, 40, 10, .18); }
.wall-brick.t1 { --b1: #f3d7b0; --b2: #e2b277; }
.wall-brick.t2 { --b1: #f7ead0; --b2: #e9d3a6; }
.wall-brick.t3 { --b1: #f1dcc4; --b2: #d9b28a; }
.wall-brick.t4 { --b1: #f8e6c0; --b2: #f0cf86; }
.wall-brick.t5 { --b1: #efe0c8; --b2: #dcc196; }
.wall-brick.ours { --b1: #ffe8a3; --b2: #f2b632; border: 2px solid #c98a0c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(120, 75, 0, .2), 0 0 0 3px rgba(242, 182, 50, .18), 0 4px 12px rgba(150, 100, 0, .2); }
.wall-brick.waiting { border-style: dashed; animation: wall-wait 1.6s ease-in-out infinite; }
.wall-brick.fresh { animation: wall-in .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.wall-brick-text { margin: 0; font-size: 1.05rem; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.wall-brick-meta { margin: 0; font-size: .78rem; opacity: .72; }
.wall-tag { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; background: rgba(60, 35, 0, .14); margin-right: 4px; }
.wall-preview { cursor: default; }
.wall-preview.empty .wall-brick-text { opacity: .45; }
.wall-preview:hover { transform: none; }
@keyframes wall-in { from { opacity: 0; transform: translateY(-14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes wall-wait { 50% { opacity: .72; } }

.wall-focus { border: 2px solid var(--gold); background: linear-gradient(180deg, var(--gold-soft), var(--card) 70%); }
.wall-focus.pop { animation: wall-in .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.wall-focus-text { margin: 6px 0 8px; font-size: clamp(1.4rem, 4.2vw, 2.2rem); line-height: 1.25; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; quotes: "\201C" "\201D"; }
.wall-focus-text::before { content: open-quote; color: var(--gold-text); }
.wall-focus-text::after { content: close-quote; color: var(--gold-text); }
.wall-focus-meta { color: var(--muted); margin: 0 0 12px; }
.wall-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.wall-actions a.btn { text-decoration: none; }
.wall-verify { margin-top: 10px; }
.wall-verify summary { cursor: pointer; font-weight: 600; color: var(--gold-text); }
.wall-verify pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--gold-soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: .82rem; }

.wall-pay { border: 2px solid var(--gold); }
.wall-pay.done { background: linear-gradient(180deg, var(--gold-soft), var(--card) 80%); }
.wall-pay-text { margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid var(--gold); background: var(--gold-soft); border-radius: 0 8px 8px 0; font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; color: var(--ink); }
.wall-pay-grid { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
#pay-qr { width: 200px; height: 200px; border-radius: 10px; border: 1px solid var(--line); background: #fff; image-rendering: pixelated; }
.wall-addr { font-size: .92rem; overflow-wrap: anywhere; background: var(--gold-soft); padding: 8px 10px; border-radius: 8px; margin: 4px 0 0; }
.wall-steps { list-style: none; padding: 0; margin: 12px 0 6px; display: grid; gap: 8px; }
.wall-steps li { position: relative; padding-left: 30px; color: var(--muted); }
.wall-steps li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; }
.wall-steps li.now { color: var(--ink); font-weight: 700; }
.wall-steps li.now::before { border-color: var(--gold); border-top-color: transparent; animation: wall-spin .9s linear infinite; }
.wall-steps li.done { color: var(--ink); }
.wall-steps li.done::before { border: 0; background: #3c9a4a; }
.wall-steps li.done::after { content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes wall-spin { to { transform: rotate(360deg); } }
.wall-how { padding-left: 1.1rem; display: grid; gap: 8px; }
@media (max-width: 600px) {
  .wall-pay-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .wall-pay-grid > div { width: 100%; }
  .wall-search { width: 100%; }
  .wall-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .wall-brick, .wall-brick.fresh, .wall-focus.pop, .wall-brick.waiting { animation: none; transition: none; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wall-brick { --b1: #4a3518; --b2: #3a2911; --bt: #f5e6c4; border-color: rgba(255, 210, 120, .14); box-shadow: inset 0 1px 0 rgba(255, 230, 170, .08), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .3); }
  :root:not([data-theme="light"]) .wall-brick.t1 { --b1: #533a1a; --b2: #3d2a10; }
  :root:not([data-theme="light"]) .wall-brick.t2 { --b1: #45361f; --b2: #33281a; }
  :root:not([data-theme="light"]) .wall-brick.t3 { --b1: #4d3322; --b2: #382417; }
  :root:not([data-theme="light"]) .wall-brick.t4 { --b1: #554019; --b2: #3e2e0f; }
  :root:not([data-theme="light"]) .wall-brick.t5 { --b1: #48392a; --b2: #352a1e; }
  :root:not([data-theme="light"]) .wall-brick.ours { --b1: #7a5508; --b2: #5a3d04; --bt: #fff1c8; border-color: #f2b632; }
  :root:not([data-theme="light"]) .wall-tag { background: rgba(255, 220, 140, .16); }
}
:root[data-theme="dark"] .wall-brick { --b1: #4a3518; --b2: #3a2911; --bt: #f5e6c4; border-color: rgba(255, 210, 120, .14); box-shadow: inset 0 1px 0 rgba(255, 230, 170, .08), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .wall-brick.t1 { --b1: #533a1a; --b2: #3d2a10; }
:root[data-theme="dark"] .wall-brick.t2 { --b1: #45361f; --b2: #33281a; }
:root[data-theme="dark"] .wall-brick.t3 { --b1: #4d3322; --b2: #382417; }
:root[data-theme="dark"] .wall-brick.t4 { --b1: #554019; --b2: #3e2e0f; }
:root[data-theme="dark"] .wall-brick.t5 { --b1: #48392a; --b2: #352a1e; }
:root[data-theme="dark"] .wall-brick.ours { --b1: #7a5508; --b2: #5a3d04; --bt: #fff1c8; border-color: #f2b632; }
:root[data-theme="dark"] .wall-tag { background: rgba(255, 220, 140, .16); }
.wall-pay.paid #pay-qr, .wall-pay.paid .wall-pay-grid .label, .wall-pay.paid .wall-addr, .wall-pay.paid .wall-actions, .wall-pay.paid > .muted { display: none; }
.wall-pay.paid .wall-pay-grid { grid-template-columns: minmax(0, 1fr); }
.wall-compose .wall-msg-out { margin: 10px 0 0; min-height: 0; }
.wall-compose .wall-msg-out:empty { display: none; }
.wall-compose > .muted { margin-top: 18px; }
.wall-timer { margin: -4px 0 14px; font-weight: 700; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.wall-timer.urgent { color: #c8352b; }
.wall-pay.expired { border-color: var(--line); }
.wall-pay.expired .wall-steps { display: none; }
.wall-pay.paid .pc-qr { display: none; }
.wall-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px dashed var(--line); }
.wall-brick.pinned { --b1: #fff3c4; --b2: #f7cf5a; border: 2px solid #e09a12; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 3px rgba(242, 182, 50, .25), 0 6px 16px rgba(150, 100, 0, .22); }
.wall-tag.pin { background: #c8352b; color: #fff; }
.wall-pay .pc-quote[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wall-brick.pinned { --b1: #8a5e06; --b2: #5e3f03; --bt: #fff4d0; border-color: #f2b632; }
}
:root[data-theme="dark"] .wall-brick.pinned { --b1: #8a5e06; --b2: #5e3f03; --bt: #fff4d0; border-color: #f2b632; }

/* ---------- /proof/ ---------- */
.proof-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 34px 18px; border: 3px dashed var(--line); border-radius: 16px; cursor: pointer; background: var(--gold-soft); transition: border-color .15s, transform .15s, background .15s; }
.proof-drop:hover, .proof-drop.over, .proof-drop:focus-within { border-color: var(--gold); transform: scale(1.01); }
.proof-drop strong { font-size: 1.2rem; color: var(--ink); }
.proof-drop-icon { width: 48px; height: 48px; color: var(--gold-text); }
.proof-drop-icon svg { width: 100%; height: 100%; }
.proof-paste { margin-top: 14px; }
.proof-hash-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.proof-hash-form input { flex: 1 1 260px; min-width: 0; font-size: .85rem; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.proof-result.pop { animation: wall-in .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.proof-name { font-weight: 700; margin: 2px 0; overflow-wrap: anywhere; }
.proof-hash { font-size: .82rem; overflow-wrap: anywhere; background: var(--gold-soft); border-radius: 8px; padding: 8px 10px; margin: 6px 0 14px; color: var(--ink); }
.proof-progress { margin: -6px 0 14px; }
.proof-badge { display: inline-block; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: var(--line); color: var(--ink); margin: 0 0 10px; }
.proof-badge.ok { background: #3c9a4a; color: #fff; }
.proof-big { font-size: clamp(1.3rem, 3.8vw, 1.9rem); font-weight: 800; margin: 0 0 4px; color: var(--ink); }
.proof-state { border-top: 1px solid var(--line); padding-top: 14px; }
.proof-again { margin-top: 14px; }

/* ---------- /adopt/ ---------- */
.adopt-find-row { display: flex; gap: 8px; margin: 6px 0 12px; }
.adopt-find-row input { flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.adopt-find-row input:focus { outline: none; border-color: var(--gold); }
.adopt-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.adopt-quick .chip { font: inherit; font-size: .9rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.adopt-quick .chip:hover { border-color: var(--gold); }
.adopt-date { display: inline-flex; align-items: center; gap: 6px; }
.adopt-date input { font: inherit; font-size: .85rem; border: 0; background: transparent; color: var(--ink); padding: 0; }
.adopt-card { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
.adopt-card.pop { animation: wall-in .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.adopt-art { border-radius: 18px; padding: 10px; background: var(--gold-soft); display: flex; justify-content: center; }
.adopt-art svg { width: 100%; max-width: 240px; height: auto; display: block; }
.adopt-art.rare { box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(242, 182, 50, .45); }
.adopt-name { font-size: 1.4rem; font-weight: 800; margin: 2px 0; color: var(--ink); }
.adopt-owner { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(160deg, #ffe8a3, #f2b632); color: #2b2416; }
.adopt-owner .label { color: #6b4a00; }
.adopt-owner-name { font-size: 1.5rem; font-weight: 800; margin: 0; }
.adopt-owner-line { font-style: italic; margin: 4px 0; overflow-wrap: anywhere; }
.adopt-owner .muted { color: #5c4520; }
.adopt-busy { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--gold-soft); font-weight: 600; }
.adopt-form { margin-top: 14px; display: grid; gap: 6px; }
.adopt-form input { font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.adopt-form input:focus { outline: none; border-color: var(--gold); }
.adopt-form .btn { justify-self: start; margin-top: 6px; }
.adopt-form .btn:disabled { opacity: .55; cursor: not-allowed; }
.adopt-free { font-weight: 800; color: #3c9a4a; margin: 0 0 4px; }
.adopt-count { margin: 0; }
.adopt-count.over { color: #c8352b; font-weight: 700; }
.adopt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.adopt-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 8px; border-radius: 14px; background: var(--gold-soft); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .15s; }
.adopt-tile:hover { transform: translateY(-2px); }
.adopt-tile svg { width: 84px; height: 84px; }
.adopt-tile-h { font-size: .75rem; color: var(--muted); }
.adopt-tile-line { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .adopt-card { grid-template-columns: minmax(0, 1fr); }
  .adopt-art { max-width: 260px; margin: 0 auto; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .adopt-owner { background: linear-gradient(160deg, #7a5508, #4e3503); color: #fff1c8; }
  :root:not([data-theme="light"]) .adopt-owner .label, :root:not([data-theme="light"]) .adopt-owner .muted { color: #f5d98a; }
  :root:not([data-theme="light"]) .adopt-free { color: #7fd38b; }
  :root:not([data-theme="light"]) .proof-badge.ok { background: #2f7a3b; }
}
:root[data-theme="dark"] .adopt-owner { background: linear-gradient(160deg, #7a5508, #4e3503); color: #fff1c8; }
:root[data-theme="dark"] .adopt-owner .label, :root[data-theme="dark"] .adopt-owner .muted { color: #f5d98a; }
:root[data-theme="dark"] .adopt-free { color: #7fd38b; }
:root[data-theme="dark"] .proof-badge.ok { background: #2f7a3b; }
.art-adopt { margin-top: 8px; }
.art-adopt a { font-weight: 700; }
.adopt-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.adopt-steps li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: start; }
.adopt-steps li > span:last-child { grid-column: 2; color: var(--muted); font-size: .92rem; line-height: 1.4; }
.adopt-step-n { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--gold); color: #2b2416; box-shadow: 0 3px 0 var(--gold-deep); }
.adopt-faq { margin: 0; }
.adopt-faq dt { font-weight: 800; margin-top: 14px; color: var(--ink); }
.adopt-faq dt:first-child { margin-top: 0; }
.adopt-faq dd { margin: 4px 0 0; color: var(--muted); line-height: 1.5; }
@media (max-width: 700px) { .adopt-steps ol { grid-template-columns: minmax(0, 1fr); } }
.wall-pin-opt { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.wall-pin-opt:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.wall-pin-opt input { width: 18px; height: 18px; margin-top: 2px; accent-color: #e09a12; flex: none; }
.wall-pin-opt.off { opacity: .55; cursor: not-allowed; }
.wall-pin-note { margin: 6px 0 0; }

/* ---------- /names/ and /@name ---------- */
.names-field { display: flex; align-items: center; border: 2px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; margin-top: 6px; }
.names-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242, 182, 50, .22); }
.names-prefix { padding: 0 0 0 14px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.names-field input { flex: 1; min-width: 0; font: inherit; font-size: 1.25rem; font-weight: 800; padding: 12px 14px 12px 2px; border: 0; background: transparent; color: var(--ink); outline: none; }
.names-avail { min-height: 1.4em; margin: 8px 0 0; font-weight: 700; }
.names-avail.good { color: #3c9a4a; }
.names-avail.bad, .names-form .bad { color: #c8352b; }
.names-form .good { color: #3c9a4a; }
.names-form { display: grid; gap: 6px; margin-top: 12px; }
.names-form input { font-size: .92rem; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.names-form input:focus { outline: none; border-color: var(--gold); }
.names-form p { margin: 0; }
.names-warn { padding: 8px 10px; border-radius: 8px; background: var(--gold-soft); }
.names-form .btn { justify-self: start; margin-top: 6px; }
.names-form .btn:disabled { opacity: .55; cursor: not-allowed; }
.names-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.names-grid .adopt-tile svg { width: 64px; height: 64px; }
.names-profile { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: start; }
.names-avatar { width: 160px; border-radius: 22px; overflow: hidden; background: var(--gold-soft); }
.names-avatar svg { width: 100%; height: auto; display: block; }
.names-handle { font-size: clamp(1.8rem, 6vw, 2.8rem); margin: 0; overflow-wrap: anywhere; line-height: 1.1; }
.names-pay { display: grid; justify-items: center; gap: 8px; }
#p-qr { width: 200px; height: 200px; border-radius: 10px; border: 1px solid var(--line); background: #fff; image-rendering: pixelated; }
.names-tips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 220px; }
.names-tips .chip { font: inherit; font-size: .85rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.names-tips .chip.on { background: var(--gold); border-color: var(--gold-deep); color: #2b2416; font-weight: 700; }
.names-proof { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) {
  .names-profile { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .names-who { width: 100%; }
  .names-who .wall-actions { justify-content: center; }
  .names-prefix { font-size: .85rem; padding-left: 10px; }
  .names-field input { font-size: 1.05rem; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .names-avail.good, :root:not([data-theme="light"]) .names-form .good { color: #7fd38b; }
  :root:not([data-theme="light"]) .names-avail.bad, :root:not([data-theme="light"]) .names-form .bad { color: #ff8a80; }
}
:root[data-theme="dark"] .names-avail.good, :root[data-theme="dark"] .names-form .good { color: #7fd38b; }
:root[data-theme="dark"] .names-avail.bad, :root[data-theme="dark"] .names-form .bad { color: #ff8a80; }

/* ---------- /sponsor/ ---------- */
.sponsor-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sponsor-amounts .chip { font: inherit; font-size: .95rem; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font-weight: 700; }
.sponsor-amounts .chip.on { background: var(--gold); border-color: var(--gold-deep); color: #2b2416; }
.sponsor-amounts input { width: 110px; font: inherit; padding: 8px 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); }
.sponsor-amounts input.invalid { border-color: #c8352b; }
.sponsor-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sponsor-list li > span { overflow-wrap: anywhere; }
@media (max-width: 760px) { .sponsor-lists { grid-template-columns: minmax(0, 1fr); } }

/* ---------- gift option + /card/ ---------- */
.gift-fields { display: grid; gap: 6px; margin: 4px 0 6px; padding: 10px 12px; border-left: 4px solid var(--gold); background: var(--gold-soft); border-radius: 0 10px 10px 0; }
.gift-fields textarea { font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); resize: vertical; }
.gift-card { max-width: 540px; margin: 10px auto 18px; padding: 34px 30px 24px; text-align: center; border-radius: 26px; color: #2b2416;
  background: radial-gradient(circle at 50% 0, #fff8e1, #fbe6b0 70%, #f5d27a); border: 3px solid #e09a12; box-shadow: 0 0 0 8px #fff4d4, 0 0 0 10px #e09a12, 0 18px 40px rgba(120, 80, 0, .25); }
.gift-card.rare { background: radial-gradient(circle at 50% 0, #fffbe8, #ffe08a 60%, #f2b632); }
.gift-card-kicker { margin: 0 0 6px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: #966000; }
.gift-card-art { width: 200px; margin: 6px auto 10px; border-radius: 26px; overflow: hidden; box-shadow: 0 8px 20px rgba(120, 80, 0, .2); }
.gift-card-art svg { width: 100%; height: auto; display: block; }
.gift-card-title { margin: 0; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; overflow-wrap: anywhere; color: #2b2416; }
.gift-card-sub { margin: 8px auto 0; max-width: 420px; color: #5c4520; }
.gift-card-note { margin: 18px auto 0; max-width: 420px; font-size: 1.15rem; font-style: italic; color: #2b2416; overflow-wrap: anywhere; }
.gift-card-from { margin: 14px 0 0; font-weight: 800; color: #966000; }
.gift-card-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; padding-top: 16px; border-top: 2px dashed rgba(168, 108, 0, .35); text-align: left; }
.gift-card-foot canvas { width: 96px; height: 96px; border-radius: 8px; background: #fff; flex: none; image-rendering: pixelated; }
.gift-card-foot p { margin: 0; font-size: .85rem; color: #5c4520; max-width: 260px; }
.gift-card-actions { justify-content: center; }
@media print {
  body:has(.print-card) * { visibility: hidden; }
  body:has(.print-card) .print-card, body:has(.print-card) .print-card * { visibility: visible; }
  .print-card { position: absolute; left: 0; right: 0; top: 0; margin: 20px auto; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* 2026-10-19: seven top-level items (Spend got its own menu): keep them on one line on phones */
@media (max-width: 640px) { .nav { gap: 0; justify-content: center; } }
@media (max-width: 520px) {
  .nav > a { padding: 6px 4px; font-size: .8rem; }
  .nav summary { padding: 6px 3px 6px 4px; font-size: .8rem; gap: 2px; }
  .nav summary::after { width: 5px; height: 5px; }
}
@media (max-width: 380px) {
  .nav > a { padding: 5px 2px; font-size: .72rem; }
  .nav summary { padding: 5px 1px 5px 2px; font-size: .72rem; gap: 2px; }
  .nav summary::after { width: 4px; height: 4px; border-width: 0 1.5px 1.5px 0; }
}

/* ---------- /bakery/ shout-outs ---------- */
.oven-card { flex-wrap: wrap; }
.shout { flex: 1 1 100%; border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 4px; }
.shout-row { display: flex; gap: 8px; margin-top: 4px; }
.shout-row input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.shout-row input:focus { outline: none; border-color: var(--gold); }
.shout-row .btn { white-space: nowrap; }
.shout-row .btn:disabled { opacity: .55; cursor: not-allowed; }
.shout-meta { margin: 6px 0 0; color: var(--muted); }
.shout-meta.over { color: #c8352b; font-weight: 700; }
.shout-coming { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.shout-coming .label { flex-basis: 100%; margin: 0; }
.shout-bubble { display: inline-block; padding: 6px 12px; border-radius: 14px 14px 14px 4px; background: var(--gold-soft); border: 1px solid var(--gold); font-weight: 600; overflow-wrap: anywhere; animation: wall-wait 1.6s ease-in-out infinite; }
.loaf-shouts { display: flex; flex-direction: column; gap: 4px; }
.loaf-shouts:empty { display: none; }
.loaf-shout { display: inline-block; align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: 12px 12px 12px 3px; background: var(--gold); color: #2b2416; font-weight: 700; font-size: .85rem; text-decoration: none; overflow-wrap: anywhere; max-width: 100%; }
.loaf.has-shout { box-shadow: inset 4px 0 0 var(--gold); }
@media (max-width: 520px) { .shout-row { flex-direction: column; } .shout-row .btn { align-self: flex-start; } }
.names-bio { margin: 8px 0 4px; font-size: 1.05rem; overflow-wrap: anywhere; }
.names-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.names-link { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--gold-soft); color: var(--ink); text-decoration: none; font-size: .88rem; max-width: 100%; }
.names-link span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.names-link:hover { border-color: var(--gold); }
.names-owner textarea { font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); resize: vertical; }
.gift-card-edit { margin: 14px auto 0; max-width: 420px; font-size: .78rem; color: #5c4520; overflow-wrap: anywhere; }
@media (max-width: 760px) { .names-links { justify-content: center; } }
/* wall threads */
.wall-parent { display: block; margin: 4px 0 2px; font-size: .9rem; color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.wall-parent:hover { color: var(--gold-text); }
.wall-thread { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.wall-replies { display: grid; gap: 6px; margin: 6px 0 12px; }
.wall-reply-item { display: grid; gap: 2px; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--card); border-radius: 0 10px 10px 0; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.wall-reply-item small { color: var(--muted); }
.wall-reply-item:hover { background: var(--gold-soft); }
.wall-brick-re { margin: 0 0 -6px; font-size: .75rem; font-weight: 800; opacity: .65; }
.lotto-cheers { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.lotto-cheers.past { margin-top: 14px; }
.lotto-cheers .label { flex-basis: 100%; margin: 0; }
.shout-bubble.still { animation: none; }
.happy-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(120deg, #ffe08a, #f2b632); color: #2b2416; font-size: 1rem; box-shadow: 0 3px 0 #c98a0c; animation: wall-wait 2s ease-in-out infinite; }
.happy-now { padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); }
.happy-now.on { background: linear-gradient(120deg, #ffe08a, #f2b632); color: #2b2416; }
.names-badge { display: inline-block; margin: 6px 0 2px; padding: 3px 12px; border-radius: 999px; background: linear-gradient(120deg, #ffe08a, #f2b632); color: #2b2416; font-weight: 800; font-size: .85rem; box-shadow: 0 2px 0 #c98a0c; }
.names-star { color: #e09a12; }
.names-support { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-top: 12px; border-top: 1px dashed var(--line); }
.names-support .wall-msg-out { flex-basis: 100%; margin: 0; }
@media (max-width: 760px) { .names-support { justify-content: center; text-align: center; } }

/* ---------- /get/ ---------- */
.get-h { margin: 22px 4px 10px; font-size: 1.15rem; }
.get-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.get-card { display: grid; gap: 6px; text-decoration: none; color: var(--ink); transition: transform .15s; margin: 0; }
.get-card:hover { transform: translateY(-2px); }
.get-card strong { font-size: 1.1rem; color: var(--gold-text); }
.get-card span { color: var(--muted); font-size: .92rem; }
.get-market-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.get-market-head .card-title { margin: 0; }
.get-market-head .btn { text-decoration: none; }
.get-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.get-stats div { background: var(--gold-soft); border-radius: 10px; padding: 8px 12px; }
.get-stats dt { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.get-stats dd { margin: 2px 0 0; font-weight: 800; color: var(--ink); }
.get-steps { display: grid; gap: 8px; padding-left: 1.2rem; }
.get-warn { border: 2px solid #e07b12; }
.get-warn .card-title { color: #b45a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .get-warn .card-title { color: #ffb15c; } }
:root[data-theme="dark"] .get-warn .card-title { color: #ffb15c; }
.here-now { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: .88rem; color: var(--muted); }
.here-now strong { color: var(--ink); }
.here-dot { width: 8px; height: 8px; border-radius: 50%; background: #3c9a4a; box-shadow: 0 0 0 0 rgba(60, 154, 74, .6); animation: here-pulse 2s infinite; }
@keyframes here-pulse { 70% { box-shadow: 0 0 0 7px rgba(60, 154, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 154, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .here-dot { animation: none; } }
.here-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 800; font-size: .85rem; text-decoration: none; white-space: nowrap; flex: none; }
.here-pill:hover { border-color: #3c9a4a; }
.here-pill[hidden] { display: none; }
.here-pill-word { font-weight: 600; color: var(--muted); }
@media (max-width: 860px) { .here-pill-word { display: none; } }
/* Google's reCAPTCHA box is a fixed 304 px: scale it down on the narrowest phones so it doesn't push the page sideways */
@media (max-width: 360px) { .g-recaptcha { transform: scale(.86); transform-origin: 0 0; height: 68px; } }

/* ---------- home: Play and Spend rows (2026-10-19) ---------- */
.fun-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fun-row-head .card-title { margin-bottom: 12px; }
.fun-row-head .more { font-weight: 800; color: var(--gold-text); text-decoration: none; font-size: .92rem; }
.game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-tile { --g1: #ffe08a; --g2: #f2b632; background: linear-gradient(140deg, var(--g1), var(--g2)); border-color: transparent; color: #2b2416; padding: 16px 14px; box-shadow: 0 4px 0 rgba(120, 75, 0, .25); }
.game-tile:hover { border-color: transparent; transform: translateY(-3px); box-shadow: 0 7px 0 rgba(120, 75, 0, .25); }
.game-tile .icon { background: rgba(255, 255, 255, .55); color: #2b2416; }
.game-tile .fun-text span { color: #4a3a1c; }
.game-tile.g2 { --g1: #ffd2c2; --g2: #f08a5d; }
.game-tile.g3 { --g1: #d9f2c4; --g2: #8ccf6a; }
.game-tile.g4 { --g1: #cfe3ff; --g2: #7aa7f0; }
.game-tile.g5 { --g1: #e4dcff; --g2: #a993ef; }
.game-tile.g6 { --g1: #fff1b8; --g2: #e9c14a; }
@media (max-width: 1000px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.here-now { display: block; }
.here-now .here-dot { display: inline-block; vertical-align: middle; margin: -2px 6px 0 0; }
/* lotto facts: values like "~6:30 PM CDT" overflowed their boxes; let them wrap between words and size to the space */
.lotto-facts dd { white-space: normal; overflow-wrap: normal; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.25; }
@media (max-width: 480px) { .lotto-facts dt { flex: none; } .lotto-facts dd { font-size: 1rem; min-width: 0; } }

/* ---------- footer site map + phone header (2026-10-19) ---------- */
.footer-cols { max-width: 1032px; margin: 6px auto 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; text-align: left; }
.footer-cols div { display: flex; flex-direction: column; gap: 6px; }
.footer-h { margin: 0 0 4px; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.footer-cols a { color: var(--muted); text-decoration: none; font-weight: 600; }
.footer-cols a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .here-now { margin-top: 0; }
@media (max-width: 760px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; } }
/* phones: logo, people pill and theme button share the first row; the menu gets the full second row */
@media (max-width: 980px) {
  .topbar-inner { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
  .topbar-inner .brand { order: 0; margin-right: auto; }
  .topbar-inner .here-pill { order: 1; margin-left: 0; }
  .topbar-inner .theme-btn { order: 2; margin-left: 6px; }
  .topbar-inner .nav { order: 3; flex-basis: 100%; justify-content: center; }
}

/* ---------- /pay/ checkout and /merchant/ ---------- */
.checkout { max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; border: 2px solid var(--gold); }
.checkout.paid { background: linear-gradient(180deg, var(--gold-soft), var(--card) 70%); }
.checkout.expired { border-color: var(--line); }
.checkout-shop { margin: 2px 0 4px; font-size: clamp(1.5rem, 5vw, 2.1rem); overflow-wrap: anywhere; }
.checkout-memo { margin: 0 0 12px; color: var(--muted); overflow-wrap: anywhere; }
.checkout-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin: 12px 0; }
#c-qr { width: 220px; height: 220px; border-radius: 12px; border: 1px solid var(--line); background: #fff; image-rendering: pixelated; }
.checkout-amount { margin: 2px 0 6px; font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ink); }
.checkout-amount .unit { font-size: 1rem; color: var(--muted); }
.checkout-amount .btn-copy { font-size: .8rem; vertical-align: middle; }
.checkout.paid .checkout-grid, .checkout.expired .checkout-grid { opacity: .55; }
.checkout-note { font-size: 1.05rem; }
.checkout .btn[hidden] { display: none; }
.merchant-link-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.merchant-link-form input, .merchant-link-form select, .adopt-form select { font: inherit; padding: 9px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); min-width: 0; }
.merchant-link-form input { flex: 1 1 140px; }
.merchant-code { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--gold-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: .82rem; margin: 4px 0 10px; }
.merchant-ids dd { font-size: .85rem; overflow-wrap: anywhere; }
.adopt-steps-list { display: grid; gap: 8px; padding-left: 1.2rem; margin: 0; }
.pay-status { font-weight: 800; }
.pay-status.confirmed { color: #3c9a4a; }
.pay-status.seen { color: #b45a00; }
.pay-status.expired { color: var(--muted); }
@media (max-width: 600px) { .checkout-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } .checkout-grid > div { width: 100%; } }
/* long inline code (JSON, hashes) must wrap instead of widening the page */
.wrap p code, .wrap li code { overflow-wrap: anywhere; word-break: break-word; }
/* checkout v2: dashboard, directory */
.merchant-tabs { display: flex; gap: 6px; margin: 6px 0 14px; }
.merchant-tabs .chip { font: inherit; font-size: .9rem; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.merchant-tabs .chip.on { background: var(--gold); border-color: var(--gold-deep); color: #2b2416; font-weight: 700; }
.merchant-un { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.merchant-un select { font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); max-width: 100%; }
.merchant-dir { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; margin: 8px 0; }
.merchant-dir legend { font-weight: 800; padding: 0 6px; }
.merchant-dir input { font: inherit; padding: 9px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.merchant-asis p { margin: 0; color: var(--muted); }
.checkout.test { border-style: dashed; }
.checkout-in { font: inherit; font-size: 1.4rem; font-weight: 800; width: 9em; max-width: 100%; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.shops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.shop-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--gold-soft); display: grid; gap: 6px; align-content: start; }
.shop-card h3 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.shop-card .wall-tag { justify-self: start; }
.shop-card p { margin: 0; overflow-wrap: anywhere; }
.shop-card .btn { justify-self: start; text-decoration: none; margin-top: 4px; }
.checkout-tip { display: grid; gap: 6px; margin: 4px 0 14px; }
.checkout-tip input, .checkout-tip textarea { font: inherit; padding: 9px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.merchant-overlay-url { word-break: break-all; }
.checkout-delivery { margin: 14px 0; padding: 14px 16px; border-radius: 14px; border: 2px solid #3c9a4a; background: rgba(60, 154, 74, .08); }
.checkout-delivery.wait { border-color: var(--line); background: var(--gold-soft); }
.checkout-goods { font-size: 1.05rem; font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.checkout-goods a { color: var(--gold-text); }
.merchant-products { display: grid; gap: 10px; margin-top: 12px; }
.merchant-product { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.merchant-product .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.merchant-product.off { opacity: .6; }

/* ---------- /stickers/ ---------- */
.sticker-kinds { display: grid; gap: 6px; }
.sticker-preview { display: flex; justify-content: center; padding: 18px; background: repeating-linear-gradient(45deg, var(--gold-soft) 0 12px, var(--card) 12px 24px); border-radius: 14px; }
.sticker { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #2b2416; font-family: inherit;
  background: radial-gradient(circle at 30% 20%, #fff6d6, #ffd96a 65%, #f2b632); border: 0.04in solid #e09a12; -webkit-print-color-adjust: exact; print-color-adjust: exact; overflow: hidden; }
.sticker.round { width: 2in; height: 2in; border-radius: 50%; padding: 0.16in 0.22in; }
.sticker.biz { width: 3.5in; height: 2in; border-radius: 0.14in; padding: 0.14in 0.2in; display: grid; grid-template-columns: 1.25in 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 0.15in; text-align: left; align-items: start; }
.sticker-top { display: flex; align-items: center; gap: 0.04in; font-weight: 900; font-size: 0.11in; letter-spacing: .02em; }
.sticker-top img { width: 0.18in; height: 0.18in; }
.sticker-qr { width: 0.95in; height: 0.95in; margin: 0.05in 0; background: #fff; border-radius: 0.06in; padding: 0.03in; }
.sticker-qr svg { width: 100%; height: 100%; display: block; }
.sticker-title { font-family: Fredoka, inherit; font-weight: 800; font-size: 0.13in; line-height: 1.1; overflow-wrap: anywhere; max-width: 100%; }
.sticker-line { font-size: 0.09in; font-weight: 700; overflow-wrap: anywhere; }
.sticker-url { font-size: 0.07in; font-weight: 700; color: #6b4a00; overflow-wrap: anywhere; margin-top: 0.02in; }
.sticker.biz .sticker-qr { grid-column: 1; grid-row: 1 / span 4; width: 1.25in; height: 1.25in; margin: 0.2in 0 0; }
.sticker.biz .sticker-top { grid-column: 2; font-size: 0.13in; margin-top: 0.1in; }
.sticker.biz .sticker-title { grid-column: 2; font-size: 0.22in; margin-top: 0.08in; }
.sticker.biz .sticker-line { grid-column: 2; font-size: 0.13in; margin-top: 0.04in; }
.sticker.biz .sticker-url { grid-column: 2; font-size: 0.09in; align-self: end; margin-bottom: 0.08in; }
.sticker-sheet { display: none; }
@media print {
  @page { size: letter; margin: 0.4in; }
  .sticker-sheet { display: grid !important; gap: 0.15in; justify-content: center; margin: 0 !important; }
  .sticker-sheet.biz { row-gap: 0.04in; }   /* 5 rows of 2 in fit a letter page */
  .sticker-sheet.round { grid-template-columns: repeat(3, 2in); }
  .sticker-sheet.biz { grid-template-columns: repeat(2, 3.5in); }
}

/* ---------- @name link-in-bio pages ---------- */
.bio-page { --bg1: #fff4d4; --bg2: #f7cf6a; --ink2: #2b2416; --soft: #5c4520; --btn: #fffdf6; --btn-ink: #2b2416; --btn-line: #e09a12; --link: #8a4b00;
  border-radius: 24px; padding: 34px 18px 26px; background: linear-gradient(170deg, var(--bg1), var(--bg2)); color: var(--ink2); }
.bio-page.theme-night { --bg1: #1e1630; --bg2: #3d2b63; --ink2: #f6f1ff; --soft: #cbbfe6; --btn: rgba(255, 255, 255, .1); --btn-ink: #fff; --btn-line: rgba(255, 255, 255, .35); --link: #ffd36a; }
.bio-page.theme-mint { --bg1: #ecfaf2; --bg2: #9fdcb8; --ink2: #153a28; --soft: #2f5e46; --btn: #fff; --btn-ink: #153a28; --btn-line: #3c9a6a; --link: #1d6b45; }
.bio-page.theme-rose { --bg1: #fff0f4; --bg2: #f4a6c0; --ink2: #4a1f2e; --soft: #7a3a50; --btn: #fff; --btn-ink: #4a1f2e; --btn-line: #d0507a; --link: #a3254f; }
.bio-page.theme-ocean { --bg1: #e8f3ff; --bg2: #7fb3ea; --ink2: #10294a; --soft: #2d4d78; --btn: #fff; --btn-ink: #10294a; --btn-line: #3a78c4; --link: #1d5aa6; }
.bio-page.theme-mono { --bg1: #ffffff; --bg2: #f1f1f1; --ink2: #111; --soft: #555; --btn: #111; --btn-ink: #fff; --btn-line: #111; --link: #111; }
.bio-inner { max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.bio-avatar { width: 116px; height: 116px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--btn), 0 10px 26px rgba(0, 0, 0, .18); background: #fff4d4; }
.bio-avatar svg { width: 100%; height: 100%; display: block; }
.bio-handle { margin: 6px 0 0; font-size: clamp(1.7rem, 6vw, 2.3rem); color: var(--ink2); overflow-wrap: anywhere; }
.bio-text { margin: 0; color: var(--soft); font-size: 1.05rem; max-width: 440px; overflow-wrap: anywhere; }
.bio-links { width: 100%; display: grid; gap: 10px; margin-top: 8px; }
.bio-button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; box-sizing: border-box; padding: 14px 18px; border-radius: 16px; border: 2px solid var(--btn-line);
  background: var(--btn); color: var(--btn-ink); font: inherit; font-weight: 800; font-size: 1.05rem; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; box-shadow: 0 3px 0 var(--btn-line); }
.bio-button:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--btn-line); }
.bio-button span { font-size: .8rem; font-weight: 700; opacity: .7; }
.bio-tip-toggle { margin-top: 6px; background: linear-gradient(120deg, #ffe08a, #f2b632); color: #2b2416; border-color: #c98a0c; box-shadow: 0 3px 0 #c98a0c; }
.bio-tip { width: 100%; box-sizing: border-box; display: grid; justify-items: center; gap: 10px; padding: 16px; border-radius: 18px; background: var(--btn); border: 2px solid var(--btn-line); color: var(--btn-ink); }
.bio-tip #p-qr { width: 190px; height: 190px; border-radius: 10px; background: #fff; image-rendering: pixelated; }
.bio-addr { font-size: .82rem; overflow-wrap: anywhere; margin: 0; }
.bio-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bio-row .btn { text-decoration: none; }
.bio-small { margin-top: 8px; }
.bio-page .names-badge { margin: 0; }
.bio-page .wall-msg-out { color: var(--soft); margin: 0; }
.bio-foot { margin: 10px 0 0; font-size: .85rem; color: var(--soft); }
.bio-foot a { color: var(--link); }
.bio-page.theme-night .btn-copy, .bio-page.theme-night .chip { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.bio-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.bio-swatches label { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.bio-swatches input { position: absolute; opacity: 0; }
.bio-swatches .sw { width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--line); background: linear-gradient(170deg, var(--bg1), var(--bg2)); }
.bio-swatches input:checked + .sw { outline: 3px solid var(--gold); outline-offset: 2px; }
.bio-swatches input:focus-visible + .sw { outline: 3px solid var(--gold-deep); }
.bio-edit-links { display: grid; gap: 6px; }
.bio-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 6px; align-items: center; }
.bio-edit-row input { font: inherit; font-size: .9rem; padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); min-width: 0; }
.o-clicks { white-space: nowrap; min-width: 4.5em; }
@media (max-width: 560px) { .bio-edit-row { grid-template-columns: minmax(0, 1fr); } .o-clicks { min-width: 0; } .bio-page { border-radius: 18px; padding: 26px 14px 20px; } }
.bio-tip-toggle span { font-size: inherit; opacity: 1; }
.bio-swatches .sw.theme-garlic { background: linear-gradient(170deg, #fff4d4, #f7cf6a); }
.bio-swatches .sw.theme-night { background: linear-gradient(170deg, #1e1630, #3d2b63); }
.bio-swatches .sw.theme-mint { background: linear-gradient(170deg, #ecfaf2, #9fdcb8); }
.bio-swatches .sw.theme-rose { background: linear-gradient(170deg, #fff0f4, #f4a6c0); }
.bio-swatches .sw.theme-ocean { background: linear-gradient(170deg, #e8f3ff, #7fb3ea); }
.bio-swatches .sw.theme-mono { background: linear-gradient(170deg, #fff, #ddd); box-shadow: inset 0 -12px 0 #111; }

/* ---------- /sell/ ---------- */
.sell-as { margin: 0 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); }
.sell-price { display: flex; gap: 8px; }
.sell-price input { flex: 1 1 8em; min-width: 0; }
.sell-price select { flex: 0 0 auto; width: auto; }
#s-form { min-width: 0; grid-template-columns: minmax(0, 1fr); }
#s-form textarea { font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); width: 100%; box-sizing: border-box; resize: vertical; }
#s-form > * { max-width: 100%; }
#s-who { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
#s-who[hidden] { display: none; }
#s-form #s-secret { margin-top: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sell-more { margin-top: 14px; }
.sell-more summary { cursor: pointer; font-weight: 700; }
.sell-more textarea { margin-top: 8px; }
.sell-done { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.sell-qr { width: 160px; flex: none; border-radius: 10px; overflow: hidden; }
.sell-qr svg { display: block; width: 100%; height: auto; }
.sell-done-text { flex: 1 1 240px; min-width: 0; }
.sell-done-text .merchant-code, .sell-key .merchant-code { white-space: pre-wrap; overflow-wrap: anywhere; }
.sell-key { margin: 18px 0 4px; padding: 12px 14px; border: 2px dashed var(--gold); border-radius: 12px; }
.sell-key p { margin-top: 0; }
.sell-faq { padding-left: 1.2em; }
.sell-faq li { margin: 8px 0; }
.sell-list { display: grid; gap: 10px; margin-top: 10px; }
.sell-item { padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; min-width: 0; }
.sell-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; overflow-wrap: anywhere; }
.sell-item p { margin: 4px 0 0; }
.sell-state { flex: none; font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--line); }
.sell-state.on { background: var(--gold-soft); color: var(--gold-text); }
.sell-edit { grid-template-columns: minmax(0, 1fr); }
.sell-edit textarea, #k-form textarea { font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); width: 100%; box-sizing: border-box; resize: vertical; }
#k-form, #m-set { grid-template-columns: minmax(0, 1fr); }
#signin summary { cursor: pointer; }
#j-form { grid-template-columns: minmax(0, 1fr); }
.sell-alt { margin-top: 10px; }
#m-who { overflow-wrap: anywhere; }

/* ---------- home: latest on the wall ---------- */
.wall-latest-list { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 10px; }
.wall-latest-list li { display: grid; gap: 2px; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--gold-soft); border-radius: 0 10px 10px 0; overflow-wrap: anywhere; }
.wall-latest-list q { font-weight: 600; quotes: "\201C" "\201D"; }

/* ---------- faucet: one suggestion after a claim ---------- */
.faucet-next { display: grid; gap: 2px; margin: 14px 0 4px; padding: 12px 16px; border: 2px solid var(--gold); border-radius: 14px; background: var(--gold-soft); color: var(--ink); text-decoration: none; text-align: left; }
.faucet-next:hover { border-color: var(--gold-text); }
.faucet-next strong { color: var(--gold-text); font-size: 1.05rem; }
.faucet-next .label { margin: 0; }

/* ---------- /embed/ ---------- */
.embed-preview { display: flex; justify-content: center; align-items: center; min-height: 160px; padding: 20px; border-radius: 12px; border: 2px dashed var(--line);
  background: repeating-conic-gradient(var(--line) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.embed-preview iframe { border: 0; border-radius: 12px; max-width: 100%; }
.embed-code { white-space: pre-wrap; overflow-wrap: anywhere; }
.faucet-next .btn { justify-self: start; margin-top: 8px; }

/* ---------- /till/ payment screen ---------- */
body.till-mode .topbar, body.till-mode .site-footer { display: none; }
body.till-mode .wrap { max-width: none; padding-top: 12px; padding-bottom: 12px; }
.till { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; min-height: calc(100vh - 24px); min-height: calc(100dvh - 24px); }
.till-pay, .till-feed { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; min-width: 0; }
.till-pay { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.till-name { margin: 0; font-size: clamp(1.4rem, 4vw, 2.4rem); font-weight: 800; overflow-wrap: anywhere; }
.till-qr { width: min(100%, 360px, 55vh); border-radius: 14px; overflow: hidden; }
.till-qr svg { display: block; width: 100%; height: auto; }
.till-hint { margin: 0; font-weight: 700; font-size: 1.1rem; }
.till-addr { margin: 0; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.till-feed { display: flex; flex-direction: column; gap: 14px; }
.till-status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; }
.till-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex: none; }
.till-dot.ok { background: var(--ok); animation: till-pulse 2s infinite; }
.till-dot.bad { background: var(--bad); }
@keyframes till-pulse { 50% { opacity: .35; } }
.till-latest { display: grid; gap: 4px; padding: 22px; border-radius: 16px; background: var(--gold-soft); border: 3px solid var(--gold); text-align: center; }
.till-big { font-size: clamp(2.4rem, 9vw, 5rem); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.till-check { font-size: clamp(1.1rem, 3vw, 1.6rem); font-weight: 800; color: var(--gold-text); }
.till-check.done { color: var(--ok); }
.till.flash .till-latest { animation: till-flash 1.2s ease-out; }
@keyframes till-flash { 0% { transform: scale(.9); background: var(--gold); } 100% { transform: none; } }
.till-total { margin: 0; font-weight: 700; }
.till-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; overflow: auto; }
.till-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.till-amt { font-weight: 800; overflow-wrap: anywhere; }
.till-tools { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.till-start { position: absolute; inset: 0; z-index: 5; border: 0; border-radius: 20px; font: inherit; font-size: 1.6rem; font-weight: 800; color: var(--ink);
  background: color-mix(in srgb, var(--bg, #fff) 82%, transparent); backdrop-filter: blur(4px); cursor: pointer; }
.till-start small { font-size: 1rem; font-weight: 600; color: var(--muted); }
@media (max-width: 760px) { .till { grid-template-columns: minmax(0, 1fr); min-height: 0; } }
.till-ok.done { color: var(--ok); font-weight: 700; }

/* ---------- /tx/ checker ---------- */
.tx-head { display: flex; align-items: center; gap: 12px; }
.tx-head .card-title { margin: 0; }
.tx-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 900; font-size: 1.2rem; background: var(--line); color: var(--ink); }
.tx-result.confirmed .tx-icon { background: var(--ok); color: #fff; }
.tx-result.waiting .tx-icon, .tx-result.checking .tx-icon { background: var(--gold); color: var(--on-gold); }
.tx-result.dropped .tx-icon { background: var(--bad); color: #fff; }
.tx-result.confirmed { border-top: 4px solid var(--ok); }
.tx-result.dropped { border-top: 4px solid var(--bad); }
.tx-facts { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 0; }
.tx-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--muted); }
.tx-facts li:first-child { border-top: 0; }
.tx-facts strong { color: var(--ink); text-align: right; }
.tx-advice { padding-left: 1.2em; margin: 4px 0 12px; }
.tx-advice li { margin: 6px 0; }

/* ---------- /recover/ ---------- */
.recover-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-top: 10px; }
.recover-opt { display: grid; gap: 2px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.recover-opt:hover { border-color: var(--gold); background: var(--gold-soft); }
.recover-opt span { color: var(--muted); font-size: .9rem; }
.recover-warn { border-left: 4px solid var(--gold); }
.recover-list, .recover-steps { padding-left: 1.3em; }
.recover-list li, .recover-steps li { margin: 8px 0; }
.recover-worth { font-size: 1.25rem; font-weight: 800; min-height: 1.5em; margin: 10px 0 4px; }
.recover-calc { margin-top: 6px; }
#r-check { margin-top: 18px; grid-template-columns: minmax(0, 1fr); }
#r-check .btn { justify-self: start; }
.recover-steps { padding-left: 0; grid-template-columns: minmax(0, 1fr); }
.recover-steps li { min-width: 0; }
.recover-steps code { white-space: normal; overflow-wrap: anywhere; }

/* ---------- address checker: balance ---------- */
.addr-balance { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.addr-bal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.addr-bal .label { flex-basis: 100%; margin: 0; }
.addr-bal strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.addr-activity { margin-top: 8px; }
.addr-activity summary { cursor: pointer; font-weight: 600; }
.addr-activity ul { list-style: none; padding: 0; margin: 6px 0 0; }
.addr-activity li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
/* long unbroken values (e.g. "GarlicoinCore:0.18.0") wrap instead of widening small screens */
.stat-sub, .stat-value { overflow-wrap: anywhere; }
table.data.vanity-table th, table.data.vanity-table td { white-space: normal; }
@media (max-width: 380px) { table.data.vanity-table th.num, table.data.vanity-table td.num { padding-left: 8px; } table.data.vanity-table thead th { letter-spacing: .02em; } }

/* ---------- /claim/ ---------- */
.claim-form { grid-template-columns: minmax(0, 1fr); }
.claim-key { display: flex; gap: 8px; }
.claim-key input { flex: 1; min-width: 0; }
.claim-found, .claim-summary { padding: 12px 14px; border-radius: 12px; background: var(--gold-soft); border: 2px solid var(--gold); overflow-wrap: anywhere; }
.claim-found strong, .claim-summary strong { font-size: 1.15rem; }
.claim-form .btn { justify-self: start; }
.claim-done .card-title { color: var(--ok); }
.claim-callout { border-left: 4px solid var(--gold); }
#c-step2 { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); } #c-step2[hidden] { display: none; }
.bio-week { margin: 6px 0 0; font-size: .9rem; font-weight: 700; color: var(--soft); text-align: center; }
.names-sharetip { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
table.data.privacy-table td, table.data.privacy-table th { white-space: normal; }
table.data.privacy-table td:first-child { font-weight: 700; color: var(--ink); min-width: 7em; }
table.data.privacy-table td:last-child { white-space: nowrap; }
@media (max-width: 560px) { table.data.privacy-table td:last-child { white-space: normal; } }
#electrum .health-list li { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
#electrum .health-list + p { margin-top: 12px; }

/* ---------- /send/ ---------- */
.send-fund { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.send-fund canvas { width: 200px; height: 200px; border-radius: 12px; flex: none; }
.send-fund-text { flex: 1 1 240px; min-width: 0; }
.send-addr { overflow-wrap: anywhere; font-size: .95rem; }
.claim-gift { border-left: 4px solid var(--gold); background: var(--gold-soft); }
.send-backup { margin-top: 14px; padding: 12px 14px; border: 2px dashed var(--gold); border-radius: 12px; }
.send-backup p:first-child { margin-top: 0; }
.send-print { display: none; }
@media print {
  .send-print { display: block; max-width: 5in; margin: 0 auto; padding: 16px; border: 2px dashed #999; color: #000; background: #fff; font-family: sans-serif; }
  .send-print h2 { margin: 0 0 10px; font-size: 18px; }
  .send-print canvas { width: 2.2in; height: 2.2in; }
  .send-print .mono { font-family: monospace; overflow-wrap: anywhere; }
}
.terms-note { margin: 4px 4px 0; }

/* ---------- /faucet/books/ ---------- */
.books-stats { margin-bottom: 20px; }
.books-in { list-style: none; padding: 0; margin: 0; }
.books-in li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.books-in li:first-child { border-top: 0; }
.books-plus { color: var(--ok); font-weight: 700; }
@media (max-width: 760px) { .books-stats { grid-template-columns: minmax(0, 1fr); } }
.send-mine { list-style: none; padding: 0; margin: 8px 0 0; }
.send-mine li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.send-mine li:first-child { border-top: 0; }
.send-state { text-align: right; font-weight: 700; color: var(--muted); }
.send-state.held { color: var(--gold-text); } .send-state.claimed { color: var(--ok); }

/* ---------- /start/: Garlicoin in a minute ---------- */
.minute { margin-bottom: 20px; }
.minute-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; counter-reset: m; }
.minute-steps li { counter-increment: m; display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 14px; background: var(--gold-soft); border: 1px solid var(--line); animation: minute-in .5s ease-out both; }
.minute-steps li:nth-child(2) { animation-delay: .25s; } .minute-steps li:nth-child(3) { animation-delay: .5s; } .minute-steps li:nth-child(4) { animation-delay: .75s; }
.minute-steps strong::before { content: counter(m) ". "; color: var(--gold-text); }
.minute-steps span:not(.minute-icon) { color: var(--muted); font-size: .95rem; }
.minute-icon { font-size: 1.8rem; line-height: 1; }
@keyframes minute-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .minute-steps li { animation: none; } }
.faucet-new { margin: -4px 0 8px; }
.price-head, .mk-cur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.price-head .card-title { margin: 0; }
.price-cur { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; }
.price-cur select { font: inherit; font-size: .85rem; padding: 3px 6px; line-height: 1.2; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }

/* ---------- /names/all/ directory ---------- */
.dir-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dir-tools input { flex: 1 1 200px; min-width: 0; font: inherit; padding: 9px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.dir-sort select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin-top: 10px; }
.dir-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; min-width: 0; }
.dir-card:hover { border-color: var(--gold); background: var(--gold-soft); }
.dir-art { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; }
.dir-art svg { display: block; width: 100%; height: 100%; }
.dir-text { display: grid; gap: 3px; min-width: 0; }
.dir-text strong { overflow-wrap: anywhere; }
.dir-bio { font-size: .92rem; overflow-wrap: anywhere; }
.dir-badge { justify-self: start; font-size: .75rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--gold); color: var(--on-gold); }

/* ---------- /r/ receipts ---------- */
.receipt { text-align: center; border-top: 6px solid var(--ok); }
.receipt-check { width: 64px; height: 64px; margin: 0 auto 6px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: #fff; font-size: 2rem; font-weight: 900; }
.receipt-kicker { margin: 0; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.receipt-amount { margin: 4px 0; font-size: clamp(2.2rem, 9vw, 3.6rem); overflow-wrap: anywhere; }
.receipt-to { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.receipt-when { color: var(--muted); }
.receipt-actions { justify-content: center; }

/* ---------- /report/ ---------- */
.report-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.report-tools select { font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-bottom: 20px; }
.report-grid .stat-value { font-size: 1.7rem; }
.report-nt .stat-value { color: var(--muted); font-size: 1.1rem; }
.bio-gwallet { margin-top: 10px; width: 100%; }

/* ================= 2026-10-18: menus as columns (one per section) so none is too tall ================= */
.nav { position: relative; }
.nav-group { position: static; }
.nav-menu { right: 0; left: auto; transform: none; display: flex; align-items: flex-start; gap: 4px; width: max-content; max-width: min(760px, calc(100vw - 24px)); }
.nav-col { display: grid; gap: 2px; min-width: 170px; flex: 1 1 0; }
.nav .nav-col .nav-sub { margin-top: 0; padding-top: 8px; border-top: 0; }
@media (max-width: 640px) {
  /* phones: two columns across the screen, scrolling inside if it's still taller than the screen */
  .nav-menu { display: block; columns: 2; column-gap: 4px; left: 50%; right: auto; transform: translateX(-50%); width: calc(100vw - 24px);
    max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-col { min-width: 0; break-inside: avoid; padding-bottom: 6px; }
  .nav .nav-menu a { padding: 8px 8px 8px 10px; font-size: .9rem; }
  .nav .nav-menu .nav-sub ~ a { padding-left: 18px; }
  .nav .nav-sub { padding: 8px 8px 4px; }
}

/* ================= 2026-10-19: /history/ timeline ================= */
.hist-chain { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--gold-soft); color: var(--ink); font-size: .85em; font-weight: 800; white-space: nowrap; }
.hist-year { position: relative; margin: 26px 0 0; }
.hist-y { margin: 0 0 10px; font-size: 1.6rem; }
.hist-list { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--gold); display: grid; gap: 12px; }
.hist-list li { position: relative; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 4px 16px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.hist-list li::before { content: ""; position: absolute; left: -27px; top: 20px; width: 13px; height: 13px; border-radius: 50%; background: var(--card); border: 3px solid var(--gold); }
.hist-list li.chain::before { background: var(--gold); }
.hist-list li.big { border-color: var(--gold); background: var(--gold-soft); }
.hist-list time { font-weight: 800; color: var(--muted); font-size: .92rem; }
.hist-list li.chain time::after { content: " ⛓"; }
@media (max-width: 640px) { .hist-list li { grid-template-columns: 1fr; } }

/* ================= 2026-10-19: the certificate is paper: the same dark-on-cream colors in every theme ================= */
.cert { --ink: #2b2416; --muted: #6b5a43; --line: #e2d2b2; --gold-text: #8a5a00; color: var(--ink); }
.cert h2, .cert strong, .cert .cert-addr, .cert .cert-amount { color: var(--ink); }

/* ---------- faucet: the "Next step" box isn't a message pill (.messages strong pads every bold line) ---------- */
.messages .faucet-next strong { padding: 0; border-radius: 0; font-weight: 800; }
.messages .faucet-next #lotto-out strong { display: inline; font-weight: 700; font-size: inherit; color: var(--ink); }
/* desktop menus: each column as wide as its longest link, so a long one never runs under the next column */
@media (min-width: 641px) { .nav-col { flex: 0 0 auto; } }

/* ---------- /tx/: result facts in one column, then the payment and where it went ---------- */
ul.tx-facts { grid-template-columns: minmax(0, 1fr); }
ul.tx-facts li { align-items: baseline; }
ul.tx-facts li > span { flex: none; }
.tx-pay { margin: 4px 0 12px; }
.tx-pay .label { margin: 14px 0 2px; }
.tx-outs { list-style: none; margin: 0; padding: 0; }
.tx-outs li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.tx-outs li:first-child { border-top: 0; }
.tx-outs code { min-width: 0; overflow-wrap: anywhere; font-size: .85rem; color: var(--muted); }
.tx-outs strong { color: var(--ink); white-space: nowrap; margin-left: auto; }

/* /changes/: what's new */
.change-when { margin: 0 0 2px; font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.change-h { margin: 18px 0 4px; font-size: 1rem; }
.change .notes li { margin-bottom: 6px; }

/* /marketplace/ */
.mkt-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.mkt-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
.mkt-filters input, .mkt-filters select { font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); min-width: 0; }
@media (max-width: 640px) { .mkt-filters { grid-template-columns: 1fr 1fr; } .mkt-filters input { grid-column: 1 / -1; } }
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mkt-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.mkt-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(60, 35, 0, .12); }
.mkt-pic { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--bg, #fbf5e6); font-size: 2.4rem; }
.mkt-pic img { width: 100%; height: 100%; object-fit: cover; }
.mkt-card-body { display: grid; gap: 2px; padding: 10px 12px 12px; }
.mkt-card-title { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.mkt-card-price { font-weight: 800; color: var(--gold-text, #8a5a00); }
.mkt-badges { font-size: .95rem; }
.mkt-item-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 760px) { .mkt-item-grid { grid-template-columns: 1fr; } }
.mkt-item-grid.no-photo { grid-template-columns: 1fr; max-width: 680px; }
.mkt-item-grid.no-photo .mkt-gallery { display: none; }
.mkt-gallery img#mi-photo { width: 100%; max-height: 460px; object-fit: contain; border-radius: 14px; background: var(--bg, #fbf5e6); }
.mkt-thumbs { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mkt-thumbs button { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; width: 64px; height: 64px; }
.mkt-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.mkt-price { font-size: 1.35rem; font-weight: 800; color: var(--gold-text, #8a5a00); margin: 4px 0; }
.mkt-descr { white-space: pre-line; overflow-wrap: anywhere; }
.mkt-buy { margin: 14px 0; }
.mkt-seller { margin: 14px 0 6px; }
.mkt-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mkt-reviews li { padding: 6px 10px; border-radius: 10px; background: var(--bg, #fbf5e6); }
.mkt-report { margin-top: 16px; }
.mkt-report textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); margin: 8px 0; }

/* /admin/: the private overview */
.ad-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ad-kpi { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ad-kpi strong { font-size: 1.35rem; }
.ad-kpi span { font-size: .85rem; color: var(--muted); }
.ad-kpi.bad, .ad-list .bad, tr.bad td { color: #b3261e; }
.ad-kpi.bad { border-color: #e6b3ae; }
.ad-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 22px; }
.ad-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; }
.ad-list li { overflow-wrap: anywhere; }
.ad-rank { margin: 0; padding-left: 1.4em; font-size: .9rem; }
.ad-rank li span { overflow-wrap: anywhere; }
.ad-rank li strong { float: right; margin-left: 8px; }
.ad-pre { white-space: pre-wrap; font-size: .78rem; max-height: 220px; overflow: auto; background: var(--bg, #fbf5e6); padding: 10px; border-radius: 10px; }
.admin .chart-card { margin: 10px 0; }

/* Block Lotto facts: labels may wrap so a long one ("Winner announced") never pushes past its box */
.lotto-facts dt { white-space: normal; line-height: 1.3; }
@media (max-width: 480px) { .lotto-facts dt { white-space: nowrap; } }

/* home: the latest Block Lotto winner, under the Play tiles */
.lotto-latest { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: .95rem; }
.lotto-latest a { font-weight: 800; white-space: nowrap; }
.lotto-latest .nowrap { white-space: nowrap; }

/* /admin/ controls */
.ad-switches { display: grid; gap: 8px; margin-bottom: 8px; }
.ad-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.ad-switch.bad { border-color: #e6b3ae; color: #b3261e; }
.ad-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-in { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); min-width: 0; flex: 1 1 160px; }
.ad-list .btn.small, .data .btn.small { padding: 3px 10px; font-size: .8rem; }