@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

.bp-page,.bp-page *,.bp-page *::before,.bp-page *::after{margin:0;padding:0;box-sizing:border-box}
.bp-page svg{display:inline;vertical-align:baseline}
.bp-page{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;
  overflow:hidden;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:normal;
  background:transparent;color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.bp-page[data-fullscreen]{
  top:var(--safe-area-top, 0px);
}

/* ── GRAIN OVERLAY ── */
.bp-page::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── ANIMATED BACKGROUND — exact app match ── */
.bp-bg{display:none}
.bp-bg-grad{
  position:absolute;inset:-50%;width:200%;height:200%;
  background:linear-gradient(180deg,#0a0a12 0%,#0c0a14 10%,#100c1a 20%,#140e22 30%,#18102a 40%,#1c1232 50%,#20143a 60%,#241642 70%,#28184a 80%,#2c1a52 90%,#301c5a 100%);
  transform:translate(-5%,25%);
}
/* Blobs */
.bp-bg::before{
  content:'';position:absolute;top:20%;left:-20%;width:60%;height:60%;
  background:radial-gradient(circle,rgba(139,92,246,0.15) 0%,rgba(124,58,237,0.08) 40%,transparent 70%);
  filter:blur(80px);animation:bp-blobA 25s ease-in-out infinite;pointer-events:none;
}
.bp-bg::after{
  content:'';position:absolute;bottom:10%;right:-15%;width:55%;height:55%;
  background:radial-gradient(circle,rgba(168,85,247,0.12) 0%,rgba(139,92,246,0.06) 40%,transparent 70%);
  filter:blur(80px);animation:bp-blobB 30s ease-in-out infinite;pointer-events:none;
}
@keyframes bp-blobA{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(15%,20%) scale(1.1)}50%{transform:translate(25%,10%) scale(.95)}75%{transform:translate(10%,25%) scale(1.05)}}
@keyframes bp-blobB{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(-20%,-15%) scale(1.05)}50%{transform:translate(-10%,-25%) scale(1.1)}75%{transform:translate(-25%,-10%) scale(.95)}}

/* Stars */
.bp-star{
  position:absolute;width:3px;height:3px;
  background:rgba(196,181,253,0.5);border-radius:50%;opacity:0;
  animation:bp-twinkle var(--dur,3s) ease-in-out infinite;
  animation-delay:var(--del,0s);
  box-shadow:0 0 4px rgba(196,181,253,0.5),0 0 8px rgba(167,139,250,0.4),0 0 12px rgba(167,139,250,0.25);
}
@keyframes bp-twinkle{
  0%,100%{opacity:0.15;box-shadow:0 0 4px rgba(196,181,253,0.3),0 0 8px rgba(167,139,250,0.2),0 0 12px rgba(167,139,250,0.15)}
  50%{opacity:0.5;box-shadow:0 0 6px rgba(196,181,253,0.5),0 0 12px rgba(167,139,250,0.4),0 0 20px rgba(167,139,250,0.3)}
}

/* ── LAYOUT ── */
.bp-app{position:absolute;inset:0;z-index:1;max-width:480px;margin:0 auto;width:100%}

