/* ===== Bubble re-theme: sky theme + soap-bubble keycaps (loaded last) ===== */

/* ---- 1. Sky light theme tokens (override OKLCH :root) ---- */
:root{
  --background: oklch(95% .03 232);
  --panel: oklch(99% .012 232 / .72);
  --faint: oklch(52% .05 245);
  --hairline-strong: oklch(35% .06 250 / .22);
  --glass-hover: oklch(40% .06 250 / .06);
  --foreground: oklch(34% .07 248);
  --card: oklch(100% 0 0 / .58);
  --card-foreground: oklch(32% .07 248);
  --popover: oklch(99% .01 232 / .96);
  --popover-foreground: oklch(30% .07 248);
  --primary: oklch(62% .15 240);
  --primary-foreground: oklch(99% .01 232);
  --secondary: oklch(93% .03 232 / .8);
  --secondary-foreground: oklch(34% .07 248);
  --muted: oklch(92% .03 232 / .7);
  --muted-foreground: oklch(48% .05 248);
  --accent: oklch(90% .05 235 / .8);
  --accent-foreground: oklch(32% .07 248);
  --border: oklch(38% .06 250 / .16);
  --input: oklch(38% .06 250 / .2);
  --ring: oklch(62% .15 240);
  --accent-from: oklch(72% .13 240);
  --accent-to: oklch(66% .14 250);
  /* component-level aliases used by stats/cards */
  --line: oklch(38% .06 250 / .14);
  --line2: oklch(38% .06 250 / .1);
  color-scheme: light;
}

