/* Vurvo team feed (js/team-feed.js) + the league phone, for pages other than
   the team pages. The card styles are the team page's, scoped under .tf so
   they never touch the host page's own .card/.tab/.more. Colours come from
   the host: --team / --team-2 / --team-ink are set per feed by the page. */

.tf { --tf-dim: var(--dimmer, var(--dim, #6F7889)); min-width: 0; }
.tf-tabs { position: sticky; top: 62px; z-index: 10; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0;
  background: linear-gradient(180deg, var(--night, #0F131A) 82%, transparent); margin: 0 0 4px; }
.tf-tabs::-webkit-scrollbar { display: none; }
.tf-tab { flex: none; height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; font: 700 14px var(--body); color: var(--steel); }
.tf-tab:hover { color: var(--chalk); }
.tf-tab[aria-selected="true"] { background: var(--chalk); border-color: var(--chalk); color: var(--night); }
.tf-tab .n { font-weight: 600; opacity: .6; margin-left: 5px; font-size: 11.5px; }
.tf-tab[hidden] { display: none; }
.tf-scope { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--deck); color: var(--chalk); cursor: pointer; font: 700 14px var(--body); white-space: nowrap; }
.tf-scope[hidden] { display: none; }
.tf-scope:hover { border-color: var(--steel); }
.tf-scope.on { border-color: var(--team-2, var(--chalk)); color: var(--team-2, var(--chalk)); }
@media (max-width: 640px) { .tf-scope { margin-left: 6px; } }
.tf-feed { display: flex; flex-direction: column; min-height: 40vh; }
.tf .status { padding: 28px 0; color: var(--steel); font-size: 15px; }
.tf .day { font: 800 15px var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--tf-dim); padding: 26px 0 2px; border-bottom: 1px solid var(--line-2); }
.tf .card { display: grid; grid-template-columns: minmax(0,1fr) 132px; gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line-2); position: relative; text-decoration: none; }
.tf .card h3 { margin: 0; font: 700 19px/1.28 var(--body); letter-spacing: -.005em; text-wrap: pretty; }
.tf .card h3 a { text-decoration: none; color: inherit; }
.tf .card:hover h3 a { text-decoration: underline; text-decoration-color: var(--team); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.tf .card p { margin: 6px 0 0; font-size: 14.5px; color: var(--steel); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tf .thumb { width: 132px; aspect-ratio: 4/3; border-radius: 10px; object-fit: cover; background: var(--deck); display: block; }
.tf .card.article .thumb { order: 2; }
.tf .card.article.noimg { grid-template-columns: minmax(0,1fr); }
.tf .kind { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; min-width: 0; font: 600 13px var(--body); color: var(--steel); }
.tf .kind .src { color: var(--chalk); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf .kind .src.local { color: var(--team-2); }
.tf .tag { font: 800 15px var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--team-2); flex: none; }
.tf .tag.news { color: var(--steel); }
.tf .meta { display: flex; align-items: center; gap: 6px 16px; margin-top: 10px; font: 600 13px var(--body); color: var(--tf-dim); flex-wrap: wrap; }
.tf .meta .act { display: inline-flex; align-items: center; gap: 5px; color: var(--steel); background: none; border: 0; padding: 0; font: 700 13px var(--body); cursor: pointer; text-decoration: none; }
.tf .meta .act:hover { color: var(--chalk); }
.tf .meta .act.go { color: var(--team-2); }
.tf .card.lead { grid-template-columns: 1fr; padding-top: 4px; }
.tf .card.lead .thumb, .tf .card.video:not(.compact) .thumb { width: 100%; aspect-ratio: 16/9; border-radius: var(--r, 14px); order: 0; margin-bottom: 6px; }
.tf .card.lead h3 { font: 900 clamp(34px, 4.6vw, 60px)/.92 var(--disp); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.tf .card.lead p { font-size: 16px; -webkit-line-clamp: 3; }
.tf .card.video { grid-template-columns: 200px minmax(0,1fr); }
.tf .card.video:not(.compact) { grid-template-columns: 1fr; }
.tf .card.video:not(.compact) h3 { font: 900 clamp(30px, 3.8vw, 48px)/.94 var(--disp); text-transform: uppercase; }
.tf .media { position: relative; }
.tf .card.video.compact .media .thumb { width: 200px; aspect-ratio: 16/9; }
.tf .media .play { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 10px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.45)); border-radius: 10px; }
.tf .media .play i { width: 42px; height: 42px; border-radius: 50%; background: var(--chalk); color: var(--night); display: grid; place-items: center; transition: transform .2s; }
.tf .card:not(.compact) .media .play i { width: 58px; height: 58px; }
.tf .media .play:hover i { transform: scale(1.08); }
.tf .media .play svg { width: 18px; height: 18px; margin-left: 2px; }
.tf .media iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r, 14px); display: block; background: #000; }
.tf .card.podcast { grid-template-columns: 76px minmax(0,1fr); }
.tf .card.podcast .thumb { width: 76px; aspect-ratio: 1; border-radius: 12px; }
.tf .card.podcast audio { width: 100%; margin-top: 12px; height: 36px; }
.tf .status button { margin-left: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--deck); color: var(--chalk); cursor: pointer; font: 700 13px var(--body); }
.tf .card.app { grid-template-columns: auto minmax(0,1fr); gap: 16px; margin: 14px 0; padding: 20px; border-radius: var(--r, 14px); border: 1px solid var(--line);
  background: linear-gradient(150deg, color-mix(in srgb, var(--team) 20%, var(--deck)), var(--deck) 70%); }
.tf .card.app .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--team); color: var(--team-ink); }
.tf .card.app .ic svg { width: 22px; height: 22px; }
.tf .card.app .kind { color: var(--team-2); font: 800 14px var(--disp); letter-spacing: .14em; text-transform: uppercase; }
.tf .card.app h3 { font: 900 28px/.95 var(--disp); text-transform: uppercase; }
.tf .card.app p { -webkit-line-clamp: 3; color: #C9CFD9; }
.tf .card.app .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 800 14px var(--body); color: var(--team-ink); background: var(--team); height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none; }
.tf .more { align-self: flex-start; margin-top: 18px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; font: 800 14px var(--body); color: var(--chalk); }
.tf .more:hover { border-color: var(--steel); }
@media (max-width: 640px) {
  .tf-tabs { top: 0; }
  .tf .card { grid-template-columns: minmax(0,1fr) 96px; gap: 12px; }
  .tf .thumb, .tf .card.article .thumb { width: 96px; }
  .tf .card.video { grid-template-columns: 132px minmax(0,1fr); }
  .tf .card.video.compact .media .thumb { width: 132px; }
  .tf .card h3 { font-size: 17px; }
  .tf .card.lead .thumb { width: 100%; }
}