/* Header — pinned at top */
.bp-header{
  position:absolute;top:0;left:0;right:0;z-index:10;
  padding:16px 20px 14px;display:flex;align-items:center;gap:12px;
  background:transparent;
  touch-action:none;pointer-events:auto;
}
.bp-back-btn{
  position:relative;
  width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.02) 100%);
  border:1px solid rgba(255,255,255,0.06);cursor:pointer;
  color:rgba(255,255,255,0.7);-webkit-tap-highlight-color:transparent;
  overflow:hidden;
  transition:color 0.3s ease,border-color 0.4s ease,box-shadow 0.4s ease;
}
.bp-back-btn::before{
  content:'';position:absolute;top:-20%;left:-10%;width:130%;height:140%;
  background:linear-gradient(90deg,#9333ea 0%,#a855f7 30%,#7c3aed 60%,#8b5cf6 100%);
  border-radius:0 50% 50% 0 / 0 45% 45% 0;
  transform:translateX(-95%);
  transition:transform 0.55s cubic-bezier(0.4,0,0.2,1),border-radius 0.4s ease 0.15s;
  z-index:0;
}
.bp-back-btn:hover::before,.bp-back-btn:active::before{
  transform:translateX(-10%);border-radius:0;
}
.bp-back-btn:hover,.bp-back-btn:active{
  color:#ffffff;border-color:transparent;
  box-shadow:0 4px 16px rgba(139,92,246,0.35);
}
.bp-back-btn svg{position:relative;z-index:2;color:inherit;width:18px;height:18px}
.bp-header-title{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;color:#fff;flex:1}
.bp-header-right{display:flex;align-items:center;gap:8px}
.bp-fullscreen-btn{
  width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.6);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.bp-header-badge{
  padding:5px 12px;border-radius:12px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;
  background:linear-gradient(135deg,rgba(168,85,247,0.2),rgba(124,58,237,0.12));
  border:1px solid rgba(168,85,247,0.25);color:#a855f7;
}

/* Loading */
.bp-loading-spinner{
  width:32px;height:32px;border:3px solid rgba(168,85,247,0.2);border-top-color:#a855f7;
  border-radius:50%;animation:bp-spin .8s linear infinite;
}
@keyframes bp-spin{to{transform:rotate(360deg)}}

/* Scrollable content */
.bp-scroll{
  position:absolute;top:64px;left:0;right:0;bottom:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:120px;
  overscroll-behavior:contain;
}
.bp-scroll::-webkit-scrollbar{width:3px}
.bp-scroll::-webkit-scrollbar-track{background:transparent}
.bp-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:2px}

/* ── HELIX LAYOUT ── */
.bp-helix{position:relative;padding:8px 16px 0}

/* Spine — thin luminous line with faded ends */
.bp-spine{
  --spine-fill:0px;
  position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,0.06);
  z-index:1;transform:translateX(-50%);
  overflow:visible;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,white 3%,white 97%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,white 3%,white 97%,transparent 100%);
}
.bp-spine::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:var(--spine-fill,0px);
  background:linear-gradient(180deg,#9333ea 0%,#a855f7 30%,#7c3aed 60%,#8b5cf6 100%);
  border-radius:0 0 1px 1px;
  transition:height 1.2s cubic-bezier(0.16,1,0.3,1);
}
.bp-spine::after{
  content:'';position:absolute;top:0;left:-2px;width:6px;
  height:var(--spine-fill,0px);
  background:linear-gradient(180deg,rgba(147,51,234,0.2) 0%,rgba(168,85,247,0.1) 50%,rgba(139,92,246,0.03) 100%);
  filter:blur(3px);
  transition:height 1.2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes bp-beam{
  to{clip-path:inset(0 0 0% 0)}
}

/* Row */
.bp-row{display:flex;align-items:stretch;position:relative;margin-bottom:6px}
.bp-row-left{flex-direction:row}
.bp-row-right{flex-direction:row-reverse}
.bp-row-current{margin-bottom:14px}

/* Card side */
.bp-card-side{width:calc(50% - 24px);position:relative;z-index:2}
.bp-spacer{width:calc(50% - 24px)}

/* Distance label — plain text next to the node dot */
.bp-distance-label{
  position:absolute;
  display:inline-flex;align-items:baseline;gap:4px;
  white-space:nowrap;
  top:50%;
  transform:translateY(-50%);
}
.bp-distance-amount{
  font-family:'Nexa Bold','DM Sans',sans-serif;
  font-size:14px;
  background:linear-gradient(135deg,#c084fc,#a855f7);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0.5;
}
.bp-distance-away{
  font-family:'Nexa Bold','DM Sans',sans-serif;
  font-size:12px;
  color:rgba(255,255,255,0.15);
}
.bp-distance-right{
  left:calc(100% + 8px);
}
.bp-distance-left{
  right:calc(100% + 8px);
}

/* Node column */
.bp-node-col{
  width:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;z-index:3;flex-shrink:0;
}

/* ── GLASS CARD — NEW purple-tinted style ── */
.bp-gc{
  position:relative;overflow:hidden;border-radius:16px;padding:14px;
  display:flex;flex-direction:column;gap:8px;min-height:164px;
  background:linear-gradient(155deg,rgba(168,85,247,0.08) 0%,rgba(59,130,246,0.04) 40%,rgba(255,255,255,0.03) 100%);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(168,85,247,0.15);
  box-shadow:0 8px 32px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.1);
  transition:all .3s ease;
}
/* Glow orb */
.bp-gc::before{
  content:'';position:absolute;top:-40%;right:-20%;width:100px;height:100px;
  background:radial-gradient(circle,rgba(168,85,247,0.18) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  animation:bp-cardFloat 6s ease-in-out infinite;
}
@keyframes bp-cardFloat{
  0%,100%{transform:translate(0,0);opacity:0.6}
  50%{transform:translate(-10px,10px);opacity:0.9}
}
/* Bottom accent line */
.bp-gc::after{
  content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,0.4),transparent);
  pointer-events:none;z-index:5;
}
.bp-gc-current{
  border-color:rgba(168,85,247,0.25);
  box-shadow:0 8px 32px rgba(0,0,0,0.3),0 0 25px rgba(168,85,247,0.12),inset 0 1px 0 rgba(255,255,255,0.1);
}
.bp-gc-locked{opacity:0.8}

