/* Populous tournaments: page-specific, on top of /css/style.css (the HonchoC64
   site's own stylesheet, copied in at deploy). Good is cyan, Evil orange, as the
   charts draw them; match states use the site's status colours: green done,
   orange in progress, dim planned. */
.tn-section {
    --tn-good: #00ccff;
    --tn-evil: #ff6600;
    --tn-panel: rgba(10, 10, 10, 0.72);
}

.tn-section .commando-detail { margin-bottom: 32px; }

.tn-block { margin-bottom: 64px; }

.tn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.tn-chip {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--tn-panel);
}
.tn-chip.done { color: var(--accent-3); border-color: rgba(0, 255, 136, 0.5); }
.tn-chip.live { color: var(--accent-2); border-color: rgba(255, 102, 0, 0.5); }
.tn-chip.test { color: var(--accent); border-color: rgba(0, 204, 255, 0.5); }

/* ---- tournament cards on the list page ---- */
.tn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tn-card {
    display: block;
    padding: 20px 22px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--tn-panel);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.tn-card:hover { border-color: var(--accent); }
.tn-card h3 { margin: 0 0 8px; font-size: 18px; color: #fff; }
.tn-card p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }
.tn-card .tn-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }

/* ---- counters, reusing .stat ---- */
.tn-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 48px;
}
.tn-counters .stat { padding: 18px 8px; background: var(--tn-panel); }
.tn-counters .stat-number { font-size: 18px; font-variant-numeric: tabular-nums; }
.tn-counters .stat-label { font-size: 11px; }

/* ---- knockout charts ---- */
.tn-bracket-wrap {
    overflow-x: auto;
    padding: 16px 0 8px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--tn-panel);
    margin-bottom: 24px;
}
.tn-bracket { display: block; margin: 0 16px; }
.tn-bracket text { font-family: 'Inter', sans-serif; font-size: 13px; fill: var(--text-muted); }
.tn-bracket .tn-rhead { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; fill: var(--text-dim); text-transform: uppercase; }
.tn-bracket .tn-box { fill: #111; stroke: #333; stroke-width: 1; }
.tn-bracket .done .tn-box { stroke: rgba(0, 255, 136, 0.55); }
.tn-bracket .live .tn-box { stroke: var(--accent-2); stroke-width: 2; }
.tn-bracket .planned .tn-box { stroke: #222; stroke-dasharray: 4 3; }
.tn-bracket .tn-win { fill: #fff; font-weight: 600; }
.tn-bracket .tn-lose { fill: var(--text-dim); }
.tn-bracket .tn-how { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: var(--text-dim); }
.tn-bracket .live .tn-how { fill: var(--accent-2); }
.tn-bracket .tn-line { stroke: #333; stroke-width: 1.5; fill: none; }
.tn-bracket .tn-line.done { stroke: rgba(0, 255, 136, 0.5); }
.tn-bracket .tn-out { font-family: 'JetBrains Mono', monospace; font-size: 11px; fill: var(--accent); }
.tn-bracket .tn-champ { font-size: 15px; font-weight: 700; fill: var(--accent-3); }
.tn-bracket a:hover .tn-box { stroke: var(--accent); }

/* ---- tables ---- */
.tn-table-wrap { overflow-x: auto; border: 1px solid var(--border-light); border-radius: 12px; background: var(--tn-panel); }
.tn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tn-table th, .tn-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #1c1c1c; white-space: nowrap; }
.tn-table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); font-weight: 400; }
.tn-table td { color: var(--text-muted); }
.tn-table td.num, .tn-table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tn-table a { color: var(--accent); text-decoration: none; }
.tn-table tr.tn-adv td:first-child { box-shadow: inset 3px 0 0 var(--accent-3); }
.tn-table .tn-good { color: var(--tn-good); }
.tn-table .tn-evil { color: var(--tn-evil); }
.tn-table .tn-state-done { color: var(--accent-3); }
.tn-table .tn-state-live { color: var(--accent-2); }
.tn-table .tn-state-planned { color: var(--text-dim); }

/* ---- records ---- */
.tn-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tn-record { padding: 18px 20px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--tn-panel); }
.tn-record h4 { margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); font-weight: 400; }
.tn-record p { margin: 0; color: #fff; }
.tn-record .tn-sub { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.tn-record a { color: var(--accent); text-decoration: none; }

/* ---- bars (powers) ---- */
.tn-bars { display: grid; gap: 6px; }
.tn-bar { display: grid; grid-template-columns: 90px 1fr 48px; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.tn-bar span.tn-fill { display: block; height: 10px; border-radius: 2px; background: var(--accent); }
.tn-bar .num { text-align: right; color: #fff; }

/* ---- charts ---- */
.tn-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.tn-chart { padding: 14px 16px 10px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--tn-panel); }
.tn-chart h4 { margin: 0 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); font-weight: 400; }
.tn-chart svg { display: block; width: 100%; height: auto; }
.tn-chart .tn-axis { stroke: #222; stroke-width: 1; }
.tn-chart text { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: var(--text-dim); }
.tn-chart .tn-g { stroke: var(--tn-good); stroke-width: 2; fill: none; }
.tn-chart .tn-e { stroke: var(--tn-evil); stroke-width: 2; fill: none; }
.tn-legend { display: flex; gap: 16px; font-family: var(--font-mono); font-size: 12px; margin: 0 0 16px; color: var(--text-muted); }
.tn-legend .tn-good::before, .tn-legend .tn-evil::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; }
.tn-legend .tn-good::before { background: var(--tn-good); }
.tn-legend .tn-evil::before { background: var(--tn-evil); }

/* ---- match head ---- */
.tn-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 24px; }
.tn-vs .tn-side { padding: 18px 20px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--tn-panel); }
.tn-vs .tn-side.tn-winner { border-color: rgba(0, 255, 136, 0.6); }
.tn-vs .tn-side h3 { margin: 0; font-size: 20px; }
.tn-vs .tn-side h3 a { color: #fff; text-decoration: none; }
.tn-vs .tn-side p { margin: 6px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.tn-vs .tn-side.good p .tn-col { color: var(--tn-good); }
.tn-vs .tn-side.evil p .tn-col { color: var(--tn-evil); }
.tn-vs .tn-v { font-family: var(--font-mono); color: var(--text-dim); }
.tn-empty { color: var(--text-dim); font-style: italic; }

@media (max-width: 768px) {
    .tn-vs { grid-template-columns: 1fr; }
    .tn-vs .tn-v { text-align: center; }
    .tn-bar { grid-template-columns: 70px 1fr 40px; }
}