body {
    overflow-x: hidden;
}
h1, .h1 {
    white-space: nowrap;
}

:root {
    /* --icy-section-border-radius: var(--bs-border-radius-lg); */
    --icy-section-border-radius: 0.75rem;

    /* highlight border color
        #xxxxxxa0  (blend is ok, but cell bg makes interior corners sharp)
        bs-primary-border-subtle  (solid blue)
        bs-secondary-text-emphasis  (solid bright gray)
        */
    --icy-game-highlight-border-color: var(--bs-secondary-border-subtle);
    --icy-game-highlight-border-width: var(--bs-border-radius-lg);

    --icy-game-button-border-radius: 6px;
    --icy-game-button-outline-width: 1px;
    --icy-game-button-border-margin: 0px;
    --icy-game-button-outline-radius: calc(var(--icy-game-button-border-radius) + var(--icy-game-button-border-margin) + 1px);

    --icy-my-team-padding-expansion: 3px;

    --icy-disabled-element-opacity: 0.2;

    /* Multiply transition durations for debugging (1 = normal, 10 = slow-mo) */
    --icy-anim-time-scale: 1;

    --icy-edit-outline-width: 3px;
    --icy-edit-outline-offset: 2px;

    --icy-goal-post-width: 0.2rem;
    --icy-goal-post-radius: var(--icy-goal-post-width);
    --icy-goal-post-color: rgba(var(--bs-danger-rgb), 0.9);

    --icy-missing-data-outline-width: 3px;
    --icy-missing-data-outline-offset: 1px;
    --icy-missing-data-shadow: 0 0 6px 2px;

    --icy-shadow-blur: 1rem;
    --icy-shadow-spread: 0.5rem;
    --icy-shadow-color: rgba(0, 0, 0, 0.15);

    --icy-team-tint-rsvp-summary: 20%;   /* team color blend in RSVP summary tabs */

    /* ── z-index registry ──────────────────────────────────────────
       Buckets separated by 10 for easy insertion.
       -1 = behind parent (pseudo-element backdrops)
        Local stacking (within a component's own grid/flex context): */
    --icy-z-popover-compact:        5;  /* compact popover (below game label shadow) */
    --icy-z-game-label:            10;  /* nextup game label row, game-label-center */
    --icy-z-popover:               20;  /* expanded popover (above game label) */
    --icy-z-popover-arrow:         20;  /* popover arrow (same as container) */
    --icy-z-popover-rsvp-ring:     30;  /* checked RSVP button ring (above arrow) */
    --icy-z-game-highlight-border: 20;  /* schedule grid row highlight border */
    --icy-z-ot-badge:              10;  /* OT/SO badge on score box */
    --icy-z-goal-post:             20;  /* goal post marker */
    --icy-z-navbar-active-tab:     10;  /* active nav tab (overlaps border) */

    --icy-breakpoint-narrow: 360px;    /* narrowest supported viewport */
}

/* Named breakpoints for vw-based scaling.
   When multiple properties share the same breakpoint range, define an
   interpolation variable once (e.g. --_vw-t: calc((100vw - min) / range))
   and reuse it — see .icy-nextup for an example.
     narrow      = 360px   — narrowest supported viewport
     sm          = 576px   — Bootstrap sm breakpoint
     max-content = 768px   — Bootstrap md; max content width for most pages */

:root[data-bs-theme="dark"] {
    --icy-game-highlight-border-color: var(--bs-secondary-border-subtle);
}

.icy-max-width {
    max-width: var(--bs-breakpoint-md);
    width: 100%;
}


/* Login */

.icy-login-error-shake {
    animation: icy-login-error-shake 0.8s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes icy-login-error-shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

@keyframes fadeOutAndHide {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.icy-fade-out-after-a-while {
    animation: fadeOutAndHide 1s 5s forwards;
}

/* Progress bar button (RSVP-by-email redirect) */
.icy-progress-btn {
    position: relative;
    overflow: hidden;
}

.icy-progress-btn-fill {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.25);
    transform-origin: left;
    animation: icy-progress-fill 3s linear forwards;
}

.icy-progress-btn-label {
    position: relative;
}

@keyframes icy-progress-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes icy-rsvp-summary-fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.rsvp-status-tab {
    position: relative;
    background-color: var(--bs-body-bg) !important;
}

.rsvp-status-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--icy-team-color, transparent) 30%, transparent), transparent 70%);
    border-radius: inherit;
    pointer-events: none;
}

.icy-rsvp-summary-updated::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--bs-primary-rgb), 0.4);
    border-radius: inherit;
    pointer-events: none;
    animation: icy-rsvp-summary-fade 1.2s ease-out forwards;
}


/* Util */

.icy-square-dim-sm,
.icy-square-dim,
.icy-square-dim-lg,
.icy-square-dim-xl {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    aspect-ratio: 1/1;
}

.icy-square-dim-sm {
    width: 1.0rem !important;
}

.icy-square-dim {
    width: 1.5rem !important;
}

.icy-square-dim-lg {
    width: 2.0rem !important;
}

.icy-square-dim-xl {
    width: 2.5rem !important;
}

.icy-subsection {
    border-radius: var(--icy-section-border-radius);
}

.icy-division-name {
    font-weight: 600;
}

.icy-rsvp-select {
    /* hides the dropdown carat.  specifying padding doesn't seem to work, so rely on setting padding using adjacent bs classes. */
    background-image: none !important;
    padding: 0.1rem 0.5rem !important;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    width: auto;
    max-width: 100%;
    width: max-content;
    text-align: end;
    text-align-last: end;
}

.icy-rsvp-select:disabled {
    border-color: transparent;
    background-color: transparent;
}

.container-fixed-xs {
    max-width: var(--bs-breakpoint-xs);
}

.container-fixed-sm {
    max-width: var(--bs-breakpoint-sm);
}
.container-fixed-md {
    max-width: var(--bs-breakpoint-md);
}

@media (min-width: 500px) {
    .icy-teams-grid > * { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
    .icy-teams-grid > * { flex: 0 0 33.333%; max-width: 33.333%; }
}

/* Upcoming */

/* RSVP box with popover triangle */
.icy-game-rsvp-box {
    /* Configurable */
    --icy-game-rsvp-box-pointer-x: 50%;
    --icy-game-rsvp-box-pointer-size: 16px;
    --icy-game-rsvp-box-border-width: var(--bs-border-width);
    --icy-game-rsvp-box-border-color: var(--bs-border-color);
    --icy-game-rsvp-box-bg-color: var(--bs-secondary-bg);

    background-color: var(--icy-game-rsvp-box-bg-color);
    filter: drop-shadow(0 0 1px var(--bs-border-color-translucent)) drop-shadow(0 0.375rem 0.5rem rgba(0, 0, 0, 0.15));

    border: var(--icy-game-rsvp-box-border-width) solid var(--icy-game-rsvp-box-border-color);
    border-radius: 1.0rem;
    padding: 0.5rem;
    position: relative;
    width: 100%;
}

/* Pointer border (team color) */
.icy-game-rsvp-box::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--icy-game-rsvp-box-pointer-size));
    left: var(--icy-game-rsvp-box-pointer-x);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--icy-game-rsvp-box-pointer-size) var(--icy-game-rsvp-box-pointer-size);
    border-color: transparent transparent var(--icy-game-rsvp-box-border-color);
    margin-left: calc(-1 * var(--icy-game-rsvp-box-pointer-size));
    pointer-events: none;
    z-index: -1;
}

/* Pointer fill (inner) */
.icy-game-rsvp-box::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--icy-game-rsvp-box-pointer-size) + var(--icy-game-rsvp-box-border-width));
    left: var(--icy-game-rsvp-box-pointer-x);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--icy-game-rsvp-box-pointer-size) var(--icy-game-rsvp-box-pointer-size);
    border-color: transparent transparent var(--icy-game-rsvp-box-bg-color);
    margin-left: calc(-1 * var(--icy-game-rsvp-box-pointer-size));
    pointer-events: none;
    z-index: -1;
}

/* Strip all box chrome — used when a parent (popover, team card) provides the wrapper */
.icy-rsvp-box {
    background: none;
    border: none !important;
    border-radius: 0;
    filter: none;
    padding: 0;
}
.icy-rsvp-box::before,
.icy-rsvp-box::after {
    display: none;
}

/* Swap RSVP button text/icons based on available width */
.icy-rsvp-btn-group {
    container-type: inline-size;
}
.icy-rsvp-btn-icon { display: none; }
@container (max-width: 200px) {
    .icy-rsvp-btn-text { display: none; }
    .icy-rsvp-btn-icon { display: inline; }
}

.icy-game-rsvp-box--lg .icy-rsvp-btn-group .btn {
    font-size: 1.25rem;
    padding: 0.5rem;
}

