/* TPR — dashboard + connect wallet. Tokens, header, buttons and layers come
   from base.css; this file only lays out the members area. Every class and id
   here that the dashboard script writes or toggles is noted as such. */

@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg;}
@keyframes spin-border{to{--spin:360deg;}}
@keyframes card-in{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes chip-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes ico-ping{0%{opacity:.9;transform:scale(.9);}100%{opacity:0;transform:scale(1.35);}}
@keyframes val-shimmer{0%,100%{background-position:0% 0;}50%{background-position:100% 0;}}
@keyframes coin-flip{0%,70%{transform:rotateY(0);}85%{transform:rotateY(180deg);}100%{transform:rotateY(360deg);}}
@keyframes gift-float{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-4px) rotate(-3deg);}}
@keyframes gift-wiggle{0%,80%,100%{transform:rotate(0);}85%{transform:rotate(-12deg);}90%{transform:rotate(10deg);}95%{transform:rotate(-6deg);}}
@keyframes wave-run{0%{background-position:-60% 0;}100%{background-position:160% 0;}}

.dash-page{min-height:100svh;display:flex;flex-direction:column;}
.admin-link{padding:.6rem 1rem;font-size:.82rem;}
.nav-links a i{margin-right:4px;font-size:.8em;}
.home-link{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);color:var(--white);
  transition:border-color .3s,background .3s;}
.home-link:hover{border-color:var(--cyan);background:rgba(34,211,238,.08);}

.dash-shell{flex:1;width:100%;max-width:var(--wrap);margin-inline:auto;padding:calc(var(--top-h) + 34px) var(--pad) 60px;}

/* a card surface shared by everything in the members area: dark glass, a hairline,
   and a soft light that follows the pointer (--mx / --my set by dash.js) */
.surface{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;border:1px solid rgba(0,240,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),rgba(9,13,38,.88);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px -34px rgba(0,0,0,.9),0 0 20px -8px rgba(0,240,255,.12);
  transition:border-color .35s,transform .35s var(--ease),box-shadow .35s;}
.surface::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(0,240,255,.16),rgba(217,70,239,.12) 40%,transparent 70%);}
.surface:hover{border-color:rgba(0,240,255,.32);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 24px 60px -30px rgba(0,0,0,.95),0 0 30px -6px rgba(0,240,255,.22);}
.surface:hover::before{opacity:1;}

/* ---------------------------------------------------------------- connect */

/* a returning wallet is reconnecting (class set by the page script, max 2.5s) */
.wallet-restoring #connectPanel{visibility:hidden;}

/* one screen: the 3D logo on one side, a compact card on the other */
.dash-page:not(.is-member) .dash-shell{padding-bottom:24px;}
#connectPanel{min-height:calc(100svh - var(--top-h) - 60px);display:flex;flex-direction:column;}
.connect-grid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(24px,5vw,80px);align-items:center;}
.connect-art{position:relative;align-self:stretch;min-height:300px;}

.connect-card{position:relative;isolation:isolate;overflow:hidden;padding:clamp(24px,3vw,36px);border-radius:26px;
  border:1px solid rgba(0,240,255,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),rgba(9,13,38,.94);
  box-shadow:0 40px 90px -45px rgba(0,0,0,.95),0 0 35px -10px rgba(0,240,255,.22);animation:card-in .8s var(--ease) both;}
/* a hairline of light that slides along the top edge */
.connect-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,240,255,.95),rgba(217,70,239,.95),transparent);background-size:50% 100%;background-repeat:no-repeat;
  animation:wave-run 4.5s ease-in-out infinite;}