/* Card content */
.bp-gc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;position:relative;z-index:1}
.bp-gc-body{position:relative;z-index:1}
.bp-gc-foot{position:relative;z-index:1;margin-top:auto}

/* Reward icon box */
.bp-ricon{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,rgba(168,85,247,0.15),rgba(124,58,237,0.08));
  border:1px solid rgba(168,85,247,0.15);
}
.bp-ricon-locked{
  background:rgba(255,255,255,0.02);border-color:rgba(255,255,255,0.04);
}
.bp-ricon svg{width:16px;height:16px}

/* ── TIER BADGES — exact level-badge from app ── */
.bp-tier-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 10px;border-radius:20px;
  font-family:'Syne',sans-serif;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.04em;
  position:relative;overflow:hidden;cursor:pointer;
  -webkit-tap-highlight-color:transparent;flex-shrink:0;
}
/* Animated shine sweep — exact level-badge::before */
.bp-tier-badge::before{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  transform:skewX(-20deg);animation:bp-tierShine 5s infinite;z-index:1;
}
@keyframes bp-tierShine{
  0%,100%{left:-100%}
  50%{left:100%}
}
/* Container — grid overlap so pill sizes to the wider text */
.bp-tier-badge-container{
  display:grid;align-items:center;justify-items:center;z-index:2;
}

/* Both rank + level occupy the same grid cell */
.bp-tier-badge-rank,.bp-tier-badge-level{
  grid-area:1/1;display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;
}