/* Bump up at Bootstrap sm (576px) */
@media (min-width: 576px) {
    .icy-game-rsvp-box--lg {
        padding: 2rem;
    }
    .icy-game-rsvp-box--lg .icy-rsvp-btn-group .btn {
        font-size: 2rem;
        padding: 1rem 2rem;
    }
}


.icy-rsvp-btn-group .btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-width: 1px;
}
.icy-rsvp-btn-group .btn-check:checked+.btn-outline-secondary {
    --_rsvp-ring-color: var(--bs-body-color);
    position: relative;
    z-index: var(--icy-z-popover-rsvp-ring);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 600;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--bs-body-bg) 100%, transparent),
        0 0 0 5px color-mix(in srgb, var(--_rsvp-ring-color) 75%, transparent);
}
.icy-rsvp-btn-group .btn-check[value="3"]:checked+.btn-outline-secondary {
    --_rsvp-ring-color: var(--bs-warning);
}
.icy-rsvp-btn-group .btn-check[value="1"]:checked+.btn-outline-secondary {
    color: var(--icy-team-text-color, var(--bs-body-color));
    text-shadow: var(--icy-team-text-shadow, none);
    background-color: var(--icy-team-color, var(--bs-border-color));
    border-color: var(--icy-team-color, var(--bs-border-color));
}


/* New event pulse animation */
@keyframes icy-pulse {
    0%   { box-shadow: inset 0 0 0 0 var(--bs-primary); }
    30%  { box-shadow: inset 0 0 0 3px var(--bs-primary); }
    100% { box-shadow: inset 0 0 0 0 var(--bs-primary); }
}
.icy-new-event {
    animation: icy-pulse 1s ease-out;
}

/* Fixup-nav highlight (scroll-to-person flash) */
@keyframes icy-fixup-flash {
    0%   { background-color: var(--bs-warning-bg-subtle); }
    100% { background-color: transparent; }
}
.icy-fixup-highlight {
    animation: icy-fixup-flash 1.5s ease-out;
}

/* Flash highlight (navbar CTA, schedule scroll-to-today / month click) */
@keyframes icy-flash-bg {
    0%   { box-shadow: inset 0 0 0 100vw rgba(var(--bs-primary-rgb), 0.25); }
    25%  { box-shadow: inset 0 0 0 100vw rgba(var(--bs-primary-rgb), 0.25); }
    100% { box-shadow: inset 0 0 0 100vw transparent; }
}
.icy-flash-bg {
    animation: icy-flash-bg 2s ease-out forwards;
}

/* Accordion chevron spacing */
#scoresheet-accordion .accordion-button::after {
    flex-shrink: 0;
}

.icy-scoresheet-notes-popover {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    padding: 0 0.5rem;
    pointer-events: none;
    max-width: var(--icy-breakpoint-narrow);
}
.icy-scoresheet-notes-popover > * {
    pointer-events: auto;
}
#scoresheet-notes-collapse {
    transition: opacity 0.2s ease;
    opacity: 0;
    overflow: visible !important;
    height: auto !important;
    margin-bottom: -0.5rem;
}
#scoresheet-notes-collapse.collapsing {
    opacity: 0;
    display: block;
}
#scoresheet-notes-collapse.show {
    opacity: 1;
}

[aria-controls="scoresheet-notes-collapse"]:not(.collapsed) {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

/* Disclosure chevron: rotates when collapsed */
.icy-disclosure-chevron {
    display: inline-block;
    transition: transform 0.2s;
}
.collapsed .icy-disclosure-chevron {
    transform: rotate(180deg);
}

/* Make accordion caret visible on secondary background */
.accordion-button.bg-secondary::after {
    filter: brightness(0) invert(1);
}

/* Shadow projecting upward (mirrors Bootstrap .shadow) */
.shadow-up {
    box-shadow: 0 calc(-1 * var(--icy-shadow-spread)) var(--icy-shadow-blur) var(--icy-shadow-color) !important;
}

/* Schedule */

/* Hide schedule container until the scroll controller has positioned it */
[data-controller~="schedule-scroll"]:not(.icy-scroll-ready) {
    visibility: hidden;
}
[data-controller~="schedule-scroll"].icy-scroll-ready {
    animation: icy-scroll-reveal 100ms ease-out;
}
@keyframes icy-scroll-reveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Grid with 2 columns:
    1: event time (max-content)
    2: game details (fill) 
*/
.icy-schedule {
    display: grid !important;
    /* override .d-grid from Bootstrap if needed */
    grid-template-columns: max-content 1fr;
    grid-auto-rows: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* 
    1) row-bg element:
        - Spans both columns (1 / -1)
        - Has a box-shadow "border" with border-radius
        - z-index above the cells (so it appears on top)
    */
.icy-schedule-entry-border {
    grid-column: 1 / -1;
    border-radius: var(--icy-section-border-radius);
    box-shadow: 0 0 0 var(--icy-game-highlight-border-width) var(--icy-game-highlight-border-color);
    /* same as .btn-primary border color, for example */
    background: none;
    /* no fill, so the cell backgrounds remain visible */
    position: relative;
    z-index: var(--icy-z-game-highlight-border);
    pointer-events: none;
    /* don’t block clicks on the row */
}

.icy-schedule-row-padding {
    grid-column: 1 / -1;
    height: var(--icy-game-highlight-border-width);
}

.icy-schedule {
    display: grid;
    grid-template-columns: max-content 1fr;
}

.icy-schedule-month {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

.icy-schedule-date-group {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    row-gap: 0.25rem;
    padding: 0.5rem;
}

.icy-schedule-full-row {
    grid-column: 1 / -1;
}

.icy-schedule-game-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    /* Two row tracks: label body (auto) and tag (auto, collapses when empty).
       Time column is placed in row 1 so it aligns with the game label body,
       not the tag below. */
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.5rem;
}

.icy-schedule-day-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.icy-schedule-month-title,
.icy-schedule-day-header > :first-child {
    white-space: nowrap;
}

/* Linear scale from 0.8rem at --icy-breakpoint-narrow to 1rem at Bootstrap sm:
   min  = 0.8rem  = 12.8px
   max  = 1rem    = 16px
   narrow = 360px, sm = 576px
   slope     = (16 - 12.8) / (576 - 360) = 3.2 / 216 = 1.48vw
   intercept = 12.8 - 0.0148 * 360       = 7.47px    = 0.47rem */
.icy-text-scale-narrow,
.icy-schedule-time-col {
    font-size: clamp(0.8rem, 1.48vw + 0.47rem, 1rem);
}

.icy-schedule-time-col {
    text-align: end;
    white-space: nowrap;
}

.icy-schedule-scroll-padding {
    padding-bottom: 50vh;
}

/* Anchor targets that need scroll margin for sticky navbar.
   The navbar has two heights: inline (one row) and stacked (two rows, with tabs below).
   The navbar-layout controller toggles between these dynamically, so both values are
   approximate maximums. */
.icy-schedule-month,
.icy-scroll-anchor {
    scroll-margin-top: 7rem;
}

/* Stacked layout (tabs on second row) — taller navbar needs more scroll margin */
@media (max-width: 576px) {
    .icy-schedule-month,
    .icy-scroll-anchor {
        scroll-margin-top: 9.5rem;
    }
}

/* Stats — CSS Grid with subgrid rows */

.icy-stats-grid {
    display: grid;
    width: 100%;
}

.icy-stats-grid > .icy-stats-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
}

/* Striping (header is child 1, so even children = data rows 1, 3, 5…) */
.icy-stats-grid > .icy-stats-row:nth-child(even) {
    background-color: color-mix(in srgb, var(--bs-body-color) 5%, transparent);
}

/* My-team highlight */
.icy-stats-row--highlight {
    background-color: var(--bs-primary-bg-subtle) !important;
}

/* Header row — no stripe */
.icy-stats-grid > .icy-stats-header {
    background-color: transparent !important;
}

/* Full-height column separator — lives in a 1px grid track */
.icy-stats-sep {
    align-self: stretch;
    background-color: var(--bs-border-color);
}

.icy-stats-grid .icy-stats-th {
    align-self: end;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.25rem;
}

.icy-stats-grid .icy-stats-td {
    font-size: 0.875rem;
    padding: 0.25rem;
}

.icy-stats-col-major {
    font-weight: 600;
}

.icy-stats-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Standings: compress padding on narrow viewports.
   Cell x-padding: 0.1rem@320px → 0.25rem@576px.
   slope = (0.25 - 0.1) / (576 - 320) = 0.15/256 → 0.9375vw
   intercept = 0.1 - 0.15/256 * 320 = -0.0875rem */
.icy-standings-grid .icy-stats-th,
.icy-standings-grid .icy-stats-td {
    padding: 0.25rem clamp(0.1rem, -0.0875rem + 0.9375vw, 0.25rem);
}

