/* DataKickers V2.1 production visual fixes — 2026-08-17 */

/* Readability: keep the dark identity, lift only secondary copy one level. */
.hero-text p,
.hero-copy,
.quiet-state,
.quiet-state span,
.microcopy,
.club-rule span,
.deck-copy p,
.section-desc,
.club-chip span,
.manifesto-item span { color:#7f8982; }
.quiet-state strong { color:#d5dad6; }
.club-rule span { color:#778079; }
.microcopy { color:#68716b; }

/* Desktop: preserve premium whitespace without wasting the entire first viewport. */
@media (min-width: 981px){
  .view{padding-top:58px}
  .hero-section{padding-top:18px;padding-bottom:48px}
  .hero-text h1{font-size:clamp(54px,6.25vw,82px);max-width:820px}
  .quota-orb{width:142px;height:142px;flex-basis:142px}
  .quota-center strong{font-size:50px}
  .section{padding-top:44px;padding-bottom:44px}
  .onboarding-layout{gap:58px}
}

/* Give club marks a DataKickers identity without using protected club crests. */
.club-logo,.club-chip-logo{
  background:
    radial-gradient(circle at 76% 22%,rgba(216,255,79,.14),transparent 27%),
    linear-gradient(135deg,#19221c 0%,#0e1410 57%,#1a221b 100%);
  border-color:#334038;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 8px 22px rgba(0,0,0,.16);
  position:relative;
}
.club-logo{border-radius:14px}
.club-chip-logo{border-radius:15px;color:#e1ff79}
#clubGrid .club:nth-child(4n+2) .club-logo,
.club-stack .club-chip:nth-child(4n+2) .club-chip-logo{
  background:radial-gradient(circle at 24% 76%,rgba(216,255,79,.13),transparent 28%),linear-gradient(145deg,#1b241e,#0d1210 64%,#20271b);
}
#clubGrid .club:nth-child(4n+3) .club-logo,
.club-stack .club-chip:nth-child(4n+3) .club-chip-logo{
  background:linear-gradient(30deg,rgba(216,255,79,.07) 0 16%,transparent 16% 54%,rgba(216,255,79,.045) 54% 67%,transparent 67%),#121814;
}
#clubGrid .club:nth-child(4n) .club-logo,
.club-stack .club-chip:nth-child(4n) .club-chip-logo{
  background:radial-gradient(circle at 50% 50%,#1c251d 0 34%,#101511 35% 55%,#182019 56%);
}

/* Empty state: do not suggest three unread cards exist when there are none. */
.kicks-section:has(#emptyKicks:not(.hidden)) .kick-quota strong,
.kicks-section:has(#emptyKicks:not(.hidden)) .kick-quota span{display:none}
.kicks-section:has(#emptyKicks:not(.hidden)) .kick-quota::after{
  content:"今日暂无";
  display:block;
  color:#9aa39d;
  font-size:11px;
  letter-spacing:.08em;
  padding-bottom:5px;
}

/* Sections are anchor targets behind a sticky header. */
#today,#clubs,#deck,#matches{scroll-margin-top:92px}

@media (max-width: 760px){
  :root{--mobile-nav-space:138px}
  .shell{width:calc(100% - 30px)}
  .topbar{height:62px;padding:0 16px}
  .brand-glyph{width:34px;height:34px}
  .brand-name{font-size:15px}
  .signal{display:none}
  .avatar{width:34px;height:34px}
  .view{padding-top:38px}

  /* Onboarding: get the user to the actual choice quickly. */
  .onboarding-layout{display:block}
  .onboarding-copy{position:static;padding-top:8px}
  .onboarding-copy h1{font-size:clamp(48px,14.2vw,66px);letter-spacing:-3.6px;line-height:.98;margin-top:14px}
  .hero-copy{font-size:15px;line-height:1.7;margin-top:22px;max-width:95%}
  .manifesto{display:none}
  .picker-card{margin-top:34px;border-radius:24px;padding:18px}
  .picker-toolbar{padding-bottom:15px}
  .club-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible;gap:9px}
  .club{min-height:112px;padding:14px}
  .club-logo{width:42px;height:42px;margin-bottom:13px}
  .picker-card>.cta{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));z-index:8;box-shadow:0 12px 38px rgba(0,0,0,.44)}

  /* Home hero: keep the visual signature but fit it cleanly on one phone screen. */
  .hero-section{padding:28px 0 44px;align-items:center;gap:10px}
  .hero-text{min-width:0;flex:1}
  .hero-text h1{font-size:clamp(50px,13.4vw,68px);letter-spacing:-3.8px;line-height:.98}
  .hero-text p{font-size:12px;line-height:1.55;margin-top:18px}
  .quota-orb{width:116px;height:116px;flex:0 0 116px;margin-right:-3px}
  .quota-center strong{font-size:45px;letter-spacing:-3px}
  .quota-center span{font-size:6px}
  .dot-1{top:12px;left:36px}.dot-2{right:7px;top:51px}.dot-3{left:20px;bottom:12px}

  .section{padding:40px 0}
  .section-head{margin-bottom:18px}
  .section-head h2,.deck-copy h2{font-size:25px}
  .kick-quota strong{font-size:32px}
  .quiet-state{min-height:172px;padding:26px 22px;gap:18px;border-radius:20px}
  .quiet-state strong{font-size:14px;line-height:1.5}
  .quiet-state span{font-size:11px;line-height:1.55}
  .microcopy{font-size:10px;line-height:1.5}

  /* Mobile panels: cards should never be clipped behind the fixed navigation. */
  .split-section{display:block}
  .club-panel{margin-bottom:14px}
  .panel{border-radius:22px;padding:21px}
  .club-chip{grid-template-columns:48px 1fr auto;padding:14px 13px}
  .club-chip-logo{width:48px;height:48px}
  .club-rule{margin-top:17px;padding-top:16px}
  .club-rule span{font-size:10px;line-height:1.6}

  .deck-panel{display:block;min-height:0;padding-bottom:22px}
  .deck-copy p{font-size:12px;line-height:1.7}
  .card-fan{height:286px;margin-top:18px;overflow:visible}
  .collect-card{width:154px;height:218px;right:auto;left:50%;top:24px}
  .front-card{transform:translateX(-35%) rotate(5deg)}
  .mid-card{transform:translateX(-66%) rotate(-4deg)}
  .back-card{transform:translateX(-96%) rotate(-13deg)}

  /* Fixed nav gets a stronger safe area, document gets matching breathing room. */
  #dashboard.view{padding-bottom:calc(var(--mobile-nav-space) + env(safe-area-inset-bottom))}
  .philosophy-section{padding-bottom:34px;margin-bottom:18px}
  .bottom-nav{
    left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));
    width:auto;max-width:none;height:70px;border-radius:22px;
    background:rgba(11,15,12,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    box-shadow:0 20px 55px rgba(0,0,0,.48);
  }
  .bottom-nav button{min-width:0;font-size:10px}
  .bottom-nav button span{font-size:15px;margin-bottom:4px}
}

@media (max-width: 420px){
  .shell{width:calc(100% - 24px)}
  .hero-section{gap:4px}
  .hero-text h1{font-size:49px;letter-spacing:-3.2px}
  .quota-orb{width:104px;height:104px;flex-basis:104px}
  .quota-center strong{font-size:40px}
  .club-grid{gap:7px}
  .club{min-height:106px}
}

@media (prefers-reduced-motion: reduce){
  .quota-ring:after,.quiet-pulse:after,.card-shine,.holo{animation:none!important}
}