/* Match report pages: shared heading, dark canvas, and one centered content rail. */
.tournament-page { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.tournament-page .tournament-count-badge {
    min-height: 38px;
    border: 1px solid color-mix(in srgb, var(--cafe-accent) 45%, var(--cafe-border));
    background: color-mix(in srgb, var(--cafe-primary) 18%, var(--cafe-surface));
    color: var(--cafe-accent-soft);
    font-weight: 750;
}

/* Keep priority guidance discoverable without turning it into a competing hero banner. */
.rules-panel {
    overflow: hidden;
    border: 1px solid var(--cafe-border-strong);
    border-radius: 14px;
    background: linear-gradient(115deg, color-mix(in srgb, var(--cafe-primary) 17%, var(--cafe-surface)), var(--cafe-surface) 58%, var(--cafe-canvas));
    box-shadow: var(--cafe-shadow-card);
}
.rules-panel .mud-expand-panel { background: transparent; color: var(--cafe-text); }
.rules-panel .mud-expand-panel-header {
    min-height: 54px;
    padding: .65rem 1rem;
    color: var(--cafe-text);
    background: transparent;
}
.rules-panel .mud-expand-panel-header:hover {
    color: var(--cafe-text);
    background: color-mix(in srgb, var(--cafe-accent) 7%, transparent);
}
.rules-panel .mud-expand-panel-icon .mud-icon-root { color: var(--cafe-accent); }
.rules-panel .mud-expand-panel-content {
    border-top: 1px solid var(--cafe-line);
    color: var(--cafe-text);
    background: color-mix(in srgb, var(--cafe-canvas) 72%, transparent);
}
.rules-panel .mud-expand-panel-content .mud-expand-panel-content-gutters { padding: .9rem 1rem 1rem; }
.priority-title {
    color: var(--cafe-accent-soft);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.priority-rules { width: 100%; max-width: 920px; gap: .65rem; }
.priority-rule {
    margin: 0;
    color: var(--cafe-text-muted);
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
    .tournament-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 1163px), 1fr)); gap: 1.25rem; align-items: start; }
    .tournament-loading { display: grid; min-height: clamp(130px, 22dvh, 220px); place-items: center; }
    .tournament-card { position: relative; display: flex; flex-direction: column; overflow: hidden; width: 100%; max-width: 1163px; min-width: 0; border: 1px solid var(--cafe-border-strong); border-radius: 20px; background: linear-gradient(145deg, var(--cafe-surface-raised), var(--cafe-surface) 68%, var(--cafe-canvas)); box-shadow: var(--cafe-shadow-card), 0 0 20px rgb(113 28 255 / 18%); }
    .tournament-card-art-backdrop { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; opacity: .58; filter: blur(26px) saturate(1.2); transform: scale(1.08); pointer-events: none; }
    .tournament-card-art-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    /* The picture swaps to a 9:16 crop on narrow viewports; both formats fill the card behind its detail panel. */
    .tournament-cover { position: relative; z-index: 1; flex: 0 0 auto; height: clamp(280px, 24vw, 320px); isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 72% 45%, color-mix(in srgb, var(--cafe-primary) 24%, var(--cafe-surface)), var(--cafe-surface) 48%, var(--cafe-canvas)); }
    .tournament-cover-art { position: absolute; inset: 0; display: block; }
    .tournament-cover-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .cover-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .7rem; color: var(--cafe-text); }
    .cover-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgb(5 7 11 / 24%), transparent 45%); }
    .registration-cutoff-countdown { position: absolute; z-index: 3; top: .8rem; left: .8rem; display: inline-flex; align-items: center; gap: .45rem; max-width: calc(100% - 1.6rem); padding: .5rem .8rem; border: 1px solid color-mix(in srgb, var(--cafe-warning) 72%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--cafe-surface-raised) 92%, transparent); color: var(--cafe-warning); box-shadow: 0 3px 14px rgb(0 0 0 / 38%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 16px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .registration-cutoff-countdown .mud-icon-root { flex: 0 0 auto; color: var(--cafe-warning); }
    .cover-artwork-state { position: absolute; z-index: 2; top: .8rem; right: .8rem; }
    /* The red edge carries cancelled state through the card; the inset sash matches the supplied artwork. */
    .tournament-card-cancelled { border-color: var(--cafe-danger); box-shadow: 0 0 20px rgb(255 96 108 / 30%), inset 0 0 0 1px rgb(255 96 108 / 18%); }
    .cancelled-ribbon { position: absolute; z-index: 3; top: 0; left: 0; display: flex; align-items: center; gap: .65rem; width: min(240px, 78%); height: 3.15rem; padding: 0 1rem; color: var(--cafe-text); background: linear-gradient(105deg, var(--cafe-danger), color-mix(in srgb, var(--cafe-danger) 72%, black)); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%); font-size: 1.575rem; font-weight: 850; line-height: 1; letter-spacing: .025em; text-shadow: 0 1px 4px rgb(70 0 0 / 45%); }
    .cancelled-ribbon .mud-icon-root { flex: 0 0 auto; font-size: 1.9rem; }
    /* One glass panel contains every lower-card element; a blurred copy of the cover gives the tint real artwork to refract. */
    /* The glass board overlaps the art slightly, then grows in normal flow so cards never trap a second scrollbar. */
    .tournament-card-body { position: relative; z-index: 3; display: flex; flex-direction: column; gap: .9rem; flex: 1 1 auto; min-width: 0; margin: -5rem 0 0; overflow: visible; padding: 1rem; border: 1px solid color-mix(in srgb, var(--cafe-accent) 32%, var(--cafe-border)); border-radius: 16px 16px 18px 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--cafe-surface-raised) 78%, transparent), color-mix(in srgb, var(--cafe-surface) 75%, transparent)); -webkit-backdrop-filter: blur(30px) saturate(1.35); backdrop-filter: blur(30px) saturate(1.35); box-shadow: 0 12px 35px rgba(0,0,0,.25), inset 0 1px 0 rgba(230, 241, 255, .16); }
    .tournament-card-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(235px, .85fr); gap: 1.25rem; }
    .event-details { min-width: 0; }
    .event-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 .85rem; }
    .event-title-block { min-width: 0; flex: 1 1 auto; }
    .event-title { display: block; max-width: 100%; overflow: hidden; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 900; line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; }
    .event-format { margin-top: .2rem; color: var(--cafe-text-muted); }
    .event-format span { color: var(--cafe-accent); padding: 0 .25rem; }
    .lifecycle-badge { flex: 0 0 auto; min-height: 28px; height: auto; padding: 4px 9px; font-size: 14px; line-height: 1.2; }
    .event-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
    .event-facts + .card-alert { margin-top: .65rem; }
    .fact-card { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; padding: .8rem; border: 1px solid rgb(174 131 255 / 17%); border-radius: 9px; background: rgb(42 31 61 / 42%); container-type: inline-size; }
    .fact-card > .mud-icon-root { flex: 0 0 auto; margin-top: .1rem; }
    .fact-card div { display: grid; min-width: 0; gap: .2rem; }
    .fact-card span { color: var(--cafe-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
    .fact-card strong { font-size: .9rem; font-weight: 500; overflow-wrap: anywhere; }
    .fact-card .date-line, .fact-card .time-line { white-space: nowrap; overflow-wrap: normal; }
    .fact-card .date-compact { display: none; white-space: nowrap; }
    .fact-card.cutoff strong { color: var(--cafe-danger); }
    /* Compact only the date when one fact card is narrow; the full date remains available on hover and to assistive labels. */
    @container (max-width: 170px) {
        .fact-card .date-line { display: none; }
        .fact-card .date-compact { display: block; }
    }
    .cancellation-reason { display: grid; gap: .25rem; margin-top: .75rem; padding: .65rem .8rem; border-left: 3px solid var(--cafe-danger); border-radius: 6px; background: rgb(255 96 108 / 10%); color: var(--cafe-text-muted); }
    .cancellation-reason strong { color: var(--cafe-danger); font-size: .82rem; }
    .cancellation-reason span { overflow-wrap: anywhere; }
    .event-prizes { min-width: 0; border-left: 1px solid var(--cafe-line); padding-left: 1.25rem; }
    .entrance-fee { display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem; }
    .entrance-fee div { display: grid; gap: .1rem; }
    .entrance-fee span { color: var(--cafe-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .045em; }
    .entrance-fee strong { color: var(--cafe-price); font-size: 1.05rem; }
    .event-sidebar-meta { display: grid; justify-items: start; gap: .65rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--cafe-line); }
    .event-skill { display: flex; align-items: center; gap: .55rem; color: var(--cafe-accent); }
    .event-description { max-width: 100%; margin: 0; overflow: hidden; color: var(--cafe-text-muted); overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; }
    .prize-heading { display: flex; align-items: center; gap: .65rem; margin-bottom: .55rem; text-transform: uppercase; }
    .prize-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .5rem; padding: .22rem 0; }
    .prize-row b { color: var(--cafe-warning); }
    .prize-row span { overflow-wrap: anywhere; }
    .card-alert { margin: 0; }
    .view-bracket-button { min-width: 230px; min-height: 3.25rem; font-weight: 800; text-transform: uppercase; box-shadow: 0 8px 25px rgb(113 28 255 / 34%); }
    .tournament-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; padding: .9rem 0 0; border-top: 1px solid var(--cafe-line); }
    .enlist-button { min-height: 3.25rem; min-width: 230px; font-weight: 800; box-shadow: 0 8px 25px rgb(113 28 255 / 34%); }
    .match-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--mud-palette-divider); padding: .4rem 0; gap: .5rem; }
    @media (max-width: 850px) { .tournament-page { padding: 124px 18px 24px; } .tournament-card-body { margin-top: -2rem; } .tournament-card-main { grid-template-columns: minmax(0, 1fr); } .event-prizes { border-left: 0; border-top: 1px solid var(--cafe-line); padding: .8rem 0 0; } }
    @media (max-width: 826px) { .tournament-list { grid-template-columns: minmax(0, 1fr); } .tournament-card { width: min(100%, 661px); max-width: 661px; justify-self: center; } }
    @media (max-width: 600px) {
        /* Mobile cards flow below their artwork; the cover keeps breathing room while details grow naturally. */
        .tournament-card { display: flex; height: auto; min-height: 0; flex-direction: column; }
        .tournament-cover { height: auto; min-height: max(24rem, 42dvh); border-radius: 14px 14px 0 0; }
        .tournament-card-body { margin-top: -1rem; border-radius: 16px; }
        .tournament-page .cafe-report-heading .mud-chip { align-self: flex-start; }
        .event-heading { align-items: flex-start; flex-wrap: wrap; }
        .event-title { font-size: clamp(1.8rem, 9vw, 2.4rem); }
        .event-facts { grid-template-columns: minmax(0, 1fr); }
        .tournament-card-body { padding: .8rem; }
        /* Full-width actions keep labels readable and touch targets usable on narrow screens. */
        .tournament-actions { align-items: stretch; flex-direction: column; gap: .6rem; padding: .8rem 0 0; }
        .tournament-actions > .mud-button-root { width: 100%; min-width: 0; min-height: 44px; padding-inline: .8rem; font-size: 16px; white-space: normal; }
        .view-bracket-button, .enlist-button { min-width: 0; min-height: 44px; }
        .contestant-row { align-items: flex-start !important; flex-direction: column; }
        .match-row { flex-wrap: wrap; }
    }