/* Num cells: 0.2rem@320px → 0.5rem@576px.
   slope = 0.3/256 → 1.875vw, intercept = -0.175rem */
.icy-standings-grid .icy-stats-num {
    padding-left: clamp(0.2rem, -0.175rem + 1.875vw, 0.5rem);
    padding-right: clamp(0.2rem, -0.175rem + 1.875vw, 0.5rem);
}

.icy-stats-grid .icy-stats-col-team {
    white-space: nowrap;
}

.icy-stats-grid .icy-stats-col-team > a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100% !important;
}

.icy-standings-col-name {
    min-width: 0;
    white-space: nowrap;
}

.icy-standings-col-name > a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100% !important;   /* override inline width: fit-content from _team_badge */
}


.icy-warning-games-grid {
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    column-gap: 0.75rem;
}
.icy-warning-games-grid > .icy-warning-game-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 0.15rem 0;
}
.icy-warning-games-grid > .icy-warning-game-row ~ .icy-warning-game-row {
    border-top: 1px solid var(--bs-border-color-translucent);
}
.icy-warning-games-grid > .icy-warning-game-detail {
    grid-column: 3;
    padding-bottom: 0.15rem;
}

/* Game */

/* Pure CSS goal net icon — red posts (top + sides), flat bottom, rounded top corners */
.icy-goal-icon {
    --_goal-icon-width: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_goal-icon-width);
    aspect-ratio: 3 / 2;
    font-weight: 700;
    font-size: calc(var(--_goal-icon-width) * 0.5);
    line-height: 1;
    border-top: 3px solid;
    border-left: 3px solid;
    border-right: 3px solid;
    border-bottom: none;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.icy-goal-icon--sm {
    --_goal-icon-width: 1.5rem;
    vertical-align: baseline;
    border-width: 1.5px;
}

.icy-goal-icon--empty {
    color: var(--bs-tertiary-color);
}

/* When the button is actively pressed */
.btn-outline-secondary:active {
    background-color: rgba(var(--bs-primary-rgb), 0.5);
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.3rem rgba(var(--bs-primary-rgb), 0.5);
}

.icy-game-tvt-border {
    border-radius: var(--icy-game-button-outline-radius);
}

.icy-border-dashed {
    border-style: dashed;
}

/* drop-shadow (not box-shadow) so the shadow follows the child
   .icy-game-tvt's border-radius rather than the wrapper's box */
.icy-game-label-shadow {
    filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.15));
}

