/* ================================================================
   Wheech — Lime Zest Theme
   Electric lime primary · Orange accent · Blue rival · Navy ink
   ================================================================

   TABLE OF CONTENTS
   -----------------
   1. Tokens (custom properties)
   2. Base reset
   3. Typography
   4. Utility classes
   5. Layout — Screen shell, Status bar, Header, Body, Tab bar
   6. Components — Buttons, Cards, Avatars, Badges
   7. Forms — Toggle, Search, Vote controls
   8. Data — Split bar, Donut chart legend
   9. Motion

   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

/* ================================================================
   1. TOKENS
   ================================================================ */

:root {
  /* ── Brand colors ─────────────────────────────────────────── */
  --wh-lime:        #aaff00;   /* Electric lime — primary action */
  --wh-lime-lt:     #f4ffe0;   /* Lime tint — card backgrounds   */
  --wh-lime-mid:    #d6ffa0;   /* Lime mid — avatar backgrounds  */
  --wh-lime-dk:     #4a7000;   /* Lime dark — text on lime tints */

  --wh-orange:      #ff5219;   /* Orange — accent, VS badge, week pill */
  --wh-orange-lt:   #fff1ed;   /* Orange tint                    */
  --wh-orange-mid:  #ffd0c2;   /* Orange mid                     */

  --wh-blue:        #1ba3e8;   /* Blue — rival / player B        */
  --wh-blue-lt:     #e1f3fd;   /* Blue tint                      */
  --wh-blue-mid:    #b3dff7;   /* Blue mid                       */

  /* ── Neutrals ─────────────────────────────────────────────── */
  --wh-bg:          #faf7f2;   /* App background — warm off-white */
  --wh-surface:     #ffffff;   /* Card / sheet surfaces           */
  --wh-ink:         #191630;   /* Primary text / strokes          */
  --wh-muted:       #8a849a;   /* Secondary text                  */
  --wh-faint:       #b8b3c4;   /* Placeholder / disabled text     */
  --wh-line:        #e4e0d8;   /* Dividers, borders               */
  --wh-rival:       #c9cdda;   /* Rival (losing) segment fill     */

  /* ── Position tag colors ─────────────────────────────────── */
  --wh-pos-wr:      #2456b8;
  --wh-pos-rb:      #1f7a44;
  --wh-pos-qb:      #b3471f;
  --wh-pos-te:      #8a4ab0;
  --wh-pos-k:       #7a7d8c;
  --wh-pos-def:     #444758;

  /* ── Typography ───────────────────────────────────────────── */
  --wh-font:        'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --wh-font-display:'Fredoka', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --wh-size-xs:     10px;
  --wh-size-sm:     12px;
  --wh-size-base:   14px;
  --wh-size-md:     16px;
  --wh-size-lg:     18px;
  --wh-size-xl:     20px;
  --wh-size-2xl:    24px;
  --wh-size-3xl:    28px;
  --wh-size-4xl:    36px;
  --wh-size-5xl:    50px;

  /* ── Spacing ──────────────────────────────────────────────── */
  --wh-space-1:     4px;
  --wh-space-2:     8px;
  --wh-space-3:     12px;
  --wh-space-4:     16px;
  --wh-space-5:     20px;
  --wh-space-6:     24px;

  /* ── Borders & shadows ────────────────────────────────────── */
  --wh-stroke:      2.5px;
  --wh-stroke-sm:   1.5px;
  --wh-radius-sm:   6px;
  --wh-radius-md:   12px;
  --wh-radius-lg:   16px;
  --wh-radius-xl:   22px;
  --wh-radius-pill: 999px;

  --wh-shadow-sm:   3px 3px 0 var(--wh-ink);
  --wh-shadow-md:   4px 4px 0 var(--wh-ink);

  /* ── Motion ───────────────────────────────────────────────── */
  --wh-ease:        cubic-bezier(.25, .46, .45, .94);
  --wh-dur-fast:    120ms;
  --wh-dur-base:    200ms;
}

