/* TV mode: 16:9 landscape layout, all in rem; 1rem ≈ 20px at 1920×1080. */
html { font-size: min(1.04vw, 1.85vh); }
html, body { height: 100%; overflow: hidden; }
body { font-size: 1rem; zoom: 1; background: radial-gradient(ellipse 80% 60% at 50% 0%, #135c41 0%, var(--felt-dark) 55%, #06261b 100%); }
body.idle { cursor: none; }
.conn { font-size: .8rem; padding: .3rem .8rem; }

/* Pairing */
.pairing { height: 100%; display: grid; place-items: center; position: relative; }
/* Our logo and name go home */
.pairing .home { position: absolute; top: 1.6rem; left: 2rem; display: flex; align-items: center; gap: .8rem; color: var(--ivory); text-decoration: none; }
.pairing .home .ball { --size: 3rem; }
.pairing .home b { font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; }
.pair-card { text-align: center; display: grid; gap: 1.2rem; justify-items: center; padding: 3rem 4rem; border-radius: 2rem; background: rgba(11,19,17,.55); border: .5rem solid var(--rail); box-shadow: inset 0 0 0 .15rem var(--rail-hi), 0 2rem 4rem rgba(0,0,0,.5); }
.pairing h1 { font-family: var(--f-display); font-weight: 400; font-size: 4.5rem; margin: 0; line-height: 1; }
.pairing p { margin: 0; font-size: 1.4rem; color: #cfe3d8; }
.pair-balls { display: flex; gap: .6rem; }
.pair-balls .ball { --size: 3rem; }
#pairForm { display: flex; gap: 1rem; }
#codeIn { width: 16rem; font-family: var(--f-display); font-size: 3rem; letter-spacing: .2em; text-align: center; text-transform: uppercase; background: var(--ink); border: .15rem solid var(--line); border-radius: 1rem; padding: .4rem .6rem; color: var(--brass); }
#codeIn:focus { border-color: var(--brass); outline: none; }
#pairForm button { font-size: 1.6rem; font-weight: 700; padding: 0 2rem; border-radius: 1rem; border: 0; background: var(--brass); color: #1b1305; }
.perr { color: #ffc2b8 !important; min-height: 1.6rem; }
/* Two ways to link: the TV's QR code (scanned by the organizer's phone), or the phone's code typed here */
/* The card is taller with the QR code: a bit more compact so it clears the logo above. */
.pair-card:has(.pair-ways) { padding: 2rem 4rem; gap: 1rem; }
.pairing h1:has(+ .pair-ways) { font-size: 3.6rem; }
.pair-ways { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.pair-ways .way { display: grid; gap: 1rem; justify-items: center; max-width: 30rem; }
.pair-ways .wlabel { font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 1.2rem; color: var(--brass); }
.pair-ways .or { font-family: var(--f-display); font-size: 2rem; color: #7f9a8f; align-self: center; }
.qr { width: 15rem; height: 15rem; border-radius: 1rem; overflow: hidden; background: #fff; display: grid; place-items: center; }
.qr svg { width: 100%; height: 100%; display: block; }
.qr:empty::after { content: "…"; color: #333; font-size: 3rem; }
.tvcode { font-family: var(--f-display); font-weight: 400; color: var(--brass); letter-spacing: .15em; font-size: 1.8rem; }

/* Screen */
.screen { height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); padding: 1.2rem 1.6rem .8rem; gap: 1rem; }
.tvbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tvbar .tl { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.tvbar .tt { min-width: 0; }
/* Store branding of the tournament's account */
.brand { display: flex; align-items: center; gap: .8rem; flex: none; max-width: 30rem; padding-right: 1.2rem; margin-right: .2rem; border-right: .15rem solid var(--line); }
.brand img { height: 4.2rem; width: auto; max-width: 12rem; object-fit: contain; display: block; }
.brand span { font-family: var(--f-display); font-size: 1.7rem; line-height: 1.05; color: var(--brass); overflow-wrap: anywhere; min-width: 0; }
.tvbar .tl .ball { --size: 3.6rem; }
/* Names wrap (tv.js shrinks them to fit two lines); they are never cut. */
.tvbar h1 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 2.6rem; line-height: 1.05; overflow-wrap: anywhere; }
.tvbar p { margin: .3rem 0 0; font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: #cfe3d8; font-size: 1.1rem; line-height: 1.2; }
.tvbar .tr { display: flex; align-items: center; gap: 1rem; flex: none; }
.clock { font-family: var(--f-display); font-size: 1.8rem; color: #cfe3d8; }
/* Players (left) · bracket (center) · matches with scores (right) */
.tvgrid { display: grid; grid-template-columns: 1fr 26rem; gap: 1.2rem; min-height: 0; }
.tvgrid.with-plist { grid-template-columns: 16rem minmax(0, 1fr) 24rem; }
.tvgrid { grid-template-columns: minmax(0, 1fr) 26rem; }
.stage { position: relative; min-height: 0; border-radius: 1.4rem; padding: 1.2rem 1.4rem; background: rgba(6,20,15,.55); border: .4rem solid var(--rail); box-shadow: inset 0 0 0 .12rem var(--rail-hi), inset 0 0 3rem rgba(0,0,0,.4); overflow: hidden; display: flex; flex-direction: column; }
.stage .bracket { flex: 1; min-height: 0; --gap: 2.2rem; --h-size: 1rem; }
.stage .m { background: rgba(11,19,17,.92); border-radius: .7rem; }
.stage .bracket .pair.join::after, .stage .bracket .pair.join .slot::after, .stage .bracket .col.fed .slot::before { border-color: rgba(207,227,216,.35); }
.stage-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.stage-title h2 { margin: 0; font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 1.3rem; color: var(--brass); }
.stage-title span { color: #cfe3d8; font-size: 1.1rem; }

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; align-content: start; overflow: hidden; }
.roster div { background: rgba(11,19,17,.85); border: 1px solid var(--line); border-radius: .7rem; padding: .5rem .8rem; font-size: 1.3rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waiting { margin: auto; text-align: center; }
.waiting b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 3rem; }
.waiting span { font-size: 1.4rem; color: #cfe3d8; }

.side { display: flex; flex-direction: column; gap: 1rem; min-height: 0; overflow: hidden; }
.box { background: rgba(11,19,17,.88); border: 1px solid var(--line); border-radius: 1.1rem; padding: .9rem 1rem; }
.box h2 { margin: 0 0 .6rem; font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 1.05rem; color: var(--brass); }
.box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tbl { display: grid; grid-template-columns: 3.2rem 1fr; gap: .8rem; align-items: center; }
.tbl .n { width: 3.2rem; height: 3.2rem; border-radius: .7rem; background: var(--felt); border: .2rem solid var(--rail-hi); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.6rem; }
.tbl .who { min-width: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.tbl .who div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl .who small { display: block; font-size: .85rem; color: var(--muted); font-weight: 600; font-family: var(--f-label); letter-spacing: .08em; text-transform: uppercase; }
.vs { color: var(--muted); font-weight: 500; font-size: .9em; }
.res { display: flex; justify-content: space-between; gap: .6rem; font-size: 1.15rem; }
.res .w { font-weight: 700; color: #ffe5a3; min-width: 0; overflow-wrap: anywhere; }
.res .s { font-family: var(--f-display); flex: none; }
.res .l { color: var(--muted); font-size: .95rem; display: block; }
.box .none { color: var(--muted); font-size: 1.1rem; }
.box.champ { text-align: center; border-color: var(--brass); background: radial-gradient(ellipse at 50% 0, rgba(216,178,90,.35), transparent 70%), rgba(11,19,17,.9); }
.box.champ b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 2.2rem; color: #ffe5a3; line-height: 1.1; overflow-wrap: anywhere; }

.tvfoot { display: grid; gap: .4rem; min-width: 0; }
.tvfoot .dots { display: flex; justify-content: center; gap: .6rem; min-height: .8rem; align-items: center; color: #cfe3d8; font-size: 1rem; }
.tvfoot .promos { --promo-h: 3.6rem; border-radius: 1rem; background: rgba(243,237,224,.94); }

/* Matches column */
.mlist { gap: .45rem !important; }
.mc { background: rgba(26,40,36,.9); border: 1px solid var(--line); border-radius: .7rem; padding: .35rem .6rem .4rem; }
.mc.live { border-color: rgba(95,211,154,.55); }
.mc.s-done { opacity: .92; }
.mc .mh { display: flex; justify-content: space-between; font-family: var(--f-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; color: var(--muted); }
.mc.live .tag { color: var(--ok); }
.mr { display: flex; align-items: center; gap: .5rem; font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.mr .mn { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.mr .ms { font-family: var(--f-display); font-weight: 400; min-width: 1.4rem; text-align: right; }
.mr.w { color: #ffe5a3; }
.mr.l { color: var(--muted); font-weight: 500; }
.mc.bye { border-style: dashed; opacity: .85; }
.res .wi { margin-left: auto; }
.box.champ b .wi { width: .9em; height: .9em; margin-right: .3rem; vertical-align: -.05em; }
.dot { width: .8rem; height: .8rem; border-radius: 50%; background: rgba(255,255,255,.25); }
.dot.on { background: var(--brass); }

/* Draw and champion animations */
.fx { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto 1fr; padding: 2.4rem 3rem; gap: 1.6rem;
  background: radial-gradient(ellipse at 50% 40%, var(--felt-hi), var(--felt) 45%, var(--felt-dark)); border: 1.2rem solid var(--rail); box-shadow: inset 0 0 0 .3rem var(--rail-hi), inset 0 0 6rem rgba(0,0,0,.5); }
.fx h2 { margin: 0; text-align: center; font-family: var(--f-display); font-weight: 400; font-size: 4rem; line-height: 1; text-shadow: 0 .3rem 1rem rgba(0,0,0,.4); }
.fx h2 small { display: block; font-family: var(--f-label); font-size: 1.4rem; letter-spacing: .2em; text-transform: uppercase; color: #cfe3d8; margin-top: .6rem; }
.fx.out { opacity: 0; transition: opacity .6s; }
.shuffle { display: flex; justify-content: center; align-items: center; gap: 1rem; }
.shuffle .ball { --size: 5rem; animation: hop .5s ease-in-out infinite alternate; }
.shuffle .ball:nth-child(2n) { animation-delay: .25s; }
@keyframes hop { to { transform: translateY(-1.6rem) rotate(40deg); } }
.pairs { display: grid; gap: .8rem 1.4rem; align-content: center; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.dp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; background: rgba(11,19,17,.85); border: 1px solid rgba(207,227,216,.25); border-radius: 1rem; padding: .6rem 1rem; font-size: var(--dp, 1.6rem); font-weight: 700; }
.dp .a, .dp .b { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.dp .b { justify-content: flex-end; text-align: right; }
.dp .a span, .dp .b span { min-width: 0; overflow-wrap: anywhere; line-height: 1.1; }
.dp .ball { --size: 1.6em; }
.dp .x { font-family: var(--f-label); color: var(--brass); letter-spacing: .1em; font-size: .8em; }
.dp .bye { color: var(--muted); font-style: italic; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .dp { animation: dpin .45s cubic-bezier(.2,1.2,.4,1) both; }
  .dp .a .ball { animation: rollL .6s ease-out both; }
  .dp .b .ball { animation: rollR .6s ease-out both; }
  .champfx b { animation: pop .8s cubic-bezier(.2,1.4,.4,1) both; }
}
@keyframes dpin { from { opacity: 0; transform: scale(.85); } }
@keyframes rollL { from { transform: translateX(-6rem) rotate(-360deg); } }
@keyframes rollR { from { transform: translateX(6rem) rotate(360deg); } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.champfx { place-items: center; grid-template-rows: 1fr; text-align: center; background: radial-gradient(ellipse at 50% 35%, #173a2d, #08130f 60%, #030806); }
.champfx .inner { display: grid; gap: 1.4rem; justify-items: center; }
.champfx .ball { --size: 9rem; }
.champfx span { font-family: var(--f-label); font-size: 2rem; letter-spacing: .3em; text-transform: uppercase; color: #cfe3d8; }
.champfx b { font-family: var(--f-display); font-weight: 400; font-size: 7rem; line-height: 1; color: #ffe5a3; text-shadow: 0 .4rem 2rem rgba(0,0,0,.5); }
#codeIn::placeholder { font-size: 2rem; letter-spacing: .12em; color: #5f7670; }

/* Player list next to the bracket */
.plist { min-height: 0; display: flex; flex-direction: column; background: rgba(11,19,17,.88); border: 1px solid var(--line); border-radius: 1.1rem; padding: .9rem 1rem; overflow: hidden; }
.plist .ph { display: flex; justify-content: space-between; align-items: baseline; }
.plist h2 { margin: 0; font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 1.05rem; color: var(--brass); }
.plist .ph b { font-family: var(--f-display); font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--ivory); }
.plist .pin { margin: .2rem 0 .7rem; color: var(--muted); font-size: .95rem; font-family: var(--f-label); letter-spacing: .08em; text-transform: uppercase; }
.plist ol { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; column-gap: .8rem; overflow: hidden; }
.plist li { break-inside: avoid; display: flex; align-items: baseline; gap: .4em; padding: .14em 0; font-weight: 600; line-height: 1.15; border-bottom: 1px solid rgba(42,59,54,.6); }
.plist li .pn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.plist .pin { display: flex; justify-content: space-between; gap: .5rem; }
/* Win percentage (racks won) to the right of the name */
.pct { flex: none; font-family: var(--f-label); font-weight: 700; font-size: .85em; letter-spacing: .02em; color: var(--chalk); font-variant-numeric: tabular-nums; text-decoration: none; display: inline-block; }
.plist li.out { color: var(--muted); font-weight: 500; }
.plist li.out .pn { text-decoration: line-through; text-decoration-color: rgba(148,170,161,.6); }
.plist li.out .pct { color: #6f8a80; }
.plist li.noshow { color: var(--muted); font-weight: 500; }
.plist li.late { color: var(--muted); }
.plist li.late::after { content: "Waiting"; flex: none; margin-left: auto; padding-left: .4em; font-family: var(--f-label); font-weight: 700; font-size: .7em; letter-spacing: .06em; text-transform: uppercase; color: var(--warn); }
.plist li.noshow::after { content: "No-show"; flex: none; margin-left: auto; padding-left: .4em; font-family: var(--f-label); font-weight: 700; font-size: .7em; letter-spacing: .06em; text-transform: uppercase; color: var(--danger); }
.roster div.away { opacity: .45; }
.plist li.champ { color: #ffe5a3; }
.plist li.champ .pn::before { content: "★ "; }
.plist li.silver { color: #e4e9ec; }
.plist li.bronze { color: #e3a86a; }
.stage .bracket.free .col-body { justify-content: flex-start; gap: .3rem; }
.stage .bracket.free .pair { flex: 0 1 auto; }

/* Spinning wheel draw */
.wheelfx { display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: center; min-height: 0; }
.wheelbox { position: relative; width: min(62vh, 38vw); aspect-ratio: 1; }
.wheel { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.5), 0 0 0 .6rem var(--rail), 0 0 0 .8rem var(--rail-hi); }
.wheel text { text-anchor: middle; dominant-baseline: central; font-family: var(--f-body); font-weight: 700; }
.wheel text.hub { fill: #121212; font-family: var(--f-display); }
.wheel g.hit path, .wheel g.hit circle { filter: brightness(1.35); stroke: #fff; stroke-width: 1.5; }
.pointer { position: absolute; z-index: 2; left: 50%; top: -1.6rem; transform: translateX(-50%); width: 0; height: 0; border-left: 1.4rem solid transparent; border-right: 1.4rem solid transparent; border-top: 3rem solid var(--ivory); filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.5)); }
.wheelbox.done .wheel { opacity: .35; transition: opacity .6s; }
.drawside { display: grid; gap: 1.2rem; align-content: center; min-height: 0; }
.picked { text-align: center; min-height: 6rem; transition: opacity .7s ease, transform .7s ease; }
.picked b { font-family: var(--f-display); font-weight: 400; font-size: 4.4rem; line-height: 1.2; color: #ffe5a3; text-shadow: 0 .3rem 1rem rgba(0,0,0,.5); }
.picked small { display: block; font-family: var(--f-label); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; font-size: 1.4rem; color: var(--brass); }
/* The picked name goes transparent and drifts up before the wheel spins again */
.picked.gone { opacity: 0; transform: translateY(-1.2rem) scale(1.08); }

/* Bye pop-up */
.byefx { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(6,20,15,.55); backdrop-filter: blur(.3rem); }
.byefx .inner { text-align: center; display: grid; gap: .8rem; justify-items: center; padding: 3rem 5rem; border-radius: 2rem; background: radial-gradient(ellipse at 50% 0, rgba(216,178,90,.35), transparent 70%), rgba(11,19,17,.96); border: .5rem solid var(--brass); box-shadow: 0 2rem 5rem rgba(0,0,0,.6); max-width: 80vw; }
.byefx .tag { font-family: var(--f-display); font-size: 6rem; line-height: 1; color: var(--brass); letter-spacing: .05em; }
.byefx b { font-family: var(--f-display); font-weight: 400; font-size: 5rem; line-height: 1.05; color: #ffe5a3; overflow-wrap: anywhere; }
.byefx p { margin: 0; font-size: 2rem; color: #cfe3d8; }
.byefx small { font-size: 1.2rem; color: var(--muted); }
.byefx.out { opacity: 0; transition: opacity .5s; }
@media (prefers-reduced-motion: no-preference) { .byefx .inner { animation: pop .6s cubic-bezier(.2,1.4,.4,1) both; } }
.dp.wait { opacity: .6; }
.dp .q { color: var(--muted); font-family: var(--f-display); font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .picked.pop b { display: inline-block; animation: pop .45s cubic-bezier(.2,1.4,.4,1) both; }
  .dp .in > span { animation: dpin .4s ease-out both; }
}

/* Champion celebration and podium */
canvas.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.stage canvas.confetti { z-index: 1; }
.champfx .inner { position: relative; z-index: 4; }
.champfx .wi { width: 10rem; height: 10rem; }
.champfx .tn { font-size: 1.4rem !important; letter-spacing: .15em; }
@media (prefers-reduced-motion: no-preference) { .champfx .wi { animation: pop .9s cubic-bezier(.2,1.4,.4,1) both, glow 1.6s ease-in-out .9s infinite alternate; } }
@keyframes glow { to { filter: drop-shadow(0 0 1.6rem rgba(245,197,66,.9)); } }
.podium { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.2rem; min-height: 0; }
.podium h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 3rem; line-height: 1; color: #ffe5a3; text-shadow: 0 .3rem 1rem rgba(0,0,0,.5); }
.podium .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 15rem)); gap: 1.4rem; align-items: end; }
.podium .step { display: grid; justify-items: center; gap: .5rem; min-width: 0; text-align: center; }
.podium .step b { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; max-width: 100%; overflow-wrap: anywhere; }
.podium .step .wi { width: 5rem; height: 5rem; }
.podium .step.p1 .wi { width: 7rem; height: 7rem; }
.podium .step.p1 b { font-size: 2.6rem; color: #ffe5a3; }
.podium .block { width: 100%; border-radius: .9rem .9rem 0 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 3.4rem; color: rgba(11,19,17,.75); box-shadow: inset 0 -.6rem 1rem rgba(0,0,0,.25); }
.podium .p1 .block { height: 13rem; background: linear-gradient(#f7d46a, #c99a2e); }
.podium .p2 .block { height: 9rem; background: linear-gradient(#e7ecef, #9aa5ad); }
.podium .p3 .block { height: 6.5rem; background: linear-gradient(#e3a86a, #8f5523); }
.podium .fourth { margin: 0; font-size: 1.4rem; color: #cfe3d8; }
.podium .fourth b { color: var(--ivory); }
@media (prefers-reduced-motion: no-preference) {
  .podium .step { animation: rise .8s cubic-bezier(.2,1.2,.4,1) both; }
  .podium .step.p2 { animation-delay: .25s; }
  .podium .step.p1 { animation-delay: .5s; }
  .podium .step.p1 .wi { animation: glow 1.6s ease-in-out 1.3s infinite alternate; }
}
@keyframes rise { from { opacity: 0; transform: translateY(4rem); } }
.podl { margin-top: .8rem !important; gap: .35rem !important; text-align: left; }
.podl li { display: grid; grid-template-columns: 1.6rem 2.6rem 1fr; align-items: center; gap: .4rem; font-size: 1.15rem; }
.podl li span:not(.wi) { font-family: var(--f-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-size: .9rem; }
.podl li b { font-family: var(--f-body) !important; font-weight: 700; font-size: 1.15rem !important; color: var(--ivory) !important; min-width: 0; overflow-wrap: anywhere; }
.podl .wi { width: 1.4rem; height: 1.4rem; }

/* Bracket on the TV: whole names, wrapped */
.stage .m .nm { white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
.stage .bracket.measure .m .nm { overflow-wrap: normal; }


/* Split winners: everyone on the gold step */
.podium.split h2 small { display: block; font-family: var(--f-label); font-size: 1.4rem; letter-spacing: .3em; text-transform: uppercase; color: #cfe3d8; margin-top: .5rem; text-align: center; }
.podium .splitrow { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 1.4rem; align-items: end; width: min(100%, 64rem); }
.podium .splitrow.n2 { --n: 2; } .podium .splitrow.n3 { --n: 3; } .podium .splitrow.n4 { --n: 4; }
.podium.split .step.p1 .wi { width: 5.5rem; height: 5.5rem; }
.podium.split .step.p1 b { font-size: 2.6rem; overflow-wrap: break-word; }
.podium .splitrow.n3 .step.p1 b { font-size: 2.1rem; }
.podium .splitrow.n4 .step.p1 b { font-size: 1.75rem; }
.podium.split > .block { width: min(100%, 60rem); height: 6rem; border-radius: .9rem .9rem 0 0; background: linear-gradient(#f7d46a, #c99a2e); }
.podium .fourth .wi { width: 1.3em; height: 1.3em; vertical-align: -.2em; }
.box.champ b.sw { font-size: 1.7rem; margin-top: .2rem; }
.box.champ b.sw .wi { width: .9em; height: .9em; margin-right: .3rem; vertical-align: -.05em; }
.champfx .sws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 3rem; max-width: 90vw; }
.champfx .sws.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.champfx .sws b { font-size: 4.6rem; overflow-wrap: anywhere; }
.champfx .sws.n2 b { font-size: 5.6rem; }
.champfx b { overflow-wrap: anywhere; max-width: 90vw; }

/* Phones, tablets and portrait screens: one column that scrolls. */
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  html { font-size: clamp(10px, 2.6vw, 18px); }
  html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
  .screen { height: auto; min-height: 100vh; padding: .8rem; gap: .8rem; grid-template-rows: auto auto auto; }
  .tvbar { flex-wrap: wrap; }
  .tvbar .tl { flex-wrap: wrap; }
  .brand { border-right: 0; padding-right: 0; max-width: 100%; }
  .tvbar .tr { margin-left: auto; }
  .tvgrid, .tvgrid.with-plist { grid-template-columns: minmax(0, 1fr); }
  .stage { order: 1; min-height: 70vh; height: 70vh; overflow-x: auto; }
  .stage .bracket { min-width: max(100%, 34rem); }
  .side { order: 2; overflow: visible; }
  .plist { order: 3; overflow: visible; }
  .plist ol { overflow: visible; column-count: 2 !important; font-size: 1.2rem !important; }
  .podium .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: .6rem; }
  .podium .splitrow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100%; }
  .pair-card { padding: 2rem 1.2rem; max-width: calc(100vw - 2rem); }
  #pairForm { flex-wrap: wrap; justify-content: center; }
  #codeIn { width: min(16rem, 70vw); }
  .pair-ways { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .qr { width: min(16rem, 60vw); height: min(16rem, 60vw); }
  .fx { padding: 1.2rem; border-width: .6rem; overflow-y: auto; }
  .fx h2 { font-size: 2.6rem; }
  .wheelfx { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.2rem; }
  .wheelbox { width: min(80vw, 46vh); }
  .drawside { width: 100%; }
  .pairs { --cols: 1 !important; }
  .picked b { font-size: 3rem; }
  .champfx b { font-size: 4rem; }
  .champfx .sws, .champfx .sws.n3 { grid-template-columns: minmax(0, 1fr); }
  .champfx .sws b, .champfx .sws.n2 b { font-size: 3rem; }
  .byefx .inner { padding: 2rem 1.4rem; }
  .pairing { min-height: 100vh; padding: 5.5rem 0 2rem; }
}

/* Shot clock: a small card in the header, left of the time, as tall as the logo. Its size
   is fixed (rem follows the screen size), so a new shooter, label or FOUL never changes it;
   long text is cut with …. The store and tournament names next to it shrink to fit
   (tv.js fitHeader). */
.shotclock { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 5.4rem; align-items: center; gap: .1rem .9rem; height: 4.6rem; width: 21rem; max-width: 40vw;
  padding: .2rem 1.1rem .5rem; border-radius: 1rem; background: #08100d; border: .22rem solid var(--felt-hi); overflow: hidden; flex: none; }
.shotclock[hidden] { display: none; }
.shotclock .sc-info { display: grid; min-width: 0; line-height: 1.1; }
.shotclock .sc-l { font-family: var(--f-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9fbcae; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shotclock .sc-p { font-weight: 700; font-size: 1.25rem; color: var(--ivory); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.shotclock .sc-x { font-family: var(--f-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; color: var(--ok); }
.shotclock .sc-x.used { color: var(--muted); text-decoration: line-through; }
.shotclock .sc-n { font-family: var(--f-display); font-size: 3.4rem; line-height: 1; min-width: 0; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; color: var(--ivory); }
.shotclock .sc-bar { position: absolute; left: .9rem; right: .9rem; bottom: .3rem; height: .3rem; border-radius: 1rem; background: rgba(255,255,255,.12); overflow: hidden; }
.shotclock .sc-bar i { display: block; height: 100%; background: var(--ok); border-radius: inherit; transition: width .1s linear; }
.shotclock[data-s="ready"] .sc-n, .shotclock[data-s="paused"] .sc-n { color: var(--muted); }
.shotclock[data-s="ready"] .sc-l::after { content: " · ready"; color: var(--brass); }
.shotclock[data-s="paused"] .sc-l::after { content: " · paused"; color: var(--warn); }
.shotclock[data-s="warn"] { border-color: var(--warn); }
.shotclock[data-s="warn"] .sc-n { color: var(--warn); }
.shotclock[data-s="warn"] .sc-bar i { background: var(--warn); }
.shotclock[data-s="red"], .shotclock[data-s="up"] { border-color: var(--danger); }
.shotclock[data-s="red"] .sc-n, .shotclock[data-s="up"] .sc-n { color: #ff6b5a; }
.shotclock[data-s="red"] .sc-bar i { background: var(--danger); }
.shotclock[data-s="up"] .sc-n { font-size: 1.7rem; }
.shotclock[data-s="up"] .sc-l::after { content: " · time foul"; color: #ff6b5a; }
@media (prefers-reduced-motion: no-preference) {
  .shotclock[data-s="red"] .sc-n { animation: tick 1s ease-out infinite; }
  .shotclock[data-s="up"] { animation: flash .5s steps(2) 6; }
}
@keyframes tick { from { transform: scale(1.12); } }
@keyframes flash { 50% { background: #5a1410; } }
/* "Extension" shows over the clock and fades quickly */
.shotclock .sc-ext { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.9rem; color: #1b1305;
  background: var(--brass); opacity: 0; pointer-events: none; }
.shotclock .sc-ext.show { animation: extfade 1.4s ease-out both; }
@keyframes extfade { 0% { opacity: 0; transform: scale(.8); } 12% { opacity: 1; transform: scale(1.05); } 45% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .shotclock .sc-ext.show { animation: extfade 1.4s steps(1) both; } }

/* Matches the organizer set: no wheel */
.pairs.own { align-content: center; padding: 0 4rem; }
.pairs.own .dp[hidden] { display: none !important; }
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .pairs.own { padding: 0; }
}