/* ─────────────────────────────────────────────────────────
   COBALT — Atmosphere, hero, wheel intro, micro-animations
   ───────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --cobalt-display: "Instrument Serif", "Times New Roman", serif;
  --cobalt-body: "Geist", system-ui, -apple-system, sans-serif;
  --cobalt-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --cobalt-accent: #0052ff;
  --cobalt-accent-soft: rgba(0, 82, 255, 0.16);
}

body { font-family: var(--cobalt-body); font-feature-settings: "ss01" on, "ss02" on; }
h1, h2, h3 {
  font-family: var(--cobalt-display);
  font-style: italic;
  letter-spacing: -0.012em;
  font-weight: 400;
}
code, pre, .font-mono, [class*="font-mono"] { font-family: var(--cobalt-mono); }

/* ── Global lowercase aesthetic ───────────────────────────
   All visible text becomes lowercase. Excluded: addresses,
   hashes, transaction signatures, code blocks, and mono fonts
   where case matters (Solana pubkeys are case-sensitive). */
body, body * {
  text-transform: lowercase;
}
.cobalt-ca__addr,
.cobalt-dock__hashrate,
.cobalt-dock__wallet,
.cobalt-dock__balance,
.cobalt-whisper__item,
code, pre,
[class*="lucide"],
[class*="font-mono"],
.cobalt-mono,
input, textarea,
a[href*="explorer.solana.com"],
a[href*="solscan"],
a[href*="jup.ag"] {
  text-transform: none !important;
}

/* ── Hammer cursor (only AFTER the hero is dismissed) ─── */
html.cobalt-entered, html.cobalt-entered body {
  cursor: url("/inject/hammer-cursor.svg") 4 4, auto;
}
html.cobalt-entered a,
html.cobalt-entered button,
html.cobalt-entered [role="button"],
html.cobalt-entered [role="tab"],
html.cobalt-entered input,
html.cobalt-entered textarea,
html.cobalt-entered select,
html.cobalt-entered [data-discover="true"] {
  cursor: url("/inject/hammer-cursor.svg") 4 4, pointer;
}

/* ── Brand logo: subtle living pulse ──────────────────── */
img[alt="COBALT"] {
  animation: cobaltLogoBreathe 6s ease-in-out infinite;
  transition: filter 0.4s ease, transform 0.4s ease;
}
img[alt="COBALT"]:hover {
  filter: drop-shadow(0 0 12px rgba(0, 82, 255, 0.55));
  transform: scale(1.05) rotate(-2deg);
}
@keyframes cobaltLogoBreathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 82, 255, 0)); }
  50%      { filter: drop-shadow(0 0 8px rgba(0, 82, 255, 0.35)); }
}

/* ── Live atmosphere: drifting glow behind everything ─── */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 30% at 20% 20%, rgba(0, 82, 255, 0.12), transparent 70%),
    radial-gradient(35% 28% at 80% 85%, rgba(77, 139, 255, 0.10), transparent 70%),
    radial-gradient(30% 25% at 60% 40%, rgba(0, 82, 255, 0.06), transparent 70%);
  filter: blur(20px);
  animation: cobaltAtmosphere 26s ease-in-out infinite alternate;
}
@keyframes cobaltAtmosphere {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, 4%, 0) scale(1.04); }
}

/* ── Scroll-fade utility ──────────────────────────────── */
[data-cobalt-fade] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-cobalt-fade].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Wheel intro: drop in, spin, settle ───────────────── */
[data-cobalt-wheel] {
  animation: cobaltWheelDrop 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: 50% 50%;
}
@keyframes cobaltWheelDrop {
  0%   { opacity: 0; transform: translateY(-220px) scale(0.55) rotate(-220deg); filter: blur(8px); }
  55%  { opacity: 1; transform: translateY(18px)  scale(1.06) rotate(18deg);   filter: blur(0); }
  75%  { transform: translateY(-6px) scale(0.99) rotate(-6deg); }
  100% { opacity: 1; transform: translateY(0)    scale(1)    rotate(0);       filter: blur(0); }
}
/* Tiles stagger-fall after the wheel lands. */
[data-cobalt-wheel] svg [data-cobalt-tile] {
  opacity: 0;
  transform-origin: 290px 290px; /* viewBox center */
  animation: cobaltTileFall 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cobaltTileFall {
  0%   { opacity: 0; transform: translateY(-110px) scale(0.6) rotate(-20deg); }
  70%  { opacity: 1; transform: translateY(6px)    scale(1.04) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0)      scale(1)    rotate(0); }
}
/* Idle gentle drift of the wheel after intro */
[data-cobalt-wheel].is-settled {
  animation: cobaltWheelDrift 14s ease-in-out infinite alternate;
}
@keyframes cobaltWheelDrift {
  0%   { transform: rotate(0)   translateY(0); }
  100% { transform: rotate(2deg) translateY(-4px); }
}

/* ── Click ripple on any button ───────────────────────── */
.cobalt-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: cobaltRipple 0.55s ease-out;
}
@keyframes cobaltRipple {
  to { transform: scale(3.5); opacity: 0; }
}

/* ── Nav link hover: soft underline grow ──────────────── */
nav a, nav button, [role="tab"] {
  position: relative;
  transition: color 0.25s ease, transform 0.25s ease;
}
nav a:hover, nav button:hover, [role="tab"]:hover {
  transform: translateY(-1px);
}

/* ── Hero / intro splash (minimal current.trade-style) ─── */
.cobalt-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 22vh;
  gap: 40px;
  text-align: center;
  background: transparent;
  color: #fff;
  overflow: hidden;
  font-family: var(--cobalt-body);
  cursor: default;
}
.cobalt-hero *,
.cobalt-hero *::before,
.cobalt-hero *::after {
  cursor: inherit;
}
.cobalt-hero a, .cobalt-hero button,
.cobalt-hero [role="button"], .cobalt-hero input,
.cobalt-hero textarea, .cobalt-hero select {
  cursor: pointer;
}
.cobalt-hero input,
.cobalt-hero textarea { cursor: text; }
.cobalt-hero.is-hiding {
  opacity: 0;
  pointer-events: none;
}
.cobalt-hero.is-light {
  background: #f5f7fa;
  color: #0d0e12;
}

/* Theme toggle pinned to the top-right corner. */
.cobalt-hero__theme {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.cobalt-hero__theme:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateY(-1px);
}
.cobalt-hero.is-light .cobalt-hero__theme {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

/* Central squircle logo plate. */
/* ── Hero background — current.trade caustics vibe ────────────
   Layers (bottom → top):
   1. SVG turbulence filter → flowing organic blue/cyan pattern
   2. Conic gradient → slow color sweep around centre
   3. Three coloured blur-beams → drifting glow blobs
   4. Vignette → soft black corners to focus the centre */
.cobalt-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #02050d;
}
.cobalt-hero__caustics {
  position: absolute;
  inset: -10%;
  filter: blur(18px) saturate(150%);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: cobaltCausticsDrift 28s ease-in-out infinite alternate;
}
.cobalt-hero__caustics svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes cobaltCausticsDrift {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.18) translate(-4%, 3%); }
}

.cobalt-hero__conic {
  position: absolute;
  inset: -30%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 82, 255, 0.35),
    rgba(120, 200, 255, 0.18),
    rgba(178, 124, 255, 0.30),
    rgba(0, 200, 255, 0.20),
    rgba(0, 82, 255, 0.35)
  );
  filter: blur(60px) saturate(140%);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: cobaltConicSpin 32s linear infinite;
}
@keyframes cobaltConicSpin {
  to { transform: rotate(360deg); }
}

.cobalt-hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 35%, rgba(0,0,0,0.45) 80%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