/* ================================================================
   2. BASE RESET (scoped)
   ================================================================ */

.wh-screen,
.wh-screen * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wh-screen {
  width: 390px;
  height: 844px;
  display: flex;
  flex-direction: column;
  background: var(--wh-bg);
  color: var(--wh-ink);
  font-family: var(--wh-font);
  font-size: var(--wh-size-base);
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ================================================================
   3. TYPOGRAPHY
   ================================================================ */

/* Scale */
.wh-text-xs   { font-size: var(--wh-size-xs);  }
.wh-text-sm   { font-size: var(--wh-size-sm);  }
.wh-text-base { font-size: var(--wh-size-base); }
.wh-text-md   { font-size: var(--wh-size-md);  }
.wh-text-lg   { font-size: var(--wh-size-lg);  }
.wh-text-xl   { font-size: var(--wh-size-xl);  }
.wh-text-2xl  { font-size: var(--wh-size-2xl); }
.wh-text-3xl  { font-size: var(--wh-size-3xl); }

/* Weights */
.wh-medium   { font-weight: 600; }
.wh-bold     { font-weight: 700; }
.wh-extrabold{ font-weight: 800; }
.wh-black    { font-weight: 900; }

/* Colors */
.wh-ink      { color: var(--wh-ink);    }
.wh-muted    { color: var(--wh-muted);  }
.wh-faint    { color: var(--wh-faint);  }
.wh-lime-dk  { color: var(--wh-lime-dk);}

/* Label — all-caps eyebrow */
.wh-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--wh-faint);
}
.wh-label--a { color: var(--wh-orange); }
.wh-label--b { color: var(--wh-blue);   }

/* Wordmark */
.wh-wordmark {
  font-family: var(--wh-font-display);
  font-size: var(--wh-size-3xl);
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.wh-wordmark .wh-dot { color: var(--wh-lime); }

/* Player name */
.wh-player-name {
  font-size: var(--wh-size-lg);
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.1;
}

/* Player meta row */
.wh-player-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wh-muted);
  white-space: nowrap;
}

/* Screen title */
.wh-screen-title {
  font-size: var(--wh-size-xl);
  font-weight: 800;
  letter-spacing: -.3px;
}

/* ================================================================
   4. UTILITY CLASSES
   ================================================================ */

.wh-flex         { display: flex; }
.wh-flex-col     { display: flex; flex-direction: column; }
.wh-items-center { align-items: center; }
.wh-justify-between { justify-content: space-between; }
.wh-gap-1  { gap: var(--wh-space-1); }
.wh-gap-2  { gap: var(--wh-space-2); }
.wh-gap-3  { gap: var(--wh-space-3); }
.wh-gap-4  { gap: var(--wh-space-4); }
.wh-text-center { text-align: center; }

/* ================================================================
   5. LAYOUT
   ================================================================ */

/* ── Status bar ── */
.wh-status {
  height: 50px;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--wh-space-6) 7px;
  font-size: 15px;
  font-weight: 700;
}
.wh-status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Header ── */
.wh-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--wh-space-3);
  padding: 6px var(--wh-space-5) 14px;
}
.wh-header-title {
  flex: 1;
  text-align: center;
  font-size: var(--wh-size-xl);
  font-weight: 800;
  letter-spacing: -.3px;
}

/* ── Scroll body ── */
.wh-body {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 0 var(--wh-space-5);
  display: flex;
  flex-direction: column;
}
.wh-spacer { flex: 1; }

/* ── Home indicator ── */
.wh-home-indicator {
  height: 22px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wh-home-indicator::after {
  content: "";
  width: 134px;
  height: 5px;
  border-radius: 3px;
  background: var(--wh-ink);
  opacity: .8;
}

/* ── Tab bar ── */
.wh-tabs {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-around;
  padding: 10px 8px 6px;
  border-top: var(--wh-stroke) solid var(--wh-ink);
  background: var(--wh-surface);
}
.wh-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--wh-faint);
  flex: 1;
}
.wh-tab__pill {
  width: 40px;
  height: 28px;
  border-radius: var(--wh-radius-pill);
  display: grid;
  place-items: center;
}
.wh-tab--active {
  color: var(--wh-ink);
}
.wh-tab--active .wh-tab__pill {
  background: var(--wh-lime);
}

