* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --mammoth-blue: #69B3E7;
    --mammoth-dark-blue: #1A4D7A;
    --mammoth-accent: #FFB81C;
    --stadium-black: #0A0A0A;
    --stadium-dark: #1a1a1a;
    --concrete: #2a2a2a;
    --metal: #3a3a3a;
    --led-glow: rgba(105, 179, 231, 0.3);
}

html, body {
    height: auto;
    overflow-y: auto;
}

body {
    font-family: 'Barlow Condensed', sans-serif;
    background: var(--stadium-black);
    color: #fff;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Stadium Atmosphere */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 50% 100%, rgba(105, 179, 231, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 20% 0%, rgba(255, 184, 28, 0.03) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 2;
}

/* NHL Games Ticker */
.nhl-ticker {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 280px;
}

.nhl-ticker-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    color: #666;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.nhl-ticker-game {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border: 1px solid var(--concrete);
    min-width: 220px;
}

.nhl-ticker-team {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.nhl-ticker-team img {
    width: 24px;
    height: 24px;
}

.nhl-ticker-abbrev {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ccc;
    min-width: 30px;
}

.nhl-ticker-score {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
}

.nhl-ticker-score.winner { color: #4CAF50; }

.nhl-ticker-vs {
    color: #555;
    font-size: 12px;
    padding: 0 4px;
}

.nhl-ticker-status {
    font-size: 10px;
    color: #888;
    text-align: center;
    margin-top: 4px;
    letter-spacing: 1px;
}

.nhl-ticker-status.live {
    color: #f44336;
    font-weight: 700;
}

.nhl-ticker-nav {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.nhl-ticker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    transition: background 0.2s;
}

.nhl-ticker-dot.active {
    background: var(--mammoth-blue);
}

@media (max-width: 900px) {
    .nhl-ticker {
        position: static;
        transform: none;
        max-width: 100%;
        margin-bottom: 15px;
    }
    .nhl-ticker-game {
        justify-content: center;
    }
}

/* Venue Header */
.venue-header {
    text-align: center;
    padding: 30px 20px 20px;
    border-bottom: 2px solid var(--concrete);
    margin-bottom: 30px;
    position: relative;
}

.venue-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--team-color-text, var(--mammoth-blue));
    text-transform: uppercase;
    text-shadow: 0 0 20px var(--led-glow), 0 0 40px var(--led-glow);
    margin-bottom: 5px;
}

.venue-location {
    font-size: 16px;
    color: #888;
    letter-spacing: 2px;
    text-transform: uppercase;
    min-height: 22px;
}

.game-countdown {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    color: var(--mammoth-accent);
    margin-top: 10px;
    letter-spacing: 1px;
}

.countdown-timer {
    font-size: 24px;
    font-weight: 700;
    color: var(--team-color-text, var(--mammoth-blue));
    margin-top: 5px;
}

/* TV / Fullscreen Mode */
body.tv-mode .nav-tabs,
body.tv-mode .venue-header {
    display: none;
}

.tv-exit {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
    display: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.18);
    color: #fff;
    background: rgba(10,10,10,0.7);
    cursor: pointer;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

body.tv-mode .tv-exit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.tv-mode .last-updated {
    display: none;
}

body.tv-mode .container {
    max-width: 100%;
    padding: 0 16px 10px;
}

/* ── TV BROADCAST LAYOUT ────────────────────────────────────────
   Scoreboard = compact header strip
   Rink-stats layout = fills remaining screen height
─────────────────────────────────────────────────────────────── */

/* Scoreboard page: flex column filling viewport */
body.tv-mode #scoreboard {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    overflow: hidden;
    gap: 0;
}

/* Scoreboard card → flat broadcast header bar */
body.tv-mode .scoreboard {
    flex-shrink: 0;
    padding: 10px 40px 8px;
    margin-bottom: 8px;
    border-radius: 0 0 12px 12px;
    border-top: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
    box-shadow: 0 6px 30px rgba(0,0,0,0.6);
}

/* Hide noisy elements in TV mode */
body.tv-mode .scoreboard-info-row,
body.tv-mode .game-status,
body.tv-mode #pregameSnippet,
body.tv-mode #playoffSeriesBar,
body.tv-mode .special-teams-banner { display: none !important; }

/* Scoreboard row: tighter, horizontal */
body.tv-mode .scoreboard-main {
    gap: 16px;
}

/* Scores: big but compact */
body.tv-mode .score {
    font-size: 110px;
    line-height: 1;
    min-width: 80px;
}

/* Team names */
body.tv-mode .team-name {
    font-size: 38px;
}

/* Team logo */
body.tv-mode .team-logo {
    width: 120px;
    height: 120px;
}

/* Clock / period center column */
body.tv-mode .clock {
    font-size: 52px;
    line-height: 1;
}

body.tv-mode .period {
    font-size: 24px;
    margin-top: 2px;
}

body.tv-mode .game-center {
    padding: 0 20px;
}

/* Inline SOG / HITS stats on scoreboard */
body.tv-mode .team-stats-inline {
    font-size: 15px;
    gap: 6px;
    min-width: 60px;
}

body.tv-mode .inline-stat .stat-val {
    font-size: 22px;
}

/* Goal scorer names next to score */
body.tv-mode .goal-scorer-name { font-size: 16px; }
body.tv-mode .goal-scorer-time { font-size: 16px; }
body.tv-mode .goal-scorer-type { font-size: 15px; }

/* LIVE badge — float centered above the ice */
body.tv-mode .live-badge {
    position: fixed;
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100vh - 168px);
    font-size: 18px;
    padding: 8px 20px;
    gap: 10px;
    z-index: 950;
    white-space: nowrap;
    border-width: 2px;
}

/* ── Rink area fills remaining height ────── */
body.tv-mode .rink-stats-layout {
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    grid-template-columns: 260px 1fr 260px;
    gap: 8px;
    align-items: stretch;
}

/* Side columns: fill height, better spacing */
body.tv-mode .team-stats-column {
    height: 100%;
    gap: 8px;
    padding: 12px;
    overflow: hidden;
}

/* Stat boxes: grow to fill space, centered */
body.tv-mode .team-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6px 10px;
}

body.tv-mode .team-stats-column.opp .team-stat-item {
    align-items: center;
}

/* Stat labels and values */
body.tv-mode .stat-value {
    font-size: 44px;
}

body.tv-mode .team-stat-item .stat-label { font-size: 18px; margin-bottom: 2px; }
body.tv-mode .team-stat-item .stat-value  { font-size: 42px; }

/* Penalty box */
body.tv-mode .penalty-box        { padding: 8px 10px !important; flex-shrink: 0; }
body.tv-mode .penalty-box-title  { font-size: 16px; margin-bottom: 4px; }
body.tv-mode .penalty-box-empty  { font-size: 15px; }
body.tv-mode .penalty-player     { font-size: 18px; }
body.tv-mode .penalty-time       { font-size: 22px; }
body.tv-mode .penalty-type       { font-size: 13px; }
body.tv-mode .penalty-mugshot    { width: 40px; height: 40px; }
body.tv-mode .penalty-item       { margin-bottom: 3px; gap: 8px; }

/* Goalie compact */
body.tv-mode .goalie-compact     { flex-shrink: 0; padding: 8px 10px; }
body.tv-mode .goalie-compact-name{ font-size: 24px; }
body.tv-mode .goalie-compact-sv  { font-size: 38px; }
body.tv-mode .goalie-compact-img { width: 68px; height: 68px; }

/* Info box headers */
body.tv-mode .info-box-title     { font-size: 18px; margin-bottom: 4px; }

/* ── Shot chart: rink fills center, controls bar pinned to bottom ── */
body.tv-mode .rink-center        { min-height: 0; height: 100%; }
/* Extra bottom padding creates space for the absolute-positioned sidebar */
body.tv-mode .rink-center-card   { height: 100%; padding: 8px 8px 90px; position: relative; }

/* Keep original flex-row layout — sidebar is removed from flow via absolute */
body.tv-mode .shot-chart-container { display: flex; height: 100%; }

/* Rink area fills all horizontal space (sidebar is no longer in flow) */
body.tv-mode .shot-chart-rink-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    min-height: 0;
}
body.tv-mode .shot-chart-rink-area { container-type: size; }
body.tv-mode .shot-chart-rink {
    width: min(100cqw, 100cqh * 200 / 85);
    aspect-ratio: 200 / 85;
    max-height: none;
    max-width: none;
}

/* Sidebar pinned to the bottom of the card */
body.tv-mode .shot-chart-sidebar {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: unset;
    flex-wrap: wrap;
    padding: 6px 0;
}

/* Period buttons — horizontal */
body.tv-mode .period-selector    { flex-direction: row; gap: 8px; padding: 8px 12px; border-radius: 10px; order: unset; }
body.tv-mode .period-btn         { font-size: 20px; padding: 10px 18px; border-radius: 8px; letter-spacing: 1px; }

/* Zone % — horizontal */
body.tv-mode .shot-zone-stats    { flex-direction: row; gap: 10px; order: unset; }
body.tv-mode .zone-stat          { font-size: 16px; padding: 8px 14px; text-align: center; }
body.tv-mode .zone-label         { font-size: 15px; margin-bottom: 3px; }
body.tv-mode .zone-stat.utah span:last-child { font-size: 26px; }
body.tv-mode .zone-stat.opp span:last-child  { font-size: 26px; }

/* Legend — horizontal */
body.tv-mode .shot-chart-legend  { flex-direction: row; gap: 14px; order: unset; padding: 8px 14px; font-size: 17px; }
body.tv-mode .shot-chart-legend-dot { width: 15px; height: 15px; }

/* Shot dots — slightly bigger on TV */
body.tv-mode .shot-dot           { width: 16px; height: 16px; font-size: 9px; }
body.tv-mode .shot-dot.goal      { width: 19px; height: 19px; font-size: 11px; }

