/* Phone layout. Loaded after every other stylesheet so it can adjust the feature modules too. */

/* Phone-only controls stay hidden on wider screens. */
.bottomnav, .moresheet, .moresheet-backdrop, .filters-toggle { display: none; }

/* Sticky columns keep the player name visible while a wide table scrolls sideways. */
.tablewrap th.stick, .tablewrap td.stick { position: sticky; left: 0; z-index: 1; background: var(--surface-1); }
.match-detail .tablewrap th.stick, .match-detail .tablewrap td.stick { background: var(--surface-2); }
.tablewrap td.stick { box-shadow: 1px 0 0 var(--line); }

@media (hover: none) {
  .pcard:hover { transform: none; }
  tbody tr:hover { background: none; }
}

@media (max-width: 720px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .wrap { padding: 0 12px 40px; }

  /* Top bar: one row (logo · search · theme); the platform picker appears while searching. */
  .topbar .wrap { flex-wrap: nowrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .logo { font-size: 20px; }
  .search { order: 0; flex: 1; flex-basis: auto; min-width: 0; }
  .search input { min-height: 40px; font-size: 16px; } /* 16px stops iOS zooming into the field */
  .search select { display: none; }
  .search:focus-within select { display: block; min-height: 40px; max-width: 46%; }
  .iconbtn { min-width: 40px; min-height: 40px; }

  /* Club header: full on Overview, a slim bar on every other tab. */
  .hero { margin-top: 10px; padding: 14px; gap: 12px; border-radius: 16px; grid-template-columns: auto 1fr; }
  .hero h1 { font-size: 28px; }
  .crest { width: 48px; height: 48px; font-size: 18px; border-radius: 12px; border-width: 2px; }
  .hero .meta { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  .hero .meta::-webkit-scrollbar, .form::-webkit-scrollbar { display: none; }
  .form { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .form span { flex: none; }
  .hero-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
  .hero-actions .btn { flex: 1; min-height: 42px; }
  .hero-actions .sync { flex-basis: 100%; }
  .hero.slim { grid-template-columns: auto 1fr auto; padding: 10px 12px; align-items: center; }
  .hero.slim h1 { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero.slim .crest { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
  .hero.slim .meta, .hero.slim .form, .hero.slim .sync, .hero.slim [data-action="track"] { display: none; }
  .hero.slim .hero-actions { grid-column: auto; flex-wrap: nowrap; }
  .hero.slim .hero-actions .btn { flex: none; min-height: 40px; padding: 8px 12px; }

  /* Tabs move to the bottom bar; filters fold into one button. */
  .toolbar { position: static; padding-top: 8px; }
  .toolbar .tabs { display: none; }
  .filters-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px;
    padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); font-size: 13px; text-align: left; cursor: pointer; }
  .filters-toggle span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .filters-toggle span:last-child { flex: none; white-space: nowrap; font-size: 12px; }
  .filters { display: none; }
  .filters.open { display: flex; padding: 10px 0 2px; }
  .filters .seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filters .seg button { flex: 1 0 auto; }

  .bottomnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: color-mix(in srgb, var(--surface-1) 94%, transparent); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .bottomnav button { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer; min-width: 0; padding: 0 2px; }
  .bottomnav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottomnav button.active { color: var(--accent); }
  .bottomnav svg { width: 22px; height: 22px; }
  .moresheet.open { display: block; position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 59;
    background: var(--surface-1); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 14px 12px 16px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
  .moresheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .moresheet-grid button { min-height: 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-weight: 600; cursor: pointer; }
  .moresheet-grid button.active { border-color: var(--accent); color: var(--accent); }
  .moresheet-backdrop { display: block; position: fixed; inset: 0; z-index: 58; background: rgba(0, 0, 0, .35); }

  /* Comfortable touch targets. */
  .seg button { min-height: 38px; padding: 6px 12px; font-size: 13px; }
  .btn { min-height: 40px; }
  .filters select, .chip { min-height: 36px; }
  .match { padding: 12px; }
  .weights input[type=range] { height: 28px; }

  /* Readable text sizes. */
  .small, .legend, .card .sub, .insight .e, .tag { font-size: 12.5px; }
  .sup-legend, .pill, .fchip, .bchip { font-size: 12px; }
  th { font-size: 11px; }

  /* Denser cards and shorter charts. */
  .card { padding: 14px; border-radius: 12px; }
  .grid { gap: 10px; }
  .section-title { font-size: 20px; margin: 22px 0 8px; }
  .kpi .value { font-size: 28px; }
  .chart { height: 220px; } .chart.tall { height: 250px; } .chart.short { height: 180px; }

  /* Tables: hide the least important columns, keep the rest scrollable with sticky names. */
  [data-hide-sm] { display: none; }
  th, td { padding: 8px 8px; }
  .cmp { font-size: 12.5px; gap: 6px; }

  /* Feature modules: sticky names in the carry table, bigger share and trophy buttons. */
  .carry-table th:first-child, .carry-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-1); box-shadow: 1px 0 0 var(--line); }
  .share-btn, .trophies-cent { min-height: 36px; }
  .share-btn.icon-only { min-width: 36px; }

  .player-head h2 { font-size: 28px; }
  .toast { bottom: calc(74px + env(safe-area-inset-bottom)); max-width: calc(100% - 24px); }
}