/* ── Ad banner ── */
.wh-ad {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: repeating-linear-gradient(
    135deg,
    #eceef3 0 10px,
    #f4f5f8 10px 20px
  );
  border-top: 2px solid var(--wh-ink);
}
.wh-ad__tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--wh-faint);
  border: 1px dashed var(--wh-faint);
  padding: 4px 9px;
  border-radius: var(--wh-radius-sm);
}

/* ================================================================
   6. COMPONENTS
   ================================================================ */

/* ── Icon button (circle) ── */
.wh-iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wh-surface);
  border: var(--wh-stroke) solid var(--wh-ink);
  box-shadow: var(--wh-shadow-sm);
  display: grid;
  place-items: center;
  color: var(--wh-ink);
  flex: 0 0 auto;
  cursor: pointer;
  transition: box-shadow var(--wh-dur-fast) var(--wh-ease),
              transform  var(--wh-dur-fast) var(--wh-ease);
}
.wh-iconbtn:active {
  box-shadow: 1px 1px 0 var(--wh-ink);
  transform: translate(2px, 2px);
}

/* ── CTA button ── */
.wh-cta {
  background: var(--wh-lime);
  color: var(--wh-ink);
  border: var(--wh-stroke) solid var(--wh-ink);
  box-shadow: var(--wh-shadow-md);
  border-radius: 18px;
  padding: 17px;
  text-align: center;
  font-family: var(--wh-font);
  font-size: var(--wh-size-lg);
  font-weight: 800;
  cursor: pointer;
  letter-spacing: -.2px;
  transition: box-shadow var(--wh-dur-fast) var(--wh-ease),
              transform  var(--wh-dur-fast) var(--wh-ease);
}
.wh-cta:active {
  box-shadow: 1px 1px 0 var(--wh-ink);
  transform: translate(3px, 3px);
}
.wh-cta--ghost {
  background: var(--wh-surface);
}
.wh-cta--disabled {
  background: var(--wh-line);
  color: var(--wh-faint);
  border-color: var(--wh-faint);
  box-shadow: none;
  cursor: default;
}

/* ── Player card ── */
.wh-card {
  border: var(--wh-stroke) solid var(--wh-ink);
  border-radius: var(--wh-radius-xl);
  box-shadow: var(--wh-shadow-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--wh-surface);
}
.wh-card--a { background: var(--wh-lime-lt); }
.wh-card--b { background: var(--wh-blue-lt); }

/* ── New matchup slot (dashed) ── */
.wh-card--new {
  border: var(--wh-stroke) dashed var(--wh-lime);
  border-radius: var(--wh-radius-xl);
  padding: 18px var(--wh-space-5);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--wh-lime-lt);
  cursor: pointer;
}

/* ── Avatar ── */
.wh-av {
  width: 58px;
  height: 58px;
  border-radius: var(--wh-radius-lg);
  flex: 0 0 auto;
  border: var(--wh-stroke) solid var(--wh-ink);
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 900;
  color: var(--wh-ink);
  background: var(--wh-line);
}
.wh-av--a   { background: var(--wh-lime-mid); }
.wh-av--b   { background: var(--wh-blue-mid); }
.wh-av--new { background: var(--wh-lime); }
.wh-av--sm  { width: 44px; height: 44px; font-size: 13px; border-radius: var(--wh-radius-md); }

/* ── Position tag ── */
.wh-pos {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--wh-radius-sm);
  flex-shrink: 0;
}
.wh-pos--wr  { background: var(--wh-pos-wr);  }
.wh-pos--rb  { background: var(--wh-pos-rb);  }
.wh-pos--qb  { background: var(--wh-pos-qb);  }
.wh-pos--te  { background: var(--wh-pos-te);  }
.wh-pos--k   { background: var(--wh-pos-k);   }
.wh-pos--def { background: var(--wh-pos-def); }

