@font-face {
    font-family: "Autolova";
    src: url("../fonts/Autolova.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tecmo Bowl";
    src: url("../fonts/Tecmo Bowl.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

body {
    padding: 0;
}

.logo {
    font-family: 'Autolova', sans-serif;
    font-size: 3rem;
    text-shadow: 2px 2px 0 #FC6649;
    display: inline-block;
    background-color: white;
    border-radius: 999px;
    padding: 0.15rem 1.4rem;
}

.teamName {
    font-family: 'Tecmo Bowl', sans-serif;
    font-size: 2rem;
}

.title {
    transition: color 0.9s ease;
}

.logo-bar {
    padding: 0.75rem 1rem;
    max-width: 1750px;
    margin: 0 auto;
    text-align: center;
}

.helmet-bar-wrapper {
    background-color: #0071ef;
    padding: 0.75rem 1rem;
    max-width: 1750px;
    margin: 0 auto;
}

.helmet-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    align-items: flex-start;
}

.helmet-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.helmet-group-label {
    font-family: 'Tecmo Bowl', sans-serif;
    font-size: 7px;
    letter-spacing: 0.5px;
    line-height: 1;
    color: white;
    white-space: nowrap;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

.helmet-divider {
    align-self: stretch;
    width: 3px;
    background-color: #ffffff;
    box-shadow: 2px 0 0 rgba(0, 0, 0, 0.35);
    margin: 0 0.15rem;
}

.helmet-group-row {
    display: flex;
    gap: 0.4rem;
}

.helmet-icon {
    width: 32px;
    height: auto;
    image-rendering: pixelated;
    cursor: pointer;
    transition: transform 0.2s ease;
    filter: drop-shadow(0 0 2px black);
}

.helmet-icon:hover {
    transform: scale(1.3);
}

.helmet-icon.selected {
    transform: scale(1.4);
}

.team-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.team-info {
    flex: 1;
}

.header-break {
    display: none;
}

#team-record {
    font-size: 14px;
    transform: scale(4);
    transform-origin: right top;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    margin-left: auto;
    white-space: nowrap;
}

#team-helmet {
    width: 100px;
    height: auto;
    image-rendering: pixelated;
}

#team-card {
    font-family: 'Tecmo Bowl', sans-serif;
    font-size: 1.2rem;
    padding: 0 1rem;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

#team-name {
    /* h2 is block-level, so without this its box fills .team-info's whole
       width regardless of the text inside - then scale(4) blows up that
       already-full-width box instead of just the text, so the visual
       overflow grows as the window narrows (the container shrinks, but the
       scaled box still tries to fill it) rather than with the team name's
       actual length. width:fit-content sizes the box to the text instead,
       so scale(4) only enlarges what's actually there. */
    width: fit-content;
    font-size: 12px;
    transform: scale(4);
    transform-origin: left top;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    margin-bottom: 4rem;
}

#team-city {
    width: fit-content;
    font-size: 16px;
    transform: scale(2);
    transform-origin: left top;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    margin-bottom: 1.5rem;
}

#team-conference {
    font-size: 1.5rem;
}

#team-rank {
    font-size: 16px;
}

#team-division {
    font-size: 16px;
    transform: scale(1.5);
    transform-origin: left top;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    margin-bottom: 0.75rem;
    margin-left: -6px;
}

.page-content {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    max-width: 1750px;
    margin: 0 auto;
}

.stats-row {
    display: flex;
    /* Used to be align-items:stretch, which forced #stats-panel to match
       #schedule-panel's height exactly - fine back when #stats-panel only
       held two charts that divided that height evenly between them, but
       adding the tendencies table as a third row meant it had to compete
       for a share of that same fixed total, shrinking the charts to make
       room. flex-start lets #stats-panel grow to whatever its own content
       (two full-size charts plus the tendencies table) actually needs,
       even past #schedule-panel's height - the page just scrolls a bit
       further instead of squeezing everything to match. */
    align-items: flex-start;
    width: 100%;
    margin-top: 1rem;
    gap: 1.25rem;
    flex-wrap: wrap;
}

#schedule-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-family: 'Tecmo Bowl', sans-serif;
    border-style: solid;
    border-width: 4px;
    border-image-slice: 4;
    border-image-repeat: stretch;
    image-rendering: pixelated;
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