/* Player stats table (player tab, not scoreboard) */
body.tv-mode .player-table td   { padding: 4px 6px !important; font-size: 22px; }
body.tv-mode .player-table th   { padding: 6px 6px !important; font-size: 18px; }
body.tv-mode .player-name-text  { font-size: 20px; }
body.tv-mode .player-headshot   { width: 36px; height: 36px; }
body.tv-mode .player-section-title { font-size: 22px; margin: 4px 0; }
body.tv-mode .team-panel-name   { font-size: 28px; }
body.tv-mode .team-panel-subtitle { font-size: 15px; }

/* Other */
body.tv-mode .standings-team-name { font-size: 22px; }
body.tv-mode .goalie-name         { font-size: 26px; }
body.tv-mode .goalie-stat-value   { font-size: 30px; }
body.tv-mode .goalie-stat-label   { font-size: 16px; }
body.tv-mode .goalie-card img     { width: 70px; height: 70px; }
/* Goalie indicator circles on ice rink */
body.tv-mode .goalie-indicator    { width: 52px; height: 52px; }
body.tv-mode .pbp-section-title   { font-size: 18px; }
body.tv-mode .top-player-name     { font-size: 18px; }
body.tv-mode .top-player-stats    { font-size: 15px; }
body.tv-mode #threeStars          { display: none; }

body.tv-mode #threeStars {
    display: none;
}

/* In TV mode, hide the banner that pushes layout down */
body.tv-mode .special-teams-banner {
    display: none !important;
}

/* PP/PK overlay */
body.tv-mode .tv-pp-overlay        { width: 420px; padding: 18px 20px 16px; }
body.tv-mode .tv-pp-label          { font-size: 26px; }
body.tv-mode .tv-pp-time           { font-size: 36px; }
body.tv-mode .tv-pp-strength       { font-size: 16px; }
body.tv-mode .tv-pp-players-title  { font-size: 16px; margin-bottom: 6px; }
body.tv-mode .tv-pp-team-label     { font-size: 18px; min-width: 50px; }
body.tv-mode .tv-pp-player-chip    { font-size: 18px; padding: 4px 12px 4px 5px; }
body.tv-mode .tv-pp-player-chip img { width: 30px; height: 30px; }
body.tv-mode .tv-pp-player-stat    { font-size: 14px; }
body.tv-mode .tv-pp-team-row       { margin-bottom: 6px; gap: 8px; }

/* TV PP Overlay — fixed bottom-left, floats over content */
.tv-pp-overlay {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 900;
    width: 320px;
    background: rgba(10,10,10,0.88);
    border-radius: 14px;
    border: 2px solid #ffc107;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    padding: 14px 16px 12px;
    animation: tv-pp-pulse 1.5s ease-in-out infinite;
}

.tv-pp-overlay.pk {
    border-color: #f44336;
    animation-name: tv-pk-pulse;
}

@keyframes tv-pp-pulse {
    0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 12px rgba(255,193,7,0.3); }
    50% { box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 24px rgba(255,193,7,0.6); }
}

@keyframes tv-pk-pulse {
    0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 12px rgba(244,67,54,0.3); }
    50% { box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 24px rgba(244,67,54,0.6); }
}

body.tv-mode .tv-pp-overlay.tv-pp-visible {
    display: block;
}

.tv-pp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tv-pp-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffc107;
}

.tv-pp-overlay.pk .tv-pp-label {
    color: #f44336;
}

.tv-pp-meta {
    text-align: right;
}

.tv-pp-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.tv-pp-strength {
    font-size: 11px;
    color: #888;
    letter-spacing: 1px;
}

.tv-pp-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 8px 0;
}

.tv-pp-players-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.tv-pp-team-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.tv-pp-team-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--mammoth-blue);
    min-width: 34px;
}

.tv-pp-player-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}

.tv-pp-player-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.07);
    border-radius: 20px;
    padding: 2px 8px 2px 3px;
    font-size: 12px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    color: #ddd;
}

.tv-pp-player-chip img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.tv-pp-player-stat {
    font-size: 10px;
    color: #888;
    margin-left: 2px;
}

/* Goal banner */
.goal-banner {
    position: fixed;
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
    z-index: 1000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 28px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.22);
    background: linear-gradient(90deg, rgba(255, 184, 28, 0.18), rgba(105, 179, 231, 0.18));
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 900;
    letter-spacing: 6px;
    text-transform: uppercase;
    text-align: center;
}

.goal-banner-main {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 18px;
    font-size: 52px;
}

.goal-banner-detail {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ddd;
    text-transform: none;
}

.goal-banner.on {
    display: inline-flex;
    animation: goalDrop 0.25s ease, goalPulse 1.1s ease infinite;
}

@keyframes goalDrop {
    from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes goalPulse {
    0% { box-shadow: 0 18px 40px rgba(0,0,0,0.55); }
    50% { box-shadow: 0 18px 55px rgba(255,184,28,0.35); }
    100% { box-shadow: 0 18px 40px rgba(0,0,0,0.55); }
}

.goal-banner .goal-team {
    font-size: 18px;
    letter-spacing: 3px;
    color: #ddd;
}

/* Navigation: one compact row; less-used pages live in the "More" menu */
.nav-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    flex-wrap: nowrap;
    padding: 6px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--concrete);
    border-radius: 10px;
}

.nav-tab {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #cfd3d8;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-tab:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
    border-color: var(--concrete);
}

.nav-tab.active {
    color: #fff;
    background: linear-gradient(145deg, var(--mammoth-dark-blue) 0%, var(--mammoth-blue) 100%);
    border-color: var(--mammoth-accent);
    box-shadow: 0 0 14px var(--led-glow);
}

.nav-more {
    position: relative;
}

.nav-more-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    min-width: 210px;
    padding: 6px;
    background: #141416;
    border: 1px solid var(--concrete);
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.6);
}

.nav-more.open .nav-more-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-more-item {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #cfd3d8;
    cursor: pointer;
}

.nav-more-item:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
}

.nav-more-item.active {
    color: var(--mammoth-accent);
}

.nav-more-change {
    margin-top: 4px;
    border-top: 1px solid var(--concrete);
    border-radius: 0 0 6px 6px;
    padding-top: 11px;
}

@media (max-width: 1100px) {
    .nav-tabs { gap: 2px; }
    .nav-tab { font-size: 14px; padding: 7px 10px; letter-spacing: 0.5px; }
}

@media (max-width: 860px) {
    .nav-tab { font-size: 13px; padding: 7px 7px; letter-spacing: 0; }
}

/* Mobile Hamburger Menu */
.hamburger-menu {
    display: none;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1100;
    width: 50px;
    height: 50px;
    background: rgba(26, 77, 122, 0.95);
    border: 2px solid var(--mammoth-blue);
    border-radius: 10px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 12px;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger-menu.open .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.open .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.open .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 10, 0.98);
    z-index: 1050;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 80px 20px 30px; /* top clears the close button; overlay scrolls when the list is taller than the screen */
    overflow-y: auto;
}

.mobile-nav.open {
    display: flex;
}

.mobile-nav-btn {
    font-family: 'Rajdhani', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 12px 30px;
    flex-shrink: 0;
    background: linear-gradient(145deg, var(--metal) 0%, var(--concrete) 100%);
    border: 2px solid var(--concrete);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    width: 100%;
    max-width: 300px;
    text-align: center;
}

.mobile-nav-btn:hover,
.mobile-nav-btn.active {
    background: linear-gradient(145deg, var(--mammoth-dark-blue) 0%, var(--mammoth-blue) 100%);
    border-color: var(--mammoth-accent);
}

@media (max-width: 768px) {
    .nav-tabs {
        display: none !important;
    }
    .hamburger-menu {
        display: flex;
    }
}

/* Pages */
.page {
    display: none;
}

.page.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

#scoreboard.page.active {
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* SCOREBOARD STYLES */
.scoreboard {
    position: relative;
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 3px solid var(--concrete);
    border-radius: 15px;
    padding: 30px 40px;
    margin-bottom: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.live-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.live-badge.on { display: inline-flex; }
.live-badge.live { background: rgba(255, 0, 0, 0.12); }
.live-badge.pregame { background: rgba(255, 184, 28, 0.12); }

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: livePulse 1.2s ease infinite;
}

.live-badge.live .live-dot {
    background: #ff2a2a;
    box-shadow: 0 0 12px rgba(255, 42, 42, 0.9);
}

.live-badge.pregame .live-dot {
    background: var(--mammoth-accent);
    box-shadow: 0 0 12px rgba(255, 184, 28, 0.7);
}

@keyframes livePulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.35); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

.game-status {
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px;
    letter-spacing: 2px;
    color: var(--mammoth-accent);
    margin-bottom: 20px;
    font-weight: 700;
}

/* New Scoreboard Layout: Name - Logo - Score | Clock | Score - Logo - Name */
.scoreboard-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.team-side {
    display: flex;
    align-items: center;
    gap: 15px;
}

.utah-side {
    flex-direction: row;
}

.opp-side {
    flex-direction: row;
}

/* Goal Scorers on Scoreboard */
.goal-scorers {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    max-width: 200px;
    min-width: 120px;
    max-height: 200px;
    overflow-y: auto;
}

.goal-scorers:empty {
    display: none;
}

.utah-scorers {
    text-align: right;
    align-items: flex-end;
}

.opp-scorers {
    text-align: left;
    align-items: flex-start;
}

.goal-scorer-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.utah-scorers .goal-scorer-item {
    flex-direction: row-reverse;
    border-left: 2px solid var(--mammoth-blue);
}

.opp-scorers .goal-scorer-item {
    border-right: 2px solid var(--opp-color, #888);
}

.goal-scorer-name {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
}

.goal-scorer-time {
    font-size: 14px;
    color: #a3a3a3;
}

.goal-scorer-type {
    font-size: 13px;
    color: #ffd700;
    text-transform: uppercase;
}

@media (max-width: 1200px) {
    .goal-scorers {
        display: none;
    }
}

.team-info {
    text-align: center;
    min-width: 120px;
}

.team-logo {
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

/* Power Play Indicator on Scoreboard */
.pp-indicator {
    display: none;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    border-radius: 6px;
    padding: 6px 10px;
    animation: pp-pulse 1.5s ease-in-out infinite;
}

.pp-indicator.active {
    display: flex;
}

.pp-indicator.pk {
    background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
}

.pp-indicator-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pp-indicator.pk .pp-indicator-text {
    color: #fff;
}

@keyframes pp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

.team-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.1;
    color: #f2f4f7;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Team color shows as a short underline, not as the text color (dark team colors are unreadable as text) */
.team-name::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin: 5px auto 0;
    border-radius: 2px;
    background: var(--name-accent, var(--mammoth-blue));
}

.team-record {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #888;
}

.team-stats-inline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    color: #888;
    min-width: 45px;
}

