:root {
      --bg:      #000000;
      --surface: #0d0d12;
      --border:  #1a1a2e;
      --accent:  #ff4d00;
      --accent2: #ff8c00;
      --green:   #00ff88;
      --green-neon: #39ff14;
      --red:     #ff3355;
      --yellow:  #ffcc00;
      --cyan:    #00e5ff;
      --text:    #e8e8f0;
      --muted:   #ffffff;
      --mono:    'Share Tech Mono', monospace;
      --display: 'Orbitron', sans-serif;
      --body:    'Inter', sans-serif;
      --garden-panel-bottom-gap: 4px;
      --panel-w: clamp(259px, 21.44vw, 379px);
    --panel-expanded-w: calc(var(--panel-w) + 7.2vw);

      /* Fluid font scale — all UI text derives from these */
      --fs-xs:  clamp(7px,  0.5vw, 9px);
      --fs-sm:  clamp(8px,  0.6vw, 11px);
      --fs-md:  clamp(10px, 0.75vw, 14px);
      --fs-lg:  clamp(14px, 1.1vw,  20px);
      --fs-xl:  clamp(18px, 1.5vw,  26px);
      --fs-2xl: clamp(24px, 2.2vw,  42px);

      /* Panel side inset from screen edge */
      --panel-inset: 2.2vw;

      /* UP connection modal — Phlame theme */
      --up-modal-font-family: 'Orbitron', 'Inter', ui-sans-serif, sans-serif;
      --up-modal-dark-bg: #0a0608;
      --up-modal-bg: #0a0608;
      --up-modal-font-dark-color: #f5ece0;
      --up-modal-font-color: #f5ece0;
      --up-modal-btn-dark-color: #ff4d00;
      --up-modal-btn-color: #ff4d00;
      --up-modal-btn-dark-text: #1a0f00;
      --up-modal-btn-text: #1a0f00;
      --up-modal-border-radius: 18px;
      --up-modal-btn-radius: 14px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
body {
  padding-top: calc(43px + 10.7vw);
  overflow-x: hidden;
  background: #000000;
  background-image: url('background2.webp');
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
@media (max-width: 856px) {
  /* On mobile, background-attachment:fixed causes constant repaints.
     We emulate the effect with a fixed pseudo-element — same visual result, zero repaint. */
  body {
    background-image: none;
  }
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: #000000 url('background2.webp') top center / cover no-repeat;
    pointer-events: none;
    transform: translateZ(0);
  }
}

/* ── Perf: mobile / WebView mode ─────────────────────────────────────────
   backdrop-filter is extremely expensive on mobile/WebView GPUs. Also
   targets (hover: none) to catch touch devices that report a wide
   viewport (tablets, some in-app WebViews). */
@media (max-width: 700px), (hover: none) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── Perf: pause offscreen decorative animations ─────────────────────────
   Toggle this class (via IntersectionObserver) on elements running
   infinite CSS animations to stop compositor/GPU work while offscreen. */
.anim-offscreen,
.anim-offscreen *,
.anim-offscreen::before,
.anim-offscreen::after {
  animation-play-state: paused !important;
}

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  width: 100%;
  background: linear-gradient(135deg, #ff4d00, #ff8c00);
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 38px;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  box-shadow:
    0 2px 12px rgba(255,77,0,0.35),
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -6px 18px rgba(0,0,0,0.25) inset;
  overflow: hidden;
}
.navbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #ffd400;
  opacity: 0.6;
  pointer-events: none;
}
.navbar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  background: rgba(255,255,255,0.22);
  animation: navbar-shimmer 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes shimmer-slide {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes navbar-shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); opacity:0; }
  40%  { opacity: 0.18; }
  100% { transform: translateX(300%) skewX(-15deg); opacity:0; }
}
.navbar > * { position: relative; z-index: 1; }
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #000;
  text-transform: uppercase;
  margin-right: 28px;
  text-decoration: none;
  opacity: 0.92;
}
.navbar-brand-cursor {
  display: inline-block;
  font-weight: 900;
  animation: dot-blink 1s steps(2, start) infinite;
}
.navbar-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.nav-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35) 30%, rgba(0,229,255,0.45) 50%, rgba(0,0,0,0.35) 70%, transparent);
  margin: 0 4px;
  flex-shrink: 0;
  border-radius: 1px;
}
.navbar-link {
  position: relative;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  padding: 5px 14px;
  border-radius: 3px;
  transition: background 0.15s, opacity 0.15s, letter-spacing 0.15s;
  opacity: 0.7;
  background: none;
  border: none;
  cursor: pointer;
}
.navbar-link::before,
.navbar-link::after {
  opacity: 0;
  transition: opacity 0.15s, margin 0.15s;
  font-weight: 900;
}
.navbar-link::before { content: '['; margin-right: 0; }
.navbar-link::after  { content: ']'; margin-left: 0; }
.navbar-link:hover {
  background: rgba(0,0,0,0.12);
  opacity: 1;
  letter-spacing: 2.5px;
}
.navbar-link:hover::before, .navbar-link.active::before { opacity: 0.6; margin-right: 3px; }
.navbar-link.active::before { content: ''; background-image: url('image2_1.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; width: 28px; height: 28px; display: inline-block; opacity: 1; margin-right: 4px; vertical-align: middle; }
.navbar-link:hover::after { opacity: 0.6; margin-left: 3px; }
.navbar-link.active::after  { content: ''; opacity: 0 !important; margin-left: 0; }
.navbar-link.active {
  color: #ff8c00;
  opacity: 1;
  letter-spacing: 2.5px;
  text-shadow: 0 0 10px rgba(255,140,0,0.8), 0 0 20px rgba(255,140,0,0.4);
  background: linear-gradient(145deg, #2a2a2a 0%, #050505 55%, #000 100%);
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  transform: none;
  align-self: center;
  display: flex;
  align-items: center;
  height: 24px;
  padding-top: 0;
  padding-bottom: 0;
  animation: active-tab-sheen 2.4s ease-in-out infinite;
}
@keyframes active-tab-tilt {
  0%, 100% { transform: none; }
  50%      { transform: none; }
}
@keyframes active-tab-sheen {
  0%   { box-shadow: 0 0 8px rgba(255,140,0,0.4), 0 0 18px rgba(255,100,0,0.2), inset 0 0 6px rgba(255,140,0,0.05); }
  50%  { box-shadow: 0 0 16px rgba(255,140,0,0.75), 0 0 32px rgba(255,100,0,0.4), 0 0 48px rgba(255,60,0,0.15), inset 0 0 10px rgba(255,140,0,0.12); }
  100% { box-shadow: 0 0 8px rgba(255,140,0,0.4), 0 0 18px rgba(255,100,0,0.2), inset 0 0 6px rgba(255,140,0,0.05); }
}
.navbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
@property --garden-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes garden-rotate { to { --garden-spin: 360deg; } }
@keyframes garden-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,184,0,0.55), 0 0 14px rgba(255,140,0,0.35), inset 0 0 10px rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 0 0 4px rgba(255,184,0,0.12), 0 0 22px rgba(255,140,0,0.55), inset 0 0 14px rgba(255,255,255,0.28); }
}
@keyframes garden-pulse-leave {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0.45), 0 0 14px rgba(0,255,136,0.30), inset 0 0 10px rgba(255,255,255,0.16); }
  50%      { box-shadow: 0 0 0 4px rgba(0,255,136,0.10), 0 0 22px rgba(0,255,136,0.50), inset 0 0 14px rgba(255,255,255,0.26); }
}
@keyframes garden-sweep {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(230%)  skewX(-18deg); }
}
@keyframes garden-pop {
  0%   { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}
#connect-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #1a0f00;
  padding: 7px 18px;
  opacity: 1;
  background: linear-gradient(135deg, #ffc830 0%, #ffe680 22%, #ffffff 48%, #fff0a0 74%, #ffb800 100%);
  box-shadow: 0 0 0 0 rgba(255,184,0,0.55), 0 2px 8px rgba(0,0,0,0.35), inset 0 0 10px rgba(255,255,255,0.18);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, filter 0.2s ease, letter-spacing 0.2s ease;
  animation: garden-pulse 2.6s ease-in-out infinite;
  will-change: transform;
}
#connect-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--garden-spin), #ffb800, #fff3b0, #ff7a00, #ffe680, #ffb800);
  animation: garden-rotate 3.2s linear infinite;
  filter: saturate(1.3);
}
#connect-btn::after {
  content: '';
  position: absolute;
  top: -10%; bottom: -10%; left: 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  pointer-events: none;
  mix-blend-mode: overlay;
  animation: garden-sweep 2.8s ease-in-out infinite;
  animation-delay: 0.4s;
}
#connect-btn:hover {
  transform: translateY(-2px) scale(1.045);
  letter-spacing: 2.6px;
  filter: brightness(1.08) saturate(1.15);
  box-shadow: 0 0 0 3px rgba(255,184,0,0.18), 0 6px 18px rgba(255,122,0,0.40), inset 0 0 14px rgba(255,255,255,0.3);
}
#connect-btn:active { transform: translateY(0) scale(0.96); filter: brightness(0.97); transition-duration: 0.08s; }
#connect-btn:focus-visible { outline: 2px solid #fff3b0; outline-offset: 3px; }
#connect-btn .connect-l1, #connect-btn .connect-l2 { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  #connect-btn, #connect-btn::before, #connect-btn::after { animation: none !important; }
}
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
#connected-dot {
  display: none;
  width: 10px; height: 10px;
  min-width: 10px; min-height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  flex-shrink: 0;
  animation: dot-blink 1.5s ease-in-out infinite;
}
#connected-dot.is-connected { display: inline-block; }
#up-identity.is-connected { display: inline-flex !important; }
@media (max-width: 1360px) {
  #up-name { display: none; }
  #up-pfp  { display: none; }
  #up-identity.is-connected { display: none !important; }
}
@media (max-width: 856px) {
  #up-name { display: none; }
  #up-pfp  { display: none; }
  #up-identity.is-connected { display: none !important; }
}
#disconnect-btn.btn-connected {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: none !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
  color: #1a0f00 !important;
  padding: 7px 18px !important;
  opacity: 1 !important;
  background: linear-gradient(135deg, #00ffaa 0%, #b9ffe3 22%, #ffffff 48%, #c9ffe9 74%, #00e09a 100%) !important;
  box-shadow: 0 0 0 0 rgba(0,255,136,0.45), 0 2px 8px rgba(0,0,0,0.35), inset 0 0 10px rgba(255,255,255,0.16) !important;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, filter 0.2s ease, letter-spacing 0.2s ease !important;
  animation: garden-pulse-leave 2.6s ease-in-out infinite, garden-pop 0.45s cubic-bezier(.34,1.56,.64,1) !important;
  will-change: transform;
}
#disconnect-btn.btn-connected::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--garden-spin), #00e09a, #d6fff0, #00ffaa, #b9ffe3, #00e09a);
  animation: garden-rotate 3.2s linear infinite;
  filter: saturate(1.3);
}
#disconnect-btn.btn-connected::after {
  content: '';
  position: absolute;
  top: -10%; bottom: -10%; left: 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  pointer-events: none;
  mix-blend-mode: overlay;
  animation: garden-sweep 2.8s ease-in-out infinite;
  animation-delay: 1.2s;
}
#disconnect-btn.btn-connected:hover {
  transform: translateY(-2px) scale(1.045) !important;
  letter-spacing: 2.6px !important;
  filter: brightness(1.08) saturate(1.15) !important;
  box-shadow: 0 0 0 3px rgba(0,255,136,0.18), 0 6px 18px rgba(0,255,136,0.40), inset 0 0 14px rgba(255,255,255,0.3) !important;
}
#disconnect-btn.btn-connected:active { transform: translateY(0) scale(0.96) !important; filter: brightness(0.97) !important; transition-duration: 0.08s !important; }
#disconnect-btn.btn-connected:focus-visible { outline: 2px solid #d6fff0 !important; outline-offset: 3px !important; }
#disconnect-btn .disconnect-label-short, #disconnect-btn .disconnect-label-full { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  #disconnect-btn.btn-connected, #disconnect-btn.btn-connected::before, #disconnect-btn.btn-connected::after { animation: none !important; }
}
.disconnect-label-short { display: none; }
@media (min-width: 857px) {
  #connect-btn { border-radius: 20px !important; }
}
@media (max-width: 856px) {
  .navbar-brand { display: none; }
  .navbar {
    padding: 0 8px;
    overflow: visible;
  }
  .navbar-links {
    flex: 1;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    overflow: hidden;
  }
  .navbar-link {
    padding: 5px 7px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap;
  }
  .navbar-link:hover, .navbar-link.active { letter-spacing: 0.5px !important; }
  .navbar-link::before, .navbar-link::after { display: none !important; }
  .navbar-link.active::before { display: inline-block !important; content: ''; background-image: url('image2_1.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; width: 28px; height: 28px; opacity: 1; margin-right: 4px; vertical-align: middle; }
  .navbar-link.active::after  { display: none !important; content: ''; }
  .nav-bloom-prefix { display: none; }
  .navbar-actions {
    flex-shrink: 0;
    gap: 4px;
    margin-left: 4px;
  }
  #connect-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 12px !important;
    padding: 4px 5px !important;
    font-size: 7px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    color: #1a0f00 !important;
    white-space: normal;
    width: 42px;
    flex-shrink: 0;
  }
  #connect-btn:hover { transform: none; letter-spacing: 0.5px !important; }
  #connect-btn .connect-l1,
  #connect-btn .connect-l2 { display: block; }
  #connect-btn.btn-hidden-mobile { display: none !important; }
  #connected-dot { display: none !important; }
  #connected-dot.is-connected {
    display: inline-block !important;
    visibility: visible !important;
    margin: 0 !important;
  }
  #disconnect-btn.btn-connected {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    padding: 4px 7px !important;
    font-size: 7px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #disconnect-btn.btn-connected:hover { transform: none !important; letter-spacing: 0.5px !important; }
  .disconnect-label-short { display: inline; }
  .disconnect-label-full { display: none; }
  /* #up-identity.is-connected: display:none already defined in the @media (max-width: 856px) block above */
}


.page {
  width: min(100%, calc(100vw - 3rem));
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(16px, 2.5vh, 40px) 24px 80px;
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 1201px) {
  .page {
    width: calc(100% - 2 * (var(--panel-inset) + var(--panel-w)) - 2vw);
    max-width: calc((100% - var(--panel-w) * 2) * 0.8);
    margin-left: auto;
    margin-right: auto;
  }
  .lb-panel {
    margin-top: calc(0.9vw - 6vw);
  }
}
.garden-tip-wrap {
  position: relative;
  cursor: default;
}
.garden-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
top: auto;
  left: 50%;
  transform: translateX(-50%);
  background: #302e2d88;
  border: 1px solid rgba(255,140,0,0.4);
  color: #e8e8f0;
  font-family: var(--body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: normal;
  width: 200px;
  max-width: calc(100vw - 24px);
  z-index: 99999;
  pointer-events: none;
  text-align: left;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
}
.garden-tip-wrap:hover .garden-tip {
  display: block;
}

.lb-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.lb-panel-title {
  text-align: left;
  min-width: 0;
}
.lb-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lb-filter-select {
  background: linear-gradient(135deg, rgba(10,10,16,0.95), rgba(6,6,10,0.98));
  border: 1px solid rgba(255,77,0,0.35);
  color: #ff9901;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  padding: 6px 28px 6px 12px;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(135deg, rgba(10,10,16,0.95), rgba(6,6,10,0.98)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ff8c00'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 10px center;
  background-size: cover, 8px 5px;
  box-shadow:
    0 0 8px rgba(255,77,0,0.12),
    inset 0 1px 0 rgba(255,140,0,0.06);
}
.lb-filter-select:hover,
.lb-filter-select:focus {
  outline: none;
  border-color: rgba(255,140,0,0.6);
  color: var(--accent2);
  box-shadow:
    0 0 16px rgba(255,100,0,0.25),
    0 0 4px rgba(255,77,0,0.15),
    inset 0 1px 0 rgba(255,180,0,0.1);
  background-image:
    linear-gradient(135deg, rgba(255,60,0,0.08), rgba(255,100,0,0.04)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffb800'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 10px center;
  background-size: cover, 8px 5px;
}
.lb-filter-select option {
  background: #0d0d16;
  color: #ff9901;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,77,0,0.15);
}
.lb-filter-select option:checked,
.lb-filter-select option:hover {
  background: linear-gradient(135deg, rgba(255,60,0,0.18), rgba(255,100,0,0.10));
  color: #ffb800;
  box-shadow: inset 0 0 0 100px rgba(255,77,0,0.14);
}
.lb-filter-select option[value=""] {
  color: rgba(255,140,0,0.5);
  font-style: italic;
}

    /* ── Stats strip: compact header bar showing profile count, avg score, top score ── */
    .dash-stats {
      display: inline-flex;
      justify-content: center;
      width: 100%;
      gap: 0;
      margin-bottom: 0px;
      border: 1px solid rgba(255,77,0,0.3);
      border-radius: 6px;
      background: transparent;
      overflow: hidden;
      max-height: 80px;
      bottom: 0px;
    }
    .dash-stats-wrap {
  position: relative;
  margin-top: 0;
  margin-bottom: 14px;
  z-index: 1;
  background: rgba(40,40,40,0.6);
  overflow: visible;
}
    .dash-stat {
      flex: 1;
      text-align: center;
      padding: 14px 28px;
      border-right: 1px solid rgba(255,77,0,0.15);
    }
    .dash-stat:last-child { border-right: none; }
    .dash-stat-val {
      font-family: var(--display);
      font-size: var(--fs-lg);
      font-weight: 900;
      color: #ffaf02;
    }
    .dash-stat-label {
      font-family: var(--mono);
      font-size: var(--fs-xs);
      letter-spacing: 2px;
      color: #ffffff;
      text-transform: uppercase;
      margin-top: 3px;
    }
.dash-stat:nth-child(1) img { width: 60px; height: 60px; }
.dash-stat:nth-child(2) img { width: 80px; height: 80px; margin-top: -10px;}
.dash-stat:nth-child(3) img { width: 85px; height: 85px; }

    @media (max-width: 856px) {
      .dash-stat { padding: 10px 16px; }
      .dash-stat-val { font-size: var(--fs-md); }
    }

    /* ── Leaderboard panel ───────────────────────────────────────────────── */
    .lb-panel {
      width: 100%;
      max-width: 100%;
      background: rgba(6,6,8,0.97);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: visible;
      position: sticky;
      z-index: 1;
    }

    .lb-panel-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px 24px 14px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(135deg, rgba(255,77,0,0.12) 0%, rgba(255,140,0,0.06) 100%);
      overflow: visible;
    }
    .lb-panel-title {
      font-family: var(--display);
      font-size: var(--fs-md);
      font-weight: 700;
      letter-spacing: 3px;
      color: #ffaf02;
      text-transform: uppercase;
      text-align: center;
      width: 100%;
      min-width: 0;
    }
    .lb-filters {
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      width: 100%;
    }

    .lb-refresh-btn {
      background: transparent;
      border: 1px solid rgba(255,77,0,0.25);
      color: #ff9901;
      font-family: var(--mono);
      font-size: clamp(11px, 0.85vw, 14px);
      letter-spacing: 2px;
      padding: 5px 14px;
      cursor: pointer;
      text-transform: uppercase;
      transition: all 0.15s;
      border-radius: 3px;
    }
    .lb-refresh-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(255,77,0,0.06);
    }

    /*
      Grid: rank(48px) | pfp(72px) | profile(1.4fr) | A(72px) | B(72px) | C(72px) | D(72px) | E(72px) | bloom-bar(80px) | score(96px)
      Everything x2 of original 52px columns → 104px, but balanced. Using slightly tighter for aesthetics.
    */
    .lb-cols,
    .lb-entry {
      display: grid;
      grid-template-columns:
        clamp(14px,0.75vw,22px)
        clamp(44px,3.75vw,72px)
        minmax(0,1.5fr)
        clamp(36px,3vw,60px)
        clamp(36px,3vw,60px)
        clamp(36px,3vw,60px)
        clamp(36px,3vw,60px)
        clamp(36px,3vw,60px)
        clamp(44px,4vw,80px)
        clamp(60px,5vw,96px);
      align-items: center;
      gap: 0;
    }
    .lb-cols {
      padding: 0 clamp(10px, 1.04vw, 20px);
      border-bottom: 1px solid rgba(255,77,0,0.18);
      overflow: visible;
      background: linear-gradient(180deg, rgba(255,60,0,0.06) 0%, rgba(0,0,0,0) 100%);
      position: relative;
    }
    .lb-cols::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(255,140,0,0.35) 30%, rgba(255,60,0,0.6) 50%, rgba(255,140,0,0.35) 70%, transparent 100%);
      pointer-events: none;
    }

    /* ── Premium col label base ── */
    .lb-col-label {
      font-family: var(--mono);
      font-size: clamp(8px, 0.62vw, 10px);
      color: rgba(255,140,0,0.45);
      letter-spacing: 2px;
      text-transform: uppercase;
      text-align: center;
      padding: 10px clamp(2px, 0.2vw, 4px);
      position: relative;
    }
    .lb-col-label.left  { text-align: left; }
    .lb-col-label.right { text-align: right; padding-right: clamp(8px, 1.04vw, 20px); }

    /* Generic inner wrapper */
    .lbc-inner {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      position: relative;
    }

    /* # rank label */
    .lb-col-rank-label .lbc-inner {
      font-family: var(--display);
      font-size: clamp(9px, 0.7vw, 12px);
      font-weight: 900;
      color: rgba(255,100,0,0.5);
      letter-spacing: 1px;
    }

    /* UNIVERSAL PROFILE label */
    .lbc-profile {
      font-size: clamp(7px, 0.55vw, 9px);
      letter-spacing: 2.5px;
      color: rgba(255,160,0,0.55);
      gap: 6px;
    }
    .lbc-dot {
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      flex-shrink: 0;
      animation: lbcDotPulse 2.4s ease-in-out infinite;
    }
    @keyframes lbcDotPulse {
      0%, 100% { opacity: 0.4; transform: scale(1); }
      50%       { opacity: 1;   transform: scale(1.5); }
    }

    /* Section icon wrappers */
    .lbc-sec-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: clamp(22px, 1.8vw, 32px);
      height: clamp(22px, 1.8vw, 32px);
      border-radius: 6px;
      position: relative;
      transition: filter 0.2s;
    }
    .lbc-sec-wrap img {
      width: clamp(14px, 1.2vw, 22px);
      height: clamp(14px, 1.2vw, 22px);
      object-fit: contain;
      position: relative;
      z-index: 1;
      transition: filter 0.2s, transform 0.2s;
    }
    .lb-col-icon:hover .lbc-sec-wrap img {
      filter: brightness(1.4) saturate(1.3);
      transform: scale(1.15);
    }
    /* Per-section tint */
    .lbc-sec-A { background: rgba(255,77,0,0.10);  border: 1px solid rgba(255,77,0,0.22);  box-shadow: 0 0 8px rgba(255,77,0,0.12); }
    .lbc-sec-B { background: rgba(255,140,0,0.10); border: 1px solid rgba(255,140,0,0.22); box-shadow: 0 0 8px rgba(255,140,0,0.12); }
    .lbc-sec-C { background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.18); box-shadow: 0 0 8px rgba(0,229,255,0.10); }
    .lbc-sec-D { background: rgba(238,172,255,0.08); border: 1px solid rgba(238,172,255,0.18); box-shadow: 0 0 8px rgba(238,172,255,0.10); }
    .lbc-sec-E { background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.18); box-shadow: 0 0 8px rgba(0,255,136,0.10); }

    /* BLOOM POINTS label */
    .lbc-bloom {
      flex-direction: column;
      gap: 1px;
      line-height: 1;
    }
    .lbc-bloom-icon {
      font-size: clamp(10px, 0.85vw, 14px);
      line-height: 1;
      animation: lbcBloomSpin 8s linear infinite;
    }
    @keyframes lbcBloomSpin {
      0%   { transform: rotate(0deg) scale(1); }
      50%  { transform: rotate(180deg) scale(1.15); }
      100% { transform: rotate(360deg) scale(1); }
    }
    .lbc-bloom-text {
      font-family: var(--mono);
      font-size: clamp(6px, 0.48vw, 8px);
      letter-spacing: 2px;
      color: rgba(255,140,0,0.5);
    }

    /* SCORE label */
    .lbc-score {
      font-family: var(--display);
      font-size: clamp(7px, 0.55vw, 10px);
      font-weight: 700;
      letter-spacing: 3px;
      background: linear-gradient(110deg, #ff9901, #ffe27a, #ff4d00);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      filter: drop-shadow(0 0 6px rgba(255,140,0,0.4));
    }

    .lb-col-profile-label {
      grid-column: 2 / span 2;
      text-align: center !important;
      justify-self: center;
    }

    .lb-col-icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }

