/**
 * Hockey Scoreboard Styles
 *
 * Stop-time countdown clock + per-team penalty box strip + 4-step goal modal.
 * iPhone-first: large thumb-reach buttons, modal flows, sticky action row.
 *
 * Inherits from base.css (.score-keeper-page, .match-header, .scoreboard).
 */

:root {
    --hockey-primary: #1e40af;
    --hockey-secondary: #1e3a8a;
    --hockey-ice: #172554;
    --hockey-team1: #1e40af;
    --hockey-team2: #b91c1c;
    --hockey-clock-bg: #0f172a;
    --hockey-clock-text: #f1f5f9;
    --hockey-pp-color: #f59e0b;
    --hockey-pk-color: #6366f1;
    --hockey-major-color: #dc2626;
}

/* ============================================
   Header
   ============================================ */
.hockey-scoreboard .match-header {
    background: linear-gradient(135deg, var(--hockey-ice), #0c1842);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.hockey-scoreboard .match-header .back-link,
.hockey-scoreboard .match-header .match-btn {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}
.hockey-scoreboard .match-header .back-link:hover,
.hockey-scoreboard .match-header .match-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.22);
}
.hockey-scoreboard .period-indicator {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    font-weight: 700;
    font-size: 1rem;
    color: white;
}
.hockey-scoreboard .match-meta-inline { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8); }
.hockey-scoreboard .meta-sep { color: rgba(255, 255, 255, 0.4); font-size: 0.75rem; }

/* ============================================
   Clock Section
   ============================================ */
.hockey-clock-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--hockey-clock-bg);
    color: var(--hockey-clock-text);
    border-bottom: 2px solid var(--hockey-primary);
    position: relative;
}
.hockey-strength-pill {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
    min-width: 6.5rem;
    text-align: center;
}
.hockey-clock-container {
    display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
}
.hockey-clock-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}
.hockey-match-clock {
    font-size: clamp(2rem, 9vw, 3.25rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--hockey-clock-text);
}
.hockey-clock-controls { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.hockey-clock-btn {
    min-width: 3rem; min-height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.375rem;
    padding: 0 0.65rem;
}
.hockey-clock-btn:hover { background: rgba(255, 255, 255, 0.18); }
.hockey-clock-btn--primary { background: var(--hockey-primary); border-color: var(--hockey-primary); }
.hockey-clock-btn--primary:hover { background: var(--hockey-secondary); }
.hockey-clock-btn--end-period { background: rgba(220, 38, 38, 0.4); border-color: rgba(220, 38, 38, 0.6); }
.hockey-clock-btn--end-period:hover { background: rgba(220, 38, 38, 0.6); }

.hockey-clock-section--no-clock { gap: 0.75rem; }
.hockey-clock-section--no-clock .hockey-clock-container { gap: 0.25rem; }
.hockey-clock-no-time-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* ============================================
   Penalty Strips
   ============================================ */
.hockey-penalty-strips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
}
.hockey-penalty-strip {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
    min-height: 4.5rem;
}
.hockey-penalty-strip__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin-bottom: 0.4rem;
}
.hockey-penalty-strip__empty {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
}
.hockey-penalty-strip__list {
    display: flex; flex-direction: column; gap: 0.4rem;
}
.hockey-penalty-strip__queued {
    margin-top: 0.4rem;
    font-size: 0.6875rem;
    color: var(--hockey-pp-color);
    font-weight: 700;
    text-align: right;
}
.hockey-penalty-card {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-left: 3px solid var(--hockey-major-color);
    border-radius: 0.375rem;
    padding: 0.4rem 0.5rem;
}
.hockey-penalty-card.is-coincidental {
    border-left-color: var(--hockey-pk-color);
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.3);
}
.hockey-penalty-card__row {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
}
.hockey-penalty-card__row--meta { margin-top: 0.25rem; }
.hockey-penalty-card__player {
    font-weight: 700; font-size: 0.875rem; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hockey-penalty-card__time {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1rem;
    color: var(--hockey-major-color);
}
.hockey-penalty-card__type {
    font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em;
    color: var(--text-secondary); text-transform: uppercase;
    background: var(--bg-secondary); padding: 0.125rem 0.4rem; border-radius: 0.25rem;
}
.hockey-penalty-card__half-badge {
    font-size: 0.625rem; font-weight: 700; color: var(--hockey-pp-color);
    background: rgba(245, 158, 11, 0.15); padding: 0.125rem 0.35rem; border-radius: 0.25rem;
}
.hockey-penalty-card__coincidental-badge {
    font-size: 0.5625rem; font-weight: 700; color: var(--hockey-pk-color);
    background: rgba(99, 102, 241, 0.12); padding: 0.125rem 0.3rem; border-radius: 0.25rem;
}
.hockey-penalty-card__release {
    margin-left: auto;
    width: 1.6rem; height: 1.6rem;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}
.hockey-penalty-card__release:hover { background: var(--hockey-major-color); color: white; }

/* ============================================
   Scoreboard Layout (Teams)
   ============================================ */
.hockey-scoreboard__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    background: var(--bg-secondary);
    align-items: stretch;
}
@media (max-width: 700px) {
    .hockey-scoreboard__teams { grid-template-columns: 1fr; }
}

