@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;800&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
    --bg: #f6f3eb;
    --bg-strong: #ece6d8;
    --surface: #fffdf8;
    --surface-2: #f9f5eb;
    --ink: #101418;
    --ink-soft: #55606e;
    --brand-dark: #11181f;
    --brand-red: #cb342a;
    --brand-red-dark: #a82920;
    --brand-sausage: #d7853a;
    --brand-line: #d6cbb7;
    --success-bg: #ecfdf3;
    --success-ink: #166534;
    --warn-bg: #fff6e8;
    --warn-ink: #92400e;
}

/* ============================================================
   Base reset & typography
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    background:
        radial-gradient(circle at 18% 2%, rgba(215, 133, 58, 0.13), transparent 38%),
        radial-gradient(circle at 90% 12%, rgba(203, 52, 42, 0.12), transparent 34%),
        var(--bg);
    color: var(--ink);
}

a {
    color: var(--brand-red);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ============================================================
   Layout
   ============================================================ */
.site-header {
    background: linear-gradient(112deg, var(--brand-dark) 0%, #161f27 72%, #202a35 100%);
    color: #fff;
    border-bottom: 4px solid var(--brand-red);
}

.site-header__inner {
    width: min(1220px, 100% - 2rem);
    margin: 0 auto;
    padding: 0.85rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: #fff;
}

.site-brand:hover {
    text-decoration: none;
}

.site-brand__logo {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.07);
}

.site-brand__text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}

.site-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.site-subtitle {
    margin-top: 0.15rem;
    color: #f1dfc8;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.site-nav a {
    color: #f5eee1;
    border: 1px solid rgba(245, 238, 225, 0.28);
    border-radius: 999px;
    padding: 0.35rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: all 0.16s ease;
}

.site-nav a:hover {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
    text-decoration: none;
}

