/* DailyPlayer first-visit homepage v2 — 8 Aug 2026
   Runtime enhancement only: existing #homePage gating and app logic stay intact. */

#homePage.dp-home-v2 {
  background: #f7f8f6 !important;
  padding: 0 !important;
  color: #111 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Width fixed 20 Aug 2026 — this was hard-capped at 480px with no upper
   scaling at all, so on any desktop screen the whole homepage rendered as
   one small card floating in a sea of blank #f7f8f6 background (Ken
   confirmed on a real MacBook, both at ~1728px logical width and again on
   a wider external-display-class screen). This is the ACTUAL live homepage
   — index.html's own static #homePage markup is fully superseded by this
   file + homepage-v2.js's render() the instant it runs, so a same-day fix
   attempted there had zero effect on production; this is the one that
   matters. Uses the same clamp()-based fluid approach as the other splash
   screens (see index.html's "FLUID SPLASH SCALING" block, same day): the
   MIN matches the original 480px exactly, so phones/small tablets are
   completely unchanged (min(100%, clamp(...)) still yields 100% on any
   viewport narrower than 480px, same as before).

   vw share and cap both bumped further the same day — the first pass
   (42vw, capped 900px) was mathematically fluid but on Ken's actual
   MacBook (~1550px logical width) only worked out to ~650px, barely
   wider than before, and he reported the card still didn't use "the full
   depth of the screen": lots of blank space below the footer as well as
   to the sides. 58vw/980px puts a typical 1450-1600px laptop screen at
   ~850-930px wide (much closer to the 980px cap), and pairs with the new
   min-width:860px content-scale block below, which enlarges fonts/icons/
   padding so the extra width doesn't just create wider gutters — it lets
   more content sit on each line and adds genuine vertical height too. */
#homePage.dp-home-v2 .dp-home-shell {
  width: min(100%, clamp(480px, 58vw, 980px));
  margin: 0 auto;
  padding: 28px 20px 30px;
  text-align: center;
}

#homePage.dp-home-v2 .dp-home-brandmark {
  width: 82px;
  height: 82px;
  border-radius: 20px;
  display: block;
  margin: 0 auto 10px;
  box-shadow: 0 6px 18px rgba(17, 24, 39, .08);
}

#homePage.dp-home-v2 .dp-home-wordmark {
  margin: 0 0 6px;
  font-size: clamp(2rem, 9vw, 2.55rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.6px;
}

#homePage.dp-home-v2 .dp-home-wordmark span { color: #0a8149; }

/* text-wrap: balance was relied on alone to break this as "The Player. The
   Person." / "Their Journey.", but on Ken's actual iPhone (real Safari,
   10 Aug 2026) the balance heuristic picked a mid-phrase split instead —
   "The Player. The" / "Person. Their Journey." — since it only balances
   line width, not phrase boundaries. The <br> in the markup now forces the
   correct break explicitly; balance/max-width stay as a harmless fallback
   for further wrapping on very narrow screens. */
#homePage.dp-home-v2 .dp-home-tagline {
  text-wrap: balance;
  max-width: 21rem;
  margin: 0 auto 30px;
  color: #0a8149;
  font-size: .83rem;
  line-height: 1.45;
  font-weight: 850;
  letter-spacing: .105em;
  text-transform: uppercase;
}

/* font-size tuned 10 Aug 2026 for the current headline copy ("Every player
   has a story. / Discover one every day.") — the old clamp(2.15rem, 10vw,
   3.15rem), sized for the much shorter "One Player." era of this headline,
   overflowed the <br>-separated lines into 4 lines on real phones (360-430px
   wide) instead of 2. Re-measured live against the actual DOM (not just
   estimated) across 300-480px viewport widths — clamp(1.6rem, 7.5vw, 2rem)
   held exactly 2 lines throughout that range.
   Bumped slightly larger the same day per Ken ("a tiny bit bigger without
   wrapping", plus a bit more separation between the two lines): re-measured
   with the browser's real vw resolution bypassed via JS (setting an exact
   px font-size per simulated width rather than relying on live vw, which
   doesn't respond to a spoofed container width — see
   feedback_text_wrap_balance memory) across the same width sweep.
   clamp(1.7rem, 7.8vw, 2.1rem) holds 2 lines from 320px up — i.e. every
   iPhone/Android in current production — and only wraps to 4 lines at an
   unrealistic 300-310px, narrower than any phone actually sold today (the
   old 320px-wide iPhone SE 1st gen was discontinued in 2018). Traded that
   sliver of legacy-device margin for a real, visible size increase.
   line-height also raised 1.05 -> 1.15 for breathing room between the two
   lines; confirmed this doesn't affect the wrap point at any width. */
