/* 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: a puck sliding along a rink line, one face-off dot per page.
   The orange fill is the trail the puck has already travelled. */
.pager { margin-top: 22px; }
.puck-bar {
  display: flex; align-items: center; gap: 14px;
  max-width: 460px; margin: 0 auto;
}

/* Boards at each end */
.puck-nav {
  flex: 0 0 44px; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: #4b5563; cursor: pointer;
  transition: border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.puck-nav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.puck-nav[data-page="prev"] svg { transform: rotate(180deg); }
.puck-nav:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); transform: scale(1.07); box-shadow: 0 4px 12px rgba(255,80,26,.22); }
.puck-nav:active:not(:disabled) { transform: scale(.94); }
.puck-nav:disabled { opacity: .3; cursor: default; }

/* The ice */
.puck-rail { position: relative; flex: 1; height: 46px; margin-inline: 19px; }
/* Spans exactly first dot to last dot, so the line has no loose ends */
.puck-line {
  position: absolute; inset-inline: 0; top: 50%; height: 4px;
  transform: translateY(-50%); border-radius: 4px; overflow: hidden;
  background: repeating-linear-gradient(90deg, #d8dde3 0 8px, #edf0f3 8px 14px);
}
.puck-line i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #ffa886, var(--orange));
  transition: width .52s cubic-bezier(.34,1.12,.48,1);
}

/* Face-off dots */
.puck-dot {
  position: absolute; left: var(--x); top: 50%;
  width: 28px; height: 28px; padding: 0; margin: 0;
  transform: translate(-50%,-50%);
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.puck-dot::before {
  content: ''; position: absolute; inset: 9px;
  border-radius: 50%; background: #aeb6c0;
  box-shadow: 0 0 0 3px #fcfaf6;
  transition: background .18s, transform .18s;
}
.puck-dot:hover::before { background: var(--orange); transform: scale(1.45); }
.puck-dot[aria-current="page"]::before { opacity: 0; }
.puck-dot:focus-visible { outline: 3px solid #b92b00; outline-offset: 2px; border-radius: 50%; }

/* The puck: a disc on its edge — dark side wall, lit top face, shadow on the ice */
.puck {
  position: absolute; left: var(--x); top: 50%;
  width: 34px; height: 23px; pointer-events: none; z-index: 2;
  transform: translate(-50%,-50%);
  border-radius: 50% 50% 47% 47% / 54% 54% 46% 46%;
  background:
    /* lit top face */
    radial-gradient(ellipse 56% 34% at 50% 21%, #656e7a 0%, #464f5a 52%, rgba(70,79,90,0) 55%),
    /* side wall */
    linear-gradient(180deg, #2b323b 0%, #1a1f26 46%, #0d1116 78%, #171c22 100%);
  box-shadow:
    0 8px 12px -6px rgba(10,14,20,.65),
    inset 0 1.5px 0 rgba(255,255,255,.3),
    inset 0 -2.5px 4px rgba(0,0,0,.55);
  transition: left .52s cubic-bezier(.34,1.12,.48,1), width .5s ease, filter .3s;
}
/* Ice spray trailing the puck while it travels */
.puck::before,
.puck::after {
  content: ''; position: absolute; top: 50%; width: 20px; height: 2px;
  border-radius: 2px; opacity: 0; transition: opacity .2s;
}
.puck::before { transform: translateY(-6px); }
.puck::after { transform: translateY(3px); width: 13px; }
.puck.to-right::before, .puck.to-right::after { right: 100%; margin-right: 5px; background: linear-gradient(90deg, transparent, rgba(255,80,26,.75)); }
.puck.to-left::before, .puck.to-left::after { left: 100%; margin-left: 5px; background: linear-gradient(270deg, transparent, rgba(255,80,26,.75)); }
.puck.is-sliding { width: 37px; filter: blur(.3px); }
.puck.is-sliding::before, .puck.is-sliding::after { opacity: 1; }

.pager-note {
  margin: 13px 0 0; text-align: center;
  font-size: 13px; color: var(--muted); letter-spacing: .01em;
}
.pager-note strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Plenty of pages: tighten the dots so they never collide */
.puck-rail[style*="--count:8"] .puck-dot,
.puck-rail[style*="--count:9"] .puck-dot { width: 20px; height: 20px; }

@media (max-width: 740px) {
  .puck-bar { gap: 10px; max-width: none; }
  .puck-nav { flex-basis: 42px; width: 42px; height: 42px; }
  .puck-rail { margin-inline: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .puck, .puck-line i, .puck-nav, .puck-dot::before { transition: none; }
  .puck.is-sliding { width: 30px; filter: none; }
  .puck.is-sliding::before, .puck.is-sliding::after { opacity: 0; }
}

/* 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; }
/* The Team column is hidden below 740px, so the team travels with the player's
   name instead and the leaderboard still says who they play for. */
.row-team { display:none; }
@media (max-width:740px) {
  .row-team { display:block; margin-top:2px; font-size:11.5px; font-weight:500; color:var(--muted); letter-spacing:.01em; }
}
.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; }
/* Cloud description under a standings / leaderboard heading */
.intro-desc { margin:10px 0 0; max-width:64ch; font-size:16px; line-height:1.55; color:#5c6371; white-space:pre-line; }
/* Location · dates · website under a standings / leaderboard heading */
.intro-meta { margin:10px 0 0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14.5px; color:#5c6371; }
.intro-meta a { color:#ba340e; }

/* Schedule tab on the standings page: a planned game that has not been scored yet */
.sched-game { cursor:default; }
.sched-game .sched-time { min-width:60px; text-align:center; }
.sched-game .sched-vs { font-size:15px; letter-spacing:0; color:var(--muted); font-weight:700; }
.sched-game .sched-where { grid-column:1 / -1; margin-top:-8px; font-size:12.5px; color:var(--muted); }
.sched-game .sched-score { grid-column:1 / -1; justify-self:start; margin-top:-4px; display:inline-block; padding:6px 12px; border-radius:7px; background:var(--orange); color:#11171b; font-size:12.5px; font-weight:700; }
.sched-game .sched-score:hover { background:var(--orange-hover); text-decoration:none; }

@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; }
}