/* PICK hubs: one clear starting action, secondary paths, then community. */
.screen-home {
  --hub-accent: #f2a2ce;
  --hub-rgb: 242,162,206;
  --hub-surface: #352238;
  padding-top: 1.2rem;
}
.screen-best-home { --hub-accent: #edc67d; --hub-rgb: 237,198,125; --hub-surface: #302837; }
.screen-strongest-home { --hub-accent: #ffad93; --hub-rgb: 255,173,147; --hub-surface: #34222d; }
.screen-home .home-intro { display: flex; flex-direction: column; margin-bottom: 1.15rem; }
.screen-home .home-intro h1 { order: 0; font-size: clamp(1.9rem,8.4vw,2.75rem); line-height: 1.08; letter-spacing: -.035em; }
.screen-home .home-intro h1 em { color: var(--hub-accent); }
.screen-home .home-intro>.eyebrow { order: 1; margin: .7rem 0 0; font-size: .6875rem; font-weight: 600; letter-spacing: .025em; color: var(--text-secondary); text-transform: none; }
.screen-home .home-intro>p:not(.eyebrow) { order: 2; margin: .6rem 0 0; max-width: 33ch; font-size: .875rem; line-height: 1.5; color: var(--text-secondary); }
.screen-home .filter-block { margin-bottom: 1rem; }
.screen-home .filter-label { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; color: var(--text-secondary); }
.screen-home .series-filter { border-radius: .75rem; padding: .25rem; background: #121019; }
.screen-home .series-filter button { border-radius: .5rem; font-size: .75rem; }
.screen-home .series-filter button.active { color: #f9f4ff; background: #453452; box-shadow: none; }
.screen-home .mode-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.screen-home .mode-card {
  grid-template-columns: minmax(0,1fr) auto;
  align-content: start;
  align-items: start;
  min-height: 8.25rem;
  gap: .65rem .4rem;
  padding: .9rem;
  border-radius: 1rem;
  border-color: #37303f;
  background: #19151f;
  box-shadow: none;
}
.screen-home .mode-icon { width: 1.75rem; height: 1.75rem; border-radius: 0; background: none; color: var(--hub-accent); font-size: 1.15rem; line-height: 1; }
.screen-home .mode-icon svg { display: block; width: 1.5rem; height: 1.5rem; }
.screen-home .mode-icon.mode-vs { font-size: .75rem; }
.screen-home .mode-copy { grid-column: 1/-1; gap: .3rem; }
.screen-home .mode-copy strong { font-size: .9375rem; line-height: 1.3; font-weight: 750; }
.screen-home .mode-copy small { font-size: .75rem; line-height: 1.45; font-weight: 450; color: #bdb3c9; }
.screen-home .mode-arrow { grid-column: 2; grid-row: 1; align-self: center; color: #a899b7; font-size: 1rem; }
.screen-home .mode-card:first-child {
  grid-column: 1/-1;
  grid-template-columns: 2.75rem minmax(0,1fr) auto;
  align-items: center;
  min-height: 5.75rem;
  padding: 1rem;
  border-color: rgba(var(--hub-rgb),.42);
  background: var(--hub-surface);
}
.screen-home .mode-card:first-child .mode-icon { width: 2.75rem; height: 2.75rem; border-radius: .8rem; background: rgba(var(--hub-rgb),.1); }
.screen-home .mode-card:first-child .mode-copy { grid-column: 2; }
.screen-home .mode-card:first-child .mode-copy strong { font-size: 1.0625rem; }
.screen-home .mode-card:first-child .mode-arrow { grid-column: 3; color: var(--hub-accent); }
.screen-home .mode-card[data-mode="type"],
.screen-home .mode-card[data-strongest-mode="ranking"],
.screen-home .global-ranking-link {
  grid-column: 1/-1;
  grid-template-columns: 1.75rem minmax(0,1fr) auto;
  align-items: center;
  min-height: 4rem;
  padding: .85rem .25rem;
  border: 0;
  border-top: 1px solid #352e3d;
  border-radius: 0;
  background: none;
}
.screen-home .mode-card[data-mode="type"] .mode-copy,
.screen-home .mode-card[data-strongest-mode="ranking"] .mode-copy,
.screen-home .global-ranking-link .mode-copy { grid-column: 2; }
.screen-home .mode-card[data-mode="type"] .mode-arrow,
.screen-home .mode-card[data-strongest-mode="ranking"] .mode-arrow,
.screen-home .global-ranking-link .mode-arrow { grid-column: 3; }
.screen-home .global-ranking-link .mode-icon { color: #ba9ce3; }
.screen-home .home-preferences { padding-top: .8rem; gap: .6rem; }
.screen-home .sound-toggle { min-height: 2.75rem; border-radius: .6rem; font-size: .75rem; }
.screen-home .privacy-note { max-width: 36ch; padding: 0; font-size: .75rem; line-height: 1.5; }
.screen-home .best-rating,.screen-home .power-style-card { margin-top: 1.1rem; padding: 1rem 0 0; border: 0; border-top: 1px solid #3d3545; border-radius: 0; background: none; }
.screen-home .best-rating-head h2,.screen-home .power-style-card h2 { font-size: 1.125rem; font-weight: 700; }
.screen-home .best-rating-head .eyebrow,.screen-home .power-style-card>.eyebrow { display: none; }
.screen-home .best-rating-head>span { font-size: .75rem; font-weight: 500; }
.screen-home .best-rating-empty { padding: .85rem 0; background: none; }
.screen-home .best-rating-empty span,.screen-home .power-style-card p { font-size: .8125rem; line-height: 1.5; }
.screen-home .best-rating-leader { background: #2b2330; border-radius: .75rem; }
.screen-home .best-rating li { min-height: 2rem; align-items: center; font-size: .8125rem; }
.screen-home .power-style-tags span { font-size: .6875rem; font-weight: 650; letter-spacing: 0; }

/* The category strip belongs to the shared PICK shell, not to PROFILE. */
.pick-switch { padding: .3rem; gap: .3rem; background: #121019; border-color: #38303f; }
.pick-switch button { min-height: 2.75rem; font-size: .75rem; letter-spacing: .035em; }
.pick-switch button.active::after { display: none; }
.pick-switch [data-pick-section="waifu"].active { color: #ffd1eb; background: #38263b; border-color: #80516f; }
.pick-switch [data-pick-section="best"].active { color: #f8dcaa; background: #322b25; border-color: #856c42; }
.pick-switch [data-pick-section="strongest"].active { color: #ffcdba; background: #38272a; border-color: #945d50; }

/* Global rankings: a compact introduction and a connected, readable list. */
.screen-global-ranking { gap: .85rem; padding-top: 1.3rem; }
.screen-global-ranking>.result-heading { margin-bottom: .35rem; }
.screen-global-ranking>.result-heading>.eyebrow { display: none; }
.screen-global-ranking h1 { font-size: clamp(1.75rem,7.8vw,2.5rem); line-height: 1.1; letter-spacing: -.035em; }
.screen-global-ranking h1 em { color: #cfb2f5; }
.screen-global-ranking>.result-heading>p:last-child { margin: .75rem 0 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.5; }
.screen-global-ranking .global-mode-tabs { padding: .25rem; gap: .25rem; background: #121019; border: 1px solid #38303f; border-radius: .75rem; }
.screen-global-ranking .global-mode-tabs button { border-radius: .5rem; min-height: 2.75rem; border-color: transparent; font-size: .75rem; box-shadow: none; }
.screen-global-ranking [data-global-mode="waifu"].active { color: #ffd1eb; background: #38263b; }
.screen-global-ranking [data-global-mode="best"].active { color: #f8dcaa; background: #322b25; }
.screen-global-ranking [data-global-mode="strongest"].active { color: #ffcdba; background: #38272a; }
.screen-global-ranking .ranking-filter { margin: 0 0 .4rem; background: transparent; padding: 0; border: 0; }
.screen-global-ranking .ranking-filter button { font-size: .75rem; border-radius: .5rem; }
.screen-global-ranking .ranking-filter button.active { background: #40304f; }
.global-ranking-list { gap: 0; }
.global-ranking-row { min-width: 0; grid-template-columns: 1.65rem 3.2rem minmax(0,1fr) auto; gap: .6rem; padding: .85rem .15rem; border: 0; border-bottom: 1px solid #342c3d; border-radius: 0; background: none; }
.global-ranking-row:first-child { border: 0; border-bottom: 1px solid #66503e; border-radius: 0; background: none; }
.global-ranking-row:last-child { border-bottom: 0; }
.global-ranking-row img { width: 3.2rem; height: 4rem; border-radius: .5rem; }
.global-character-copy>strong { font-size: .875rem; line-height: 1.35; font-weight: 750; }
.global-character-copy small { font-size: .75rem; line-height: 1.4; }
.global-character-copy i { font-size: .625rem; line-height: 1.4; padding: .15rem .35rem; }
.global-score-copy { max-width: 7.6rem; gap: .3rem; }
.global-score-copy strong { font-size: .8125rem; font-weight: 700; }
.global-score-copy span { font-size: .6875rem; line-height: 1.4; color: #b8b0c4; }
.global-ranking-status { margin: .6rem 0; padding: 1.15rem; border-style: solid; border-radius: .75rem; font-size: .875rem; line-height: 1.5; text-align: left; background: #19141f; }

@media (hover:hover) {
  .screen-home .mode-card:not(:disabled):hover { background: #241c2d; border-color: rgba(var(--hub-rgb),.6); }
  .screen-home .mode-card:first-child:not(:disabled):hover { background: var(--hub-surface); }
  .screen-home .global-ranking-link:not(:disabled):hover { background: none; }
}
@media (max-width:23rem) {
  .screen-home { padding-top: 1rem; }
  .screen-home .mode-grid { gap: .5rem; }
  .screen-home .mode-card { padding: .75rem; }
  .screen-home .mode-card:first-child { padding: .85rem; gap: .65rem; }
  .screen-home .mode-copy strong { font-size: .875rem; }
  .screen-home .mode-card:first-child .mode-copy strong { font-size: 1rem; }
  .pick-switch button,.screen-global-ranking .global-mode-tabs button { font-size: .6875rem; }
  .global-ranking-row { grid-template-columns: 1.4rem 3rem minmax(0,1fr); gap: .25rem .55rem; }
  .global-ranking-row img { width: 3rem; height: 3.8rem; grid-row: span 2; }
  .global-rank { align-self: start; margin-top: .7rem; grid-row: span 2; }
  .global-score-copy { grid-column: 3; grid-template-columns: minmax(0,1fr); gap: .15rem; justify-items: start; text-align: left; max-width: none; padding: .1rem 0 0; }
  .global-score-copy span { max-width: none; }
}
@media (prefers-reduced-motion:reduce) {
  .screen-home .mode-card,.pick-switch button,.screen-global-ranking button { transition: none; }
  .screen-home .mode-card:active { transform: none; }
}