#tournament { --trn-paper:#f5efdf; --trn-card:#fffbf1; --trn-ink:#241e29; --trn-muted:#716958; --trn-line:#d9cfbb; --trn-accent:#806024; background:var(--trn-paper); color:var(--trn-ink); min-height:100svh; }
#tournament[data-theme="dark"] { --trn-paper:#17161c; --trn-card:#23212a; --trn-ink:#f2ead9; --trn-muted:#bcb2a0; --trn-line:#48424a; --trn-accent:#dfbf79; }
#tournament .trn-root { max-width:1480px; padding:36px max(24px,env(safe-area-inset-right)) max(70px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
#tournament .trn-title { color:var(--trn-ink); font:700 clamp(30px,3vw,44px)/1.3 var(--font-ar-display); }
#tournament .trn-sub { color:var(--trn-muted); opacity:1; max-width:700px; line-height:1.7; }
#tournament :is(.trn-card,.trn-match,.trn-overview,.trn-champ) { background:var(--trn-card); border:1px solid var(--trn-line); box-shadow:none; }
#tournament .trn-card { padding:24px; border-radius:16px; margin-bottom:14px; }
#tournament .btn { color:var(--trn-ink)!important; background:var(--trn-card)!important; border:1px solid var(--trn-line)!important; box-shadow:none!important; font-family:var(--font-body)!important; }
#tournament .btn--primary, #tournament .trn-play { background:var(--trn-accent)!important; color:var(--trn-paper)!important; border-color:var(--trn-accent)!important; }
#tournament .trn-overview { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); border-radius:18px; margin:24px 0 18px; overflow:hidden; }
#tournament .trn-progress { padding:28px; display:flex; flex-direction:column; justify-content:center; gap:12px; border-inline-end:1px solid var(--trn-line); color:var(--trn-muted); }
#tournament .trn-progress strong { font-size:38px; color:var(--trn-ink); }
#tournament .trn-progress small { font-size:17px; color:var(--trn-muted); }
#tournament progress { width:100%; height:8px; accent-color:var(--trn-accent); }
#tournament .trn-kicker { font-size:14px; font-weight:700; color:var(--trn-accent); }
#tournament .trn-next { padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; }
#tournament .trn-next small { color:var(--trn-muted); }
#tournament .trn-versus { display:flex; gap:24px; align-items:center; width:100%; }
#tournament .trn-versus strong { flex:1; font:700 clamp(24px,2.4vw,34px)/1.4 var(--font-ar-display); overflow-wrap:anywhere; }
#tournament .trn-versus>span { color:var(--trn-muted); font-size:14px; }
#tournament .trn-round-nav { display:flex; flex-wrap:wrap; gap:8px; padding:8px 0; }
#tournament .trn-round-nav button { background:var(--trn-card); color:var(--trn-ink); border:1px solid var(--trn-line); padding:8px 16px; border-radius:24px; font:700 14px var(--font-body); cursor:pointer; }
#tournament .trn-bracket { gap:24px; padding:16px 2px 24px; scrollbar-width:thin; scrollbar-color:var(--trn-accent) var(--trn-paper); }
#tournament .trn-round { flex:1; min-width:260px; gap:18px; justify-content:flex-start; }
#tournament .trn-round-matches { flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:14px; }
#tournament .trn-round__name { font-size:18px; opacity:1; color:var(--trn-ink); letter-spacing:0; }
#tournament .trn-match { flex-shrink:0; }
#tournament .trn-match.live { border-color:var(--trn-accent); box-shadow:none; }
#tournament .trn-match-status { padding:7px 14px; font-size:12px; color:var(--trn-muted); border-bottom:1px solid var(--trn-line); }
#tournament .trn-slot { padding:10px 14px; gap:12px; font-size:17px; }
#tournament .trn-slot>span:first-child { overflow-wrap:anywhere; }
#tournament .trn-score { font-size:23px; color:var(--trn-ink); opacity:1; direction:ltr; min-width:50px; text-align:end; }
#tournament .trn-slot.won { color:var(--trn-ink); background:color-mix(in srgb,var(--trn-accent) 12%,transparent); }
#tournament .trn-slot.tbd { opacity:.65; }
#tournament .trn-play { min-height:44px; font:700 15px var(--font-body); }
#tournament .trn-champ { padding:30px; border-color:var(--trn-accent); background:radial-gradient(ellipse at top,color-mix(in srgb,var(--trn-accent) 16%,transparent),transparent 75%),var(--trn-card); }
#tournament .trn-champ .who { color:var(--trn-accent); font-size:clamp(32px,4vw,52px); overflow-wrap:anywhere; }
#tournament .trn-input { background:var(--trn-paper); border-color:var(--trn-line); font-family:var(--font-body); min-height:48px; }
#tournament .trn-opts button { opacity:1; color:var(--trn-ink); }
#tournament .trn-opts button.on { color:var(--trn-accent); border-color:var(--trn-accent); }
#tournament .trn-badge { color:var(--trn-accent); border-color:var(--trn-line); }
#tournament .trn-badge.done { color:var(--trn-ink); }
#tournament :is(button,input,.trn-bracket):focus-visible { outline:2px solid var(--trn-accent); outline-offset:3px; }
@media(max-width:700px) { #tournament .trn-root { padding:24px 16px 80px; padding-top:calc(24px + env(safe-area-inset-top)); } #tournament .trn-overview { grid-template-columns:1fr; } #tournament .trn-progress { border-inline-end:0; border-bottom:1px solid var(--trn-line); padding:18px; gap:8px; } #tournament .trn-progress strong { font-size:28px; } #tournament .trn-next { padding:20px 16px; } #tournament .trn-card { padding:18px; } #tournament .trn-round { min-width:260px; } }