/* ============================================================================
   CS2 TOURNAMENT PLATFORM — "Blackout / Red Alert" competitive theme
   Built on Pico CSS v2. We force the dark color scheme and override Pico's
   --pico-* tokens so the whole framework (buttons, forms, tables, cards)
   inherits a black background + red brand without us restyling each component.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Fonts — a bold condensed display face for headings/CTAs and a monospace
   for "tactical readout" accents (scores, codes, seeds). Loaded from Google.
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------------------------------------------------------------------------
   2. Brand tokens + Pico overrides.
   We override Pico variables on both :root and [data-theme=dark] so the theme
   holds whether or not the html tag carries data-theme="dark".
   --------------------------------------------------------------------------- */
:root,
:root:not([data-theme=dark]),
[data-theme=dark] {
    color-scheme: dark;

    /* --- Brand palette --- */
    --brand-red:        #ff2a2a;
    --brand-red-bright: #ff4d4d;
    --brand-red-deep:   #b30000;
    --brand-red-glow:   rgba(255, 42, 42, 0.55);
    --brand-ink:        #07080a;   /* near-black page bg */
    --brand-surface:    #101216;   /* card surface */
    --brand-surface-2:  #161a20;   /* raised surface */
    --brand-line:       #23272e;   /* hairline borders */
    --brand-text:       #e7e9ec;
    --brand-text-dim:   #9aa0a8;

    /* --- Status colors --- */
    --color-success: #2ecc71;
    --color-warning: #ff9f1c;
    --color-error:   var(--brand-red);
    --color-info:    #3da9fc;

    /* --- Pico core overrides (page chrome) --- */
    --pico-background-color: var(--brand-ink);
    --pico-color:            var(--brand-text);
    --pico-h1-color:         #ffffff;
    --pico-h2-color:         #f3f4f6;
    --pico-h3-color:         #f3f4f6;
    --pico-h4-color:         var(--brand-text);
    --pico-muted-color:      var(--brand-text-dim);
    --pico-muted-border-color: var(--brand-line);

    /* --- Primary = red --- */
    --pico-primary:                        var(--brand-red);
    --pico-primary-hover:                  var(--brand-red-bright);
    --pico-primary-focus:                  var(--brand-red-glow);
    --pico-primary-background:             var(--brand-red);
    --pico-primary-hover-background:        var(--brand-red-bright);
    --pico-primary-underline:              var(--brand-red-glow);
    --pico-primary-border:                 var(--brand-red);
    --pico-primary-inverse:                #ffffff;

    /* --- Surfaces --- */
    --pico-card-background-color:        var(--brand-surface);
    --pico-card-border-color:           var(--brand-line);
    --pico-card-sectioning-background-color: var(--brand-surface-2);
    --pico-code-background-color:       #0c0e11;
    --pico-code-color:                  var(--brand-red-bright);

    /* --- Forms --- */
    --pico-form-element-background-color: #0d0f12;
    --pico-form-element-border-color:     var(--brand-line);
    --pico-form-element-active-border-color: var(--brand-red);
    --pico-form-element-focus-color:      var(--brand-red);

    /* --- Tables --- */
    --pico-table-border-color:            var(--brand-line);
    --pico-table-row-stripped-background-color: rgba(255,255,255,0.02);

    /* --- Typography --- */
    --pico-font-family: 'Chakra Petch', system-ui, -apple-system, sans-serif;
    --pico-font-family-sans-serif: 'Chakra Petch', system-ui, sans-serif;
    --pico-border-radius: 6px;
    --pico-spacing: 1rem;
}

/* ---------------------------------------------------------------------------
   3. Page foundations + atmosphere.
   A subtle red radial glow up top + faint diagonal grid gives the page a
   "command center" feel without hurting readability.
   --------------------------------------------------------------------------- */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--brand-ink);
    background-image:
        radial-gradient(1200px 480px at 50% -10%, rgba(255, 42, 42, 0.10), transparent 70%),
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    background-attachment: fixed;
}