.utah-side .team-stats-inline {
    text-align: right;
    margin-right: 10px;
}

.opp-side .team-stats-inline {
    text-align: left;
    margin-left: 10px;
}

.inline-stat {
    white-space: nowrap;
}

.inline-stat .stat-val {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
}

.score {
    font-family: 'Rajdhani', sans-serif;
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    min-width: 60px;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85);
}

.utah-side .score {
    color: var(--mammoth-blue);
}

.game-center {
    text-align: center;
    padding: 0 25px;
    border-left: 2px solid var(--concrete);
    border-right: 2px solid var(--concrete);
    min-width: 100px;
}

.clock {
    font-family: 'Rajdhani', sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    line-height: 1.2;
}

.period {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--mammoth-accent);
    font-weight: 600;
}

/* Scoreboard Info Row (Recent Plays | Last Meeting | Top Player) */
.scoreboard-info-row {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--concrete);
}

.info-box {
    flex: 1;
    background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid var(--concrete);
    border-radius: 8px;
    padding: 12px;
    font-family: 'Rajdhani', sans-serif;
}

.info-box-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-align: center;
}

/* Recent Plays Box */
.recent-plays-box {
    min-width: 0;
}

.recent-play-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 14px;
    color: #999;
}

.recent-play-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.recent-play-item:first-child {
    padding-top: 0;
}

.recent-play-time {
    color: var(--mammoth-accent);
    font-weight: 600;
    white-space: nowrap;
    font-size: 13px;
}

.recent-play-desc {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-play-item.goal {
    color: #fff;
}

.recent-play-item.goal .recent-play-desc {
    font-weight: 600;
}

/* Last Meeting Box */
.last-meeting-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.last-meeting-content {
    font-size: 15px;
    color: #888;
    line-height: 1.5;
}

.last-meeting-content strong {
    color: #aaa;
}

.last-meeting-content .result-win { color: #4CAF50; font-weight: 700; }
.last-meeting-content .result-loss { color: #f44336; font-weight: 700; }
.last-meeting-content .sog-info { color: #666; display: block; font-size: 13px; margin-top: 4px; }

/* Top Player Box */
.top-player-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.top-player-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-player-content img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--mammoth-blue);
}

.top-player-info {
    text-align: left;
}

.top-player-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.top-player-stats {
    font-size: 13px;
    color: #888;
}

/* Responsive: Tablet */
@media (max-width: 900px) {
    .scoreboard-info-row {
        flex-wrap: wrap;
    }
    .recent-plays-box,
    .last-meeting-box {
        flex: 1 1 45%;
    }
    .top-player-box {
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }
    .top-player-content {
        justify-content: center;
    }
}

/* Responsive: Phone */
@media (max-width: 600px) {
    .scoreboard-info-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .recent-plays-box {
        flex: 1 1 100%;
    }
    .last-meeting-box,
    .top-player-box {
        flex: 1 1 40%;
    }
    .info-box {
        padding: 10px;
    }
    .top-player-box {
        flex-direction: column;
    }
    .top-player-content {
        flex-direction: column;
        text-align: center;
    }
    .top-player-info {
        text-align: center;
    }
}

/* Goalie Row (without Player of Game) */
.goalie-player-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 15px;
    margin-bottom: 15px;
    padding: 10px 0;
}

.goalie-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid var(--concrete);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 140px;
}

.goalie-mini.utah-goalie {
    border-left: 3px solid var(--mammoth-blue);
}

.goalie-mini.opp-goalie {
    border-right: 3px solid var(--opp-color, #888);
}

.goalie-mini-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.goalie-mini-info {
    display: flex;
    flex-direction: column;
}

.goalie-mini-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.goalie-mini-stats {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    color: #888;
}

.player-of-game {
    flex: 1;
    text-align: center;
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid var(--concrete);
    border-radius: 8px;
    padding: 8px 15px;
}

.player-of-game-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.player-of-game-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.player-of-game-content img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.player-of-game-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.player-of-game-stats {
    font-size: 11px;
    color: #888;
}

/* Rink-Centric Stats Layout */
.rink-stats-layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 15px;
    align-items: stretch;
    margin-bottom: 15px;
}

.team-stats-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid var(--concrete);
    border-radius: 10px;
    padding: 12px;
    overflow: hidden;
}


.team-stats-column.utah {
    border-left: 4px solid var(--mammoth-blue);
}