.site-nav a.is-active,
.site-nav a[aria-current='page'] {
    background: linear-gradient(180deg, #df4035 0%, #bd2f25 100%);
    border-color: rgba(255, 255, 255, 0.58);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

.site-account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.site-account__user {
    color: #f1dfc8;
    font-size: 0.88rem;
    font-weight: 700;
}

.site-account__form {
    margin: 0;
}

.site-account__link,
.site-account__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(245, 238, 225, 0.28);
    padding: 0.35rem 0.95rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #f5eee1;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.site-account__link:hover,
.site-account__button:hover {
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.site-main {
    max-width: 1220px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.site-footer {
    text-align: center;
    padding: 2rem 1.5rem;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.site-footer__attribution {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    opacity: 0.75;
}

.site-footer__attribution a {
    color: inherit;
    text-decoration: underline;
}

/* ============================================================
   Insight guide (metric explainer below insights table)
   ============================================================ */
.insight-guide {
    margin-top: 2rem;
    border-top: 1px solid var(--brand-line);
    padding-top: 1.5rem;
}

.insight-guide__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 1rem;
}

.insight-guide__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.insight-card {
    background: var(--surface-2);
    border: 1px solid var(--brand-line);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.insight-card__name {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.insight-card__tagline {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-bottom: 0.6rem;
}

.insight-card__body {
    font-size: 0.85rem;
    line-height: 1.55;
}

.insight-card__example {
    margin-top: 0.5rem;
    padding: 0.4rem 0.65rem;
    background: var(--surface-1, #fff);
    border-left: 3px solid var(--brand-accent, #c0aa4e);
    border-radius: 0 4px 4px 0;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

/* ============================================================
   Home page
   ============================================================ */
.home-hero {
    background: linear-gradient(165deg, #fffefb 0%, var(--surface-2) 100%);
    border-radius: 16px;
    border: 1px solid var(--brand-line);
    padding: 2rem;
    box-shadow: 0 12px 30px rgba(16, 20, 24, 0.06);
}

.home-hero h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2.1rem;
    letter-spacing: 0.01em;
    margin-bottom: 0.5rem;
}

.home-hero p + p {
    margin-top: 0.75rem;
}

.home-actions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.home-note {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

/* ============================================================
   Generic card
   ============================================================ */
.card {
    background: linear-gradient(165deg, #fffefb 0%, var(--surface-2) 100%);
    border-radius: 14px;
    border: 1px solid var(--brand-line);
    padding: 2rem;
    box-shadow: 0 12px 30px rgba(16, 20, 24, 0.06);
}

.card h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.95rem;
    margin-bottom: 0.75rem;
}

.card p {
    margin-bottom: 1rem;
}

.card--spaced {
    margin-top: 1.5rem;
}

.auth-card {
    max-width: 560px;
}

.auth-alert {
    margin-bottom: 1rem;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    font-weight: 600;
}

.auth-alert--error {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
}

.auth-form {
    display: grid;
    gap: 1rem;
}

.auth-field {
    display: grid;
    gap: 0.35rem;
}

.auth-field__label {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--brand-dark);
}

.auth-field__input {
    width: 100%;
    border: 1px solid var(--brand-line);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    font: inherit;
    background: #fff;
    color: var(--ink);
}

.auth-field__input:focus {
    outline: 2px solid rgba(203, 52, 42, 0.18);
    border-color: var(--brand-red);
}

.auth-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.draft-inline-form {
    display: flex;
    align-items: end;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.draft-wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.draft-wizard-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--brand-line);
    background: #fff;
    color: var(--ink-soft);
    padding: 0.35rem 0.8rem;
    font-size: 0.86rem;
    font-weight: 700;
}

.draft-wizard-step.is-active {
    color: #fff;
    background: linear-gradient(180deg, #df4035 0%, #bd2f25 100%);
    border-color: #b72f25;
}

.draft-wizard-step:hover {
    text-decoration: none;
    border-color: var(--brand-red);
}

.draft-setup-grid {
    display: grid;
    gap: 1rem;
}

.draft-setup-guard {
    margin-top: 0.7rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.draft-setup-guard.is-error {
    color: #9f1239;
}

.draft-setup-guard.is-warn {
    color: #92400e;
}

.draft-setup-guard.is-ok {
    color: #166534;
}

.draft-assignment-select--duplicate {
    border-color: #dc2626;
    background: #fff1f2;
}

.draft-order-text {
    min-height: 180px;
    resize: vertical;
}

.draft-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.draft-form-grid--compact {
    grid-template-columns: repeat(2, minmax(150px, 220px));
}

.draft-board-wrap {
    overflow-x: auto;
}

.draft-board-table th,
.draft-board-table td {
    white-space: nowrap;
}

.draft-board-table--matrix {
    width: 100%;
    table-layout: fixed;
    font-size: 0.86rem;
}

.draft-board-table--matrix th,
.draft-board-table--matrix td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    vertical-align: middle;
    padding: 0.45rem 0.34rem;
}

.draft-board-table--matrix th:first-child,
.draft-board-table--matrix td:first-child {
    width: 5.5%;
    text-align: center;
}

.draft-board-table--matrix th:nth-child(2),
.draft-board-table--matrix td:nth-child(2) {
    width: 16%;
}

.draft-board-table--matrix .insight-sub {
    display: inline;
    font-size: 0.72rem;
}

.draft-board-table--matrix .draft-cell-owner {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.draft-board-table--matrix .draft-cell--changed {
    cursor: help;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.draft-board-table--matrix .draft-cell--changed .draft-cell-owner {
    font-weight: 600;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

.draft-board-table--matrix .draft-pick-code {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: #4a5969;
}

.draft-picked-player {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.25;
    font-style: normal;
    color: #233241;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-cell-edit-form {
    margin-top: 0.2rem;
    display: grid;
    gap: 0.2rem;
}

.draft-cell-edit-form__input {
    width: 100%;
    min-width: 0;
    border: 1px solid #cdbda5;
    border-radius: 6px;
    padding: 0.2rem 0.32rem;
    font: inherit;
    font-size: 0.68rem;
    line-height: 1.2;
    background: #fff;
}

.draft-cell-edit-form__button {
    justify-self: end;
    border: 1px solid #cdbda5;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: #31414f;
    background: #fff;
    cursor: pointer;
}

.draft-cell-edit-form__button:hover {
    background: #f7f2e6;
}

@media (max-width: 1100px) {
    .draft-board-table--matrix {
        font-size: 0.82rem;
    }

    .draft-board-table--matrix th,
    .draft-board-table--matrix td {
        padding: 0.42rem 0.32rem;
    }
}

.draft-cell--default {
    color: var(--ink-soft);
}

.draft-cell--changed {
    font-weight: 500;
    background: #fff4dc;
}

.draft-alert {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.draft-alert p {
    margin-bottom: 0;
}

.draft-alert--ok {
    background: var(--success-bg);
    border-color: #95d5ac;
    color: var(--success-ink);
}

.draft-alert--error {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #9f1239;
}

/* ============================================================
   Button
   ============================================================ */
.btn {
    display: inline-block;
    background: linear-gradient(180deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    color: #fff;
    padding: 0.56rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    font: inherit;
    border: 1px solid rgba(16, 20, 24, 0.3);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(203, 52, 42, 0.33);
    cursor: pointer;
}

.btn--secondary {
    background: transparent;
    color: var(--brand-ink);
    border-color: var(--brand-line);
    box-shadow: none;
}

.btn:hover {
    background: linear-gradient(180deg, #df4035 0%, #bd2f25 100%);
    transform: translateY(-1px);
    text-decoration: none;
}

.btn--secondary:hover {
    background: rgba(255, 255, 255, 0.55);
}

.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ============================================================
   Page header
   ============================================================ */
.page-header {
    margin-bottom: 2rem;
}

.page-header__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page-header h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-dark);
}

.league-status-badge {
    display: inline-block;
    padding: 0.22rem 0.64rem;
    border-radius: 999px;
    border: 1px solid #a8b2bf;
    background: #f6f8fb;
    color: #3c4654;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.league-status-badge--predraft {
    border-color: #f0b36a;
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.league-status-badge--postdraft,
.league-status-badge--inseason,
.league-status-badge--active {
    border-color: #95d5ac;
    background: var(--success-bg);
    color: var(--success-ink);
}

.roster-notice {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid #f0b36a;
    background: var(--warn-bg);
    color: var(--warn-ink);
    border-radius: 0.5rem;
    font-size: 0.92rem;
}

/* ============================================================
   Roster grid – 12-team cards
   ============================================================ */
.roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.roster-card {
    background: var(--surface);
    border: 1px solid var(--brand-line);
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(16, 20, 24, 0.07);
}

.roster-card__header {
    background: linear-gradient(135deg, var(--brand-dark), #1b252f);
    color: #fff;
    padding: 0.82rem 1rem;
    border-bottom: 2px solid var(--brand-red);
}

.roster-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.roster-card__team-logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.2);
    flex: 0 0 auto;
}

.roster-card__team {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

.roster-card__manager {
    display: block;
    font-size: 0.8rem;
    color: #f2e4cc;
    margin-top: 0.15rem;
}

.roster-card__empty {
    padding: 1rem;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

/* ============================================================
   Position groups inside a roster card
   ============================================================ */
.position-group {
    border-top: 1px solid #e8dfcf;
}

.position-group__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.3rem 1rem;
    color: #fff;
    background: #374151;
}

/* Position colour coding */
.position-group__label--qb  { background: #9e231b; }
.position-group__label--rb  { background: #18603a; }
.position-group__label--wr  { background: #224f94; }
.position-group__label--te  { background: #a25c1f; }
.position-group__label--k   { background: #6f2e8f; }
.position-group__label--def { background: #16635a; }
.position-group__label--bn  { background: #6c5f4c; }
.position-group__label--ir  { background: #3a3f45; }

/* ============================================================
   Player list
   ============================================================ */
.player-list {
    list-style: none;
    padding: 0.25rem 0;
}

.player-list__item {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.25rem 1rem;
    font-size: 0.85rem;
    line-height: 1.4;
    border-bottom: 1px solid #efe6d8;
}

.player-list__item:last-child {
    border-bottom: none;
}

.player-list__item--injured .player-list__name {
    color: #7a5c43;
}

.player-list__item--placeholder {
    min-height: 1.72rem;
    background: rgba(214, 203, 183, 0.22);
}

.player-list__item--placeholder .player-list__name,
.player-list__item--placeholder .player-list__status,
.player-list__item--placeholder .player-list__nfl-team {
    visibility: hidden;
}

.player-list__name {
    flex: 1;
    color: #1f2937;
}

.player-list__nfl-team {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.player-list__status {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--brand-red);
    white-space: nowrap;
}

/* ============================================================
   Historical table
   ============================================================ */
.history-subtitle {
    margin: -0.8rem 0 1rem;
    color: var(--ink-soft);
}

.history-tabs {
    display: inline-flex;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
    padding: 0.2rem;
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    background: var(--surface-2);
}

.history-tab {
    border: 1px solid transparent;
    background: transparent;
    color: #2a3a48;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
}

.history-tab:hover {
    background: #e8e0cf;
}

.history-tab.is-active {
    background: linear-gradient(135deg, #295f50, #234e42);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.history-pane {
    margin-top: 0.2rem;
}

.history-state {
    margin: -0.2rem 0 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
}

.history-state--warning {
    border: 1px solid #f0b36a;
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.history-state--info {
    border: 1px solid #8eb9aa;
    background: #edf7f3;
    color: #1f4f42;
}

.history-state ul {
    margin: 0.35rem 0 0 1rem;
}

.history-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--brand-line);
    border-radius: 0.85rem;
    background: var(--surface);
    box-shadow: 0 12px 26px rgba(16, 20, 24, 0.06);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
    font-variant-numeric: tabular-nums;
}

.history-table thead th {
    background: linear-gradient(135deg, #295f50, #234e42);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    text-align: center;
    padding: 0.6rem 0.55rem;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.history-table thead th:first-child {
    text-align: left;
    min-width: 220px;
}

.history-table thead th.is-sorted-asc,
.history-table thead th.is-sorted-desc {
    background: linear-gradient(135deg, #2f6f5d, #2a604f);
}

.history-table thead th.is-sorted-asc::after {
    content: ' \2191';
}

.history-table thead th.is-sorted-desc::after {
    content: ' \2193';
}

.history-table tbody td {
    padding: 0.45rem 0.55rem;
    border-top: 1px solid #eee2d2;
    text-align: center;
    font-size: 0.9rem;
}

.history-table tbody tr:nth-child(even) {
    background: rgba(236, 230, 216, 0.35);
}

.history-team {
    text-align: left;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.history-team__logo {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #cdbda5;
    flex: 0 0 auto;
}

.history-place {
    white-space: nowrap;
}

.history-place--points {
    font-variant-numeric: tabular-nums;
}

.history-points__value {
    font-weight: 600;
}

.insight-positive {
    color: #166534;
    font-weight: 700;
}

.insight-negative {
    color: #b42318;
    font-weight: 700;
}

.insight-sub {
    color: #64748b;
    font-size: 0.78rem;
    margin-left: 0.25rem;
}

.history-place__content {
    display: inline-grid;
    grid-template-columns: 2ch 1.2em;
    align-items: center;
    column-gap: 0.2rem;
}

.history-place__value {
    font-weight: 700;
    text-align: right;
}

.history-place__medal {
    font-size: 0.78rem;
    text-align: center;
}

.history-place__medal.is-empty {
    visibility: hidden;
}

.history-place__wld {
    display: block;
    font-size: 0.72rem;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
    margin-top: 0.1rem;
}

.history-place--wld {
    white-space: nowrap;
}

.history-wld {
    font-weight: 700;
    font-size: 0.9rem;
}

.history-place__empty {
    color: #94a3b8;
}

.history-place__loading {
    color: #8a6f43;
}

.history-place__error {
    color: #b42318;
    font-weight: 700;
}

.history-footnote {
    margin-top: 0.6rem;
    font-size: 0.84rem;
    color: var(--ink-soft);
}

@media (max-width: 760px) {
    .site-header__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.9rem 0;
    }

    .site-brand__logo {
        width: 56px;
        height: 56px;
    }

    .site-title {
        font-size: 1.66rem;
    }

    .site-nav {
        width: 100%;
    }
}

/* ============================================================
   Playoff History – Bracket Tree Layout
   ============================================================ */
.playoff-history {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.playoff-season {
    padding: 1.5rem;
    border: 2px solid var(--brand-line);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(41, 95, 80, 0.08), rgba(35, 78, 66, 0.06));
    scroll-margin-top: 100px;
}

.playoff-season:nth-child(1) {
    border-color: #8b4513;
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.08), rgba(101, 50, 15, 0.06));
}

.playoff-season:nth-child(2) {
    border-color: #c0c0c0;
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.08), rgba(169, 169, 169, 0.06));
}

.playoff-season:nth-child(3) {
    border-color: #daa520;
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.08), rgba(184, 134, 11, 0.06));
}

.playoff-season__header {
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 0.8rem;
}

.playoff-season__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2a3a48;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.playoff-season__champion {
    font-size: 1rem;
    color: #d4a574;
    font-weight: 600;
    background: rgba(212, 165, 116, 0.12);
    padding: 0.25rem 0.6rem;
    border-radius: 0.4rem;
}

.playoff-bracket {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.playoff-round {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.playoff-round__label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #5f6c7b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.6rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 0.4rem;
    text-align: center;
}

.playoff-round__matchups {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.playoff-matchup {
    border: 1px solid var(--brand-line);
    border-radius: 0.6rem;
    background: var(--surface-2);
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.playoff-matchup:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 12px rgba(41, 95, 80, 0.12);
    background: var(--surface);
}

.playoff-matchup__teams {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.playoff-team {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.6rem;
    background: #fafbfc;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.playoff-team.is-winner {
    background: linear-gradient(135deg, #d4f1d4, #e8fce8);
    font-weight: 600;
    color: #1f4f42;
}

.playoff-team__name {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playoff-team__score {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin-left: 0.4rem;
    min-width: 2.5rem;
    text-align: right;
}

.playoff-team.is-winner .playoff-team__score {
    color: #1f4f42;
}

.playoff-matchup__divider {
    text-align: center;
    padding: 0.2rem 0;
    font-size: 0.75rem;
    color: #a0aab5;
}

.playoff-matchup__vs {
    display: inline-block;
    font-weight: 600;
}

.playoff-season__result {
    background: rgba(212, 165, 116, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    border-left: 3px solid #d4a574;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.playoff-result-label {
    font-weight: 600;
    color: #5f6c7b;
}

.playoff-result-value {
    font-weight: 700;
    color: #2c3e50;
}

.playoff-state {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
}

.playoff-state--warning {
    border: 1px solid #f0b36a;
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.playoff-state--info {
    border: 1px solid #8eb9aa;
    background: #edf7f3;
    color: #1f4f42;
}

@media (max-width: 1024px) {
    .playoff-bracket {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1rem;
    }

    .playoff-season {
        padding: 1.2rem;
    }
}

@media (max-width: 640px) {
    .playoff-history {
        gap: 1.5rem;
    }

    .playoff-season {
        padding: 1rem;
    }

    .playoff-season__title {
        font-size: 1.2rem;
    }

    .playoff-bracket {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .playoff-matchup__teams {
        gap: 0.4rem;
    }

    .playoff-team {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }

    .playoff-team__score {
        font-size: 0.75rem;
    }
}