/* Game nav: date label + horizontal-scrolling time buttons */
.icy-game-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.icy-game-nav-date {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.icy-game-nav-times {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    overflow-x: auto;
    max-width: 100%;
}
.icy-game-nav-times > .btn {
    padding-top: 0;
    padding-bottom: 0;
}

/* Game tray: [< prev] [summary] [next >] as one cohesive unit (used in team filter bar). */
.icy-game-tray {
    height: 38px;
    min-width: 15rem;
    max-width: 26rem;
    flex: 1 1 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.icy-game-tray > .btn {
    border: none;
    border-radius: 0;
    border-left: 1px solid var(--bs-border-color);
    width: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icy-game-tray > .btn:first-child {
    border-left: none;
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}
.icy-game-tray > .btn:last-child {
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}
.icy-game-summary-tray {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-left: 1px solid var(--bs-border-color);
}
.icy-game-summary-tray > :first-child {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 0.7rem;
}

/* Compact game label variant */
.icy-game-label--small { font-size: 0.8rem; }
.icy-game-label--small .icy-game-label-shadow { filter: none; }
.icy-game-label--small .icy-game-tvt { --icy-game-button-border-radius: 0; }
.icy-game-label--small .icy-game-tvt-border { border-radius: 0; font-size: inherit; }
.icy-game-label--small .icy-game-team-home,
.icy-game-label--small .icy-game-team-away,
.icy-game-label--small .icy-game-team-solo {
    padding: 1px 2px !important;
    gap: 0.1rem !important;
}
.icy-game-label--small .icy-game-score-box {
    width: 1.2rem;
    border-radius: 3px;
    outline: none;
    box-shadow: inset 0 0 0 1px var(--bs-border-color);
}
.icy-game-label--small .icy-game-forfeit-badge {
    --_size: 10px;
    --_score-box-w: 1.2rem;
    --_pad: 0px;
    font-size: 7px;
    line-height: 10px;
}
.icy-game-label--small .icy-game-ot-badge {
    transform: translate(-50%, -4px) scale(0.55);
    border-width: 0;
    box-shadow: none;
}

.icy-game-tvt {
    display: flex;
    position: relative;

    /* small border to help contrast with dark or light background */
    border: var(--icy-game-button-outline-width) solid var(--bs-border-color);
    margin: var(--icy-game-button-border-margin);

    border-radius: var(--icy-game-button-border-radius);
}

/* Inside a button wrapper, use body-bg border as a gap between
   the button border and the team color fills */
.btn .icy-game-tvt {
    border-color: var(--bs-body-bg);
}

/* inner radius = outer radius minus border width */
.icy-game-team-home,
.icy-game-team-away,
.icy-game-team-solo {
    --_r: calc(var(--icy-game-button-border-radius) - var(--icy-game-button-outline-width));
    display: flex;
}
.icy-game-team-home { border-radius: var(--_r) 0 0 var(--_r); }
.icy-game-team-away { border-radius: 0 var(--_r) var(--_r) 0; }
.icy-game-team-solo { border-radius: var(--_r); }

.icy-game-team-home {
    flex-direction: row-reverse;
    justify-content: var(--icy-game-team-home-justify);
}

.icy-game-team-away {
    flex-direction: row;
    justify-content: var(--icy-game-team-away-justify);
}

/* When score boxes are present, keep them at the inner edge (close to center) */
.icy-game-team-home:has(.icy-game-score-box),
.icy-game-team-away:has(.icy-game-score-box) {
    justify-content: flex-start;
}

.icy-game-team-solo {
    flex-direction: row;
    justify-content: center;
}

.icy-game-score-box {
    position: relative;
    flex-shrink: 0;
    width: 1.8rem;
    align-self: stretch;
    text-align: center;
    border-radius: 3px;
    outline: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

/* Team-colored button with hover/active/focus/disabled effects */
.btn-team-color:hover {
    filter: brightness(1.15);
}
.btn-team-color:active {
    filter: brightness(0.85);
    transform: scale(0.98);
}
.btn-team-color:focus-visible {
    outline: 3px solid var(--bs-body-color);
    outline-offset: 2px;
}
.btn-team-color:disabled {
    opacity: 0.5;
    filter: none;
}

/* Default: home-side content flows right-to-left (text-end side) */
.icy-scoresheet-home-col .icy-event-content {
    flex-direction: row-reverse;
}
.icy-scoresheet-btn-home {
    flex-direction: row-reverse;
}
.icy-scoresheet-forfeit-home {
    flex-direction: row-reverse;
}

/* Swap sides: reverse home/away visual positions */
.icy-sides-swapped .icy-game-tvt:not(.icy-no-team-swap .icy-game-tvt),
.icy-sides-swapped .icy-scoresheet-score-row,
.icy-sides-swapped .icy-scoresheet-event-row,
.icy-sides-swapped .icy-scoresheet-team-cards,
.icy-sides-swapped .icy-scoresheet-forfeit-row {
    flex-direction: row-reverse;
}

/* Swap flips flex-direction for home/away buttons and event content */
.icy-sides-swapped .icy-scoresheet-btn-home { flex-direction: row; }
.icy-sides-swapped .icy-scoresheet-btn-away { flex-direction: row-reverse; }

.icy-miss-tilt { display: inline-block; }
.icy-scoresheet-btn-home .icy-miss-tilt { transform: rotate(-5deg); }
.icy-scoresheet-btn-away .icy-miss-tilt { transform: rotate(5deg); }
.icy-sides-swapped .icy-scoresheet-btn-home .icy-miss-tilt { transform: rotate(5deg); }
.icy-sides-swapped .icy-scoresheet-btn-away .icy-miss-tilt { transform: rotate(-5deg); }

.icy-sides-swapped .icy-scoresheet-home-col {
    text-align: start;
}
.icy-sides-swapped .icy-scoresheet-home-col .icy-event-content {
    flex-direction: row;
}

.icy-sides-swapped .icy-scoresheet-away-col {
    text-align: end;
}
.icy-sides-swapped .icy-scoresheet-away-col .icy-event-content {
    flex-direction: row-reverse;
}



/* Default: left=home, right=away. Swapped: left=away, right=home.
   Thick side borders live on the outer wrapper so every child inherits them. */
.icy-scoresheet-outer {
    --icy-left-color: var(--icy-home-color);
    --icy-right-color: var(--icy-away-color);
    border-left: 6px solid var(--icy-left-color) !important;
    border-right: 6px solid var(--icy-right-color) !important;
}

/* Open-ended mode (scorekeeping): rounded top, dashed bottom.
   margin-bottom keeps the dashed border visible above the fixed panel. */
.icy-scoresheet-outer.icy-scoresheet-open-ended {
    border-radius: 0.5rem 0.5rem 0 0;
    overflow: hidden;
    border-bottom: 2px dashed var(--bs-border-color);
    margin-bottom: 2px;
}
.icy-scoresheet-bottom-bar {
    grid-column: 1 / -1;
    height: 6px;
    background: linear-gradient(to right, var(--icy-left-color) 50%, var(--icy-right-color) 50%);
}
.icy-scoresheet-top-bar {
    height: 6px;
    background: linear-gradient(to right, var(--icy-left-color) 50%, var(--icy-right-color) 50%);
}

/* Event rows use border-top instead of border-bottom so no border sits
   against the dashed container border at the visual bottom (column-reverse start) */
.icy-scoresheet-event-row {
    border-top: 1px solid var(--bs-border-color);
}

.icy-sides-swapped .icy-scoresheet-outer:not(.icy-no-team-swap .icy-scoresheet-outer) {
    --icy-left-color: var(--icy-away-color);
    --icy-right-color: var(--icy-home-color);
}

/* Period selector: JS toggles between btn-group and <select> based on available space */
.icy-period-buttons { flex-shrink: 0; }
.icy-period-select { width: auto; }

/* Stack tab panes so the panel height equals the tallest pane */
.icy-scoresheet-pane-stack {
    display: grid;
}
.icy-scoresheet-pane-stack > * {
    grid-area: 1 / 1;
}

.period-separator {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Add-event modal focus ring */
.icy-add-event-modal :is(.form-control, .btn):focus {
    outline: 3px solid var(--bs-body-color);
    outline-offset: 2px;
}

/* Player combobox */
[data-controller="player-combobox"] {
    position: relative;
}
.dropdown-item.icy-highlight {
    background-color: var(--bs-dropdown-link-hover-bg);
}
.icy-combobox-ring {
    position: absolute;
    outline: 3px solid var(--bs-primary);
    border-radius: 0.375rem;
    pointer-events: none;
    z-index: 1060;
}
[data-player-combobox-target="sortHeader"],
[data-controller="player-combobox"] .dropdown-item[data-value] {
    display: grid !important;
    grid-template-columns: 1fr 3.5rem;
    column-gap: 1px;
}
[data-controller="player-combobox"] .dropdown-item[data-value] {
    padding: 0 !important;
}
[data-active-sort="name"] [data-sort="name"],
[data-active-sort="jersey"] [data-sort="jersey"] {
    background-color: var(--bs-secondary-bg-subtle);
}
[data-active-sort="name"] .dropdown-item:not(:hover):not(.active):not(.icy-highlight) > :first-child,
[data-active-sort="jersey"] .dropdown-item:not(:hover):not(.active):not(.icy-highlight) > :last-child {
    background-color: var(--bs-tertiary-bg);
}

.icy-game-score-missing {
    color: var(--bs-warning);
}


.icy-contrast-pick .btn {
    flex: 1;
}
.icy-ring-pick .btn-check:checked + .btn {
    box-shadow:
        0 0 0 1px var(--bs-body-bg),
        0 0 0 3px var(--bs-body-color);
}

.icy-game-ot-badge {
    position: absolute;
    z-index: var(--icy-z-ot-badge);
    transform: translate(-50%, -4px);
    padding: 2px 4px;

    /* inverted */
    background: var(--bs-body-color);
    color: var(--bs-body-bg);

    /* actual radius maxes out at half the shortest dimension */
    border-radius: 1em;
    border: solid 1px var(--bs-body-bg);
    box-shadow: 0px 0px 2px 2px #00000020;

    font-weight: bold;
    font-size: 9px;
    text-align: center;
}

/* Forfeit badge — positioned relative to the wrapper around icy-game-tvt,
   overlapping the top inside corner of the score box (2/3 inside, 1/3 outside).
   --_score-box-w and --_pad must match the score box width and team padding (p-1). */
.icy-game-forfeit-badge {
    --_size: 16px;
    --_offset: calc(var(--_size) / 3); /* 2/3 inside the score box, 1/3 outside */
    --_score-box-w: 1.8rem;
    --_pad: 0.25rem;
    position: absolute;
    top: calc(var(--_pad) - var(--_offset));
    z-index: var(--icy-z-goal-post);
    background: var(--bs-danger);
    color: #fff;
    border-radius: 50%;
    width: var(--_size);
    height: var(--_size);
    font-size: 11px;
    font-weight: bold;
    line-height: var(--_size);
    text-align: center;
}

/* Home: top-left corner of the home score box (inner-left edge) */
.icy-game-forfeit-badge-home {
    left: calc(50% - var(--_pad) - var(--_score-box-w) - var(--_offset));
}

/* Away: top-right corner of the away score box (inner-right edge) */
.icy-game-forfeit-badge-away {
    right: calc(50% - var(--_pad) - var(--_score-box-w) - var(--_offset));
}

/* Swapped layout: reverse badge positions */
.icy-sides-swapped .icy-game-forfeit-badge-home:not(.icy-no-team-swap .icy-game-forfeit-badge-home) {
    left: auto;
    right: calc(50% - var(--_pad) - var(--_score-box-w) - var(--_offset));
}
.icy-sides-swapped .icy-game-forfeit-badge-away:not(.icy-no-team-swap .icy-game-forfeit-badge-away) {
    right: auto;
    left: calc(50% - var(--_pad) - var(--_score-box-w) - var(--_offset));
}

.icy-grid-equal-widths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* width: max-content; */
}

.icy-game-scoring-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1px;
    background-color: var(--bs-border-color);
}

.icy-game-scoring-grid > * {
    background-color: var(--bs-body-bg);
}

/* Forfeit info text: hidden by default, shown when a forfeit checkbox is checked */
.icy-forfeit-info {
    display: none;
}
.icy-game-scoring-grid:has([data-game-editing-target="homeForfeit"]:checked) .icy-forfeit-info,
.icy-game-scoring-grid:has([data-game-editing-target="awayForfeit"]:checked) .icy-forfeit-info {
    display: block;
}

/* Score and OT fields: warning color when forfeit is active */
.icy-game-scoring-grid:has([data-game-editing-target="homeForfeit"]:checked) .icy-forfeit-affected,
.icy-game-scoring-grid:has([data-game-editing-target="awayForfeit"]:checked) .icy-forfeit-affected {
    color: var(--bs-warning-text-emphasis);
}

/* Scoresheet forfeit checkboxes — inside-out flow matching scoresheet columns */
.icy-scoresheet-outer .icy-scoresheet-forfeit-row,
.icy-scoresheet-outer .icy-forfeit-warning {
    border-bottom: 1px solid var(--bs-border-color);
}
.icy-forfeit-warning {
    display: none;
}
.icy-forfeit-section:has(input:checked) .icy-forfeit-warning {
    display: block;
}
.icy-sides-swapped .icy-scoresheet-forfeit-home { flex-direction: row; }
.icy-sides-swapped .icy-scoresheet-forfeit-away { flex-direction: row-reverse; }

.icy-game-editing-background {
    background: repeating-linear-gradient(-45deg,
            rgba(var(--bs-danger-rgb), 0.1) 0rem,
            rgba(var(--bs-danger-rgb), 0.1) 0.75rem,
            #00000000 0.75rem,
            #00000000 1.5rem);
}

.icy-game-editing-outline {
    position: relative;
    outline: var(--icy-edit-outline-width) dashed rgba(var(--bs-danger-rgb), 1);
    outline-offset: var(--icy-edit-outline-offset);
}

.icy-game-editing-outline::after {
    content: none;
}

/* Buttons */

.btn {
    white-space: nowrap;
}

/* Links */

a {
    color: inherit;
}

/* Text */

.icy-text-dotdotdot {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.icy-text-clip {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}

.icy-rsvp-thwomped {
    display: inline-block;
    position: relative;
    transform: rotate(3deg);
    padding: 0.0rem 0.25rem;
}

.icy-rsvp-thwomped::before {
    content: "";
    position: absolute;
    inset: 0 -0.1rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    /* border: 1px solid var(--bs-border-color-translucent); */
    box-shadow: 0 0.15rem 0.2rem rgba(0, 0, 0, 0.2);
    z-index: -1;
}

/* User menu tab buttons: truncate labels when space is tight */
#userMenuTabGroup .btn {
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

/* Outline button that uses body text color — dark in light mode, light in dark mode */
.btn-outline-body {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-body-color);
    --bs-btn-hover-border-color: var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-active-bg: var(--bs-body-color);
    --bs-btn-active-border-color: var(--bs-body-color);
    --bs-btn-active-color: var(--bs-body-bg);
}

/* Subtle outline on badges and chips for definition against similar backgrounds */
.badge,
.icy-chip-outline {
    box-shadow: inset 0 0 0 1px rgba(var(--bs-emphasis-color-rgb), 0.08);
}
/* Empty/unknown badge — dashed outline, no fill */
.badge.icy-badge-empty {
    background: transparent;
    color: var(--bs-body-secondary-color);
    outline: 1px dashed var(--bs-secondary-border-subtle);
    outline-offset: -1px;
    box-shadow: none;
}

/* Actually disable icy checkboxes */
.icy-form-check-input:disabled~.icy-form-check-label {
    color: var(--bs-secondary-text);
    opacity: var(--icy-disabled-element-opacity);
    pointer-events: none;
}

/* Actually disable the tomselect control */
select:disabled+.ts-wrapper .ts-control {
    opacity: var(--icy-disabled-element-opacity);
    pointer-events: none;
}

.rounded-square-icon-with-body-bg,
.circle-icon-with-body-bg {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    transform: translate(-50%, -50%);
}

.rounded-square-icon-with-body-bg {
    border-radius: 2px;
}

.circle-icon-with-body-bg {
    border-radius: 50%;
}

.icy-missing-data-outline {
    outline: var(--icy-missing-data-outline-width) solid var(--bs-warning);
    outline-offset: var(--icy-missing-data-outline-offset);
    box-shadow: 0 0 0 calc(var(--icy-missing-data-outline-offset) + var(--icy-missing-data-outline-width) + 1px) var(--bs-body-bg), var(--icy-missing-data-shadow) rgba(0, 0, 0, 0.3);
}


/* Chat */

:root {
    --icy-chat-bubble-padding-y: 0.5rem;
    --icy-chat-bubble-padding-x: 0.9rem;
    --icy-chat-bubble-tail-radius: 0.2rem;
    --icy-chat-bubble-radius: 1.0rem;
    --icy-chat-bubble-indent: 1rem;
    --icy-team-bg-tint: 10%;
    --icy-game-team-home-justify: center;
    --icy-game-team-away-justify: center;
}

.icy-chat-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    line-height: 120%;
}

/* Base bubble styling with tail flare */
.icy-bubble-with-tail-left {
    border-radius: var(--icy-chat-bubble-radius);
    border-top-left-radius: var(--icy-chat-bubble-tail-radius);
}

.icy-bubble-with-no-tail {
    border-radius: var(--icy-chat-bubble-radius);
}

.icy-bubble-with-tail-right {
    border-radius: var(--icy-chat-bubble-radius);
    border-top-right-radius: var(--icy-chat-bubble-tail-radius);
}

.icy-chat-bubble {
    display: inline-block;
    padding: var(--icy-chat-bubble-padding-y) var(--icy-chat-bubble-padding-x);
    border-radius: var(--icy-chat-bubble-radius);
    font-size: 0.8rem;
    position: relative;
    word-wrap: break-word;
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
}

/* Sender bubble (end-aligned) */
.icy-chat-bubble.icy-chat-sender {
    color: var(--bs-body-color);
    align-self: flex-end;
    border-top-right-radius: var(--icy-chat-bubble-tail-radius);
}

/* Receiver bubble (start-aligned) */
.icy-chat-bubble.icy-chat-receiver {
    color: var(--bs-body-color);
    align-self: flex-start;
    border-top-left-radius: var(--icy-chat-bubble-tail-radius);
}

/* RSVP comment filled state - uses bubble with tail styling */
.icy-rsvp-comment-filled {
    background-color: var(--icy-team-color);
    color: var(--icy-team-text-color);
    text-shadow: var(--icy-team-text-shadow);
    position: relative;
    padding: var(--icy-chat-bubble-padding-y) var(--icy-chat-bubble-padding-x);
    border: var(--bs-border-width) solid var(--bs-border-color-translucent);
}

/* RSVP comment textarea auto-resize */
.icy-rsvp-comment-input {
    field-sizing: content;
    resize: none;
    overflow: hidden;
}

/* Textarea inside filled bubble: inherit team colors, remove padding (wrapper has it) */
.icy-rsvp-comment-filled .icy-rsvp-comment-input {
    padding: 0;
    color: inherit;
}

.icy-rsvp-summary-bg {
    background-color: transparent !important;
    box-shadow: none;
    gap: 0.125rem;
}

.icy-button {
    cursor: pointer;
}
.icy-button:hover {
    filter: brightness(0.93);
}
.icy-button:active {
    filter: brightness(0.85);
}
.icy-button:focus {
    outline: 0.25rem solid rgba(var(--bs-primary-rgb), 0.5);
    outline-offset: 0;
}

.rsvp-status-tab-container--home,
.rsvp-status-tab-container--away {
    justify-content: flex-start;
}

/* Page container: flex column on mobile, 2-col grid at sm+ */
.icy-nextup {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Page grid — 2-column track (time | content) at all widths */
.icy-nextup {
    /* Viewport interpolation: 0px@320px → 1px@576px.
       Multiply by a px range to get a scaled value, then clamp. */
    --_vw-t: calc((100vw - 320px) / 256);
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 1.5rem;
}
.icy-nextup > * {
    grid-column: 1 / -1;
}

/* Date group inherits column tracks via subgrid */
.icy-nextup-date-group {
    display: grid;
    grid-template-columns: subgrid;
}
.icy-nextup-date-group > * {
    grid-column: 1 / -1;
}

/* Games container inherits column tracks via subgrid */
.icy-nextup-games {
    display: grid;
    grid-template-columns: subgrid;
    row-gap: 1rem;
}
.icy-nextup-games > * {
    grid-column: 1 / -1;
}

/* Home page game card */
.icy-nextup-game {
    display: grid;
    grid-template-columns: 1fr;
}

/* Home page game-with-time — 2-col subgrid with time aligned to game label row */
.icy-nextup-tag {
    font-weight: normal;
}
.icy-nextup-game-with-time {
    display: grid;
    grid-template-columns: subgrid;
    column-gap: 0.5rem;
}
/* Flatten wrapper chain so .icy-nextup-game children join the outer grid */
.icy-nextup-game-with-time > :not(.icy-nextup-time),
.icy-nextup-game-with-time > :not(.icy-nextup-time) > *,
.icy-nextup-game-with-time .icy-nextup-game {
    display: contents;
}
.icy-nextup-game-with-time > .icy-nextup-time {
    /* 0.75rem → 1rem (range 4px, via --_vw-t) */
    font-size: clamp(0.75rem, 0.75rem + 4 * var(--_vw-t), 1rem);
    font-weight: bold;
    text-align: end;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: center;
    grid-column: 1;
    grid-row: 2;
    line-height: 1;
    position: relative;
    /* Left padding: 0 → 0.5rem (range 8px, via --_vw-t) */
    padding: 0.375rem 0 0.375rem clamp(0px, 8 * var(--_vw-t), 0.5rem);
    --_grid-w: calc(min(100vw, var(--bs-breakpoint-sm)) - 2 * var(--icy-nextup-padding-x));
    --_below-h: 2rem;
}
.icy-nextup-time-below {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0.0625rem;
    margin-bottom: calc(-1 * var(--_below-h));
}
.icy-nextup-ampm {
    font-size: 0.75em;
    font-weight: normal;
    line-height: 1;
}
.icy-nextup-side {
    font-size: 0.625rem;
    text-transform: uppercase;
    font-weight: normal;
    opacity: 0.7;
    line-height: 1;
    white-space: nowrap;
    margin-top: 0.5rem;
}
.icy-nextup-game-with-time .icy-rsvp-summary-row {
    grid-column: 2;
    grid-row: 1;
}
.icy-nextup-game-with-time .icy-nextup-game-label {
    grid-column: 2;
    grid-row: 2;
}
.icy-nextup-game-with-time .icy-popover {
    grid-column: 2;
}
.icy-nextup-connected--chips {
    --_tape-color: color-mix(in srgb, var(--icy-team-color) 20%, var(--bs-tertiary-bg));
    --_tape-text-color: var(--bs-body-color);
    --_tape-text-shadow: none;
    --icy-team-tint-rsvp-summary: 0%;
}

.icy-rsvp-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
}

.icy-nextup-game-label {
    min-width: 0;
    font-weight: 400;
    position: relative;
    /* 0.875rem → 1rem (range 2px, via --_vw-t) */
    font-size: clamp(0.875rem, 0.875rem + 2 * var(--_vw-t), 1rem);
}
.icy-nextup-game-label .icy-game-team-home,
.icy-nextup-game-label .icy-game-team-home:has(.icy-game-score-box) {
    flex-direction: row;         /* chip on left of name (overrides row-reverse) */
    justify-content: flex-start;
}
.icy-nextup-game-label .icy-game-team-away,
.icy-nextup-game-label .icy-game-team-away:has(.icy-game-score-box) {
    justify-content: flex-start;
}
/* Team separator — vertical center line spanning RSVP summary + game label.
   Split across two pseudo-elements so each covers its own row height,
   avoiding overshoot when the RSVP row is shorter (e.g. goalie info hidden). */
.icy-rsvp-summary-row {
    position: relative;
}
.icy-rsvp-summary-row::after,
.icy-rsvp-summary-row ~ .icy-nextup-game-label::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 0;
    outline: 0.5px solid var(--bs-border-color-translucent);
    pointer-events: none;
    z-index: calc(var(--icy-z-game-label) + 1);
}

.icy-connected-home .icy-game-team-home,
.icy-connected-away .icy-game-team-away {
    padding-top: var(--icy-my-team-padding-expansion);
    padding-bottom: var(--icy-my-team-padding-expansion);
    padding-left: var(--icy-my-team-padding-expansion);
    margin-top: calc(-1 * var(--icy-my-team-padding-expansion));
    margin-bottom: calc(-1 * var(--icy-my-team-padding-expansion));
    align-items: center;
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.2));
}
.icy-connected-home .icy-game-team-home > .icy-text-dotdotdot,
.icy-connected-away .icy-game-team-away > .icy-text-dotdotdot {
    font-weight: 600;
    font-size: 1.15em;
    margin-left: 0.25rem;
}
.icy-connected-home .icy-game-team-home > .icy-game-score-box,
.icy-connected-away .icy-game-team-away > .icy-game-score-box {
    align-self: center;
}
.icy-nextup-game-label .icy-game-tvt {
    border: none;
}
/* ── My-team-first ───────────────────────────────────────────────
   Flip layout so connected team always appears on the leading side.
   To disable: comment out or delete this block through the closing
   "end my-team-first" comment. */