.team-stats-column.opp {
    border-right: 4px solid var(--opp-color, #888);
}

.team-stat-item {
    position: relative;
    background: linear-gradient(145deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 12px 14px;
    flex: 1 0 auto; /* never shrink below the label + value (they were clipped on tablet/phone) */
}


.team-stats-column.utah .team-stat-item {
    border-left: 3px solid var(--mammoth-blue);
}

.team-stats-column.opp .team-stat-item {
    border-right: 3px solid var(--opp-color, #888);
}

.team-stat-item .stat-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.team-stat-item .stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.team-stats-column.opp .team-stat-item {
    text-align: right;
}

/* Penalty Box Display */
.penalty-box {
    position: relative;
    background: linear-gradient(145deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    min-height: auto;
    overflow: visible;
    flex: 1 1 auto;
}

.team-stats-column.utah .penalty-box {
    border-left: 3px solid var(--mammoth-blue);
}

.team-stats-column.opp .penalty-box {
    border-right: 3px solid var(--opp-color, #888);
    text-align: right;
}

.penalty-box-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #c41e3a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.penalty-box-empty {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    color: #555;
}

.penalty-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.penalty-item:last-child {
    margin-bottom: 0;
}

.team-stats-column.opp .penalty-item {
    flex-direction: row-reverse;
}

.penalty-mugshot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #c41e3a;
    flex-shrink: 0;
}

.penalty-info {
    flex: 1;
    min-width: 0;
}

.penalty-player {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.penalty-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #c41e3a;
}

.penalty-type {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    color: #888;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Penalty Box Mobile */
@media (max-width: 768px) {
    .penalty-box {
        padding: 6px 8px;
    }
    .penalty-box-title {
        font-size: 13px;
        margin-bottom: 3px;
    }
    .penalty-item {
        gap: 4px;
    }
    .penalty-mugshot {
        width: 24px;
        height: 24px;
        border-width: 1px;
    }
    .penalty-player {
        font-size: 13px;
    }
    .penalty-time {
        font-size: 14px;
    }
    .penalty-type {
        font-size: 11px;
    }
    .penalty-info {
        line-height: 1.1;
    }
}

@media (max-width: 480px) {
    .penalty-box {
        padding: 5px 6px;
    }
    .penalty-mugshot {
        width: 20px;
        height: 20px;
    }
    .penalty-player {
        font-size: 9px;
    }
    .penalty-time {
        font-size: 10px;
    }
    .penalty-type {
        display: none;
    }
}

/* Compact Goalie Display */
.goalie-compact {
    position: relative;
    background: linear-gradient(145deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    flex: 1 0 auto; /* never shrink below the headshot + save % */
}

.team-stats-column.utah .goalie-compact {
    border-left: 3px solid var(--mammoth-blue);
}

.team-stats-column.opp .goalie-compact {
    border-right: 3px solid var(--opp-color, #888);
    flex-direction: row-reverse;
    text-align: right;
}

.goalie-compact-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--mammoth-blue);
}

.team-stats-column.opp .goalie-compact-img {
    border-color: var(--opp-color, #888);
}

.goalie-compact-info {
    flex: 1;
}

.goalie-compact-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.goalie-compact-sv {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--mammoth-accent);
}

/* Rink Center - Larger */
.rink-center {
    display: flex;
    flex-direction: column;
}

.rink-center .shot-chart-container {
    flex: 1;
}

.rink-center-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid var(--concrete);
    border-radius: 8px;
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Legacy - Keep for backward compatibility but hidden */
.main-stats-row {
    display: none;
}

.goalie-player-row {
    display: none;
}

.side-stat-card {
    display: none;
}

.penalty-mini-type {
    color: #888;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Faceoff Tracker */
.faceoff-tracker {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.faceoff-period-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.faceoff-period-row:last-child {
    border-bottom: none;
}

.faceoff-period-label {
    color: #888;
    font-weight: 600;
    min-width: 50px;
}

.faceoff-period-stats {
    display: flex;
    gap: 20px;
}

.faceoff-team-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.faceoff-wins {
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}

.faceoff-pct {
    color: #888;
    font-size: 11px;
}

.utah-fo { color: var(--mammoth-blue); }

/* Goalie Stats Card */
.goalie-stats-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid var(--concrete);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.goalie-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.goalie-stats-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--mammoth-accent);
    text-transform: uppercase;
}

.goalie-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.goalie-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}

.goalie-card.utah {
    border-left: 3px solid var(--mammoth-blue);
}

.goalie-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
}

.goalie-info {
    flex: 1;
}

.goalie-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.goalie-number {
    font-size: 12px;
    color: #888;
}

.goalie-stat-row {
    display: flex;
    gap: 15px;
    margin-top: 8px;
}

.goalie-stat {
    text-align: center;
}

.goalie-stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.goalie-stat-value.highlight {
    color: var(--mammoth-blue);
}

.goalie-stat-label {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Power Play / Penalty Kill Timer */
.special-teams-banner {
    display: none;
    background: linear-gradient(90deg, rgba(255,193,7,0.2) 0%, rgba(255,193,7,0.1) 100%);
    border: 2px solid #ffc107;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 20px;
    text-align: center;
}

.special-teams-banner.pk {
    background: linear-gradient(90deg, rgba(244,67,54,0.2) 0%, rgba(244,67,54,0.1) 100%);
    border-color: #f44336;
}

.special-teams-banner.active {
    display: block;
    animation: pulse-border 1.5s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 10px rgba(255,193,7,0.3); }
    50% { box-shadow: 0 0 20px rgba(255,193,7,0.6); }
}

.special-teams-banner.pk {
    animation-name: pulse-border-pk;
}

@keyframes pulse-border-pk {
    0%, 100% { box-shadow: 0 0 10px rgba(244,67,54,0.3); }
    50% { box-shadow: 0 0 20px rgba(244,67,54,0.6); }
}

.special-teams-type {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.special-teams-banner .special-teams-type { color: #ffc107; }
.special-teams-banner.pk .special-teams-type { color: #f44336; }

.special-teams-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
}

.special-teams-strength {
    font-size: 14px;
    color: #aaa;
    margin-top: 5px;
}

/* Player of the Game */
.player-of-game {
    background: linear-gradient(145deg, rgba(105,179,231,0.15) 0%, rgba(105,179,231,0.05) 100%);
    border: 2px solid var(--mammoth-blue);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.player-of-game-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.player-of-game-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.player-of-game img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid var(--mammoth-blue);
}

.player-of-game-info {
    text-align: left;
}

.player-of-game-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.player-of-game-stats {
    display: flex;
    gap: 15px;
    margin-top: 8px;
}

.player-of-game-stat {
    background: rgba(0,0,0,0.3);
    padding: 5px 12px;
    border-radius: 5px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.player-of-game-stat span {
    color: #888;
    font-weight: 400;
    margin-right: 5px;
}

/* Rotating Stats Card */
.rotating-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid var(--concrete);
    border-radius: 12px;
    padding: 15px;
    min-height: 180px;
    position: relative;
    overflow: hidden;
}

.rotating-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.rotating-card-tabs {
    display: flex;
    gap: 6px;
}

.rotating-card-tab {
    padding: 4px 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #666;
    background: rgba(0,0,0,0.2);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.rotating-card-tab:hover {
    color: #aaa;
}

.rotating-card-tab.active {
    color: var(--mammoth-blue);
    background: rgba(105,179,231,0.15);
}

.rotating-card-auto {
    font-size: 9px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rotating-card-auto input {
    width: 12px;
    height: 12px;
    cursor: pointer;
}

.rotating-card-content {
    position: relative;
}

.rotating-card-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.rotating-card-panel.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Rink panel adjustments */
.rotating-card .shot-chart-rink {
    max-width: 320px;
    margin: 0 auto;
}

/* Goalies panel adjustments */
.rotating-card .goalie-container {
    flex-direction: row;
    gap: 10px;
}

.rotating-card .goalie-card {
    flex: 1;
}

/* Fastest shots panel adjustments */
.rotating-card .fastest-shot-item {
    padding: 5px 8px;
    margin-bottom: 4px;
}

/* Shot Location Chart - New Layout */
.shot-chart-container {
    display: flex;
    gap: 10px;
    height: 100%;
}

/* Left side - Legend & Stats Box */
.shot-chart-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 90px;
}

.shot-chart-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #cfd3d8;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--concrete);
    border-radius: 6px;
    padding: 8px;
}

.shot-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.shot-chart-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.shot-chart-legend-dot.utah { background: var(--mammoth-blue); }
.shot-chart-legend-dot.opp { background: var(--opp-color, #f44336); }
.shot-chart-legend-dot.goal { background: #FFD700; }

.shot-zone-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zone-stat {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--concrete);
}

.zone-stat.utah {
    border-left: 3px solid var(--mammoth-blue);
}

.zone-stat.opp {
    border-left: 3px solid var(--opp-color, #f44336);
}

.zone-label {
    color: #999;
    font-size: 12px;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

.zone-stat.utah span:last-child {
    font-weight: 700;
    font-size: 20px;
    color: #f2f4f7;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

.zone-stat.opp span:last-child {
    font-weight: 700;
    font-size: 20px;
    color: #f2f4f7;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

/* Period Selector - Vertical */
.period-selector {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--concrete);
    border-radius: 6px;
    padding: 6px;
}

.period-btn {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 8px;
    border: 1px solid var(--concrete);
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.period-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.period-btn.active {
    background: var(--mammoth-blue);
    border-color: var(--mammoth-blue);
    color: #fff;
}

/* Rink wrapper - fills remaining space */
.shot-chart-rink-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 70%;
    margin: 0 auto;
}

/* Rink: a 200 x 85 ft box (28 ft corners). The drawing (#rinkSvg) and the shot dots both use % of this box,
   so they always line up. Lines are drawn in feet from the NHL rulebook. */
.shot-chart-rink {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 200 / 85;
    border-radius: 14% / 32.94%;
    overflow: hidden;
}
.rink-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rink-svg .thin { stroke-width: var(--rink-thin, 0.1667); }
.rink-svg .boards { stroke-width: var(--rink-boards, 0.6); }

/* Centre logo inside the 30 ft centre circle (15% of 200 ft) */
.rink-center-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0.5;
    border-radius: 50%;
    object-fit: contain;
}

.shot-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
    transition: all 0.15s;
    z-index: 5;
    font-family: 'Rajdhani', sans-serif;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* Dots and goalie badges scale with the rink (px per foot), within sensible limits */
.shot-chart-rink .shot-dot { width: clamp(7px, calc(var(--rink-ppf, 4) * 2.6px), 14px); height: clamp(7px, calc(var(--rink-ppf, 4) * 2.6px), 14px); font-size: clamp(5px, calc(var(--rink-ppf, 4) * 1.8px), 9px); }
.shot-chart-rink .shot-dot.goal { width: clamp(9px, calc(var(--rink-ppf, 4) * 3px), 16px); height: clamp(9px, calc(var(--rink-ppf, 4) * 3px), 16px); }
.shot-chart-rink .goalie-indicator { width: clamp(20px, calc(var(--rink-ppf, 4) * 9px), 52px) !important; height: clamp(20px, calc(var(--rink-ppf, 4) * 9px), 52px) !important; }

.shot-dot:hover {
    transform: translate(-50%, -50%) scale(2);
    opacity: 1;
    z-index: 10;
}

.shot-dot.utah { background: var(--mammoth-blue); box-shadow: 0 0 2px rgba(0,0,0,0.4); }
.shot-dot.opp { background: #f44336; box-shadow: 0 0 2px rgba(0,0,0,0.4); }
.shot-dot.goal {
    background: #FFD700 !important;
    border: 2px solid #fff;
    width: 14px;
    height: 14px;
    box-shadow: 0 0 6px #FFD700;
    color: #000;
    z-index: 9 !important;
    font-size: 9px;
    text-shadow: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.shot-dot.goal:hover {
    box-shadow: 0 0 12px #FFD700, 0 0 20px rgba(255, 215, 0, 0.5);
    transform: translate(-50%, -50%) scale(1.4);
    z-index: 11 !important;
}

.shot-dot.in-circle {
    border: 1px solid #fff;
}

/* Goalie Indicator on Ice */
.goalie-indicator {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    z-index: 4;
    cursor: pointer;
    transition: all 0.15s;
    border: 2px solid #fff;
    box-shadow: 0 0 8px rgba(0,0,0,0.6);
    overflow: hidden;
}

.goalie-indicator img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.goalie-indicator.utah {
    box-shadow: 0 0 12px rgba(105, 179, 231, 0.8);
}

.goalie-indicator.opp {
    box-shadow: 0 0 12px rgba(244, 67, 54, 0.8);
}

.goalie-indicator:hover {
    transform: scale(1.4);
    z-index: 11;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
}

/* Goalie Stats Popup */
.goalie-stats-popup {
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #FFD700;
    border-radius: 8px;
    padding: 12px 14px;
    color: #fff;
    font-size: 11px;
    z-index: 1000;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    animation: popupFadeIn 0.15s ease;
}

.goalie-stats-popup-name {
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 2px;
}

.goalie-stats-popup-sv {
    color: #aaa;
    font-size: 10px;
}

.goal-popup {
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #FFD700;
    border-radius: 8px;
    padding: 12px 16px;
    color: #fff;
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    animation: popupFadeIn 0.15s ease;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.goal-popup-scorer {
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 4px;
}

.goal-popup-assist {
    color: #aaa;
    font-size: 11px;
}

.season-note {
    font-size: 9px;
    color: #888;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Fastest Shots */
.fastest-shots-card {
    padding: 0;
}

.fastest-shots-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.fastest-shot-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    margin-bottom: 6px;
}

.fastest-shot-item:last-child {
    margin-bottom: 0;
}

.fastest-shot-item.utah {
    border-left: 3px solid var(--mammoth-blue);
}

.fastest-shot-item.opp {
    border-left: 3px solid #f44336;
}

.fastest-shot-rank {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #555;
    min-width: 18px;
}

.fastest-shot-speed {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    min-width: 55px;
}

.fastest-shot-speed .unit {
    font-size: 10px;
    color: #888;
    font-weight: 400;
}

.fastest-shot-player {
    flex: 1;
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fastest-shot-player .team {
    font-size: 9px;
    color: #666;
}

.no-shot-data {
    font-size: 11px;
    color: #666;
    text-align: center;
    padding: 10px;
}

.goal-light {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #f44336;
    border-radius: 50%;
    margin-left: 5px;
    animation: goal-flash 0.6s ease-in-out infinite;
    box-shadow: 0 0 6px #f44336;
}

@keyframes goal-flash {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px #f44336; }
    50% { opacity: 0.4; box-shadow: 0 0 2px #f44336; }
}

/* Skating Speed Card */
.skating-speed-card {
    padding: 5px;
}

.skating-speed-item {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    margin-bottom: 3px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    font-size: 11px;
}

.skating-speed-item.utah {
    border-left: 2px solid var(--mammoth-blue);
}

.skating-speed-item.opp {
    border-left: 2px solid #888;
}

.skating-speed-rank {
    width: 18px;
    color: #666;
    font-weight: 600;
}

.skating-speed-value {
    font-weight: 700;
    color: #4CAF50;
    min-width: 70px;
}

.skating-speed-value .unit {
    font-size: 9px;
    color: #888;
    font-weight: 400;
}

.skating-speed-player {
    flex: 1;
    color: #ccc;
}

.skating-speed-player .team {
    font-size: 9px;
    color: #666;
}

/* Time on Ice Card */
.toi-card {
    padding: 5px;
}

.toi-team-section {
    margin-bottom: 8px;
}

.toi-team-header {
    font-size: 10px;
    font-weight: 600;
    color: var(--mammoth-blue);
    margin-bottom: 4px;
    padding-left: 4px;
}

.toi-team-header.opp {
    color: #888;
}

.toi-item {
    display: flex;
    align-items: center;
    padding: 3px 6px;
    margin-bottom: 2px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    font-size: 10px;
}

.toi-item img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 6px;
    object-fit: cover;
}

.toi-item .player-info {
    flex: 1;
    overflow: hidden;
}

.toi-item .player-name {
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toi-item .player-pos {
    font-size: 9px;
    color: #666;
}

.toi-item .toi-value {
    font-weight: 700;
    color: var(--mammoth-accent);
    min-width: 40px;
    text-align: right;
}

/* Compact Goalie Stats */
.goalie-stats-card {
    padding: 0;
    margin-bottom: 12px;
}

.goalie-stats-header {
    margin-bottom: 6px;
}

.goalie-stats-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--mammoth-accent);
    text-transform: uppercase;
}

.goalie-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.goalie-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
}

.goalie-card.utah {
    border-left: 3px solid var(--mammoth-blue);
}

.goalie-card img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
}

.goalie-info {
    flex: 1;
    min-width: 0;
}

.goalie-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goalie-number {
    font-size: 9px;
    color: #888;
}

.goalie-stat-row {
    display: flex;
    gap: 6px;
    margin-top: 3px;
}

.goalie-stat {
    text-align: center;
}

.goalie-stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.goalie-stat-value.highlight {
    color: var(--mammoth-blue);
}

.goalie-stat-label {
    font-size: 7px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Fit on MacBook Pro 16" and iPad Pro 12" without scrolling */
@media (max-height: 900px) {
    .scoreboard {
        padding: 15px 20px;
    }
    .scoreboard-main {
        margin: 10px 0;
    }
    .team-logo {
        width: 80px;
        height: 80px;
    }
    .score {
        font-size: 56px;
    }
    .team-name {
        font-size: 22px;
    }
    .pp-indicator {
        padding: 4px 8px;
    }
    .pp-indicator-text {
        font-size: 10px;
    }
    .rink-stats-layout {
        grid-template-columns: 160px 1fr 160px;
        gap: 10px;
    }
    .team-stat-item {
        padding: 8px 10px;
    }
    .team-stat-item .stat-value {
        font-size: 18px;
    }
    .penalty-box {
        padding: 8px 10px;
        min-height: 60px;
    }
    .goalie-compact {
        padding: 8px 10px;
    }
    .goalie-compact-img {
        width: 30px;
        height: 30px;
    }
    .shot-chart-rink {
        max-width: 350px;
    }
    .rink-center-card {
        padding: 8px;
    }
}

@media (max-width: 1024px) {
    .rink-stats-layout {
        grid-template-columns: 150px 1fr 150px;
        gap: 8px;
    }
    .team-stat-item .stat-value {
        font-size: 18px;
    }
    .goalie-compact-name {
        font-size: 12px;
    }
    .goalie-compact-sv {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .rink-stats-layout {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .rink-center {
        order: -1;
    }
    .shot-chart-rink-area {
        max-width: 100%;
    }
    .shot-chart-rink {
        max-width: 100%;
    }
    .team-stats-columns-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .team-stats-column.opp .team-stat-item,
    .team-stats-column.opp .penalty-box,
    .team-stats-column.opp .goalie-compact {
        text-align: left;
        border-right: none;
        border-left: 3px solid var(--opp-color, #888);
    }
    .team-stats-column.opp .goalie-compact {
        flex-direction: row;
    }
    .goalie-container {
        flex-direction: row;
    }
    .goalie-card {
        flex: 1;
    }
}

@media (max-width: 600px) {
    .goalie-container {
        flex-direction: column;
    }
    .team-stat-item .stat-value {
        font-size: 16px;
    }
    .goalie-compact-name {
        font-size: 11px;
    }
    .goalie-compact-sv {
        font-size: 13px;
    }
}

/* Past Game Selector */
/* Past Games List */
.pg-page-header {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.pg-list { display: flex; flex-direction: column; gap: 8px; max-width: 700px; margin: 0 auto; }

.pg-card {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 4px solid #333;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.pg-card:hover { background: rgba(255,255,255,0.08); transform: translateX(3px); }
.pg-card.win { border-left-color: #4caf50; }
.pg-card.loss { border-left-color: #f44336; }
.pg-card.live { border-left-color: var(--mammoth-blue); animation: pulse-border 1.5s infinite; }
@keyframes pulse-border { 0%,100% { border-left-color: var(--mammoth-blue); } 50% { border-left-color: #fff; } }

.pg-date { font-size: 0.78rem; color: #888; width: 46px; flex-shrink: 0; text-align: center; }
.pg-opp-logo { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.pg-matchup { flex: 1; }
.pg-matchup-line { font-size: 0.95rem; font-weight: 600; color: #ddd; }
.pg-score-line { font-size: 0.8rem; color: #aaa; margin-top: 2px; }
.pg-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; flex-shrink: 0; }
.pg-badge.win { background: rgba(76,175,80,0.2); color: #4caf50; }
.pg-badge.loss { background: rgba(244,67,54,0.2); color: #f44336; }
.pg-badge.live { background: rgba(74,158,255,0.2); color: var(--mammoth-blue); }
.pg-badge.upcoming { background: rgba(255,255,255,0.07); color: #666; }
.pg-chevron { color: #444; font-size: 0.9rem; flex-shrink: 0; }

/* Past Game Detail Modal */
.pg-modal {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85); z-index: 10000;
    align-items: center; justify-content: center; padding: 20px;
}
.pg-modal.open { display: flex; }
.pg-modal-content {
    background: #141824; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px; padding: 24px; width: 100%; max-width: 560px;
    max-height: 90vh; overflow-y: auto; position: relative;
}
.pg-modal-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; color: #aaa; font-size: 1.4rem;
    cursor: pointer; line-height: 1;
}
.pg-modal-close:hover { color: #fff; }

.past-game-matchup {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px 0;
    border-bottom: 1px solid var(--concrete);
    margin-bottom: 15px;
}

.past-game-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.past-game-team img {
    width: 60px;
    height: 60px;
}

.past-game-team-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.past-game-score {
    font-family: 'Rajdhani', sans-serif;
    font-size: 42px;
    font-weight: 700;
}

.past-game-score.winner {
    color: var(--mammoth-blue);
}

.past-game-vs {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    color: #555;
}

.past-game-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.past-game-stat {
    text-align: center;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}

.past-game-stat-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.past-game-stat-values {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.past-game-stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.past-game-stat-value.utah { color: var(--mammoth-blue); }

/* Stats Grid */
/* Stats Row - grid with rotating card */
.stats-row {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    margin-bottom: 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

@media (max-width: 1100px) {
    .stats-row {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.stat-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid var(--concrete);
    border-radius: 12px;
    padding: 25px;
}

.stat-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--mammoth-accent);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.stat-comparison {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 38px;
    font-weight: 700;
}

.utah-stat {
    color: var(--mammoth-blue);
}

.stat-bar-container {
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.stat-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--mammoth-blue), var(--mammoth-accent));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.stat-subtext {
    font-size: 13px;
    color: #aaa;
    margin-top: 10px;
    letter-spacing: 1px;
}

.shots-by-period {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.shots-pill {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
    background: rgba(255,255,255,0.03);
}

.shots-pill .label {
    font-size: 11px;
    letter-spacing: 2px;
    color: #888;
    text-transform: uppercase;
}

.shots-pill .nums {
    margin-top: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.penalty-list {
    margin-top: 10px;
    display: grid;
    gap: 8px;
    max-height: 170px;
    overflow: auto;
    padding-right: 6px;
}

.penalty-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
}

.penalty-headshot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.15);
    flex: 0 0 auto;
}

.penalty-meta {
    min-width: 0;
}

.penalty-meta .who {
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.penalty-meta .what {
    font-size: 12px;
    color: #aaa;
    margin-top: 2px;
}

.penalty-time {
    margin-left: auto;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    color: var(--mammoth-accent);
    white-space: nowrap;
}

.three-stars {
    margin-top: 20px;
    margin-bottom: 30px;
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px;
    background: rgba(255,255,255,0.03);
}

.three-stars-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--mammoth-accent);
    text-align: center;
    margin-bottom: 12px;
}

.stars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.star-card {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 12px;
    background: rgba(0,0,0,0.25);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.star-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--star-team-logo);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.12;
    z-index: 0;
}

.star-card > * {
    position: relative;
    z-index: 1;
}

.star-card img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--star-team-color, var(--mammoth-blue));
    margin: 6px auto 10px;
}

.star-rank {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ddd;
}

.star-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 800;
    margin-top: 6px;
}

.star-stats {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--mammoth-accent);
    margin-top: 6px;
}

@media (max-width: 900px) {
    .stars-grid {
        grid-template-columns: 1fr;
    }
}

/* PLAYER STATS STYLES */
.player-stats-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.team-panel {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid var(--concrete);
    border-radius: 12px;
    padding: 18px;
}

.team-panel.utah {
    border-color: var(--mammoth-blue);
    box-shadow: 0 0 20px rgba(105, 179, 231, 0.15);
}

.team-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255,255,255,0.06);
}

.team-panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.team-panel-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

.team-panel-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-panel-subtitle {
    font-size: 12px;
    color: #888;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.player-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
}

.player-table th {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #888;
    text-align: left;
    padding: 10px 8px;
    border-bottom: 2px solid rgba(255,255,255,0.06);
    text-transform: uppercase;
    white-space: nowrap;
}

.player-table td {
    padding: 9px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: middle;
    font-size: 20px;
}

.player-table tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
}

.player-table .num {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-align: center;
    width: 52px;
    color: var(--mammoth-accent);
}

.player-table .stat {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-align: center;
    width: 56px;
}

.player-table .toi {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-align: center;
    width: 70px;
    color: #ddd;
}

.player-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.player-headshot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    object-fit: cover;
    flex: 0 0 auto;
}

.player-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    margin: 10px 0 8px;
}

@media (max-width: 900px) {
    .player-stats-columns {
        grid-template-columns: 1fr;
    }
}

/* Legacy player card styles (kept for fallback/older rendering) */
.player-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid var(--concrete);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.player-card:hover {
    border-color: var(--mammoth-blue);
    box-shadow: 0 8px 20px rgba(105, 179, 231, 0.2);
}

.player-card .player-headshot {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--mammoth-blue);
    object-fit: cover;
}

.player-info {
    flex: 1;
}

.player-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--mammoth-blue);
    margin-bottom: 5px;
}

.player-position {
    font-size: 14px;
    color: #888;
    letter-spacing: 1px;
}

.player-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.stat-item {
    text-align: center;
}

.stat-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 3px;
}

.stat-number {
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--mammoth-accent);
}

/* PLAY-BY-PLAY STYLES */
.play-feed {
    max-height: 800px;
    overflow-y: auto;
}

.play-item {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid var(--concrete);
    border-left: 4px solid var(--mammoth-accent);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.play-item.goal {
    border-left-color: var(--mammoth-blue);
    background: linear-gradient(145deg, rgba(105, 179, 231, 0.1) 0%, rgba(105, 179, 231, 0.05) 100%);
}

.play-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    color: var(--mammoth-accent);
    margin-bottom: 8px;
}

.play-description {
    font-size: 18px;
    line-height: 1.6;
}

/* Play-by-Play 4-Column Highlights Box */
.pbp-highlights-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid var(--concrete);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 25px;
}

.highlights-column {
    min-height: 80px;
}

.highlights-column-header {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 10px 10px 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--concrete);
    text-align: center;
    color: var(--column-team-color, #888);
    border-bottom-color: var(--column-team-color, #888);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.05);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 0 12px var(--column-team-color, rgba(255, 255, 255, 0.2));
}

.highlights-column-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.highlight-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    font-size: 12px;
    border-left: 3px solid var(--column-team-color, #888);
}

.highlight-item.penalty {
    border-left-color: #c41e3a;
}

.highlight-player-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.highlight-headshot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--column-team-color, #888);
    flex-shrink: 0;
}

.highlight-team-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.highlight-player {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
}

.highlight-details {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 34px;
}

.highlight-time {
    font-size: 11px;
    color: #888;
}

.highlight-info {
    font-size: 11px;
    color: #aaa;
}

.highlight-type {
    font-size: 10px;
    font-weight: 700;
    color: #ffd700;
    text-transform: uppercase;
}

.no-highlights {
    text-align: center;
    color: #555;
    font-size: 14px;
    padding: 10px;
}

@media (max-width: 900px) {
    .pbp-highlights-box {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .pbp-highlights-box {
        grid-template-columns: 1fr;
    }
}

.pbp-other-plays {
    margin-top: 20px;
}

.pbp-section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* SCHEDULE STYLES */
.schedule-section {
    margin-bottom: 40px;
}

.section-header {
    font-family: 'Rajdhani', sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--mammoth-blue);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--concrete);
    text-transform: uppercase;
}

.game-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid var(--concrete);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.game-card.current {
    border-color: var(--mammoth-blue);
    box-shadow: 0 0 30px var(--led-glow);
}

.game-date {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    color: #888;
    min-width: 150px;
}

.game-teams {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.game-team {
    display: flex;
    align-items: center;
    gap: 15px;
}

.game-team-logo {
    width: 50px;
    height: 50px;
}

.game-team-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.game-score {
    font-family: 'Rajdhani', sans-serif;
    font-size: 36px;
    font-weight: 700;
    min-width: 100px;
    text-align: center;
}

.game-status-badge {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 20px;
    background: var(--concrete);
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-status-badge.live {
    background: var(--mammoth-accent);
    color: var(--stadium-black);
    animation: pulse 2s ease infinite;
}

/* Schedule Mobile Styles */
@media (max-width: 768px) {
    .game-card {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        text-align: center;
    }
    .game-date {
        min-width: auto;
        font-size: 14px;
    }
    .game-teams {
        flex-direction: column;
        gap: 10px;
    }
    .game-team {
        gap: 10px;
    }
    .game-team-logo {
        width: 40px;
        height: 40px;
    }
    .game-team-name {
        font-size: 18px;
    }
    .game-score {
        font-size: 28px;
        min-width: auto;
    }
    .game-status-badge {
        font-size: 12px;
        padding: 6px 12px;
    }
    .section-header {
        font-size: 22px;
        letter-spacing: 1px;
    }
}

/* STANDINGS STYLES */
.standings-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 0 25px;
    flex-wrap: wrap;
}

.standings-toggle {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 18px;
    background: linear-gradient(145deg, var(--metal) 0%, var(--concrete) 100%);
    border: 2px solid var(--concrete);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

.standings-toggle.active {
    background: linear-gradient(145deg, var(--mammoth-dark-blue) 0%, var(--mammoth-blue) 100%);
    border-color: var(--mammoth-accent);
    box-shadow: 0 0 20px var(--led-glow);
}

.standings-conference {
    margin-bottom: 50px;
}

.standings-section-header {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ddd;
    margin: 10px 0 18px;
    text-align: center;
}

.conference-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--team-color-text, var(--mammoth-blue));
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
}

.division {
    margin-bottom: 40px;
}

.division-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--mammoth-accent);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--concrete);
    text-transform: uppercase;
}

.standings-table {
    width: 100%;
    border-collapse: collapse;
}

.standings-table th {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #888;
    text-align: left;
    padding: 15px 10px;
    border-bottom: 2px solid var(--concrete);
    text-transform: uppercase;
}

.standings-table td {
    padding: 15px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.standings-table tr:hover {
    background: rgba(105, 179, 231, 0.05);
}

.standings-table tr.utah-row {
    background: linear-gradient(90deg, rgba(105, 179, 231, 0.15) 0%, transparent 100%);
    border-left: 4px solid var(--mammoth-blue);
}

.standings-table tr.playoff-spot {
    background: linear-gradient(90deg, rgba(105, 179, 231, 0.08) 0%, transparent 100%);
}

.standings-table tr.wildcard-spot {
    background: linear-gradient(90deg, rgba(255, 184, 28, 0.08) 0%, transparent 100%);
}

.playoff-line {
    border-top: 3px dashed var(--mammoth-blue) !important;
}

.wildcard-line {
    border-top: 3px dashed var(--mammoth-accent) !important;
}

.standings-rank {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--mammoth-accent);
    min-width: 40px;
}

.playoff-badge {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.playoff-badge.clinched {
    background: var(--team-color-text, var(--mammoth-blue));
    color: var(--stadium-black);
}

.playoff-badge.wildcard {
    background: var(--mammoth-accent);
    color: var(--stadium-black);
}

.playoff-badge.in-race {
    background: var(--concrete);
    color: #888;
}

.standings-team {
    display: flex;
    align-items: center;
    gap: 15px;
}

.standings-logo {
    width: 30px;
    height: 30px;
}

.standings-team-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.team-stat-num {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

/* Standings Mobile Styles */
@media (max-width: 768px) {
    .standings-table {
        font-size: 12px;
    }
    .standings-table th {
        font-size: 10px;
        padding: 8px 4px;
        letter-spacing: 0;
    }
    .standings-table td {
        padding: 10px 4px;
    }
    .standings-logo {
        width: 22px;
        height: 22px;
    }
    .standings-team {
        gap: 8px;
    }
    .standings-team-name {
        font-size: 13px;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .standings-rank {
        font-size: 12px;
        min-width: 20px;
    }
    .team-stat-num {
        font-size: 12px;
    }
    .conference-name {
        font-size: 24px;
    }
    .division-name {
        font-size: 18px;
    }
    .standings-section-header {
        font-size: 16px;
    }
    .standings-controls {
        gap: 5px;
    }
    .standings-toggle {
        font-size: 12px;
        padding: 8px 12px;
    }
    /* Hide less important columns on mobile */
    .standings-table th:nth-child(n+6),
    .standings-table td:nth-child(n+6) {
        display: none;
    }
}

/* Player Stats Mobile Styles */
@media (max-width: 768px) {
    .player-table th {
        font-size: 13px;
        padding: 6px 4px;
        letter-spacing: 0;
    }
    .player-table td {
        padding: 6px 4px;
        font-size: 15px;
    }
    .player-table .num {
        width: 30px;
        font-size: 14px;
    }
    .player-table .stat {
        width: 32px;
        font-size: 14px;
    }
    .player-table .toi {
        width: 40px;
        font-size: 14px;
    }
    .player-headshot {
        width: 24px;
        height: 24px;
    }
    .player-name-cell {
        gap: 6px;
    }
    .player-name-text {
        font-size: 14px;
    }
    /* Hide some columns on mobile */
    .player-table th:nth-child(n+7),
    .player-table td:nth-child(n+7) {
        display: none;
    }
}

/* Play-by-Play Mobile Styles */
@media (max-width: 768px) {
    .play-feed {
        max-height: none;
    }
    .play-item {
        padding: 12px;
        margin-bottom: 10px;
    }
    .play-time {
        font-size: 12px;
    }
    .play-description {
        font-size: 14px;
    }
}

/* Roster Mobile Styles */
@media (max-width: 768px) {
    .roster-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .roster-card {
        padding: 12px;
    }
    .roster-headshot {
        width: 60px;
        height: 60px;
    }
    .roster-number {
        font-size: 22px;
    }
    .roster-name {
        font-size: 14px;
    }
    .roster-position {
        font-size: 11px;
    }
    .roster-section-title {
        font-size: 18px;
    }
}

/* Bracket Mobile Styles */
@media (max-width: 768px) {
    .bracket-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .bracket-header {
        font-size: 24px;
    }
    .bracket-subtitle {
        font-size: 12px;
    }
}

/* Past Games Mobile Styles */
@media (max-width: 768px) {
    .past-game-matchup {
        flex-direction: column;
        gap: 15px;
    }
    .past-game-team img {
        width: 40px;
        height: 40px;
    }
    .past-game-team-name {
        font-size: 12px;
    }
    .past-game-score {
        font-size: 32px;
    }
    .past-game-vs {
        font-size: 14px;
    }
    .past-game-stats {
        flex-direction: column;
        gap: 8px;
    }
    .past-game-stat {
        min-width: auto;
    }
    .past-game-select {
        min-width: auto;
        width: 100%;
        font-size: 12px;
    }
    .past-game-header {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
}

/* Last Updated: a quiet line at the bottom of the page (in normal flow, so it never covers content) */
.last-updated {
    margin: 4px 0 18px;
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #6b6b6b;
}

/* Loading */
.loading {
    text-align: center;
    padding: 100px 20px;
}

.spinner {
    border: 6px solid var(--concrete);
    border-left-color: var(--mammoth-blue);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1s linear infinite;
    margin: 0 auto 30px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--stadium-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--mammoth-blue);
    border-radius: 5px;
}

/* MOBILE RESPONSIVE STYLES */
@media (max-width: 900px) {
    .scoreboard {
        padding: 20px 15px;
    }

    .scoreboard-main {
        gap: 10px;
    }

    .team-side {
        gap: 8px;
    }

    .team-logo {
        width: 60px;
        height: 60px;
    }

    .pp-indicator {
        padding: 3px 6px;
    }

    .pp-indicator-text {
        font-size: 9px;
    }

    .team-name {
        font-size: 18px;
    }

    .team-record {
        font-size: 11px;
    }

    .team-info {
        min-width: 70px;
    }

    .score {
        font-size: 48px;
        min-width: 40px;
    }

    .game-center {
        padding: 0 12px;
        min-width: 70px;
    }

    .clock {
        font-size: 24px;
    }

    .period {
        font-size: 12px;
    }

    .game-status {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .live-badge {
        top: 10px;
        right: 10px;
        padding: 5px 8px;
        font-size: 10px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.team-abbrev {
    display: none;
}

/* Phone scoreboard: one compact row  [logo/abbrev  score]  clock  [score  logo/abbrev] */
@media (max-width: 600px) {
    .scoreboard {
        padding: 14px 12px 12px;
    }

    .game-status {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .scoreboard-main {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 6px;
    }

    .team-side {
        display: grid;
        align-items: center;
        column-gap: 8px;
        row-gap: 2px;
    }

    .utah-side {
        grid-template-columns: 1fr auto;
        grid-template-areas: "logo score" "info score" "pp score";
    }

    .opp-side {
        grid-template-columns: auto 1fr;
        grid-template-areas: "score logo" "score info" "score pp";
    }

    .team-side .team-logo { grid-area: logo; justify-self: center; width: 44px; height: 44px; }
    .team-side .team-info { grid-area: info; min-width: 0; }
    .team-side .score     { grid-area: score; font-size: 44px; min-width: 0; }
    .team-side .pp-indicator { grid-area: pp; justify-self: center; }
    .team-side .team-stats-inline { display: none; }

    .team-side .team-name { display: none; }
    .team-side .team-abbrev {
        display: block;
        font-family: 'Rajdhani', sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #f2f4f7;
    }

    .team-record {
        font-size: 12px;
    }

    .game-center {
        border-left: 1px solid var(--concrete);
        border-right: 1px solid var(--concrete);
        padding: 0 10px;
        min-width: 0;
        margin: 0;
    }

    .clock {
        font-size: 22px;
    }

    .period {
        font-size: 13px;
    }

    .scoreboard-info-row {
        margin-top: 12px;
        padding-top: 10px;
    }

    .last-meeting {
        font-size: 11px;
    }

    .venue-header {
        padding: 18px 12px 14px;
        margin-bottom: 16px;
    }

    .venue-name {
        font-size: 24px;
        letter-spacing: 3px;
    }

    .venue-location {
        font-size: 13px;
        letter-spacing: 1px;
    }

    .game-countdown {
        font-size: 15px;
    }
}

/* Phone shot chart: legend / circle % / periods in a row above the rink, so the rink gets the full width */
@media (max-width: 600px) {
    .rink-center .shot-chart-container {
        flex-direction: column;
    }
    .shot-chart-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 6px;
        min-width: 0;
    }
    .shot-chart-legend {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    .shot-zone-stats {
        flex-direction: row;
    }
    .zone-stat {
        padding: 4px 8px;
    }
    .zone-stat.utah span:last-child,
    .zone-stat.opp span:last-child {
        font-size: 17px;
    }
    .period-selector {
        flex-direction: row;
        align-items: center;
    }
    .period-btn {
        padding: 6px 10px;
    }
    .shot-chart-rink-area {
        max-width: 100%;
        width: 100%;
    }
}

/* ROSTER & MODAL STYLES */
.roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.roster-section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--mammoth-accent);
    margin: 30px 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--concrete);
    text-transform: uppercase;
}

.roster-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 2px solid var(--concrete);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.roster-card:hover {
    border-color: var(--mammoth-blue);
    box-shadow: 0 8px 20px rgba(105, 179, 231, 0.3);
    transform: translateY(-5px);
}

.roster-headshot {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--mammoth-blue);
    margin: 0 auto 12px;
    object-fit: cover;
}

.roster-number {
    font-family: 'Rajdhani', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--mammoth-blue);
    line-height: 1;
}

.roster-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 8px 0 4px;
}

.roster-position {
    font-size: 13px;
    color: #888;
    letter-spacing: 1px;
}

/* EDGE Speed Stats Section */
.edge-stats-section {
    background: linear-gradient(145deg, rgba(105, 179, 231, 0.1), rgba(26, 77, 122, 0.2));
    border: 2px solid var(--mammoth-blue);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
}

.edge-stats-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}

.edge-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.edge-stat-card {
    background: linear-gradient(145deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.edge-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(105, 179, 231, 0.3);
}

.edge-stat-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.edge-stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--mammoth-blue);
    line-height: 1;
    margin-bottom: 5px;
}

.edge-stat-unit {
    font-size: 14px;
    color: #aaa;
}

.edge-stat-player {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.edge-stat-headshot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--mammoth-blue);
    object-fit: cover;
}

.edge-stat-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.edge-stat-percentile {
    font-size: 11px;
    color: #4CAF50;
    margin-top: 4px;
}

.edge-stats-loading {
    text-align: center;
    color: #888;
    padding: 20px;
}

@media (max-width: 600px) {
    .edge-stats-grid {
        grid-template-columns: 1fr;
    }
    .edge-stat-value {
        font-size: 28px;
    }
}

.player-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.95);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.player-modal-content {
    background: linear-gradient(145deg, var(--stadium-dark), var(--stadium-darker));
    border: 3px solid var(--mammoth-blue);
    border-radius: 20px;
    max-width: 900px;
    width: 100%;
    padding: 40px;
    position: relative;
    box-shadow: 0 20px 60px rgba(105, 179, 231, 0.4);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 36px;
    background: rgba(0,0,0,0.5);
    border: 2px solid #555;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.modal-close:hover,
.modal-close:active {
    color: var(--mammoth-blue);
    border-color: var(--mammoth-blue);
    background: rgba(105, 179, 231, 0.2);
}

@media (max-width: 600px) {
    .modal-close {
        width: 60px;
        height: 60px;
        font-size: 40px;
        top: 5px;
        right: 5px;
    }
    .player-modal-content {
        padding: 20px;
        padding-top: 70px;
    }
}

.modal-player-header {
    display: flex;
    gap: 25px;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 2px solid var(--concrete);
}

.modal-player-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid var(--mammoth-blue);
    object-fit: cover;
}

.modal-player-info h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 38px;
    font-weight: 700;
    color: var(--mammoth-blue);
    margin-bottom: 10px;
}