.lb-entry .lb-pfp { margin-left: 0 !important; }
.lb-pfp-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(44px,3.75vw,72px);
}

    .lb-entry {
      padding: 18px clamp(10px, 1.04vw, 20px);
      cursor: pointer;
      transition: border-color 0.18s, box-shadow 0.18s;
      border: 1.5px solid transparent;
      border-bottom: 1px solid rgba(255,77,0,0.06);
      min-height: 80px;
      position: relative;
    }
    .lb-entry:last-child { border-bottom: none; }
    .lb-entry:nth-child(even) { background-color: rgba(255,255,255,0.015); }
    .lb-entry.rank-1 { overflow: visible; }
    .lb-entry.rank-2 { overflow: visible; }
    .lb-entry.rank-3 { overflow: visible; }
    /* Hover handled entirely in JS to avoid clobbering background-image */

    .lb-rank {
      font-family: var(--display);
      font-size: clamp(18px, 1.2vw, 26px);
      font-weight: 900;
      text-align: center;
    }
    .lb-rank.r1 { color: #FFD700; }
    .lb-rank.r2 { color: #C0C0C0; }
    .lb-rank.r3 { color: #CD7F32; }
    .lb-rank.rn { color: #a3a3a3; }
    .lb-entry.rank-1 .lb-rank,
    .lb-entry.rank-2 .lb-rank,
    .lb-entry.rank-3 .lb-rank {
      line-height: 1;
      letter-spacing: 0.03em;
      width: 100%;
    }
    .lb-cols > .lb-col-label:first-child {
      font-size: 10px !important;
    }
.lb-rank.rn-small {
  font-size: clamp(12px, 0.9vw, 16px) !important;
  margin-left: -3px;
}

    .lb-pfp {
      width: clamp(36px, 2.86vw, 55px); height: clamp(36px, 2.86vw, 55px);
      border-radius: 50%; object-fit: cover;
      border: 1px solid rgba(255,2,213,0.3);
      flex-shrink: 0;
      margin-left: 0 !important;
      background: var(--surface);
      display: block;
    }
    .lb-entry.rank-1 .lb-pfp {
      margin-left: 0 !important;
    }
    .lb-entry.rank-2 .lb-pfp {
      margin-left: 0 !important;
    }
    .lb-entry.rank-3 .lb-pfp {
      margin-left: 0 !important;
    }
.lb-entry:not(.rank-1):not(.rank-2):not(.rank-3) .lb-rank {
  font-size: 7px !important;
  padding-right: 0 !important;
  line-height: 1;
  letter-spacing: 0.03em;
}
    .lb-pfp-placeholder {
      width: clamp(22px, 1.875vw, 36px); height: clamp(22px, 1.875vw, 36px);
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid rgba(255,77,0,0.2);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--mono); font-size: clamp(10px, 0.8vw, 14px); color: #333;
      flex-shrink: 0;
    }
.lb-pfp-frame {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
  width: fit-content;
  height: fit-content;
  box-sizing: border-box;
  margin-left: 0 !important;
}
.rank-crown,
.rank-ring {
  position: absolute;
  pointer-events: none;
}
.rank-crown {
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1;
  z-index: 3;
}
.rank-ring {
  inset: -3px;
  border-radius: 50%;
  z-index: 1;
}
.lb-pfp-frame .lb-pfp,
.lb-pfp-frame .lb-pfp-placeholder {
  position: relative;
  z-index: 2;
}
.lb-pfp-frame.rank-frame-1,
.lb-pfp-frame.rank-frame-2,
.lb-pfp-frame.rank-frame-3 {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.lb-pfp-frame.rank-frame-1::after,
.lb-pfp-frame.rank-frame-2::after,
.lb-pfp-frame.rank-frame-3::after {
  content: '';
  position: absolute;
  mix-blend-mode: lighten;
  z-index: 2;
  pointer-events: none;
}
.lb-pfp-frame.rank-frame-1::after {
  top:    -14px;
  bottom: -19px;
  left:   -29px;
  right:  -20px;
  background: url('1.webp') center / contain no-repeat;
}
.lb-pfp-frame.rank-frame-2::after {
  top:    -11px;
  bottom: -11px;
  left:   -35px;
  right:  -25px;
  background: url('2.webp') center / contain no-repeat;
}
.lb-pfp-frame.rank-frame-3::after {
  top:    -9px;
  bottom: -11px;
  left:   -28px;
  right:  -23px;
  background: url('3.webp') center / contain no-repeat;
}
.lb-entry.rank-1,
.lb-entry.rank-2,
.lb-entry.rank-3 {
  min-height: 80px;
  padding: 18px clamp(10px, 1.04vw, 20px);
}

.lb-entry.rank-1 .lb-name,
.lb-entry.rank-2 .lb-name,
.lb-entry.rank-3 .lb-name {
  font-size: clamp(10px, 0.9vw, 16px);
}

.lb-entry.rank-1 .lb-rank,
.lb-entry.rank-2 .lb-rank,
.lb-entry.rank-3 .lb-rank {
  font-size: clamp(18px, 1.2vw, 26px);
}

.lb-entry.rank-1 .lb-sec,
.lb-entry.rank-2 .lb-sec,
.lb-entry.rank-3 .lb-sec {
  font-size: clamp(12px, 0.95vw, 16px);
}

.lb-entry.rank-1 .lb-score { font-size: clamp(15.4px, 1.21vw, 22px); }
  .lb-entry.rank-2 .lb-score { font-size: clamp(15.4px, 1.21vw, 22px); }
  .lb-entry.rank-3 .lb-score { font-size: clamp(15.4px, 1.21vw, 22px); }

.lb-entry.rank-2 .lb-pfp,
.lb-entry.rank-3 .lb-pfp {
  width: clamp(36px, 2.86vw, 55px);
  height: clamp(36px, 2.86vw, 55px);
}
.lb-entry.rank-1 .lb-pfp {
  width: clamp(44px, 3.5vw, 66px);
  height: clamp(44px, 3.5vw, 66px);
}
.lb-entry.rank-1 .lb-pfp-frame,
.lb-entry.rank-2 .lb-pfp-frame,
.lb-entry.rank-3 .lb-pfp-frame {
  margin-left: 0 !important;
}
    .lb-info { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding-right: 0; }
    .lb-name {
      font-family: var(--mono);
      font-size: clamp(10px, 0.9vw, 16px);
      padding: clamp(4px, 0.7vw, 10px) clamp(4px, 0.7vw, 10px) 1px;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-word;
      overflow-wrap: anywhere;
      min-width: 0;
      max-width: 100%;
    }
    .lb-addr {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 0px;
      margin-left: 6px;
    }
    .lb-addr-icon {
      width: clamp(14px, 1.1vw, 18px);
      height: clamp(14px, 1.1vw, 18px);
      border-radius: 50%;
      flex-shrink: 0;
      object-fit: cover;
    }
    .lb-addr-amount {
      font-family: var(--mono);
      font-size: clamp(10px, 0.8vw, 13px);
      color: #ff9a1f;
      letter-spacing: 0.03em;
      white-space: nowrap;
    }
    /* ── Styled tooltip ── */
    .lb-addr {
      position: relative;
    }
    #lb-phlame-tooltip {
      position: fixed;
      display: none;
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, rgba(20,12,4,0.97), rgba(10,6,2,0.99));
      border: 1px solid rgba(255,140,0,0.35);
      color: #ff9a1f;
      font-family: 'Orbitron', sans-serif;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 5px 9px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(255,122,0,0.2), 0 4px 14px rgba(0,0,0,0.6);
      pointer-events: none;
      z-index: 9999;
    }
    #lb-phlame-tooltip-text {
      white-space: pre;
      text-align: left;
    }
    #lb-phlame-tooltip img {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }
    /* ── Glow animation on phlame amounts ── */
    @keyframes phlame-glow {
      0%, 100% { text-shadow: 0 0 6px rgba(255,154,31,0.5), 0 0 12px rgba(255,100,0,0.2); }
      50%       { text-shadow: 0 0 10px rgba(255,154,31,0.9), 0 0 22px rgba(255,100,0,0.5); }
    }
    .lb-addr-amount,
    #bsd-phlame-amount,
    #bsd-phlame-lp {
      animation: phlame-glow 2.4s ease-in-out infinite;
    }

    /* Section score cells */
    .lb-sec {
      font-family: var(--mono);
      font-size: clamp(12px, 0.95vw, 16px);
      text-align: center;
      padding: 0 clamp(3px, 0.3vw, 4px);
    }
    .lb-sec.pos  { color: var(--green); }
    .lb-sec.mid  { color: var(--yellow); }
    .lb-sec.low  { color: var(--red); }
    .lb-sec.zero { color: #333344; }

    /* ── Bloom progress bar cell ─────────────────────────────────────────── */
    .lb-bloom-bar-cell {
      padding: 0 8px;
      padding-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      justify-content: center;
    }
    .lb-bloom-track {
      height: 5px;
      background: rgba(255,77,0,0.12);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }
    .lb-bloom-fill {
      height: 100%;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--accent), var(--accent2), var(--green));
      transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
      min-width: 2px;
    }
    .lb-bloom-pct {
      font-family: var(--mono);
      font-size: clamp(11px, 1.1vw, 15px);
      color: #555566;
      letter-spacing: 0px;
      text-align: right;
    }

    .lb-score {
      font-family: var(--display);
      font-size: clamp(15.4px, 1.21vw, 22px);
      font-weight: 700;
      text-align: right;
      padding-right: clamp(8px, 1.04vw, 20px);
      justify-self: end;
      align-self: center;
      min-width: 0;
    }
    .lb-entry.rank-1 .lb-score,
    .lb-entry.rank-2 .lb-score,
    .lb-entry.rank-3 .lb-score {
      font-size: clamp(15.4px, 1.21vw, 22px);
    }

    /* ── Score colours — new system ── */
    /* Medals */
    .lb-score.score-gold   {
      color: #FFD700 !important;
      text-shadow: 0 0 10px rgba(255,215,0,0.7), 0 0 24px rgba(255,180,0,0.4) !important;
    }
    .lb-score.score-silver {
      color: #C8C8D4 !important;
      text-shadow: 0 0 10px rgba(200,200,212,0.65), 0 0 22px rgba(180,180,200,0.35) !important;
    }
    .lb-score.score-bronze {
      color: #FF9A33 !important;
      text-shadow: 0 0 10px rgba(255,148,40,0.7), 0 0 22px rgba(255,110,10,0.4) !important;
    }
    /* Rank 4+ thresholds */
    .lb-score.score-high {
      color: #00ff88 !important;
      text-shadow: 0 0 10px rgba(0,255,136,0.55), 0 0 22px rgba(0,200,100,0.3) !important;
    }
    .lb-score.score-mid {
      color: #ffcc00 !important;
      text-shadow: 0 0 10px rgba(255,204,0,0.55), 0 0 22px rgba(255,160,0,0.3) !important;
    }
    .lb-score.score-low {
      color: #ff3355 !important;
      text-shadow: 0 0 10px rgba(255,51,85,0.55), 0 0 22px rgba(220,0,40,0.3) !important;
    }
    .lb-score.score-zero {
      color: #ff0022 !important;
      text-shadow: 0 0 12px rgba(255,0,34,0.9), 0 0 28px rgba(255,0,0,0.55), 0 0 50px rgba(255,0,0,0.25) !important;
      animation: scoreZeroPulse 1.8s ease-in-out infinite !important;
    }
    @keyframes scoreZeroPulse {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.55; }
    }

    .lb-loading {
      padding: 40px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      text-align: center;
    }
    .lb-loading-spinner {
      position: relative;
      width: 90px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .lb-loading-spinner::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid rgba(255,77,0,0.3);
      border-top-color: #ff4d00;
      border-radius: 50%;
      animation: lbSpinRing 0.9s linear infinite;
    }
    .lb-loading-spinner img {
      width: 70px;
      height: 70px;
      object-fit: contain;
      mix-blend-mode: lighten;
      position: relative;
      z-index: 1;
    }
    .lb-loading-text {
      font-family: var(--mono);
      font-size: clamp(13px, 1vw, 16px);
      color: #444455;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    @keyframes lbSpinRing {
      to { transform: rotate(360deg); }
    }
    /* ── ENTERING / LEAVING overlay — spinner (same pattern as lb-loading) ── */
    .entering-spinner {
      position: relative;
      width: 90px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin: 0 auto 18px;
    }
    .entering-spinner::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid rgba(255,140,0,0.25);
      border-top-color: #ff8c00;
      border-radius: 50%;
      animation: lbSpinRing 0.9s linear infinite;
    }
    .entering-spinner img {
      width: 70px;
      height: 70px;
      object-fit: contain;
      mix-blend-mode: lighten;
      position: relative;
      z-index: 1;
    }
    .entering-sub {
      font-family: 'Orbitron', sans-serif;
      font-size: 13px;
      color: #ff8c00;
      letter-spacing: 3px;
      text-transform: uppercase;
    }
    .lb-list {
      width: 100%;
      overflow-x: auto;
      overflow-y: visible;
      min-width: 0;
    }
    .lb-list::-webkit-scrollbar {
      height: 7px;
    }
    .lb-list::-webkit-scrollbar-thumb {
      background: rgba(255, 77, 0, 0.25);
      border-radius: 999px;
    }
    .lb-error {
      padding: 24px;
      font-family: var(--mono);
      font-size: clamp(13px, 1vw, 16px);
      color: var(--red);
      letter-spacing: 1px;
      text-align: center;
    }

    /* Mobile: retain desktop Bloomboard layout, keep only dashboard icon sizing */