/* Rank letters (default: visible) */
.bp-tier-badge-rank span{
  font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:0.04em;
  position:relative;z-index:2;
  opacity:1;transform:translateY(0);
  transition:opacity .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.bp-tier-badge-rank span:nth-child(1){transition-delay:0s}
.bp-tier-badge-rank span:nth-child(2){transition-delay:.025s}
.bp-tier-badge-rank span:nth-child(3){transition-delay:.05s}
.bp-tier-badge-rank span:nth-child(4){transition-delay:.075s}
.bp-tier-badge-rank span:nth-child(5){transition-delay:.1s}
.bp-tier-badge-rank span:nth-child(6){transition-delay:.125s}
.bp-tier-badge-rank span:nth-child(7){transition-delay:.15s}
.bp-tier-badge-rank span:nth-child(8){transition-delay:.175s}

/* Level letters (default: hidden, same grid cell) */
.bp-tier-badge-level span{
  font-family:'Syne',sans-serif;font-size:9px;font-weight:700;
  position:relative;z-index:2;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.bp-tier-badge-level span:nth-child(1){transition-delay:0s}
.bp-tier-badge-level span:nth-child(2){transition-delay:.025s}
.bp-tier-badge-level span:nth-child(3){transition-delay:.05s}
.bp-tier-badge-level span:nth-child(4){transition-delay:.075s}
.bp-tier-badge-level span:nth-child(5){transition-delay:.1s}
.bp-tier-badge-level span:nth-child(6){transition-delay:.125s}
.bp-tier-badge-level span:nth-child(7){transition-delay:.15s}
.bp-tier-badge-level span:nth-child(8){transition-delay:.175s}

/* Expanded: rank drops up, level drops in */
.bp-tier-badge-expanded .bp-tier-badge-rank span{opacity:0;transform:translateY(-8px)}
.bp-tier-badge-expanded .bp-tier-badge-level span{opacity:1;transform:translateY(0)}

/* Bronze — exact level-badge-bronze */
.bp-tier-bronze{
  background:linear-gradient(135deg,#CD7F32 0%,#8B4513 25%,#CD7F32 50%,#D4A574 75%,#CD7F32 100%);
  border:1px solid #CD7F32;
  box-shadow:0 0 15px rgba(205,127,50,0.32),inset 0 1px 0 rgba(255,255,255,0.3);
  color:#1a0f00;text-shadow:0 1px 0 rgba(255,255,255,0.3);
}
.bp-tier-bronze::before{background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0) 30%,rgba(255,220,180,0.5) 50%,rgba(255,255,255,0) 70%,transparent 100%)}

/* Silver — exact level-badge-silver */
.bp-tier-silver{
  background:linear-gradient(135deg,#E8E8E8 0%,#B8B8B8 25%,#E8E8E8 50%,#D0D0D0 75%,#C0C0C0 100%);
  border:1px solid #C0C0C0;
  box-shadow:0 0 15px rgba(192,192,192,0.4),inset 0 1px 0 rgba(255,255,255,0.5);
  color:#2a2a2a;text-shadow:0 1px 0 rgba(255,255,255,0.5);
}
.bp-tier-silver::before{background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 70%,transparent 100%)}

/* Gold — exact level-badge-gold */
.bp-tier-gold{
  background:linear-gradient(135deg,#FFD700 0%,#FFA500 25%,#FFD700 50%,#FFEC8B 75%,#FFD700 100%);
  border:1px solid #FFD700;
  box-shadow:0 0 20px rgba(255,215,0,0.4),inset 0 1px 0 rgba(255,255,255,0.4);
  color:#5c4200;text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
.bp-tier-gold::before{background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0) 30%,rgba(255,255,200,0.6) 50%,rgba(255,255,255,0) 70%,transparent 100%)}

/* Emerald — replaces Platinum */
.bp-tier-emerald{
  background:linear-gradient(135deg,#34d399 0%,#059669 20%,#2dd4bf 40%,#10b981 60%,#34d399 80%,#059669 100%);
  border:1px solid rgba(16,185,129,0.8);
  box-shadow:0 0 20px rgba(45,212,191,0.45),inset 0 1px 0 rgba(255,255,255,0.4);
  color:#052e1f;text-shadow:0 1px 0 rgba(255,255,255,0.3);
}
.bp-tier-emerald::before{background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 70%,transparent 100%)}

/* Diamond — exact level-badge-diamond */
.bp-tier-diamond{
  background:linear-gradient(135deg,#E0F7FF 0%,#7DD3FC 20%,#38BDF8 40%,#7DD3FC 60%,#BAE6FD 80%,#E0F7FF 100%);
  border:1px solid rgba(56,189,248,0.8);
  box-shadow:0 0 25px rgba(56,189,248,0.48),0 0 40px rgba(125,211,252,0.24),inset 0 1px 0 rgba(255,255,255,0.9);
  color:#0c4a6e;text-shadow:0 1px 0 rgba(255,255,255,0.8);
}
.bp-tier-diamond::before{background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 70%,transparent 100%);animation:bp-tierShine 4s infinite}

/* Onyx — exact level-badge-onyx */
.bp-tier-onyx{
  background:linear-gradient(135deg,#1a1a1a 0%,#0d0d0d 25%,#2d2d2d 50%,#1a1a1a 75%,#0a0a0a 100%);
  border:1px solid #333333;
  box-shadow:0 0 20px rgba(0,0,0,0.64),inset 0 1px 0 rgba(255,255,255,0.1),inset 0 -1px 0 rgba(255,255,255,0.05);
  color:#ffffff;text-shadow:0 0 10px rgba(255,255,255,0.3);
}
.bp-tier-onyx::before{background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 70%,transparent 100%);animation:bp-tierShine 6s infinite}

/* ── BUTTONS ── */
/* Claim — tier-colored metallic fill via CSS vars */
.bp-claim-btn{
  width:100%;padding:8px 14px;border-radius:12px;border:none;
  background:linear-gradient(135deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.02) 100%);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.15);
  color:rgba(255,255,255,0.7);font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;
  position:relative;overflow:hidden;letter-spacing:0.02em;
  -webkit-tap-highlight-color:transparent;
  transition:color 0.3s ease,border-color 0.4s ease,box-shadow 0.4s ease,text-shadow 0.3s ease;
}
/* Metallic fill — scales from left */
.bp-claim-btn::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;
  background:var(--claim-fill, linear-gradient(135deg,#9333ea 0%,#7c3aed 50%,#6d28d9 100%));
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.55s cubic-bezier(0.4,0,0.2,1);
  z-index:0;
}
/* Shine sweep */
.bp-claim-btn::after{
  content:'';position:absolute;top:0;left:-60%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.5) 50%,transparent 100%);
  transform:skewX(-12deg);opacity:0;z-index:1;transition:none;
}
.bp-claim-btn span{position:relative;z-index:2}
.bp-claim-btn:hover,
.bp-claim-btn:active{
  color:var(--claim-text, #ffffff);
  text-shadow:var(--claim-text-shadow, none);
  border-color:var(--claim-border, transparent);
  box-shadow:var(--claim-shadow, 0 4px 16px rgba(139,92,246,0.35));
}
.bp-claim-btn:hover::before,
.bp-claim-btn:active::before{
  transform:scaleX(1);
}
.bp-claim-btn:hover::after,
.bp-claim-btn:active::after{
  left:130%;opacity:1;
  transition:left 0.5s ease-out 0.15s,opacity 0.15s ease 0.15s;
}
.bp-claim-btn:active{transform:scale(0.96)}
/* Keep fill visible while claiming (disabled state) */
.bp-claim-btn:disabled{
  color:var(--claim-text, #ffffff);
  text-shadow:var(--claim-text-shadow, none);
  border-color:var(--claim-border, transparent);
  box-shadow:var(--claim-shadow, 0 4px 16px rgba(139,92,246,0.35));
}
.bp-claim-btn:disabled::before{
  transform:scaleX(1);
}
.bp-claim-shimmer{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 70%,transparent 100%);
  animation:bp-btnShimmer 3s ease-in-out infinite;
}
@keyframes bp-btnShimmer{0%{transform:translateX(-150%)}100%{transform:translateX(150%)}}

/* Claimed — tier-colored metallic fill via inline styles */
.bp-claimed-btn{
  width:100%;padding:8px 14px;border-radius:12px;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:4px;
  position:relative;overflow:hidden;
}

/* Locked */
.bp-locked-btn{
  width:100%;padding:8px 14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.5);font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:4px;
}

