/* The wider homepage is scoped to the hub. Puzzle and recap layouts stay compact. */
body[data-screen="hub"] { background: #10114e; }
body[data-screen="hub"] .wrap { width: min(1024px, 100%); padding: 0 36px calc(26px + env(safe-area-inset-bottom)); }
.hub-home { container-type: inline-size; --orange: #d89126; --peri: #c6cdec; }
.hub-home *, .hub-home *::before, .hub-home *::after { text-transform: none; }
.hub-home [hidden] { display: none !important; }
.hub-home .hub-header { align-items: center; gap: 15px; padding: calc(25px + env(safe-area-inset-top)) 0 20px; margin: 0; border-bottom: 1px solid #ffffff16; }
.hub-header .wordmark .name { font: 500 26px/1.1 var(--serif); letter-spacing: -.5px; }
.hub-header .wordmark .name em { color: #e4a33f; }
.hub-header-actions { display: flex; align-items: center; gap: 16px; }
.hub-help-toggle { border: 0; background: none; color: #cbd0ec; padding: 8px 0; font-size: 12px; line-height: 1.4; min-height: 44px; }
.hub-header .streak { gap: 7px; padding: 9px 12px; min-height: 40px; font-size: 12px; font-weight: 500; color: #f0c680; background: #ffffff08; border-color: #ffffff15; white-space: nowrap; }
.hub-header .streak svg { width: 14px; height: 16px; }
.hub-help { border: 1px solid #ffffff26; border-radius: 9px; padding: 17px 20px; background: #1c1d59; font-size: 13px; line-height: 1.7; color: #d0d6ee; margin: 18px 0 0; }
.hub-help h2 { margin: 0 0 8px; color: #fff; font: 500 25px/1.1 var(--serif); }
.hub-help p { margin: 0; }
.hub-intro { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 30px 0 28px; }
.hub-date { margin: 0 0 10px; color: #bec6eb; font-size: 12px; line-height: 1.4; }
.hub-intro h1 { font: 500 44px/1.06 var(--serif); margin: 0 0 11px; letter-spacing: -.9px; color: #fff; }
.hub-intro h1 em { color: #e4a33f; font-weight: 500; }
.hub-description { margin: 0; color: #c8ceeb; font-size: 13px; line-height: 1.6; max-width: 455px; }
.hub-intro-action { flex-shrink: 0; text-align: center; }
.hub-intro-action > p { margin: 9px 0 0; font-size: 11px; color: #bdc4e8; }
.hub-home .btn { font-size: 13px; line-height: 1.4; min-height: 47px; padding: 12px 18px; border-radius: 8px; font-weight: 600; }
.hub-home .btn-primary { background: #d89126; color: #12134c; }
.hub-home .btn-primary:hover { background: #e1a03e; filter: none; }
.hub-layout { display: grid; grid-template-columns: minmax(0, 1fr) 258px; gap: 22px; align-items: start; }
.hub-layout > *, .hub-intro > * { min-width: 0; }
.hub-play-panel { background: #faf9f5; color: #15164f; border-radius: 14px; padding: 23px; position: relative; border-top: 3px solid transparent; }
.hub-play-panel::before { content: ''; position: absolute; top: -3px; left: 15px; right: 15px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #d8912600, #d89126 35%, #d89126 65%, #d8912600); pointer-events: none; }
.hub-panel-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 7px; }
.hub-panel-heading h2 { font: 600 28px/1.1 var(--serif); margin: 0; letter-spacing: -.4px; }
.hub-panel-heading > span { font-size: 12px; color: #656478; }
.hub-five-track { display: flex; gap: 5px; margin: 14px 0 18px; }
.hub-five-track span { height: 4px; flex: 1; border-radius: 4px; background: #e3e2e9; }
.hub-five-track span.filled { background: #b9791c; }
.hub-games { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-games .tile { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 15px 12px; border: 1px solid #e3e2e9; border-radius: 9px; background: #fff; color: #15164f; box-shadow: none; min-height: 0; }
.hub-games .tile:last-child { grid-column: 1 / -1; }
.hub-games .tile:hover { border-color: #b1afd0; background: #f1effa; }
.hub-games .tile-icon { color: #555693; width: 36px; height: 36px; background: none; border: 0; border-radius: 0; }
.hub-games .tile-icon svg { width: 30px; height: 30px; }
.hub-games .tile h3 { font: 600 23px/1.05 var(--serif); margin: 0 0 5px; letter-spacing: -.3px; color: #15164f; }
.hub-games .tile p { margin: 0; color: #656478; font-size: 11px; line-height: 1.4; }
.hub-games .status { grid-column: 2; padding: 0; min-width: 0; text-align: left; background: none; border: 0; font-size: 11px; font-weight: 600; color: #434887; line-height: 1.4; letter-spacing: normal; }
.hub-games .status.done { display: flex; align-items: center; gap: 3px; color: #35735c; }
.hub-games .status svg { width: 11px; height: 11px; }
.hub-games .status svg path { stroke: currentColor; }
.hub-games .tile.done .tile-icon { color: #548574; }
.hub-home .hub-leaderboard { margin: 20px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid #e3e2e9; background: none; border-radius: 0; color: #15164f; }
.hub-leaderboard h2 { margin: 0 0 9px; font: 600 23px/1.1 var(--serif); letter-spacing: -.3px; }
.hub-leaderboard .lb-sub { color: #656478; font-size: 12px; line-height: 1.55; }
.hub-leaderboard .lb-progress { font-size: 11px; color: #555779; }
.hub-leaderboard .lb-link { color: #292c75; font-size: 12px; min-height: 44px; margin-top: 12px; }
.hub-leaderboard .lb-link:hover { color: #12134c; }
.hub-leaderboard .lb-label, .hub-leaderboard .lb-note, .hub-leaderboard .lb-meta { color: #656478; font-size: 11px; line-height: 1.5; }
.hub-leaderboard .name-row { flex-wrap: wrap; }
.hub-leaderboard .name-row input { width: 120px; min-width: 80px; min-height: 44px; padding: 10px 12px; background: #fff; border: 1px solid #b7b5cc; border-radius: 7px; color: #15164f; font-size: 16px; }
.hub-leaderboard .name-row input::placeholder { color: #747286; }
.hub-leaderboard .name-row .btn { min-height: 44px; padding: 10px 13px; font-size: 12px; }
.hub-leaderboard .btn-ghost { min-height: 44px; border: 1px solid #b4b3c9; background: transparent; color: #15164f; font-size: 12px; }
.hub-leaderboard .lb-err { color: #a42d24; font-size: 12px; }
.hub-leaderboard .lb-tabs { background: #eae8f0; margin: 4px 0; flex-wrap: wrap; }
.hub-leaderboard .lb-tabs .tab { color: #55536f; min-height: 44px; }
.hub-leaderboard .lb-tabs .tab.on { color: #fff; background: #303470; }
.hub-leaderboard .lb-row { grid-template-columns: 22px minmax(0, 1fr) auto auto; font-size: 12px; padding: 9px 7px; gap: 7px; }
.hub-leaderboard .lb-row.you { background: #edebf6; }
.hub-leaderboard .lb-row .r, .hub-leaderboard .lb-row .t { color: #656478; font-size: 11px; }
.hub-leaderboard .lb-row .n { white-space: normal; overflow-wrap: anywhere; }
.hub-home.is-complete .hub-leaderboard { margin: 0 0 18px; padding: 0 0 16px; border-top: 0; border-bottom: 1px solid #e3e2e9; }
.hub-play-panel :is(button, input, a):focus-visible { outline: 2px solid #6864a8; outline-offset: 3px; }
.hub-side { display: grid; gap: 19px; min-width: 0; }
.hub-home .hub-rhythm { padding: 20px; margin: 0; background: #1c1d59; border-radius: 12px; border: 1px solid #ffffff1b; }
.hub-rhythm h2 { font: 500 25px/1.1 var(--serif); margin: 0 0 7px; }
.hub-rhythm .progress-copy { font-size: 11px; color: #c6ccec; line-height: 1.5; }
.hub-rhythm .activity-heading { margin-top: 19px; font-size: 11px; font-weight: 500; gap: 4px 7px; }
.hub-rhythm .activity-heading span:last-child { font-size: 10px; }
.hub-rhythm .activity-strip { gap: 5px; margin: 12px 0 9px; }
.hub-rhythm .activity-day { min-width: 0; font-size: 10px; }
.hub-rhythm .activity-mark { width: 23px; height: 23px; font-size: 11px; }
.hub-rhythm .activity-day.complete .activity-mark { background: #e0a141; color: #171750; border-color: transparent; }
.hub-rhythm .activity-day.complete .activity-mark path { stroke: currentColor; }
.hub-rhythm .activity-day.partial .activity-mark { border-color: #e0a141; color: #e0a141; background: transparent; }
.hub-rhythm .activity-day.today .activity-mark { outline-width: 1px; outline-offset: 2px; }
.hub-rhythm .activity-key { gap: 5px 10px; font-size: 10px; color: #bec5e8; }
.hub-rhythm .progress-heading { font-size: 12px; }
.hub-rhythm .progress-heading span:last-child { font-size: 11px; }
.hub-rhythm .milestone-earned { font-size: 12px; line-height: 1.4; }
.hub-rhythm .streak-progress { background: #ffffff14; }
.hub-rhythm .streak-progress::-webkit-progress-value { background: #dfa044; }
.hub-rhythm .streak-progress::-moz-progress-bar { background: #dfa044; }
.hub-home .hub-rhythm .achievements { padding: 16px 0 0; border: 0; border-top: 1px solid #ffffff1b; margin: 17px 0 0; background: none; border-radius: 0; }
.hub-rhythm .progress-kicker { color: #f1cb87; font-size: 12px; letter-spacing: normal; text-transform: none; }
.hub-rhythm .achievement-list li { margin-top: 10px; gap: 8px; }
.hub-rhythm .achievement-list h3 { font: 500 13px/1.5 var(--sans); }
.hub-rhythm .achievement-list p { font-size: 11px; line-height: 1.5; color: #c6ccec; }
.hub-rhythm .achievement-mark { width: 22px; height: 22px; }
.hub-rhythm .progress-note { margin-top: 12px; color: #b4bce2; font-size: 10px; line-height: 1.5; }
.hub-rhythm .achievement-more summary { font-size: 11px; }
.hub-achievement-intro { border-top: 1px solid #ffffff1b; padding-top: 16px; margin-top: 17px; }
.hub-achievement-intro h3 { margin: 0 0 6px; font: 500 12px/1.5 var(--sans); color: #f1cb87; }
.hub-return { padding: 0 4px; }
.hub-return > h2 { margin: 0 0 7px; font: 500 24px/1.1 var(--serif); }
.hub-return > p { color: #c0c7e9; margin: 0 0 11px; font-size: 12px; line-height: 1.6; }
.hub-return .remind { padding: 14px 12px; margin-top: 14px; gap: 12px; }
.hub-return .rm-kicker { letter-spacing: normal; text-transform: none; font-size: 11px; }
.hub-return .rm-line { font-size: 19px; }
.hub-return .rm-sub { color: #bec5e8; font-size: 11px; line-height: 1.5; }
.hub-return .chips { gap: 5px; flex-wrap: wrap; }
.hub-return .chip { font-size: 11px; padding: 8px 5px; border-radius: 7px; }
.hub-return .chip small { font-size: 10px; color: #c5cbea; white-space: nowrap; }
.hub-return .btn { font-size: 12px; padding: 10px 12px; }
.hub-footer { margin-top: 27px; padding-top: 20px; border-top: 1px solid #ffffff1b; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.hub-footer h2 { margin: 0 0 4px; font: 500 22px/1.1 var(--serif); }
.hub-footer p { margin: 0; color: #bfc6e8; font-size: 11px; line-height: 1.5; }
.hub-footer a { color: #e3ba77; font-size: 12px; white-space: nowrap; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.hub-footer a:hover { text-decoration: underline; }
.hub-scholar { display: block; margin-top: 14px; padding: 5px 0; color: #bac2e7; font-size: 11px; line-height: 1.5; text-decoration: none; }
.hub-scholar:hover { text-decoration: underline; }
.hub-mobile-help { display: none; }
.hub-home .hub-help-toggle:focus-visible, .hub-home .wordmark:focus-visible, .hub-home .hub-footer a:focus-visible, .hub-scholar:focus-visible { outline: 2px solid #c6cdec; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 790px) { body[data-screen="hub"] .wrap { padding-right: 24px; padding-left: 24px; } }
@media (max-width: 620px) { body[data-screen="hub"] .wrap { padding-right: 20px; padding-left: 20px; } }
@media (max-width: 340px) { body[data-screen="hub"] .wrap { padding-right: 15px; padding-left: 15px; } }
@container (max-width: 790px) {
  .hub-layout { grid-template-columns: minmax(0, 1fr) 225px; gap: 16px; }
  .hub-play-panel { padding: 19px; }
  .hub-games { grid-template-columns: 1fr; }
  .hub-games .tile { grid-template-columns: 35px minmax(0, 1fr) auto; padding: 13px 11px; gap: 9px; }
  .hub-games .status { grid-column: 3; font-size: 11px; }
  .hub-intro h1 { font-size: 39px; }
  .hub-home .hub-rhythm { padding: 16px; }
  .hub-rhythm .activity-strip { gap: 3px; }
}
@container (max-width: 620px) {
  .hub-home .hub-header { align-items: flex-start; padding-top: 23px; padding-bottom: 17px; }
  .hub-header .wordmark .name { font-size: 24px; }
  .hub-header-actions { gap: 4px; }
  .hub-header-actions .hub-help-toggle { display: none; }
  .hub-mobile-help { display: block; }
  .hub-header .streak { font-size: 11px; padding: 7px 9px; }
  .hub-intro { display: block; padding: 25px 0; }
  .hub-intro h1 { font-size: 40px; }
  .hub-intro-action { margin-top: 19px; }
  .hub-intro-action .btn { width: 100%; }
  .hub-layout { grid-template-columns: 1fr; gap: 22px; }
  .hub-games .tile h3 { font-size: 22px; }
  .hub-side { gap: 22px; }
  .hub-rhythm .activity-mark { width: 29px; height: 29px; }
  .hub-rhythm .activity-strip { gap: 6px; }
  .hub-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@container (max-width: 340px) {
  .hub-header .wordmark .name { font-size: 21px; }
  .hub-intro h1 { font-size: 36px; }
  .hub-play-panel { padding: 15px; }
  .hub-games .tile { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 7px; }
  .hub-games .tile-icon { width: 28px; }
  .hub-header .streak { font-size: 10px; padding: 7px; gap: 4px; }
}

/* Leaderboard prominence on the cream home panel: light versions of the podium, standing and button. */
.hub-leaderboard .lb-title-row h2 { margin: 0; }
.hub-leaderboard .lb-count { color: #656478; font-size: 12px; }
.hub-leaderboard .podium-row { background: #fff; border-color: #e3e2e9; color: #15164f; }
.hub-leaderboard .podium-row.place-1 { background: #fbf3e2; border-color: #e7c98a; }
.hub-leaderboard .podium-row.you { box-shadow: inset 0 0 0 1.5px #6864a8; }
.hub-leaderboard .podium-row .pn em { color: #555693; }
.hub-leaderboard .podium-row .ps small { color: #656478; }
.hub-leaderboard .medal { background: #e3e2e9; color: #15164f; }
.hub-leaderboard .place-1 .medal { background: #d89126; color: #fff; }
.hub-leaderboard .place-2 .medal { background: #c6cdec; color: #15164f; }
.hub-leaderboard .place-3 .medal { background: #a8651a; color: #fff; }
.hub-leaderboard .lb-podium.is-loading li { background: #eceaf2; }
.hub-leaderboard .lb-empty { background: #fff; border: 1px solid #e3e2e9; color: #555779; font-size: 12px; }
.hub-leaderboard .lb-standing { background: #eeecf8; border-color: #cfcce6; }
.hub-leaderboard .lb-standing.top { background: #fbf3e2; border-color: #e7c98a; }
.hub-leaderboard .lb-standing .st-title { color: #15164f; }
.hub-leaderboard .lb-standing .st-detail { color: #555779; font-size: 12px; }
.hub-leaderboard .lb-joined b { color: #15164f; }
.hub-leaderboard .lb-joined .note-link { color: #3a3f86; }
.hub-home .hub-leaderboard .lb-cta { background: #292c75; color: #fff; border: 0; font-size: 13px; min-height: 46px; }
.hub-home .hub-leaderboard .lb-cta:hover { background: #1c1f5e; }
.hub-intro-action .lb-teaser { margin: 10px 0 0; font-size: 11px; color: #d6dbf3; }
.hub-intro-action .lb-teaser b { color: #fff; }