/* Create Brackets - shared bracket styles (public page, embed, admin app).
   PlayOn colours as in Create a Schedule: black, grey, light blue as the one accent.
   A tournament may set its own accent (--accent) from the conference's colours. */
:root {
    --night: #0c0d0f; --night-2: #1a1c20; --night-3: #2b2e34;
    --canvas: #eceef1; --card: #ffffff; --ink: #111214; --muted: #5d6169; --faint: #8d929b;
    --line: #dcdfe4; --line-2: #eef0f2;
    --accent: #5bc2ef; --accent-ink: #0a6c99; --accent-soft: #e5f5fd; --on-accent: #0c0d0f;
    --win-bg: #f4fafd; --tbd: #a1a6ae;
    --good: #0f9f8f; --good-soft: #e2f6f2; --warn: #d97706; --warn-soft: #fff5e3; --bad: #e11d48; --bad-soft: #ffe9ee;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(12, 13, 15, .05), 0 8px 24px rgba(12, 13, 15, .06);
    --shadow-lg: 0 2px 6px rgba(12, 13, 15, .06), 0 24px 48px rgba(12, 13, 15, .14);
    --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --canvas: #0f1013; --card: #17191d; --ink: #eef0f3; --muted: #a4aab3; --faint: #7b818a;
    --line: #2b2f35; --line-2: #212429; --accent-ink: #7fd0f4; --accent-soft: #10242e; --win-bg: #14222a; --tbd: #6c727b;
    --good-soft: #0f2a26; --warn-soft: #2d2210; --bad-soft: #2e1218; color-scheme: dark; } }
:root[data-theme="dark"] {
    --canvas: #0f1013; --card: #17191d; --ink: #eef0f3; --muted: #a4aab3; --faint: #7b818a;
    --line: #2b2f35; --line-2: #212429; --accent-ink: #7fd0f4; --accent-soft: #10242e; --win-bg: #14222a; --tbd: #6c727b;
    --good-soft: #0f2a26; --warn-soft: #2d2210; --bad-soft: #2e1218; color-scheme: dark; }

/* ---- full bracket ---- */
.bsec { margin-bottom: 26px; }
.sec-title { font: 800 15px/1.1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.bwrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.bcanvas { position: relative; }
.rheads { position: absolute; left: 0; right: 0; top: 0; height: 30px; }
.rh { position: absolute; top: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 2px; font: 700 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rh b { font-weight: 800; color: var(--ink); }
.rh span { color: var(--faint); font-weight: 600; letter-spacing: .06em; }
.rh-inline { position: static; margin-bottom: 6px; }
.wires { position: absolute; left: 0; overflow: visible; }
.wire { fill: none; stroke: var(--line); stroke-width: 1.6; }
.wire-on { stroke: var(--faint); }
.slots { position: absolute; left: 0; top: 34px; right: 0; bottom: 0; }
.slot { position: absolute; }

.gb { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(12, 13, 15, .04); }
.gb[data-game] { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.gb[data-game]:hover, .gb[data-game]:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); outline: none; }
.gb-meta { display: flex; align-items: center; gap: 6px; padding: 4px 8px 3px; font: 600 11px/1.2 var(--body); color: var(--faint); border-bottom: 1px solid var(--line-2); white-space: nowrap; overflow: hidden; }
.gb-meta b { color: var(--muted); font-weight: 700; }
.gb-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }
.gb-st { margin-left: auto; color: var(--warn); font-weight: 700; }
.gb-isbye { opacity: .55; border-style: dashed; box-shadow: none; }
.gb-isbye .sd-bye { display: none; }
.gb-note { font-size: 11px; color: var(--muted); padding: 2px 8px 5px; font-style: italic; }
.sd { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 8px; min-height: 30px; position: relative; }
.sd + .sd { border-top: 1px solid var(--line-2); }
.sd-seed { font: 600 11px var(--mono); color: var(--faint); text-align: right; }
.sd-name { font: 600 13.5px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sc { font: 700 14px var(--mono); color: var(--muted); min-width: 1ch; text-align: right; }
.sd-win { background: var(--win-bg); }
.sd-win::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--team, var(--accent)); }
.sd-win .sd-name { font-weight: 800; }
.sd-win .sd-sc { color: var(--ink); }
.sd-lose .sd-name, .sd-lose .sd-sc { color: var(--faint); }
.sd-tbd .sd-name { color: var(--tbd); font-weight: 500; font-style: italic; font-size: 12.5px; }
.sd-bye .sd-name { color: var(--tbd); font-weight: 500; }
.lg { border-radius: 5px; object-fit: contain; flex: none; display: block; }
.lg-init { display: inline-grid; place-items: center; color: #fff; font: 800 10px/1 var(--display); letter-spacing: .02em; }
.lg-empty { background: var(--line-2); border-radius: 5px; display: inline-block; }
.gb-stale { border-color: var(--warn); }

.champ-slot { position: absolute; }
.champ { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 14px 16px; border-radius: 14px; background: var(--night); color: #fff; position: relative; overflow: hidden; }
.champ::after { content: ''; position: absolute; inset: auto 0 0 0; height: 5px; background: var(--team, var(--accent)); }
.champ .lg { background: #fff; border-radius: 10px; padding: 5px; width: 64px; height: 64px; }
.champ-k { font: 700 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.champ-n { font: 800 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.champ-tbd { background: var(--card); color: var(--muted); border: 1px dashed var(--line); }
.champ-tbd::after { display: none; }
.champ-tbd .champ-n { font-size: 17px; color: var(--faint); }

/* ---- pools ---- */
.pools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; margin-bottom: 24px; }
.pool { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; min-width: 0; }
.table-wrap { overflow-x: auto; }
table.standings { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.standings th { font: 700 11px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--line); }
table.standings th:nth-child(2) { text-align: left; }
table.standings td { padding: 6px; text-align: right; border-bottom: 1px solid var(--line-2); }
table.standings td.tn { text-align: left; display: flex; gap: 8px; align-items: center; font-weight: 600; }
table.standings td.rk { color: var(--faint); font-family: var(--mono); font-size: 12px; }
.pool-games { display: grid; gap: 8px; margin-top: 12px; }
.pill { font: 700 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }

/* ---- cards (one round at a time) ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.card.gc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 12px; display: grid; gap: 2px; cursor: pointer; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.card.gc:hover, .card.gc:focus-visible { border-color: var(--accent); outline: none; box-shadow: var(--shadow); }
.gc .sd { padding: 6px 2px; min-height: 40px; grid-template-columns: 20px auto minmax(0, 1fr) auto; }
.gc .sd-name { font-size: 15px; }
.gc .sd-sc { font-size: 17px; }
.gc .sd-win::before { left: -12px; }
.gc-top { display: flex; justify-content: space-between; font: 600 12px var(--body); color: var(--faint); padding-bottom: 4px; }
.gc-top .final { color: var(--ink); font: 800 12px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.gc-where { font-size: 12.5px; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--line-2); margin-top: 4px; }
.gc-act { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.byes { font-size: 13px; color: var(--muted); margin: 12px 2px 0; }
.empty { color: var(--muted); }

/* ---- leaderboards ---- */
.lboard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.lb-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.lb-table td.lb-total { font: 800 17px var(--display); color: var(--ink); }
.lb-table tr.lb-lead td { background: var(--win-bg); }
.lb-table tr.lb-lead td:first-child { box-shadow: inset 3px 0 0 var(--team); }
.lb-table td.rk { font-weight: 700; }