.cc-head{display:flex;align-items:center;gap:14px;}
.cc-badge{position:relative;flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;font-size:1.25rem;color:#fff;
  background:linear-gradient(140deg,#00f0ff,#8b5cf6);box-shadow:0 12px 30px -12px rgba(0,240,255,.8);}
.cc-badge::after{content:"";position:absolute;inset:-5px;border-radius:20px;border:1.5px solid rgba(0,240,255,.7);animation:ico-ping 2.6s ease-out infinite;}
.connect-card h1{font-size:clamp(1.9rem,3.2vw,2.5rem);line-height:1.02;letter-spacing:-.035em;}
.connect-lead{margin-top:14px;font-size:.95rem;line-height:1.6;}

/* the three steps take turns lighting up while a fill runs down the rail */
.connect-steps{--cycle:6s;position:relative;display:grid;gap:4px;margin:22px 0 24px;counter-reset:step;}
.connect-steps::before,.connect-steps::after{content:"";position:absolute;left:17px;top:20px;width:2px;border-radius:2px;}
.connect-steps::before{bottom:20px;background:rgba(0,240,255,.16);}
.connect-steps::after{height:0;background:linear-gradient(180deg,#00f0ff,#d946ef);box-shadow:0 0 12px rgba(0,240,255,.8);animation:rail-fill var(--cycle) ease-in-out infinite;}
@keyframes rail-fill{0%{height:0;opacity:1;}66%{height:calc(100% - 40px);opacity:1;}90%{height:calc(100% - 40px);opacity:0;}100%{height:0;opacity:0;}}
.connect-steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:center;padding:8px 0;counter-increment:step;}
.cs-n{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  font:700 .85rem/1 var(--f-display);color:var(--muted);background:#0d1232;border:1.5px solid rgba(0,240,255,.25);
  animation:step-on var(--cycle) ease-in-out infinite;}
.cs-n::before{content:counter(step);}
.connect-steps strong{font:500 .95rem/1.35 var(--f-display);color:var(--text);animation:step-text var(--cycle) ease-in-out infinite;}
.connect-steps li:nth-child(2) .cs-n,.connect-steps li:nth-child(2) strong{animation-delay:calc(var(--cycle) / 3);}
.connect-steps li:nth-child(3) .cs-n,.connect-steps li:nth-child(3) strong{animation-delay:calc(var(--cycle) / 3 * 2);}
@keyframes step-on{
  0%,28%{color:#050716;background:linear-gradient(140deg,#00f0ff,#8b5cf6);border-color:transparent;box-shadow:0 0 0 5px rgba(0,240,255,.18),0 8px 20px -6px rgba(139,92,246,.9);}
  36%,100%{color:var(--muted);background:#0d1232;border-color:rgba(0,240,255,.2);box-shadow:none;}}
@keyframes step-text{0%,28%{color:var(--white);}36%,100%{color:var(--text);}}

.wallet-btn{position:relative;overflow:hidden;width:100%;height:56px;font-size:1.02rem;border-radius:16px;}
.wallet-btn::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:35%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .7s var(--ease);}
.wallet-btn:hover::after{left:130%;}
/* #connectBtn states set by the script */
.wallet-btn.connecting{opacity:.85;pointer-events:none;}
.wallet-btn.connected{background:linear-gradient(100deg,#00e676,#00f0ff);color:#050716;font-weight:700;}

/* ---------------------------------------------------------------- dashboard (#dashboard.show is set by the script) */

#dashboard{display:none;}
#dashboard.show{display:block;animation:card-in .6s var(--ease) both;}

.dash-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px;}
.verified{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:.66rem;text-transform:uppercase;
  letter-spacing:.16em;color:#00e676;border:1px solid rgba(0,230,118,.35);background:rgba(0,230,118,.08);box-shadow:0 0 16px -4px rgba(0,230,118,.3);margin-bottom:14px;}
.dash-head h2{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1;letter-spacing:-.035em;}
.dash-addr{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;font-size:.85rem;color:var(--white);
  border:1px solid rgba(0,240,255,.24);background:rgba(9,13,38,.75);box-shadow:0 0 18px -6px rgba(0,240,255,.2);transition:border-color .3s,box-shadow .3s;}
.dash-addr:hover{border-color:rgba(0,240,255,.6);box-shadow:0 0 24px -4px rgba(0,240,255,.4);}
.dash-addr i{color:var(--cyan);filter:drop-shadow(0 0 8px rgba(0,240,255,.5));}

/* stat cards: one calm surface, one accent, numbers that roll and bars that fill */
.dash-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px;}
.stat-card{padding:20px 20px 22px;animation:card-in .7s var(--ease) backwards;}
.stat-card:nth-child(2){animation-delay:.07s;}
.stat-card:nth-child(3){animation-delay:.14s;}
.stat-card:nth-child(4){animation-delay:.21s;}
.stat-card:hover{transform:translateY(-3px);}
.st-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;}
.stat-card .lab{font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);}
.stat-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-size:.95rem;color:#ffffff;
  background:rgba(139,92,246,.18);border:1px solid rgba(139,92,246,.32);
  box-shadow:0 0 16px -4px rgba(139,92,246,.4);transition:color .3s,background .3s,transform .4s var(--ease),border-color .3s,box-shadow .3s;}
.stat-card:nth-child(1) .stat-ico{color:#c084fc;background:rgba(168,85,247,.16);border-color:rgba(168,85,247,.36);box-shadow:0 0 18px -4px rgba(168,85,247,.45);}
.stat-card:nth-child(2) .stat-ico{color:#f472b6;background:rgba(217,70,239,.16);border-color:rgba(217,70,239,.36);box-shadow:0 0 18px -4px rgba(217,70,239,.45);}
.stat-card:nth-child(3) .stat-ico{color:#4ade80;background:rgba(0,230,118,.14);border-color:rgba(0,230,118,.32);box-shadow:0 0 18px -4px rgba(0,230,118,.4);}
.stat-card:nth-child(4) .stat-ico{color:#fef08a;background:radial-gradient(circle at center,rgba(251,191,36,.32) 0%,rgba(245,158,11,.14) 75%);border-color:rgba(251,191,36,.65);box-shadow:0 0 24px rgba(251,191,36,.5),inset 0 0 12px rgba(251,191,36,.25);}
.stat-card:hover .stat-ico{transform:rotate(-6deg) scale(1.08);box-shadow:0 0 24px -2px rgba(0,240,255,.5),0 0 35px rgba(217,70,239,.4);}
.stat-card:nth-child(1):hover .stat-ico{background:linear-gradient(135deg,#00f0ff,#8b5cf6);color:#050716;border-color:transparent;}
.stat-card:nth-child(2):hover .stat-ico{background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;border-color:transparent;}
.stat-card:nth-child(3):hover .stat-ico{background:linear-gradient(135deg,#00e676,#00f0ff);color:#050716;border-color:transparent;}
.stat-card:nth-child(4):hover .stat-ico{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#050716;border-color:rgba(254,240,138,.8);box-shadow:0 0 32px rgba(251,191,36,.75);}

/* each icon keeps a small loop of its own, a glow that breathes and a light that sweeps across */
.stat-ico{position:relative;overflow:hidden;}
.stat-ico canvas.stat-3d-ico{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none;z-index:2;}
.stat-ico.has-3d i{opacity:0;pointer-events:none;}
.stat-ico::before{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:ico-sweep 4.2s ease-in-out infinite;pointer-events:none;z-index:3;}
.stat-ico i{position:relative;display:inline-block;transition:opacity .3s;}
.stat-card:nth-child(1) .stat-ico i{animation:ico-hop 2.4s ease-in-out infinite;}
.stat-card:nth-child(2) .stat-ico i{animation:gift-wiggle 2.8s ease-in-out infinite;transform-origin:50% 90%;}
.stat-card:nth-child(3) .stat-ico i{animation:ico-glow 2.6s ease-in-out infinite;}
.stat-card:nth-child(4) .stat-ico i{animation:ico-swing 3s ease-in-out infinite;transform-origin:50% 10%;}
.stat-card:nth-child(2) .stat-ico,.stat-card:nth-child(2) .stat-ico::before{animation-delay:.6s;}
.stat-card:nth-child(3) .stat-ico,.stat-card:nth-child(3) .stat-ico::before{animation-delay:1.2s;}
.stat-card:nth-child(4) .stat-ico,.stat-card:nth-child(4) .stat-ico::before{animation-delay:1.8s;}
@keyframes ico-breathe{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0);}50%{box-shadow:0 0 18px 1px rgba(139,92,246,.45);}}
@keyframes ico-sweep{0%,60%{left:-80%;}100%{left:140%;}}
@keyframes ico-hop{0%,60%,100%{transform:translateY(0);}70%{transform:translateY(-3px);}80%{transform:translateY(0);}88%{transform:translateY(-1.5px);}}
@keyframes ico-glow{0%,100%{transform:scale(1);}50%{transform:scale(1.14);}}
@keyframes ico-swing{0%,100%{transform:rotate(0);}20%{transform:rotate(12deg);}40%{transform:rotate(-9deg);}60%{transform:rotate(5deg);}80%{transform:rotate(-2deg);}}
.stat-card .val{display:flex;align-items:center;gap:10px;font:700 clamp(1.7rem,2.6vw,2.3rem)/1.05 var(--f-display);letter-spacing:-.03em;
  color:var(--white);font-variant-numeric:tabular-nums;}
.stat-card .val small{font:500 .95rem/1 var(--f-display);color:var(--muted);letter-spacing:0;align-self:flex-end;margin-bottom:4px;}
.stat-card .val.bump,.stat-card .val span.bump{animation:val-bump .55s var(--ease);}
@keyframes val-bump{0%{transform:scale(1);}40%{transform:scale(1.12);}100%{transform:scale(1);}}
#statRank{background:linear-gradient(100deg,#fff,#fde047 30%,#00f0ff 65%,#d946ef);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:val-shimmer 6s ease-in-out infinite;}
.live-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#00e676;box-shadow:0 0 0 0 rgba(0,230,118,.7);animation:live 1.8s ease-out infinite;}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(0,230,118,.7);}100%{box-shadow:0 0 0 10px rgba(0,230,118,0);}}
.st-meta{margin-top:10px;font-size:.8rem;color:var(--muted);}
.st-bar{position:relative;height:6px;margin-top:14px;border-radius:6px;overflow:hidden;background:rgba(0,240,255,.14);}
.st-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,#00f0ff,#8b5cf6 60%,#d946ef);box-shadow:0 0 10px rgba(0,240,255,.6);
  transition:width 1.2s var(--ease);}
.st-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:wave-run 2.4s ease-in-out infinite;}
.st-bar + .st-meta{margin-top:8px;}

.dash-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:14px;}
.ref-card{padding:clamp(20px,2.6vw,28px);margin-bottom:14px;}
.dash-grid .ref-card{margin-bottom:0;}
.ref-card[hidden]{display:none !important;}                  /* #claimTotalsCard.hidden is set by the script */
.ref-card h3{display:flex;align-items:center;gap:10px;font-size:1.15rem;letter-spacing:-.01em;}
.ref-card h3 i{color:#00f0ff;font-size:.95em;filter:drop-shadow(0 0 8px rgba(0,240,255,.6));}
.hint{margin-top:8px;font-size:.9rem;color:var(--muted);}
.ref-link-row{display:flex;gap:8px;margin-top:18px;}
.ref-link-input{flex:1;min-width:0;height:50px;padding:0 16px;border-radius:14px;border:1px solid rgba(0,240,255,.2);background:rgba(5,7,22,.75);
  color:var(--white);font-size:.84rem;outline:0;transition:border-color .3s,box-shadow .3s;}
.ref-link-input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,240,255,.14),0 0 20px rgba(0,240,255,.25);}
.copy-btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 20px;border:0;border-radius:14px;cursor:pointer;white-space:nowrap;
  font:700 .88rem/1 var(--f-display);color:#050716;background:var(--grad);background-size:200% 100%;
  box-shadow:0 0 24px rgba(0,240,255,.35),0 8px 24px -6px rgba(217,70,239,.65);
  transition:background-position .6s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);}
.copy-btn:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 0 32px rgba(217,70,239,.55),0 12px 30px -6px rgba(217,70,239,.8);}
.copy-btn:active{transform:scale(.97);}
.share-btn[hidden]{display:none;}

/* ---------------------------------------------------------------- token balance (markup written by renderClaimTotals()) */

.ct-card{border-color:rgba(251,191,36,.22);}
.ct-card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(251,191,36,.8),transparent);}
.ct-card.just-filled{animation:ct-pop 1.1s var(--ease);}
@keyframes ct-pop{0%{transform:scale(.97);box-shadow:0 0 0 0 rgba(251,191,36,.55);}40%{transform:scale(1.01);box-shadow:0 0 0 16px rgba(251,191,36,0);}100%{transform:none;}}
.ct-title{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.ct-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;font-size:1.05rem;color:#fbbf24;
  background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3);}