/* RSVP summary: swap column order */
.icy-my-team-first .icy-rsvp-summary-row > :first-child { order: 2; }
.icy-my-team-first .icy-rsvp-summary-row > :last-child  { order: 1; }
.icy-my-team-first .rsvp-status-tab-container--home { justify-content: var(--icy-game-team-away-justify); }
.icy-my-team-first .rsvp-status-tab-container--away { justify-content: var(--icy-game-team-home-justify); }

/* Game label: reverse teams */
.icy-my-team-first .icy-game-tvt {
    flex-direction: row-reverse;
}
.icy-my-team-first .icy-game-team-home:has(.icy-game-score-box) {
    flex-direction: row;
}
.icy-my-team-first .icy-game-team-away:has(.icy-game-score-box) {
    flex-direction: row-reverse;
}
.icy-my-team-first .icy-game-forfeit-badge-home {
    left: auto;
    right: calc(50% - var(--_pad) - var(--_score-box-w) - var(--_offset));
}
.icy-my-team-first .icy-game-forfeit-badge-away {
    right: auto;
    left: calc(50% - var(--_pad) - var(--_score-box-w) - var(--_offset));
}

/* Popover: flip to start side */
.icy-my-team-first .icy-popover-panel--away { justify-self: start; }
.icy-my-team-first .icy-popover-panel--away .d-flex.flex-row {
    flex-direction: row !important;
}
/* Nextup: keep chip on left + left-align even when my-team-first swaps directions */
.icy-my-team-first .icy-nextup-game-label .icy-game-team-away:has(.icy-game-score-box) {
    flex-direction: row;         /* override my-team-first's row-reverse swap */
    justify-content: flex-start;
}
/* ── end my-team-first ──────────────────────────────────────── */