/* ── Scoring badge ── */
.wh-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--wh-radius-sm);
  white-space: nowrap;
}
.wh-badge--ppr {
  background: var(--wh-lime-lt);
  color: var(--wh-lime-dk);
  border: var(--wh-stroke-sm) solid var(--wh-lime-mid);
}
.wh-badge--std {
  background: var(--wh-line);
  color: var(--wh-muted);
  border: var(--wh-stroke-sm) solid var(--wh-line);
}

/* ── Week pill ── */
.wh-week-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wh-orange);
  color: #fff;
  border: var(--wh-stroke) solid var(--wh-ink);
  box-shadow: var(--wh-shadow-sm);
  padding: 8px 18px;
  border-radius: var(--wh-radius-pill);
  font-size: var(--wh-size-base);
  font-weight: 800;
  white-space: nowrap;
}
.wh-week-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wh-lime);
  box-shadow: 0 0 0 2px rgba(170,255,0,.35);
  flex: 0 0 auto;
}

/* ── VS badge ── */
.wh-vs {
  display: flex;
  justify-content: center;
  margin: -12px 0;
  position: relative;
  z-index: 2;
}
.wh-vs__badge {
  width: 52px;
  height: 52px;
  background: var(--wh-orange);
  color: #fff;
  border: 3px solid var(--wh-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  box-shadow: var(--wh-shadow-sm);
  transform: rotate(-8deg);
}

/* ── Timer chip ── */
.wh-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wh-muted);
}
.wh-timer__val {
  background: var(--wh-orange);
  color: #fff;
  border: var(--wh-stroke-sm) solid var(--wh-ink);
  border-radius: var(--wh-radius-sm);
  padding: 2px 8px;
  font-weight: 900;
}

/* ── My matchups result card ── */
.wh-result-card {
  border: var(--wh-stroke) solid var(--wh-ink);
  border-radius: var(--wh-radius-xl);
  box-shadow: var(--wh-shadow-md);
  padding: var(--wh-space-4);
  background: var(--wh-surface);
}
.wh-result-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
}
.wh-result-row + .wh-result-row {
  border-top: var(--wh-stroke-sm) solid var(--wh-line);
}
.wh-result-pct {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -1px;
  flex: 0 0 auto;
}
.wh-result-pct--win  { color: var(--wh-lime-dk); }
.wh-result-pct--lose { color: var(--wh-faint);   }

/* ── Inline search results list ── */
.wh-results-list {
  background: var(--wh-surface);
  border: var(--wh-stroke) solid var(--wh-ink);
  border-radius: var(--wh-radius-lg);
  box-shadow: var(--wh-shadow-md);
  overflow: hidden;
  margin-top: 8px;
}
.wh-result-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-bottom: var(--wh-stroke-sm) solid var(--wh-line);
  cursor: pointer;
}
.wh-result-item:last-child { border-bottom: none; }
.wh-result-item__av {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 2px solid var(--wh-ink);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: var(--wh-line);
  flex: 0 0 auto;
}

/* ================================================================
   7. FORMS
   ================================================================ */

/* ── PPR / Standard toggle ── */
.wh-toggle {
  display: flex;
  gap: var(--wh-space-2);
  margin-bottom: 22px;
}
.wh-toggle__opt {
  flex: 1;
  text-align: center;
  padding: 13px 0;
  border-radius: var(--wh-radius-lg);
  font-family: var(--wh-font);
  font-size: 15px;
  font-weight: 800;
  border: var(--wh-stroke) solid var(--wh-ink);
  background: var(--wh-surface);
  color: var(--wh-ink);
  cursor: pointer;
  transition: background var(--wh-dur-base) var(--wh-ease);
}
.wh-toggle__opt--on {
  background: var(--wh-lime);
  box-shadow: var(--wh-shadow-sm);
}