@media (max-width: 856px) {
  .dash-stats img {
    width: 20px;
    height: 20px;
  }
  .dash-stats-wrap {
    margin-top: 0;
  }
  .dash-stats {
    margin-top: 0px;
  }
  .dash-stat:nth-child(1) img { width: 38px !important; height: 38px !important; }
  .dash-stat:nth-child(2) img { width: 50px !important; height: 50px !important; }
  .dash-stat:nth-child(3) img { width: 50px !important; height: 40px !important; }

  .lb-panel-head {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .lb-panel-title {
    text-align: center !important;
    width: 100%;
    padding-left: 0 !important;
    font-size: calc(var(--fs-md) * 1.95) !important;
  }
  .lb-panel-title::before {
    display: none !important;
  }
  .lb-panel-title::after {
    left: 50% !important;
    right: auto !important;
    width: 60% !important;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255,153,1,0.9), transparent) !important;
  }
  .lb-filters {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .cf-selected {
    min-width: 135px !important;
    padding: 5px 12px !important;
  }
  .cf-label, .cf-arrow {
    font-size: calc(var(--fs-xs) * 1.5) !important;
  }
  .cf-option {
    font-size: calc(var(--fs-xs) * 1.5) !important;
  }

  footer {
    display: none !important;
  }
  .lb-sec.lb-sec-cell {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
  }
  .lb-refresh-btn {
    display: none !important;
  }

  /* Grid 856px — rank(1%) | PFP(11%) + UP(22%) = 33% | A B C D E widened | bar+30% | score */
  .lb-cols,
  .lb-entry {
    grid-template-columns: 1fr 11fr 22fr 6.4fr 6.4fr 6.4fr 6.4fr 6.4fr 20.15fr 26fr !important;
    /* 0.5cm spacing between columns A–E (cols 4-8), applied globally on the grid */
    column-gap: 2vw !important;
  }
  .lb-entry > .lb-sec-cell {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    font-size: clamp(18.4px,2.38vw,26.45px) !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: center !important;
  }
  .lb-entry > .lb-bloom-bar-cell {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 4px !important;
  }
  /* Progress bar: full display, no truncation */
  .lb-entry > .lb-bloom-bar-cell .lb-bloom-track {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex-shrink: 1 !important;
  }
  .lb-entry > .lb-bloom-bar-cell .lb-bloom-pct {
    white-space: nowrap !important;
    font-size: clamp(8px, 1vw, 11px) !important;
  }
  .lb-entry > .lb-score          { display: inline-flex !important; justify-content: flex-end !important; font-size: clamp(18px,2.2vw,26px) !important; }
  /* Labels A–E (icons) visible, BLOOM POINTS text visible, rest hidden */
  .lb-col-label.lb-col-sec:not(.lb-col-icon):not(.lb-col-bloom-label) { display: none !important; }
  .lb-col-label.lb-col-bloom-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    font-size: 9.2px !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .lb-col-label.lb-col-icon {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    text-align: center !important;
    width: 100% !important;
  }
  .lb-col-label.lb-col-icon img              { width: 20.7px !important; height: 20.7px !important; }
  .lb-col-label.right                        { display: flex !important; grid-column: 10 !important; justify-content: flex-end !important; justify-self: end !important; padding-right: clamp(8px,1.04vw,20px) !important; }
  .lb-col-profile-label {
    grid-column: 2 / span 2 !important;
    font-size: 9.2px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    justify-self: start !important;
  }
  .lb-name {
    font-size: clamp(8px, 0.95vw, 11px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .lb-info {
    overflow: hidden !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
  }
  .lb-pfp-col { min-width: 0 !important; }
  .lb-entry .lb-pfp { width: clamp(44px, 4.4vw, 68px) !important; height: clamp(44px, 4.4vw, 68px) !important; margin-left: 0 !important; }

  /* ── Responsive-only: recalibrate rank-1/2/3 frames so they scale with
     the pfp at this breakpoint instead of using fixed px offsets. ── */
  .lb-entry.rank-1 .lb-pfp-frame,
  .lb-entry.rank-2 .lb-pfp-frame,
  .lb-entry.rank-3 .lb-pfp-frame {
    font-size: clamp(44px, 4.4vw, 68px) !important;
  }
  .lb-entry.rank-1 .lb-pfp-frame.rank-frame-1::after {
    top:    -0.299em !important;
    bottom: -0.242em !important;
    left:   -0.522em !important;
    right:  -0.376em !important;
  }
  .lb-entry.rank-2 .lb-pfp-frame.rank-frame-2::after {
    top:    -0.197em !important;
    bottom: -0.204em !important;
    left:   -0.606em !important;
    right:  -0.437em !important;
  }
  .lb-entry.rank-3 .lb-pfp-frame.rank-frame-3::after {
    top:    -0.167em !important;
    bottom: -0.227em !important;
    left:   -0.492em !important;
    right:  -0.394em !important;
  }
  .lb-entry.rank-1,
  .lb-entry.rank-2,
  .lb-entry.rank-3 {
    padding: 18px clamp(10px, 1.04vw, 20px) !important;
    align-items: center !important;
    overflow: visible !important;
  }
  .lb-entry.rank-1 > *,
  .lb-entry.rank-2 > *,
  .lb-entry.rank-3 > * {
    align-self: center !important;
  }
}

@media (max-width: 855px) {
  /* ── Mobile grid: rank | pfp | name | score only ── */
  .lb-cols,
  .lb-entry {
    grid-template-columns: 10vw 14vw 1fr 22vw !important;
    column-gap: 0 !important;
    align-items: center !important;
  }

  /* Hide sections A–E, progress bar, and all labels except SCORE */
  .lb-entry > .lb-sec-cell,
  .lb-entry > .lb-bloom-bar-cell,
  .lb-col-label.lb-col-sec,
  .lb-col-label.lb-col-icon,
  .lb-col-label.lb-col-bloom-label { display: none !important; }

  /* Label PROFILE (col 2–3) */
  .lb-col-profile-label {
    grid-column: 2 / span 2 !important;
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    justify-self: start !important;
    padding-left: 4px !important;
  }

  /* Label SCORE (col 4) */
  .lb-col-label.right {
    display: flex !important;
    grid-column: 4 !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    padding-right: clamp(8px, 3vw, 18px) !important;
    font-size: 9px !important;
  }

  /* Rank: uniform across all ranks */
  .lb-entry .lb-rank {
    font-size: clamp(14px, 4.5vw, 22px) !important;
    text-align: center !important;
    justify-self: center !important;
  }

  /* PFP: uniform across all ranks */
  .lb-pfp-col {
    justify-content: center !important;
    margin-left: 0 !important;
  }
  .lb-entry .lb-pfp {
    width: clamp(36px, 10vw, 52px) !important;
    height: clamp(36px, 10vw, 52px) !important;
    margin-left: 0 !important;
    transform: none !important;
  }
  .lb-pfp-col { min-width: 0 !important; }

  /* ── Responsive-only: recalibrate rank-1/2/3 frames so they scale with
     the pfp at this breakpoint instead of using fixed px offsets. ── */
  .lb-entry.rank-1 .lb-pfp-frame,
  .lb-entry.rank-2 .lb-pfp-frame,
  .lb-entry.rank-3 .lb-pfp-frame {
    font-size: clamp(36px, 10vw, 52px) !important;
  }
  .lb-entry.rank-1 .lb-pfp-frame.rank-frame-1::after {
    top:    -0.299em !important;
    bottom: -0.242em !important;
    left:   -0.522em !important;
    right:  -0.376em !important;
  }
  .lb-entry.rank-2 .lb-pfp-frame.rank-frame-2::after {
    top:    -0.197em !important;
    bottom: -0.204em !important;
    left:   -0.606em !important;
    right:  -0.437em !important;
  }
  .lb-entry.rank-3 .lb-pfp-frame.rank-frame-3::after {
    top:    -0.167em !important;
    bottom: -0.227em !important;
    left:   -0.492em !important;
    right:  -0.394em !important;
  }

  /* Name: uniform across all ranks */
  .lb-info {
    overflow: hidden !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    transform: none !important;
    padding-left: 6px !important;
  }
  .lb-name {
    font-size: clamp(11px, 3.2vw, 15px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  /* Score: uniform across all ranks, right-aligned */
  .lb-entry > .lb-score {
    display: inline-flex !important;
    justify-content: flex-end !important;
    font-size: clamp(13px, 4vw, 18px) !important;
    padding-right: clamp(8px, 3vw, 18px) !important;
    grid-column: auto !important;
  }
  /* Score colours on responsive — same logic as desktop */
  .lb-entry > .lb-score.score-gold   { color: #FFD700 !important; text-shadow: 0 0 10px rgba(255,215,0,0.7) !important; }
  .lb-entry > .lb-score.score-silver { color: #C8C8D4 !important; text-shadow: 0 0 10px rgba(200,200,212,0.65) !important; }
  .lb-entry > .lb-score.score-bronze { color: #FF9A33 !important; text-shadow: 0 0 10px rgba(255,148,40,0.7) !important; }
  .lb-entry > .lb-score.score-high   { color: #00ff88 !important; text-shadow: 0 0 10px rgba(0,255,136,0.55) !important; }
  .lb-entry > .lb-score.score-mid    { color: #ffcc00 !important; text-shadow: 0 0 10px rgba(255,204,0,0.55) !important; }
  .lb-entry > .lb-score.score-low    { color: #ff3355 !important; text-shadow: 0 0 10px rgba(255,51,85,0.55) !important; }
  .lb-entry > .lb-score.score-zero   { color: #ff0022 !important; text-shadow: 0 0 12px rgba(255,0,34,0.9), 0 0 28px rgba(255,0,0,0.55) !important; animation: scoreZeroPulse 1.8s ease-in-out infinite !important; }

  /* Uniform height for all entries */
  .lb-entry {
    min-height: 60px !important;
    height: 60px !important;
    max-height: 60px !important;
    padding: 10px 0 !important;
    overflow: visible !important;
  }

  /* Force identical height for rank 1/2/3 */
  .lb-entry.rank-1,
  .lb-entry.rank-2,
  .lb-entry.rank-3 {
    min-height: 60px !important;
    height: 60px !important;
    max-height: 60px !important;
    padding: 10px 0 !important;
    overflow: visible !important;
    align-items: center !important;
  }

  /* Center all direct children of the rank 1/2/3 grid */
  .lb-entry.rank-1 > *,
  .lb-entry.rank-2 > *,
  .lb-entry.rank-3 > * {
    align-self: center !important;
  }
}
    footer {
      text-align: center;
      margin-top: 60px;
      font-family: var(--mono);
      font-size: var(--fs-xs);
      color: #ffffff;
      letter-spacing: 2px;
    }


    .garden-layout {
  display: grid;
  grid-template-columns: var(--panel-expanded-w) 1fr var(--panel-expanded-w);
  min-height: 100vh;
  gap: 0;
}
.garden-left,
.garden-right {
  position: fixed;
  top: calc(38px);
  bottom: 0;
  height: auto;
  overflow-y: auto;
  overflow-x: visible;
  padding: clamp(10px, 1.4vw, 20px) clamp(8px, 1vw, 14px) 0 clamp(8px, 1vw, 14px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  box-sizing: border-box;
  transform: none !important;
}
.garden-left::-webkit-scrollbar,
.garden-right::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Safety: keep the invisible burst canvas out of the flex flow at all times,
   so it never eats an extra flex-gap between COMMUNITY BLOOM and DAILY REWARDS */
#dr-burst {
  position: fixed !important;
}
.garden-left { left: var(--panel-inset); width: var(--panel-expanded-w); border-right: 1px solid var(--border); }
.garden-right { right: calc(var(--panel-inset) - 6vw); width: var(--panel-expanded-w); border-left: 1px solid var(--border); }
.garden-widget {
  background: rgba(6,6,8,0.85);
  border: 1px solid rgba(255,77,0,0.2);
  border-radius: clamp(6px, 0.7vw, 8px);
  padding: clamp(9px, 1.1vw, 12px);
  flex-shrink: 0;
}
#prem-rank-card,
#prem-dist-card,
#your-bloom-score-card,
#bloom-quest-card {
  border: 1px solid rgba(255,61,0,0.4) !important;
  box-shadow: 0 0 8px rgba(255,61,0,0.3), 0 0 16px rgba(255,90,0,0.15) !important;
}
#bloom-quest-card {
  background-image: linear-gradient(rgba(10,10,14,0.88), rgba(10,10,14,0.88)), url('lukso.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.prem-statsbar,
.lb-panel {
  border: 1px solid rgba(255,61,0,0.4) !important;
  box-shadow: 0 0 8px rgba(255,61,0,0.3), 0 0 16px rgba(255,90,0,0.15) !important;
}
.garden-left > .garden-widget:nth-child(-n+3) {
  width: calc(100% - 6vw);
  max-width: 100%;
  margin-right: 0;
  padding: clamp(9px, 1.1vw, 12px);
  box-sizing: border-box;
  overflow: visible;
}
.garden-right > .garden-widget:nth-child(-n+3),
.garden-right > .garden-widget:nth-child(4) {
  width: calc(100% - 6vw);
  max-width: 100%;
  margin-left: 0;
  padding: clamp(9px, 1.1vw, 12px);
  box-sizing: border-box;
  overflow: visible;
}
.garden-panel-flex-fill {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.garden-panel-bottom-spacer {
  flex: 0 0 var(--garden-panel-bottom-gap);
  min-height: var(--garden-panel-bottom-gap);
  width: 100%;
  pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════
   SECTION TITLES — RANKING · YOUR BLOOM SCORE · BLOOM DISTRIBUTION
   Static — sharp gradient, no animation, no blur, centered
═══════════════════════════════════════════════════════════════ */

.garden-widget-title {
  font-family: var(--display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
  animation: none !important;
  filter: none !important;

  /* Static gradient — crisp, no blur */
  background: linear-gradient(110deg, #ffe566 0%, #ffb800 28%, #ff8c00 60%, #ff4d00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* Subtle halo via text-shadow — won't blur the glyph itself */
  /* text-shadow doesn't work with clip-text; we use the ::after underline only */
}

/* Bloom Quests title row — title is centered across the full card width;
   the ranking button is absolutely positioned so it doesn't affect that centering. */
.bq-title-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.bq-title-row .garden-widget-title {
  margin-bottom: 0;
  min-width: 0;
  text-align: center;
}
.bq-title-row .bq-ranking-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.bq-title-row .bq-ranking-btn:hover {
  transform: translateY(-50%) scale(1.05);
}
.bq-title-row .bq-ranking-btn:active {
  transform: translateY(-50%) scale(0.92);
}
.bq-refresh-btn {
  flex: 0 0 auto;
  height: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  color: #ff8c00;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.2s ease;
}
.bq-refresh-btn svg { flex-shrink: 0; }
.bq-refresh-btn span { line-height: 1; }
.bq-refresh-btn:hover {
  color: #ffb800;
}
.bq-refresh-btn:active { transform: scale(0.92); }
.bq-refresh-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}
.bq-refresh-btn:disabled:hover { color: #ff8c00; }

/* Leaderboard refresh button — disabled/loading state (see lb-tab-refresh) */
#lb-tab-refresh:disabled,
#lb-tab-refresh.is-loading {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
#lb-refresh-icon.lb-refresh-spinning {
  animation: lbRefreshSpin 0.7s linear infinite;
}
@keyframes lbRefreshSpin {
  to { transform: rotate(360deg); }
}
.bq-refresh-btn.is-spinning svg { animation: bqRefreshSpin 0.7s linear infinite; }
@keyframes bqRefreshSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#cl-refresh-icon.cl-refresh-spinning {
  display: inline-block;
  animation: lbRefreshSpin 0.7s linear infinite;
}

/* Kill pseudo-elements entirely — underline handled per-component */
.garden-widget-title::before,
.garden-widget-title::after {
  content: none !important;
  display: none !important;
}

/* Underline only for block titles (RANKING, YOUR BLOOM SCORE, BLOOM DISTRIBUTION) */
.prem-rank-title::after,
.prem-dist-title::after {
  content: '' !important;
  display: block !important;
  margin: 3px auto 0 !important;
  width: 40px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent, #ff8c00, transparent) !important;
  border-radius: 2px !important;
}

/* YOUR BLOOM SCORE: not a prem-* class, target via widget position */
.garden-widget:not(.prem-rank-card):not(.prem-dist-card):not(.reward-accordion) > .garden-widget-title::after {
  content: '' !important;
  display: block !important;
  margin: 3px auto 0 !important;
  width: 40px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent, #ff8c00, transparent) !important;
  border-radius: 2px !important;
}

/* DAILY REWARDS: flex span — underline injected as a real child div via wrapper */
/* The reward-accordion-title-desktop is a span with display:flex, so ::after goes inline.
   We override: force ::after to be absolutely positioned below */
.reward-accordion-title-desktop.garden-widget-title {
  position: relative !important;
  padding-bottom: 8px !important;
  font-size: var(--fs-md) !important;
  font-weight: 900 !important;
  letter-spacing: 3.5px !important;
}
.reward-accordion-title-desktop.garden-widget-title::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 40px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent, #ff8c00, transparent) !important;
  border-radius: 2px !important;
}
.garden-rank-val {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  text-align: center;
  letter-spacing: 2px;
  color: var(--accent2);
}
.garden-cycle {
  font-family: var(--mono);
  font-size: clamp(14px, 1.8vw, 22px);
  color: var(--cyan);
  letter-spacing: 2px;
  text-align: center;
}
.garden-score-val {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  text-align: center;
}
.garden-score-sub {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: #666;
  text-align: center;
  margin-top: 4px;
  letter-spacing: 1px;
}
/* Right panel — section score row items */
.gr-section-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,77,0,0.08);
  font-family: var(--mono);
  font-size: var(--fs-xs);
}
.gr-section-item:last-child { border-bottom: none; }
.gr-section-name { color: #aaa; display: flex; align-items: center; gap: 6px; }
.gr-section-val { font-weight: bold; }

.garden-shutters { display: none; }

@media (max-width: 1200px) {
  /* Fixed 5cm gap between navbar and leaderboard in responsive mode.
     All the spacing is carried by body (padding-top below); .page and
     .lb-panel must not add or subtract any margin here, otherwise
     the gap changes depending on width/resolution. */
  body {
    padding-top: calc(24vh + 3vh) !important;
  }
  .garden-layout { grid-template-columns: 1fr; }
  .page {
    padding-bottom: calc(60px + 40px + env(safe-area-inset-bottom, 0px));
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0.2cm !important;
    margin-right: 0.2cm !important;
    width: calc(100% - 0.4cm) !important;
  }
  .lb-panel {
    margin-top: -1.6cm !important;
    margin-bottom: 0 !important;
  }
  .dash-stats-wrap { display: none !important; }
  footer { display: none !important; }

  /* Vertical alignment for rank 1/2/3 in the 857–1200px range */
  .lb-entry.rank-1,
  .lb-entry.rank-2,
  .lb-entry.rank-3 {
    align-items: center !important;
  }
  .lb-entry.rank-1 > *,
  .lb-entry.rank-2 > *,
  .lb-entry.rank-3 > * {
    align-self: center !important;
  }

  /* Prevent rank-frame images 1/2/3.webp from inflating the row height */
  .lb-entry.rank-1 .lb-pfp-col,
  .lb-entry.rank-2 .lb-pfp-col,
  .lb-entry.rank-3 .lb-pfp-col {
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }

  .lb-entry.rank-1 .lb-pfp-frame,
  .lb-entry.rank-2 .lb-pfp-frame,
  .lb-entry.rank-3 .lb-pfp-frame {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }

  .garden-shutters {
    display: flex;
    position: fixed;
    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 9500;
    height: 54px;
    width: max-content;
    max-width: calc(100% - 24px);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(20,14,8,0.4) 0%, rgba(8,6,4,0.75) 100%),
      url('background4.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 77, 0, 0.28);
    box-shadow:
      0 0 0 1px rgba(255,140,0,0.06),
      0 10px 28px rgba(0,0,0,0.55),
      0 2px 10px rgba(0,0,0,0.4);
    padding: 0 4px;
    overflow: hidden;
  }
  .garden-shutter-btn {
    flex: 1;
    font-family: var(--display);
    font-size: calc((var(--fs-xs) + 4px) * 1.3);
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,160,60,0.7);
    background: transparent;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, color 0.2s, text-shadow 0.2s;
    position: relative;
    overflow: hidden;
    padding: 0 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
  }
  .garden-shutter-sep {
    display: inline-block;
    width: 1px;
    align-self: center;
    height: 26px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35) 30%, rgba(0,229,255,0.45) 50%, rgba(0,0,0,0.35) 70%, transparent);
    flex-shrink: 0;
    border-radius: 1px;
  }
  .garden-shutter-btn-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
  }
  .garden-shutter-btn::after {
    content: '';
    position: absolute;
    bottom: 6px; left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,140,0,0.8), transparent);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s;
    opacity: 0;
  }
  .garden-shutter-btn.is-active {
    background: linear-gradient(180deg,
      rgba(255,110,0,0.22) 0%,
      rgba(255,70,0,0.10) 60%,
      rgba(255,50,0,0.05) 100%);
    color: #ffe080;
    text-shadow:
      0 0 8px rgba(255,220,80,0.9),
      0 0 18px rgba(255,180,0,0.7);
    letter-spacing: 3px;
    box-shadow: inset 0 0 20px rgba(255,150,0,0.16);
    overflow: hidden;
  }
  .garden-shutter-btn.is-active::after {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
    background: linear-gradient(90deg, transparent, rgba(255,220,80,0.7), transparent);
    height: 2.5px;
    box-shadow: 0 0 8px rgba(255,200,0,0.6);
  }

  .garden-left,
  .garden-right {
    display: flex !important;
    left: 0 !important;
    right: 0 !important;
    top: 38px !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 38px);
    max-height: calc(100dvh - 38px);
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transform: none !important;
    transition: opacity 0.15s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: opacity;
    z-index: 9400;
    background: rgba(6, 6, 8, 0.97);
    border-top: 1px solid var(--border);
    padding: 10px 12px 0 12px;
    gap: 4px !important;
    justify-content: flex-start;
  }
  .garden-left .garden-widget,
  .garden-right .garden-widget {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Mobile: enlarge PFPs by 10% — all entries */
  #up-pfp,
  .claimers-pfp,
  .lb-entry .lb-pfp {
    transform: scale(1.1) !important;
    transform-origin: center center !important;
  }
  #up-name {
    font-size: 13px !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  .lb-name {
    font-size: calc(1.1em + 2px) !important;
  }
  /* Mobile: override desktop fixed positioning and scale on the right panel */
  .garden-right {
    padding: 12px 14.4px 0 14.4px !important;
  }
  .garden-left::-webkit-scrollbar,
  .garden-right::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .garden-left.is-open,
  .garden-right.is-open {
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto;
    z-index: 9410;
  }
  .garden-left:not(.is-open),
  .garden-right:not(.is-open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ── UP connect modal — always above bottom bar (9500) and panels (9410) ── */
  connect-modal {
    position: relative;
    z-index: 99999 !important;
  }
  .garden-panel-flex-fill {
    display: none;
  }
  .garden-right .garden-widget {
    border-radius: 9.6px;
  }
  /* ═══════════════════════════════════════════════════════════════════
     RESPONSIVE — REWARDS bottom bar (garden-right)
     nth-child(1) = BLOOM CYCLE       (.garden-widget)
     nth-child(2) = canvas#dr-burst   (position:fixed, invisible)
     nth-child(3) = DAILY REWARDS     (.reward-accordion)
     nth-child(4) = PROTOCOL FEED     (.garden-widget)
  ═══════════════════════════════════════════════════════════════════ */

  /* COMMUNITY BLOOM — mobile sizing adjustments */
  #cbl-title-text { font-size: calc(var(--fs-xs) * 2.2) !important; }
  #cbl-image-wrap { max-height: 120px !important; max-width: 120px !important; }
  .cbl-stat-val   { font-size: 10px !important; }
  .cbl-stat-label { font-size: 6px !important; }

  /* COMMUNITY BLOOM — mobile only: GPU-friendly conic border.
     Desktop keeps cbl-border-spin (animates --cbl-spin, repaints the gradient every frame).
     Here: frozen gradient + rotation via transform (GPU-composited, no repaint). */
  #community-bloom-card::before {
    animation: cbl-border-spin-gpu 3.6s linear infinite !important;
    animation-play-state: var(--cbl-paused, running) !important;
    background: conic-gradient(
      from 0deg,
      rgba(0,220,255,0.9)  0%,
      rgba(0,80,200,0.06) 25%,
      rgba(120,80,255,0.6) 50%,
      rgba(0,80,200,0.06) 75%,
      rgba(0,220,255,0.9) 100%
    ) !important;
    will-change: transform;
  }
  @keyframes cbl-border-spin-gpu {
    to { transform: rotate(360deg); }
  }

  /* COMMUNITY BLOOM — mobile only: glow pulsation without animating box-shadow.
     Desktop keeps cblGlowPulse (interpolates 5 box-shadows, repaints every frame).
     Here: box-shadow frozen at max, a dedicated ::after varies its opacity (compositable). */
  #community-bloom-card {
    animation: none !important;
    box-shadow:
      0 0 0 1px rgba(0,200,255,0.12),
      0 0 36px rgba(0,200,255,0.2),
      0 4px 28px rgba(0,0,0,0.75),
      inset 0 1px 0 rgba(0,220,255,0.15),
      inset 0 -1px 0 rgba(0,0,0,0.5) !important;
  }
  #community-bloom-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    box-shadow:
      0 0 0 1px rgba(0,180,255,0.06),
      0 0 20px rgba(0,160,255,0.1),
      inset 0 1px 0 rgba(0,220,255,0.1);
    opacity: 1;
    animation: cbl-glow-pulse-gpu 4s ease-in-out infinite;
    will-change: opacity;
  }
  @keyframes cbl-glow-pulse-gpu {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
  }

  /* DAILY REWARDS (+35% + 4px) — title excluded; token/amount/claim -2px; remaining -2px; claimers +2px */
  .reward-accordion-inner .reward-token-name     { font-size: calc(var(--fs-xl)  * 1.35 + 2px) !important; }
  .reward-accordion-inner .reward-amount-display { font-size: calc(var(--fs-2xl) * 1.35 + 2px) !important; }
  .reward-accordion-inner .reward-amount-sub     { font-size: calc(var(--fs-lg)  * 1.35 + 2px) !important; }
  .reward-accordion-inner .reward-pool-label     { font-size: calc(var(--fs-lg)  * 1.35 + 2px) !important; }
  .reward-accordion-inner .reward-claim-btn      { font-size: calc(var(--fs-lg)  * 1.35 + 2px) !important; padding: calc(18px * 0.9) calc(24px * 0.9); }
  .reward-accordion-inner .reward-cooldown       { font-size: calc(var(--fs-lg)  * 1.35 + 2px) !important; }
  .reward-accordion-inner .reward-status-msg     { font-size: calc(var(--fs-lg)  * 1.35 + 2px) !important; }
  .reward-accordion-inner .claimers-btn          { font-size: calc(var(--fs-xs) + 2px) !important; }
  /* Title: centred in the card */
  .reward-accordion .garden-widget-title         { font-size: calc(var(--fs-xs) * 2.2) !important; font-weight: 900 !important; letter-spacing: 3.5px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; text-align: center !important; padding: calc(18px * 0.9) calc(14px * 0.9) calc(12px * 0.9) !important; box-sizing: border-box; }

  /* Responsive: keep only the inline HTML title (🪙 DAILY REWARDS), hide the ::after duplicate */
  .reward-accordion .reward-accordion-title-desktop { display: flex !important; width: 100% !important; justify-content: center !important; }
  .reward-accordion-title-desktop::after { content: none !important; display: none !important; }

  /* garden-right: free scroll, auto heights — adapts to any resolution */
  .garden-right {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important; /* match .garden-left spacing between RANKING/BLOOM DISTRIBUTION */
  }

  /* Daily Rewards: auto height, no fixed % height */
  .garden-right .reward-accordion {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
  }
  .reward-accordion-body {
    overflow: visible !important;
    max-height: none !important;
  }
  .garden-right .reward-accordion-inner {
    flex: none !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    overflow: visible !important;
    padding: 0 10px 12px !important;
    gap: 7px !important;
  }

  /* Fluid fonts: readable on SE (375px) through large screens */
  .reward-accordion-inner .reward-amount-display { font-size: clamp(18px, 5vw, 28px) !important; }
  .reward-accordion-inner .reward-token-name     { font-size: clamp(10px, 3vw, 14px) !important; }
  .reward-accordion-inner .reward-amount-sub     { font-size: clamp(8px, 2.5vw, 11px) !important; }
  .reward-accordion-inner .reward-pool-label     { font-size: clamp(8px, 2.5vw, 11px) !important; }
  .reward-accordion-inner .reward-claim-btn      { font-size: clamp(9px, 2.8vw, 13px) !important; padding: 11px 0 !important; }
  .reward-accordion-inner .reward-cooldown       { font-size: clamp(8px, 2.5vw, 11px) !important; }
  .reward-accordion-inner .reward-status-msg     { font-size: clamp(8px, 2.5vw, 11px) !important; }
  .reward-accordion-inner .claimers-btn          { font-size: clamp(7px, 2.2vw, 10px) !important; padding: 6px 8px !important; }

  /* PROTOCOL FEED: capped height, internal scroll, never overflows onto CLAIM */
  .garden-right .garden-widget:nth-child(4) {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 12px 12px 0 12px !important;
    margin-bottom: 8px;
  }
  .garden-right .garden-widget:nth-child(4) .garden-widget-title {
    font-size: calc(var(--fs-md) + 2px);
    letter-spacing: 3px;
    margin-bottom: 8px;
    flex-shrink: 0;
  }
  /* ═══════════════════════════════════════════════════════════════════
     RESPONSIVE — SCORE bottom bar (garden-left)
     nth-child(1) = RANKING
     nth-child(2) = YOUR BLOOM SCORE
     nth-child(3) = BLOOM DISTRIBUTION
  ═══════════════════════════════════════════════════════════════════ */

  .garden-left {
    flex-direction: column;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 8px !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .garden-left .garden-widget:nth-child(1),
  .garden-left .garden-widget:nth-child(2) {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }
  .garden-left .garden-widget:nth-child(3) {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  /* RANKING — title aligned with BLOOM DISTRIBUTION */
  .garden-left .garden-widget:nth-child(1) .garden-widget-title {
    font-size: calc(var(--fs-xs) * 2.475);
    letter-spacing: 2.7px;
    margin-bottom: 9px;
    align-self: center;
    flex-shrink: 0;
  }
  .garden-left .garden-widget:nth-child(1) .garden-rank-val {
    font-size: calc(var(--fs-2xl) * 1.21);
    letter-spacing: 1.8px;
  }

  /* YOUR BLOOM SCORE — title aligned with BLOOM DISTRIBUTION */
  .garden-left .garden-widget:nth-child(2) .garden-widget-title {
    font-size: calc(var(--fs-xs) * 2.475);
    letter-spacing: 2.7px;
    margin-bottom: 9px;
    align-self: center;
    flex-shrink: 0;
  }
  .garden-left .garden-widget:nth-child(2) .garden-score-val {
    font-size: calc(var(--fs-2xl) * 1.21);
  }
  .garden-left .garden-widget:nth-child(2) .garden-score-sub {
    font-size: calc(var(--fs-xs) * 1.21);
    letter-spacing: 0.9px;
  }

  /* ── Animated titles (responsive only) ───────────────────────────── */
  @keyframes title-flicker-orange {
    0%   { opacity: 1;   filter: brightness(1)   drop-shadow(0 0 6px rgba(255,140,0,0.8))  drop-shadow(0 0 18px rgba(255,80,0,0.5));  letter-spacing: 2.7px; }
    18%  { opacity: 0.88; filter: brightness(0.8) drop-shadow(0 0 2px rgba(255,140,0,0.3));  letter-spacing: 2.5px; }
    20%  { opacity: 1;   filter: brightness(1.3)  drop-shadow(0 0 14px rgba(255,220,0,1))   drop-shadow(0 0 32px rgba(255,100,0,0.8)); letter-spacing: 3px; }
    22%  { opacity: 0.9; filter: brightness(1.1); }
    50%  { opacity: 1;   filter: brightness(1.05) drop-shadow(0 0 10px rgba(255,160,0,0.9)) drop-shadow(0 0 24px rgba(255,100,0,0.5)); letter-spacing: 2.8px; }
    80%  { opacity: 1;   filter: brightness(1)    drop-shadow(0 0 6px rgba(255,140,0,0.7))  drop-shadow(0 0 16px rgba(255,80,0,0.4)); letter-spacing: 2.7px; }
    100% { opacity: 1;   filter: brightness(1)    drop-shadow(0 0 6px rgba(255,140,0,0.8))  drop-shadow(0 0 18px rgba(255,80,0,0.5)); letter-spacing: 2.7px; }
  }
  @keyframes title-flicker-cyan {
    0%   { opacity: 1;   filter: brightness(1)   drop-shadow(0 0 6px rgba(0,229,255,0.8))  drop-shadow(0 0 18px rgba(0,180,200,0.5)); letter-spacing: 2.7px; }
    12%  { opacity: 0.85; filter: brightness(0.75) drop-shadow(0 0 2px rgba(0,229,255,0.2)); letter-spacing: 2.5px; }
    14%  { opacity: 1;   filter: brightness(1.35) drop-shadow(0 0 16px rgba(0,240,255,1))   drop-shadow(0 0 36px rgba(0,200,255,0.9)); letter-spacing: 3.2px; }
    16%  { opacity: 0.9; filter: brightness(1.1); }
    50%  { opacity: 1;   filter: brightness(1.05) drop-shadow(0 0 10px rgba(0,229,255,0.8)) drop-shadow(0 0 22px rgba(0,180,200,0.5)); letter-spacing: 2.8px; }
    100% { opacity: 1;   filter: brightness(1)    drop-shadow(0 0 6px rgba(0,229,255,0.8))  drop-shadow(0 0 18px rgba(0,180,200,0.5)); letter-spacing: 2.7px; }
  }

  .garden-left .garden-widget:nth-child(1) .garden-widget-title,
  .garden-left .garden-widget:nth-child(2) .garden-widget-title,
  .prem-rank-title,
  .garden-left .garden-widget:nth-child(3) .garden-widget-title,
  .prem-dist-title {
    animation: none !important;
    filter: none !important;
  }
  #cbl-title-text {
    animation: none !important;
    -webkit-text-fill-color: transparent !important;
    filter: none !important;
  }

  /* BLOOM DISTRIBUTION: title at top, graph centred +20%, gap 0.5cm */
  .garden-left .garden-widget:nth-child(3),
  .prem-dist-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible !important;
  }
  .garden-left .garden-widget:nth-child(3) .garden-widget-title,
  .prem-dist-title {
    font-size: calc(var(--fs-xs) * 2.475);
    letter-spacing: 2.7px;
    margin-bottom: 9px;
    align-self: center;
    flex-shrink: 0;
  }
  .garden-left .garden-widget:nth-child(3) #gr-radar,
  .prem-radar-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: visible !important;
  }
  /* Allow labels to breathe outside the card boundaries in responsive */
  .garden-left .garden-widget:nth-child(3) svg,
  .prem-dist-card svg,
  #your-bloom-score-card svg {
    overflow: visible !important;
  }

  /* IDENTITY & COHERENCE radar labels overflow the card horizontally on
     narrow screens — pull them inward and shrink slightly, mobile only */
  .gr-axis-label-IDENTITY,
  .gr-axis-label-COHERENCE {
    font-size: 5.5px !important;
    letter-spacing: 0.3px !important;
  }
  .gr-axis-label-IDENTITY {
    transform: translateX(-6px);
  }
  .gr-axis-label-COHERENCE {
    transform: translateX(6px);
  }
  .garden-left .garden-widget:nth-child(3) .garden-cycle {
    font-size: calc(var(--fs-lg) * 2.475);
    letter-spacing: 1.8px;
  }
}

@media (min-width: 701px) {
  #back-to-top {
    right: auto !important;
    left: 50vw !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 700px) {
  #back-to-top {
    top: auto !important;
    bottom: 5px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* ── BloomScore Dropdown Panel ──────────────────────────────────────────── */
#bloom-score-dropdown {
  position: fixed;
  top: 45px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 9998;
  width: 240px;
  background: rgba(8,8,12,0.97);
  border: 1.5px solid rgba(255,77,0,0.5);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 24px rgba(255,77,0,0.12);
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#bloom-score-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#bsd-pfp {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,77,0,0.6);
  margin-bottom: 4px;
}
#bsd-name {
  font-family: 'Orbitron', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #e8e8f0;
  letter-spacing: 1px;
  text-align: center;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bsd-addr {
  font-family: 'Nunito', monospace;
  font-size: var(--fs-xs);
  color: #555;
  letter-spacing: 1px;
  margin-top: -2px;
}
#bsd-phlame {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 5px;
}
#bsd-phlame-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
#bsd-phlame-amount {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #ff9a1f;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
#bsd-phlame-sep {
  color: rgba(255,140,0,0.3);
  font-size: 11px;
  margin: 0 1px;
}
#bsd-phlame-held-wrap,
#bsd-phlame-lp-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: default;
}
#bsd-phlame-lp-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,154,31,0.6);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
#bsd-phlame-lp {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #ff9a1f;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
#bsd-score-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 6px 0 2px;
  gap: 2px;
}
#bsd-score-title {
  font-family: 'Orbitron', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 3px;
  color: #ff8c00;
  text-transform: uppercase;
  opacity: 0.8;
}
#bsd-score {
  font-family: 'Orbitron', sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 2px;
}
#bsd-label {
  font-family: 'Nunito', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2px;
}
.bsd-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,77,0,0.3), transparent);
  margin: 6px 0 4px;
}
#bsd-bloom-link {
  font-family: 'Orbitron', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 2px;
  color: #ff8c00;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.15s;
}
#bsd-bloom-link:hover { opacity: 1; }