.modal-player-details {
    font-size: 15px;
    color: #aaa;
    line-height: 1.7;
}

.modal-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.modal-stat {
    background: rgba(255,255,255,0.05);
    border: 2px solid var(--concrete);
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    transition: all 0.3s ease;
}

.modal-stat:hover {
    border-color: var(--mammoth-blue);
    background: rgba(105, 179, 231, 0.08);
}

.modal-stat-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.modal-stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--mammoth-blue);
}

.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.95);
    z-index: 2001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.video-modal-content {
    background: linear-gradient(145deg, var(--stadium-dark), var(--stadium-darker));
    border: 3px solid var(--mammoth-blue);
    border-radius: 16px;
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    padding: 40px;
    position: relative;
    box-shadow: 0 20px 60px rgba(105, 179, 231, 0.4);
    animation: modalSlideIn 0.3s ease;
    display: flex;
    flex-direction: column;
}

.video-modal-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--mammoth-blue);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 2px;
}

#videoIframeWrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(0,0,0,0.4);
}

#videoIframeWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

#goalVideoWrap {
    position: relative;
    width: 100%;
    min-height: 500px;
    height: 100%;
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(0,0,0,0.4);
}

#goalVideoWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-no-content {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .video-modal-content {
        padding: 20px;
        padding-top: 70px;
    }

    .video-modal-title {
        font-size: 20px;
    }
}