#schedule-table {
    border-collapse: separate;
    border-spacing: 1;
    background: grey;
    padding: 0.2rem 0.3rem 0.3rem;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    display: block;
    image-rendering: pixelated;
}

#schedule-table td {
    padding: .07rem 0.4rem;
    line-height: .25;
    font-size: 14px;
    letter-spacing: -1px;
    white-space: nowrap;
}

#schedule-table td:first-child {
    height: 20px;
}

#schedule-table td:nth-child(4) {
    padding-right: 0.15rem;
    text-align: right;
}

#schedule-table td:last-child {
    padding-left: 0.15rem;
    text-align: center;
}

/* Opponent helmet icon size */
.schedule-helmet {
    width: 20px;
    height: auto;
    image-rendering: pixelated;
    display: block;
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.55));
}

#stats-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1 1 900px;
    min-width: 780px;
    max-width: 1200px;
    font-family: 'Tecmo Bowl', sans-serif;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

.chart-row {
    /* Used to be flex:1 1 0, dividing #stats-panel's externally-stretched
       height evenly between the two chart-rows. Now that #stats-panel
       sizes itself from its own content (see .stats-row), there's no
       externally-imposed height left to divide - flex:0 0 auto instead
       sizes each row to its own content (chart-block's explicit height,
       below), which is what actually determines how tall things are now. */
    flex: 0 0 auto;
    display: flex;
    gap: 0.6rem;
}

.chart-block {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* A real height, not just a min-height floor: .chart-inner's own
       children (.chart-body/.chart-main/.plot-row/.pixel-chart-wrap) are
       flex:1 with a 0% basis, which need a definite ancestor height to
       resolve against. Without one, they fall back to sizing from their
       own content - including the canvas, whose JS sizing reads back
       .pixel-chart-wrap's rendered rect, a circular dependency that grows
       a little more with each render pass. */
    height: 280px;
    min-width: 0;
    border-style: solid;
    border-width: 4px;
    border-image-slice: 4;
    border-image-repeat: stretch;
    image-rendering: pixelated;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.chart-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: grey;
    padding: 0.4rem 0.6rem 0.5rem;
}

/* Blocky, stepped corners instead of a smooth border-radius curve, for an
   8-bit look. Kept off .chart-block/#schedule-panel on purpose: those host
   the <legend>, whose text now pokes above the fieldset's own top edge (see
   .chart-title's reduced "height", which shrinks the border to 4px without
   touching the text itself) - clip-path would slice off that overlap, so
   the fieldsets stay a plain rect (overflow: hidden doesn't clip a legend
   the way clip-path does) and get their pixel corners from a border-image
   (see pixelBorderImage() in filter.js) instead. */
.pixel-box,
.stat-card {
    clip-path: polygon(
        3px 0, calc(100% - 3px) 0,
        calc(100% - 3px) 1px, calc(100% - 1px) 1px,
        calc(100% - 1px) 3px, 100% 3px,
        100% calc(100% - 3px), calc(100% - 1px) calc(100% - 3px),
        calc(100% - 1px) calc(100% - 1px), calc(100% - 3px) calc(100% - 1px),
        calc(100% - 3px) 100%, 3px 100%,
        3px calc(100% - 1px), 1px calc(100% - 1px),
        1px calc(100% - 3px), 0 calc(100% - 3px),
        0 3px, 1px 3px,
        1px 1px, 3px 1px
    );
}

/* .chart-inner/#schedule-table stay plain rectangles on purpose. They sit
   flush against .chart-block/#schedule-panel's border-image, whose notch
   already cuts all the way through the border to reveal the page behind it
   right at the tip - giving that inner rectangle its own separate notch
   double-cut the corner (two disjoint steps, bridged by a stray sliver of
   border color) instead of nesting into one clean step. */

.stat-cards {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 0 0 168px;
}

.stat-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    border: solid;
    background: grey;
    padding: 0.25rem 0.5rem;
}

.tendencies-row .chart-block {
    /* .chart-block's fixed height (see base rule) is sized for a chart;
       the tendencies table needs whatever its own rows actually add up
       to instead, not a chart-sized box around them. */
    height: auto;
}

