.tx-shell, .tx-shell * { box-sizing: border-box; }
.tx-shell {
  --navy: #061b2d; --cyan: #08bde8; --gold: #d59b3d; --line: rgba(16,190,229,.62);
  position: relative; width: 100vw; max-width: none; height: 100vh; aspect-ratio: auto; overflow: hidden;
  padding: 1.4%; color: #fff; font-family: Inter, Arial, sans-serif;
  background:
    linear-gradient(90deg, rgba(4,18,29,.96), rgba(7,31,45,.74) 54%, rgba(7,24,34,.88)),
    radial-gradient(circle at 78% 22%, #b7772c 0, #345d57 35%, #061b2d 75%);
  background-size: cover;
  background-position: center;
}
.tx-shell::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.18); }
.tx-header { height: 17%; display: grid; grid-template-columns: 18% 42% 40%; align-items: center; border-bottom: 2px solid var(--line); }
.tx-brand { height: 88%; border-right: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tx-brand img { width: 72%; max-height: 58%; object-fit: contain; filter: drop-shadow(0 2px 3px #000); }
.tx-live-brand { margin-top: 2%; font-weight: 900; font-size: clamp(8px, 1vw, 17px); letter-spacing: .08em; }
.tx-live-brand i, .tx-on-air i { display: inline-block; width: .65em; height: .65em; border-radius: 50%; background: #ff1d25; margin-right: .35em; box-shadow: 0 0 8px #ff1d25; }
.tx-event { text-align: center; text-transform: uppercase; line-height: 1.02; text-shadow: 0 2px 5px #000; }
.tx-event h1 { margin: 0; font-size: clamp(15px, 2.45vw, 43px); font-weight: 950; letter-spacing: -.035em; }
.tx-event strong { display: inline-block; margin-top: 1.2%; padding: .4% 3%; color: #ffe2a5; font-size: clamp(8px, 1.15vw, 20px); letter-spacing: .08em; border-block: 1px solid rgba(255,224,164,.65); }
.tx-event span { display: block; margin-top: 1%; color: #dff7ff; font-size: clamp(7px, .78vw, 14px); font-weight: 900; letter-spacing: .28em; }
.tx-nav { height: 62%; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(238,186,88,.75); border-radius: 12px; overflow: hidden; background: rgba(4,20,32,.9); }
.tx-nav button,.tx-nav a { color: #d5e0e5; border: 0; border-right: 1px solid rgba(255,255,255,.12); background: transparent; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5%; text-decoration:none; }
.tx-nav button:last-child,.tx-nav a:last-child { border-right: 0; }.tx-nav button.active { color: var(--cyan); background: rgba(4,60,77,.8); }
.tx-nav b { font-size: clamp(12px, 1.4vw, 25px); }.tx-nav span { font-size: clamp(5px, .56vw, 10px); font-weight: 900; }
.tx-content { height: 68%; padding: 1.4% 0 1.1%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, 1fr); gap: 1.1%; }
.tx-video, .tx-score { border: 2px solid var(--line); border-radius: 15px; overflow: hidden; background: #071d2c; box-shadow: 0 9px 24px rgba(0,0,0,.32); }
.tx-video { position: relative; }.tx-on-air { position: absolute; z-index: 2; left: 2.2%; top: 2.8%; padding: .7% 1.7%; background: #e61d25; border-radius: 7px; font-size: clamp(7px, .72vw, 13px); font-weight: 950; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.tx-video-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255,255,255,.52); font-weight: 900; letter-spacing: .18em; font-size: clamp(9px, 1vw, 17px); background: linear-gradient(155deg,#397f8f,#204a5b 45%,#0c3040); }
.tx-video > video, .tx-video > iframe, .tx-video > img { width: 100%; height: 100%; object-fit: cover; border: 0; }
.tx-score { position: relative; padding: 2.2%; }.tx-score-head { height: 18%; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5%; border-bottom: 1px solid rgba(255,255,255,.18); }
.tx-score-head div { display: flex; flex-direction: column; }.tx-score-head strong { font-size: clamp(12px, 1.35vw, 24px); text-transform: uppercase; }.tx-score-head small { color: var(--cyan); font-weight: 900; font-size: clamp(7px, .62vw, 11px); }
.tx-score-head time { padding-left: 4%; border-left: 1px solid rgba(255,255,255,.25); font: 950 clamp(19px, 2.35vw, 42px)/1 monospace; }
.tx-athletes { height: 82%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5%; padding-top: 2.2%; }
.tx-athlete { display: grid; grid-template-columns: 34% minmax(0,1fr); grid-template-rows: 23% 25% minmax(0,1fr); min-width: 0; min-height: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; overflow: hidden; background: linear-gradient(180deg,#112b3e,#0b2030); }
.tx-position { grid-column: 1; grid-row: 1; display: grid; place-items: center; font-size: clamp(13px, 1.45vw, 26px); font-weight: 950; }.jersey-white{background:#f1f3f4;color:#07121b}.jersey-red{background:#d70d1b}.jersey-green{background:#0b8f2d}.jersey-blue{background:#1474d4}.jersey-yellow{background:#f1ce19;color:#07121b}.jersey-black{background:#111;color:#777}
.tx-athlete-main { display: contents; }
.tx-athlete-name { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 7%; border-bottom: 1px solid rgba(255,255,255,.13); }.tx-athlete-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(7px, .72vw, 13px); }.tx-athlete-name small { font-size: clamp(5px,.48vw,9px); color:#b7c8d2; font-weight:800; }
.tx-waves { grid-column: 1 / -1; grid-row: 3; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: rgba(8,189,232,.65) transparent; }
.tx-wave { position: relative; flex: 0 0 29px; width: 100%; min-height: 29px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; color: #e7f3f7; background: rgba(255,255,255,.06); cursor: pointer; }
.tx-wave span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: .12; font-size: 26px; font-weight: 950; line-height: 1; }
.tx-wave b { position: relative; z-index: 1; font-size: clamp(8px,.68vw,12px); }
.tx-wave-util { color: #35ed65; border-color: rgba(53,237,101,.6); background: rgba(15,117,48,.2); }
.tx-wave-trocada { color: #ff5c63; border-color: rgba(255,63,72,.68); background: rgba(142,15,25,.24); }
.tx-wave-outra { color: #b6c4ca; }
.tx-athlete-summary { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,1fr); border-block: 1px solid rgba(255,255,255,.16); }
.tx-athlete-summary > div { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,.1); }
.tx-athlete-summary > div:first-child { border-left: 0; }
.tx-athlete-summary small { color: #9ec0cf; font-size: clamp(4px,.36vw,7px); font-weight: 900; white-space: nowrap; }
.tx-athlete-summary b { color: #35ed65; font-size: clamp(8px,.68vw,12px); }
.tx-athlete-summary .tx-total strong { color: #fff; font-size: clamp(10px,.92vw,17px); }
.tx-athlete-summary .tx-total small { color: var(--cyan); }
.tx-athlete-summary .tx-need strong { color: #ffd44d; font-size: clamp(9px,.78vw,14px); }
.tx-athlete-summary .tx-need small { color: #ffd44d; }
.tx-wave-detail { position: absolute; z-index: 8; left: 50%; top: 34%; width: min(300px,82%); transform: translateX(-50%); padding: 16px; border: 1px solid var(--cyan); border-radius: 9px; background: rgba(3,20,31,.98); box-shadow: 0 10px 26px rgba(0,0,0,.62); text-align: center; }
.tx-wave-detail > button { position: absolute; right: 7px; top: 7px; width: 22px; height: 22px; border: 0; border-radius: 50%; color: #fff; background: #d91f29; font-size: 15px; line-height: 1; cursor: pointer; }
.tx-wave-detail > strong { display: block; padding: 0 24px; font-size: 12px; text-transform: uppercase; }
.tx-wave-detail > span { display: block; margin-top: 3px; color: var(--cyan); font-size: 11px; font-weight: 950; }
.tx-wave-detail > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(38px,1fr)); gap: 4px; margin-top: 10px; }
.tx-wave-detail p { margin: 0; padding: 5px 3px; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; background: rgba(255,255,255,.05); }
.tx-wave-detail p small,.tx-wave-detail p b { display: block; }.tx-wave-detail p small { color: #9ec0cf; font-size: 7px; }.tx-wave-detail p b { font-size: 13px; }
.tx-sponsors { height: 15%; display: grid; grid-template-columns: repeat(6, 1fr); align-items: stretch; overflow: hidden; border: 1px solid rgba(10,188,226,.45); border-radius: 12px; background: rgba(5,25,36,.91); }
.tx-sponsors div,.tx-sponsors a { display:grid;place-items:center;padding:5%;border-right:1px solid rgba(255,255,255,.15);color:#d7e2e6;font-size:clamp(7px,.7vw,13px);font-weight:900;text-align:center;text-decoration:none; }.tx-sponsors div:last-child,.tx-sponsors a:last-child{border-right:0}.tx-sponsors img{max-width:100%;max-height:58px;object-fit:contain}
@media (max-width: 760px) { .tx-shell { height:auto; min-height:100vh; }.tx-header{height:auto;grid-template-columns:25% 75%;}.tx-nav{grid-column:1/-1;height:58px;margin:8px 0}.tx-content{height:auto;grid-template-columns:1fr}.tx-video{aspect-ratio:16/9}.tx-score{min-height:420px}.tx-sponsors{height:auto;min-height:90px;grid-template-columns:repeat(3,1fr)} }
html,body,#root{margin:0;min-height:100%;width:100%;background:#020617;color:white;font-family:Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid #08bde8;outline-offset:2px}
.min-h-screen{min-height:100vh}.grid{display:grid}.place-items-center{place-items:center}.p-6{padding:24px}.text-center{text-align:center}.font-bold,.font-black{font-weight:800}.mx-auto{margin-left:auto;margin-right:auto}.mb-3{margin-bottom:12px}.text-cyan-400{color:#22d3ee}.w-full{width:100%}.max-w-2xl{max-width:672px}.flex{display:flex}.items-center{align-items:center}.gap-3{gap:12px}.mb-6{margin-bottom:24px}.text-2xl{font-size:24px}.text-sm{font-size:14px}.text-slate-400{color:#94a3b8}.rounded-xl{border-radius:12px}.border{border:1px solid #334155}.bg-slate-900{background:#0f172a}.p-4{padding:16px}.block{display:block}a{color:inherit;text-decoration:none}
.tx-video>video,.tx-video>img{object-fit:contain;background:black}
@media(max-width:760px){.tx-score{height:540px}.tx-athlete-name strong{white-space:normal;overflow-wrap:anywhere}.tx-athlete-summary small{font-size:7px}.tx-athlete-summary b,.tx-wave b{font-size:12px}.tx-athlete-summary .tx-total strong,.tx-athlete-summary .tx-need strong{font-size:14px}}