:root{
  --bg:#0b1730; --panel:#0f1f3c; --soft:#11264b; --text:#ecf4ff; --muted:#b8c6e3;
  --brand1:#32d3c2; --brand2:#138f83;
  --tabbar-h: clamp(96px, 26vw, 220px);
  --max-w: 1200px;
  --page-gutter: clamp(3px, .6vw, 10px); 
  --content-w: calc(100% - 2*var(--page-gutter)); 
}

.hero, .rank, .intro, .certs { padding-inline: var(--page-gutter); }
.hero{ padding-block:5px 3px }
.rank{  padding-block:5px 3px}
.certs{ padding-block:10px 3px }
.intro{ padding-block:10px 3px }

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden;}
body.claim{
  margin:0;
  color:var(--text);
  background:#0c1c36 url('/claim/assets/img/bg_index.png') center / cover no-repeat fixed;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.page{ padding-bottom: calc(var(--tabbar-h) + clamp(6px,1vw,12px)); }


.top{ padding:10px 3px; }
.top-wrap{
  --pad: clamp(4px, 0.8vw, 10px);
  width: min(var(--content-w), var(--max-w));
  margin-inline: auto;
  aspect-ratio: 6.5 / 1;
  height: auto;
  display:flex; align-items:center; justify-content:space-between;
  gap: clamp(6px, 1.6vw, 16px);
  padding: var(--pad) calc(var(--pad) * 2);
  border-radius: 999px;
  background: linear-gradient(135deg,#1fc2a8,#169679);
  border: .4vw solid #46f7bb; 
  box-shadow:
    0 6px 18px rgba(0,0,0,.28),
    0 0 16px rgba(33,227,179,.25),
    inset 0 0 0 1.5px rgba(255,255,255,.28),
    inset 0 1px 0 rgba(255,255,255,.35); 

  backdrop-filter: blur(4px);
  overflow: hidden;
}


.auth-slot{ height: 100%; display:flex; align-items:center; }
.auth-slot > *{ height:100%; }
.auth-slot{ height:100%; display:flex; align-items:center; }
.auth-slot > *[hidden]{ display:none !important; } 
.userbar{
  height:100%;
  display:flex; align-items:center; gap:10px;
  background: transparent; border: 0; box-shadow:none;
  padding: 0 4px;
}
.userbar .avatar{
  height: calc(100% - var(--pad) * 2);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display:block;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.userbar .uid{
  max-width: 180px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logout-btn{
  margin-left: 6px;
  height: calc(100% - var(--pad) * 2);
  aspect-ratio: 1 / 1;
  border: 0;
  background: transparent; 
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.logout-btn img{
  height: 70%;
  display:block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}



.top .logo,
.login-btn{
  height: 100%;
  display: flex;
  align-items: center;
}

.top .logo img,
.login-btn img{
  height: calc(100% - var(--pad) * 2);
  width: auto;
}

.login-btn{
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.login-btn img{
  display:block;
  pointer-events:none;
  user-select:none;
}
.logout-pill{
  display:inline-block;
  min-width:96px;
  padding:10px 16px;
  border-radius:9999px;
  background:linear-gradient(180deg,#41D3F9,#14A9C9);
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  font-weight:800;
  text-align:center;
  box-shadow: inset 0 8px 14px rgba(255,255,255,.12), 0 6px 12px rgba(0,0,0,.18);
}


.hero-video{
width: min(var(--content-w), var(--max-w));
margin-inline: auto;
  background:#000;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  border-radius: clamp(10px, 1.2vw, 16px);
  overflow: hidden;
  display: block;
}

/* ===== 排行榜 ===== */
.rank-panel{
  width: min(var(--content-w), var(--max-w));
  margin-inline: auto;
  border-radius:14px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(1,76,117,.32), rgba(1,76,117,.32) .01%, rgba(0,155,173,.32)),
    linear-gradient(0deg, rgba(0,0,0,0) 86.13%, rgba(0,0,0,.22));
  border:1px solid hsla(0,0%,100%,.28);
  box-shadow:0 .53vw 2vw rgba(0,0,0,.10);
  backdrop-filter:blur(8px) saturate(120%);
}

.rank-head{
  position:relative; width:100%;
  background-size:cover; background-position:center;
  height:min(18vw,140px);
  border-radius:14px 14px 0 0; overflow:hidden;
}
.rank-title{
  position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  font-weight:800; font-size:clamp(18px,4.4vw,24px);
  text-shadow:0 2px 6px rgba(0,0,0,.25); text-align:center;
}
.rank-date{
  position:absolute; left:50%; top:60%; transform:translateX(-50%);
  font-size:clamp(12px,3.2vw,14px); color:#fff; opacity:.95; text-align:center;
}
.rank-arrow{position:absolute; right:12px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center}
.rank-arrow img{height:28px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.rank-body{
  --float-up: 2.8vw; 
  --safe-top: 2vw;
  --gap: 2vw;
  --pad-x: 1.6vw;
  --pad-b: 1.6vw;

  width:100%;
  padding-top: calc(var(--safe-top) + var(--float-up));
  padding-right: var(--pad-x);
  padding-left:  var(--pad-x);
  padding-bottom: var(--pad-b);

  display:grid;
  grid-template-columns: minmax(0,1.22fr) minmax(0,1fr) minmax(0,0.90fr);
  gap: var(--gap);

  justify-items:center;
  align-items:end;

  background:linear-gradient(180deg, rgba(154,208,255,.10), rgba(100,160,230,.06));
  box-shadow:inset 0 10px 28px rgba(0,0,0,.14);
  border-top:1px solid rgba(255,255,255,.22);
}
.rank-slot{
  width:100%;
  display:flex; align-items:flex-end; justify-content:center;
}
.rank-card{
  width:100%;
  aspect-ratio:3/4;
  position:relative; text-align:center; overflow:visible;
  border-radius:2vw;
  padding:1.0vw;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:.10vw solid rgba(255,255,255,.24);
  box-shadow:
    0 .8vw 1.5vw rgba(0,73,122,.20),
    inset 0 0 0 .10vw rgba(255,255,255,.12);
  backdrop-filter: blur(8px) saturate(120%);
  transform-origin: bottom center;
  will-change: transform;
  animation: bob 3.2s ease-in-out infinite;
}
.rank-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:
    inset 0 0 0 .16vw rgba(255,255,255,.24),
    inset 0 0 2.4vw rgba(175,216,255,.38);
  pointer-events:none;
}
.rank-card::after{
  content:""; position:absolute; inset:-.36vw; border-radius:inherit;
  background:
    radial-gradient(80% 120% at 50% 0, rgba(185,248,255,.50), transparent 60%),
    radial-gradient(60% 100% at 50% 100%, rgba(95,215,255,.32), transparent 60%);
  filter: blur(.72vw);
  opacity:.9;
  pointer-events:none;
  z-index:-1;
}
.rank-card .avatar{
  width:87%;
  display:block; margin:2vw auto .9vw;
  filter:drop-shadow(0 .85vw 1.25vw rgba(0,0,0,.35));
}
.rank-card .pid{
  opacity:.96; margin-bottom:.9vw; font-weight:800;
  font-size:clamp(12px,1.8vw,18px);
}
.rank-card .amount{
  display:inline-flex; align-items:center; gap:.55vw;
  background:rgba(0,0,0,.26);
  padding:.55vw 2vw; border-radius:10px;
  font-size:clamp(16px,2vw,16px);
  color: var(--color-yellow-400);
}
.rank-card .amount span{
  color: #facc15; 
  color: oklch(85.2% .199 91.936);
  font-weight: 500; 
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  padding: 0 1vw;
}
.rank-card .pid{
  font-weight: 500;
  color: #eaf2ff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25); 
  font-size: clamp(16px, 2vw, 22px); 
}
.rank-card .coin{height:4vw; min-height:12px}
.rank-body .rank-slot:nth-child(1) .rank-card .avatar{ width: 96%; }
.rank-body .rank-slot:nth-child(2) .rank-card .avatar{ width: 92%; } 
.rank-body .rank-slot:nth-child(3) .rank-card .avatar{ width: 82%; }
.rank-body .rank-slot:nth-child(1) .rank-card{ animation-delay: .00s; }
.rank-body .rank-slot:nth-child(2) .rank-card{ animation-delay: .30s; }
.rank-body .rank-slot:nth-child(3) .rank-card{ animation-delay: .60s; }
@keyframes bob{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(calc(-1 * var(--float-up))); }
}


.intro-box{
  width: min(var(--content-w), var(--max-w));
  margin-inline: auto;
  color:#fff;
  line-height:1.75;
  font-weight:600;
  text-align:center;
  padding: clamp(14px, 3vw, 28px) clamp(16px, 3.2vw, 36px);
  border-radius: clamp(14px, 2.4vw, 22px);
  background:
    linear-gradient(180deg,
      rgba(1,76,117,.74), 
      rgba(1,76,117,.74) .01%,
      rgba(0,155,173,.70)
    ),
    linear-gradient(0deg,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,.32) 
    );
  border:1px solid hsla(0,0%,100%,.42);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.intro-box::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  box-shadow:
    inset 0 0 0 .12vw rgba(255,255,255,.12),
    inset 0 0 1.4vw rgba(175,216,255,.18);
  pointer-events:none;
}
.intro-box { text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.intro-box > p,
.intro-box > div,
.intro-box > ol{
  max-width: clamp(46ch, 78%, 72ch);
  margin: 0 auto;
}

/* 品牌滚动 */
.brands{padding:12px 0 12px}
.brands-viewport{
  width:100%; margin:0 auto; transform:none; overflow:hidden;
  background:linear-gradient(90deg, rgba(34,34,34,.2), rgba(34,34,34,.8) 30%, rgba(34,34,34,.8) 70%, rgba(34,34,34,.2));
}
.brands-track{
  display:flex; align-items:center; gap:min(7vw,40px);
  padding:12px 18px; width:max-content;
}
.brands-track img{height:42px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.brands-track{ display:flex; align-items:center; gap:min(7vw,40px);
padding: clamp(24px, 3vw, 48px) 18px; width:max-content; }

.dir-l{animation:marquee-l 16s linear infinite}
.dir-r{animation:marquee-r 16s linear infinite}
@keyframes marquee-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}


/* 证书 */
.certs-panel{
width: min(var(--content-w), var(--max-w));
margin-inline: auto;
  padding:clamp(10px,1.2vw,14px) clamp(12px,1.6vw,16px);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(1,76,117,.86), rgba(1,76,117,.86) .01%, rgba(0,155,173,.86));
  border:1px solid hsla(0,0%,100%,.48);
  margin-bottom: clamp(2px,.5vw,8px);
}
.cert-grid{
  width:100%; max-width:var(--max-w); margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr)); 
  gap: clamp(8px,1.2vw,14px);
  justify-items:center; align-items:start;
}
.cert{background:transparent; border-radius:14px; padding:min(1vw,8px)}
.cert img{width:100%; height:auto; display:block; border-radius:6px}
.cert .cap{margin-top:8px; color:#dbe7ff; display:flex; flex-wrap:wrap; gap:4px 6px; font-size:clamp(11px,1.6vw,14px); line-height:1.25}

/* 侧边栏参数 */
:root{
  --side-w: clamp(70px, 10vw, 110px); 
  --bulge-y: 50%; 
  --bulge-left: 32px; 
  --arrow-offset-x: 70px; 
  --side-pad-x: 13px; 
  --side-pad-top: 25px; 
  --side-pad-btm: 18px;
  --track-h: clamp(340px, 35vh, 550px);
  --icon-h: clamp(40px, 7vh, 55px); 
  --icon-gap: 0;
  --side-open-opacity: .86; 
  --side-close-opacity: .85; 
}

:root{ --icons-nudge-x: 0px; }
.side-list li { margin-left: var(--icons-nudge-x); }
.side{
  position: fixed; right: 10px; top: 50%;
  width: var(--side-w);
  z-index: 50;
  overflow: visible;
  transform: translate(calc(100% - 3px), -50%); 
  transition: transform .45s ease;
}
.side[data-open="1"]{ transform: translate(0, -50%); }

.side .toggle{
  position: absolute;
  left: calc(-40px - var(--bulge-left) + var(--arrow-offset-x));
  top: var(--bulge-y);
  transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%;
  border: 0; background:#0d223f;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  z-index: 5; 
}
.side .toggle img{ 
    height:16px; display:block;
    pointer-events: none;
}
.side .toggle .badge{
  position:absolute; right:-2px; top:-2px;
  width:10px; height:10px; border-radius:50%; background:#ff3b30;
}
.side-list{
  position: relative;
  list-style: none;
  margin:0;
  padding: var(--side-pad-top) var(--side-pad-x) var(--side-pad-btm);
  height: var(--track-h);
  display:flex; flex-direction:column;
  justify-content: space-evenly;
  align-items:flex-start;
  gap: var(--icon-gap);
}
.side-list li{ list-style:none; }
.side-list li::marker{ content:none; }
.side-list::before{
  content:"";
  position:absolute;
  inset: -12px -10px -16px calc(-1 * var(--bulge-left)); 
  background: url('/claim/assets/img/bg_applogo.png') no-repeat right center / contain;
  border-radius:22px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
  z-index:-1;
  transition: transform .45s ease, opacity .35s ease;
  pointer-events: none; 
}
.side-list li a{ display:block }
.side-list li img{
  height: var(--icon-h);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  transition: transform .35s ease, opacity .35s ease;
}
.side[data-open="0"] .side-list{ pointer-events:none; }
.side[data-open="0"] .side-list::before{ transform: translateX(12px); opacity: var(--side-close-opacity); }
.side[data-open="0"] .side-list li img{ transform: translateX(14px); opacity:0; }
.side[data-open="1"] .side-list{ pointer-events:auto; }
.side[data-open="1"] .side-list::before{ transform:none; opacity: var(--side-open-opacity); }
.side[data-open="1"] .side-list li img{ transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce){
  .side, .side-list::before, .side-list li img{ transition:none !important; }
}


/* 登录弹窗参数 */
:root{
  --login-w: clamp(380px, 80vw, 580px); 
  --login-radius: 18px;
  --btn-h: 50px;
  --btn-w: 56%;

  --close-size: 48px;
  --close-right: 14px;
  --close-top: 12px;
}


.mask{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
  z-index:99;
}
.mask.show{ display:flex }
.login{
  width: var(--login-w);
  border-radius: var(--login-radius);
  background: linear-gradient(180deg, #7ee0d4 0%, #40c9b8 55%, #1aa696 100%);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 18px 44px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.30);
  color:#0c2233;
  padding: 0 18px 16px;
  overflow:hidden;
  position:relative;
}
.login-head{
  margin: 0 -18px 14px;
  position: relative;
}
.login-head-img{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--login-radius) var(--login-radius) 0 0;
}
.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; border:0;
}
.login-head .close{
  position:absolute;
  right: var(--close-right);
  top:   var(--close-top);
  width: var(--close-size);
  height: var(--close-size);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.login-body label{
  display:block; margin:6px 0 6px;
  color:#0e2a34; opacity:.95; font-weight:600;
}
.login-body input{
  width:100%; height:44px;
  border-radius:12px; border:1px solid rgba(0,0,0,.10);
  background:#fff; color:#0e2230; padding:0 12px; outline:0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.login-body input:focus{
  border-color:#2fd8c7; box-shadow:0 0 0 3px rgba(47,216,199,.25);
}
.captcha{ margin-top:10px; }
.captcha-row{ display:flex; align-items:center; gap:8px; }
.captcha-row .q{
  min-width:96px; padding:0 10px; height:44px; border-radius:12px;
  background:#fff; border:1px solid rgba(0,0,0,.10);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.02em; color:#0e2230;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
#loginCaptcha{ flex:1; }
.captcha-refresh{
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff; color:#0e2230; font-size:18px; cursor:pointer;
}
.captcha-refresh:hover{ border-color:#2fd8c7 }
.login-actions{
  margin-top:14px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.login .go{
  height: var(--btn-h);
  width: var(--btn-w);
  border-radius: 999px;
  background: linear-gradient(180deg,#5ac78a,#2e9b63);
  color:#fff; font-weight:800; letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 0 rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.5);
  cursor:pointer;
}
.login .go:active{ transform: translateY(1px); }
.login-actions .dl{
  display:inline-block; line-height:0;
}
.login-actions .dl img{
  height: var(--btn-h); width:auto; display:block; 
}
.login .note{opacity:.85; text-align:center; margin:10px 0 0; color:#0c2a34}
.login .msg{ margin:8px 0 0; min-height:18px; color:#ffbf4e; text-align:center }
@media (max-width:480px){
  :root{ --btn-h: 48px; }
}