#homePage.dp-home-v2 .dp-home-hero h1 {
  margin: 0 auto;
  max-width: 420px;
  color: #0b0f14;
  font-size: clamp(1.7rem, 7.8vw, 2.1rem);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -1.8px;
}

#homePage.dp-home-v2 .dp-home-rule {
  width: 72px;
  height: 4px;
  margin: 20px auto 18px;
  border-radius: 99px;
  background: #0a8149;
}

/* Breadth line — the four player categories are meant to read as light
   examples of variety under the headline, not as their own section. */
#homePage.dp-home-v2 .dp-home-breadth {
  max-width: 360px;
  margin: 0 auto 30px;
  color: #5c6460;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.6;
}

#homePage.dp-home-v2 .dp-home-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 18px;
  color: #0a8149;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#homePage.dp-home-v2 .dp-home-section-title::before,
#homePage.dp-home-v2 .dp-home-section-title::after {
  content: "";
  height: 1px;
  background: #bad4c4;
  flex: 1;
}

/* Who they are / what made them come first. On a phone these remain readable
   rather than squeezing four columns into 360–390px. */
#homePage.dp-home-v2 .dp-home-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  text-align: left;
}

#homePage.dp-home-v2 .dp-home-pillar {
  min-height: 156px;
  padding: 16px 14px 14px;
  border: 1px solid #dce6df;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(17, 24, 39, .035);
}

/* True checkerboard, not left-column/right-column: in the 2-col grid this
   shades card 1 (top-left) and card 4 (bottom-right), leaving 2 (top-right)
   and 3 (bottom-left) white — a diagonal pattern rather than one tinted
   column and one white column. */
#homePage.dp-home-v2 .dp-home-pillar:nth-child(4n+1),
#homePage.dp-home-v2 .dp-home-pillar:nth-child(4n) {
  border-color: #a8cdb8;
  background: #f2f8f4;
}

#homePage.dp-home-v2 .dp-home-pillar:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: auto;
  border-color: #a8cdb8;
  background: #f2f8f4;
}

#homePage.dp-home-v2 .dp-home-pillar-icon,
#homePage.dp-home-v2 .dp-home-step-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 9px;
  color: #0a8149;
}

#homePage.dp-home-v2 .dp-home-pillar-icon svg,
#homePage.dp-home-v2 .dp-home-step-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

#homePage.dp-home-v2 .dp-home-pillar h3 {
  margin: 0 0 6px;
  color: #111;
  font-size: .97rem;
  line-height: 1.16;
  font-weight: 900;
  text-transform: uppercase;
}

#homePage.dp-home-v2 .dp-home-pillar p {
  margin: 0;
  color: #454a50;
  font-size: .94rem;
  line-height: 1.4;
}

#homePage.dp-home-v2 .dp-home-steps {
  display: grid;
  gap: 10px;
  text-align: left;
}

#homePage.dp-home-v2 .dp-home-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 15px 14px;
  border: 1px solid #e0e4e2;
  border-radius: 15px;
  background: #fff;
}

#homePage.dp-home-v2 .dp-home-step-icon {
  width: 40px;
  height: 40px;
  margin: 2px 0 0;
}

#homePage.dp-home-v2 .dp-home-step-copy { min-width: 0; }

#homePage.dp-home-v2 .dp-home-step-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 3px;
}

#homePage.dp-home-v2 .dp-home-step-head h3 {
  flex: 1;
  min-width: 0;
}

/* Mini pill link — sits inside the step-head row, to the right of the
   heading text, via margin-left:auto (the row is already display:flex).
   Outlined rather than filled so it reads as a secondary shortcut, not a
   second CTA competing with the green "Reveal today's player" button. */