/* ── Search slot ── */
.wh-search {
  border: var(--wh-stroke) solid var(--wh-ink);
  border-radius: var(--wh-radius-xl);
  box-shadow: var(--wh-shadow-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: var(--wh-space-3);
  background: var(--wh-surface);
  cursor: text;
}
.wh-search__placeholder {
  font-size: var(--wh-size-md);
  font-weight: 600;
  color: var(--wh-faint);
  flex: 1;
}
.wh-search__text {
  font-size: var(--wh-size-md);
  font-weight: 600;
  color: var(--wh-ink);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1px;
}

/* ── Vote player card ── */
.wh-vote-card {
  display: flex;
  align-items: center;
  gap: var(--wh-space-3);
  padding: 12px 14px;
  border-radius: var(--wh-radius-lg);
  border: var(--wh-stroke) solid var(--wh-ink);
  background: var(--wh-surface);
  margin-bottom: 7px;
  cursor: pointer;
  transition: background var(--wh-dur-fast) var(--wh-ease),
              box-shadow  var(--wh-dur-fast) var(--wh-ease);
}
.wh-vote-card--on {
  background: var(--wh-lime-lt);
  box-shadow: var(--wh-shadow-md);
}

/* ── Vote check circle ── */
.wh-vote-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: var(--wh-stroke) solid var(--wh-ink);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: transparent;
}
.wh-vote-check--on {
  background: var(--wh-lime);
  color: var(--wh-ink);
}

/* ── Vote progress dots ── */
.wh-progress {
  display: flex;
  gap: 7px;
}
.wh-progress__dot {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--wh-line);
  border: var(--wh-stroke-sm) solid var(--wh-ink);
  transition: background var(--wh-dur-base) var(--wh-ease);
}
.wh-progress__dot--on { background: var(--wh-lime); }

/* ================================================================
   8. DATA DISPLAY
   ================================================================ */

/* ── Split bar ── */
.wh-split {
  height: 14px;
  border-radius: var(--wh-radius-pill);
  background: var(--wh-line);
  overflow: hidden;
  display: flex;
}
.wh-split__a { background: var(--wh-lime);   }
.wh-split__b { background: var(--wh-rival);  }

/* ── Donut chart legend row ── */
.wh-legend {
  display: flex;
  gap: var(--wh-space-4);
  justify-content: center;
  align-items: center;
}
.wh-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--wh-size-sm);
}
.wh-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.wh-legend__dot--a {
  background: var(--wh-lime);
  border: 1.5px solid var(--wh-ink);
}
.wh-legend__dot--b {
  background: var(--wh-line);
  border: 1.5px solid var(--wh-faint);
}
.wh-legend__name { font-weight: 700; color: var(--wh-ink); }
.wh-legend__pct  { font-weight: 900; color: var(--wh-lime-dk); margin-left: 2px; }
.wh-legend__pct--b { color: var(--wh-muted); }

/* ── Help / caption text ── */
.wh-help {
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wh-muted);
  margin: var(--wh-space-3) 0 14px;
}

/* ── Divider ── */
.wh-divider {
  height: var(--wh-stroke-sm);
  background: var(--wh-line);
  border: none;
  margin: var(--wh-space-3) 0;
}

/* ================================================================
   9. MOTION
   ================================================================ */

/* Blinking text cursor */
.wh-cursor {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: var(--wh-ink);
  border-radius: 1px;
  vertical-align: middle;
  animation: wh-blink 1s step-end infinite;
}
@keyframes wh-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Live pulse (on week pill dot) */
.wh-pulse {
  animation: wh-pulse 2s ease-in-out infinite;
}
@keyframes wh-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(170,255,0,.5); }
  50%       { box-shadow: 0 0 0 6px rgba(170,255,0,0);  }
}

/* Press → pop feedback for interactive cards */
@media (hover: hover) {
  .wh-card:hover,
  .wh-vote-card:hover {
    cursor: pointer;
  }
}