/* ============================================================
   Clay Cats Club — MINT page clay skin
   ------------------------------------------------------------
   Drop-in theme that makes the mint app match the main site.
   Loaded AFTER the app's own stylesheet, so it only overrides.

   It (1) remaps the mint app's palette to the site's clay
   colours, (2) themes the RainbowKit wallet UI via its --rk-*
   variables, and (3) rebuilds every panel / button / chip as a
   rolled lump of clay.
   ============================================================ */

:root {
  /* ---- remap the mint app palette to the clay palette ---- */
  --bg: #d7d9d8;
  --panel: #ffffff;
  --panel-2: #f2f3f1;
  --ink: #241f1a;
  --muted: #5b544a;
  --accent: #c0392b;
  --accent-2: #2f5aa8;
  --ok: #2f7a4f;
  --err: #b3261e;
  --warn: #b7791f;
  color-scheme: light;

  /* ---- site colours ---- */
  --clay-red: #c0392b;
  --clay-red-d: #982c21;
  --clay-purple: #6c4f9c;
  --clay-blue: #2f5aa8;
  --clay-tan: #e3c58f;
  --navy: #1e2a4a;
  --cream: #d7d9d8;

  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;

  /* ---- clay material ---- */
  --clay-rim:
    inset 2px 3px 3px rgba(255, 255, 255, .75),
    inset -4px -5px 9px rgba(36, 31, 26, .16),
    inset 0 0 0 1px rgba(36, 31, 26, .06),
    0 9px 14px -6px rgba(36, 31, 26, .38),
    0 22px 40px -20px rgba(36, 31, 26, .38);
  --clay-rim-sm:
    inset 1px 2px 2px rgba(255, 255, 255, .8),
    inset -2px -3px 5px rgba(36, 31, 26, .16),
    0 5px 10px -5px rgba(36, 31, 26, .35);
  --clay-dent:
    inset 4px 5px 9px rgba(36, 31, 26, .3),
    inset -2px -2px 4px rgba(255, 255, 255, .55),
    0 1px 0 rgba(255, 255, 255, .5);
  --blob-b: 58% 42% 45% 55% / 44% 58% 42% 56%;
  --clay-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

}

/* RainbowKit's variables live on the [data-rk] element (injected at
   runtime), so target it directly with extra specificity to win. */
html [data-rk] {
  --rk-fonts-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --rk-colors-accentColor: #c0392b;
  --rk-colors-accentColorForeground: #ffffff;
  --rk-colors-connectButtonBackground: #1e2a4a;
  --rk-colors-connectButtonText: #ffffff;
  --rk-colors-connectButtonInnerBackground: linear-gradient(0deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .14));
  --rk-radii-actionButton: 14px;
  --rk-radii-connectButton: 14px;
  --rk-radii-menuButton: 14px;
  --rk-radii-modal: 22px;
  --rk-radii-modalMobile: 26px;
  --rk-colors-modalBackground: #f2f3f1;
  --rk-colors-modalText: #241f1a;
  --rk-colors-modalTextSecondary: #5b544a;
  --rk-colors-modalTextDim: rgba(36, 31, 26, .35);
  --rk-colors-modalBorder: rgba(36, 31, 26, .08);
  --rk-colors-profileForeground: rgba(36, 31, 26, .05);
  --rk-colors-menuItemBackground: rgba(36, 31, 26, .06);
  --rk-colors-profileAction: rgba(36, 31, 26, .06);
  --rk-colors-profileActionHover: rgba(36, 31, 26, .12);
  --rk-colors-generalBorder: rgba(36, 31, 26, .08);
  --rk-colors-generalBorderDim: rgba(36, 31, 26, .04);
  --rk-colors-closeButton: rgba(36, 31, 26, .5);
  --rk-colors-closeButtonBackground: rgba(36, 31, 26, .06);
  --rk-colors-selectedOptionBorder: rgba(36, 31, 26, .1);
  --rk-colors-actionButtonSecondaryBackground: rgba(36, 31, 26, .06);
  --rk-colors-selectedOptionBorder: rgba(36, 31, 26, .1);
}