/* BRACKET STYLES */
.bracket-container {
    padding: 20px;
    overflow-x: auto;
}

.bracket-header {
    font-family: 'Rajdhani', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--mammoth-blue);
    text-align: center;
    margin-bottom: 5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.bracket-subtitle {
    text-align: center;
    color: #888;
    margin-bottom: 15px;
    font-size: 13px;
}

.bracket-table {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 8px 0;
}

.bracket-table td {
    vertical-align: middle;
    padding: 0;
}

.bracket-table .conf-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--mammoth-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 10px 5px;
    text-align: center;
}

.bracket-table .west-label {
    transform: rotate(180deg);
}

.bracket-round {
    display: block;
    padding: 5px;
}

.bracket-round .matchup {
    display: block;
    margin: 0 0 12px 0;
    clear: both;
}

.bracket-round .matchup:last-child {
    margin-bottom: 0;
}

.matchup {
    display: block;
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 2px solid var(--concrete);
    border-radius: 6px;
    padding: 5px;
    width: 115px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    cursor: pointer;
}

.matchup:hover {
    border-color: var(--mammoth-blue);
    box-shadow: 0 4px 12px rgba(105, 179, 231, 0.3);
    transform: translateY(-2px);
}

.matchup.tbd {
    border-style: dashed;
    opacity: 0.5;
    cursor: default;
}