#homePage.dp-home-v2 .dp-home-step-pill {
  flex: none;
  align-self: center;
  margin-left: auto;
  padding: .22rem .6rem;
  border: 1px solid #0a8149;
  border-radius: 999px;
  background: transparent;
  color: #0a8149;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

#homePage.dp-home-v2 .dp-home-step-pill:active { transform: translateY(1px); }

#homePage.dp-home-v2 .dp-home-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0a8149;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  flex: none;
}

#homePage.dp-home-v2 .dp-home-step h3 {
  margin: 0;
  color: #111;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 850;
}

#homePage.dp-home-v2 .dp-home-step p {
  margin: 0;
  color: #454a50;
  font-size: .96rem;
  line-height: 1.45;
}

#homePage.dp-home-v2 .dp-home-cta {
  width: 100%;
  min-height: 58px;
  margin: 24px 0 10px;
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  background: #0a8149;
  color: #fff;
  box-shadow: 0 6px 18px rgba(10, 129, 73, .24);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 900;
}

#homePage.dp-home-v2 .dp-home-cta:active { transform: translateY(1px); }
#homePage.dp-home-v2 .dp-home-cta:focus-visible { outline: 3px solid rgba(10,129,73,.28); outline-offset: 3px; }

/* "How it works" is deliberately quieter than everything above it — the
   proposition and the four content areas do the selling; this is just
   mechanics, so it reads as a secondary, practical footnote. */
#homePage.dp-home-v2 .dp-home-how { margin-top: 28px; }

#homePage.dp-home-v2 .dp-home-how .dp-home-section-title {
  color: #7a807c;
  font-size: .88rem;
}

#homePage.dp-home-v2 .dp-home-how .dp-home-section-title::before,
#homePage.dp-home-v2 .dp-home-how .dp-home-section-title::after {
  background: #e2e5e3;
}

#homePage.dp-home-v2 .dp-home-how .dp-home-step {
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border-color: #e6e9e7;
  background: #fbfcfb;
}

#homePage.dp-home-v2 .dp-home-how .dp-home-step-icon {
  width: 34px;
  height: 34px;
  margin-top: 1px;
  color: #5c6460;
}

#homePage.dp-home-v2 .dp-home-how .dp-home-step-icon svg { stroke-width: 2; }

/* Plain label, not a filled badge — a 2-digit number in a small circle
   crowded the glyph illegibly. Muted text reads clearly at any size and
   still keeps this section visually quieter than the pillars above. Sits
   inline before the heading so each step is two lines, not three. */
#homePage.dp-home-v2 .dp-home-how .dp-home-step-no {
  display: inline;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: #9aa19c;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
}

#homePage.dp-home-v2 .dp-home-how .dp-home-step h3 { font-size: .98rem; }
#homePage.dp-home-v2 .dp-home-how .dp-home-step p { font-size: .88rem; }

#homePage.dp-home-v2 .dp-home-footer {
  padding-top: 20px;
  border-top: 1px solid #dce1de;
}

#homePage.dp-home-v2 .dp-home-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin-bottom: 14px;
  color: #777d7a;
}

#homePage.dp-home-v2 .dp-home-socials span,
#homePage.dp-home-v2 .dp-home-socials svg {
  width: 24px;
  height: 24px;
  display: block;
}

#homePage.dp-home-v2 .dp-home-copyright {
  color: #858a87;
  font-size: .78rem;
  line-height: 1.4;
}

/* Held at 2x2 above 520px too (8 August 2026, per Ken). The four-across
   variant that used to live here squeezed each card to roughly 135px inside
   the 480px shell, which broke "Career, Stats & Honours" onto three lines and
   left "Beyond Football" with barely two words per line. Two columns give
   each card about 225px — enough for the headings to sit on one or two lines
   and for the cards to read as squares rather than slivers. */
@media (min-width: 520px) {
  #homePage.dp-home-v2 .dp-home-shell { padding-top: 38px; }
  #homePage.dp-home-v2 .dp-home-pillars { gap: 12px; }
  #homePage.dp-home-v2 .dp-home-pillar { min-height: 172px; padding: 18px 16px 16px; }
}