.tendencies-inner {
    /* Below #tendencies-table's ~540px min-width, the percentage columns
       (see below) no longer all fit side by side - rather than let the
       flexible detail column get squeezed toward 0 and wrap every
       character onto its own line, this lets the table scroll
       horizontally within its own panel instead, staying readable. */
    overflow-x: auto;
}

#tendencies-table {
    /* table-layout:fixed + explicit column widths so the table always
       stays within its container's width, wrapping cell text instead of
       overflowing (the default auto layout sizes columns to fit
       nowrap-width content first, then only honors width:100% if there's
       already enough room - on a narrower panel it just overflows). */
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 1;
    background: grey;
    padding: 0.3rem 0.5rem 0.4rem;
    width: 100%;
    /* Percentage columns (below) need the table itself to never drop
       below the width where the tightest of them (situation, sized for
       "TOUCHDOWN") stops covering its column's longest un-wrappable word -
       past that point they scroll horizontally instead of wrapping
       mid-word. Fixed pixel columns would avoid that, but they don't scale
       up either: at a wide table they'd leave the percentage-based
       columns pointlessly cramped while the space piles up unused
       elsewhere (confirmed - "SHOTGUN"/"UNDER CENTER" stayed wrapped at
       1600px wide with fixed columns, while detail sat mostly empty).
       Column percentages resolve against the table's *content* width, not
       this box-width - i.e. this minus the table's own padding (16px) and
       border-spacing (6 gaps x 2px = 12px) - so the 540px here nets out to
       ~512px of actual column space, not 540px (confirmed by measuring
       rendered cell widths directly; computing percentages against the
       540px figure instead of the true ~512px net left every column a
       few px under its target and wrapping regardless). */
    min-width: 540px;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    image-rendering: pixelated;
}

/* Each percentage is sized (against the table's ~512px net content width
   at 540px min-width - see above) so that its column comfortably clears
   its longest un-wrappable single word: "TOUCHDOWN" for situation, "PASS"
   for type, "SHOTGUN" for formation, a 3-digit percent for pct. detail's
   values are always two words (e.g. "SERIES START", "MIDDLE DEEP"), so it
   can still fall back to wrapping at the space if it ends up tightest. */
#tendencies-table col.situation { width: 27%; }
#tendencies-table col.type { width: 14%; }
#tendencies-table col.detail { width: 23%; }
#tendencies-table col.formation { width: 22%; }
#tendencies-table col.pct { width: 14%; }

#tendencies-table th {
    font-size: 8px;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 0 0.5rem 0.3rem;
    font-weight: normal;
    opacity: 0.8;
}

#tendencies-table td {
    font-size: 13px;
    padding: 0.2rem 0.5rem;
    /* A single long word with no space to wrap on (e.g. "TOUCHDOWN") can't
       break onto a new line under normal wrapping rules, so once it's
       wider than its column it silently overflows into the next cell
       instead - this lets it break mid-word as a last resort instead. */
    overflow-wrap: break-word;
    line-height: 1.2;
}

#tendencies-table th:last-child,
#tendencies-table td:last-child {
    text-align: right;
}