h1, h2, h3, h4, h5 {
    font-family: 'Rajdhani', 'Chakra Petch', sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    background: linear-gradient(180deg, #ffffff 0%, #c9ced6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    position: relative;
}

/* red underline accent under page titles */
main > h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 0.6rem;
    background: linear-gradient(90deg, var(--brand-red), transparent);
    border-radius: 2px;
}

main {
    flex: 1;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}

/* ---------------------------------------------------------------------------
   4. Navbar — sticky, glassy, red bottom edge.
   The nav uses Pico's .container for horizontal padding, so we DON'T add our
   own padding-inline (that double-pads and causes a tiny horizontal overflow).
   --------------------------------------------------------------------------- */
nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(8,9,11,0.92), rgba(8,9,11,0.72));
    border-bottom: 1px solid var(--brand-line);
    box-shadow: 0 1px 0 0 rgba(255,42,42,0.25), 0 8px 24px -16px rgba(0,0,0,0.9);
}

nav strong {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}
/* little red "tag" before the brand name */
nav ul:first-child strong::before {
    content: "▰ ";
    color: var(--brand-red);
}

nav ul li a {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
nav ul li a:not([role="button"]):hover {
    color: var(--brand-red-bright);
}

nav ul li a[role="button"] {
    margin-left: 0.5rem;
}

/* ---------------------------------------------------------------------------
   5. Buttons — red, glowing, with a sweep-on-hover.
   --------------------------------------------------------------------------- */
[role="button"], button, input[type="submit"] {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Primary (solid red) gets a glow */
[role="button"]:not(.secondary):not(.outline):not(.contrast),
button[type="submit"]:not(.secondary):not(.outline) {
    background: linear-gradient(180deg, var(--brand-red-bright), var(--brand-red));
    border-color: var(--brand-red);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255,42,42,0.4), 0 6px 18px -6px var(--brand-red-glow);
}
[role="button"]:not(.secondary):not(.outline):not(.contrast):hover,
button[type="submit"]:not(.secondary):not(.outline):hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--brand-red-bright), 0 10px 28px -6px var(--brand-red-glow);
}
[role="button"]:not(.secondary):not(.outline):not(.contrast):active,
button[type="submit"]:not(.secondary):not(.outline):active {
    transform: translateY(0);
}

/* hover sweep highlight */
[role="button"]::after, button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.5s ease;
}
[role="button"]:hover::after, button:hover::after {
    transform: translateX(120%);
}

.secondary {
    --pico-background-color: transparent;
    border-color: var(--brand-line) !important;
    color: var(--brand-text) !important;
    background: rgba(255,255,255,0.03) !important;
}
.secondary:hover {
    border-color: var(--brand-red) !important;
    color: #fff !important;
}

footer {
    margin-top: auto;
    padding: 2.5rem 0 1.5rem;
    text-align: center;
    color: var(--brand-text-dim);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    border-top: 1px solid var(--brand-line);
}

/* ---------------------------------------------------------------------------
   6. Hero banner (rendered on the home page).
   --------------------------------------------------------------------------- */
.hero {
    position: relative;
    margin: 0 0 2.5rem;
    padding: 3rem 2rem;
    border: 1px solid var(--brand-line);
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(800px 300px at 80% -40%, rgba(255,42,42,0.22), transparent 70%),
        linear-gradient(135deg, #15171c 0%, #0a0b0e 60%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 24px 60px -30px #000;
}
/* angled red accent stripe */
.hero::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40%;
    background:
        repeating-linear-gradient(115deg, rgba(255,42,42,0.06) 0 2px, transparent 2px 14px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
            mask-image: linear-gradient(90deg, transparent, #000);
    pointer-events: none;
}
.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--brand-red-bright);
    margin-bottom: 0.75rem;
}
.hero .eyebrow::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand-red);
    box-shadow: 0 0 10px 2px var(--brand-red-glow);
    animation: pulse 1.6s infinite;
}
.hero h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(2.4rem, 6vw, 4.2rem);
}
.hero h1::after { display: none; }
.hero p {
    max-width: 46ch;
    color: var(--brand-text-dim);
    font-size: 1.05rem;
    margin: 0;
    position: relative;
}