/* Desktop content scale-up — 20 Aug 2026. Widening the shell alone (see
   above) only adds side gutters unless the content inside grows too; on
   a real MacBook that left a wider-but-still-small card with the same
   trailing blank space beneath the footer. This block enlarges type,
   icons, and spacing across the board once the shell has genuine room to
   grow (860px lines up with where the 58vw share above starts exceeding
   the 480px floor), so the page gains real vertical height as well as
   width and reads as filling the screen rather than floating in it.
   Everything below 860px — every phone and small/medium tablet — is
   completely unchanged. */
@media (min-width: 860px) {
  #homePage.dp-home-v2 .dp-home-shell { padding-top: 48px; padding-bottom: 36px; }
  #homePage.dp-home-v2 .dp-home-brandmark { width: 104px; height: 104px; border-radius: 24px; margin-bottom: 14px; }
  #homePage.dp-home-v2 .dp-home-wordmark { font-size: 2.95rem; margin-bottom: 10px; }
  #homePage.dp-home-v2 .dp-home-tagline { font-size: .96rem; max-width: 26rem; margin-bottom: 38px; }
  #homePage.dp-home-v2 .dp-home-hero h1 { font-size: 2.5rem; max-width: 560px; line-height: 1.2; }
  #homePage.dp-home-v2 .dp-home-rule { width: 88px; height: 5px; margin: 28px auto 24px; }
  #homePage.dp-home-v2 .dp-home-breadth { font-size: .98rem; max-width: 440px; margin-bottom: 38px; }
  #homePage.dp-home-v2 .dp-home-section-title { font-size: 1.18rem; margin: 40px 0 22px; }
  #homePage.dp-home-v2 .dp-home-pillars { gap: 18px; }
  #homePage.dp-home-v2 .dp-home-pillar { min-height: 208px; padding: 24px 22px 22px; border-radius: 20px; }
  #homePage.dp-home-v2 .dp-home-pillar-icon { width: 46px; height: 46px; margin-bottom: 12px; }
  #homePage.dp-home-v2 .dp-home-pillar h3 { font-size: 1.1rem; margin-bottom: 8px; }
  #homePage.dp-home-v2 .dp-home-pillar p { font-size: 1.02rem; }
  #homePage.dp-home-v2 .dp-home-cta { min-height: 66px; margin: 34px 0 14px; font-size: 1.32rem; border-radius: 16px; }
  #homePage.dp-home-v2 .dp-home-steps { gap: 14px; }
  #homePage.dp-home-v2 .dp-home-step { padding: 20px 20px; border-radius: 18px; }
  #homePage.dp-home-v2 .dp-home-step-icon { width: 46px; height: 46px; }
  #homePage.dp-home-v2 .dp-home-step h3 { font-size: 1.16rem; }
  #homePage.dp-home-v2 .dp-home-step p { font-size: 1.04rem; }
  #homePage.dp-home-v2 .dp-home-how { margin-top: 34px; }
  #homePage.dp-home-v2 .dp-home-how .dp-home-step h3 { font-size: 1.06rem; }
  #homePage.dp-home-v2 .dp-home-how .dp-home-step p { font-size: .96rem; }
  #homePage.dp-home-v2 .dp-home-footer { padding-top: 26px; }
}

@media (max-width: 350px) {
  #homePage.dp-home-v2 .dp-home-shell { padding-left: 15px; padding-right: 15px; }
  #homePage.dp-home-v2 .dp-home-pillars { grid-template-columns: 1fr; }
  #homePage.dp-home-v2 .dp-home-pillar:last-child:nth-child(odd) { grid-column: auto; }
  /* h1 font-size override removed 10 Aug 2026 — it was fixed at 2.05rem for
     the old shorter headline text and would have overridden the new
     clamp(1.6rem, 7.5vw, 2rem) above with a value too large for narrow
     phones, reintroducing the 4-line wrap this pass just fixed. The main
     clamp rule already produces a safe ~1.6rem at this breakpoint, tested
     live down to 300px. */
}

@media (prefers-reduced-motion: reduce) {
  #homePage.dp-home-v2 .dp-home-cta { transition: none; }
}