/* H2H Modal */
.h2h-modal {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8); z-index: 10000; align-items: center; justify-content: center;
    padding: 20px;
}
.h2h-modal.open { display: flex; }
.h2h-modal-content {
    background: #12151f; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
    padding: 28px 24px; max-width: 500px; width: 100%; max-height: 85vh;
    overflow-y: auto; position: relative;
}
.h2h-header { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; }
.h2h-team { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.h2h-logo { width: 60px; height: 60px; object-fit: contain; }
.h2h-team-name { font-size: 0.8rem; font-weight: 600; color: #ccc; }
.h2h-vs { font-size: 1.8rem; font-weight: 800; color: #555; }
.h2h-record-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; margin-bottom: 18px; }
.h2h-record-num { font-size: 1.5rem; font-weight: 800; color: #fff; }
.h2h-record-label { font-size: 0.7rem; color: #666; letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.h2h-section-title { font-size: 0.68rem; color: #666; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 8px; }
.h2h-game-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; margin-bottom: 5px; background: rgba(255,255,255,0.04); font-size: 0.82rem; }
.h2h-game-date { color: #888; width: 55px; flex-shrink: 0; }
.h2h-game-score { flex: 1; font-weight: 600; color: #ddd; }
.h2h-game-row.win { border-left: 2px solid #4caf50; }
.h2h-game-row.loss { border-left: 2px solid #f44336; }
.h2h-winner-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)); }
.h2h-loading { text-align: center; padding: 30px; color: #666; }
.h2h-series-banner { text-align: center; padding: 10px; background: rgba(var(--mammoth-blue-rgb,105,179,231),0.1); border: 1px solid rgba(105,179,231,0.2); border-radius: 8px; margin-bottom: 16px; font-size: 0.85rem; color: #aaa; }

.matchup-team {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 5px;
    margin: 2px 0;
    background: rgba(255,255,255,0.03);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.matchup-team.utah {
    background: linear-gradient(90deg, rgba(105, 179, 231, 0.25), rgba(105, 179, 231, 0.08));
    border-left: 2px solid var(--mammoth-blue);
    box-shadow: 0 0 8px rgba(105, 179, 231, 0.3);
}

.matchup-team.tbd-team {
    opacity: 0.4;
}

.matchup.series-active {
    border-color: var(--mammoth-blue);
    box-shadow: 0 0 12px rgba(105, 179, 231, 0.3);
}

.matchup.series-complete {
    opacity: 0.85;
}

.matchup-team.series-winner {
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.25), rgba(76, 175, 80, 0.08));
    border-left: 2px solid #4CAF50;
}

.matchup-team.series-winner .matchup-team-name {
    color: #4CAF50;
}

.series-wins {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--mammoth-accent);
    margin-left: auto;
}

.matchup-logo {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.matchup-seed {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 10px;
    color: var(--mammoth-accent);
    min-width: 12px;
    text-align: center;
}

.matchup-info {
    flex: 1;
    min-width: 0;
}

.matchup-team-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matchup-record {
    font-size: 8px;
    color: #888;
}

.connector-cell {
    width: 15px;
    text-align: center;
    color: var(--concrete);
}

.stanley-cup-cell {
    text-align: center;
    padding: 0 15px !important;
}

.stanley-cup-trophy {
    font-size: 36px;
    margin-bottom: 5px;
    filter: drop-shadow(0 0 12px rgba(255, 184, 28, 0.5));
}

.stanley-cup-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.final-matchup {
    width: 115px;
    margin: 0 auto;
}

.vs-divider {
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 9px;
    color: #666;
    padding: 2px 0;
}

/* Responsive */
@media (max-width: 1000px) {
    .bracket-table {
        transform: scale(0.85);
        transform-origin: top center;
    }
}

@media (max-width: 800px) {
    .bracket-table {
        transform: scale(0.7);
        transform-origin: top center;
    }
}

/* ===== PLAYOFFS PAGE ===== */
/* Series game circles */
.series-dots { display: flex; gap: 5px; margin-top: 5px; justify-content: center; }
.series-dot { width: 10px; height: 10px; border-radius: 50%; background: #2a2a2a; border: 1px solid #444; flex-shrink: 0; }
.series-dot.win { background: #4caf50; border-color: #4caf50; }
.series-dot.loss { background: #f44336; border-color: #f44336; }

/* Playoff series bar on main scoreboard */
#playoffSeriesBar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 7px 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    margin: 6px auto 0;
    max-width: 420px;
    font-size: 0.82rem;
    flex-wrap: wrap;
}
.psb-label { color: #777; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; }
.psb-score { font-weight: 700; color: #fff; font-size: 0.95rem; }
.psb-game { color: #999; font-size: 0.75rem; }

/* Playoff series hero */
.playoff-series-hero {
    background: linear-gradient(135deg, rgba(20,20,30,0.95) 0%, rgba(30,30,45,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 24px 20px 20px;
    margin-bottom: 20px;
    text-align: center;
}
.series-hero-eyebrow { font-size: 0.7rem; color: #888; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; }
.series-hero-teams { display: flex; align-items: center; justify-content: center; gap: 0; }
.series-hero-team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 100px; }
.series-hero-team.my-team .series-hero-name { color: var(--mammoth-blue); }
.series-hero-logo { width: 72px; height: 72px; object-fit: contain; }
.series-hero-name { font-size: 0.85rem; font-weight: 600; color: #ccc; }
.series-hero-seed { font-size: 0.7rem; color: #666; margin-top: -4px; }
.series-hero-score-block { display: flex; flex-direction: column; align-items: center; padding: 0 18px; }
.series-hero-score { font-size: 2.8rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -2px; }
.series-hero-status { font-size: 0.8rem; color: #aaa; margin-top: 6px; }
.series-hero-next { margin-top: 14px; padding: 10px 16px; background: rgba(255,255,255,0.05); border-radius: 8px; font-size: 0.82rem; color: #bbb; }
.series-hero-next strong { color: #fff; }

/* Playoff game log */
.playoff-game-log { max-width: 580px; margin: 0 auto 30px; }
.playoff-log-title { font-size: 0.72rem; color: #777; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; text-align: center; }
.playoff-game-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 8px; margin-bottom: 6px;
    background: rgba(255,255,255,0.04); border-left: 3px solid #333;
}
.playoff-game-card.win { border-left-color: #4caf50; }
.playoff-game-card.loss { border-left-color: #f44336; }
.playoff-game-card.upcoming { border-left-color: #333; opacity: 0.55; }
.pgc-num { font-size: 0.7rem; color: #666; width: 22px; flex-shrink: 0; }
.pgc-date { font-size: 0.78rem; color: #888; width: 50px; flex-shrink: 0; }
.pgc-matchup { flex: 1; font-size: 0.85rem; font-weight: 600; color: #ddd; }
.pgc-extra { font-size: 0.72rem; color: #888; margin-left: 4px; }
.pgc-result { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; }
.pgc-result img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)); }

/* Bracket section title */
.bracket-section-title { font-size: 0.72rem; color: #777; letter-spacing: 2px; text-transform: uppercase; margin: 0 auto 10px; max-width: 580px; text-align: center; }

/* Pregame News Snippet (on Scoreboard) */
#pregameSnippet {
    background: linear-gradient(135deg, rgba(26, 77, 122, 0.6) 0%, rgba(26, 77, 122, 0.3) 100%);
    border: 2px solid var(--mammoth-blue);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    color: #fff;
    display: none;
}

#pregameSnippet.show {
    display: block;
}

.snippet-label {
    font-size: 12px;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.snippet-headline {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
    color: #fff;
}

.snippet-description {
    font-size: 14px;
    line-height: 1.5;
    color: #ccc;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.snippet-open-btn {
    background: var(--mammoth-blue);
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.snippet-open-btn:hover {
    background: var(--mammoth-accent);
    transform: translateY(-2px);
}

/* Game News Page */
.gamenews-card {
    background: linear-gradient(135deg, rgba(26, 77, 122, 0.5) 0%, rgba(26, 77, 122, 0.2) 100%);
    border: 1px solid rgba(105, 179, 231, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    color: #fff;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gamenews-card:hover {
    background: linear-gradient(135deg, rgba(26, 77, 122, 0.7) 0%, rgba(26, 77, 122, 0.4) 100%);
    border-color: var(--mammoth-blue);
    transform: translateY(-2px);
}

.gamenews-type {
    display: inline-block;
    font-size: 11px;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.gamenews-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.gamenews-headline {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
    color: #fff;
}

.gamenews-subhead {
    font-size: 14px;
    font-weight: 500;
    color: #ddd;
    margin-bottom: 10px;
}

.gamenews-description {
    font-size: 14px;
    line-height: 1.5;
    color: #bbb;
}

.gamenews-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 16px;
}

/* Hide news tabs on TV mode */
@media (max-width: 600px) {
    .gamenews-nav {
        display: none !important;
    }
}

/* TV mode hides news */
body.tv-mode .gamenews-nav,
body.tv-mode .gamenews-nav-mobile {
    display: none !important;
}

/* Goal Videos Section */
#goalVideosSection {
    margin-top: 30px;
    border-top: 2px solid rgba(105, 179, 231, 0.3);
    padding-top: 20px;
}

.goal-videos-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mammoth-accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.goal-videos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.goal-video-card {
    background: rgba(26, 77, 122, 0.3);
    border: 1px solid rgba(105, 179, 231, 0.3);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.goal-video-card:hover {
    background: rgba(26, 77, 122, 0.5);
    border-color: var(--mammoth-blue);
    transform: translateY(-4px);
}

.goal-video-embed {
    width: 100%;
    height: 200px;
    background: #000;
}

.goal-video-info {
    padding: 15px;
}

.goal-scorer-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.goal-time {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.goal-teams {
    font-size: 13px;
    color: #ccc;
}

.goal-no-videos {
    text-align: center;
    padding: 30px 20px;
    color: #666;
    font-size: 14px;
}