/* Connected game time — text color on team background.
   Stretch to fill row so the tape strip top aligns with the team label top. */
.icy-nextup-connected > .icy-nextup-time {
    color: var(--_tape-text-color, var(--icy-team-text-color));
    text-shadow: var(--_tape-text-shadow, var(--icy-team-text-shadow, none));
    align-self: stretch;
    justify-content: center;
}
/* Time text sits above the tape strip background */
.icy-nextup-time > span {
    position: relative;
    z-index: 1;
}

/* Live beacon — pulsing red dot for in-progress games */
.icy-live-beacon {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0.125rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: currentColor;
    animation: icy-live-pulse 2s ease-in-out infinite;
}
@keyframes icy-live-pulse {
    0% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
    30% { opacity: 0.4; box-shadow: 0 0 0 4px transparent; }
    100% { opacity: 0.4; box-shadow: 0 0 0 4px transparent; }
}

/* Tape highlight — absolute inside .icy-nextup-time.
   Covers time + below-time labels; extends 1rem past game label midpoint. */
.icy-tape-strip {
    position: absolute;
    top: 0;
    bottom: calc(-1 * var(--_below-h));
    left: -0.25rem;
    /* 50% = col1/2; --_grid-w/2 ≈ label midpoint from page center;
       1.75rem = gap/2 + 1.5rem past mid */
    right: calc(50% - var(--_grid-w) / 2 - 1.75rem);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
.icy-tape-strip-fill {
    position: absolute;
    inset: 0;
    background: var(--_tape-color, var(--icy-team-color));
}
/* Tape strip end pieces — shared base */
.icy-tape-strip-end {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.25rem;
    background: var(--_tape-color, var(--icy-team-color));
}
.icy-tape-strip-end-left  { right: 100%; }
.icy-tape-strip-end-right { left:  100%; }

/* ripped — irregular torn-paper edges (1px overlap to hide seam).
   Clip-path defined once; right side mirrors with scaleX(-1). */
.icy-tape-strip-end-ripped.icy-tape-strip-end-left  { right: calc(100% - 1px); }
.icy-tape-strip-end-ripped.icy-tape-strip-end-right { left:  calc(100% - 1px); }
.icy-tape-strip-end-ripped {
    clip-path: polygon(
        40% 0%, 100% 0%,
        100% 100%, 45% 100%,
        55% 90%, 30% 82%, 50% 75%,
        25% 68%, 60% 58%, 35% 50%,
        55% 42%, 30% 35%, 50% 28%,
        20% 20%, 45% 12%, 35% 5%
    );
}
.icy-tape-strip-end-ripped.icy-tape-strip-end-right {
    transform: scaleX(-1);
}

/* skew-cut — parallelogram, both cuts tilt the same way.
   Right side flips both axes. */
.icy-tape-strip-end-skew-cut {
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}
.icy-tape-strip-end-skew-cut.icy-tape-strip-end-right {
    transform: scale(-1, -1);
}

/* straight-cut — clean vertical rectangle, no clip-path needed */

/* rounded — border-radius on outer corners.
   Right side mirrors with scaleX(-1). */
.icy-tape-strip-end-rounded {
    border-radius: 0.25rem 0 0 0.25rem;
}
.icy-tape-strip-end-rounded.icy-tape-strip-end-right {
    transform: scaleX(-1);
}

/* jagged — zigzag pinking-shear edge.
   Clip-path defined once; right side uses scale(-1,-1) to mirror x and flip y. */
.icy-tape-strip-end-jagged {
    clip-path: polygon(
        100% 0%,   40% 8%,  100% 15%,
         40% 23%, 100% 31%,  40% 38%,
        100% 46%,  40% 54%, 100% 62%,
         40% 69%, 100% 77%,  40% 85%,
        100% 92%,  40% 100%, 100% 100%
    );
}
.icy-tape-strip-end-jagged.icy-tape-strip-end-right {
    transform: scale(-1, -1);
}

/* home-vs-away mode: tape extends full width when connected to away team.
   100% = time column width, --_grid-w = full grid width.
   Result is a negative `right` that spans the entire content area. */
.icy-tape-full-width .icy-tape-strip {
    right: calc(100% - var(--_grid-w) - 0.25rem);
}

.icy-nextup-connected .icy-game-label-shadow {
    filter: drop-shadow(0 0.15rem 0.4rem rgba(0, 0, 0, 0.2));
}
/* Connected team label: transparent background, no shadow (tape provides the highlight) */
.icy-nextup-connected .icy-connected-home .icy-game-team-home,
.icy-nextup-connected .icy-connected-away .icy-game-team-away {
    background: transparent !important;
    filter: none;
}

.icy-popover {
    /* Arrow height (7px) used by compact mode's negative margin to collapse arrow space.
       Computed value from the arrow geometry defined on .icy-popover-arrow. */
    --icy-popover-arrow-height: 7px;

    /* Phase timing (base values, scaled by --icy-anim-time-scale)
       Phase 1 (compactness): size, position, shape
       Phase 2 (content): arrow opacity, accordion expand/collapse */
    --_pop-phase-compactness-dur: 0.15s;
    --_pop-phase-compactness-delay: 0s;
    --_pop-phase-content-dur: 0.15s;
    --_pop-phase-content-delay: var(--_pop-phase-compactness-dur);
    --_pop-easing: ease-in-out;
    --_pop-phase-compactness: calc(var(--_pop-phase-compactness-dur) * var(--icy-anim-time-scale)) var(--_pop-easing) calc(var(--_pop-phase-compactness-delay) * var(--icy-anim-time-scale));
    --_pop-phase-content: calc(var(--_pop-phase-content-dur) * var(--icy-anim-time-scale)) var(--_pop-easing) calc(var(--_pop-phase-content-delay) * var(--icy-anim-time-scale));

    display: grid;
    grid-template-columns: 1fr 1fr;
    min-width: 0;
    position: relative;
    z-index: var(--icy-z-popover);
}

/* Pointer from connected panel up toward user's team name.
   --icy-popover-arrow-pos defaults to -1 (unset). CSS uses this to:
   - clamp padding-left to 0 (arrow at left edge, but invisible so position irrelevant)
   - set SVG opacity to 0 (arrow invisible, but still reserves vertical space)
   When JS sets the property to 0–1, the arrow appears at the correct position. */
.icy-popover-arrow {
    /* Arrow SVG geometry (viewBox 0 0 32 16):
       peak at y=0, baseline at y=14, fill skirt to y=16.
       Triangle is 14px tall; we crop from the top to show only the desired
       visible height, and overlap the skirt into the box border below.
       --_arrow-margin-near  = crop side (away from the box)
       --_arrow-margin-far   = overlap side (into the box border)
       Defined here (not on .icy-popover) so _popover.html.twig works without
       a .icy-popover ancestor. */
    --_arrow-svg-height: 16px;
    --_arrow-triangle-height: 14px;                                                     /* peak y=0 to baseline y=14 */
    --_arrow-visible-height: 8px;                                                       /* aesthetic: how much triangle shows */
    --_arrow-skirt: calc(var(--_arrow-svg-height) - var(--_arrow-triangle-height));      /* 2px: fill below baseline */
    --_arrow-crop: calc(var(--_arrow-triangle-height) - var(--_arrow-visible-height));   /* 6px */
    --_arrow-overlap: calc(var(--_arrow-skirt) + var(--bs-border-width, 1px));           /* 3px: skirt + box border */

    /* Top arrow (default): crop top, overlap bottom into box below.
       --bottom flips these so crop is at bottom, overlap reaches into box above. */
    --_arrow-margin-near: calc(-1 * var(--_arrow-crop));                                /* -6px */
    --_arrow-margin-far: calc(-1 * var(--_arrow-overlap));                              /* -3px */

    display: flex;
    align-items: flex-end;       /* SVG flush with box below */
    justify-content: flex-start;
    padding-left: calc(max(0, var(--icy-popover-arrow-pos, -1)) * (100% - 32px));
    pointer-events: none;
    z-index: var(--icy-z-popover-arrow);
}

.icy-popover-arrow > svg {
    display: block;
    width: 32px;
    height: var(--_arrow-svg-height);
    margin-top: var(--_arrow-margin-near);
    margin-bottom: var(--_arrow-margin-far);
    opacity: clamp(0, calc(var(--icy-popover-arrow-pos, -1) + 1), 1);
}

/* Bottom arrow: flip SVG, swap margins, align SVG flush with box above. */
.icy-popover-arrow--bottom {
    --_arrow-margin-near: calc(-1 * var(--_arrow-overlap));                             /* -3px */
    --_arrow-margin-far: calc(-1 * var(--_arrow-crop));                                 /* -6px */
    align-items: flex-start;
}

.icy-popover-arrow--bottom > svg {
    transform: scaleY(-1);
}


/* Connected panels: always span full grid, sized/positioned via compact state */
.icy-popover-panel--home,
.icy-popover-panel--away {
    position: relative;
    grid-row: 2;
    grid-column: 1 / -1;
    left: 0;
    width: clamp(300px, 75%, 100%);
}
.icy-popover-panel--home { justify-self: start; }
.icy-popover-panel--away { justify-self: end; }
.icy-popover-panel--wide { width: clamp(75%, 300px, 100%); }

.icy-popover-box {
    --icy-popover-body-padding: 0.5rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color-translucent) !important;
    /* concentric corners: inner btn radius + body padding */
    border-radius: calc(var(--bs-border-radius) + var(--icy-popover-body-padding));
    flex-grow: 1;
}

