/**
 * TOPギフター · ランキング密度（最大10件 + もっと見る）
 * Load AFTER home-numeric-unify.css
 * 表示: 順位 · 名前 · 💎 のみ（アイコンなし）
 */

@media (max-width: 960px) {
  #liver-shell.mobile-tab-mode .home-gifter-list--compact .home-gifter-row,
  #lp-phone-demo .home-gifter-list--compact .home-gifter-row,
  .phone--demo .home-gifter-list--compact .home-gifter-row {
    display: grid !important;
    grid-template-columns: 1.1rem minmax(0, 1fr) auto !important;
    padding: 0.22rem 0.24rem;
    gap: 0.24rem;
    min-height: 0;
  }

  #liver-shell.mobile-tab-mode .home-gifter-list--compact .home-gifter-row__rank,
  #lp-phone-demo .home-gifter-list--compact .home-gifter-row__rank,
  .phone--demo .home-gifter-list--compact .home-gifter-row__rank {
    width: 1.1rem;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    text-align: center;
    color: rgba(255, 255, 255, 0.68) !important;
  }

  #liver-shell.mobile-tab-mode .home-gifter-list--compact .home-gifter-row__name,
  #lp-phone-demo .home-gifter-list--compact .home-gifter-row__name,
  .phone--demo .home-gifter-list--compact .home-gifter-row__name {
    font-size: 0.56rem !important;
    font-weight: 500 !important;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #liver-shell.mobile-tab-mode .home-gifter-list--compact .home-gifter-row__diamonds,
  #lp-phone-demo .home-gifter-list--compact .home-gifter-row__diamonds,
  .phone--demo .home-gifter-list--compact .home-gifter-row__diamonds {
    font-size: 0.5rem !important;
    font-weight: 400 !important;
    line-height: 1.2;
    color: rgba(147, 197, 253, 0.72) !important;
  }

  #liver-shell.mobile-tab-mode .home-gifter-more,
  #lp-phone-demo .home-gifter-more,
  .phone--demo .home-gifter-more {
    margin: 0.36rem 0 0;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
  }

  #liver-shell.mobile-tab-mode .home-gifter-more__link,
  #lp-phone-demo .home-gifter-more__link,
  .phone--demo .home-gifter-more__link {
    border: none;
    background: none;
    padding: 0;
    color: #93c5fd;
    font: inherit;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ── ギフト分析 TOP10 — ホーム TOPギフターと同一サイズ ── */
  #liver-shell.mobile-tab-mode .phone-rank-list--compact,
  #lp-phone-demo .phone-rank-list--compact,
  .phone--demo .phone-rank-list--compact {
    gap: 0.26rem !important;
  }

  #liver-shell.mobile-tab-mode .phone-rank-list--compact li,
  #lp-phone-demo .phone-rank-list--compact li,
  .phone--demo .phone-rank-list--compact li {
    display: grid !important;
    grid-template-columns: 1.1rem minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 0.22rem 0.24rem !important;
    gap: 0.24rem !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: 1.25 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  /* `display: grid !important` above also wins against the `hidden` attribute's own display:none, so every
     row a list meant to keep behind もっと見る was rendering anyway — the button sat under a list that was
     already complete, and the "20 / 24人を表示中" line contradicted what was on screen. The attribute has to
     be restored at a specificity that outranks the rule that broke it, which is why this is scoped the same
     way rather than written as a plain `li[hidden]`. */
  #liver-shell.mobile-tab-mode .phone-rank-list--compact li[hidden],
  #lp-phone-demo .phone-rank-list--compact li[hidden],
  .phone--demo .phone-rank-list--compact li[hidden] {
    display: none !important;
  }

  /* Direct-child (>) is load-bearing: a descendant `li span:first-child` also matches
     .mpc-who__name inside .mpc-who (the icon that used to sit before it was removed on
     2026-08-21), which shrank listener names to the 1.1rem rank width. Only the li's own
     first cell (the rank number) may take this rule. */
  #liver-shell.mobile-tab-mode .phone-rank-list--compact li > span:first-child,
  #lp-phone-demo .phone-rank-list--compact li > span:first-child,
  .phone--demo .phone-rank-list--compact li > span:first-child {
    width: 1.1rem;
    flex: none;
    text-align: center;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.68) !important;
  }

  #liver-shell.mobile-tab-mode .phone-rank-list--compact li > span:nth-child(2),
  #lp-phone-demo .phone-rank-list--compact li > span:nth-child(2),
  .phone--demo .phone-rank-list--compact li > span:nth-child(2) {
    font-size: 0.56rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.88) !important;
    font-family: inherit !important;
  }

  #liver-shell.mobile-tab-mode .phone-rank-list--compact li em,
  #lp-phone-demo .phone-rank-list--compact li em,
  .phone--demo .phone-rank-list--compact li em {
    font-size: 0.5rem !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    margin-left: 0 !important;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    color: rgba(147, 197, 253, 0.72) !important;
    white-space: nowrap;
  }

  #liver-shell.mobile-tab-mode .phone-rank-more,
  #lp-phone-demo .phone-rank-more,
  .phone--demo .phone-rank-more {
    display: block;
    width: 100%;
    margin: 0.28rem 0 0.35rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.58rem;
    cursor: pointer;
    text-align: center;
  }

  #liver-shell.mobile-tab-mode .phone-rank-more[hidden],
  #lp-phone-demo .phone-rank-more[hidden],
  .phone--demo .phone-rank-more[hidden] {
    display: none !important;
  }

  /* TOPギフター名 — 左寄せ（一覧 · 通算。KPIカードの名前は他指標と同様中央） */
  #liver-shell.mobile-tab-mode .home-gifter-row__name,
  #lp-phone-demo .home-gifter-row__name,
  .phone--demo .home-gifter-row__name,
  #liver-shell.mobile-tab-mode .phone-rank-list li > span:nth-child(2),
  #lp-phone-demo .phone-rank-list li > span:nth-child(2),
  .phone--demo .phone-rank-list li > span:nth-child(2) {
    text-align: left !important;
    justify-self: start !important;
  }

  #liver-shell.mobile-tab-mode .cr-record__ledger-name,
  #lp-phone-demo .cr-record__ledger-name,
  .phone--demo .cr-record__ledger-name {
    text-align: left !important;
  }

  /* KPIカード — 値・サブは中央（TOPギフター名 · 💎 含む） */
  #liver-shell.mobile-tab-mode .home-stat-card__value,
  #liver-shell.mobile-tab-mode .home-stat-card__sub,
  #lp-phone-demo .home-stat-card__value,
  #lp-phone-demo .home-stat-card__sub,
  .phone--demo .home-stat-card__value,
  .phone--demo .home-stat-card__sub {
    text-align: center !important;
  }
}

/* [hidden] は必ず効く — 恒久ルール。
 *
 * FOUR times in one day a `hidden` element stayed on screen because a `display` rule in some other stylesheet
 * outranked the attribute's own display:none: the contributor rows behind もっと見る, the gift screen's own
 * もっと見る, the VS 閉じる, and the LP demo's five gift period lists rendering all at once. Each was found by
 * a person looking at the screen, not by any test, and each was fixed one selector at a time — which is why it
 * kept coming back.
 *
 * `hidden` is not a styling hint. It is the DOM saying this element is not to be perceived, and every piece of
 * JavaScript in this product that shows and hides things sets it. So it is restored here ONCE, for the element
 * types that carry a display rule strong enough to beat it, with the specificity to win.
 *
 * If something must be hidden but still occupy space, that is a class — not a fight with [hidden]. */
[hidden],
#liver-shell [hidden],
#lp-phone-demo [hidden],
.phone--demo [hidden],
#liver-shell.mobile-tab-mode [hidden] {
  display: none !important;
}