/* ---------------------------------------------------------------------------
   7. Tournament cards — angular, hover-lift, red glow edge, live status.
   --------------------------------------------------------------------------- */
.tournament-card {
    position: relative;
    border: 1px solid var(--brand-line);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 0;
    background:
        linear-gradient(180deg, var(--brand-surface-2), var(--brand-surface));
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.25s ease;
    /* clipped top-right corner = "tactical" card */
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
/* top accent line that lights up red on hover */
.tournament-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--brand-line);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.tournament-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,42,42,0.5);
    box-shadow: 0 18px 40px -22px var(--brand-red-glow), 0 0 0 1px rgba(255,42,42,0.15);
}
.tournament-card:hover::before {
    background: linear-gradient(90deg, var(--brand-red), var(--brand-red-deep));
    box-shadow: 0 0 12px 1px var(--brand-red-glow);
}
.tournament-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    border: none;
    padding: 0;
}
.tournament-card header strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
}
.tournament-card p {
    margin: 0.35rem 0;
    color: var(--brand-text-dim);
    font-size: 0.9rem;
}
.tournament-card footer {
    border: none;
    padding: 0;
    margin-top: 1rem;
    background: none;
}
.tournament-card footer a[role="button"] {
    width: 100%;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   8. Status badges — sharp, uppercase, with a leading dot for live states.
   --------------------------------------------------------------------------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-open {
    background: rgba(46,204,113,0.12);
    border-color: rgba(46,204,113,0.4);
    color: #54e08c;
}
.status-started,
.status-pending {
    background: rgba(255,159,28,0.12);
    border-color: rgba(255,159,28,0.4);
    color: #ffb454;
}
.status-finished,
.status-completed {
    background: rgba(255,255,255,0.05);
    border-color: var(--brand-line);
    color: var(--brand-text-dim);
}
.status-live {
    background: rgba(255,42,42,0.15);
    border-color: var(--brand-red);
    color: var(--brand-red-bright);
    box-shadow: 0 0 14px -2px var(--brand-red-glow);
    animation: pulse 1.8s infinite;
}
.status-live::before,
.status-open::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px 1px currentColor;
}
.status-open::before { animation: none; }
.status-live::before { animation: blink 1s steps(2, start) infinite; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
@keyframes blink {
    50% { opacity: 0.2; }
}

/* generic badge (table cells) */
td .status-badge {
    background: rgba(255,255,255,0.05);
    border-color: var(--brand-line);
    color: var(--brand-text-dim);
}

/* ---------------------------------------------------------------------------
   9. Articles / panels (tournament detail, match cards).
   --------------------------------------------------------------------------- */
article {
    border: 1px solid var(--brand-line);
    background: linear-gradient(180deg, var(--brand-surface-2), var(--brand-surface));
    border-radius: 10px;
}
article > header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--brand-line);
}
article section h3,
article section h4,
section > h3 {
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.06em;
    border-left: 3px solid var(--brand-red);
    padding-left: 0.6rem;
    margin-bottom: 0.75rem;
}

/* Match cards */
.match-card {
    border: 1px solid var(--brand-line);
    border-left: 4px solid var(--brand-red);
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg, var(--brand-surface-2), var(--brand-surface));
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.match-card:hover {
    box-shadow: 0 14px 34px -22px var(--brand-red-glow);
}
.match-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    border: none;
    padding: 0;
}
.match-card header strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #fff;
}
.match-card section {
    background: #0c0e11;
    border: 1px solid var(--brand-line);
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0 0;
}
.match-card code {
    background: #000;
    color: var(--brand-red-bright);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    border: 1px solid var(--brand-line);
}

/* ---------------------------------------------------------------------------
   10. Tables — dark, with red header underline + hover row.
   --------------------------------------------------------------------------- */
