/* Phase 3: one tournament arena, with a bounded bracket and a mobile round view. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#page-tournaments { --tt-gold:#ffc45c; --tt-line:#51402c; }
.tt-page-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 0 1rem; }
.tt-page-header h2 { font-size:1.65rem; letter-spacing:-.04em; margin-top:.25rem; }
.tt-eyebrow { color:var(--tt-gold); font-size:.65rem; text-transform:uppercase; font-weight:750; letter-spacing:.12em; }
.tt-page-controls { display:flex; align-items:center; gap:.55rem; min-width:0; }
.tt-page-controls select { max-width:310px; }
.tt-notice { border:1px solid #8a6236; border-radius:8px; background:#2b2017; color:#f3d5af; font-size:.8rem; padding:.7rem 1rem; margin-bottom:1rem; }
.tt-hero { position:relative; display:grid; grid-template-columns:80px minmax(0,1fr) auto; align-items:center; gap:1.5rem; padding:1.6rem 1.8rem; margin-bottom:1rem; border:1px solid #66502b; border-radius:14px; background:radial-gradient(ellipse at 0 0,#55402255,transparent 65%),linear-gradient(110deg,#221d15,#151518); overflow:hidden; }
.tt-hero::after { content:''; position:absolute; width:260px; height:260px; top:-160px; right:200px; border:1px solid #ffc45c12; border-radius:50%; box-shadow:0 0 0 45px #ffc45c05,0 0 0 90px #ffc45c03; pointer-events:none; }
.tt-emblem { display:grid; place-items:center; width:80px; height:80px; color:var(--tt-gold); background:#ffc45c09; border:1px solid #a5803c50; border-radius:20px; }
.tt-emblem > svg { width:64px; height:64px; }
.tt-hero-copy { min-width:0; position:relative; z-index:1; }
.tt-hero-copy h3 { font-size:clamp(1.55rem,2.6vw,2.4rem); line-height:1.15; letter-spacing:-.045em; margin:.45rem 0; overflow-wrap:anywhere; }
.tt-hero-copy > p:not(.tt-eyebrow) { color:#beb9b1; font-size:.83rem; line-height:1.5; }
.tt-hero-meta { display:flex; flex-wrap:wrap; gap:.45rem 1rem; margin-top:.7rem; font-size:.69rem; color:var(--muted); }
.tt-clock { display:flex; flex-direction:column; align-items:flex-end; min-width:190px; z-index:1; }
.tt-clock > span { font-size:.67rem; color:var(--tt-gold); text-transform:uppercase; letter-spacing:.07em; }
.tt-clock strong { font-size:1.7rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin:.2rem 0; }
.tt-clock small { color:var(--muted); font-size:.67rem; }
.tt-final-score { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; font-size:.7rem; color:var(--muted); margin-top:.7rem; }
.tt-final-score strong { color:var(--tt-gold); font-size:.85rem; font-variant-numeric:tabular-nums; }
.tt-final-score strong span { color:var(--muted); }
.tt-rounds { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.5rem; margin-bottom:1.25rem; }
.tt-round-step { font:inherit; text-align:left; cursor:pointer; padding:.65rem .85rem; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.tt-round-day { font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.tt-round-step strong { font-size:.86rem; }
.tt-round-count { font-size:.62rem; color:var(--muted); }
.tt-round-step.is-done .tt-round-day { color:#91c6a6; }
.tt-round-step.is-live { border-color:#486a50; background:#18261d; }
.tt-round-step.is-selected { border-color:#b18a43; box-shadow:inset 0 -2px var(--tt-gold); }
.tt-round-short { display:none; }
.tt-spotlight { margin-bottom:1.25rem; }
.tt-section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.65rem; }
.tt-section-heading h3 { font-size:1.1rem; letter-spacing:-.025em; margin-top:.2rem; }
.tt-section-heading > span { font-size:.73rem; color:var(--muted); }
.tt-live-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
.tt-arena { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:1rem; }
.tt-arena-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1rem; border-bottom:1px solid var(--border); background:#19191d; }
.tt-view-tabs { display:flex; align-items:center; gap:.5rem; }
.tt-view-tabs button { font:inherit; font-size:.8rem; font-weight:650; min-height:38px; padding:.4rem .7rem; border:1px solid transparent; border-radius:6px; background:none; color:var(--muted); cursor:pointer; white-space:nowrap; }
.tt-view-tabs button[aria-selected=true] { color:var(--tt-gold); border-color:#66502b; background:#2b2318; }
.tt-arena-actions { display:flex; align-items:center; gap:.5rem; }
.tt-arena-actions input { width:180px; }
.tt-panel-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; padding:.85rem 1rem; }
.tt-panel-heading h3 { font-size:.95rem; }
.tt-panel-heading p { color:var(--muted); font-size:.72rem; margin-top:.3rem; }
.tt-panel-heading > span { color:var(--muted); font-size:.68rem; }
.tt-bracket-scroll { overflow:auto; max-height:580px; overscroll-behavior:contain; scrollbar-gutter:stable; padding:0 1rem 1rem; }
.tt-bracket { position:relative; display:grid; grid-template-columns:repeat(5,minmax(230px,1fr)); gap:24px; min-width:1270px; }
.tt-bracket-round { min-width:0; }
.tt-bracket-round > header { position:sticky; top:0; z-index:3; background:var(--surface); border-bottom:1px solid var(--border2); padding:.6rem .5rem; text-align:center; height:54px; }
.tt-bracket-round.is-selected > header { border-color:var(--tt-gold); color:var(--tt-gold); }
.tt-bracket-round > header span { font-size:.6rem; text-transform:uppercase; color:var(--muted); letter-spacing:.06em; }
.tt-bracket-round h4 { font-size:.8rem; margin-top:.15rem; }
.tt-round-track { display:grid; grid-template-rows:repeat(16,128px); }
.tt-slot { position:relative; display:flex; align-items:center; grid-row:span var(--span); min-height:0; }
.tt-bracket-round:not(:last-child) .tt-slot::after { content:''; position:absolute; width:12px; right:-12px; top:50%; border-top:1px solid var(--tt-line); }
.tt-bracket-round:not(:last-child) .tt-slot::before { content:''; position:absolute; right:-12px; height:50%; border-right:1px solid var(--tt-line); }
.tt-slot.is-upper::before { top:50%; }
.tt-slot.is-lower::before { bottom:50%; }
.tt-bracket-round:not(:first-child) .tt-slot > .tt-match::before { content:''; position:absolute; width:12px; left:-13px; top:50%; border-top:1px solid var(--tt-line); }
.tt-match { position:relative; display:block; width:100%; font:inherit; color:var(--text); border:1px solid var(--border2); border-radius:8px; background:#1c1c20; text-align:left; padding:0; cursor:pointer; transition:border-color .15s,opacity .15s; }
.tt-match:hover { border-color:#977342; }
.tt-match:disabled { cursor:default; opacity:.6; }
.tt-match.is-live { border-color:#4a7357; background:#19231d; }
.tt-match.is-dim { opacity:.3; }
.tt-match-head { display:flex; justify-content:space-between; align-items:center; gap:.3rem; padding:.4rem .55rem; font-size:.61rem; color:var(--muted); border-bottom:1px solid var(--border); }
.tt-match-state { display:flex; align-items:center; gap:.35rem; }
.tt-match.is-live .tt-match-state { color:#8eddab; }
.tt-match-state i { width:5px; height:5px; border-radius:50%; background:#8eddab; }
.tt-match-team { display:grid; grid-template-columns:24px minmax(0,1fr) auto 10px; gap:.4rem; align-items:center; padding:.35rem .5rem; min-width:0; min-height:34px; }
.tt-match-logo { display:grid; place-items:center; flex-shrink:0; }
.tt-match-logo svg { width:24px; height:24px; }
.tt-team-initial { display:grid; place-items:center; width:24px; height:24px; font-size:.78rem; color:var(--team-color,#c7b692); background:#ffffff07; border:1px solid #ffffff14; border-radius:7px; }
.tt-match-team-name { display:block; font-size:.72rem; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tt-team-tag { font-size:.64rem; font-weight:650; }
.tt-match-team > strong { font-size:.86rem; font-variant-numeric:tabular-nums; }
.tt-match-team.is-winner { background:#ffc45c0b; }
.tt-match-team.is-winner > strong { color:var(--tt-gold); }
.tt-winner-check { font-size:.65rem; color:var(--tt-gold); }
.tt-match-foot { display:flex; justify-content:space-between; padding:.3rem .55rem; color:var(--muted); font-size:.6rem; border-top:1px solid var(--border); }
.tt-round-matches { display:none; padding:0 1rem 1rem; }
.tt-round-matches h4 { font-size:.9rem; }
.tt-round-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.tt-arena.is-round-view .tt-bracket-scroll { display:none; }
.tt-arena.is-round-view .tt-round-matches { display:block; }
.tt-qualifiers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.5rem; padding:0 1rem 1rem; }
.tt-qualifier { display:grid; grid-template-columns:22px 28px minmax(0,1fr) auto; align-items:center; gap:.5rem; padding:.6rem 0; border-bottom:1px solid var(--border); min-width:0; }
.tt-qualifier[hidden] { display:none; }
.tt-qualifier-rank { font-size:.78rem; color:var(--muted); }
.tt-qualifier-name { font-size:.79rem; font-weight:650; overflow-wrap:anywhere; }
.tt-qualifier small { display:block; font-size:.63rem; color:var(--muted); margin-top:.15rem; font-weight:400; }
.tt-qualifier > strong { color:var(--tt-gold); font-size:.85rem; font-variant-numeric:tabular-nums; text-align:right; }
.tt-empty { color:var(--muted); line-height:1.6; text-align:center; padding:1.5rem; font-size:.8rem; }
.tt-loading { padding:1.5rem 0; color:var(--muted); }
.tt-rules { border:1px solid var(--border); border-radius:10px; background:#121214; }
.tt-rules > summary { padding:.85rem 1rem; font-size:.8rem; cursor:pointer; }
.tt-rules > summary > span { font-size:.7rem; color:var(--muted); margin-left:1rem; }
.tt-rules-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; padding:.4rem 1.1rem 1.1rem; }
.tt-rules-grid h3 { font-size:.8rem; margin-bottom:.4rem; }
.tt-rules-grid p { color:var(--muted); font-size:.74rem; line-height:1.6; }
.tt-match-dialog { margin:auto; max-width:min(640px,calc(100vw - 24px)); width:640px; max-height:90dvh; overflow:auto; background:#17171b; color:var(--text); border:1px solid #57432a; border-radius:14px; padding:1.5rem; }
.tt-match-dialog::backdrop { background:#000c; backdrop-filter:blur(4px); }
.tt-dialog-close { position:absolute; top:.5rem; right:.5rem; width:44px; height:44px; background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:8px; font:inherit; cursor:pointer; }
.tt-match-dialog h3 { margin:.4rem 0; font-size:1.4rem; }
.tt-dialog-status { color:var(--muted); font-size:.75rem; margin-bottom:1rem; }
.tt-detail-teams { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.tt-detail-team { min-width:0; border:1px solid var(--border2); border-radius:10px; padding:1rem; }
.tt-detail-team.is-winner { border-color:#a78240; background:#30261955; }
.tt-detail-team h4 { font-size:1rem; line-height:1.4; margin:.55rem 0; overflow-wrap:anywhere; }
.tt-detail-winner { display:block; color:var(--tt-gold); font-size:.67rem; text-transform:uppercase; margin-top:.25rem; }
.tt-detail-points { font-size:1.8rem; font-weight:750; font-variant-numeric:tabular-nums; margin-bottom:.6rem; }
.tt-detail-points small { font-size:.7rem; color:var(--muted); font-weight:400; }
.tt-detail-team dl > div { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.72rem; margin-top:.45rem; }
.tt-detail-team dt { color:var(--muted); }
.tt-detail-team dd { margin:0; font-variant-numeric:tabular-nums; }
.tt-detail-window { display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.7rem; color:var(--muted); margin:1rem 0 .5rem; }
.tt-detail-window strong { color:var(--text); font-weight:550; }
.tt-detail-note { font-size:.7rem; color:var(--muted); line-height:1.5; }
@media (max-width:1099px) {
  .tt-hero { grid-template-columns:64px minmax(0,1fr) auto; gap:1rem; padding:1.25rem; }
  .tt-emblem { width:64px; height:64px; }
  .tt-emblem > svg { width:52px; height:52px; }
  .tt-clock { min-width:150px; }
  .tt-live-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* The mobile round list already shows these live matches in full. */
  .tt-spotlight { display:none; }
  .tt-bracket-scroll { display:none; }
  .tt-round-matches { display:block; }
  #tt-layout { display:none; }
  .tt-round-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .tt-page-header { align-items:flex-start; flex-direction:column; gap:.7rem; }
  .tt-page-header h2 { font-size:1.5rem; }
  .tt-page-controls { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .tt-page-controls select { width:100%; max-width:none; }
  .tt-page-controls button { font-size:.75rem; padding:.4rem .65rem; }
  .tt-hero { grid-template-columns:48px minmax(0,1fr); gap:.8rem; padding:1rem; }
  .tt-emblem { width:48px; height:48px; border-radius:12px; }
  .tt-emblem > svg { width:40px; height:40px; }
  .tt-hero-copy h3 { font-size:1.45rem; }
  .tt-hero-copy > p:not(.tt-eyebrow) { font-size:.74rem; }
  .tt-hero-meta { font-size:.62rem; gap:.3rem .7rem; }
  .tt-clock { grid-column:1 / -1; align-items:flex-start; border-top:1px solid #66502b; padding-top:.7rem; margin-top:.2rem; }
  .tt-clock strong { font-size:1.45rem; }
  .tt-clock small { font-size:.64rem; }
  .tt-eyebrow { font-size:.6rem; }
  .tt-rounds { gap:.25rem; margin-bottom:1rem; }
  .tt-round-step { padding:.55rem .25rem; align-items:center; text-align:center; min-height:60px; }
  .tt-round-day { font-size:.52rem; }
  .tt-round-step strong { font-size:.78rem; }
  .tt-round-long,.tt-round-count { display:none; }
  .tt-round-short { display:inline; }
  .tt-section-heading { gap:.5rem; }
  .tt-section-heading h3 { font-size:1rem; }
  .tt-section-heading > span { font-size:.68rem; }
  .tt-live-grid,.tt-round-grid { grid-template-columns:1fr; }
  .tt-match-team { min-height:42px; }
  .tt-match-team-name { font-size:.79rem; }
  .tt-match-head,.tt-match-foot { font-size:.66rem; padding:.4rem .6rem; }
  .tt-arena-toolbar { flex-direction:column; align-items:stretch; gap:.5rem; padding:.65rem; }
  .tt-view-tabs button { min-height:44px; font-size:.75rem; flex:1; }
  .tt-arena-actions input { width:100%; }
  .tt-panel-heading { padding:.75rem; }
  .tt-panel-heading > span { font-size:.63rem; }
  .tt-round-matches { padding:0 .65rem .65rem; }
  .tt-qualifiers { grid-template-columns:1fr; padding:0 .75rem .75rem; }
  .tt-qualifier { grid-template-columns:18px 24px minmax(0,1fr) auto; gap:.4rem; }
  .tt-qualifier-name { font-size:.74rem; }
  .tt-qualifier > strong { font-size:.78rem; }
  .tt-rules > summary { padding:.85rem; min-height:44px; }
  .tt-rules > summary > span { display:block; margin:.3rem 0 0 1rem; }
  .tt-rules-grid { grid-template-columns:1fr; gap:1rem; }
  .tt-match-dialog { padding:1.1rem; }
  .tt-match-dialog .tt-eyebrow { padding-right:2rem; }
  .tt-detail-teams { grid-template-columns:1fr; }
  .tt-detail-team { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:.5rem; padding:.75rem; }
  .tt-detail-team h4 { font-size:.85rem; margin:0; }
  .tt-detail-team dl { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem .75rem; }
  .tt-detail-points { font-size:1.1rem; margin:0; }
  .tt-detail-points small { display:block; text-align:right; }
  .tt-detail-team > .tt-team-initial { width:40px; height:40px; }
}