/* ── CLAIM DAILY REWARDS accordion ─────────────────────────────────────── */
.reward-accordion {
  padding: 0 !important;
  overflow: visible;
  min-height: 0;
}
.reward-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 14px;
  gap: 6px;
}
.reward-accordion-body {
  max-height: 37.5vw;
  overflow: visible;
}
.reward-accordion-inner {
  padding: 0 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reward-token-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  justify-content: center;
}
.reward-token-name {
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 2px;
  color: #e5ff00;
  opacity: 0.9;
  text-decoration: none;
  cursor: pointer;
}
.reward-token-name:hover,
.reward-token-name:visited,
.reward-token-name:active {
  color: #3775fa;
  text-decoration: none;
}
.reward-amount-display {
  font-family: var(--mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--accent2);
  line-height: 1;
  text-shadow: 0 0 14px rgba(255,140,0,0.4);
}
.reward-amount-sub {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: #15ff00;
  letter-spacing: 1px;
}
.reward-pool-bar-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reward-pool-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  color: #ff8c00;
  text-transform: uppercase;
}
.reward-pool-track {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.reward-pool-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4d00, #ff8c00);
  border-radius: 2px;
  transition: width 0.6s ease;
}
.reward-claim-btn {
  width: 100%;
  padding: 9px 0;
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  background: linear-gradient(135deg, #ff8c00, #ffb800);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  overflow: hidden;
}
.reward-claim-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffb800, #ffde00);
  box-shadow: 0 0 16px rgba(255,140,0,0.45);
  transform: translateY(-1px);
}
.reward-claim-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #333;
  color: #15ff00;
}
.reward-cooldown {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: #15ff00;
  letter-spacing: 1px;
  text-align: center;
}
.reward-cooldown span {
  color: var(--accent2);
  opacity: 0.8;
}
.reward-status-msg {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-align: center;
  letter-spacing: 1px;
  transition: color 0.2s;
}
.reward-claim-btn.is-unconnected {
  background: linear-gradient(135deg, rgba(255,140,0,0.18), rgba(255,184,0,0.08)) !important;
  color: #ff8c00 !important;
  border: 1px solid rgba(255,140,0,0.35) !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.reward-claim-btn.is-unconnected:hover {
  background: linear-gradient(135deg, rgba(255,140,0,0.30), rgba(255,184,0,0.18)) !important;
  box-shadow: 0 0 14px rgba(255,140,0,0.25);
  transform: translateY(-1px);
}

/* ── Daily Rewards content +10% + 1cm ───────────────────────────── */
.reward-accordion-inner .reward-token-name  { font-size: clamp(10px, 1.18vw, 13.6px); }
.reward-accordion-inner .reward-amount-display { font-size: clamp(21.5px, 2.17vw, 31px); }
.reward-accordion-inner .reward-amount-sub  { font-size: clamp(9px, 1.07vw, 11.4px); }
.reward-accordion-inner .reward-pool-label  { font-size: clamp(9px, 1.07vw, 11.4px); }
.reward-accordion-inner .reward-claim-btn   { font-size: clamp(9px, 1.07vw, 11.4px); }
.reward-accordion-inner .reward-cooldown    { font-size: clamp(9px, 1.07vw, 11.4px); }
.reward-accordion-inner .reward-status-msg  { font-size: clamp(9px, 1.07vw, 11.4px); }

/* ── Protocol Feed content +10% + 1cm ───────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   💖 BLOOM QUESTS — card that replaced Protocol Feed
═══════════════════════════════════════════════════════════════ */
#bq-progress-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  margin-bottom: 18px;
}
#bq-progress-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  color: #ff8c00;
  text-transform: uppercase;
}
#bq-progress-count { color: #ffde00; font-weight: 700; }
#bq-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
#bq-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4d00, #ff8c00, #ffde00);
  border-radius: 3px;
  transition: width 0.6s ease;
}
#bq-progress-fill.bq-complete-glow {
  animation: bqPulseGlow 1.6s ease-in-out infinite;
}
@keyframes bqPulseGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,222,0,0.5); }
  50%      { box-shadow: 0 0 16px rgba(255,222,0,0.9); }
}

#bq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Superbloom (10x the 5/5 bonus) card — sits below quest5 ─────────── */
#bq-superbloom {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(56,224,123,0.45);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Second separator, same style, between the reward line and "Resets in…" */
.bq-superbloom-sep {
  margin-top: 10px;
  padding-top: 0;
  border-top: 1px solid rgba(56,224,123,0.45);
}
/* Hidden while the quest list is collapsed, so the fold doesn't show
   this trailing separator floating below the progress bar. */
.bq-collapsible:not(.expanded) + .bq-superbloom-sep {
  display: none;
}
#bq-superbloom-heading {
  margin-bottom: 6px;
}
#bq-superbloom-title {
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #ff8c00;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 4px;
}
#bq-superbloom-progress-track {
  position: relative;
  width: 100%;
  height: 16px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  overflow: hidden;
}
#bq-superbloom-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4d00, #ff8c00, #ffde00);
  border-radius: 6px;
  transition: width 0.6s ease;
}
#bq-superbloom-progress-fill.bq-complete-glow {
  animation: bqPulseGlow 1.6s ease-in-out infinite;
}
#bq-superbloom-reward {
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: #ffde00;
  letter-spacing: 0.3px;
}
#bq-superbloom-bottom-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
#bq-superbloom-progress-count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.6);
  white-space: nowrap;
}

.bq-quest {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 0.8vw, 10px);
  padding: clamp(6px, 0.7vw, 8px) clamp(8px, 0.9vw, 10px) clamp(6px, 0.7vw, 8px) clamp(10px, 1.1vw, 13px);
  border: 1px solid rgba(255,140,0,0.32);
  border-radius: clamp(6px, 0.7vw, 8px);
  background: rgba(255,255,255,0.02);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 1px 2px rgba(0,0,0,0.25);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.15s;
}
.bq-quest::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff8c00, #ff4d00);
  opacity: 0.7;
  transition: opacity 0.25s;
}
.bq-quest:hover {
  border-color: rgba(255,140,0,0.6);
  background: rgba(255,140,0,0.04);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 2px 6px rgba(0,0,0,0.3),
    0 0 0 1px rgba(255,140,0,0.08);
}
.bq-quest:hover::before { opacity: 1; }

/* ── COMPLETED stamp — applied once a quest's reward has been claimed ──
   Grays out the entire card and overlays a rotated "COMPLETED" stamp,
   like an ink-stamp / dev-console "done" state. */