.stat-label {
    font-size: 8px;
    letter-spacing: 0.5px;
    line-height: 1.15;
    margin-bottom: 3px;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

.stat-value-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.stat-value {
    font-size: 17px;
    line-height: 1;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

.stat-rank {
    font-size: 9px;
    line-height: 1;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

.rank-suffix {
    font-size: 7px;
}

.chart-title {
    display: flex;
    align-items: flex-end;
    height: 4px;
    overflow: visible;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.5px;
    margin-left: 8px;
    padding: 0 6px 0 8px;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

.chart-body {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0.3rem;
}

.chart-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.y-axis-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 9px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

.x-axis-title {
    font-size: 9px;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 0.25rem;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

.plot-row {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0.2rem;
}

.axis-gutter {
    width: 22px;
    flex: 0 0 auto;
}

.y-tick-col {
    position: relative;
}

.y-tick-col span {
    position: absolute;
    right: 2px;
    left: 0;
    text-align: right;
    font-size: 8px;
    line-height: 1;
    transform: translateY(-50%);
    white-space: nowrap;
}

.pixel-chart-wrap {
    position: relative;
    flex: 1;
    min-height: 50px;
}

.pixel-chart {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
}

.chart-value-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.chart-value-labels span {
    position: absolute;
    font-size: 8px;
    line-height: 1;
    transform: translate(-50%, -100%);
    white-space: nowrap;
}

.week-tick-row-wrap {
    display: flex;
    gap: 0.2rem;
    margin-top: 2px;
}

.week-tick-row {
    position: relative;
    flex: 1;
    font-size: 8px;
    line-height: 1;
    height: 8px;
}

.week-tick-row span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Responsive reflow. #stats-panel's 780px min-width was forcing it to stay
   that wide even after wrapping below the schedule on a narrower window,
   squeezing two charts and six stat-card columns into whatever space was
   left. Instead of holding that width, let each chart-row's stat-cards
   wrap below their chart (medium widths), then let schedule/stats-panel
   each go full width and the stat-cards wrap more tightly (narrow/phone
   widths), so nothing gets crushed - it just uses more vertical space. */
@media (max-width: 1300px) {
    #stats-panel {
        /* flex-basis needs to shrink too, not just min-width: a wrapping
           flex container decides whether an item fits its line using its
           hypothetical (pre-shrink) basis, not the smaller value it could
           shrink down to. Left at the base rule's 900px, #stats-panel would
           "not fit" next to the schedule and drop to its own line long
           before 420px width is actually needed. */
        flex: 1 1 420px;
        min-width: 420px;
        max-width: 100%;
    }

    .chart-row {
        /* Wrapping chart-block onto its own line (full row width) so the
           stat-cards drop below it instead of squeezing into a shrinking
           row alongside it. */
        flex-wrap: wrap;
    }

    .chart-block {
        /* .chart-row is row-direction, so flex-basis:100% forces
           chart-block onto its own full-width line, leaving the
           stat-cards to wrap below it on the next one. A smaller fixed
           height than the universal 280px (see base .chart-block rule)
           just fits the constrained mobile space better. */
        flex: 1 1 100%;
        height: 260px;
    }

    .stat-cards {
        flex: 1 1 190px;
    }

    .stat-card {
        /* .stat-card's min-height:0 (base rule) relies on .stat-cards
           always having an externally-stretched height to divide evenly
           (true in the side-by-side desktop layout). Once .stat-cards must
           size itself from its own content instead, min-height:0 also
           disables the flexbox "automatic minimum size" that would
           otherwise floor each flex-basis:0 card at its text's min-content
           height - so the stack collapses toward zero and the label/value
           text overflows the card. Give it back a real floor here. */
        min-height: 44px;
    }
}

@media (max-width: 760px) {
    .stats-row {
        gap: 1rem;
    }

    #schedule-panel,
    #stats-panel {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    .stat-cards {
        flex: 1 1 140px;
    }

    #team-name {
        font-size: 9px;
    }

    #team-city {
        font-size: 13px;
    }
}

/* #team-record sits flush against the header's right edge via
   margin-left:auto, which is computed from layout boxes - transform:scale()
   is paint-only and never reserves layout space, so that right edge moves
   steadily closer to the (fixed-width, text-driven) team name as the window
   narrows, regardless of the record's own font size. Long names like
   "COMMANDERS"/"BUCCANEERS" start colliding with it around 800-870px wide.
   A modest shrink alone can't fix this for every name (it would need to
   shrink to unreadably small before the collision math works out), so past
   this point the record steps down a bit AND wraps onto its own line below,
   the same way the schedule/stats-panel reflow avoids collisions by giving
   things their own row instead of endlessly shrinking them in place. */
@media (max-width: 900px) {
    .team-header {
        flex-wrap: wrap;
    }

    /* Forces the line break before #team-record without making #team-record
       itself full-width: a flex-basis:100% item with no content ends the
       current line, then #team-record (kept at its natural, content-sized
       width below) starts fresh on the next one. Giving #team-record itself
       flex-basis:100% instead would repeat the #team-name bug - transform
       scaling an already-full-width empty box instead of just its text. */
    .header-break {
        display: block;
        flex-basis: 100%;
        height: 0;
    }

    #team-record {
        /* Alone on its own line (after .header-break), margin:auto on both
           sides centers it within that line's full width instead of
           sitting at either edge. transform-origin needs to move from
           left/right to center too, so the scaled text grows evenly
           outward from the middle instead of drifting off-center. */
        margin: 0 auto 3rem;
        font-size: 11px;
        transform-origin: top center;
    }
}