/* ============================================
   Team Panel
   ============================================ */
.hockey-team {
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.hockey-team--home { border-top: 4px solid var(--hockey-team1); }
.hockey-team--away { border-top: 4px solid var(--hockey-team2); }
.hockey-team__header {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
    min-height: 1.75rem;
}
.hockey-team__name {
    font-size: 1rem; font-weight: 700; color: var(--text-primary);
    outline: none; cursor: text;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.hockey-team__name:focus { background: var(--bg-secondary); border-radius: 0.25rem; padding: 0 0.25rem; }
.hockey-goalie-pulled-badge {
    font-size: 0.625rem; font-weight: 800;
    color: var(--hockey-pp-color);
    background: rgba(245, 158, 11, 0.15);
    padding: 0.125rem 0.4rem; border-radius: 0.25rem;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.hockey-team__score {
    width: 100%;
    border: none;
    background: linear-gradient(135deg, var(--hockey-clock-bg), #1e293b);
    color: white;
    font-size: clamp(3rem, 14vw, 5.5rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    padding: 0.5rem 0;
    border-radius: 0.75rem;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.1s ease;
}
.hockey-team__score:hover { transform: scale(1.02); }
.hockey-team__score:active { transform: scale(0.98); }

.hockey-team__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
}
.hockey-stat {
    text-align: center;
    padding: 0.3rem 0;
    background: var(--bg-secondary);
    border-radius: 0.375rem;
}
.hockey-stat__label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.hockey-stat__value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.hockey-team__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}
.hockey-action-btn {
    min-height: 2.75rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.25rem;
    transition: background 0.15s ease;
}
.hockey-action-btn:hover { background: var(--bg-secondary); }
.hockey-action-btn:active { transform: scale(0.97); }
.hockey-action-btn--goal { background: var(--hockey-primary); color: white; border-color: var(--hockey-primary); }
.hockey-action-btn--goal:hover { background: var(--hockey-secondary); }
.hockey-action-btn--penalty { color: var(--hockey-major-color); border-color: rgba(220, 38, 38, 0.3); }
.hockey-action-btn--penalty:hover { background: rgba(220, 38, 38, 0.08); }
.hockey-action-btn--shot { color: var(--hockey-team1); }
.hockey-action-btn--faceoff { color: #0891b2; }
.hockey-action-btn--hit { color: var(--hockey-team2); }
.hockey-action-btn--block { color: #6366f1; }

.hockey-team__goals {
    display: flex; flex-direction: column; gap: 0.25rem;
    max-height: 7rem; overflow-y: auto;
    border-top: 1px solid var(--border-color);
    padding-top: 0.4rem;
}
.hockey-goal-entry {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.2rem 0.4rem;
    background: var(--bg-secondary);
    border-radius: 0.25rem;
}
.hockey-goal-entry__time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--hockey-primary);
    font-size: 0.6875rem;
}
.hockey-goal-entry__scorer { font-weight: 600; color: var(--text-primary); }
.hockey-goal-entry__assist { font-style: italic; color: var(--text-tertiary); font-size: 0.6875rem; }
.hockey-goal-entry__type {
    font-size: 0.5625rem; font-weight: 800;
    padding: 0.125rem 0.3rem;
    border-radius: 0.25rem;
    background: var(--hockey-pp-color); color: white;
    margin-left: auto;
}
.hockey-goal-entry__type--pp { background: var(--hockey-pp-color); }
.hockey-goal-entry__type--sh { background: var(--hockey-pk-color); }
.hockey-goal-entry__type--en { background: var(--hockey-major-color); }
.hockey-goal-entry__type--ps { background: #ec4899; }

.hockey-team__goalie-toggle {
    margin-top: 0.25rem;
    padding: 0.4rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
}
.hockey-team__goalie-toggle.is-pulled {
    background: rgba(245, 158, 11, 0.12);
    color: var(--hockey-pp-color);
    border-color: rgba(245, 158, 11, 0.4);
    font-weight: 700;
}

/* ============================================
   Center Controls
   ============================================ */
.hockey-center {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.6rem; padding: 0.5rem;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
@media (min-width: 701px) {
    .hockey-center { border: 1px solid var(--border-color); }
}
.hockey-whistle-btn {
    width: 3.25rem; height: 3.25rem;
    border-radius: 50%;
    background: var(--hockey-primary);
    color: white;
    border: 2px solid var(--hockey-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.hockey-whistle-btn:hover { transform: scale(1.06); }
.hockey-center__divider {
    width: 1.5rem; height: 1px; background: var(--border-color);
}
.hockey-center__btn {
    min-width: 2.4rem; min-height: 2.4rem;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
}
.hockey-center__btn:hover { background: var(--border-color); color: var(--text-primary); }

@media (max-width: 700px) {
    .hockey-center { flex-direction: row; }
    .hockey-center__divider { width: 1px; height: 1.5rem; }
}

/* ============================================
   Period Progress
   ============================================ */
.hockey-period-progress {
    display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;
    padding: 0.6rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}
.hockey-period-dot {
    padding: 0.2rem 0.6rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-tertiary);
}
.hockey-period-dot.completed { color: var(--text-secondary); }
.hockey-period-dot.current {
    background: var(--hockey-primary);
    color: white;
    border-color: var(--hockey-primary);
}

/* ============================================
   Event Log
   ============================================ */
.hockey-event-log {
    padding: 0.75rem 1rem;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}
.hockey-event-log__title {
    font-size: 0.6875rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
}
.hockey-event-log__entry {
    display: flex; align-items: baseline; gap: 0.6rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8125rem;
}
.hockey-event-log__entry:last-child { border-bottom: none; }
.hockey-event-log__time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--hockey-primary);
    font-size: 0.6875rem;
    min-width: 4.5rem;
}
.hockey-event-log__desc { color: var(--text-primary); flex: 1; }
.hockey-event-log__empty {
    font-style: italic; color: var(--text-tertiary); font-size: 0.875rem;
}

/* ============================================
   Goal Modal
   ============================================ */
.hockey-goal-modal-overlay { z-index: 50; }
.hockey-goal-modal { max-width: 480px; }
.hockey-goal-modal__header {
    background: linear-gradient(135deg, var(--hockey-primary), var(--hockey-secondary));
}
.hockey-goal-modal__header .score-modal-title { color: white; }
.hockey-goal-modal__step {
    margin-left: auto;
    font-size: 0.6875rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-weight: 700;
}
.hockey-goal-modal__body { padding: 1rem; }
.hockey-goal-modal__step-pane { display: flex; flex-direction: column; gap: 0.75rem; }
.hockey-goal-modal__prompt {
    margin: 0; font-weight: 700; font-size: 0.9375rem; color: var(--text-primary);
}
.hockey-roster-chips {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    max-height: 14rem; overflow-y: auto;
    padding: 0.25rem 0;
}
.hockey-roster-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--text-primary);
    min-height: 2.5rem;
}
.hockey-roster-chip:hover { background: var(--bg-secondary); border-color: var(--hockey-primary); }
.hockey-roster-chip.is-selected { background: var(--hockey-primary); color: white; border-color: var(--hockey-primary); }
.hockey-roster-chip__num {
    font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--hockey-primary);
}
.hockey-roster-chip.is-selected .hockey-roster-chip__num { color: white; }
.hockey-roster-chip__name { font-weight: 600; }

.hockey-goal-modal__manual { display: flex; gap: 0.4rem; align-items: center; }
.hockey-goal-modal__input {
    flex: 1;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 2.75rem;
}
.hockey-goal-modal__input:focus { outline: none; border-color: var(--hockey-primary); }
.hockey-goal-modal__skip-btn {
    padding: 0.6rem 1rem;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
}
.hockey-goal-modal__skip-btn:hover { background: var(--border-color); color: var(--text-primary); }
.hockey-goal-modal__skip-btn--big {
    padding: 0.85rem 1rem;
    font-weight: 700;
    color: var(--hockey-primary);
    border-color: var(--hockey-primary);
    border-style: solid;
    background: rgba(30, 64, 175, 0.06);
}

.hockey-goal-modal__summary {
    padding: 0.6rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.hockey-goal-modal__summary-row { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.875rem; }
.hockey-goal-modal__summary-label { font-weight: 700; color: var(--text-secondary); min-width: 4rem; }
.hockey-goal-modal__summary-value { color: var(--text-primary); }

.hockey-goal-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}
.hockey-goal-type-btn {
    padding: 0.6rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
    min-height: 3.5rem;
}
.hockey-goal-type-btn:hover { background: var(--bg-secondary); }
.hockey-goal-type-btn.is-selected {
    background: var(--hockey-primary);
    color: white;
    border-color: var(--hockey-primary);
}
.hockey-goal-type-btn__code { font-weight: 800; font-size: 0.95rem; }
.hockey-goal-type-btn__label { font-size: 0.6875rem; opacity: 0.85; }

.hockey-goal-modal__hint {
    padding: 0.5rem 0.75rem;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
}
.hockey-goal-modal__hint i { color: var(--hockey-pp-color); margin-right: 0.25rem; }

.hockey-goal-modal__confirm-btn {
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, var(--hockey-primary), var(--hockey-secondary));
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem;
    width: 100%;
}
.hockey-goal-modal__confirm-btn:hover { filter: brightness(1.06); }