.bq-quest.bq-quest-completed {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.015);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.015),
    0 1px 2px rgba(0,0,0,0.2);
  overflow: hidden;
}
.bq-quest.bq-quest-completed::before {
  background: linear-gradient(180deg, #6a6a6a, #3a3a3a);
  opacity: 0.5;
}
.bq-quest.bq-quest-completed:hover {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.015);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.015),
    0 1px 2px rgba(0,0,0,0.2);
}
.bq-quest.bq-quest-completed:hover::before { opacity: 0.5; }
.bq-quest.bq-quest-completed .bq-quest-main {
  opacity: 0.4;
  filter: grayscale(0.85);
}
.bq-quest.bq-quest-completed .bq-quest-btn.bq-state-claimed {
  opacity: 0;
  pointer-events: none;
}
.bq-quest.bq-quest-completed::after {
  content: "COMPLETED";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%) rotate(-8deg);
  font-family: var(--display, var(--mono));
  font-weight: 900;
  font-size: clamp(11px, 1.3vw, 15px);
  letter-spacing: 2.5px;
  color: #22ff8c;
  text-shadow:
    0 0 6px rgba(34, 255, 140, 0.55),
    0 0 14px rgba(34, 255, 140, 0.3);
  padding: 3px 10px;
  border: 2px solid rgba(34, 255, 140, 0.75);
  border-radius: 4px;
  background: rgba(20, 40, 30, 0.35);
  backdrop-filter: blur(1px);
  pointer-events: none;
  animation: bqStampIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}
@keyframes bqStampIn {
  0%   { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(1.6); }
  60%  { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(0.92); }
  100% { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(1); }
}
@media (max-width: 480px) {
  .bq-quest.bq-quest-completed::after {
    right: 8px;
    font-size: 9.5px;
    letter-spacing: 1.6px;
    padding: 2px 7px;
  }
}

.bq-quest-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.bq-quest-icon {
  flex-shrink: 0;
  font-size: clamp(12px, 1.3vw, 15px);
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255,140,0,0.35));
}
.bq-quest-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bq-quest-title {
  font-family: var(--body);
  font-size: clamp(9.5px, 1.05vw, 11.6px);
  color: #e8e8f0;
  line-height: 1.3;
}
.bq-quest-title a {
  color: #ff8c00;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bq-quest-title a:hover { color: #ffb800; }
.bq-quest-reward {
  font-family: var(--mono);
  font-size: clamp(8px, 0.85vw, 9.6px);
  letter-spacing: 0.5px;
  color: #ffde00;
  opacity: 0.85;
}

.bq-quest-btn {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: clamp(7.5px, 0.85vw, 9.5px);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: clamp(4px, 0.5vw, 6px);
  padding: clamp(5px, 0.6vw, 7px) clamp(7px, 0.9vw, 10px);
  min-width: clamp(58px, 7vw, 78px);
  cursor: not-allowed;
  transition: all 0.18s;
}

/* State: quest action detected, reward not yet claimed → CLAIM (active) */
.bq-quest-btn.bq-state-claim {
  color: #000;
  background: linear-gradient(135deg, #ff8c00, #ffb800);
  border-color: transparent;
  cursor: pointer;
}
.bq-quest-btn.bq-state-claim:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffb800, #ffde00);
  box-shadow: 0 0 12px rgba(255,140,0,0.45);
  transform: translateY(-1px);
}

/* State: reward already claimed today */
.bq-quest-btn.bq-state-claimed {
  color: #15ff00;
  background: rgba(21,255,0,0.06);
  border-color: rgba(21,255,0,0.3);
  cursor: default;
}

/* State: locked (action not detected yet) */
.bq-quest-btn.bq-state-locked {
  color: #666;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  cursor: not-allowed;
}

/* State: quest not completed yet, but clickable for info */
.bq-quest-btn.bq-state-available {
  color: #ff8c00;
  background: rgba(255,140,0,0.06);
  border-color: rgba(255,140,0,0.3);
  cursor: pointer;
}
.bq-quest-btn.bq-state-available:hover {
  background: rgba(255,140,0,0.12);
  border-color: rgba(255,140,0,0.5);
}

/* State: sending tx */
.bq-quest-btn:disabled { opacity: 0.6; cursor: wait; }

#bq-progress-bonus-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  margin-bottom: 4px;
}
#bq-progress-bonus-row .bq-bonus-btn {
  flex-shrink: 0;
}
#bq-view-quests-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 4px;
}

/* Community Bloom — "HOW IT WORKS" button, opens the info popup (same
   pill style as the Bloom Quests accordion buttons). Sits right after
   the stats row, above the cycle timer. */
#cbl-note-toggle-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 4px;
}
.cbl-note-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  width: 100%;
  max-width: 220px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #ff8c00;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
/* Two buttons side by side (How It Works + History) — each takes half the
   row instead of the single-button 220px max-width, so they stay balanced
   at any card width. */
#cbl-note-toggle-row:has(#cbl-history-toggle-btn) .cbl-note-toggle-btn {
  max-width: 130px;
}
.cbl-note-toggle-btn:hover {
  background: rgba(255,140,0,0.12);
  border-color: rgba(255,140,0,0.4);
}
.cbl-note-toggle-btn:active { transform: scale(0.96); }
.cbl-note-toggle-btn svg {
  flex-shrink: 0;
  pointer-events: none;
}
.cbl-note-toggle-label {
  font-family: var(--display);
  font-size: clamp(6.5px, 0.7vw, 8px);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #ff8c00;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   VIEW QUESTS — premium button, distinct from the utility pills
   (REFRESH / LOCKED). Animated gradient border, glass fill, glow
   pulse and a shine sweep on hover — signals "primary action".
═══════════════════════════════════════════════════════════════ */
@property --vq-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes vqBorderSpin {
  to { --vq-angle: 360deg; }
}
@keyframes vqPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,140,0,0.25), 0 2px 10px rgba(255,77,0,0.18), 0 0 18px rgba(255,140,0,0.10); }
  50%      { box-shadow: 0 0 0 1px rgba(255,140,0,0.4),  0 2px 14px rgba(255,77,0,0.3),  0 0 26px rgba(255,140,0,0.22); }
}
.bq-view-quests-btn {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 220px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background:
    linear-gradient(rgba(14,10,8,0.94), rgba(14,10,8,0.94)) padding-box,
    conic-gradient(from var(--vq-angle), #ff4d00, #ffb800 25%, #ff4d00 50%, #ffde00 75%, #ff4d00 100%) border-box;
  border: 1.5px solid transparent;
  animation: vqBorderSpin 5s linear infinite, vqPulse 2.6s ease-in-out infinite;
  overflow: hidden;
  transition: transform 0.16s ease;
}
.bq-view-quests-btn::before {
  /* shine sweep on hover */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.16) 50%, transparent 60%);
  background-size: 220% 100%;
  background-position: 120% 0;
  transition: background-position 0.6s ease;
  pointer-events: none;
}
.bq-view-quests-btn:hover::before { background-position: -20% 0; }
.bq-view-quests-btn:hover {
  transform: translateY(-1px);
}
.bq-view-quests-btn:active {
  transform: translateY(0) scale(0.97);
}
.bq-view-quests-btn .bq-toggle-label,
.bq-view-quests-btn svg {
  position: relative;
  z-index: 1;
}
.bq-view-quests-btn .bq-toggle-label {
  font-size: clamp(7.5px, 0.8vw, 9.5px);
  letter-spacing: 1.6px;
  background: linear-gradient(110deg, #ffe566 0%, #ffb800 30%, #ff8c00 65%, #ff4d00 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bqBonusShimmer 3.5s linear infinite;
}
.bq-view-quests-btn svg {
  stroke: #ffb800;
  filter: drop-shadow(0 0 3px rgba(255,140,0,0.5));
  transition: transform 0.3s ease;
}
.bq-view-quests-btn.expanded svg { transform: rotate(180deg); }

/* Toggle / refresh buttons for the Bloom Quests accordion header row —
   same pill style, just below the progress bar. */
.bq-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #ff8c00;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.bq-toggle-btn:hover {
  background: rgba(255,140,0,0.12);
  border-color: rgba(255,140,0,0.4);
}
.bq-toggle-btn:active { transform: scale(0.9); }
.bq-toggle-btn svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  pointer-events: none;
}
.bq-toggle-btn.expanded svg { transform: rotate(180deg); }
.bq-toggle-btn.bq-refresh-btn.is-spinning svg { animation: bqRefreshSpin 0.7s linear infinite; }

.bq-toggle-label {
  font-family: var(--display);
  font-size: clamp(6.5px, 0.7vw, 8px);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #ff8c00;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* Collapsible section (quest list + status message) — collapsed by
   default. Uses the grid-template-rows 0fr/1fr technique so height
   doesn't need to be known ahead of time and the animation stays
   GPU-friendly (no layout thrash from measuring scrollHeight). */
.bq-collapsible {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.bq-collapsible.expanded {
  grid-template-rows: 1fr;
}
.bq-collapsible-inner {
  overflow: hidden;
  min-height: 0;
}

/* Bonus button — visually distinct from the 5 individual quest buttons:
   gold/trophy theme instead of the orange quest gradient. */
.bq-bonus-btn {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: clamp(7.5px, 0.85vw, 9.5px);
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #666;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 7px 14px;
  min-width: clamp(70px, 9vw, 90px);
  cursor: not-allowed;
  transition: all 0.18s;
}
.bq-bonus-btn.bq-state-claim {
  color: #1a1200;
  background: linear-gradient(135deg, #ffde00, #fff3b0, #ffde00);
  background-size: 200% auto;
  border-color: rgba(255,222,0,0.6);
  box-shadow: 0 0 10px rgba(255,222,0,0.35);
  cursor: pointer;
  animation: bqBonusShimmer 2.4s linear infinite;
}
@keyframes bqBonusShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.bq-bonus-btn.bq-state-claim:hover:not(:disabled) {
  box-shadow: 0 0 18px rgba(255,222,0,0.6);
  transform: translateY(-1px);
}
.bq-bonus-btn.bq-state-claimed {
  color: #15ff00;
  background: rgba(21,255,0,0.06);
  border-color: rgba(21,255,0,0.3);
  cursor: default;
}
.bq-bonus-btn.bq-state-locked {
  color: #666;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  cursor: not-allowed;
}
.bq-bonus-btn:disabled { opacity: 0.6; cursor: wait; }

.bq-status-msg {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-align: center;
  letter-spacing: 1px;
  min-height: 1.2em;
  transition: color 0.2s;
}
.bq-status-msg.ok  { color: #15ff00; }
.bq-status-msg.err { color: #ff4d4d; }
.bq-status-msg.inf { color: #ff8c00; }

/* Ranking button — icon-only trophy, sits in the title row's right corner. */
.bq-ranking-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 17px;
  line-height: 1;
  color: #ffe033;
  background: rgba(255,222,0,0.06);
  border: 1px solid rgba(255,222,0,0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.bq-ranking-btn:hover {
  background: rgba(255,222,0,0.16);
  border-color: rgba(255,222,0,0.5);
  box-shadow: 0 0 14px rgba(255,222,0,0.35);
  transform: translateY(-1px) scale(1.05);
}
.bq-ranking-btn:active { transform: scale(0.92); }

@media (max-width: 1200px) {
  .bq-ranking-btn { width: 26px; height: 26px; font-size: 15px; }
}

@media (max-width: 1200px) {
  .bq-quest-title { font-size: clamp(9px, 3vw, 11px) !important; }
  .bq-quest-reward { font-size: clamp(7.5px, 2.4vw, 9px) !important; }
  .bq-quest-btn { font-size: clamp(7px, 2.2vw, 9px) !important; min-width: 68px; padding: 6px 8px; }
  .bq-progress-bonus-reward { font-size: clamp(7.5px, 2.4vw, 9.5px) !important; }
  .bq-bonus-btn { font-size: clamp(7px, 2.2vw, 9px) !important; min-width: 76px; padding: 6px 10px; }
}

/* ── Responsive: Daily Rewards always open — placed AFTER global rules to win cascade ── */
@media (max-width: 1200px) {
  .reward-accordion-body {
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
  }
}

/* ── Navbar brand bold ───────────────────────────────────────────── */
#pool-deposit-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.80);
  align-items: center;
  justify-content: center;
}
#pool-deposit-modal.open { display: flex; }
#pool-deposit-box {
  background: #0d0d12;
  border: 1.5px solid rgba(255,140,0,0.45);
  border-radius: 14px;
  padding: 32px 36px 28px;
  min-width: 320px;
  max-width: 400px;
  width: 92vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
#pool-deposit-box h3 {
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent2);
  text-transform: uppercase;
  text-align: center;
}
.pool-input-label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  color: #555;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pool-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,140,0,0.25);
  border-radius: 6px;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: #e8e8f0;
  outline: none;
  transition: border-color 0.15s;
}
.pool-input:focus { border-color: var(--accent2); }
.pool-deposit-btn {
  width: 100%;
  padding: 10px;
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  background: linear-gradient(135deg, #ff8c00, #ffb800);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s;
}
.pool-deposit-btn:hover { background: linear-gradient(135deg, #ffb800, #ffde00); }
.pool-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #555;
  font-size: var(--fs-lg);
  cursor: pointer;
  line-height: 1;
}
.pool-close-btn:hover { color: #e8e8f0; }
#pool-deposit-status {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-align: center;
  letter-spacing: 1px;
  min-height: 12px;
}
#pool-deposit-status.ok  { color: var(--green); }
#pool-deposit-status.err { color: var(--red); }
#pool-deposit-status.inf { color: var(--accent2); }
.pool-current-balance {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: #555;
  text-align: center;
  letter-spacing: 1px;
}
.pool-current-balance span { color: var(--accent2); }
  
/* ═══════════════════════════════════════════════════════════════
   PHLAME — ENHANCED VISUAL SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes pulse-glow-orange {
  0%, 100% { box-shadow: 0 0 10px rgba(255,77,0,0.15), 0 0 30px rgba(255,40,0,0.08); }
  50%       { box-shadow: 0 0 20px rgba(255,77,0,0.3),  0 0 50px rgba(255,40,0,0.15); }
}
@keyframes pulse-glow-cyan {
  0%, 100% { text-shadow: 0 0 10px rgba(0,229,255,0.5), 0 0 25px rgba(0,180,255,0.2); }
  50%       { text-shadow: 0 0 20px rgba(0,229,255,0.9), 0 0 50px rgba(0,180,255,0.4); }
}
@keyframes pulse-glow-gold {
  0%, 100% { text-shadow: 0 0 12px rgba(255,215,0,0.5), 0 0 30px rgba(255,150,0,0.2); }
  50%       { text-shadow: 0 0 24px rgba(255,215,0,0.9), 0 0 60px rgba(255,150,0,0.4); }
}
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ── Garden widgets — full redesign ────────────────────────── */
.garden-widget:not(.reward-accordion) {
  background: linear-gradient(145deg, rgba(10,10,16,0.95), rgba(6,6,10,0.98)) !important;
  border: 1px solid rgba(255,77,0,0.3) !important;
  border-radius: 12px !important;
  box-shadow:
    0 0 0 1px rgba(255,40,0,0.06),
    0 0 16px rgba(255,60,0,0.1),
    0 4px 24px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,140,0,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.5) !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}
.garden-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,140,0,0.4), transparent);
  pointer-events: none;
}
.garden-widget:hover {
  border-color: rgba(255,140,0,0.5) !important;
  box-shadow:
    0 0 0 1px rgba(255,100,0,0.12),
    0 0 24px rgba(255,80,0,0.18),
    0 6px 32px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,180,0,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.5) !important;
}

/* ── Widget titles — desktop wide mode (no change needed, base handles it) ── */

/* ── Rank val + score val — intense glow ──────────────────── */
.garden-rank-val {
  text-shadow:
    0 0 20px rgba(255,140,0,0.7),
    0 0 50px rgba(255,77,0,0.4),
    0 0 90px rgba(255,40,0,0.2) !important;
}
.garden-score-val {
  text-shadow:
    0 0 10px currentColor,
    0 0 30px currentColor,
    0 0 60px currentColor;
  filter: none;
}

/* ── Cycle timer — pulsing cyan ────────────────────────────── */
.garden-cycle {
  animation: pulse-glow-cyan 2s ease-in-out infinite !important;
  letter-spacing: 3px !important;
}

/* ── Leaderboard panel ──────────────────────────────────────── */
.lb-panel {
  background: linear-gradient(180deg, rgba(8,8,14,0.99) 0%, rgba(6,6,10,0.99) 100%) !important;
  border-radius: 14px !important;
  overflow: hidden;
  will-change: box-shadow;
}
#lb-panel-main {
  margin-top: -1.6cm !important;
}
.lb-panel-head {
  background: linear-gradient(135deg,
    rgba(255,77,0,0.18) 0%,
    rgba(255,140,0,0.10) 40%,
    transparent 100%),
    linear-gradient(rgba(6,6,10,0.35), rgba(6,6,10,0.35)),
    url('background4.webp') !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  border-bottom: 1px solid rgba(255,77,0,0.25) !important;
  position: relative !important;
}
.lb-panel-head::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,180,0,0.6), transparent);
  pointer-events: none;
}

/* ── Filter toolbar — distinct zone below the title ── */
.lb-toolbar {
  padding: 8px clamp(10px,1.04vw,20px);
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,77,0,0.18);
  position: relative;
  z-index: 2;
}
.lb-toolbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,77,0,0.25), transparent);
  pointer-events: none;
}
.lb-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lb-toolbar-spacer {
  flex: 1;
  min-width: 0;
}
@media (max-width: 856px) {
  .lb-toolbar-inner {
    justify-content: center;
  }
  .lb-toolbar-spacer { display: none; }
}
@keyframes lb-title-glow {
  0%,100% { filter: drop-shadow(0 0 4px rgba(255,153,1,0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255,100,0,0.85)) drop-shadow(0 0 28px rgba(255,153,1,0.4)); }
}
.lb-title-char {
  display: inline-block;
  position: relative;
  padding-bottom: 0.15em;
  line-height: 1.2;
  background: linear-gradient(110deg, #ff9901 0%, #ffe27a 22%, #ff4d00 48%, #ffaf02 74%, #ff9901 100%);
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lb-panel-title {
  position: relative;
  padding-left: 0;
  padding-bottom: 0.15em;
  line-height: 1.2;
  font-family: var(--display);
  font-size: calc(var(--fs-md) * 2.392);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  color: #ffaf02;
  animation: pulse-glow-gold 3s ease-in-out infinite !important;
}
@media (max-width: 856px) {
  .lb-panel-title { font-size: calc(var(--fs-md) * 1.95) !important; }
}
.lb-panel-title::before {
  display: none;
}
.lb-panel-title::after {
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  width: 60%;
  transform: translateX(-50%);
  bottom: -7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,153,1,0.9), transparent);
  opacity: 0.85;
}
@keyframes gi-hex-spin {
  0%   { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}

/* ── Rank 1 — golden glow ──────────────────────────────────── */
.lb-entry.rank-1 .lb-score {
  box-shadow: inset 0 0 24px rgba(205,127,50,0.06) !important;
  overflow: visible !important;
}
.lb-entry.rank-2 {
  box-shadow: inset 0 0 24px rgba(192,192,192,0.06) !important;
  overflow: visible !important;
}
.lb-entry.rank-3 {
  box-shadow: inset 0 0 24px rgba(205,127,50,0.06) !important;
  overflow: visible !important;
}

/* ── Entry hover — border-color only, never touches background ── */
.lb-entry {
  position: relative;
  overflow: visible;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
.lb-entry:hover {
  border-color: rgba(210,165,0,0.85) !important;
  box-shadow: 0 0 14px rgba(210,155,0,0.18) !important;
}

/* ── Bloom fill bar — animated gradient ────────────────────── */
.lb-bloom-fill {
  background: linear-gradient(90deg, #ff2000, #ff6600, #ffaa00, #00ff88) !important;
  background-size: 200% 100% !important;
  animation: border-flow 3s ease infinite !important;
  box-shadow: 0 0 8px rgba(255,100,0,0.4) !important;
}

/* ── Pool bar fill — animated ──────────────────────────────── */
.reward-pool-fill {
  background: linear-gradient(90deg, #ff2000, #ff6600, #ffcc00) !important;
  background-size: 200% 100% !important;
  animation: border-flow 2s ease infinite !important;
  box-shadow: 0 0 6px rgba(255,100,0,0.5) !important;
}
.reward-pool-track {
  height: 5px !important;
  background: rgba(255,77,0,0.08) !important;
  border: 1px solid rgba(255,77,0,0.15) !important;
  border-radius: 3px !important;
}

/* ── Claim button — shimmer + glow (only when the claim is available) ── */
.reward-claim-btn:not(:disabled):not(.is-unconnected) {
  background: linear-gradient(135deg, #ff6600, #ffaa00, #ff6600) !important;
  background-size: 200% 100% !important;
  animation: border-flow 3s ease infinite !important;
  box-shadow:
    0 0 16px rgba(255,120,0,0.4),
    0 4px 12px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,200,0,0.3) !important;
  letter-spacing: 3px !important;
  position: relative;
  overflow: hidden;
}
.reward-claim-btn:not(:disabled):not(.is-unconnected)::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  left: -100%;
  animation: shimmer 2.5s ease infinite;
  pointer-events: none;
}
.reward-claim-btn:hover:not(:disabled) {
  box-shadow:
    0 0 30px rgba(255,150,0,0.6),
    0 6px 20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,220,0,0.4) !important;

  transform: translateY(-2px) !important;
  letter-spacing: 4px !important;
}

/* ── Reward accordion widget — pulsing border (always expanded) ── */
.reward-accordion {
  border-color: rgba(255,160,0,0.5) !important;
  box-shadow:
    0 0 24px rgba(255,100,0,0.2),
    0 0 60px rgba(255,60,0,0.1),
    inset 0 1px 0 rgba(255,180,0,0.1) !important;
}

/* ── Cooldown text — green glow ─────────────────────────────── */
.reward-cooldown {
  text-shadow: 0 0 8px rgba(21,255,0,0.5) !important;
}
.reward-cooldown span {
  text-shadow: 0 0 12px rgba(255,140,0,0.7) !important;
  opacity: 1 !important;
}

/* ── Score section values ─────────────────────────────────── */
.lb-score.score-high { text-shadow: 0 0 10px rgba(0,255,136,0.55), 0 0 22px rgba(0,200,100,0.3) !important; }
.lb-score.score-mid  { text-shadow: 0 0 10px rgba(255,204,0,0.55), 0 0 22px rgba(255,160,0,0.3) !important; }
.lb-score.score-low  { text-shadow: 0 0 10px rgba(255,51,85,0.55), 0 0 22px rgba(220,0,40,0.3) !important; }

/* ── Refresh btn ─────────────────────────────────────────── */
.lb-refresh-btn {
  border: 1px solid rgba(255,77,0,0.3) !important;
  transition: all 0.2s !important;
}
.lb-refresh-btn:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(255,77,0,0.3) !important;
  transform: translateY(-1px) !important;
}

/* ── DAILY / ALL-TIME / REFRESH tabs — dev++ polish ─────────────────────
   1) Spacing: the container is no longer flush against the panel edge
      (horizontal gap ≥ 0.1cm on each side, here 10px ≈ 0.26cm).
   2) "dev++" style: relief, glow, consistent micro-interactions,
      without touching the background/border-color/color inline handled by
      window._lbSwitchTab() (active/inactive Daily / All-Time state). ── */
#lb-mode-tabs {
  padding: 0 10px !important;
  margin-top: 10px !important;
  box-sizing: border-box !important;
}