/* ---------- clay ground + moulded type ---------- */
html, body, #root { height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 700px at 82% -12%, #eef0ee 0%, transparent 60%),
    radial-gradient(900px 620px at -5% 18%, #d2d5d3 0%, transparent 55%),
    radial-gradient(1100px 820px at 105% 108%, #ddd6c8 0%, transparent 60%),
    linear-gradient(180deg, #dcdedd 0%, #cccfcc 55%, #d6d0c3 100%);
  background-attachment: fixed;
}

/* ---------- floating clay colour splotches (borrowed from the main site) ---------- */
.mint-blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.mint-blob {
  position: absolute;
  border-radius: 48% 52% 60% 40% / 55% 45% 55% 45%;
  opacity: .5;
  filter: blur(2px);
  box-shadow: var(--clay-rim-sm);
  animation: mint-float 14s ease-in-out infinite;
}
.mint-blob--red    { width: 340px; height: 320px; background: radial-gradient(circle at 35% 30%, #e8a99f, #cf6a5b); top: -80px; left: -70px; }
.mint-blob--purple { width: 380px; height: 360px; background: radial-gradient(circle at 35% 30%, #c3b4e0, #8b74b8); top: 28%; right: -120px; animation-delay: 2.5s; }
.mint-blob--blue   { width: 300px; height: 300px; background: radial-gradient(circle at 35% 30%, #adc0e8, #6f8fc9); bottom: -90px; left: 22%; animation-delay: 5s; }
@keyframes mint-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(24px, -30px) scale(1.06); }
  66%      { transform: translate(-18px, 18px) scale(.96); }
}
/* keep the app content above the splotches */
#root { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .mint-blob { animation: none; }
}

h1, h2 {
  font-family: var(--font-display);
  color: var(--navy);
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, .55),
    1px 1px 0 rgba(36, 31, 26, .22),
    0 5px 0 rgba(36, 31, 26, .15),
    0 11px 15px rgba(36, 31, 26, .26);
}

.muted { color: var(--muted); }
.center { text-align: center; }
.glyph {
  /* swap the ◈ glyph for the club's main logo */
  font-size: 0;
  width: 48px; height: 48px;
  flex: 0 0 auto;
  background-image: url("assets/logo-main.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* the logo has a soft white bg — multiply drops it into the clay */
  mix-blend-mode: multiply;
}

/* ---------- clay nav bar (matches the main site header) ---------- */
.bar {
  position: sticky; top: 10px; z-index: 50;
  justify-content: flex-start;
  gap: 14px;
  background-color: rgba(224, 226, 224, .92);
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  border-radius: 1.4rem 1.2rem 1.5rem 1.25rem / 1.2rem 1.45rem 1.25rem 1.4rem;
  padding: 10px 16px;
  box-shadow: var(--clay-rim-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.brand { margin-right: auto; }
.brand h1 { font-size: 1.2rem; }
.brand .muted { font-size: 12px; margin-top: 1px; }

.mint-nav { display: flex; align-items: center; gap: 1.4rem; }
.mint-nav a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
  text-decoration: none;
  transition: color .15s ease;
}
.mint-nav a:hover { color: var(--clay-red); }
@media (max-width: 560px) { .mint-nav { display: none; } }

/* ---------- clay panels / tiles ---------- */
.panel {
  background-color: #fff;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  border: 0;
  border-radius: 1.6rem 1.35rem 1.7rem 1.4rem / 1.4rem 1.7rem 1.35rem 1.65rem;
  box-shadow: var(--clay-rim);
}

.art {
  /* swap the 🐱 emoji for the club's main logo */
  border: 0;
  font-size: 0;
  border-radius: 1.2rem 1rem 1.3rem 1.05rem / 1.05rem 1.3rem 1rem 1.25rem;
  background-color: #fbfbfa;
  background-image: url("assets/logo-main.png");
  background-size: 92%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: var(--clay-rim-sm);
  overflow: hidden;
}

.stat {
  background-color: #fff;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  border: 0;
  border-radius: 1rem 1.2rem 1rem 1.2rem / 1.2rem 1rem 1.2rem 1rem;
  box-shadow: var(--clay-rim-sm);
}
.stat-label { color: var(--muted); }
.stat-value { font-family: var(--font-display); color: var(--navy); }

/* ---------- clay chips ---------- */
.chip {
  border: 0;
  border-radius: 1rem 1.15rem 1rem 1.15rem / 1.15rem 1rem 1.15rem 1rem;
  background-color: #fff;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  box-shadow: var(--clay-rim-sm);
  color: var(--navy);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease, border-radius .3s ease;
}
.chip:hover { transform: translateY(-2px); border-radius: var(--blob-b); }
.chip.on {
  background-color: #e7eaed;
  box-shadow: var(--clay-dent);
  color: var(--navy);
  transform: translateY(1px) scale(.99, 1.02);
}

/* ---------- clay buttons ---------- */
.btn {
  border-radius: 1.3rem 1.05rem 1.4rem 1.1rem / 1.05rem 1.35rem 1.1rem 1.4rem;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  box-shadow: var(--clay-rim);
  font-family: var(--font-display);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease, border-radius .35s ease, background-color .2s ease;
}
.btn.primary { background-color: var(--clay-red); background-image: var(--clay-noise); }
.btn.primary:hover { background-color: var(--clay-red-d); }
.btn:hover { transform: translateY(-3px) scale(1.025, 1.01); border-radius: var(--blob-b); }
.btn:active { transform: translateY(2px) scale(.98, 1.03); box-shadow: var(--clay-dent); }
.btn:disabled { opacity: .55; box-shadow: var(--clay-dent); }

/* ---------- pressed clay inputs ---------- */
.field { color: var(--muted); }
.field textarea,
textarea {
  background-color: #f6f6f4;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  border: 0;
  border-radius: 1rem 1.15rem 1rem 1.15rem / 1.15rem 1rem 1.15rem 1rem;
  box-shadow: var(--clay-dent);
  color: var(--ink);
}

/* ---------- bits ---------- */
.banner.warn {
  background-color: #fdf3dc;
  border: 0;
  border-radius: 1rem;
  box-shadow: var(--clay-rim-sm);
  color: #7a5a12;
}
code { background: rgba(36, 31, 26, .08); color: var(--ink); }
.contract-link { color: var(--clay-blue); font-weight: 700; }
.contract-link:hover { color: var(--clay-red); }
.foot { color: var(--muted); }
.ok { color: var(--ok); }
.err { color: var(--err); }

/* ---------- app text tweaks (CSS only — never touches React's DOM) ---------- */
/* status line "Base · Closed" -> "Public mint open" */
.card-head .muted { font-size: 0; }
.card-head .muted::after {
  content: "Public mint open";
  font-size: 13px;
  font-weight: 700;
  color: #2f7a4f;
}
/* footer chain name -> "Based on Base" */
.foot span { font-size: 0; }
.foot span::after { content: "Based on Base"; font-size: 13px; }
/* price value -> "… on Base" */
.stats .stat:nth-child(2) .stat-value::after { content: " on Base"; }

/* ---------- matte clay grain over the whole page ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .26;
  mix-blend-mode: multiply;
  background-image: var(--clay-noise);
}