/* ============================================
   Penalty Modal
   ============================================ */
.hockey-penalty-modal-overlay { z-index: 51; }
.hockey-penalty-modal { max-width: 520px; }
.hockey-penalty-modal__header {
    background: linear-gradient(135deg, var(--hockey-major-color), #991b1b);
}
.hockey-penalty-modal__header .score-modal-title { color: white; }
.hockey-penalty-modal__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.hockey-penalty-modal__prompt {
    margin: 0; font-weight: 700; font-size: 0.9375rem; color: var(--text-primary);
}
.hockey-penalty-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}
@media (min-width: 500px) {
    .hockey-penalty-type-grid { grid-template-columns: repeat(3, 1fr); }
}
.hockey-penalty-type-btn {
    padding: 0.55rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem;
}
.hockey-penalty-type-btn:hover { background: var(--bg-secondary); }
.hockey-penalty-type-btn.is-selected {
    background: var(--hockey-major-color);
    color: white;
    border-color: var(--hockey-major-color);
}
.hockey-penalty-type-btn__label { font-weight: 700; font-size: 0.875rem; }
.hockey-penalty-type-btn__sub { font-size: 0.6875rem; opacity: 0.8; }
.hockey-penalty-modal__manual { display: flex; gap: 0.4rem; }
.hockey-penalty-modal__coinc-toggle {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}
.hockey-penalty-modal__coinc-section {
    padding: 0.6rem;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 0.5rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}