#lb-tab-daily,
#lb-tab-alltime,
#lb-tab-refresh {
  position: relative !important;
  border-radius: 8px !important;
  backdrop-filter: blur(6px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(0,0,0,0.25),
    0 1px 3px rgba(0,0,0,0.5) !important;
  transition:
    box-shadow 0.25s cubic-bezier(.2,.8,.2,1),
    transform 0.18s cubic-bezier(.2,.8,.2,1),
    filter 0.2s ease !important;
  overflow: hidden !important;
}

/* thin glowing line at the top, "panel-head" style */
#lb-tab-daily::before,
#lb-tab-alltime::before,
#lb-tab-refresh::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,180,0,0.45), transparent);
  pointer-events: none;
}

#lb-tab-daily:hover,
#lb-tab-alltime:hover {
  filter: brightness(1.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(0,0,0,0.25),
    0 0 14px rgba(255,200,0,0.35),
    0 2px 6px rgba(0,0,0,0.55) !important;
  transform: translateY(-1px) !important;
  color: #ffe033 !important;
  border-color: #ffcc00 !important;
  background: rgba(255,200,0,0.18) !important;
}

#lb-tab-daily:active,
#lb-tab-alltime:active,
#lb-tab-refresh:active {
  transform: translateY(0) scale(0.97) !important;
  filter: brightness(0.95) !important;
}

#lb-tab-refresh {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 1px rgba(0,0,0,0.25),
    0 1px 3px rgba(0,0,0,0.5) !important;
}
#lb-tab-refresh:hover {
  color: #ff8c00 !important;
  border-color: rgba(255,140,0,0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 0 1px rgba(0,0,0,0.25),
    0 0 12px rgba(255,140,0,0.3),
    0 2px 5px rgba(0,0,0,0.5) !important;
  transform: translateY(-1px) !important;
}
#lb-tab-refresh:hover #lb-refresh-icon {
  transform: rotate(90deg) !important;
}

/* ── Leaderboard borders ─────────────────────────────────── */
.garden-left {
  box-shadow: 6px 0 40px rgba(255,40,0,0.08), inset -1px 0 0 rgba(255,77,0,0.12) !important;
}
.garden-right {
  box-shadow: -6px 0 40px rgba(255,40,0,0.08), inset 1px 0 0 rgba(255,77,0,0.12) !important;
}


/* ── Custom styled filter dropdowns ─────────────────────────── */
.lb-filter-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.lb-filter-wrap::after {
  content: '▾';
  position: absolute;
  right: 10px;
  color: #ff8c00;
  font-size: var(--fs-xs);
  pointer-events: none;
  line-height: 1;
}
.lb-filter-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: linear-gradient(135deg, rgba(12,12,18,0.98), rgba(8,8,14,0.99)) !important;
  border: 1px solid rgba(255,77,0,0.4) !important;
  color: #ff9901 !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  padding: 7px 28px 7px 12px !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  outline: none !important;
  transition: all 0.2s !important;
  box-shadow:
    0 0 10px rgba(255,77,0,0.15),
    inset 0 1px 0 rgba(255,140,0,0.08) !important;
}
.lb-filter-select:hover {
  border-color: rgba(255,140,0,0.7) !important;
  color: #ffb800 !important;
  box-shadow:
    0 0 20px rgba(255,100,0,0.3),
    inset 0 1px 0 rgba(255,180,0,0.12) !important;
  background: linear-gradient(135deg, rgba(255,50,0,0.1), rgba(255,100,0,0.05)) !important;
}
.lb-filter-select:focus {
  border-color: rgba(255,140,0,0.8) !important;
  box-shadow:
    0 0 24px rgba(255,100,0,0.35),
    0 0 0 2px rgba(255,77,0,0.15),
    inset 0 1px 0 rgba(255,180,0,0.12) !important;
  outline: none !important;
}
.lb-filter-select option {
  background: #0d0d16 !important;
  color: #ff9901 !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid rgba(255,77,0,0.15) !important;
}
.lb-filter-select option:checked {
  background: linear-gradient(135deg, rgba(255,60,0,0.22), rgba(255,100,0,0.12)) !important;
  color: #ffb800 !important;
  box-shadow: inset 0 0 0 100px rgba(255,77,0,0.18) !important;
}
.lb-filter-select option[value=""] {
  color: rgba(255,140,0,0.45) !important;
  font-style: italic !important;
}


/* ── Custom filter dropdowns (fully styled, no native select) ── */
.cf-wrap {
  position: relative;
  display: inline-block;
  user-select: none;
  z-index: 9999;
  isolation: isolate;
}
.cf-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(12,12,18,0.98), rgba(8,8,14,0.99));
  border: 1px solid rgba(255,77,0,0.4);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 10px rgba(255,77,0,0.15), inset 0 1px 0 rgba(255,140,0,0.08);
  min-width: 130px;
}
.cf-selected:hover {
  border-color: rgba(255,140,0,0.7);
  box-shadow: 0 0 20px rgba(255,100,0,0.3), inset 0 1px 0 rgba(255,180,0,0.12);
  background: linear-gradient(135deg, rgba(255,50,0,0.1), rgba(255,100,0,0.05));
}
.cf-wrap.is-open .cf-selected {
  border-color: rgba(255,140,0,0.8);
  box-shadow: 0 0 24px rgba(255,100,0,0.35), 0 0 0 2px rgba(255,77,0,0.15);
}
.cf-label {
  flex: 1;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff9901;
  white-space: nowrap;
}
.cf-arrow {
  color: #ff8c00;
  font-size: var(--fs-xs);
  transition: transform 0.2s;
  line-height: 1;
}
.cf-wrap.is-open .cf-arrow { transform: rotate(180deg); }
.cf-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: #0d0d16;
  border: 1px solid rgba(255,77,0,0.45);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 20px rgba(255,77,0,0.12);
  z-index: 999;
}
.cf-wrap.is-open .cf-dropdown { display: block; }
.cf-option {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff9901;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,77,0,0.1);
}
.cf-option:last-child { border-bottom: none; }
.cf-option:hover { background: rgba(255,77,0,0.12); color: #ffb800; }
.cf-option.cf-option-active { color: #ffb800; background: rgba(255,77,0,0.08); }

/* ── Claimers — Premium Modal ───────────────────────────────── */
@property --cl-spin { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes cl-conic-spin { to { --cl-spin: 360deg; } }
@keyframes cl-box-breathe {
  0%,100% { box-shadow:0 0 0 1px rgba(255,100,0,.15) inset,0 0 60px rgba(255,60,0,.18),0 32px 80px rgba(0,0,0,.8); }
  50%      { box-shadow:0 0 0 1px rgba(255,140,0,.28) inset,0 0 90px rgba(255,80,0,.30),0 32px 80px rgba(0,0,0,.8); }
}
@keyframes cl-icon-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes cl-icon-ring   { to { transform:rotate(360deg); } }
@keyframes cl-scan { 0%{left:-60%} 100%{left:110%} }
@keyframes cl-live-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }
@keyframes cl-glitch1 { 0%,89%,100%{opacity:0} 90%{opacity:.6;transform:translateX(-2px) skewX(-3deg)} 93%{opacity:0} }
@keyframes cl-glitch2 { 0%,89%,100%{opacity:0} 91%{opacity:.5;transform:translateX(2px)} 95%{opacity:0} }
@keyframes cl-item-in  { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:none} }
@keyframes cl-text-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes cl-spin-ring  { to{transform:rotate(360deg)} }

/* Trigger button — unchanged */
.claimers-wrap {
  position: relative;
  display: inline-block;
  user-select: none;
  z-index: 100;
}
.claimers-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--display);
  font-size: calc(var(--fs-xs) + 4px);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(135deg, #ff4d00, #ff8c00);
  color: #1a0f00;
  border: 1px solid #ffe02f46;
  border-radius: 6px;
  outline: 1px solid rgba(0,0,0,0.7);
  padding: 8px 10px;
  margin-top: 8px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg,rgba(255,110,0,0.22) 0%,rgba(255,70,0,0.10) 60%,rgba(255,50,0,0.05) 100%);
  color: #ffe080;
  text-shadow: 0 0 8px rgba(255,220,80,0.9),0 0 18px rgba(255,180,0,0.7),0 0 36px rgba(255,120,0,0.45),0 0 60px rgba(255,80,0,0.2);
  animation: btn-shutter-pulse 2s ease-in-out infinite;
}
.claimers-btn::after {
  content:''; position:absolute; bottom:0; left:50%;
  transform:translateX(-50%) scaleX(1); width:60%; height:2.5px;
  background:linear-gradient(90deg,transparent,rgba(255,220,80,0.7),transparent);
  border-radius:2px 2px 0 0; box-shadow:0 0 8px rgba(255,200,0,0.6);
}
.claimers-btn::before {
  content:''; position:absolute; top:0; bottom:0; width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,230,100,0.10),transparent);
  left:-120%; animation:btn-shutter-shimmer 2.2s ease-in-out infinite; pointer-events:none;
}
.claimers-btn { transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), filter 0.18s ease, box-shadow 0.18s ease; }
#gl-update-score-btn,
#gl-more-details-btn {
  background: linear-gradient(135deg, #ff3d00, #ff7a00) !important;
  color: #000 !important;
  box-shadow: 0 0 12px rgba(255,90,0,0.6), 0 0 24px rgba(255,60,0,0.3);
}
#gl-update-score-btn:hover,
#gl-more-details-btn:hover {
  transform: scale(1.04);
  filter: brightness(1.18) !important;
  box-shadow: 0 0 16px rgba(255,120,0,0.8), 0 0 32px rgba(255,80,0,0.45) !important;
}
.claimers-btn:hover { filter:brightness(1.12); }
#claimers-btn:hover,
#alltime-claimers-btn:hover {
  transform: scale(1.18);
  filter: brightness(1.22);
  box-shadow: 0 0 28px rgba(255,180,0,0.45), 0 6px 20px rgba(0,0,0,0.5);
  z-index: 2;
}

/* ── Modal box ── */
#claimers-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
#claimers-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  cursor: pointer;
  transition: background .35s ease, backdrop-filter .35s ease;
}
#claimers-backdrop.is-open {
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(10px);
}
#claimers-box {
  position: relative;
  width: 560px;
  max-width: 94vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  transform: scale(0.88) translateY(24px);
  opacity: 0;
  transition: transform .45s cubic-bezier(0.34,1.56,0.64,1), opacity .35s ease;
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(255,80,0,.12) 0%, transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255,40,0,.06) 0%, transparent 70%),
    rgba(8,5,3,.96);
  animation: cl-box-breathe 4s ease-in-out infinite;
}
#claimers-box.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
}
#claimers-box::before {
  content:''; position:absolute; inset:-1px; z-index:100;
  border-radius:19px; padding:3.2px;
  background: conic-gradient(from var(--cl-spin),rgba(255,220,80,.9) 0deg,rgba(255,80,0,.15) 80deg,rgba(255,40,0,.05) 160deg,rgba(255,40,0,.05) 240deg,rgba(255,80,0,.15) 310deg,rgba(255,220,80,.9) 360deg);
  mask: linear-gradient(#fff 0% 100%) content-box,
        linear-gradient(#fff 0% 100%);
  -webkit-mask:linear-gradient(#fff 0% 100%) content-box,linear-gradient(#fff 0% 100%);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation: cl-conic-spin 5s linear infinite;
  pointer-events:none;
}
#claimers-box::after {
  content:''; position:absolute; inset:0; z-index:100; border-radius:18px;
  box-shadow:0 0 0 1px rgba(255,100,0,.15) inset,0 0 60px rgba(255,60,0,.18),0 32px 80px rgba(0,0,0,.8);
  pointer-events:none;
}
#claimers-three-canvas {
  position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:0;
}

/* ── Header ── */
#claimers-header {
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px 16px;
  border-bottom:1px solid rgba(255,80,0,.13);
  flex-shrink:0;
}
#cl-title-canvas {
  position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:18px 18px 0 0;
}
.cl-header-left { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }

.cl-icon { position:relative; width:42px; height:42px; flex-shrink:0; }
.cl-icon-ring {
  position:absolute; inset:-3px; border-radius:50%;
  border:2px solid transparent;
  background:conic-gradient(from 0deg,#ff6600,#ffaa00,#ff2200,#ff6600) border-box;
  mask: linear-gradient(#fff 0% 100%) padding-box,
        linear-gradient(#fff 0% 100%);
  -webkit-mask:linear-gradient(#fff 0% 100%) padding-box,linear-gradient(#fff 0% 100%);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:cl-icon-ring 3s linear infinite;
}
.cl-icon img {
  width:42px; height:42px; object-fit:contain; mix-blend-mode:lighten;
  border-radius:50%; position:relative; z-index:1;
  animation:cl-icon-float 3s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(255,140,0,.7));
}

.cl-title-group { display:flex; flex-direction:column; gap:2px; }
.cl-eyebrow {
  font-family:var(--mono); font-size:9px; letter-spacing:4px;
  color:rgba(255,140,0,.42); text-transform:uppercase;
}
.cl-title {
  font-family:var(--display); font-size:clamp(18px,3.5vw,25px);
  font-weight:900; letter-spacing:4px; text-transform:uppercase; line-height:1;
  position:relative;
  background:linear-gradient(135deg,#ffe080 0%,#ffaa00 30%,#ff6600 60%,#ff2200 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,120,0,.5));
}
.cl-title::before {
  content:attr(data-text); position:absolute; inset:0; left:2px;
  background:linear-gradient(135deg,#00e5ff,#0080ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:0; pointer-events:none;
  animation:cl-glitch1 6s infinite;
}
.cl-title::after {
  content:attr(data-text); position:absolute; inset:0; left:-2px;
  background:linear-gradient(135deg,#ff0040,#ff6600);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:0; pointer-events:none;
  animation:cl-glitch2 6s infinite;
}
.cl-underline {
  height:2px; width:100%; margin-top:4px; position:relative; overflow:hidden;
  border-radius:1px; background:rgba(255,80,0,.12);
}
.cl-underline::after {
  content:''; position:absolute; top:0; left:-60%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,#ffaa00,#ff6600,transparent);
  animation:cl-scan 2.4s ease-in-out infinite;
}
.cl-live {
  display:flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:8px; letter-spacing:2.5px;
  color:#00ff9d; background:rgba(0,255,157,.06); border:1px solid rgba(0,255,157,.18);
  border-radius:4px; padding:3px 7px; width:fit-content; margin-top:4px;
}
.cl-live-dot {
  width:5px; height:5px; border-radius:50%;
  background:#00ff9d; box-shadow:0 0 6px #00ff9d;
  animation:cl-live-dot 1.4s ease-in-out infinite;
}
#claimers-close {
  position:relative; z-index:1; width:34px; height:34px; border-radius:8px;
  border:1px solid rgba(255,80,0,.2); background:rgba(255,40,0,.06);
  color:rgba(255,140,0,.5); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .18s ease; flex-shrink:0;
}
#claimers-close:hover { border-color:rgba(255,80,0,.6); color:#ff8c00; transform:rotate(90deg); }

/* ── Stats bar ── */
#claimers-stats {
  display:flex; align-items:center; padding:10px 22px;
  border-bottom:1px solid rgba(255,80,0,.07); background:rgba(255,50,0,.03);
  flex-shrink:0; position:relative; z-index:5;
}
.cl-stat { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; }
.cl-stat + .cl-stat::before {
  content:''; position:absolute; left:0; top:10%; bottom:10%; width:1px; background:rgba(255,80,0,.1);
}
.cl-stat-val {
  font-family:var(--display); font-size:17px; font-weight:800;
  letter-spacing:2px; color:#ffaa00; text-shadow:0 0 10px rgba(255,160,0,.45);
}
@media (max-width: 856px) {
  .cl-stat-val { font-size:12px; letter-spacing:1px; }
  .cl-eyebrow-daily { display:none; }
}
.cl-stat-lbl {
  font-family:var(--mono); font-size:8px; letter-spacing:2px;
  color:rgba(240,200,120,.4); text-transform:uppercase;
}

/* ── List ── */
#claimers-list {
  flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 0; position:relative; z-index:5;
  scrollbar-width:thin; scrollbar-color:rgba(255,120,0,.5) rgba(255,40,0,.05);
}
#claimers-list::-webkit-scrollbar { width:5px; }
#claimers-list::-webkit-scrollbar-track { background:rgba(255,40,0,.04); }
#claimers-list::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#ff6600,#ff2200); border-radius:6px; }

/* ── Claimer items ── */
.claimers-item {
  display:flex; align-items:center; gap:12px; padding:11px 22px;
  border-bottom:1px solid rgba(255,60,0,.07);
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  cursor:pointer;
  background-size:cover; background-position:center;
  background-blend-mode:overlay;
  animation:cl-item-in .35s ease both;
}
.claimers-item::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg,rgba(8,5,3,.82) 0%,rgba(8,5,3,.62) 60%,rgba(8,5,3,.45) 100%);
  transition:background .18s;
}
.claimers-item:hover::before { background:rgba(255,50,0,.1); }
.claimers-item::after {
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,200,80,.06),transparent);
  transform:skewX(-20deg); z-index:1; transition:left .5s ease; pointer-events:none;
}
.claimers-item:hover::after { left:150%; }
.claimers-item:last-child { border-bottom:none; }
.claimers-item > * { position:relative; z-index:2; }