.ct-title h3{font-size:1.15rem;}
.ct-title p{font-size:.8rem;color:var(--muted);margin-top:2px;}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;}
.ct-chip{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:14px 16px;border-radius:16px;
  border:1px solid rgba(170,160,255,.14);background:rgba(255,255,255,.03);animation:chip-in .6s var(--ease) backwards;
  transition:border-color .3s,background .3s,transform .3s var(--ease);}
.ct-chip:hover{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.05);transform:translateY(-2px);}
.ct-chip:nth-child(2){animation-delay:.08s;}
.ct-chip:nth-child(3){animation-delay:.16s;}
.ct-chip:nth-child(4){animation-delay:.24s;}
.ct-coin{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;perspective:300px;}
.ct-coin img{width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(251,191,36,.45);}
.ct-chip:hover .ct-coin img{animation:coin-flip 1.2s ease-in-out;}
.ct-num{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:7px;min-width:0;}
.ct-num b{font:600 1.3rem/1.1 var(--f-display);color:var(--white);font-variant-numeric:tabular-nums;}
.ct-num span{font:600 .68rem/1 var(--f-mono);letter-spacing:.08em;color:#fbbf24;}
.ct-chip em{font-style:normal;font-size:.76rem;color:var(--muted);}
.ct-next{border-style:dashed;}
.ct-next .ct-coin{color:#c4b5fd;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3);font-size:1.05rem;}
.ct-next .ct-coin i{animation:gift-wiggle 3s ease-in-out infinite;}
.ct-next .ct-num b{color:#c4b5fd;}
.ct-next .ct-num span{color:var(--muted);}
.ct-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.ct-draw{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:12px;cursor:pointer;
  font:600 .92rem/1 var(--f-display);color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:color .25s,border-color .25s,background .25s;}
/* tappable: opens the follow-our-socials step, then the release date */
.ct-draw:hover{color:var(--white,#fff);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.08);}
.ct-draw i{font-size:.85rem;color:#fbbf24;}
.ct-draw-note{font-size:.78rem;color:var(--muted);}

/* token badge used when a coin logo cannot load (swapped in by dash.js) */
.coin-fallback{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;font:700 1.1rem/1 var(--f-display);color:#fff;
  background:linear-gradient(140deg,#8b5cf6,#22d3ee);box-shadow:0 0 0 2px rgba(251,191,36,.45);}
.coin-fallback.coin-shib{background:linear-gradient(140deg,#fb923c,#ea580c);}
.coin-fallback.coin-pepe{background:linear-gradient(140deg,#4ade80,#15803d);}
.coin-fallback.coin-bonk{background:linear-gradient(140deg,#fbbf24,#d97706);}
.coin-fallback.coin-floki{background:linear-gradient(140deg,#2dd4bf,#0f766e);}
.gift-row .coin-fallback{width:44px;height:44px;}

/* ---------------------------------------------------------------- rank cards (written by rewardsChartHTML()) */

/* every rank has its own colours (--t1 light, --t2 deep); three clearly different states:
   locked (dim, progress), ready (lit border, box bobbing, open button), opened (open box, light, collected) */
.card-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:18px;}
.rank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;}
.rank-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:14px 14px 13px;border-radius:20px;
  border:1px solid color-mix(in srgb,var(--t1) 22%,rgba(255,255,255,.08));
  background:linear-gradient(180deg,color-mix(in srgb,var(--t2) 22%,rgba(13,17,42,.75)),rgba(8,11,26,.85) 65%);
  backdrop-filter:blur(12px);
  animation:chip-in .5s var(--ease) backwards;animation-delay:calc(var(--i) * 40ms);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s,background .35s;}
/* a thin rank-coloured line on top of every card */
.rank-card::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,var(--t1),transparent);opacity:.5;transition:opacity .35s,height .35s;}
.rank-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--t1) 60%,transparent);box-shadow:0 20px 40px -18px var(--t2),0 0 24px color-mix(in srgb,var(--t1) 30%,transparent);}
.rank-card:hover::before{opacity:1;height:3px;}
.rk-head{display:flex;align-items:center;gap:10px;}
/* the rank number as a polished coin */
.rk-medal{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  font:800 .86rem/1 var(--f-display);color:#050716;
  background:radial-gradient(circle at 32% 28%,#fff 0,var(--t1) 36%,var(--t2) 100%);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),0 0 0 2px color-mix(in srgb,var(--t1) 40%,transparent),0 6px 18px -4px var(--t2);
  transition:transform .3s var(--ease),box-shadow .3s;}
.rank-card:hover .rk-medal{transform:scale(1.08);box-shadow:0 0 16px var(--t1);}
.rk-id{min-width:0;flex:1;}
.rank-card h4{margin:0;font:700 1.05rem/1.15 var(--f-display);color:var(--white);}
.rk-req{display:block;margin-top:3px;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--t1) 60%,var(--muted));white-space:nowrap;}
.rk-tag{flex:none;padding:4px 8px;border-radius:999px;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;}
.rk-you{color:#050716;background:linear-gradient(140deg,var(--t1),var(--t2));box-shadow:0 0 12px var(--t1);}
.rk-next{color:var(--t1);border:1px solid color-mix(in srgb,var(--t1) 65%,transparent);background:color-mix(in srgb,var(--t2) 30%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--t1) 40%,transparent);}

.rk-art{position:relative;display:grid;place-items:center;height:100px;margin:8px 0 10px;}
.rk-art::before{content:"";position:absolute;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--t1) 50%,transparent),transparent 70%);opacity:.35;
  animation:aura-pulse 4s ease-in-out infinite;animation-delay:calc(var(--i) * -0.42s);transition:opacity .4s,transform .4s;}
@keyframes aura-pulse{0%,100%{transform:scale(.92);opacity:.3;}50%{transform:scale(1.15);opacity:.6;}}
.rk-art svg{position:relative;width:86px;height:86px;overflow:visible;transition:transform .45s var(--ease),filter .4s;
  animation:box-float-gentle 4s ease-in-out infinite;animation-delay:calc(var(--i) * -0.42s);}
@keyframes box-float-gentle{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-5px) rotate(1.2deg);}}
.rank-card:hover .rk-art svg{transform:translateY(-8px) scale(1.08) rotate(-1deg);filter:drop-shadow(0 12px 20px color-mix(in srgb,var(--t1) 55%,transparent)) !important;}
.rank-card:hover .rk-art::before{opacity:.85;transform:scale(1.22);}

.bx-ground{fill:rgba(0,0,0,.45);}
.bx-body{fill:var(--t2);}
.bx-side{fill:rgba(0,0,0,.22);}
.bx-shade{fill:rgba(0,0,0,.28);}
.bx-lid{fill:var(--t1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
.bx-lid-hi{fill:rgba(255,255,255,.65);}
.bx-rib,.bx-bow,.bx-knot{fill:#fffbeb;filter:drop-shadow(0 1px 3px rgba(0,0,0,.2));}
.bx-bow-in{fill:rgba(160,110,20,.35);}
.bx-inside{fill:rgba(0,0,0,.5);}
.bx-trim{fill:#fef08a;filter:drop-shadow(0 0 3px rgba(251,191,36,.45));}
.bx-band{fill:#3a3340;}
.bx-plank{stroke:rgba(0,0,0,.3);stroke-width:1.2;fill:none;}
.bx-lid-top{fill:color-mix(in srgb,var(--t1) 85%,#fff);}
.bx-emblem{fill:#fef08a;filter:drop-shadow(0 0 4px rgba(251,191,36,.6));animation:emblem-gleam 3.5s ease-in-out infinite;animation-delay:calc(var(--i, 0) * -0.35s);}
.bx-emblem-line{fill:none;stroke:#fef08a;stroke-width:1.4;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(251,191,36,.5));}
@keyframes emblem-gleam{0%,100%{opacity:.88;}50%{opacity:1;filter:drop-shadow(0 0 8px #fde047);}}
.bx-badge{fill:color-mix(in srgb,var(--t2) 70%,#000);stroke:#fffbeb;stroke-width:1.2;}
.bx-hole{fill:#3b2a06;}
.bx-gem{fill:color-mix(in srgb,var(--t1) 65%,#a5f3fc);stroke:rgba(255,255,255,.85);stroke-width:.7;filter:drop-shadow(0 0 6px var(--t1));animation:gem-pulse 3s ease-in-out infinite;}
@keyframes gem-pulse{0%,100%{opacity:.88;}50%{opacity:1;filter:drop-shadow(0 0 12px #00f0ff);}}
.bx-gem-hi{fill:rgba(255,255,255,.7);}
.bx-handle{fill:none;stroke:#fef08a;stroke-width:1.8;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(251,191,36,.4));}
.bx-laurel{fill:none;stroke:#86efac;stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(134,239,172,.5));}
.bx-laurel-leaf{fill:none;stroke:#86efac;stroke-width:1.8;stroke-linecap:round;}
.bx-coin{fill:#fbbf24;stroke:#fef08a;stroke-width:.8;filter:drop-shadow(0 0 4px rgba(251,191,36,.7));animation:coin-gleam 2.8s ease-in-out infinite;}
@keyframes coin-gleam{0%,100%{opacity:.9;}50%{opacity:1;filter:drop-shadow(0 0 8px #ffd54f);}}
.bx-float{animation:bx-float 3s ease-in-out infinite;}
@keyframes bx-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

.rank-card[data-m="1000"] .bx-float{animation:crown-float 2.8s ease-in-out infinite;transform-origin:32px 14px;}
@keyframes crown-float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-3.5px) rotate(2deg);}}
.rank-card[data-m="1000"] .bx-trim{fill:#fde047;filter:drop-shadow(0 0 6px rgba(251,191,36,.85));}

.bx-rays{fill:color-mix(in srgb,var(--t1) 60%,#fff);opacity:.45;}
.bx-rays-2{opacity:.22;}
.bx-spark{fill:#fff;}
.rk-lock{position:absolute;left:calc(50% + 22px);bottom:4px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  font-size:.7rem;color:#ffffff;background:#120e2e;border:1px solid color-mix(in srgb,var(--t1) 45%,rgba(170,160,255,.35));
  box-shadow:0 4px 14px -2px rgba(0,0,0,.8),0 0 8px color-mix(in srgb,var(--t1) 30%,transparent);
  animation:lock-bob 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -0.32s);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;}
@keyframes lock-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.rank-card:hover .rk-lock{transform:translateY(-4px) scale(1.1);border-color:var(--t1);box-shadow:0 4px 18px color-mix(in srgb,var(--t1) 60%,transparent);}

.rk-foot{margin-top:auto;}
.rk-note{margin-top:7px;font-size:.74rem;text-align:center;color:var(--muted);}
.rk-note i{font-size:.64rem;margin-right:3px;}
.rk-prog-row{display:flex;justify-content:space-between;margin-bottom:6px;font-size:.62rem;letter-spacing:.06em;color:var(--muted);}
.rk-prog-row b{font-weight:600;color:color-mix(in srgb,var(--t1) 75%,var(--muted));}
.rk-prog{position:relative;height:7px;border-radius:7px;overflow:hidden;background:rgba(170,160,255,.12);}
.rk-prog i{position:relative;display:block;height:100%;min-width:4px;border-radius:inherit;background:linear-gradient(90deg,var(--t2),var(--t1));
  box-shadow:0 0 12px color-mix(in srgb,var(--t1) 70%,transparent);transition:width 1s var(--ease);}
.rk-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;border:0;border-radius:12px;cursor:pointer;
  font:700 .86rem/1 var(--f-display);color:#050716;background:linear-gradient(100deg,#fde68a,#fbbf24 60%,#f59e0b);
  box-shadow:0 10px 24px -12px rgba(251,191,36,.95);transition:transform .3s var(--ease),box-shadow .3s;}
.rk-open:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(251,191,36,1);}
.rk-open:active{transform:scale(.97);}
.rk-collected{display:flex;align-items:center;justify-content:center;gap:7px;height:36px;border-radius:11px;font:700 .84rem/1 var(--f-display);
  color:#6ee7b7;background:linear-gradient(100deg,rgba(52,211,153,.18),rgba(52,211,153,.06));border:1px solid rgba(52,211,153,.35);box-shadow:0 0 12px rgba(52,211,153,.15);}

/* locked: box retains authentic bright jewel tones with alive floating animation */
/* "what's inside?" teaser on every box that is not opened yet: the reward coins take
   turns, blurring into focus and away again, behind a ? badge — so the exact reward stays
   a surprise. Bitcoin rides along in the rotation. dashboard.html drives the switching
   from one timer, so all boxes change together (and it still runs with reduce-motion on). */
.rk-tease{position:absolute;z-index:2;display:grid;place-items:center;width:58px;height:58px;pointer-events:none;transform:translateY(1px);}
.rk-coins{position:absolute;inset:0;display:grid;place-items:center;}
.rk-coins img{position:absolute;width:46px;height:46px;border-radius:50%;
  opacity:0;filter:blur(9px);transform:scale(.74) rotate(-10deg);
  box-shadow:0 4px 14px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.14);
  transition:opacity .32s ease,filter .42s ease,transform .42s cubic-bezier(.2,.75,.2,1);}
.rk-coins img.on{opacity:1;filter:blur(0);transform:scale(1) rotate(0deg);}
/* the ? sits on the coin's corner, so it teases without hiding the coin */
.rk-q{position:absolute;right:-2px;bottom:-2px;z-index:3;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font:800 15px/1 var(--f-display);color:#fff;background:linear-gradient(135deg,var(--t1),var(--t2));
  border:2px solid rgba(8,6,26,.85);box-shadow:0 3px 10px rgba(0,0,0,.6);
  animation:rk-q-beat 1.8s ease-in-out infinite;}
@keyframes rk-q-beat{0%,100%{transform:scale(1);}50%{transform:scale(1.14);}}
@media (prefers-reduced-motion:reduce){.rk-q{animation:none;}}

.rank-card.st-locked .rk-art svg{filter:saturate(.95) brightness(.96) drop-shadow(0 4px 14px rgba(0,0,0,.5));opacity:.94;}
.rank-card.st-locked .rk-art::before{opacity:.32;}
.rank-card.st-locked .rk-medal{filter:none;}
.rank-card.st-locked h4{color:#f8fafc;}
.rank-card.st-locked:hover .rk-art svg{filter:saturate(1.25) brightness(1.12) drop-shadow(0 8px 22px color-mix(in srgb,var(--t1) 60%,transparent));opacity:1;}
.rank-card.st-locked:hover .rk-art::before{opacity:.85;transform:scale(1.22);}

/* next to unlock: brighter, gently floating, a stronger progress bar */
.rank-card.is-next{border-color:color-mix(in srgb,var(--t1) 50%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--t2) 28%,transparent),transparent 65%),rgba(255,255,255,.04);
  box-shadow:0 0 24px -6px color-mix(in srgb,var(--t1) 40%,transparent);}
.rank-card.is-next::before{opacity:.9;height:3px;}
.rank-card.is-next .rk-art svg{filter:saturate(1.1) brightness(1.05) drop-shadow(0 6px 18px color-mix(in srgb,var(--t1) 40%,transparent));
  animation:box-float-gentle 3s ease-in-out infinite;}
.rank-card.is-next .rk-art::before{opacity:.6;animation:aura-pulse 3s ease-in-out infinite;}
.rank-card.is-next .rk-medal{filter:none;}
.rank-card.is-next .rk-note{color:var(--t1);font-weight:600;}
.rank-card.is-next .rk-prog{height:8px;}
.rank-card.is-next .rk-prog i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:wave-run 2.2s ease-in-out infinite;}

/* ready: the rank's colours run round the border and the box bobs */
.rank-card.st-ready{border:1.5px solid transparent;
  background:linear-gradient(180deg,color-mix(in srgb,var(--t2) 26%,#0e0a2b),#0c0926) padding-box,
    conic-gradient(from var(--spin),var(--t1),#fbbf24,var(--t2),var(--t1)) border-box;
  box-shadow:0 18px 40px -22px var(--t2);animation:chip-in .5s var(--ease) backwards,spin-border 5s linear infinite;animation-delay:calc(var(--i) * 40ms),0s;}
.rank-card.st-ready::before{opacity:0;}
.rank-card.st-ready .rk-art::before{opacity:1;animation:ready-glow 2.4s ease-in-out infinite;}
.rank-card.st-ready .rk-art svg{animation:box-float-gentle 2.2s ease-in-out infinite;}
.rank-card.st-ready:hover .rk-art svg{animation:box-shake .5s ease-in-out infinite;}
/* ready: blink so the eye goes straight to the box waiting to be opened - a glowing frame
   on the card, a pulsing button and a tap hint. Only light changes, nothing moves, so it
   stays on with "reduce motion" too. */
.rank-card.st-ready::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 2px #fbbf24,inset 0 0 34px rgba(251,191,36,.5);animation:rk-blink 1.1s ease-in-out infinite;}
.rank-card.st-ready .rk-open{position:relative;animation:rk-btn-blink 1.1s ease-in-out infinite;}
.rank-card.st-ready .rk-open::after{content:"";position:absolute;inset:-4px;border-radius:15px;border:2px solid #fde68a;
  pointer-events:none;animation:rk-blink 1.1s ease-in-out infinite;}
.rank-card.st-ready .rk-note{color:#fde68a;font-weight:700;animation:rk-blink 1.1s ease-in-out infinite;}
@keyframes rk-blink{0%,100%{opacity:1;}50%{opacity:.15;}}
@keyframes rk-btn-blink{0%,100%{filter:brightness(1);box-shadow:0 0 0 0 rgba(251,191,36,0),0 10px 24px -12px rgba(251,191,36,.95);}
  50%{filter:brightness(1.25);box-shadow:0 0 22px 4px rgba(251,191,36,.75),0 10px 24px -12px rgba(251,191,36,.95);}}
/* "reward waiting" pill: floats at the bottom while a ready box is off screen (dashboard.html) */
.claim-nudge{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:80;
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:9px 16px 9px 9px;border:0;border-radius:999px;cursor:pointer;
  text-align:left;color:#050716;background:linear-gradient(100deg,#fde68a,#fbbf24 60%,#f59e0b);
  box-shadow:0 12px 30px -8px rgba(251,191,36,.9),0 0 0 2px rgba(253,230,138,.55);
  opacity:0;visibility:hidden;transform:translate(-50%,140%);
  transition:opacity .3s,visibility .3s,transform .45s var(--ease);}
.claim-nudge.show{opacity:1;visibility:visible;transform:translate(-50%,0);animation:rk-btn-blink 1.1s ease-in-out infinite;}
.cn-ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;font-size:1.05rem;
  color:#fde68a;background:#1a1240;animation:cn-wiggle 1.4s ease-in-out infinite;}
.cn-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cn-txt b{font:800 .9rem/1.1 var(--f-display);white-space:nowrap;}
.cn-txt small{font:600 .72rem/1.2 var(--f-display);opacity:.8;}
.cn-arrow{flex:none;font-size:.85rem;animation:rk-blink 1.1s ease-in-out infinite;}
@keyframes cn-wiggle{0%,60%,100%{transform:rotate(0);}70%{transform:rotate(-14deg);}80%{transform:rotate(12deg);}90%{transform:rotate(-6deg);}}
@media (prefers-reduced-motion:reduce){.cn-ico{animation:none;}.claim-nudge{transition:opacity .3s,visibility .3s;}}
@keyframes ready-glow{0%,100%{transform:scale(.9);opacity:.7;}50%{transform:scale(1.12);opacity:1;}}
@keyframes box-shake{0%,100%{transform:rotate(0);}25%{transform:rotate(-6deg);}75%{transform:rotate(6deg);}}

/* opened: lit from inside, tinted with the rank's colour */
.rank-card.st-opened{border-color:color-mix(in srgb,var(--t1) 45%,transparent);
  background:radial-gradient(120% 75% at 50% 0%,color-mix(in srgb,var(--t2) 36%,transparent),transparent 70%),rgba(255,255,255,.04);
  box-shadow:0 0 24px -8px color-mix(in srgb,var(--t1) 40%,transparent);}
.rank-card.st-opened::before{opacity:1;height:3px;}
.rank-card.st-opened .rk-art::before{opacity:.95;}
.rank-card.st-opened .bx-rays{animation:rays 3s ease-in-out infinite,ray-glow 3.5s ease-in-out infinite;transform-origin:32px 31px;filter:drop-shadow(0 0 8px var(--t1));}
@keyframes ray-glow{0%,100%{opacity:.45;}50%{opacity:.85;}}
.rank-card.st-opened .bx-spark{animation:spark 2.2s ease-in-out infinite;filter:drop-shadow(0 0 4px #00f0ff);}
.rank-card.st-opened .bx-spark:nth-of-type(2){animation-delay:.6s;}
.rank-card.st-opened .bx-spark:nth-of-type(3){animation-delay:1.2s;}
.rank-card.st-opened .bx-spark:nth-of-type(4){animation-delay:1.8s;}
@keyframes rays{0%,100%{opacity:.35;transform:scaleY(.92);}50%{opacity:.72;transform:scaleY(1.06);}}
@keyframes spark{0%,100%{opacity:0;transform:scale(.6);}50%{opacity:1;transform:scale(1.1);}}

.rank-card[data-m="10"] .bx-trim,.rank-card[data-m="50"] .bx-trim,.rank-card[data-m="10"] .bx-emblem,.rank-card[data-m="50"] .bx-emblem{fill:#eef2ff;}
.rank-card.is-current{box-shadow:0 0 0 1px color-mix(in srgb,var(--t1) 60%,transparent),0 18px 40px -22px var(--t2),0 0 28px -6px color-mix(in srgb,var(--t1) 40%,transparent);}

/* ---------------------------------------------------------------- toast (#walletToast.show; border colour set inline on error) */

#walletToast{position:fixed;left:50%;bottom:26px;z-index:400;display:flex;align-items:center;gap:10px;max-width:min(92vw,460px);
  padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(13,10,43,.94);color:var(--white);font-size:.92rem;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 50px -18px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translate(-50%,20px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;}
#walletToast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}
#walletToast .fa-circle-check{color:#34d399;}
#walletToast .fa-circle-exclamation{color:var(--red);}

/* ---------------------------------------------------------------- quiz (#quizOverlay.show; options, progress and feedback are written by the script) */

.modal-overlay{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(ellipse at 20% 10%,rgba(34,211,238,.16),transparent 50%),radial-gradient(ellipse at 85% 90%,rgba(236,72,153,.18),transparent 50%),rgba(4,3,18,.93);
}
.modal-overlay.show{display:flex;}
.quiz-card{position:relative;isolation:isolate;width:min(100%,720px);max-height:calc(100svh - 40px);overflow:auto;padding:clamp(24px,4vw,44px);
  border-radius:30px;border:1.5px solid transparent;
  background:
    linear-gradient(165deg,rgba(26,18,74,.98),rgba(9,7,32,.98) 55%,rgba(22,10,50,.98)) padding-box,
    conic-gradient(from var(--spin),#22d3ee,transparent 25%,#8b5cf6 45%,#ec4899 60%,transparent 80%,#22d3ee) border-box;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.95),0 0 70px -30px rgba(139,92,246,.6);
  animation:modal-in .5s var(--ease) both,spin-border 8s linear infinite;}
@keyframes modal-in{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:none;}}

.quiz-progress{display:flex;gap:8px;margin-bottom:24px;}
.quiz-progress span{position:relative;flex:1;height:8px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.08);transition:background .4s;}
.quiz-progress span.done{background:var(--grad);box-shadow:0 0 14px -2px rgba(139,92,246,.8);}
/* the step being answered: the first one not done */
.quiz-progress span:first-child:not(.done)::after,.quiz-progress span.done + span:not(.done)::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.9),transparent);background-size:60% 100%;background-repeat:no-repeat;animation:wave-run 1.6s ease-in-out infinite;}
.quiz-meta{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;margin-bottom:16px;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--cyan);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);}
.quiz-q{font:700 clamp(1.35rem,3vw,1.9rem)/1.25 var(--f-display);color:var(--white);letter-spacing:-.02em;margin-bottom:24px;}
.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px;counter-reset:opt;}
.quiz-opt{position:relative;display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;min-height:68px;text-align:left;padding:12px 16px 12px 12px;
  border-radius:18px;cursor:pointer;counter-increment:opt;border:1.5px solid rgba(170,160,255,.18);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));color:var(--text);font:500 .98rem/1.35 var(--f-body);
  transition:border-color .25s,background .25s,transform .3s var(--ease),color .25s,box-shadow .3s;}
.quiz-opt::before{content:counter(opt,upper-alpha);display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  font:700 .95rem/1 var(--f-display);color:var(--white);background:rgba(139,92,246,.22);border:1px solid rgba(139,92,246,.45);transition:background .25s,color .25s;}
.quiz-opt:hover:not(:disabled){border-color:rgba(34,211,238,.7);color:var(--white);transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(34,211,238,.8);
  background:linear-gradient(160deg,rgba(34,211,238,.12),rgba(139,92,246,.08));}
.quiz-opt:hover:not(:disabled)::before{background:var(--grad);color:#0a0724;border-color:transparent;}
.quiz-opt:disabled{cursor:default;}
.quiz-opt:disabled:not(.correct):not(.wrong){opacity:.5;}
.quiz-opt i{font-size:1.2rem;}
.quiz-opt.correct{border-color:#34d399;color:#d1fae5;background:linear-gradient(160deg,rgba(52,211,153,.24),rgba(52,211,153,.06));
  box-shadow:0 0 0 4px rgba(52,211,153,.12),0 18px 34px -18px rgba(52,211,153,.9);animation:opt-pop .5s var(--ease);}
.quiz-opt.correct::before{background:#34d399;color:#052e1c;border-color:transparent;}
.quiz-opt.correct i{color:#34d399;}
.quiz-opt.wrong{border-color:var(--red);color:#ffe4e6;background:linear-gradient(160deg,rgba(251,113,133,.22),rgba(251,113,133,.05));animation:opt-shake .45s ease;}
.quiz-opt.wrong::before{background:var(--red);color:#3b0712;border-color:transparent;}
.quiz-opt.wrong i{color:var(--red);}
@keyframes opt-pop{0%{transform:scale(1);}45%{transform:scale(1.04);}100%{transform:scale(1);}}
@keyframes opt-shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(3px);}}
.quiz-feedback{min-height:24px;display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:500;margin-bottom:20px;}
.quiz-feedback.correct-text,.quiz-feedback.wrong-text{padding:10px 14px;border-radius:14px;animation:chip-in .4s var(--ease) both;}
.quiz-feedback.correct-text{color:#6ee7b7;background:rgba(52,211,153,.1);}
.quiz-feedback.wrong-text{color:#fda4af;background:rgba(251,113,133,.1);}
.quiz-actions{display:flex;justify-content:flex-end;}
.quiz-actions .btn{min-width:180px;height:54px;border-radius:16px;font-size:1rem;}
.quiz-actions .btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}

/* ---------------------------------------------------------------- surprise box (overlay built by giftbox.js) */

.gift-lock,.gift-lock body{overflow:hidden;}
.gift-overlay{position:fixed;inset:0;z-index:260;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;
  padding:calc(env(safe-area-inset-top) + clamp(18px,3vw,34px)) clamp(14px,3vw,34px) calc(env(safe-area-inset-bottom) + clamp(18px,3vw,30px));
  background:radial-gradient(ellipse 70% 60% at 50% 58%,rgba(91,33,182,.55),rgba(4,3,18,.96) 72%);
  opacity:0;transition:opacity .5s var(--ease);}
.gift-overlay.show{opacity:1;}
.gift-aura{position:absolute;left:50%;top:56%;z-index:-1;width:min(140vw,1200px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(251,191,36,.10) 0 8deg,transparent 8deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 60%);mask:radial-gradient(circle,#000 0,transparent 60%);
  animation:aura-spin 40s linear infinite;opacity:.6;transition:opacity .6s;}
.gift-overlay.opened .gift-aura{opacity:1;animation-duration:14s;}
@keyframes aura-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.gift-close{position:absolute;top:calc(env(safe-area-inset-top) + 16px);right:16px;z-index:2;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:var(--white);font-size:1.1rem;transition:background .3s,border-color .3s;}
.gift-close:hover{border-color:var(--cyan);background:rgba(34,211,238,.1);}
.gift-head{text-align:center;animation:card-in .7s .15s var(--ease) both;}
.gift-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font:600 .7rem/1 var(--f-mono);letter-spacing:.18em;
  text-transform:uppercase;color:#2a1600;background:var(--grad-gold);box-shadow:0 8px 26px -8px rgba(251,191,36,.8);}
.gift-title{margin-top:12px;font:700 clamp(1.8rem,5vw,3.2rem)/1 var(--f-display);letter-spacing:-.035em;
  background:linear-gradient(100deg,#fff,#fde68a 40%,#fbbf24 60%,#fff);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:val-shimmer 4s ease-in-out infinite;}
.gift-stage{position:relative;width:calc(100% + 2 * clamp(14px,3vw,34px));height:100%;min-height:260px;}
.gift-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation;}
.gift-css{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:180px;height:180px;border:0;border-radius:44px;cursor:pointer;font-size:5rem;color:#fff;
  background:linear-gradient(140deg,#8b5cf6,#ec4899);box-shadow:0 30px 70px -20px rgba(236,72,153,.9);animation:gift-wiggle 2.6s ease-in-out infinite;}
.gift-css.shake{animation:opt-shake .25s linear infinite;}
.gift-css.burst{animation:none;transform:translate(-50%,-50%) scale(1.3);opacity:0;transition:transform .5s,opacity .5s;}
.gift-hint{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;font:600 .95rem/1 var(--f-display);color:var(--white);
  border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.1);animation:hint-float 2.2s ease-in-out infinite;transition:opacity .4s,transform .4s;}
.gift-hint.gone{opacity:0;transform:translateY(10px);pointer-events:none;animation:none;}
.gift-tap{position:relative;width:12px;height:12px;border-radius:50%;background:var(--amber);}
.gift-tap::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--amber);animation:ico-ping 1.4s ease-out infinite;}
@keyframes hint-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.gift-reveal{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + clamp(16px,3vw,30px));width:min(calc(100% - 28px),520px);
  padding:20px;border-radius:26px;text-align:center;border:1.5px solid transparent;
  background:linear-gradient(160deg,rgba(40,26,8,.95),rgba(16,10,44,.97) 50%) padding-box,conic-gradient(from var(--spin),#fbbf24,#ec4899,#8b5cf6,#22d3ee,#fbbf24) border-box;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.95),0 0 60px -20px rgba(251,191,36,.6);
  opacity:0;transform:translate(-50%,40px) scale(.95);transition:opacity .6s var(--ease),transform .7s var(--ease);animation:spin-border 5s linear infinite;}
.gift-reveal.show{opacity:1;transform:translate(-50%,0) scale(1);}
.gift-reveal[hidden]{display:none;}
.gift-got{font:600 .72rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);}
.gift-list{display:grid;gap:8px;margin:14px 0 16px;}
.gift-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(251,191,36,.22);}
.gift-row img{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(251,191,36,.6),0 0 20px rgba(251,191,36,.5);animation:coin-flip 3s ease-in-out infinite;}
.gift-amt{display:flex;align-items:baseline;gap:8px;min-width:0;}
.gift-amt b{font:700 clamp(1.4rem,4.5vw,1.9rem)/1 var(--f-display);color:var(--white);font-variant-numeric:tabular-nums;}
.gift-amt span{font:700 .78rem/1 var(--f-mono);color:var(--amber);letter-spacing:.08em;}
.gift-row em{font-style:normal;font-size:.8rem;color:var(--muted);}
/* three or more tokens: a compact two-column list so the panel doesn't bury the box */
.gift-list:has(.gift-row:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr));}
.gift-list:has(.gift-row:nth-child(3)) .gift-row{grid-template-columns:34px 1fr;gap:10px;padding:8px 10px;}
.gift-list:has(.gift-row:nth-child(3)) .gift-row img{width:34px;height:34px;}
.gift-list:has(.gift-row:nth-child(3)) .gift-amt{flex-wrap:wrap;column-gap:6px;row-gap:2px;}
.gift-list:has(.gift-row:nth-child(3)) .gift-amt b{font-size:clamp(1.05rem,3.4vw,1.3rem);}
.gift-list:has(.gift-row:nth-child(3)) .gift-row em{display:none;}
.gift-collect{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border:0;border-radius:16px;cursor:pointer;
  font:700 1rem/1 var(--f-display);color:#2a1600;background:var(--grad-gold);background-size:200% 100%;box-shadow:0 14px 34px -12px rgba(251,191,36,.9);
  transition:transform .3s var(--ease),background-position .6s;}
.gift-collect:hover{transform:translateY(-2px);background-position:100% 0;}
.gift-flash{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 55%,#fff,rgba(255,236,190,.7) 30%,transparent 70%);}
.gift-flash.go{animation:gift-flash 1s ease-out;}
@keyframes gift-flash{0%{opacity:0;}8%{opacity:1;}100%{opacity:0;}}
.gift-overlay.leaving{opacity:0;}

/* ---------------------------------------------------------------- footer */

.dash-foot{border-top:1px solid var(--line);background:rgba(6,5,26,.92);}
.dash-foot .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;max-width:var(--wrap);margin-inline:auto;
  padding:20px var(--pad);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}

/* ---------------------------------------------------------------- responsive */

@media (max-width:1100px){
  .dash-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:900px){
  .connect-grid{grid-template-columns:1fr;gap:10px;align-content:start;}
  /* the 3D logo forms in a short band above the card, so the card still fits on screen */
  .connect-art{min-height:min(40vw,170px);}
  .js.no-webgl .connect-art{min-height:0;}
  .connect-card{max-width:560px;width:100%;justify-self:center;}
}

@media (max-width:600px){
  .dash-shell{padding-top:calc(var(--top-h) + 12px);}
  #connectPanel{min-height:calc(100svh - var(--top-h) - 30px);}
  .connect-art{min-height:128px;}
  .connect-card{padding:20px 18px 18px;border-radius:22px;}
  .cc-badge{width:44px;height:44px;border-radius:14px;font-size:1.05rem;}
  .connect-card h1{font-size:1.75rem;}
  .connect-lead{margin-top:10px;font-size:.88rem;}
  .connect-steps{margin:14px 0 16px;}
  .connect-steps li{padding:5px 0;gap:12px;}
  .connect-steps strong{font-size:.88rem;}
  .wallet-btn{height:52px;}
  .ref-link-row{flex-wrap:wrap;}
  .ref-link-input{flex-basis:100%;}
  .copy-btn{flex:1;justify-content:center;}
  .dash-stats{gap:10px;}
  .stat-card{padding:14px 14px 16px;border-radius:18px;}
  .st-top{margin-bottom:12px;}
  .stat-card .lab{font-size:.56rem;letter-spacing:.12em;}
  .stat-ico{width:30px;height:30px;border-radius:9px;font-size:.78rem;}
  .stat-card .val{font-size:1.45rem;gap:8px;}
  .st-meta{font-size:.72rem;}
  .quiz-options{grid-template-columns:1fr;}
  .quiz-opt{min-height:58px;}
  .quiz-actions .btn{width:100%;}
  .rank-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  /* no blur behind the cards on phones: blurring 10 cards is what makes the grid slow to draw */
  .rank-card{padding:12px 10px 11px;backdrop-filter:none;}
  .rk-head{gap:8px;}
  .rk-medal{width:28px;height:28px;font-size:.72rem;}
  .rank-card h4{font-size:.92rem;}
  .rk-req{font-size:.5rem;}
  .rk-tag{position:absolute;top:8px;right:8px;padding:3px 6px;font-size:.48rem;}
  .rk-art{height:84px;margin:6px 0 8px;}
  .rk-art svg{width:70px;height:70px;}
  .rk-lock{left:calc(50% + 16px);width:24px;height:24px;font-size:.6rem;}
  .rk-open,.rk-collected{height:34px;font-size:.74rem;}
  .rk-note{font-size:.68rem;}
  .ct-grid{grid-template-columns:1fr;}
  .ct-foot{gap:10px;}
  .ct-draw{width:100%;justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  .stat-ico,.stat-ico::before,.stat-ico i,.connect-card::before,.cc-badge::after,.connect-steps::after,.cs-n,.connect-steps strong,.st-bar i::after,.rank-card.st-ready,.rank-card .rk-art svg,.rank-card.is-next .rk-prog i::after,.rank-card .rk-art::before,.bx-rays,.bx-spark,.ct-next .ct-coin i,.quiz-card,.gift-reveal,.gift-aura{animation:none;}
}