/* ============================================
   Stat Modal (shot / faceoff / hit / block player attribution)
   ============================================ */
.hockey-stat-modal-overlay { z-index: 50; }
.hockey-stat-modal { max-width: 480px; }
.hockey-stat-modal__header .score-modal-title { color: white; }
.hockey-stat-modal__body {
    padding: 1rem;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.hockey-stat-modal__actions {
    display: flex; gap: 0.5rem; margin-top: 0.5rem;
}

/* ============================================
   Setup form (cloud-landing) — inherits .toggle-options from basketball-landing.css
   ============================================ */
.cloud-form-side .match-setup-card { padding: 1rem; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 0.75rem; }

/* ============================================
   Roster (in settings modal — free version)
   ============================================ */
.hockey-roster {
    display: flex; flex-direction: column; gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.hockey-roster__row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-secondary);
    border-radius: 0.375rem;
}
.hockey-roster__num {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--hockey-primary);
    min-width: 2rem;
}
.hockey-roster__name { font-weight: 600; color: var(--text-primary); }
.hockey-roster__add {
    padding: 0.5rem;
    background: var(--bg-primary);
    border: 1px dashed var(--border-color);
    border-radius: 0.375rem;
    color: var(--hockey-primary);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    width: 100%;
}
.hockey-roster__add:hover { background: var(--bg-secondary); }