.cl-rank {
  font-family:var(--mono); font-size:11px; letter-spacing:1px;
  color:rgba(255,120,0,.28); width:22px; text-align:right; flex-shrink:0;
}
.cl-rank.r1 { color:#ffd700; text-shadow:0 0 8px rgba(255,215,0,.6); font-size:15px; }
.cl-rank.r2 { color:#c0c0c0; text-shadow:0 0 8px rgba(192,192,192,.4); font-size:15px; }
.cl-rank.r3 { color:#e08430; text-shadow:0 0 8px rgba(224,132,48,.4); font-size:15px; }

.cl-pfp-wrap { position:relative; flex-shrink:0; }
.claimers-pfp {
  width:46px; height:46px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,80,0,.28); background:rgba(255,40,0,.1);
  display:block; transition:border-color .18s,box-shadow .18s;
}
.claimers-item:hover .claimers-pfp { border-color:rgba(255,120,0,.65); box-shadow:0 0 14px rgba(255,100,0,.3); }
.claimers-pfp-placeholder {
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); background:rgba(255,40,0,.08); border:2px solid rgba(255,60,0,.2);
  color:rgba(255,100,0,.4); flex-shrink:0;
}
.cl-pfp-ring { position:absolute; inset:-3px; border-radius:50%; pointer-events:none; }
.cl-pfp-ring.gold   { border:2px solid #ffd700; box-shadow:0 0 10px rgba(255,215,0,.5); }
.cl-pfp-ring.silver { border:2px solid #c0c0c0; box-shadow:0 0 8px rgba(192,192,192,.3); }
.cl-pfp-ring.bronze { border:2px solid #e08430; box-shadow:0 0 8px rgba(224,132,48,.3); }

.claimers-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.claimers-name {
  font-family:var(--mono); font-size:13px; letter-spacing:.5px; color:#f0e8d8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cl-addr { font-family:var(--mono); font-size:10px; letter-spacing:1px; color:rgba(255,140,0,.3); }
.claimers-time { font-family:var(--mono); font-size:10px; letter-spacing:1px; color:rgba(255,140,0,.38); margin-top:1px; }
.claimers-badge {
  font-family:var(--mono); font-size:8.5px; letter-spacing:1.5px;
  color:#00ff9d; background:rgba(0,255,157,.07); border:1px solid rgba(0,255,157,.18);
  border-radius:4px; padding:3px 6px; white-space:nowrap; flex-shrink:0; text-transform:uppercase;
}
.claimers-badges-col {
  display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0;
}
.claimers-multiplier-badge {
  font-family:var(--display); font-size:10px; font-weight:800; letter-spacing:1px;
  color:#ffaa00; background:rgba(255,140,0,.1); border:1px solid rgba(255,160,0,.35);
  border-radius:4px; padding:3px 7px; white-space:nowrap; text-transform:uppercase;
  text-shadow:0 0 8px rgba(255,140,0,.5);
}
/* ── Claim-count watermark — sits on the background, behind all foreground content ── */
.cl-claim-multiplier {
  position:absolute !important; right:14px; top:50%; transform:translateY(-50%);
  z-index:1 !important; pointer-events:none;
  font-family:var(--display); font-weight:900; letter-spacing:1px;
  font-size:clamp(26px,6vw,40px); line-height:1;
  color:rgba(255,140,0,.16);
  -webkit-text-stroke:1px rgba(255,170,0,.22);
  text-shadow:0 0 18px rgba(255,100,0,.12);
  user-select:none;
}

/* ── States ── */
.claimers-empty, .claimers-loading {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:60px 20px; text-align:center;
}
.claimers-empty-icon { font-size:36px; opacity:.4; }
.claimers-loading-spinner {
  position:relative; width:72px; height:72px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.claimers-loading-spinner::before {
  content:''; position:absolute; inset:0;
  border:2px solid rgba(255,80,0,.15); border-top-color:#ff6600; border-right-color:#ffaa00;
  border-radius:50%; animation:cl-spin-ring .8s linear infinite;
}
.claimers-loading-spinner::after {
  content:''; position:absolute; inset:6px;
  border:1px solid rgba(255,140,0,.1); border-bottom-color:rgba(255,200,0,.4);
  border-radius:50%; animation:cl-spin-ring 1.2s linear infinite reverse;
}
.claimers-loading-spinner img {
  position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px);
  object-fit:contain; mix-blend-mode:lighten; z-index:1;
}
.claimers-loading-text {
  font-family:var(--mono); font-size:11px; letter-spacing:3px;
  color:rgba(255,120,0,.35); text-transform:uppercase; animation:cl-text-blink 1.6s ease-in-out infinite;
}
.claimers-empty-text {
  font-family:var(--mono); font-size:12px; letter-spacing:2px;
  color:rgba(255,120,0,.3); text-transform:uppercase;
}

/* ── Footer ── */
#claimers-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 22px; border-top:1px solid rgba(255,80,0,.09);
  background:rgba(255,30,0,.022); flex-shrink:0; position:relative; z-index:5;
}
.cl-footer-info { font-family:var(--mono); font-size:8px; letter-spacing:2px; color:rgba(255,120,0,.28); text-transform:uppercase; }
.cl-footer-btn {
  font-family:var(--mono); font-size:8px; letter-spacing:2px;
  color:rgba(255,140,0,.42); background:none; border:1px solid rgba(255,80,0,.14);
  border-radius:4px; padding:4px 10px; cursor:pointer; text-transform:uppercase; transition:all .18s;
}
.cl-footer-btn:hover { border-color:rgba(255,120,0,.4); color:#ffaa00; }

/* ═══════════════════════════════════════════════════════════════════
   DAILY REWARDS PREMIUM — injected styles
═══════════════════════════════════════════════════════════════════ */
@keyframes drBlossomSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes drPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.65); }
}
@keyframes drShimmerTitle {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes drPoolShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@keyframes drBurstFade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Rotating conic border on the card */
#reward-accordion {
  --dr-spin: 0deg;
}
#reward-accordion::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--dr-spin),
    rgba(255,184,0,0.85) 0%,
    rgba(255,80,0,0.06) 25%,
    rgba(238,110,250,0.55) 50%,
    rgba(255,80,0,0.06) 75%,
    rgba(255,184,0,0.85) 100%
  );
  mask: linear-gradient(#fff 0% 100%) content-box,
        linear-gradient(#fff 0% 100%);

  -webkit-mask: linear-gradient(#fff 0% 100%) content-box, linear-gradient(#fff 0% 100%);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   COMMUNITY BLOOM — premium card
══════════════════════════════════════════════════════════════════ */
#community-bloom-card {
  --cbl-spin: 0deg;
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: #000 !important;
  border: 1px solid rgba(0,200,255,0.18) !important;
  box-shadow:
    0 0 0 1px rgba(0,180,255,0.06),
    0 0 20px rgba(0,160,255,0.1),
    0 4px 28px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(0,220,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.5) !important;
}
/* Conic rotating border — cyan/teal palette — CSS pure (0 rAF) */
@property --cbl-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes cbl-border-spin { to { --cbl-spin: 360deg; } }
#community-bloom-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--cbl-spin),
    rgba(0,220,255,0.9)  0%,
    rgba(0,80,200,0.06) 25%,
    rgba(120,80,255,0.6) 50%,
    rgba(0,80,200,0.06) 75%,
    rgba(0,220,255,0.9) 100%
  );
  mask: linear-gradient(#fff 0% 100%) content-box,
        linear-gradient(#fff 0% 100%);
  -webkit-mask: linear-gradient(#fff 0% 100%) content-box, linear-gradient(#fff 0% 100%);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 0;
  pointer-events: none;
  animation: cbl-border-spin 3.6s linear infinite;
  animation-play-state: var(--cbl-paused, running);
}
/* Success glow overlay */
#cbl-success-glow {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; z-index: 2;
  background: radial-gradient(ellipse at 50% 60%, rgba(0,220,255,0.18), transparent 70%);
  transition: opacity 0.4s;
}
/* Content layer above canvas */
#cbl-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
}
/* Header row */
#cbl-header {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: calc(16px * 0.9) calc(14px * 0.9) calc(10px * 0.9);
  box-sizing: border-box;
}
.cbl-petal {
  display: inline-block;
  font-size: 14px;
}
#cbl-title-text {
  font-family: 'Orbitron', sans-serif;
  font-size: var(--fs-md);
  font-weight: 900;
  letter-spacing: 3.5px;
  background: linear-gradient(135deg, #00dcff 0%, #a080ff 50%, #00dcff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cblShimmerTitle 4s linear infinite;
  text-shadow: none;
}
#cbl-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00dcff;
  box-shadow: 0 0 10px #00dcff, 0 0 20px rgba(0,220,255,0.4);
  display: inline-block;
  animation: cblPulseDot 2s ease-in-out infinite;
  flex-shrink: 0;
}
/* Body */
#cbl-body {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 12px;
}
/* Image + stats row */
#cbl-main-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.cbl-stat-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cbl-stat-col .cbl-stat {
  flex: none;
  width: 100%;
}
/* Reveal image */
#cbl-image-wrap {
  position: relative;
  width: 42%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  max-height: 120px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  /* No opaque backing — icon.webp already carries its own transparency, so
     the card's own background shows straight through around it. */
  background: transparent;
  transition: box-shadow 0.6s ease;
}
#cbl-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* Ambient glow removed — kept off per request. */
#cbl-image-wrap::before {
  content: none;
}
/* Reveal overlay — sits on top of the (untouched) raw image and fades out
   as progress increases, from opaque veil at 0% to fully transparent at
   100% (--cbl-veil-opacity set inline via JS). This creates the reveal
   effect without applying any CSS to #cbl-image itself. */
#cbl-image-mask {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--cbl-veil-opacity, 1);
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1);
  z-index: 2;
  pointer-events: none;
}
/* Shine sweep removed — kept off per request. */
#cbl-image-shine {
  display: none;
}
#cbl-image-wrap.cbl-glowing {
  box-shadow: none;
}
#cbl-image-wrap.cbl-complete {
  box-shadow: none;
}
#cbl-image-wrap.cbl-complete #cbl-image-shine {
  opacity: 0;
  animation: none;
}
@keyframes cblShineSweep {
  0%   { background-position: 200% 0%; }
  100% { background-position: -50% 0%; }
}
.cbl-stat {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 7px 6px;
  background: rgba(0,180,255,0.04);
  border: 1px solid rgba(0,180,255,0.1);
  border-radius: 8px;
  transition: border-color 0.25s, background 0.25s;
}
.cbl-stat:hover {
  border-color: rgba(0,220,255,0.25);
  background: rgba(0,180,255,0.08);
}
.cbl-stat-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 7px;
  letter-spacing: 1.5px;
  color: rgba(170,225,255,0.8);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.cbl-stat-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #00dcff;
  text-shadow: 0 0 8px rgba(0,220,255,0.5);
  text-align: center;
}
/* Progress bar */
#cbl-bar-wrap {
  width: 100%;
  display: flex; flex-direction: column; gap: 4px;
}
/* 7-day cycle countdown */
#cbl-timer-wrap {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 1px 0 2px;
}
#cbl-timer-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(170,225,255,0.85);
  text-transform: uppercase;
}
#cbl-timer-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #00dcff;
  text-shadow: 0 0 8px rgba(0,220,255,0.5);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
/* 7-day cycle countdown — color thresholds, driven by JS via classList
   (cbl-timer-val--{green,yellow,orange,red}) based on days remaining:
     7d → 5d : green   (plenty of time left)
     4d → 3d : yellow  (getting closer)
     3d → 2d : orange  (cycle end approaching)
     1d → 0d : red     (about to reset) */
#cbl-timer-val.cbl-timer-val--green {
  color: #33e07a;
  text-shadow: 0 0 8px rgba(51,224,122,0.55);
}
#cbl-timer-val.cbl-timer-val--yellow {
  color: #ffe033;
  text-shadow: 0 0 8px rgba(255,224,51,0.55);
}
#cbl-timer-val.cbl-timer-val--orange {
  color: #ff8c00;
  text-shadow: 0 0 10px rgba(255,140,0,0.6);
}
#cbl-timer-val.cbl-timer-val--red {
  color: #ff2d2d;
  text-shadow: 0 0 10px rgba(255,45,45,0.65);
}
#cbl-bar-label {
  display: flex; justify-content: space-between;
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(170,225,255,0.85);
  text-transform: uppercase;
}
#cbl-bar-track {
  width: 100%; height: 3px;
  background: rgba(0,180,255,0.08);
  border-radius: 2px; overflow: hidden;
}
#cbl-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0080ff, #00dcff, #a080ff);
  border-radius: 2px;
  position: relative;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
#cbl-bar-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: cblBarShimmer 2s linear infinite;
}
/* Reward note */
#cbl-reward-note {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: rgba(190,230,255,0.85);
  text-align: center;
  padding: 2px 4px 0;
}
#cbl-reward-note strong {
  color: #00dcff;
  font-weight: 700;
}
#cbl-reward-note .cbl-note-highlight {
  color: #ff8c00;
  font-weight: 700;
}

/* Keyframes */
@keyframes cblShimmerTitle {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes cblPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.65); }
}
@keyframes cblBarShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@keyframes cblPetalSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes cblGlowPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,180,255,0.06), 0 0 20px rgba(0,160,255,0.1), 0 4px 28px rgba(0,0,0,0.75), inset 0 1px 0 rgba(0,220,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5); }
  50%       { box-shadow: 0 0 0 1px rgba(0,200,255,0.12), 0 0 36px rgba(0,200,255,0.2), 0 4px 28px rgba(0,0,0,0.75), inset 0 1px 0 rgba(0,220,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.5); }
}
#community-bloom-card { animation: cblGlowPulse 4s ease-in-out infinite; animation-play-state: var(--cbl-paused, running); }

@media (prefers-reduced-motion: reduce) {
  #community-bloom-card::before,
  #community-bloom-card         { animation: none !important; }
  #cbl-bar-fill::after           { animation: none !important; }
  #cbl-image-wrap.cbl-complete #cbl-image-shine { animation: none !important; }
}


/* Requirement pills */
.dr-req-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 5px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,140,0,0.12);
  border-radius: 8px;
  transition: border-color 0.3s, background 0.3s;
  min-width: 0;
}
.dr-req-met {
  border-color: rgba(21,255,0,0.28) !important;
  background: rgba(21,255,0,0.04) !important;
}
.dr-req-unmet {
  border-color: rgba(255,77,0,0.28) !important;
  background: rgba(255,50,0,0.04) !important;
}
.dr-req-label {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 1.2px;
  color: rgba(200,190,220,0.45);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.dr-req-val {
  font-family: var(--display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-align: center;
}
.dr-req-met .dr-req-val   { color: #15ff00; text-shadow: 0 0 8px rgba(21,255,0,0.5); }
.dr-req-unmet .dr-req-val { color: #ff4d00; text-shadow: 0 0 8px rgba(255,77,0,0.5); }

/* Pool fill shimmer */
.reward-pool-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.32) 50%,transparent 100%);
  animation: drPoolShimmer 2.2s linear infinite;
}

/* Claimers arrow hover */
#claimers-btn:hover .dr-claimers-arrow {
  transform: translateX(2px);
  color: rgba(255,220,80,0.7) !important;
}

/* Reset countdown */
#dr-cycle-timer { font-variant-numeric: tabular-nums; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  #reward-accordion::before,
  .dr-blossom,
  #dr-live-dot,
  .reward-amount-display,
  .reward-pool-fill::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM RANKING CARD
═══════════════════════════════════════════════════════════════ */
.prem-rank-card {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  min-height: 220px;
}
#rank-ring-canvas,
#rank-ember-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#rank-ember-canvas { z-index: 1; opacity: 0.55; }
#rank-ring-canvas  { z-index: 2; }

