/* GameTime standalone pages — additions on top of the Concept C stylesheet
   (styles.css). Only rules the real pages need that the template did not. */

/* Navigation and header */
.brand img.logo { width:auto; height:52px; border-radius:6px; }
@media (max-width:1150px) { .brand img.logo { height:46px; } }
@media (max-width:740px)  { .brand img.logo { height:40px; } }
@media (max-width:360px)  { .brand img.logo { height:34px; } }
.site-nav a[aria-current=page] { color:#ba340e; }
a.header-download { color:#11171b; }
a.header-download:hover { color:#fff; }

/* Toolbar tabs rendered as links */
.tabs a {
  flex:1; display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; min-height:45px; padding:9px 20px;
  font-weight:700; font-size:15px; color:#667082; white-space:nowrap;
}
.tabs a[aria-current=page] { background:var(--ink); color:#fff; box-shadow:0 2px 3px #0000000d; }
.tabs a:not([aria-current=page]):hover { background:#f4f4f2; color:var(--ink); }
.date-selector.is-muted { opacity:.45; }

/* Team filter in the toolbar (leaderboards) */
.team-select { display:flex; align-items:center; gap:10px; min-width:260px; border-left:1px solid var(--line); padding-inline:16px 10px; color:var(--muted); }
.team-select select { flex:1; min-width:0; border:0; background:transparent; font:inherit; font-weight:600; font-size:15px; color:var(--ink); padding:12px 4px; cursor:pointer; }
.team-select select:focus-visible { outline:3px solid #b92b00; outline-offset:2px; border-radius:4px; }
@media (max-width:740px) {
  .team-select { min-height:49px; width:100%; border:1px solid var(--line); background:#fff; border-radius:10px; padding-inline:12px; }
}

/* Anonymized (placeholder) player names */
.anon-mark { display:inline-grid; place-items:center; width:16px; height:16px; margin-left:6px; border-radius:50%; background:#eceef1; color:#424955; font-size:11px; font-weight:800; vertical-align:2px; cursor:help; }
.anon-notice { display:flex; align-items:center; gap:8px; }
.anon-notice .anon-mark { margin:0; flex-shrink:0; }

/* Score rows rendered as links */
a.final-game { color:inherit; }
.final-game .mini-team.winner { color:var(--ink); font-weight:700; }
.status-tag.live { background:var(--orange); color:#11171b; }
.final-game .status-tag { min-width:60px; }
.final-score small { display:block; font-size:11px; font-weight:600; letter-spacing:1px; color:#737b87; text-align:center; }

/* Box-score cards on the homepage: three per page, side by side on wide screens.
   Black is reserved for live games; completed games use a white card like the final rows. */
.results-full { min-width:0; }
.cards-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.cards-grid .live-card { display:flex; flex-direction:column; }
.cards-grid .live-card > .button { margin-top:auto; padding-top:12px; padding-bottom:12px; }
.cards-grid .live-card .periods.full { margin-top:18px; margin-bottom:6px; }
@media (min-width:1150px) {
  .cards-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cards-grid .live-card { padding:20px; }
  .cards-grid .match-meta { margin-bottom:18px; font-size:13px; }
  .cards-grid .match-main { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; }
  .cards-grid .score { font-size:54px; letter-spacing:-2px; }
  .cards-grid .team-badge { width:56px; height:56px; font-size:36px; }
  .cards-grid .team strong { font-size:14px; max-width:120px; }
  .cards-grid .record { font-size:12px; }
  .cards-grid .periods.full { font-size:12px; }
  .cards-grid .periods.full th, .cards-grid .periods.full td { padding:5px 5px; }
  .cards-grid .live-card > .button { margin-top:auto; font-size:15px; }
}
.live-card.final-card { background:#fff; color:var(--ink); border:1px solid var(--line); }
.final-card .match-meta { color:#687081; }
.live-card.final-card .status-tag.hero-tag { background:#eceef1; color:#424955; }
.final-card .record { color:#737b87; }
.final-card .score .dash { color:#c3c8cf; }
.final-card .periods { color:var(--ink); }
.final-card .periods th { color:#737b87; }
.final-card .periods th, .final-card .periods td { border-bottom-color:#e9eaed; }
.final-card .team-badge { border-color:#dce0e5; box-shadow:0 0 0 1px #f2f3f5; }
.final-card:hover { border-color:#f68d6b; }

/* Full-width Scorekeeper promo band under the cards (copy left, photo right) */
.app-promo.wide { margin-top:20px; }
@media (min-width:741px) {
  .app-promo.wide { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:stretch; }
  .app-promo.wide .promo-copy { padding:32px 32px 28px; align-self:center; }
  .app-promo.wide .promo-download { width:auto; min-width:230px; }
  .app-promo.wide .promo-photo { height:100%; min-height:300px; margin:0; object-position:50% 40%;
    mask-image:linear-gradient(to right,transparent 0,#000 22%); -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%); }
}

/* Pager under the box-score cards */
.pager { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:16px; }
.pager button { min-width:44px; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:#fff; font-weight:700; font-size:15px; color:#667082; transition:border-color .15s,background .15s; }
.pager button:hover:not(:disabled):not([aria-current=page]) { border-color:#f68d6b; color:var(--ink); }
.pager button[aria-current=page] { background:var(--ink); color:#fff; border-color:var(--ink); }
.pager button:disabled { opacity:.32; }
.pager .pager-gap { color:var(--muted); padding:0 4px; }
.pager .pager-note { flex-basis:100%; text-align:center; font-size:13px; color:var(--muted); margin-top:4px; }

/* Live card: team name may be a link; secondary line under the name */
.team strong a { color:inherit; }
.team strong a:hover { color:#ffb199; }
.live-card .status-tag.hero-tag { background:#ffffff1f; color:#fff; font-size:14px; padding:6px 12px; }
.meta-tags { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.meta-when { display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; min-width:0; }
.meta-where { font-weight:500; font-size:13px; color:#a4afbc; }
.meta-where::before { content:"📍 "; font-size:12px; }
@media (max-width:740px) { .meta-when { align-items:flex-end; } .meta-where { font-size:12px; } }
.status-tag.tour-tag { display:inline-flex; align-items:center; gap:5px; background:#ffd60a; color:#11171b; font-size:13px; padding:6px 10px; text-transform:uppercase; letter-spacing:.8px; }
.status-tag.tour-tag .icon { width:14px; height:14px; }
.live-card .status-tag.tour-tag { background:#ffd60a; color:#11171b; }
.live-card .periods.full { display:table; width:100%; margin-top:22px; font-size:13px; }
.live-card .periods.full th, .live-card .periods.full td { padding:7px 8px; }
.live-card .facts { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px; font-size:14px; color:#b8c0cc; }
.live-card .facts .icon { width:18px; height:18px; margin-right:6px; }
.live-card .card-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.live-card .card-actions .button { flex:1; }
.button-ghost { background:#ffffff14; color:#fff; border:1px solid #ffffff33; }
.button-ghost:hover { background:#ffffff26; }

/* Data panels on sub-pages */
.panels { display:grid; gap:18px; margin-top:18px; }
.panels > * { min-width:0; }
.two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.data-panel.auto { min-height:0; }
.data-panel .panel-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.stats-table td.num, .stats-table th.num { text-align:center; font-variant-numeric:tabular-nums; }
.stats-table td.pts { font-weight:800; }
.stats-table td.pos { color:#1f7a5c; }
.stats-table td.neg { color:#b92b00; }
.stats-table td:last-child { font-weight:inherit; }
.stats-table .period-row th { background:#f6f6f3; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:#737b87; font-weight:700; padding:9px 8px; }
.cell-team { display:inline-flex; align-items:center; gap:9px; min-width:0; }
.cell-team .team-badge { width:28px; height:28px; font-size:18px; border-color:#dcdfe4; }
.cell-team a { color:inherit; }
.cell-team a:hover { color:#ba340e; }
.muted { color:var(--muted); }
.pill { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.6px; padding:3px 7px; border-radius:5px; background:#eceef1; color:#424955; margin-left:6px; vertical-align:1px; }
.pill.pp { background:#e3f5ea; color:#1f7a5c; }
.pill.sh { background:#fde8e4; color:#b92b00; }
.notes { white-space:pre-wrap; color:#424955; }
.empty-state a.button { margin-top:20px; }
.result-note.date-note { margin:18px 0 6px; font-weight:700; color:#424955; }

/* Article teasers on the homepage */
.stories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:20px; }
.story { display:grid; grid-template-columns:150px minmax(0,1fr); background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .15s; }
.story:hover { border-color:#f68d6b; }
.story img { width:100%; height:100%; object-fit:cover; }
.story.contain img { object-fit:contain; padding:14px; background:#fff; }
.story div { padding:18px 20px; }
.story h3 { font-size:19px; font-weight:800; letter-spacing:-.5px; line-height:1.2; margin:4px 0 6px; }
.story p { color:#5c6371; font-size:14px; }
.story .eyebrow { font-size:11px; margin-bottom:0; }

/* Ad slot: invisible until AdSense fills it */
.ad { margin-top:20px; min-height:0; overflow:hidden; border-radius:12px; }
.ad:has(ins[data-ad-status="unfilled"]) { display:none; }

/* Intro variants for sub-pages */
.intro.compact h1 { font-size:clamp(40px,4.6vw,64px); }
.intro-subtitle a { color:#ba340e; }
.intro-subtitle .status-tag { vertical-align:middle; margin-right:6px; }

@media (max-width:900px) {
  .two { grid-template-columns:minmax(0,1fr); }
  .stories { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:740px) {
  .live-card .periods.full { font-size:12px; }
  .live-card .card-actions { margin-top:17px; }
  .story { grid-template-columns:110px minmax(0,1fr); }
  .story div { padding:14px 15px; }
  .story h3 { font-size:17px; }
}
@media (max-width:360px) {
  .story { grid-template-columns:minmax(0,1fr); }
  .story img { height:150px; }
}