.cobalt-hero__beam {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  mix-blend-mode: screen;
}
.cobalt-hero__beam--a {
  width: 580px; height: 580px;
  background: #0052ff;
  top: -10%; left: -8%;
  animation: cobaltBeamDrift1 22s ease-in-out infinite alternate;
}
.cobalt-hero__beam--b {
  width: 520px; height: 520px;
  background: #4d8bff;
  top: 30%; right: -10%;
  animation: cobaltBeamDrift2 28s ease-in-out infinite alternate;
}
.cobalt-hero__beam--c {
  width: 460px; height: 460px;
  background: #b27cff;
  bottom: -8%; left: 30%;
  animation: cobaltBeamDrift3 26s ease-in-out infinite alternate;
}
@keyframes cobaltBeamDrift1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8%, 12%) scale(1.15); }
}
@keyframes cobaltBeamDrift2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-10%, 8%) scale(1.10); }
}
@keyframes cobaltBeamDrift3 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, -6%) scale(1.08); }
}

/* Hero text + headline */
.cobalt-hero__headline {
  position: relative;
  z-index: 3;
  font-family: var(--cobalt-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 6.4vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.cobalt-hero__headline-line {
  display: block;
  opacity: 0.001;
  transform: translateY(14px);
  animation: cobaltAppearSpring 0.6s cubic-bezier(0.34, 1.46, 0.64, 1) forwards;
}
.cobalt-hero__headline-line:nth-of-type(2) { animation-delay: 0.25s; }
.cobalt-hero__headline-line--accent em {
  font-style: italic;
  background: linear-gradient(180deg, #9fbcff 0%, #4d8bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cobalt-hero__sub {
  position: relative;
  z-index: 3;
  max-width: 540px;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  margin: 4px 0 0;
  opacity: 0.001;
  transform: translateY(14px);
  animation: cobaltAppearSpring 0.6s cubic-bezier(0.34, 1.46, 0.64, 1) 0.4s forwards;
}

/* ── /stockpile route: push content lower (was glued to top) ── */
html.cobalt-route-stockpile main {
  padding-top: 48px !important;
}
html.cobalt-route-history main,
html.cobalt-route-affiliate main {
  padding-top: 32px !important;
}

/* ── Glass card behind hero — current.trade style ─────────────
   Frosted glass panel with backdrop-blur, edge highlight, and a
   diagonal shine that sweeps once on entrance. Sits behind the
   squircle + ENTERENCE button. */
.cobalt-hero__glass {
  position: absolute;
  top: 22vh;
  left: 50%;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 360px;
  transform: translateX(-50%);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow:
    0 30px 70px rgba(0, 82, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  animation: cobaltGlassIn 1.1s cubic-bezier(0.16, 1.2, 0.3, 1) 0.05s forwards;
}
@keyframes cobaltGlassIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(40px) scale(0.92); filter: blur(8px); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    filter: blur(0); }
}
.cobalt-hero__glass-shine {
  position: absolute;
  top: -50%; left: -50%;
  width: 60%; height: 200%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  transform: skewX(-18deg) translateX(-100%);
  animation: cobaltGlassShine 5s ease-in-out 1.5s infinite;
}
@keyframes cobaltGlassShine {
  0%   { transform: skewX(-18deg) translateX(-100%); }
  30%  { transform: skewX(-18deg) translateX(380%); }
  100% { transform: skewX(-18deg) translateX(380%); }
}
/* The hero content sits above the glass card. */
.cobalt-hero__mark-wrap,
.cobalt-hero__submit,
.cobalt-hero__theme { position: relative; z-index: 3; }

.cobalt-hero__mark-wrap {
  --cobalt-mx: 0px;
  --cobalt-my: 0px;
  --cobalt-rx: 0deg;
  --cobalt-ry: 0deg;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: translate3d(var(--cobalt-mx), var(--cobalt-my), 0)
             rotateX(var(--cobalt-rx))
             rotateY(var(--cobalt-ry));
  transition: transform 0.06s linear;
}

.cobalt-hero__mark {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 26px;
  background: linear-gradient(180deg, #2a7bff 0%, #0052ff 100%);
  box-shadow:
    0 22px 60px rgba(0, 82, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -10px 20px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Dramatic spring entrance — lifted from current.trade Framer
     spec ({ bounce: 0.2, duration: 0.4 }) but scaled up so the
     spring overshoot is clearly visible. */
  opacity: 0;
  transform: translateY(60px) scale(0.7);
  filter: blur(8px);
  animation: cobaltMarkEnter 1.4s cubic-bezier(0.16, 1.4, 0.3, 1) 0.2s forwards,
             cobaltMarkBreathe 4.5s ease-in-out 1.8s infinite,
             cobaltMarkSpin 18s linear 1.8s infinite;
}
.cobalt-hero__mark img {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.96;
  animation: cobaltMarkSpinReverse 18s linear 1.2s infinite;
}
.cobalt-hero__mark-shine {
  position: absolute;
  top: 0; left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: cobaltMarkShine 3.2s ease-in-out 1.4s infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes cobaltMarkEnter {
  0%   { opacity: 0;     transform: translateY(60px) scale(0.7);  filter: blur(8px); }
  40%  { opacity: 1;     transform: translateY(-14px) scale(1.08); filter: blur(0); }
  65%  { transform: translateY(5px)  scale(0.97); }
  85%  { transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1;     transform: translateY(0)    scale(1);     filter: blur(0); }
}
@keyframes cobaltMarkSpin {
  to { transform: rotate(360deg); }
}
@keyframes cobaltMarkSpinReverse {
  to { transform: rotate(-360deg); }
}
@keyframes cobaltMarkShine {
  0%   { left: -120%; opacity: 0; }
  20%  { opacity: 1; }
  60%  { left: 160%; opacity: 0.8; }
  100% { left: 160%; opacity: 0; }
}
/* Framer "appearEffect" — lifted from current.trade index.html.
   Source spec (script-81ba3be1 / inline JSON):
     initial: {opacity: 0.001, y: 10}
     animate: {opacity: 1, y: 0}
     transition: {type: "spring", bounce: 0.2, duration: 0.4}
   CSS cannot do native spring; cubic-bezier(0.34, 1.46, 0.64, 1)
   approximates a spring with bounce 0.2. */
@keyframes cobaltAppearSpring {
  0%   { opacity: 0.001; transform: translateY(10px); }
  60%  { opacity: 1;     transform: translateY(-2px); }
  100% { opacity: 1;     transform: translateY(0); }
}
/* Secondary appear used by the nav-style spring (y: -150, delay 0.3s). */
@keyframes cobaltAppearDown {
  0%   { opacity: 0.001; transform: translateX(-50%) translateY(-150px); }
  100% { opacity: 1;     transform: translateX(-50%) translateY(0); }
}
@keyframes cobaltMarkBreathe {
  0%, 100% { box-shadow: 0 22px 60px rgba(0, 82, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -10px 20px rgba(0,0,0,0.15); }
  50%      { box-shadow: 0 30px 80px rgba(0, 82, 255, 0.7),  inset 0 1px 0 rgba(255,255,255,0.55),  inset 0 -10px 20px rgba(0,0,0,0.1); }
}

/* Form: input + pill button. */
.cobalt-hero__form {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease;
  opacity: 0.001;
  transform: translateY(10px);
  animation: cobaltAppearSpring 0.42s cubic-bezier(0.34, 1.46, 0.64, 1) 0.12s forwards;
}
.cobalt-hero.is-light .cobalt-hero__form {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
.cobalt-hero__form:focus-within {
  border-color: rgba(77, 139, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}
.cobalt-hero__form.is-submitted {
  transform: scale(0.96);
  opacity: 0.6;
}
.cobalt-hero__input {
  flex: 1;
  min-width: 0;
  width: 280px;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  outline: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0;
}
.cobalt-hero__input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.cobalt-hero.is-light .cobalt-hero__input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.cobalt-hero__input.is-invalid {
  animation: cobaltShake 0.4s ease;
}
@keyframes cobaltShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.cobalt-hero__submit {
  position: relative;
  padding: 14px 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2670ff, #0052ff);
  color: #fff;
  font-family: var(--cobalt-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: 0;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow:
    0 8px 24px rgba(0, 82, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cobalt-hero__submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(0, 82, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cobalt-hero__submit:active { transform: translateY(0); }

/* Standalone CTA variant (no surrounding form). */
.cobalt-hero__cta-only {
  padding: 16px 38px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(40px) scale(0.85);
  filter: blur(6px);
  animation: cobaltCtaEnter 1.1s cubic-bezier(0.16, 1.4, 0.3, 1) 0.85s forwards,
             cobaltCtaGlow 2.6s ease-in-out 2.0s infinite;
}
.cobalt-hero__cta-only::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 40%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 60%,
    transparent 100%
  );
  transform: skewX(-22deg);
  animation: cobaltCtaShine 3.8s ease-in-out 2.2s infinite;
  pointer-events: none;
}
@keyframes cobaltCtaEnter {
  0%   { opacity: 0; transform: translateY(40px) scale(0.85); filter: blur(6px); }
  50%  { opacity: 1; transform: translateY(-8px)  scale(1.05); filter: blur(0); }
  80%  { transform: translateY(2px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}
@keyframes cobaltCtaGlow {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 82, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.25); }
  50%      { box-shadow: 0 16px 38px rgba(0, 82, 255, 0.7), inset 0 1px 0 rgba(255,255,255,0.35); }
}
@keyframes cobaltCtaShine {
  0%   { left: -100%; }
  60%  { left: 160%; }
  100% { left: 160%; }
}

.cobalt-hero__success {
  position: absolute;
  bottom: 24%;
  font-family: var(--cobalt-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4d8bff;
  animation: cobaltSuccessIn 0.4s ease both;
}
@keyframes cobaltSuccessIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .cobalt-hero { gap: 80px; padding: 0 16px; }
  .cobalt-hero__form { flex-direction: column; gap: 6px; border-radius: 20px; padding: 6px; }
  .cobalt-hero__input { width: 100%; text-align: center; }
}

/* ── Bottom blur dock ─────────────────────────────────── */
.cobalt-dock {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0, 82, 255, 0.08);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 82, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    background 0.4s ease,
    border-color 0.4s ease;
}
.cobalt-dock:hover {
  transform: translateX(-50%) translateY(-4px) scale(1.02);
  background: rgba(0, 82, 255, 0.14);
  border-color: rgba(0, 82, 255, 0.4);
  box-shadow:
    0 14px 44px rgba(0, 82, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cobalt-dock.is-pressed {
  transform: translateX(-50%) translateY(0) scale(0.97);
  transition-duration: 0.12s;
}
.cobalt-dock__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 2px solid rgba(0, 82, 255, 0.6);
  opacity: 0;
}
.cobalt-dock.is-pressed .cobalt-dock__pulse {
  animation: cobaltPulse 0.6s ease-out;
}
@keyframes cobaltPulse {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}
.cobalt-dock__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cobalt-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
.cobalt-dock__item--dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4d8bff;
  box-shadow: 0 0 0 4px rgba(77, 139, 255, 0.18);
  animation: cobaltBeat 1.6s ease-in-out infinite;
}
@keyframes cobaltBeat {
  0%, 100% { box-shadow: 0 0 0 4px rgba(77, 139, 255, 0.18); }
  50%      { box-shadow: 0 0 0 9px rgba(77, 139, 255, 0); }
}
.cobalt-dock__sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 640px) {
  .cobalt-dock { padding: 8px 14px; gap: 10px; bottom: 80px; }
  .cobalt-dock__item { font-size: 10px; }
  .cobalt-hero__meta { gap: 16px; font-size: 9px; flex-wrap: wrap; padding: 0 16px; }
}

/* ── Two view modes ────────────────────────────────────────
   "/"      → landing (hero + how + compare + footer). SPA hidden.
   "/#mine" → dashboard (the SPA wheel + dock). Landing hidden. */
html.cobalt-landing #root,
html.cobalt-landing .cobalt-dock,
html.cobalt-landing .cobalt-ca,
html.cobalt-landing .cobalt-topbar,
html.cobalt-landing .cobalt-whisper,
html.cobalt-landing .cobalt-tiles,
html.cobalt-landing .cobalt-stats,
html.cobalt-landing .cobalt-round,
html.cobalt-landing .cobalt-wheel-overlay {
  display: none !important;
}
html.cobalt-mine .cobalt-section,
html.cobalt-mine .cobalt-footer {
  display: none !important;
}
html.cobalt-mine #root { display: block !important; }
html.cobalt-mine .cobalt-ca { display: inline-flex; }
/* On any non-mine route (about/stockpile/history/landing/etc.), hide
   the floating dock + CA banner so only /mine shows them. */
html:not(.cobalt-mine) .cobalt-dock,
html:not(.cobalt-mine) .cobalt-ca {
  display: none !important;
}
/* The old corner topbar is fully replaced by the topnav on landing
   and by the dock-adjacent controls in mine view. Hide it everywhere. */
.cobalt-topbar { display: none !important; }

/* ── Snap-scroll layout for main page ──────────────────────
   landing has 3 snap sections: hero → how → compare. Footer
   follows in normal flow. Mine view is single 100vh (the SPA). */
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh;
  max-height: none !important;
}
html.cobalt-snap, html.cobalt-snap body {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
#root {
  display: block;
}
#root > div {
  height: 100vh !important;
}
.cobalt-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
}
#root { scroll-snap-align: start; scroll-snap-stop: always; }
.cobalt-footer { scroll-snap-align: end; }

/* ── Unified landing background ─────────────────────────
   One fluid gradient layered on the html element, so all 3
   sections flow into each other smoothly without hard color
   breaks at section boundaries. Decorative radials per section
   are layered ON TOP as transparent ambient lights. */
html.cobalt-landing,
html.cobalt-landing body {
  background:
    /* Soft purple bottom */
    radial-gradient(80% 40% at 50% 110%, rgba(178, 124, 255, 0.18), transparent 65%),
    /* Mid blue ambience */
    radial-gradient(60% 50% at 80% 55%, rgba(77, 139, 255, 0.10), transparent 65%),
    radial-gradient(60% 50% at 20% 35%, rgba(0, 82, 255, 0.14), transparent 65%),
    /* Top-down vertical wash */
    linear-gradient(180deg, #000 0%, #03060f 12%, #050a1c 45%, #060a1f 75%, #050614 100%);
  background-attachment: fixed;
  background-size: cover;
}
html.cobalt-landing body::before {
  /* Animated drifting halo behind everything */
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(35% 28% at 30% 25%, rgba(0, 82, 255, 0.18), transparent 70%),
    radial-gradient(30% 25% at 70% 75%, rgba(178, 124, 255, 0.14), transparent 70%);
  filter: blur(40px);
  animation: cobaltLandingDrift 28s ease-in-out infinite alternate;
}
@keyframes cobaltLandingDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.08); }
}

/* Section base styles — TRANSPARENT background so the unified
   gradient on html shows through. Per-section accents are subtle
   radial overlays only. */
.cobalt-section {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  color: #fff;
  background: transparent;
  overflow: hidden;
}
.cobalt-section--how::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 40% at 50% 30%, rgba(0, 82, 255, 0.10), transparent 70%);
  z-index: -1;
}
/* Hero-specific overrides (higher specificity than .cobalt-section). */
.cobalt-section.cobalt-section--hero {
  justify-content: flex-start;
  padding: 16vh 24px 64px;
  gap: 24px;
}
.cobalt-section.cobalt-section--hero .cobalt-hero__mark-wrap { order: 1; }
.cobalt-section.cobalt-section--hero .cobalt-hero__headline { order: 2; margin-top: 6px; }
.cobalt-section.cobalt-section--hero .cobalt-hero__sub      { order: 3; }
.cobalt-section.cobalt-section--hero .cobalt-hero__submit   { order: 4; margin-top: 6px; }
.cobalt-section--compare::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 45% at 50% 70%, rgba(178, 124, 255, 0.12), transparent 70%);
  z-index: -1;
}
.cobalt-section__wrap {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.cobalt-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--cobalt-mono);
  font-size: 11px;
  letter-spacing: 0.36em;
  color: rgba(159, 188, 255, 0.7);
  margin-bottom: 24px;
}
.cobalt-section__num {
  font-family: var(--cobalt-mono);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
}
.cobalt-section__title {
  font-family: var(--cobalt-display);
  font-style: italic;
  font-size: clamp(48px, 7.2vw, 100px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: #fff;
}
.cobalt-section__title em {
  font-style: italic;
  background: linear-gradient(180deg, #9fbcff 0%, #4d8bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cobalt-section__lede {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 56px;
}
.cobalt-section__hint,
.cobalt-scrollhint {
  display: none !important;
}

/* ── Spring entrance lifted from current.trade ───────────
   Each section's content fades + lifts on first viewport entry,
   matching Framer spring { bounce:0.2, duration:0.4 }. */
.cobalt-section--how .cobalt-section__eyebrow,
.cobalt-section--how .cobalt-section__title,
.cobalt-section--how .cobalt-section__lede,
.cobalt-section--how .cobalt-step,
.cobalt-section--compare .cobalt-section__eyebrow,
.cobalt-section--compare .cobalt-section__title,
.cobalt-section--compare .cobalt-section__lede,
.cobalt-section--compare .cobalt-vs {
  opacity: 0;
  transform: translateY(36px) scale(0.96);
  filter: blur(4px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1.4, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1.4, 0.3, 1),
    filter 0.9s ease;
}
.cobalt-section.is-in-view :is(
  .cobalt-section__eyebrow,
  .cobalt-section__title,
  .cobalt-section__lede,
  .cobalt-step,
  .cobalt-vs
) {
  filter: blur(0);
}
.cobalt-section.is-in-view .cobalt-section__eyebrow { transition-delay: 0s; }
.cobalt-section.is-in-view .cobalt-section__title   { transition-delay: 0.08s; }
.cobalt-section.is-in-view .cobalt-section__lede    { transition-delay: 0.16s; }
.cobalt-section.is-in-view .cobalt-step:nth-child(1) { transition-delay: 0.22s; }
.cobalt-section.is-in-view .cobalt-step:nth-child(2) { transition-delay: 0.28s; }
.cobalt-section.is-in-view .cobalt-step:nth-child(3) { transition-delay: 0.34s; }
.cobalt-section.is-in-view .cobalt-step:nth-child(4) { transition-delay: 0.40s; }
.cobalt-section.is-in-view .cobalt-vs { transition-delay: 0.22s; }
.cobalt-section.is-in-view :is(
  .cobalt-section__eyebrow,
  .cobalt-section__title,
  .cobalt-section__lede,
  .cobalt-step,
  .cobalt-vs
) {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .cobalt-section--how :is(.cobalt-section__title, .cobalt-section__lede, .cobalt-section__eyebrow, .cobalt-step),
  .cobalt-section--compare :is(.cobalt-section__title, .cobalt-section__lede, .cobalt-section__eyebrow, .cobalt-vs) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* "Back to landing" button — visible only in mine view.
   Specificity boosted to win against the later .cobalt-topbar__btn rule. */
button.cobalt-topbar__back { display: none; }
html.cobalt-mine button.cobalt-topbar__back {
  display: inline-flex;
  background: rgba(255, 200, 90, 0.10);
  border-color: rgba(255, 200, 90, 0.40);
  color: #ffd07b;
}
html.cobalt-mine button.cobalt-topbar__back:hover {
  background: rgba(255, 200, 90, 0.18);
  color: #fff;
}

/* How-it-works steps grid */
.cobalt-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.cobalt-step {
  padding: 28px 24px 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              background 0.35s ease;
}
.cobalt-step:hover {
  transform: translateY(-4px);
  border-color: rgba(77, 139, 255, 0.4);
  background: linear-gradient(180deg, rgba(0, 82, 255, 0.08), rgba(255, 255, 255, 0.02));
}
.cobalt-step__num {
  font-family: var(--cobalt-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: rgba(159, 188, 255, 0.7);
  margin-bottom: 22px;
}
.cobalt-step__title {
  font-family: var(--cobalt-display);
  font-style: italic;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: #fff;
}
.cobalt-step__body {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

/* vs section — two columns */
.cobalt-vs {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  overflow: hidden;
}
.cobalt-vs__col {
  padding: 26px 28px 22px;
}
.cobalt-vs__col--ours {
  background: linear-gradient(180deg, rgba(0, 82, 255, 0.12), rgba(0, 82, 255, 0.03));
}
.cobalt-vs__col--theirs {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.cobalt-vs__brand {
  font-family: var(--cobalt-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.cobalt-vs__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.cobalt-vs__sep span {
  font-family: var(--cobalt-display);
  font-style: italic;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.4);
}
.cobalt-vs__row {
  padding: 11px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.cobalt-vs__row:first-of-type { border-top: 0; padding-top: 4px; }
.cobalt-vs__label {
  font-family: var(--cobalt-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(159, 188, 255, 0.6);
  margin-bottom: 5px;
}
.cobalt-vs__body {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.cobalt-vs__row.is-plus .cobalt-vs__body { color: #cffae3; }
.cobalt-vs__row.is-plus .cobalt-vs__body::before {
  content: "▲ ";
  color: #36d399;
  margin-right: 2px;
}
.cobalt-vs__row.is-minus .cobalt-vs__body { color: rgba(255, 180, 180, 0.7); }
.cobalt-vs__row.is-minus .cobalt-vs__body::before {
  content: "▽ ";
  color: rgba(255, 120, 120, 0.7);
  margin-right: 2px;
}

@media (max-width: 880px) {
  .cobalt-vs { grid-template-columns: 1fr; }
  .cobalt-vs__sep {
    border-left: 0; border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 0;
  }
  .cobalt-section__title { font-size: 44px; }
  html.cobalt-snap, html.cobalt-snap body { scroll-snap-type: none; }
}

/* ── Hide unwanted SPA nav items (Stake + Referrals) ─────────── */
a[href="/stake"], a[href="/affiliate"],
[aria-label="Stake"], [aria-label="Referrals"] {
  display: none !important;
}
/* ── Hide SPA's volume + sliders buttons (top-right) ──────────── */
[aria-label="Mute sounds"], [aria-label="Unmute sounds"],
[aria-label="Open utilities menu"], [aria-label="Open settings"],
button[data-sound-skip-click="true"],
.lucide-volume2, .lucide-volume-x,
button:has(> .lucide-sliders-horizontal) {
  display: none !important;
}
/* ── Hide Telegram links from SPA header/footer ────────────── */
a[href*="t.me/"], a[href*="tg.zinc"], a[href*="tg.hush"],
a[href*="github.com"]:not([href*="solscan"]),
[aria-label="Telegram"], [aria-label="GitHub"] {
  display: none !important;
}

/* ── Hover tooltip for dock buttons (data-tooltip="..." attr) ───── */
.cobalt-tip {
  position: fixed;
  z-index: 80;
  max-width: 320px;
  padding: 10px 14px;
  background: rgba(8, 11, 28, 0.94);
  border: 1px solid rgba(0, 82, 255, 0.45);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--cobalt-mono);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cobalt-tip.is-in {
  opacity: 1;
  transform: translateY(0);
}
.cobalt-tip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 82, 255, 0.45);
}

/* ── Top nav — drops down on landing
   ports current.trade's framer spring: initial y:-150, damping:30,
   stiffness:400, delay:0.3. Approximate spring with cubic-bezier
   that has matching settle behaviour. */
.cobalt-topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 28px;
  background: rgba(5, 8, 16, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--cobalt-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  /* Drop-in spring */
  opacity: 0.001;
  transform: translateY(-150px);
  animation: cobaltNavDrop 0.95s cubic-bezier(0.16, 1.2, 0.3, 1) 0.30s forwards;
}
@keyframes cobaltNavDrop {
  0%   { opacity: 0.001; transform: translateY(-150px); }
  55%  { opacity: 1;     transform: translateY(8px); }
  75%  { transform: translateY(-3px); }
  100% { opacity: 1;     transform: translateY(0); }
}
/* Mine view doesn't need the landing nav. */
html.cobalt-mine .cobalt-topnav { display: none; }
.cobalt-topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-family: var(--cobalt-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.cobalt-topnav__brand img {
  width: 26px; height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(0, 82, 255, 0.5));
}
.cobalt-topnav__links {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}
.cobalt-topnav__links a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  font-family: var(--cobalt-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  transition: color 0.2s ease, transform 0.2s ease;
}
.cobalt-topnav__links a:hover { color: #fff; transform: translateY(-1px); }
.cobalt-topnav__enter {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2670ff, #0052ff);
  color: #fff !important;
  font-family: var(--cobalt-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 82, 255, 0.40), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cobalt-topnav__enter:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 82, 255, 0.6), inset 0 1px 0 rgba(255,255,255,0.32);
}
@media (max-width: 720px) {
  .cobalt-topnav { padding: 10px 14px; }
  .cobalt-topnav__links { gap: 12px; }
  .cobalt-topnav__links a:not([aria-label]) { display: none; }
  .cobalt-topnav__enter { padding: 6px 12px; font-size: 10px; }
}

/* ── Top bar (twitter + telegram + wallet) ─────────────────── */
.cobalt-topbar {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cobalt-topbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(8, 11, 28, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--cobalt-mono);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}
.cobalt-topbar__btn:hover {
  background: rgba(0, 82, 255, 0.18);
  border-color: rgba(0, 82, 255, 0.5);
  color: #fff;
  transform: translateY(-1px);
}
.cobalt-topbar__x, .cobalt-topbar__tg {
  width: 36px;
  padding: 0;
}
.cobalt-topbar__wallet {
  padding: 0 14px;
}
.cobalt-topbar__wallet-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 0 transparent;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.cobalt-topbar__wallet.is-connected .cobalt-topbar__wallet-dot {
  background: #36d399;
  box-shadow: 0 0 0 3px rgba(54, 211, 153, 0.18);
  animation: cobaltBeat 1.6s ease-in-out infinite;
}
.cobalt-topbar__wallet.is-connected {
  background: linear-gradient(180deg, rgba(54, 211, 153, 0.18), rgba(54, 211, 153, 0.08));
  border-color: rgba(54, 211, 153, 0.45);
  color: #cffae3;
}

/* Wallet popover menu */
.cobalt-walletmenu {
  position: fixed;
  z-index: 75;
  min-width: 280px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(8, 11, 28, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  font-family: var(--cobalt-mono);
  animation: cobaltAppearSpring 0.36s cubic-bezier(0.34, 1.46, 0.64, 1) both;
}
.cobalt-walletmenu__head {
  padding: 4px 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
}
.cobalt-walletmenu__label {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(159, 188, 255, 0.8);
  margin-bottom: 6px;
}
.cobalt-walletmenu__addr {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  word-break: break-all;
  line-height: 1.4;
  text-transform: none;
}
.cobalt-walletmenu__act {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 9px 12px;
  border-radius: 8px;
  margin-top: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: left;
}
.cobalt-walletmenu__act:hover {
  background: rgba(0, 82, 255, 0.22);
  color: #fff;
}
.cobalt-walletmenu__act--danger:hover {
  background: rgba(255, 80, 80, 0.18);
  color: #ffd6d6;
}

/* ── Footer ─────────────────────────────────────────────────── */
.cobalt-footer {
  width: 100%;
  padding: 80px 24px 40px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  color: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 5;
}
.cobalt-footer__wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cobalt-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--cobalt-display);
  font-style: italic;
  font-size: 26px;
  color: #fff;
}
.cobalt-footer__brand img { width: 28px; height: 28px; object-fit: contain; }
.cobalt-footer__col { display: flex; flex-direction: column; gap: 6px; }
.cobalt-footer__h {
  font-family: var(--cobalt-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(159, 188, 255, 0.6);
  margin-bottom: 10px;
}
.cobalt-footer__col a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.15s ease;
}
.cobalt-footer__col a:hover { color: #fff; }
.cobalt-footer__legal {
  max-width: 1180px;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cobalt-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.4);
}
.cobalt-footer__legal-sep { opacity: 0.4; }
@media (max-width: 720px) {
  .cobalt-footer__wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.cobalt-info {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 120px 24px 160px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(0, 82, 255, 0.10), transparent 70%),
    linear-gradient(180deg, transparent 0%, #050810 16%, #050810 100%);
  color: #fff;
}
.cobalt-info__wrap { max-width: 1080px; margin: 0 auto; }

.cobalt-info__eyebrow {
  font-family: var(--cobalt-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: rgba(159, 188, 255, 0.7);
  margin-bottom: 18px;
}
.cobalt-info__title {
  font-family: var(--cobalt-display);
  font-style: italic;
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: #fff;
}
.cobalt-info__lede {
  max-width: 580px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 64px;
}

/* How it works: 4 numbered steps */
.cobalt-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 120px;
}
.cobalt-step {
  padding: 32px 26px;
  background: linear-gradient(180deg, rgba(8, 11, 28, 0.95), rgba(8, 11, 28, 0.65));
  position: relative;
  transition: background 0.25s ease, transform 0.25s ease;
}
.cobalt-step:hover {
  background: linear-gradient(180deg, rgba(0, 82, 255, 0.10), rgba(8, 11, 28, 0.7));
}
.cobalt-step__num {
  font-family: var(--cobalt-display);
  font-style: italic;
  font-size: 64px;
  font-weight: 400;
  background: linear-gradient(180deg, rgba(159, 188, 255, 0.9), rgba(77, 139, 255, 0.4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 18px;
}
.cobalt-step__title {
  font-family: var(--cobalt-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: #fff;
}
.cobalt-step__body {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

/* Comparison table */
.cobalt-compare {
  background: rgba(8, 11, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  font-family: var(--cobalt-body);
}
.cobalt-compare__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cobalt-compare__row:last-child { border-bottom: 0; }
.cobalt-compare__row--head { background: rgba(255, 255, 255, 0.03); }
.cobalt-compare__cell {
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.cobalt-compare__cell--label {
  color: rgba(159, 188, 255, 0.85);
  font-family: var(--cobalt-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: lowercase;
}
.cobalt-compare__cell--head {
  font-family: var(--cobalt-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.01em;
}
.cobalt-compare__cell--ours { color: #b9f5d6; }
.cobalt-compare__cell--ours strong { color: #fff; font-weight: 600; }
.cobalt-compare__cell--theirs { color: rgba(255, 255, 255, 0.55); }
.cobalt-compare__cell .mark {
  display: inline-block;
  font-family: var(--cobalt-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 6px;
  text-transform: lowercase;
}
.cobalt-compare__cell .mark--yes { background: rgba(54, 211, 153, 0.16); color: #36d399; }
.cobalt-compare__cell .mark--no  { background: rgba(255, 90, 90, 0.16); color: #ff7d7d; }
.cobalt-compare__cell .mark--soft { background: rgba(255, 200, 90, 0.16); color: #ffd07b; }

/* Section spacing between dashboard and info */
.cobalt-scrollhint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--cobalt-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  animation: cobaltScrollHint 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes cobaltScrollHint {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

@media (max-width: 720px) {
  .cobalt-info { padding: 80px 16px 100px; }
  .cobalt-info__title { font-size: 44px; }
  .cobalt-compare__row { grid-template-columns: 1fr; }
  .cobalt-compare__row--head { display: none; }
  .cobalt-compare__cell--label { background: rgba(255,255,255,0.03); padding-top: 14px; }
}

/* ── CA banner — sits below the wheel, above the dock ─ */
.cobalt-ca {
  position: fixed;
  bottom: 90px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 14px;
  background: rgba(8, 11, 28, 0.85);
  border: 1px solid rgba(0, 82, 255, 0.45);
  border-radius: 999px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--cobalt-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  animation: cobaltCaIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.cobalt-ca.is-empty {
  border-color: rgba(178, 124, 255, 0.4);
  background: rgba(8, 11, 28, 0.75);
}
@keyframes cobaltCaIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(12px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cobalt-ca__label {
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #9fbcff;
  text-transform: uppercase;
}
.cobalt-ca__addr {
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 360px;
}
.cobalt-ca__soon {
  color: rgba(220, 200, 255, 0.85);
  letter-spacing: 0.04em;
  font-size: 11px;
}
.cobalt-ca__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b27cff;
  box-shadow: 0 0 0 3px rgba(178, 124, 255, 0.22);
  animation: cobaltBeat 1.6s ease-in-out infinite;
}
.cobalt-ca__act {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 82, 255, 0.20);
  color: #cfddff;
  text-decoration: none;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid rgba(0, 82, 255, 0.3);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.cobalt-ca__act:hover {
  background: rgba(0, 82, 255, 0.40);
  color: #fff;
  transform: translateY(-1px);
}
.cobalt-ca__act.is-copied {
  background: rgba(54, 211, 153, 0.4);
  color: #fff;
}
.cobalt-ca__act--buy {
  background: linear-gradient(180deg, #2670ff, #0052ff);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.cobalt-ca__act--buy:hover {
  background: linear-gradient(180deg, #3a86ff, #0e5cff);
  color: #fff;
}
@media (max-width: 720px) {
  .cobalt-ca { font-size: 10px; padding: 5px 8px 5px 12px; gap: 6px; }
  .cobalt-ca__addr { max-width: 140px; }
  .cobalt-ca__act { padding: 2px 8px; font-size: 9.5px; }
  .cobalt-ca__act--link { display: none; }
}

/* ── Hidden floating widgets (kept in DOM, just not shown) ─── */
.cobalt-whisper,
.cobalt-tiles,
.cobalt-stats,
.cobalt-round {
  display: none !important;
}

/* ── Wheel countdown fill ────────────────────────────────
   Each of the 30 tile elements progressively lights up as
   the round timer drains. At t=60s nothing is lit; at t=0
   all 30 tiles are blue. Implemented by JS adding the class
   `is-fill` to tiles tiles[0..N] every ~2s. */
svg[aria-label="Board positions"] [data-cobalt-tile] {
  transition: fill 0.5s ease, stroke 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
  transform-origin: 290px 290px;
}
svg[aria-label="Board positions"] [data-cobalt-tile].is-fill {
  fill: rgba(0, 82, 255, 0.45) !important;
  stroke: rgba(120, 170, 255, 0.85) !important;
  stroke-width: 1.5 !important;
  filter: drop-shadow(0 0 6px rgba(77, 139, 255, 0.55));
}
svg[aria-label="Board positions"] [data-cobalt-tile].is-active {
  fill: rgba(255, 200, 90, 0.22) !important;
  stroke: rgba(255, 200, 90, 0.95) !important;
  stroke-width: 2 !important;
  filter: drop-shadow(0 0 10px rgba(255, 200, 90, 0.7));
  animation: cobaltTileActivePulse 1s ease-in-out infinite alternate;
}
@keyframes cobaltTileActivePulse {
  0%   { filter: drop-shadow(0 0 6px rgba(255, 200, 90, 0.5)); }
  100% { filter: drop-shadow(0 0 18px rgba(255, 200, 90, 1)); }
}
svg[aria-label="Board positions"] [data-cobalt-tile].is-winner {
  fill: rgba(54, 211, 153, 0.75) !important;
  stroke: rgba(255, 255, 255, 0.95) !important;
  stroke-width: 2.5 !important;
  filter: drop-shadow(0 0 18px rgba(54, 211, 153, 0.9));
  animation: cobaltTileWinPulse 0.9s ease-in-out infinite alternate;
}
@keyframes cobaltTileWinPulse {
  0%   { filter: drop-shadow(0 0 10px rgba(54, 211, 153, 0.6)); }
  100% { filter: drop-shadow(0 0 28px rgba(54, 211, 153, 1)); }
}

/* ── Whisper Feed — anonymized activity ticker ─────────── */
.cobalt-whisper {
  position: fixed;
  right: 18px;
  bottom: 80px;
  z-index: 35;
  width: 320px;
  max-width: calc(100vw - 28px);
  background: rgba(8, 11, 28, 0.66);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(120, 90, 255, 0.18);
  border-radius: 14px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--cobalt-mono);
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  transition: transform 0.4s ease, opacity 0.4s ease;
  animation: cobaltWhisperIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}
@keyframes cobaltWhisperIn {
  0%   { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.cobalt-whisper.is-collapsed .cobalt-whisper__list,
.cobalt-whisper.is-collapsed .cobalt-whisper__foot {
  display: none;
}
.cobalt-whisper__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(180, 162, 255, 0.9);
  border-bottom: 1px solid rgba(120, 90, 255, 0.16);
  cursor: url("/inject/hammer-cursor.svg") 4 4, pointer;
  user-select: none;
}
.cobalt-whisper__pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #b27cff;
  box-shadow: 0 0 0 3px rgba(178, 124, 255, 0.18);
  animation: cobaltBeat 1.6s ease-in-out infinite;
}
.cobalt-whisper__lock {
  margin-left: auto;
  font-size: 11px;
  color: rgba(150, 220, 255, 0.7);
}
.cobalt-whisper__list {
  list-style: none;
  margin: 0;
  padding: 6px 10px 10px;
  max-height: 200px;
  overflow: hidden;
}
.cobalt-whisper__item {
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  padding: 5px 6px;
  border-radius: 6px;
  color: rgba(220, 220, 255, 0.78);
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
}
.cobalt-whisper__item.is-in {
  opacity: 1;
  transform: translateX(0);
}
.cobalt-whisper__item:first-child {
  background: linear-gradient(90deg, rgba(153, 69, 255, 0.10), transparent 70%);
  color: rgba(255, 255, 255, 0.96);
}
.cobalt-whisper__foot {
  padding: 6px 14px 8px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  border-top: 1px solid rgba(120, 90, 255, 0.10);
  text-align: right;
}
@media (max-width: 900px) {
  .cobalt-whisper {
    right: 12px;
    bottom: 140px;
    width: 260px;
  }
}
@media (max-width: 560px) {
  .cobalt-whisper { display: none; }
}

/* Hash-rate readout + live indicator */
.cobalt-dock__hashrate {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  margin-right: 4px;
}
.cobalt-dock__live {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  margin-right: 6px;
  vertical-align: middle;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.cobalt-dock__live.is-live {
  background: #36d399;
  box-shadow: 0 0 0 3px rgba(54, 211, 153, 0.18);
  animation: cobaltLivePulse 1.4s ease-in-out infinite;
}
@keyframes cobaltLivePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(54, 211, 153, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(54, 211, 153, 0); }
}
.cobalt-whisper__item--mine {
  background: linear-gradient(90deg, rgba(54, 211, 153, 0.10), transparent 70%) !important;
  color: rgba(220, 255, 230, 0.95) !important;
}

/* ── Dock: balance chip + wallet button ───────────────── */
.cobalt-dock__balance {
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  font-weight: 600;
}
.cobalt-dock__wallet {
  appearance: none;
  border: 0;
  background: linear-gradient(180deg, #2670ff, #0052ff);
  color: #fff;
  font-family: var(--cobalt-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow:
    0 4px 12px rgba(0, 82, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.cobalt-dock__wallet:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px rgba(0, 82, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cobalt-dock__wallet:active { transform: translateY(0); }
.cobalt-dock__wallet.is-connected {
  background: rgba(54, 211, 153, 0.18);
  color: #b9f5d6;
  font-family: var(--cobalt-mono);
  letter-spacing: 0;
  box-shadow:
    0 0 0 1px rgba(54, 211, 153, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.cobalt-dock__wallet.is-connected:hover {
  background: rgba(54, 211, 153, 0.26);
  box-shadow:
    0 0 0 1px rgba(54, 211, 153, 0.5),
    0 8px 18px rgba(54, 211, 153, 0.25);
}
.cobalt-dock__wallet.is-loading {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

/* On-chain mint button */
.cobalt-dock__mint {
  appearance: none;
  border: 1px solid rgba(54, 211, 153, 0.4);
  background: rgba(54, 211, 153, 0.10);
  color: #b9f5d6;
  font-family: var(--cobalt-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.cobalt-dock__mint:hover {
  background: rgba(54, 211, 153, 0.20);
  border-color: rgba(54, 211, 153, 0.7);
  color: #cffae3;
  transform: translateY(-1px);
}
.cobalt-dock__mint.is-working {
  background: rgba(255, 200, 90, 0.14);
  border-color: rgba(255, 200, 90, 0.5);
  color: #ffe8b6;
  animation: cobaltMintPulse 1.2s ease-in-out infinite;
}
.cobalt-dock__mint.is-done {
  background: rgba(54, 211, 153, 0.4);
  border-color: rgba(54, 211, 153, 0.9);
  color: #fff;
}
.cobalt-dock__mint:disabled {
  cursor: default;
  transform: none;
}
@keyframes cobaltMintPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 90, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 200, 90, 0.25); }
}

/* SHADOW toggle */
.cobalt-dock__shadow {
  appearance: none;
  border: 1px solid rgba(178, 124, 255, 0.36);
  background: rgba(178, 124, 255, 0.08);
  color: rgba(220, 200, 255, 0.9);
  font-family: var(--cobalt-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  margin-left: 4px;
  border-radius: 999px;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.cobalt-dock__shadow:hover {
  background: rgba(178, 124, 255, 0.18);
  border-color: rgba(178, 124, 255, 0.7);
  color: #fff;
  transform: translateY(-1px);
}
.cobalt-dock__shadow.is-on {
  background: linear-gradient(180deg, #9b6dff, #7b48ff);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 18px rgba(123, 72, 255, 0.55);
}

/* STAKE button */
.cobalt-dock__stake {
  appearance: none;
  border: 1px solid rgba(77, 139, 255, 0.36);
  background: rgba(77, 139, 255, 0.08);
  color: rgba(200, 220, 255, 0.95);
  font-family: var(--cobalt-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  margin-left: 4px;
  border-radius: 999px;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.cobalt-dock__stake:hover {
  background: rgba(77, 139, 255, 0.18);
  border-color: rgba(77, 139, 255, 0.7);
  color: #fff;
  transform: translateY(-1px);
}

/* Wheel tiles: per-tile feedback for bond / shadow / pending */
svg[aria-label="Board positions"] [data-cobalt-tile].is-pending {
  fill: rgba(255, 200, 90, 0.35) !important;
  stroke: rgba(255, 200, 90, 0.85) !important;
  animation: cobaltTilePending 1.0s ease-in-out infinite alternate;
}
svg[aria-label="Board positions"] [data-cobalt-tile].is-bonded-onchain {
  fill: rgba(0, 82, 255, 0.55) !important;
  stroke: rgba(160, 200, 255, 1) !important;
  stroke-width: 2 !important;
  filter: drop-shadow(0 0 8px rgba(77, 139, 255, 0.85));
}
svg[aria-label="Board positions"] [data-cobalt-tile].is-shadow-onchain {
  fill: rgba(178, 124, 255, 0.55) !important;
  stroke: rgba(220, 180, 255, 1) !important;
  stroke-width: 2 !important;
  filter: drop-shadow(0 0 10px rgba(178, 124, 255, 0.85));
}
@keyframes cobaltTilePending {
  0%   { filter: drop-shadow(0 0 4px rgba(255, 200, 90, 0.4)); }
  100% { filter: drop-shadow(0 0 14px rgba(255, 200, 90, 0.9)); }
}

/* Stake popover */
.cobalt-stake-pop {
  position: fixed;
  z-index: 60;
  width: 300px;
  padding: 14px 16px 12px;
  background: rgba(8, 11, 28, 0.95);
  border: 1px solid rgba(77, 139, 255, 0.35);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65);
  font-family: var(--cobalt-mono);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  animation: cobaltAppearSpring 0.4s cubic-bezier(0.34, 1.46, 0.64, 1) both;
}
.cobalt-stake-pop__head {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(160, 200, 255, 0.9);
  margin-bottom: 10px;
}
.cobalt-stake-pop__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.cobalt-stake-pop__row span:first-child { color: rgba(255,255,255,0.55); }
.cobalt-stake-pop__input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.cobalt-stake-pop__input:focus {
  outline: none;
  border-color: rgba(77, 139, 255, 0.6);
}
.cobalt-stake-pop__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cobalt-stake-pop__act {
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.15s ease;
}
.cobalt-stake-pop__act.is-stake {
  background: linear-gradient(180deg, #2670ff, #0052ff);
  border: 0;
  color: #fff;
}
.cobalt-stake-pop__act.is-stake:hover { transform: translateY(-1px); }
.cobalt-stake-pop__act.is-unstake {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
}
.cobalt-stake-pop__act.is-unstake:hover {
  background: rgba(255,255,255,0.12);
}
.cobalt-stake-pop.is-busy { opacity: 0.55; pointer-events: none; }
.cobalt-stake-pop__note {
  margin-top: 10px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

/* ── Bond Tiles panel ─────────────────────────────────── */
.cobalt-tiles {
  position: fixed;
  left: 18px;
  bottom: 80px;
  z-index: 35;
  width: 264px;
  background: rgba(8, 11, 28, 0.66);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(0, 82, 255, 0.18);
  border-radius: 14px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--cobalt-mono);
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  animation: cobaltWhisperIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
.cobalt-tiles.is-collapsed .cobalt-tiles__grid,
.cobalt-tiles.is-collapsed .cobalt-tiles__foot {
  display: none;
}
.cobalt-tiles__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(160, 195, 255, 0.92);
  border-bottom: 1px solid rgba(0, 82, 255, 0.16);
  user-select: none;
}
.cobalt-tiles__pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4d8bff;
  box-shadow: 0 0 0 3px rgba(77, 139, 255, 0.18);
  animation: cobaltBeat 1.6s ease-in-out infinite;
}
.cobalt-tiles__count {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}
.cobalt-tiles__grid {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.cobalt-tiles__chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--cobalt-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  padding: 6px 0;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.cobalt-tiles__chip:hover {
  background: rgba(0, 82, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}
.cobalt-tiles__chip.is-bonded {
  background: linear-gradient(180deg, #2670ff, #0052ff);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0, 82, 255, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.cobalt-tiles__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 8px;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  border-top: 1px solid rgba(0, 82, 255, 0.10);
}
.cobalt-tiles__foot span { flex: 1; }
.cobalt-tiles__clear {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--cobalt-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cobalt-tiles__clear:hover {
  color: #fff;
  border-color: rgba(255, 100, 100, 0.4);
}
@media (max-width: 720px) {
  .cobalt-tiles { left: 10px; bottom: 140px; width: 224px; }
}
@media (max-width: 560px) {
  .cobalt-tiles { display: none; }
}

/* ── Round chip ───────────────────────────────────────── */
.cobalt-round {
  position: fixed;
  top: 88px;
  right: 18px;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(8, 11, 28, 0.76);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 82, 255, 0.22);
  font-family: var(--cobalt-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  animation: cobaltWhisperIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.cobalt-round__label { color: rgba(160, 195, 255, 0.85); }
.cobalt-round__no    { color: #fff; font-weight: 600; }
.cobalt-round__sep   {
  width: 1px; height: 12px;
  background: rgba(255, 255, 255, 0.12);
}
.cobalt-round__time {
  font-variant-numeric: tabular-nums;
  color: #36d399;
  font-weight: 600;
}
.cobalt-round__pickwrap { color: rgba(255, 255, 255, 0.4); }
.cobalt-round__pick { font-weight: 600; color: rgba(255, 255, 255, 0.75); }
.cobalt-round.is-resolving {
  background: rgba(54, 211, 153, 0.18);
  border-color: rgba(54, 211, 153, 0.6);
  animation: cobaltRoundFlash 1.4s ease both;
}
@keyframes cobaltRoundFlash {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.08); box-shadow: 0 0 40px rgba(54, 211, 153, 0.5); }
  100% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
}
.cobalt-whisper__item--round {
  background: linear-gradient(90deg, rgba(0, 82, 255, 0.18), transparent 70%) !important;
  color: rgba(220, 230, 255, 0.95) !important;
}

/* Hide the SVG's own centre labels (dash + "No active round")
   so our overlay is the only thing in the centre. Tile numbers
   live at other x-positions and are NOT affected. */
svg[aria-label="Board positions"] text[x="290"] {
  display: none;
}

/* ── Wheel-centre overlay ─────────────────────────────── */
.cobalt-wheel-overlay {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cobalt-wheel-overlay__inner {
  text-align: center;
  font-family: var(--cobalt-mono);
  color: #fff;
}
.cobalt-wheel-overlay__logo {
  width: 28px; height: 28px;
  object-fit: contain;
  opacity: 0.55;
  animation: cobaltLogoSpin 14s linear infinite;
  margin-bottom: 4px;
}
@keyframes cobaltLogoSpin { to { transform: rotate(360deg); } }
.cobalt-wheel-overlay__time {
  font-family: var(--cobalt-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  text-shadow: 0 0 24px rgba(0, 82, 255, 0.45);
}
.cobalt-wheel-overlay__label {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.cobalt-wheel-overlay__winner {
  display: none;
}
.cobalt-wheel-overlay__winner.is-active {
  display: block;
  animation: cobaltWinReveal 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.cobalt-wheel-overlay__winner-num {
  display: block;
  font-family: var(--cobalt-display);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 700;
  color: #36d399;
  text-shadow: 0 0 32px rgba(54, 211, 153, 0.6);
}
.cobalt-wheel-overlay__winner-msg {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(54, 211, 153, 0.8);
}
@keyframes cobaltWinReveal {
  0%   { opacity: 0; transform: scale(0.5) rotate(-10deg); filter: blur(8px); }
  60%  { opacity: 1; transform: scale(1.1) rotate(2deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ── Sparkline canvas in dock ─────────────────────────── */
.cobalt-dock__spark {
  display: inline-block;
  vertical-align: middle;
}

/* ── Dock mute button ─────────────────────────────────── */
.cobalt-dock__mute {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-family: var(--cobalt-mono);
  transition: color 0.2s ease, background 0.2s ease;
  margin-left: 4px;
}
.cobalt-dock__mute:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}
.cobalt-dock__mute.is-muted {
  color: rgba(255, 90, 90, 0.85);
  background: rgba(255, 90, 90, 0.10);
}

/* ── Toasts ─────────────────────────────────────────────── */
.cobalt-toasts {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.cobalt-toast {
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(8, 11, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  font-family: var(--cobalt-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: auto;
  max-width: 320px;
}
.cobalt-toast.is-in { opacity: 1; transform: translateX(0); }
.cobalt-toast--ok    { border-color: rgba(54, 211, 153, 0.5); color: #cffae3; }
.cobalt-toast--info  { border-color: rgba(77, 139, 255, 0.4); color: #d5e3ff; }
.cobalt-toast--warn  { border-color: rgba(255, 200, 90, 0.5); color: #ffe8b6; }
.cobalt-toast--error { border-color: rgba(255, 90, 90, 0.5); color: #ffd6d6; }

/* ── My Rounds list ─────────────────────────────────────── */
.cobalt-my-rounds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--cobalt-mono);
  font-size: 11px;
}
.cobalt-my-rounds__row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.cobalt-my-rounds__row.is-win {
  background: linear-gradient(90deg, rgba(54, 211, 153, 0.16), transparent 80%);
  border-color: rgba(54, 211, 153, 0.4);
  color: #d6f7e6;
}
.cobalt-my-rounds__time  { color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }
.cobalt-my-rounds__tile  { color: rgba(255, 255, 255, 0.85); }
.cobalt-my-rounds__bonus { color: #36d399; font-weight: 600; text-align: right; }
.cobalt-my-rounds__nope  { color: rgba(255, 255, 255, 0.32); text-align: right; }

/* ── Session stats HUD ──────────────────────────────────── */
.cobalt-stats {
  position: fixed;
  top: 88px;
  left: 18px;
  z-index: 35;
  width: 224px;
  background: rgba(8, 11, 28, 0.66);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  font-family: var(--cobalt-mono);
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  animation: cobaltWhisperIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}
.cobalt-stats.is-collapsed .cobalt-stats__grid { display: none; }
.cobalt-stats__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(180, 215, 255, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  user-select: none;
}
.cobalt-stats__pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4d8bff;
  box-shadow: 0 0 0 3px rgba(77, 139, 255, 0.18);
  animation: cobaltBeat 1.6s ease-in-out infinite;
}
.cobalt-stats__elapsed {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.10em;
  color: rgba(54, 211, 153, 0.85);
  font-variant-numeric: tabular-nums;
}
.cobalt-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 1px;
  background: rgba(255, 255, 255, 0.05);
}
.cobalt-stats__cell {
  padding: 10px 12px;
  background: rgba(8, 11, 28, 0.85);
}
.cobalt-stats__label {
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}
.cobalt-stats__val {
  font-family: var(--cobalt-display);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: -0.01em;
}
@media (max-width: 720px) {
  .cobalt-stats { display: none; }
}

/* ── Working chat panel (cross-tab via BroadcastChannel) ───── */
.cobalt-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: var(--cobalt-mono);
  color: rgba(255, 255, 255, 0.85);
}
.cobalt-chat__list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 12px 14px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cobalt-chat__empty {
  color: rgba(255, 255, 255, 0.32);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 32px 16px;
}
.cobalt-chat__msg {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 11.5px;
  line-height: 1.5;
}
.cobalt-chat__msg.is-mine {
  background: linear-gradient(90deg, rgba(0, 82, 255, 0.16), transparent 80%);
}
.cobalt-chat__from {
  color: #b27cff;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.cobalt-chat__msg.is-mine .cobalt-chat__from { color: #9fbcff; }
.cobalt-chat__text {
  color: rgba(255, 255, 255, 0.92);
  word-break: break-word;
  text-transform: none;
}
.cobalt-chat__time {
  color: rgba(255, 255, 255, 0.35);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}
.cobalt-chat__form {
  display: flex;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cobalt-chat__input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 12px;
  padding: 8px 14px;
  outline: none;
  text-transform: none;
}
.cobalt-chat__input:focus { border-color: rgba(77, 139, 255, 0.5); }
.cobalt-chat__send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2670ff, #0052ff);
  color: #fff;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cobalt-chat__send:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 82, 255, 0.5);
}

/* peer-origin whisper items in violet tint */
.cobalt-whisper__item--peer {
  background: linear-gradient(90deg, rgba(178, 124, 255, 0.08), transparent 70%) !important;
  color: rgba(220, 210, 255, 0.86) !important;
}
@media (max-width: 720px) {
  .cobalt-round { top: 60px; right: 10px; padding: 6px 12px; font-size: 10px; }
}

/* ── prefers-reduced-motion: turn off non-essential motion ─ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }
}