/* ============================================
   Resume Banner (free landing — game-in-progress)
   ============================================ */
.hockey-resume-banner {
    max-width: 1100px;
    margin: 1rem auto 0;
    padding: 0 1rem;
}
.hockey-resume-banner__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, rgba(30, 64, 175, 0.18), rgba(99, 102, 241, 0.18));
    border: 1px solid rgba(30, 64, 175, 0.35);
    border-radius: 0.75rem;
    flex-wrap: wrap;
}
.hockey-resume-banner__info { flex: 1; min-width: 200px; }
.hockey-resume-banner__title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.hockey-resume-banner__title i { color: var(--hockey-primary); }
.hockey-resume-banner__detail {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    font-variant-numeric: tabular-nums;
}
.hockey-resume-banner__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.hockey-resume-banner__btn {
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.hockey-resume-banner__btn--primary {
    background: linear-gradient(135deg, var(--hockey-primary), var(--hockey-secondary));
    color: white;
    border-color: var(--hockey-secondary);
}
.hockey-resume-banner__btn--primary:hover { filter: brightness(1.06); }
.hockey-resume-banner__btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}
.hockey-resume-banner__btn--ghost:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ============================================
   Mobile tweaks
   ============================================ */
@media (max-width: 700px) {
    .hockey-clock-section { gap: 0.5rem; padding: 0.5rem; }
    .hockey-strength-pill { font-size: 0.6875rem; min-width: 5.5rem; padding: 0.2rem 0.5rem; }
    .hockey-clock-btn { min-width: 2.5rem; min-height: 2.5rem; font-size: 0.85rem; }
    .hockey-team { padding: 0.5rem; }
    .hockey-team__actions { grid-template-columns: repeat(3, 1fr); }
    .hockey-action-btn { font-size: 0.75rem; padding: 0.35rem 0.4rem; }
    .hockey-team__stats { gap: 0.2rem; }
    .hockey-stat__label { font-size: 0.5625rem; }
    .hockey-stat__value { font-size: 0.875rem; }
    .hockey-period-dot { font-size: 0.6875rem; padding: 0.15rem 0.4rem; }
}