/* 期間チップのタップ領域 — 実機375pxで18pxしかなかった（2026-08-17 実測）。
 *
 * 18px is roughly a third of a fingertip. These chips are the primary control on three screens, and a
 * mis-tap here does not just fail — it silently loads a DIFFERENT period, so the reader ends up looking at
 * numbers for a window they did not choose and has no reason to doubt them.
 *
 * Height comes from padding, so the label and the row rhythm do not move; only the touchable area grows. */
.phone-period-tab,
.phone-trend-tab,
.mpc-period {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 小さすぎるタップ領域の一括是正（本番実機375pxで実測 2026-08-17）。
 * 16〜18px は指先の3分の1程度で、押し間違いは無反応ではなく「別のものが開く」形で現れる。 */
/* !important because several later stylesheets set their own height on these; without it the rule loses and
   the control stays 16px while this file claims otherwise. */
#liver-shell .phone-rank-more,
#liver-shell .home-block__action,
#liver-shell .home-gifter-more__link,
#liver-shell .phone-battle-history-head__more,
#liver-shell .mpc-more,
#liver-shell .profile-league-badge,
#liver-shell .phone-mypage-quick__btn,
#lp-phone-demo .phone-rank-more,
#lp-phone-demo .home-block__action,
#lp-phone-demo .home-gifter-more__link,
#lp-phone-demo .phone-battle-history-head__more,
#lp-phone-demo .mpc-more,
#lp-phone-demo .profile-league-badge,
#lp-phone-demo .phone-mypage-quick__btn,
.phone--demo .home-block__action,
.phone--demo .phone-rank-more,
.phone--demo .profile-league-badge {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}