.icy-popover-body {
    padding: var(--icy-popover-body-padding);
    transition: padding var(--_pop-phase-compactness);
}

.icy-popover--compact .icy-popover-box {
    outline: 1px solid var(--bs-border-color-translucent);
}
.icy-popover--compact .icy-popover-body {
    position: relative;
    z-index: calc(var(--icy-z-game-label) + 1); /* float body + RSVP rings above game label */
    padding: var(--icy-compact-padding);
    text-shadow: 0 0 0.5rem var(--bs-body-bg);
}

.icy-popover--compact .icy-popover-box {
    position: relative;
    background: transparent;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    border: none !important;
    border-radius: var(--icy-game-button-border-radius);
}
/* backdrop-filter on pseudo to avoid creating a stacking context on the box,
   which would trap RSVP rings behind the game label */
.icy-popover--compact .icy-popover-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--bs-body-bg) 50%, transparent);
    backdrop-filter: blur(8px);
}

.icy-outline {
    outline: 1px solid var(--bs-border-color);
    outline-offset: -1px;
}

/* Active sort header: body text color as bg, body bg as text */
.icy-sort-header-active {
    background-color: var(--bs-body-color);
    color: var(--bs-body-bg);
    text-shadow: 0 0 1rem currentColor;
}

/* Player list grid */
.icy-player-list {
    display: grid;
    grid-template-columns: 3ch 1fr auto 4ch;
    container-type: inline-size;
}

.icy-player-list-section {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

.icy-player-list-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
}

/* Column highlight for active sort — ::before spans the full column behind both sections */
.icy-player-list--sorted::before {
    content: '';
    grid-column: var(--icy-sort-col);
    grid-row: 1 / 3;
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.08);
    pointer-events: none;
}
.icy-player-list > .icy-player-list-section:nth-of-type(1) { grid-row: 1; }
.icy-player-list > .icy-player-list-section:nth-of-type(2) { grid-row: 2; }

.icy-player-list-full {
    grid-column: 1 / -1;
}

.icy-player-list .icy-chat-container {
    margin-top: -4px;
}

/* Team RSVPs toggle: square button sized to match comment textarea */
.icy-team-rsvps-toggle-btn {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    padding: 0;
    border-color: transparent;
}

/* Team RSVPs toggle: body text when collapsed, filled when expanded */
.icy-team-rsvps-toggle-btn.collapsed {
    color: var(--bs-body-color);
}
.icy-team-rsvps-toggle-btn:not(.collapsed) {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}



/* Compact/expanded transitions — 2 phases:
   Phase 1: everything (size, position, shape) at once
   Phase 2: arrow opacity fades in
   Collapse reverses: arrow fades out first, then everything else */
.icy-popover-panel--home,
.icy-popover-panel--away {
    transition: filter var(--_pop-phase-compactness),
                margin-top var(--_pop-phase-compactness),
                margin-left var(--_pop-phase-compactness),
                width var(--_pop-phase-compactness);
}

.icy-popover-arrow {
    transition: opacity var(--_pop-phase-content);
}

.icy-popover-box {
    transition: border-radius var(--_pop-phase-compactness),
                box-shadow var(--_pop-phase-compactness),
                background var(--_pop-phase-compactness),
                backdrop-filter var(--_pop-phase-compactness);
}

/* Compact mode: arrow hidden, lighter shadow, icon-only buttons, tighter padding,
   panel sizes to content instead of filling the grid column. */
.icy-popover--compact .icy-popover-arrow {
    opacity: 0;
}

.icy-popover--compact {
    z-index: auto;  /* no stacking context — lets RSVP rings escape above game label */
    --icy-compact-padding: 0;
    /* Reverse: arrow first, then everything else */
    --_pop-phase-compactness-delay: var(--_pop-phase-content-dur);
    --_pop-phase-content-delay: 0s;
}

.icy-popover--compact .icy-popover-panel--home,
.icy-popover--compact .icy-popover-panel--away {
    margin-top: calc(-1 * var(--icy-popover-arrow-height) + 4px);
    margin-left: 0;
    /* Right edge sits one corner-radius before midline; grows if content needs more */
    width: fit-content;
    min-width: calc(50% - 2 * var(--icy-game-button-border-radius));
}