/* ── NODE STYLES ── */
.bp-node-dot{border-radius:50%;transition:all .3s ease}
.bp-node-dot-unlocked{
  background:var(--node-color);
  box-shadow:0 0 8px var(--node-glow);
}
.bp-node-dot-current{
  box-shadow:0 0 14px var(--node-glow),0 0 28px var(--node-glow);
}
.bp-node-dot-locked{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.05);
}
.bp-node-pulse{
  position:absolute;width:36px;height:36px;border-radius:50%;
  top:50%;left:50%;margin-top:-18px;margin-left:-18px;
  border:1px solid var(--node-color);opacity:0.3;
  animation:bp-pulse1 2.2s ease-in-out infinite;
}
@keyframes bp-pulse1{
  0%,100%{transform:scale(1);opacity:0.3}
  50%{transform:scale(1.5);opacity:0}
}

/* Reward name */
.bp-rname{font-family:'Syne',sans-serif;font-weight:700;font-size:12px;line-height:1.3;margin-bottom:3px}
.bp-rdesc{font-size:10px;line-height:1.4}

/* ── BADGE TAGS (inline, tier-opening rewards) ── */
.bp-badge-tag{
  display:inline-block;font-size:8px;padding:2px 6px;border-radius:4px;
  font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  margin-left:6px;vertical-align:middle;white-space:nowrap;
}
.bp-badge-tag-bronze{background:rgba(205,127,50,0.2);color:#cd7f32}
.bp-badge-tag-silver{background:rgba(192,192,192,0.2);color:#c0c0c0}
.bp-badge-tag-gold{background:rgba(255,215,0,0.2);color:#ffd700}
.bp-badge-tag-emerald{background:rgba(45,212,191,0.2);color:#2dd4bf}
.bp-badge-tag-diamond{background:rgba(79,195,247,0.2);color:#4fc3f7}
.bp-badge-tag-onyx{background:rgba(168,85,247,0.2);color:#c084fc}

/* ── BADGE PILL (glass pill below reward name on tier-unlock cards) ── */
.bp-badge-pill{
  display:inline-block;margin-top:4px;
  padding:4px 10px;border-radius:10px;
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:0.01em;
}
.bp-badge-pill-bronze{
  background:linear-gradient(135deg,rgba(205,127,50,0.18),rgba(205,127,50,0.08));
  border:1px solid rgba(205,127,50,0.2);color:#cd7f32;
}
.bp-badge-pill-silver{
  background:linear-gradient(135deg,rgba(192,192,192,0.18),rgba(192,192,192,0.08));
  border:1px solid rgba(192,192,192,0.18);color:#c0c0c0;
}
.bp-badge-pill-gold{
  background:linear-gradient(135deg,rgba(255,215,0,0.16),rgba(255,215,0,0.06));
  border:1px solid rgba(255,215,0,0.18);color:#ffd700;
}
.bp-badge-pill-emerald{
  background:linear-gradient(135deg,rgba(45,212,191,0.16),rgba(45,212,191,0.06));
  border:1px solid rgba(45,212,191,0.18);color:#2dd4bf;
}
.bp-badge-pill-diamond{
  background:linear-gradient(135deg,rgba(79,195,247,0.16),rgba(79,195,247,0.06));
  border:1px solid rgba(79,195,247,0.18);color:#4fc3f7;
}
.bp-badge-pill-onyx{
  background:linear-gradient(135deg,rgba(168,85,247,0.2),rgba(124,58,237,0.1));
  border:1px solid rgba(168,85,247,0.22);color:#c084fc;
}

/* ── TOAST ── */
.bp-toast-wrap{
  position:fixed;bottom:12px;left:0;right:0;z-index:9999;
  display:flex;justify-content:center;pointer-events:none;
}
.bp-toast{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:14px;
  background:linear-gradient(155deg,rgba(168,85,247,0.1) 0%,rgba(30,20,50,0.92) 30%,rgba(20,12,35,0.95) 100%);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(168,85,247,0.2);
  box-shadow:0 8px 32px rgba(0,0,0,0.4),0 0 20px rgba(139,92,246,0.15);
  white-space:nowrap;
}
.bp-toast::after{
  content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,0.4),transparent);
  pointer-events:none;
}
.bp-toast-icon{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#9333ea 0%,#7c3aed 100%);
}
.bp-toast-icon svg{
  width:14px;height:14px;stroke:#ffffff;stroke-width:2;fill:none;
}
.bp-toast-title{
  font-family:'Nexa Bold','DM Sans',sans-serif;
  font-size:12px;color:#fff;line-height:1.2;
}
.bp-toast-sub{
  font-family:'DM Sans',sans-serif;font-weight:400;
  font-size:10px;color:rgba(255,255,255,0.5);line-height:1.2;margin-top:1px;
}

/* ── STICKY XP BAR ── */
.bp-xp-bar-wrap{
  position:sticky;top:0;z-index:20;
  padding:6px 16px 8px;
}
.bp-xp-bar-track{
  position:relative;
  height:28px;
  border-radius:50px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.bp-xp-bar-fill{
  position:absolute;left:0;top:0;bottom:0;
  border-radius:50px;
  background:linear-gradient(90deg, rgba(147,51,234,0.35) 0%, rgba(168,85,247,0.3) 50%, rgba(124,58,237,0.35) 100%);
  border-right:1px solid rgba(168,85,247,0.2);
  overflow:hidden;
}
.bp-xp-bar-fill::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  transform:skewX(-15deg);
  animation:bp-xpShimmer 3s ease-in-out infinite;
}
@keyframes bp-xpShimmer{
  0%{left:-100%}
  100%{left:200%}
}
.bp-xp-bar-label{
  position:relative;z-index:2;
  font-family:'Nexa Bold','DM Sans',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:0.03em;
  color:rgba(255,255,255,0.95);
  text-shadow:0 1px 6px rgba(0,0,0,0.6);
  white-space:nowrap;
}
.bp-xp-bar-dim{
  color:rgba(255,255,255,0.45);
  font-weight:600;
}

/* Cards — no staggered entry, instant visibility */
.bp-gc-locked{opacity:0.8}