table {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}
thead th {
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    color: var(--brand-text);
    border-bottom: 2px solid var(--brand-red);
    background: var(--brand-surface-2);
}
tbody tr {
    transition: background 0.12s ease;
}
tbody tr:hover {
    background: rgba(255,42,42,0.06);
}

/* ---------------------------------------------------------------------------
   11. Grids.
   --------------------------------------------------------------------------- */
.tournament-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 100%;
}
.grid {
    gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   12. Utilities.
   --------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted { color: var(--brand-text-dim); }
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }
.loading { text-align: center; padding: 2rem; color: var(--brand-text-dim); }

form button[type="submit"] { min-width: 120px; }
form button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   13. Responsive.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .tournament-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .grid, .tournament-grid { grid-template-columns: 1fr; }
    nav ul li { padding: 0.25rem; }
    .match-card section { padding: 0.75rem; }
    .hero { padding: 2rem 1.25rem; }
}

/* ============================================================================
   14. BRACKET — themed HTML cells + SVG connector layer.
   Pan window (Challonge-style). Kept from prior design, re-skinned to red/black.
   ============================================================================ */
.bracket-champion {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffd24d;
    text-shadow: 0 0 18px rgba(255,210,77,0.4);
    margin: 0 0 1rem;
}

.bracket-scroll {
    position: relative;
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--brand-line);
    border-radius: 10px;
    background-color: #0a0b0e;
    background-image: radial-gradient(rgba(255,42,42,0.10) 0.6px, transparent 0.6px);
    background-size: 22px 22px;
    padding: 1rem;
    cursor: grab;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-shadow: inset 0 0 80px -20px rgba(0,0,0,0.9);
}
.bracket-scroll::-webkit-scrollbar { width: 0; height: 0; }
.bracket-scroll.is-panning { cursor: grabbing; user-select: none; }
.bracket-scroll.is-panning a { pointer-events: none; }

.bracket-grid {
    position: relative;
    display: flex;
    gap: 24px;
    align-items: stretch;
    min-width: min-content;
}
.bracket-round {
    display: flex;
    flex-direction: column;
    width: 158px;
    flex: none;
    position: relative;
    z-index: 1;
}
.bracket-round-matches {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 8px;
}
.bracket-round-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand-red-bright);
    margin: 0 0 8px;
    text-align: center;
}

.bracket-match {
    display: block;
    border: 1px solid var(--brand-line);
    border-radius: 6px;
    background: linear-gradient(180deg, var(--brand-surface-2), var(--brand-surface));
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.bracket-match:hover {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 1px var(--brand-red), 0 8px 20px -10px var(--brand-red-glow);
    transform: translateY(-1px);
}
.bracket-match.status-completed { border-left: 3px solid var(--color-info); }
.bracket-match.status-live {
    border-left: 3px solid var(--brand-red);
    box-shadow: 0 0 16px -4px var(--brand-red-glow);
    animation: pulse 2s infinite;
}

.bracket-team {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.3;
}
.bracket-team + .bracket-team { border-top: 1px solid var(--brand-line); }
.bracket-team .seed {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--brand-text-dim);
    min-width: 1.4em;
    text-align: center;
}
.bracket-team .name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.bracket-team .name.tbd { color: var(--brand-text-dim); font-style: italic; font-weight: 400; }
.bracket-team .score {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--brand-text);
}
.bracket-team.is-winner {
    background: rgba(255,42,42,0.07);
}
.bracket-team.is-winner .name {
    font-weight: 700;
    color: #fff;
}
.bracket-team.is-winner .score { color: var(--brand-red-bright); }

.bracket-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}
.bracket-lines path {
    stroke: var(--brand-line);
    stroke-width: 1.5;
    fill: none;
}

@media (max-width: 768px) {
    .bracket-scroll { max-height: 60vh; padding: 0.5rem; }
    .bracket-grid { gap: 18px; }
}

/* ---------------------------------------------------------------------------
   15. Print.
   --------------------------------------------------------------------------- */
@media print {
    nav, footer { display: none; }
    body { background: #fff; }
    .status-badge { border: 1px solid #000; }
}