/* Expandable RSVP popover: explicit width (required for CSS transition → JS sequencing) */
.icy-popover--compact.icy-popover--expandable .icy-popover-panel--home,
.icy-popover--compact.icy-popover--expandable .icy-popover-panel--away {
    width: max(180px, calc(50% - 2 * var(--icy-game-button-border-radius)));
}

.icy-popover-panel--away .d-flex.flex-row {
    flex-direction: row-reverse !important;
}


/* Square toggle sized to match a default .btn's height:
   2 * padding-y + font-size * line-height + 2 * border-width */
.icy-popover .icy-team-rsvps-toggle-btn {
    --_size: calc(var(--bs-btn-padding-y) * 2 + var(--bs-btn-font-size) * var(--bs-btn-line-height) + var(--bs-btn-border-width) * 2);
    width: var(--_size);
    height: var(--_size);
    overflow: visible;
    filter: drop-shadow(0 0 0.25rem var(--bs-body-bg));
    margin-left: 2px;
}

.icy-popover .icy-team-rsvps-toggle-btn > .bi-people-fill {
    font-size: 1.2em;
    margin-top: 0.5em;
}

.icy-popover .icy-team-rsvps-toggle-btn > .icy-disclosure-chevron {
    font-size: 0.75em;
    margin-top: -0.25em;
    line-height: 1;
}

/* Compact popover: disable container-type (inline-size containment zeroes min-content)
   and force icon mode directly so min-width: min-content works on the btn-group. */
.icy-popover--compact .icy-rsvp-btn-group {
    container-type: normal;
    min-width: min-content;
}
/* Make compact popover backgrounds transparent so backdrop-filter blur shows through.
   Exclude checked RSVP buttons so their team-color/ring backgrounds still apply. */
.icy-popover--compact .icy-game-rsvp-box,
.icy-popover--compact .btn-group {
    background-color: transparent !important;
}
.icy-popover--compact .icy-rsvp-btn-group .btn-check:not(:checked)+.btn {
    background-color: transparent !important;
}
.icy-popover--compact .icy-rsvp-btn-group .btn-check:checked+.btn-outline-secondary {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--bs-body-bg) 50%, transparent),
        0 0 0 5px color-mix(in srgb, var(--_rsvp-ring-color) 75%, transparent);
}
.icy-popover--compact .icy-rsvp-btn-text { display: none; }
.icy-popover--compact .icy-rsvp-btn-icon { display: inline; }

.icy-popover .icy-rsvp-btn-group,
.icy-popover .icy-rsvp-btn-group > .btn {
    transition: border-radius var(--_pop-phase-compactness);
}




/* Generic loading indicator with delayed reveal */
.icy-loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    animation: icy-loading-fade-in 0s linear 1s forwards;
}

.icy-loading-indicator--htmx {
    display: none;
}

.icy-loading-indicator--htmx.htmx-request {
    display: inline-flex;
    animation: icy-loading-fade-in 0s linear 1s forwards;
}

@keyframes icy-loading-fade-in {
    to {
        opacity: 1;
    }
}

/* HTMX button loading spinner (mutating requests) */

.icy-htmx-loading {
    position: relative;
    color: transparent !important;
}

.icy-htmx-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em 0 0 -0.5em;
    border: 0.15em solid var(--bs-btn-color, currentColor);
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
    animation: icy-loading-fade-in 0s linear 1s forwards, icy-htmx-spin 0.6s linear infinite;
}

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

/* RSVP select tint when set to NR (CSS-only, no JS needed) */
select.icy-rsvp-select {
    color: var(--bs-body-color);
}

select.icy-rsvp-select:has(option[value="0"]:checked) {
    color: var(--bs-secondary);
}


/* Matrix grid (matchups, time slots) */

.icy-matrix-grid {
    display: grid;
    width: max-content;
}

.icy-matrix-row-th,
.icy-matrix-col-th {
    overflow: hidden;
    font-weight: var(--bs-body-font-weight);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.icy-matrix-row-th {
    border-start-start-radius: var(--bs-border-radius);
    border-end-start-radius: var(--bs-border-radius);
    justify-content: flex-end;
}

.icy-matrix-col-th {
    border-start-start-radius: var(--bs-border-radius);
    border-start-end-radius: var(--bs-border-radius);
    justify-content: center;
}

.icy-matrix-row-label,
.icy-matrix-col-label {
    display: block;
    font-size: var(--bs-body-font-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icy-matrix-row-label {
    padding: 0.15rem 0.4rem;
    text-align: end;
}

.icy-matrix-col-label {
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    padding: 0.4rem 0.15rem;
    text-align: start;
}

.icy-matrix-title-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: var(--bs-body-font-weight);
    padding: 0.25rem;
    min-width: 4rem;
    min-height: 4rem;
}

.icy-matrix-title-cell-number {
    font-size: 1.5rem;
    font-weight: bold;
}

.icy-matrix-title-cell-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.icy-matrix-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.15rem;
    min-width: 2rem;
    min-height: 2rem;
    border-block-start: var(--bs-border-width) solid var(--bs-border-color);
    border-inline-start: var(--bs-border-width) solid var(--bs-border-color);
}

.icy-navbar-tabstrip > .nav-item > .nav-link {
    white-space: nowrap;
}

/* Active tab overlaps the container border to appear "connected" to content below */
.icy-navbar-tabstrip > .nav-item > .nav-link.active {
    margin-bottom: -1px;
    border-bottom-color: var(--bs-body-bg) !important;
    position: relative;
    z-index: var(--icy-z-navbar-active-tab);
}

/* Navbar auto-layout: when tabs fit inline, promote them between brand and user.
   nowrap prevents items from wrapping so scrollWidth correctly reflects overflow
   (Bootstrap .row defaults to flex-wrap: wrap). */
.icy-navbar-inline {
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
}
.icy-navbar-inline > .icy-navbar-brand {
    width: auto !important;
    flex: 0 0 auto !important;
}
.icy-navbar-inline > .icy-navbar-tabs {
    width: auto !important;
    flex: 0 0 auto !important;
    order: 2 !important;
}
.icy-navbar-inline .icy-navbar-tabs-inner {
    display: inline-flex !important;
}
.icy-navbar-inline > .icy-navbar-user {
    width: auto !important;
    flex: 0 0 auto !important;
    order: 4 !important;
    margin-left: auto !important;
}

/* Dropdown fallback: hidden by default */
.icy-navbar-dropdown-menu {
    display: none;
}

/* Dropdown mode: hide tab strip, show dropdown */
.icy-navbar-dropdown .icy-navbar-tabstrip {
    display: none !important;
}
.icy-navbar-dropdown .icy-navbar-dropdown-menu {
    display: block !important;
}

/* User menu button: adaptive light/dark with shadow.
   Uses color-mix against body variables so the relative contrast
   is identical regardless of theme. */
.icy-user-menu-btn {
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid color-mix(in srgb, var(--bs-body-color) 15%, transparent);
    box-shadow: var(--bs-box-shadow-sm);
}
.icy-user-menu-btn:hover,
.icy-user-menu-btn:active,
.icy-user-menu-btn.show {
    background-color: color-mix(in srgb, var(--bs-body-bg) 85%, var(--bs-body-color));
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-body-color) 25%, transparent);
    box-shadow: var(--bs-box-shadow);
}
.icy-user-menu-btn:focus-visible {
    background-color: color-mix(in srgb, var(--bs-body-bg) 85%, var(--bs-body-color));
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-body-color) 25%, transparent);
}

/* FIX IT button: inverted translucent, adaptive light/dark */
.icy-fixit-btn {
    background-color: color-mix(in srgb, var(--bs-body-color) 40%, transparent);
    backdrop-filter: blur(4px);
    color: var(--bs-body-bg);
    border: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: var(--bs-box-shadow-sm);
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.icy-fixit-btn:hover {
    background-color: color-mix(in srgb, var(--bs-body-color) 55%, transparent);
    color: var(--bs-body-bg);
}

/* Official score grid */
.icy-official-score {
    display: grid;
    grid-template-columns: min-content auto auto auto auto;
}
.icy-official-score-header,
.icy-official-score-cell {
    padding: 0.25rem 0.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}
.icy-official-score-header.text-start,
.icy-official-score-cell.text-start {
    justify-content: start;
}
.icy-official-score-cell.text-start {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.icy-official-score-header {
    font-weight: bold;
    background-color: var(--bs-tertiary-bg);
}
.icy-official-score > :nth-child(5n+1) {
    padding: 0.25rem;
    justify-content: end;
}
.icy-official-score-highlight {
    background-color: var(--bs-tertiary-bg);
}
/* Last row (OT) has no bottom border */
.icy-official-score > :nth-last-child(-n+5) {
    border-bottom: none;
}