.prem-rank-inner {
  position: relative;
  z-index: 3;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.prem-rank-title {
  text-align: center;
  width: 100%;
  margin-bottom: 2px !important;
}
.prem-hex-wrap {
  position: relative;
  width: clamp(110px,14vw,148px);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prem-hex-svg { width: 100%; height: auto; display: block; }
.prem-hex-outer { animation: hexPulse 3.5s ease-in-out infinite; }
@keyframes hexPulse {
  0%,100% { stroke-opacity:1;  filter:drop-shadow(0 0 4px #ff4d00cc); }
  50%      { stroke-opacity:.6; filter:drop-shadow(0 0 10px #ff8c00aa); }
}
.prem-hex-inner { animation: hexPulse 3.5s ease-in-out infinite reverse; }
.prem-rank-badge {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.prem-rank-label {
  font-family: var(--mono);
  font-size: clamp(7px,0.55vw,9px);
  letter-spacing: 3px;
  color: rgba(255,140,0,0.6);
  text-transform: uppercase;
  margin-bottom: 1px;
}
.prem-rank-num { font-size: clamp(26px,3vw,38px) !important; line-height: 1; }
.prem-rank-strip {
  display: flex; align-items: center;
  width: 100%;
  background: rgba(255,77,0,0.04);
  border: 1px solid rgba(255,77,0,0.15);
  border-radius: 6px;
  padding: 7px 10px;
  margin-top: 4px;
}
.prem-rank-strip-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.prem-rank-strip-div { width:1px; height:26px; background:rgba(255,77,0,0.2); }
.prem-strip-label {
  font-family: var(--mono);
  font-size: clamp(6px,0.48vw,8px);
  letter-spacing: 2px;
  color: rgba(255,140,0,0.5);
  text-transform: uppercase;
}
.prem-strip-val {
  font-family: var(--display);
  font-size: clamp(11px,1.1vw,15px);
  font-weight: 700;
  color: var(--accent2);
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255,140,0,0.5);
}

/* ═══════════════════════════════════════════════════════════════
   RANK TIER COLOURS — hex polygon + rank number
   Data attributes set by JS: data-rank-tier on .prem-hex-wrap
   ─────────────────────────────────────────────────────────────
   Tier  | Range   | Colour
   gold  | 1       | #FFD700 → #FFA500
   silver| 2       | #E8E8E8 → #A8A8B0
   bronze| 3       | #E0863A → #C4651F
   green | 4–50    | #00E676 → #00BFA5
   yellow| 51–100  | #FFE57F → #FFB300
   orange| 101+    | #FF8C00 (default)
═══════════════════════════════════════════════════════════════ */

.prem-hex-wrap[data-rank-tier="gold"]   { --tier-a: #FFD700; --tier-b: #FFA500; --tier-glow: rgba(255,215,0,0.75); }
.prem-hex-wrap[data-rank-tier="silver"] { --tier-a: #E8E8E8; --tier-b: #A8A8B0; --tier-glow: rgba(200,200,210,0.65); }
.prem-hex-wrap[data-rank-tier="bronze"] { --tier-a: #E0863A; --tier-b: #C4651F; --tier-glow: rgba(224,134,58,0.65); }
.prem-hex-wrap[data-rank-tier="green"]  { --tier-a: #00E676; --tier-b: #00BFA5; --tier-glow: rgba(0,230,118,0.60); }
.prem-hex-wrap[data-rank-tier="yellow"] { --tier-a: #FFE57F; --tier-b: #FFB300; --tier-glow: rgba(255,183,0,0.65); }
.prem-hex-wrap[data-rank-tier="orange"] { --tier-a: #FF8C00; --tier-b: #FF4D00; --tier-glow: rgba(255,100,0,0.65); }

.prem-hex-wrap[data-rank-tier] .prem-hex-outer {
  stroke: var(--tier-a, #ff4d00) !important;
}
.prem-hex-wrap[data-rank-tier] .prem-hex-inner {
  stroke: color-mix(in srgb, var(--tier-b, rgba(255,140,0,0.25)) 30%, transparent) !important;
}

.prem-hex-wrap[data-rank-tier="gold"]   .prem-hex-outer { animation: hexPulse-gold   3.5s ease-in-out infinite !important; }
.prem-hex-wrap[data-rank-tier="silver"] .prem-hex-outer { animation: hexPulse-silver 3.5s ease-in-out infinite !important; }
.prem-hex-wrap[data-rank-tier="bronze"] .prem-hex-outer { animation: hexPulse-bronze 3.5s ease-in-out infinite !important; }
.prem-hex-wrap[data-rank-tier="green"]  .prem-hex-outer { animation: hexPulse-green  3.5s ease-in-out infinite !important; }
.prem-hex-wrap[data-rank-tier="yellow"] .prem-hex-outer { animation: hexPulse-yellow 3.5s ease-in-out infinite !important; }

@keyframes hexPulse-gold   { 0%,100%{stroke-opacity:1;filter:drop-shadow(0 0 5px #FFD700cc);} 50%{stroke-opacity:.65;filter:drop-shadow(0 0 14px #FFA500aa);} }
@keyframes hexPulse-silver { 0%,100%{stroke-opacity:1;filter:drop-shadow(0 0 4px #E8E8E8bb);} 50%{stroke-opacity:.65;filter:drop-shadow(0 0 12px #A8A8B0aa);} }
@keyframes hexPulse-bronze { 0%,100%{stroke-opacity:1;filter:drop-shadow(0 0 4px #E0863Acc);} 50%{stroke-opacity:.65;filter:drop-shadow(0 0 12px #C4651Faa);} }
@keyframes hexPulse-green  { 0%,100%{stroke-opacity:1;filter:drop-shadow(0 0 5px #00E676bb);} 50%{stroke-opacity:.65;filter:drop-shadow(0 0 14px #00BFA5aa);} }
@keyframes hexPulse-yellow { 0%,100%{stroke-opacity:1;filter:drop-shadow(0 0 5px #FFE57Fbb);} 50%{stroke-opacity:.65;filter:drop-shadow(0 0 14px #FFB300aa);} }

/* Neutralize base .garden-rank-val orange text-shadow when a tier is active */
.prem-hex-wrap[data-rank-tier] .garden-rank-val {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* Rank num + label: plain color, no background-clip trick */
.prem-hex-wrap[data-rank-tier="gold"]   .prem-rank-num,
.prem-hex-wrap[data-rank-tier="gold"]   .prem-rank-label {
  color: #FFD700 !important;
  -webkit-text-fill-color: #FFD700 !important;
  background: none !important;
  text-shadow: 0 0 10px rgba(255,215,0,0.7) !important;
  filter: none !important;
}
.prem-hex-wrap[data-rank-tier="silver"] .prem-rank-num,
.prem-hex-wrap[data-rank-tier="silver"] .prem-rank-label {
  color: #D8D8E0 !important;
  -webkit-text-fill-color: #D8D8E0 !important;
  background: none !important;
  text-shadow: 0 0 8px rgba(200,200,210,0.6) !important;
  filter: none !important;
}
.prem-hex-wrap[data-rank-tier="bronze"] .prem-rank-num,
.prem-hex-wrap[data-rank-tier="bronze"] .prem-rank-label {
  color: #E0863A !important;
  -webkit-text-fill-color: #E0863A !important;
  background: none !important;
  text-shadow: 0 0 8px rgba(224,134,58,0.6) !important;
  filter: none !important;
}
.prem-hex-wrap[data-rank-tier="green"]  .prem-rank-num,
.prem-hex-wrap[data-rank-tier="green"]  .prem-rank-label {
  color: #00E676 !important;
  -webkit-text-fill-color: #00E676 !important;
  background: none !important;
  text-shadow: 0 0 10px rgba(0,230,118,0.65) !important;
  filter: none !important;
}
.prem-hex-wrap[data-rank-tier="yellow"] .prem-rank-num,
.prem-hex-wrap[data-rank-tier="yellow"] .prem-rank-label {
  color: #FFD000 !important;
  -webkit-text-fill-color: #FFD000 !important;
  background: none !important;
  text-shadow: 0 0 10px rgba(255,200,0,0.65) !important;
  filter: none !important;
}
.prem-hex-wrap[data-rank-tier="orange"] .prem-rank-num,
.prem-hex-wrap[data-rank-tier="orange"] .prem-rank-label {
  color: #FF8C00 !important;
  -webkit-text-fill-color: #FF8C00 !important;
  background: none !important;
  text-shadow: 0 0 10px rgba(255,140,0,0.6) !important;
  filter: none !important;
}

/* ── PERCENTILE value colour by tier ── */
#prem-rank-pct.pct-gold {
  color: #FFD700 !important;
  text-shadow: 0 0 10px rgba(255,215,0,0.7), 0 0 24px rgba(255,165,0,0.4) !important;
}
#prem-rank-pct.pct-silver {
  color: #C8C8D0 !important;
  text-shadow: 0 0 8px rgba(200,200,210,0.6) !important;
}
#prem-rank-pct.pct-bronze {
  color: #E0863A !important;
  text-shadow: 0 0 8px rgba(224,134,58,0.6) !important;
}
#prem-rank-pct.pct-red {
  color: #FF3D3D !important;
  text-shadow: 0 0 10px rgba(255,61,61,0.75), 0 0 24px rgba(255,0,0,0.35) !important;
}
/* default (no class) = var(--accent2) orange — already in .prem-strip-val */

/* ═══════════════════════════════════════════════════════════════
   PREMIUM BLOOM DISTRIBUTION CARD
═══════════════════════════════════════════════════════════════ */
.prem-dist-card { position:relative; overflow:hidden; padding:0 !important; }
.prem-dist-scanlines {
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    180deg, transparent 0px, transparent 3px,
    rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 4px
  );
  pointer-events:none; z-index:1;
  animation: scanSweep 8s linear infinite;
}
@keyframes scanSweep {
  0%   { background-position: 0 0; }
  100% { background-position: 0 80px; }
}
.prem-dist-inner {
  position:relative; z-index:2;
  padding: 14px 14px 12px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.prem-dist-title { text-align:center; width:100%; margin-bottom:2px !important; }

/* ── PROTOCOL FEED — terminal / dev-console title ──────────────────────── */
.bq-title-heart {
  display: inline-block;
  font-size: 1.6em;
  filter: hue-rotate(300deg) saturate(1.3) brightness(1.1);
  text-shadow: none !important;
  /* Escape the parent's gradient text-clip (background-clip:text +
     -webkit-text-fill-color:transparent on .garden-widget-title) —
     the span has no background of its own to show through the clip,
     so it inherits transparent fill and disappears. Force it back
     to normal painting so the emoji glyph renders. */
  -webkit-text-fill-color: initial !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  color: initial !important;
}
.bq-title {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--display) !important;
  font-size: var(--fs-md) !important;
  font-weight: 700;
  letter-spacing: 3px !important;
  color: var(--accent2) !important;
  text-shadow:
    0 0 8px rgba(255,140,0,0.7),
    0 0 20px rgba(255,77,0,0.35),
    0 0 40px rgba(255,40,0,0.15) !important;
  position: relative;
  padding-bottom: 6px;
}
.bq-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,140,0,0.8), transparent);
}

.prem-radar-wrap { width:100%; display:flex; justify-content:center; margin-top:10px; }
.prem-radar-wrap svg { max-width:220px; max-height:220px; }
.prem-dist-bars { width:100%; display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.prem-bar-row { display:flex; align-items:center; gap:6px; }
.prem-bar-label {
  font-family:var(--mono); font-size:clamp(6px,0.48vw,8px);
  letter-spacing:1.5px; color:rgba(255,255,255,0.5);
  width:64px; flex-shrink:0; text-align:right; text-transform:uppercase;
}
.prem-bar-track {
  flex:1; height:4px; background:rgba(255,255,255,0.06);
  border-radius:2px; overflow:visible; position:relative;
}
.prem-bar-fill {
  height:100%; border-radius:2px; width:0%;
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
  position:relative;
}
.prem-bar-fill::after {
  content:''; position:absolute; right:-1px; top:-2px;
  width:3px; height:8px; border-radius:2px;
  background:inherit; opacity:0.9;
}
.prem-bar-val {
  font-family:var(--mono); font-size:clamp(6px,0.5vw,8.5px);
  width:32px; text-align:right; flex-shrink:0;
  color:rgba(255,255,255,0.6); letter-spacing:0.5px;
}
@media (max-width:900px) {
  .prem-rank-card, .prem-dist-card { min-height:unset; }
  .prem-hex-wrap { width:clamp(90px,28vw,120px); }
}

/* ── Compact layout for any screen narrower than 412px (e.g. iPhone SE 375px) ── */
@media (max-width: 412px) {

  /* RANKING card — reduce vertical footprint */
  .prem-rank-inner {
    padding: 10px 10px 8px !important;
    gap: 5px !important;
  }
  .prem-hex-wrap {
    width: clamp(78px, 22vw, 100px) !important;
  }
  .prem-rank-num {
    font-size: clamp(20px, 6vw, 28px) !important;
  }
  .prem-rank-strip {
    padding: 5px 8px !important;
    margin-top: 2px !important;
  }
  .prem-strip-val {
    font-size: clamp(9px, 2.6vw, 12px) !important;
  }
  .prem-strip-label {
    font-size: clamp(5px, 1.5vw, 7px) !important;
  }

  /* BLOOM DISTRIBUTION — compact inner layout */
  .prem-dist-inner {
    padding: 10px 8px 8px !important;
    gap: 4px !important;
  }

  /* Radar: compact, full width, labels visible */
  .prem-radar-wrap {
    width: 100% !important;
  }
  .prem-radar-wrap svg,
  .prem-dist-card #gr-radar svg {
    max-width: min(100%, calc(100vw - 40px)) !important;
    max-height: min(100%, calc(100vw - 40px)) !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Bars — label narrower, val narrower to fit 375px */
  .prem-bar-label {
    width: 46px !important;
    font-size: clamp(5.5px, 1.6vw, 7px) !important;
    letter-spacing: 0.8px !important;
  }
  .prem-bar-val {
    width: 26px !important;
    font-size: clamp(5.5px, 1.6vw, 7px) !important;
  }
  .prem-bar-track {
    height: 3px !important;
  }
  .prem-dist-bars {
    gap: 4px !important;
    margin-top: 2px !important;
  }

  /* Dist card: allow overflow visible so radar labels don't clip */
  .prem-dist-card,
  .prem-dist-card .prem-dist-inner,
  #your-bloom-score-card {
    overflow: visible !important;
  }
  #gr-radar {
    overflow: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM DASH STATS BAR
═══════════════════════════════════════════════════════════════ */

/* Wrapper: sticky, full-width, relative for canvas */
.prem-statsbar-wrap {
  position: relative !important;
  top: auto;
  z-index: 10;
  background: transparent !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}

/* Canvas fills the bar */
#statsbar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  border-radius: 6px;
}

/* Neon sweep bar along top edge — confined within parent overflow:hidden */
.prem-statsbar-sweep {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,229,255,0.7) 30%,
    rgba(255,140,0,1)   50%,
    rgba(0,229,255,0.7) 70%,
    transparent 100%);
  z-index: 4;
  animation: statsbarSweep 4s linear infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes statsbarSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(calc(100% / 0.6 * 1.6 + 100%)); }
}

/* The bar itself */
.prem-statsbar {
  position: relative;
  z-index: 2;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
  background: rgba(30,30,30,0.6) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  padding: 6px 0 !important;
  max-height: 64px !important;
}

/* Individual stat cell */
.prem-stat {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  border-right: none !important;
  position: relative;
  transition: background 0.3s;
}
.prem-stat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,100,0,0.07) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.prem-stat:hover::after { opacity: 1; }

/* Icon wrap with rotating ring canvas */
.prem-stat-icon-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Static CSS ring (replaces the animated canvas rings — near-zero cost) */
.prem-stat-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from -90deg, var(--ring-a) 0deg 130deg, transparent 130deg 200deg, var(--ring-b) 200deg 280deg, transparent 280deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #fff calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #fff calc(100% - 1.5px));
}
#prem-stat-0 .prem-stat-icon-wrap::before { --ring-a: rgba(255,120,0,0.8);  --ring-b: rgba(0,229,255,0.4); }
#prem-stat-1 .prem-stat-icon-wrap::before { --ring-a: rgba(0,229,255,0.7); --ring-b: rgba(255,140,0,0.4); }
#prem-stat-2 .prem-stat-icon-wrap::before { --ring-a: rgba(255,200,50,0.75); --ring-b: rgba(255,77,0,0.4); }

/* Images - fluid sizes */
.prem-stat-img-0 { width: clamp(19px,2.37vw,31px) !important; height: clamp(19px,2.37vw,31px) !important; margin-top: 0.1cm !important; }
/* Ring-0 orbit matches ring-1/ring-2 — icon-wrap forced to img-1 footprint */
#prem-stat-0 .prem-stat-icon-wrap { width: clamp(24px,3.04vw,41px); height: clamp(24px,3.04vw,41px); }
.prem-stat-img-1 { width: clamp(24px,3.04vw,41px); height: clamp(24px,3.04vw,41px); }
.prem-stat-img-2 { width: clamp(24px,3.04vw,44px); height: clamp(24px,3.04vw,44px); }

/* Text block */
.prem-stat-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.prem-stat-val {
  font-family: var(--display) !important;
  font-size: clamp(11.7px,1.105vw,15.6px) !important;
  font-weight: 900 !important;
  color: #ffaf02 !important;
  letter-spacing: 1px;
  text-shadow:
    0 0 8px rgba(255,180,2,0.7),
    0 0 20px rgba(255,120,0,0.4);
  line-height: 1.1;
  transition: color 0.3s;
}
.prem-stat-label {
  font-family: var(--mono) !important;
  font-size: clamp(5.2px,0.429vw,6.76px) !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,0.45) !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
}

/* Hex dividers */
.prem-stat-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  flex-shrink: 0;
  height: 30px;
  justify-content: center;
}
.prem-stat-div-line {
  width: 1px;
  flex: 1;
  background: linear-gradient(180deg, transparent, rgba(255,77,0,0.3), transparent);
}
.prem-stat-div-hex {
  font-size: 8px;
  color: rgba(255,100,0,0.4);
  line-height: 1;
  animation: hexDivSpin 8s linear infinite;
}
@keyframes hexDivSpin {
  0%   { transform: rotate(0deg);   color: rgba(255,100,0,0.4); }
  50%  { transform: rotate(180deg); color: rgba(0,229,255,0.4); }
  100% { transform: rotate(360deg); color: rgba(255,100,0,0.4); }
}

/* Mobile */
@media (max-width: 856px) {
  .prem-stat { padding: 5px 6px !important; gap: 4px !important; }
  .prem-stat-img-0 { width: 17.7px !important; height: 17.7px !important; margin-top: 0.1cm !important; }
  #prem-stat-0 .prem-stat-icon-wrap { width: 26px !important; height: 26px !important; }
  .prem-stat-img-1 { width: 26px !important; height: 26px !important; }
  .prem-stat-img-2 { width: 26px !important; height: 22px !important; }
  .prem-statsbar   { max-height: 52px !important; padding: 5px 0 !important; }
}
@media (max-width: 412px) {
  .prem-stat { padding: 3px 3px !important; gap: 3px !important; }
  .prem-stat-div { display: none; }
  .prem-stat-val { font-size: clamp(9.1px, 3.25vw, 13px) !important; }
  .prem-stat-label { font-size: clamp(4.29px, 1.17vw, 5.72px) !important; letter-spacing: 1px !important; }
  .prem-statsbar { max-height: 46px !important; padding: 4px 0 !important; }
}

/* ══ MOBILE PERFORMANCE ══════════════════════════════════════════ */
@media (max-width: 856px) {
  /* Supprime animations box-shadow continues */
  .lb-panel             { animation: none !important; }
  #community-bloom-card { animation: none !important; }

  /* Animated scanlines → static */
  .prem-dist-scanlines { animation: none !important; }

  /* Disable continuous decorative rotations */
  .lbc-bloom-icon    { animation: none !important; }
  .prem-stat-div-hex { animation: none !important; }
  .prem-hex-outer,
  .prem-hex-inner    { animation: none !important; }

  /* FIX: the tier variants (gold/silver/bronze/green/yellow) have a
     CSS specificity higher than ".prem-hex-outer" above (attribute
     [data-rank-tier="x"] + 2 classes), so they slipped through the
     previous guard and kept animating filter:drop-shadow() in a
     loop on mobile for podium ranks. We match the specificity
     here to cut those off too. */
  .prem-hex-wrap[data-rank-tier] .prem-hex-outer { animation: none !important; }

  /* Remove animated multi-layer box-shadow (GPU repaint every frame) */
  #claimers-box      { animation: none !important; }

  /* Active nav tab: 3-layer box-shadow animated on a loop (active-tab-sheen) */
  .navbar-link.active { animation: none !important; }

  /* Connect/disconnect button: continuously rotating conic-gradient border
     (garden-rotate, repaints background every frame) */
  #connect-btn::before,
  #disconnect-btn.btn-connected::before { animation: none !important; }

  /* Disconnect button: we only remove the looping pulse box-shadow
     (garden-pulse-leave) and keep the one-off entrance animation
     (garden-pop), which isn't infinite and isn't a problem. */
  #disconnect-btn.btn-connected { animation: garden-pop 0.45s cubic-bezier(.34,1.56,.64,1) !important; }

  /* Simplify multi-layer text-shadow (GPU repaint) */
  .garden-widget-title:not(.bq-title) {
    text-shadow: 0 0 10px rgba(255,140,0,0.5) !important;
  }
  .bq-title {
    text-shadow: 0 0 8px rgba(0,229,255,0.55) !important;
  }
  .garden-rank-val {
    text-shadow: 0 0 10px rgba(255,140,0,0.5) !important;
  }
  .garden-score-val {
    text-shadow: 0 0 10px currentColor !important;
    filter: none !important;
  }
  .lb-score.score-gold   { text-shadow: 0 0 8px rgba(255,215,0,0.6) !important; }
  .lb-score.score-silver { text-shadow: 0 0 8px rgba(200,200,212,0.5) !important; }
  .lb-score.score-bronze { text-shadow: 0 0 8px rgba(224,132,48,0.5) !important; }
  .lb-score.score-high   { text-shadow: 0 0 8px rgba(0,255,136,0.45) !important; }
  .lb-score.score-mid    { text-shadow: 0 0 8px rgba(255,204,0,0.45) !important; }
  .lb-score.score-low    { text-shadow: 0 0 8px rgba(255,51,85,0.45) !important; }
  .lb-score.score-zero   { text-shadow: 0 0 10px rgba(255,0,34,0.7) !important; animation: none !important; }

  /* Reduce ember canvas opacity (fewer composited pixels) */
  #rank-ember-canvas { opacity: 0.25 !important; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lb-panel, #community-bloom-card, .garden-cycle,
  .prem-hex-outer, .prem-hex-inner,
  .lbc-bloom-icon, .prem-stat-div-hex,
  .prem-dist-scanlines { animation: none !important; }
}



.lb-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,77,0,0.15);
  background: rgba(0,0,0,0.25);
  flex-wrap: wrap;
}
.lb-page-btn {
  font-family: var(--mono);
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 1.5px;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid rgba(255,77,0,0.25);
  border-radius: 4px;
  color: rgba(255,140,0,0.65);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  min-width: 34px;
  text-align: center;
}
.lb-page-btn:hover:not(:disabled) {
  border-color: rgba(255,140,0,0.7);
  color: var(--accent2);
  background: rgba(255,77,0,0.07);
}
.lb-page-btn.active {
  border-color: var(--accent);
  color: var(--accent2);
  background: rgba(255,77,0,0.12);
  font-weight: 700;
}
.lb-page-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.lb-page-info {
  font-family: var(--mono);
  font-size: clamp(9px, 0.7vw, 11px);
  color: rgba(255,140,0,0.35);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 4px;
}
@media (max-width: 856px) {
  .lb-page-btn { padding: 5px 8px; min-width: 30px; }
  .lb-page-info { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM REFRESH BUTTONS — Bloomboard / Bloom Quests / Claimers modal
   Shared glow treatment so all three "REFRESH" triggers read as one
   consistent, unmissable premium control across the page.
═══════════════════════════════════════════════════════════════════ */
.garden-refresh-premium {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
/* Soft ambient halo sitting just behind the button — always on, subtle */
.garden-refresh-premium::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,140,0,0.55) 0%, rgba(255,140,0,0) 70%);
  opacity: 0.55;
  filter: blur(4px);
  z-index: -1;
  animation: gardenRefreshPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
/* Thin animated gradient border ring */
.garden-refresh-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--accent2), #ffde00, var(--accent), var(--accent2));
  background-size: 300% 300%;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.85;
  animation: gardenRefreshBorderFlow 3.2s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.garden-refresh-premium > * { position: relative; z-index: 1; }

.garden-refresh-premium {
  color: #ffde00 !important;
  text-shadow: 0 0 8px rgba(255,180,0,0.8), 0 0 16px rgba(255,140,0,0.4);
  box-shadow:
    0 0 10px rgba(255,140,0,0.35),
    0 0 22px rgba(255,140,0,0.18),
    inset 0 0 8px rgba(255,180,0,0.08);
  transition: color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease, text-shadow 0.2s ease;
}
.garden-refresh-premium svg {
  filter: drop-shadow(0 0 4px rgba(255,180,0,0.85));
}
.garden-refresh-premium:hover {
  color: #fff3c0 !important;
  text-shadow: 0 0 10px rgba(255,210,0,1), 0 0 22px rgba(255,150,0,0.65);
  box-shadow:
    0 0 16px rgba(255,160,0,0.55),
    0 0 34px rgba(255,140,0,0.3),
    inset 0 0 10px rgba(255,200,0,0.14);
  transform: translateY(-1px);
}
.garden-refresh-premium:active {
  transform: translateY(0) scale(0.94);
}
.garden-refresh-premium:disabled,
.garden-refresh-premium.is-loading,
.garden-refresh-premium.is-spinning {
  color: #ffde00 !important;
}
.garden-refresh-premium:disabled::before,
.garden-refresh-premium.is-loading::before,
.garden-refresh-premium.is-spinning::before {
  animation-duration: 0.9s;
}

@keyframes gardenRefreshPulse {
  0%, 100% { opacity: 0.4;  transform: scale(0.97); }
  50%      { opacity: 0.85; transform: scale(1.06); }
}
@keyframes gardenRefreshBorderFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Claimers-modal footer refresh button reuses the same look but keeps its
   own padding/sizing — glow + border ring only, no layout changes. */
.cl-footer-btn.garden-refresh-premium {
  border: none; /* the animated gradient ring replaces the static 1px border */
}

/* Bloom Quests refresh button: same treatment, drop the base .bq-toggle-btn
   static grey border so the animated gradient ring reads cleanly. */
.bq-toggle-btn.bq-refresh-btn.garden-refresh-premium {
  border: none;
  background: rgba(255,140,0,0.06);
}

@media (prefers-reduced-motion: reduce) {
  .garden-refresh-premium::before,
  .garden-refresh-premium::after {
    animation: none;
  }
}