/* ── the league phone: a league's news, inside the app's chrome ─────────── */
.lphone { width: 100%; max-width: 340px; justify-self: center; border-radius: 44px; padding: 9px; background: #0a0c10;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.lphone .screen { border-radius: 35px; overflow: hidden; background: var(--night); height: clamp(520px, 66vh, 680px); display: flex; flex-direction: column; position: relative; }
.lphone .top { padding: 34px 16px 14px; background: linear-gradient(150deg, var(--lc, var(--ember)), color-mix(in srgb, var(--lc, var(--ember)) 55%, #05070a)); color: #fff; flex: none; }
.lphone .top .bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lphone .top .lg { font: 700 17px var(--mark, var(--body)); }
.lphone .top .lg b { color: #fff; opacity: .75; }
.lphone .top .x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.28); color: #fff; cursor: pointer; display: grid; place-items: center; font: 700 15px var(--body); }
.lphone .top .x:hover { background: rgba(0,0,0,.45); }
.lphone .top h3 { margin: 10px 0 0; font: 900 34px/.9 var(--disp); text-transform: uppercase; }
.lphone .top p { margin: 4px 0 0; font: 600 12px var(--body); opacity: .85; }
.lphone .list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.lphone .row { display: grid; grid-template-columns: minmax(0,1fr) 54px; gap: 10px; padding: 10px; border-radius: 12px; background: var(--deck); border: 1px solid var(--line-2); text-decoration: none; color: inherit; }
.lphone .row.noimg { grid-template-columns: minmax(0,1fr); }
.lphone .row:hover { border-color: var(--line); background: var(--deck-2); }
.lphone .row.on { border-color: var(--lc, var(--ember)); }
.lphone .row .k { font: 700 9px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lphone .row .t { font-size: 12.5px; font-weight: 700; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lphone .row .th { width: 54px; height: 42px; border-radius: 8px; background: var(--deck-2); object-fit: cover; }
.lphone .status { padding: 22px 6px; color: var(--steel); font-size: 13px; }
.lphone .tabs2 { flex: none; display: flex; justify-content: space-around; padding: 10px 6px 14px; border-top: 1px solid var(--line-2); font: 700 10px var(--body); color: var(--steel); }
.lphone .tabs2 .on { color: var(--chalk); }