/* ---- 2. Sky background with soft clouds ---- */
html, body{ background: transparent; }
body{
  min-height:100vh;
  background:
    radial-gradient(1100px 340px at 12% 8%, #ffffffcc, #ffffff00 60%),
    radial-gradient(900px 300px at 88% 22%, #ffffffb0, #ffffff00 62%),
    radial-gradient(1200px 420px at 50% 100%, #ffffffb5, #ffffff00 60%),
    linear-gradient(180deg, #8fd2f6 0%, #a9ddf8 32%, #c6ecfb 70%, #e4f5fe 100%) !important;
}
/* make the app's solid bg layers see-through so the sky shows */
.bg-background{ background-color: transparent !important; }

/* ---- 3. Soap-bubble keycaps (round, translucent, subtle iridescence) ---- */
.keycap__body{
  border-radius:50% !important;
  background:
    radial-gradient(42% 38% at 32% 26%, #ffffff66, #ffffff00 60%),
    radial-gradient(120% 120% at 70% 82%, #bfe4ff55, #ffffff00 56%),
    radial-gradient(100% 100% at 50% 50%, #ffffff12 0%, #a9d8f636 66%, #a9d8f600 74%) !important;
  box-shadow:
    inset 0 0 .16em #ffffff66,
    inset 0 -.06em .2em #3b7fbf30,
    0 .05em .22em #2b6fae2e !important;
   
}
.keycap__body::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 200deg,
    #d6f3ff, #a9e8ff, #cdd8ff, #ffd9ef, #d9fbf0, #a9e8ff, #d6f3ff);
  -webkit-mask: radial-gradient(closest-side, #0000 70%, #000 80%, #000 90%, #0000 97%);
          mask: radial-gradient(closest-side, #0000 70%, #000 80%, #000 90%, #0000 97%);
  opacity:.38; filter: saturate(.7); pointer-events:none;
}
.keycap__top{
  border-radius:50% !important; inset:0 !important;
  background:
    radial-gradient(12% 10% at 74% 22%, #ffffff, #ffffff00 70%),
    radial-gradient(30% 24% at 30% 22%, #ffffffd0, #ffffff00 76%) !important;
  box-shadow:none !important;
}
.keycap__bloom{
  background: radial-gradient(closest-side, #bfe9ff80, transparent) !important;
  opacity:.4 !important; 
}
.keycap__shadow{
  background: radial-gradient(closest-side, #2b6fae4d, #0000) !important;
  opacity:.45;
}
.keycap__legend{
  inset:0 !important; top:auto !important; left:auto !important;
  display:grid; place-items:center; letter-spacing:0;
  color:#2f6fae !important;
  text-shadow: 0 1px 2px #ffffffcc, 0 0 1px #ffffff !important;
  font-size:.36em !important;
}
.keycap--mini .keycap__legend{ font-size:.5em !important; }

/* ---- 4. Light frosted glass for cards/panels + nav ---- */
.nb__inner{ background:#ffffffe2 !important; border-color:#2b6fae2b !important; }
.nb__logo, .nb__links a, .nb__cap, .nb__caps, .nb__addr, .nb__burger, .nb__dot{ color:#285a96 !important; }
.nb__links a{ opacity:.9; }

.kcard, .step, .sk__card, .sl__card, .pdr__panel, .cc__card,
.kx-feed, .kx-feed__coin, .tk__head{
  background:#ffffffe2 !important;
  color:#27476b !important;
  border-color:#2b6fae26 !important;
   
  box-shadow:0 10px 30px -14px #2b6fae4d, inset 0 1px #ffffffcc !important;
}
.kcard__label, .sk__label, .pdr__label, .tk__label, .cc__label{ color:#4d6f94 !important; }
.kcard__val{ color:#27476b; }

/* illustration stages: soft sky-tint (keep a little depth so light bubbles still read) */
.step__stage{
  background:
    radial-gradient(70% 70% at 50% 60%, #7cb6e63d, transparent 70%),
    radial-gradient(#2b6fae14 1px, transparent 1.5px) 0 0 / 14px 14px,
    #dceffdd9 !important;
  border-color:#2b6fae1f !important;
  box-shadow:inset 0 0 40px #9cc9ef3b !important;
}

/* ---- 5. Boost bubble visibility on light backgrounds ---- */
.keycap__body{
  box-shadow:
    inset 0 0 .16em #ffffffe2,
    inset 0 -.06em .2em #3b7fbf66,
    0 0 0 .012em #4a90c966,
    0 .06em .26em #2b6fae55 !important;
}
.keycap__body::after{ opacity:.55 !important; filter:saturate(.85) !important; }

/* ---- 6. Remaining dark surfaces -> light ---- */
.ss2{ background:#ffffffe2 !important; color:#27476b !important; border-color:#2b6fae26 !important;
    }
.kcard__banner, .kcard__banner--chart{
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in oklab, var(--c) 18%, transparent), transparent 60%),
    #eaf5ffcc !important; }
.rk, .rs{ background:#ffffffe2 !important; color:#27476b !important; border-color:#2b6fae26 !important;
    }
.sf__src{ background:#ffffffcc !important; }

/* ---- 7. Docs figure stage: light sky (bubbles read via their rim/outline) ---- */
.st{ background: radial-gradient(120% 90% at 50% 0%, #eaf7ff, #c3e6f9 52%, #a6d6f2 100%) !important; border-radius:16px; }

/* ---- 9. Terminal pages (Discover / Launches / Pulse / coin) run inside .tm,
         which defines its own dark palette via local vars. Flip them to sky. ---- */
.tm{
  --bg: transparent !important;
  --panel: #ffffffea !important;
  --panel2: #ffffffda !important;
  --line: #2b6fae2b !important;
  --line2: #2b6fae1c !important;
  --tx: #27476b !important;
  --dim: #5a789c !important;
  --dim2: #8aa6c4 !important;
  --up: #11a06a !important;
  --dn: #d83a5a !important;
  --acc: #5a6ff0 !important;
}
.tm .kx-card, .tm .kx-feed, .tm .kx-feed__coin{
   
  box-shadow:0 10px 30px -16px #2b6fae45, inset 0 1px #ffffffcc !important;
}

/* ---- 8. Logo wordmark readable on light navbar/footer ---- */
.nb__logo, .nb__logo span{ color:#285a96 !important; }

/* ---- 10. Docs/AlphabetBurst figure (.ab) + prize card -> light sky ---- */
.ab{
  background: radial-gradient(90% 80% at 50% 0%, #eaf7ff, #c3e6f9 50%, #a6d6f2 100%) !important;
  border-color:#2b6fae26 !important;
}
.sc__prize{ background:#ffffffe6 !important; color:#27476b !important; border-color:#f3b63f !important; }

/* ---- 11. Letter chips/caps -> round colored bubbles (Discover + ticker + cards) ---- */
.kx-chip, .tkk__cap, .ktape__cap{
  border-radius:50% !important;
  background:
    radial-gradient(55% 50% at 33% 28%, #ffffffee, #ffffff00 55%),
    radial-gradient(120% 120% at 50% 70%, color-mix(in oklab, var(--c, #4aa0e0) 58%, white), color-mix(in oklab, var(--c, #4aa0e0) 96%, #16324e)) !important;
  box-shadow: inset 0 0 3px #ffffff80, inset 0 -2px 4px color-mix(in oklab, var(--c, #4aa0e0) 60%, #0a2036), 0 1px 3px #2b6fae45 !important;
  color:#fff !important;
  text-shadow:0 1px 2px color-mix(in oklab, var(--c, #4aa0e0) 70%, #0a2036) !important;
}

/* ---- 12. A-Z Race page (.cp / champions) -> sky light ---- */
.cp{ color:#27476b !important; }
.cp__card, .cp__prize, .cp__seg, .cp__back{
  background:#ffffffe2 !important; border-color:#2b6fae26 !important;
   
  box-shadow:0 10px 30px -16px #2b6fae45, inset 0 1px #ffffffcc !important;
}
.cp__eyebrow{ color:#4a74b4 !important; }
.cp__lede, .cp__sub, .cp__label{ color:#5a789c !important; }
.cp__title{ background:none !important; color:#1e3a5c !important; -webkit-text-fill-color:#1e3a5c !important; }

/* ---- 12b. Race stat cells + dividers -> light ---- */
.cp__stats{ background:#2b6fae26 !important; }
.cp__stats>div{ background:#ffffffc7 !important; }
.cp__stats>div>span, .cp__stats small, .cp__label{ color:#5a789c !important; }

/* ---- 13. Keys mint-tape panel (.ktape) -> sky light ---- */
.ktape{
  --kt-bg:#ffffffea !important; --kt-line:#2b6fae26 !important;
  --kt-dim:#5a789c !important; --kt-tx:#27476b !important;
  background:linear-gradient(180deg, #7cb6e622, transparent 160px), var(--kt-bg) !important;
  color:var(--kt-tx) !important;
   
}

/* ---- 14. Portfolio (.pf) + landing variant (.wl) scoped palettes -> sky light ---- */
.pf{
  --bg:transparent !important; --panel:#ffffffea !important; --panel2:#ffffffda !important;
  --line:#2b6fae26 !important; --line2:#2b6fae22 !important;
  --txt:#27476b !important; --dim:#5a789c !important; --dim2:#8aa6c4 !important;
}
.wl{
  --bg:transparent !important; --p1:#ffffffea !important; --p2:#ffffffda !important;
  --line:#2b6fae26 !important; --ink:#27476b !important; --mut:#5a789c !important; --dim:#8aa6c4 !important;
  background:radial-gradient(1000px 600px at 70% -10%, #7cb6e624, transparent 65%), transparent !important;
}

/* ---- 15. Docs figure text (.st__canvas) readable on light stage ---- */
.st__canvas{ color:#27476b !important; }

/* ---- 16. Home fee-split card (.fb5) -> sky light ---- */
.fb5{ color:#27476b !important; }
.fb5__card{ background:#ffffffe2 !important; color:#27476b !important; border-color:#2b6fae26 !important;
   
  box-shadow:0 10px 30px -14px #2b6fae4d, inset 0 1px #ffffffcc !important; }
.fb5__toggle{ background:#eaf3fb !important; border-color:#2b6fae26 !important; }
.fb5__sub, .fb5__rowwhat{ color:#5a789c !important; }
.fb5__hint{ color:#8aa6c4 !important; }
.fb5__per{ color:#4d6f94 !important; }
.fb5__segpct{ color:#27476b !important; text-shadow:none !important; }

/* ---- 17. Perf + navbar layout fixes ---- */
/* kill GPU-heavy blur on the sticky nav (was blur(16px)) */
.nb__inner{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:#ffffffe8 !important; }
/* logo: keep "Bubble" on one line and a touch smaller so the wider wordmark
   (vs "Keys") never overflows into the links on wide/Mac rendering */
.nb__logo{ white-space:nowrap; flex:none; }
.nb__logo span{ white-space:nowrap; }
.nb__logo span span{ font-size:18px !important; }

/* ---- 18. Discover letter filter cells (.kx-strip__k): visible letter on light ---- */
.kx-strip__k{
  background: color-mix(in oklab, var(--c, #4aa0e0) 16%, #ffffff) !important;
  border-color: color-mix(in oklab, var(--c, #4aa0e0) 35%, #d4e8f7) !important;
}
.kx-strip__k, .kx-strip__k b, .kx-strip__k span, .kx-strip__k div{
  color: color-mix(in oklab, var(--c, #4aa0e0) 72%, #0a2036) !important;
  text-shadow: none !important;
}
.kx-strip__k.is-on, .kx-strip__k[aria-pressed="true"]{
  background: color-mix(in oklab, var(--c, #4aa0e0) 40%, #ffffff) !important;
  border-color: var(--c, #4aa0e0) !important;
}

/* ---- 19. Perf: kill scroll-freeze (loaded last so it wins) ---- */
/* 19a. backdrop-filter repaints the whole blurred layer on EVERY scroll frame
   -> the single biggest cause of freezing. All these surfaces already have a
   (semi-)opaque background, so dropping the blur keeps them readable. */
*{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }

/* 19b. filter:blur() on the bubble bloom/shadow runs on every keycap/chip and
   is re-rasterized continuously (they also animate). The glow is already shaped
   by radial-gradients, so the blur filter only costs paint. Drop it. */
.keycap__bloom, .keycap__shadow, .cap__shadow,
.wl__ambient>div, .rk__glow, .kb__glow, .rs__bloom, .rs__drop.is-gold:after{
  filter:none !important;
}

/* 19c. GPU hint so the few remaining translucent panels composite cleanly */
.nb__inner{ transform:translateZ(0); }

/* ---- 20. Navbar: Safari-safe responsive fallbacks ----
   The original build gates the whole navbar with modern *range* media queries
   (@media (width<=860px), (width<=1180px), (width>=1181px) ...). Safari < 16.4
   silently ignores range syntax, so on a ~900-1180px window the links never
   collapse to the burger AND the wide full-search bar (.nb__sfull) stays visible
   when it shouldn't -> everything overflows and overlaps ("text on text" on Mac).
   Re-declare the same switches with classic min/max-width syntax, which every
   browser understands. On browsers that already honor the range queries these
   are identical and change nothing. */
@media (max-width: 860px){
  .nb__inner{ grid-template-columns: 1fr auto !important; }
  .nb__links{ display: none !important; }
  .nb__burger{ display: grid !important; }
  .nb__search kbd{ display: none !important; }
}
@media (min-width: 861px){
  .nb__links{ display: flex !important; }
  .nb__burger{ display: none !important; }
}
@media (max-width: 1180px){
  .nb__sfull{ display: none !important; }
  .nb__scompact{ display: contents !important; }
}
@media (min-width: 1181px){
  .nb__sfull{ display: contents !important; }
  .nb__scompact{ display: none !important; }
}
@media (min-width: 861px) and (max-width: 1370px){
  .nb__links a{ padding-inline: 8px !important; }
  .nb__unit{ display: none !important; }
}
@media (max-width: 480px){
  .nb__addr{ display: none !important; }
  .nb__buykeys{ display: none !important; }
  .nb__inner{ gap: 8px !important; padding: 0 8px 0 10px !important; }
  .nb__right{ gap: 6px !important; }
  .nb__connect{ padding: 0 12px !important; }
}
/* last-ditch: if content still can't fit, shrink columns instead of overlapping */
.nb__inner{ min-width: 0; }
.nb__links{ min-width: 0; }

/* ---- 21. Disable bubble (letter) purchases ---- */
/* The "Buy · X" pills on bubble cards (home / discover / /keys) become inert
   and read "Unavailable". Buying is turned off site-wide. */
.kcard__buy{
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: .6 !important;
  font-size: 0 !important;
  white-space: nowrap !important;
}
.kcard__buy > svg, .kcard__buy > img{ display: none !important; }
.kcard__buy::after{
  content: "Unavailable";
  font: 600 11.5px/1 Satoshi, system-ui, sans-serif;
  letter-spacing: .01em;
}

/* ---- 23. Remove the hardcoded "KEYS token · Launching soon" placeholder ----
   (Graduated-column card on Pulse + pinned Discover row). No platform token now. */
.keys-ph{ display:none !important; }

/* ---- 22. Remove the $BUBBLE token UI (belt-and-suspenders) ----
   Primary removal is data-driven: mock config now has keysToken:null and
   rewardAsset:SOL, so React no longer renders the Buy-$BUBBLE button or the
   SOL/$BUBBLE unit toggle. These rules hide anything that might still render. */
.nb__unit, .unit-toggle, .nb__buykeys, .buy-abc, .buy-abc-wrap{ display: none !important; }

/* ---- 24. Small fixes: wide-screen width, Portfolio tab, dark popups ---- */

/* 24a. Use more of wide screens (Mac): content was capped ~1200-1300px leaving
   big side margins. Widen the shell to most of the viewport. */
.nb__inner{ max-width: min(1680px, 95vw) !important; }
.max-w-\[1200px\]{ max-width: min(1680px, 95vw) !important; }
.max-w-\[1300px\]{ max-width: min(1680px, 95vw) !important; }

/* 24b. Remove the Portfolio tab (wallet menu / mobile / nav) */
.nb__menu a[href="/portfolio"], .nb__mobile a[href="/portfolio"], .nb__links a[href="/portfolio"]{ display: none !important; }

/* 24c. Wallet dropdown menu was dark (#13121b) -> light, text readable */
.nb__menu{ background:#ffffff !important; border:1px solid #cfe4f7 !important; box-shadow:0 20px 44px -16px #1c3a5e40 !important; }
.nb__menu a, .nb__menu button{ color:#27476b !important; }
.nb__menu a:hover, .nb__menu button:hover{ background:#eef6ff !important; color:#1e3a5c !important; }
/* connected wallet pill readable on the light navbar */
.nb__walletbtn{ background:#eaf3fb !important; color:#285a96 !important; border-color:#2b6fae2b !important; }

/* 24e. Letter-detail buy buttons disabled by bubble-patch (data-bw-off):
   inert + "Unavailable" (persists across React price re-renders) */
[data-bw-off]{
  pointer-events: none !important; cursor: not-allowed !important;
  opacity: .6 !important; font-size: 0 !important; position: relative;
}
[data-bw-off] > svg, [data-bw-off] > img{ display: none !important; }
[data-bw-off]::after{
  content: "Unavailable";
  font: 600 13px/1 Satoshi, system-ui, sans-serif; letter-spacing: .01em;
}

/* 24d. Bubble hover tooltip (.keypop) was dark -> light, text readable */
.keypop{ background:#ffffffef !important; border:1px solid #2b6fae33 !important; color:#27476b !important;
  box-shadow:0 14px 34px -14px #2b6fae66 !important; }
.keypop__head, .keypop__tag, .keypop__val{ color:#1e3a5c !important; }
.keypop__label{ color:#5a789c !important; }
.keypop__val--green{ color:#11a06a !important; }