/* 🏁 LELZ KART – Rennstrecken-Look: Rot, Gelb, Zielflagge, Regenbogen */
:root { --red: #e8102e; --red2: #a3001a; --yellow: #ffd000; --blue: #0a7cff; --green: #2fd06b; --ink: #14101f; --card: #fff; --text: #1b1530; --muted: #6d6884;
  --rb: linear-gradient(90deg, #ff3b30, #ff9500, #ffd000, #34c759, #0a84ff, #5e5ce6, #bf5af2);
  --chk: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 14px 14px; --font: "Arial Rounded MT Bold", "SF Pro Rounded", ui-rounded, "Nunito", system-ui, -apple-system, sans-serif;
  --pop: cubic-bezier(.34, 1.56, .64, 1); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--ink); }
body { margin: 0; font-family: var(--font); color: var(--text); min-height: 100vh; background:
  radial-gradient(circle at 20% -10%, rgba(255, 208, 0, .35), transparent 40%), radial-gradient(circle at 110% 10%, rgba(10, 124, 255, .35), transparent 45%),
  linear-gradient(180deg, #ff2a44 0, var(--red) 180px, #f3f0fa 181px) no-repeat, #f3f0fa; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
/* Kopf */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgba(232, 16, 46, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; transform: skewX(-8deg); }
.logo b, .logo i { font-weight: 900; font-style: normal; font-size: 26px; letter-spacing: .02em; color: var(--yellow); -webkit-text-stroke: 1.5px #6b0010; paint-order: stroke fill; text-shadow: 0 3px 0 #6b0010; }
.logo i { color: #fff; }
.flag { width: 30px; height: 22px; border-radius: 4px; background: var(--chk); box-shadow: 0 0 0 2px #fff, 0 3px 0 2px #6b0010; animation: wave 1.6s ease-in-out infinite; }
.flag.big { width: 70px; height: 50px; }
@keyframes wave { 50% { transform: skewY(-6deg) translateY(-2px); } }
.me { display: flex; align-items: center; gap: 8px; border: 0; padding: 5px 12px 5px 5px; border-radius: 99px; background: rgba(255, 255, 255, .95); font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); max-width: 50vw; }
.me span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .me:not(:has(.av)) { padding: 8px 14px; }
main { max-width: 640px; margin: 0 auto; padding: 14px 14px calc(40px + env(safe-area-inset-bottom)); }
.load { display: grid; place-items: center; height: 60vh; }
/* Hero */
.hero, .thead { position: relative; overflow: hidden; margin: 4px 0 16px; padding: 22px 20px 20px; border-radius: 26px; color: #fff; background: linear-gradient(135deg, #2a1d5c, #14101f); box-shadow: 0 8px 0 rgba(0, 0, 0, .18), inset 0 0 0 3px rgba(255, 255, 255, .08); }
.hero::after, .thead::after { content: ""; position: absolute; right: -30px; top: -20px; width: 140px; height: 140px; background: var(--chk); opacity: .14; transform: rotate(18deg); border-radius: 18px; }
.rainbow { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--rb); background-size: 200% 100%; animation: rb 4s linear infinite; }
@keyframes rb { to { background-position: 200% 0; } }
.hero h1 { margin: 0; font-size: 34px; line-height: 1; font-weight: 900; transform: skewX(-8deg); text-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.hero h1 span { display: block; font-size: 18px; color: var(--yellow); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.hero p, .thead p { margin: 10px 0 0; color: #cfc8ef; font-weight: 700; }
.thead h1 { margin: 10px 0 0; font-size: 28px; font-weight: 900; transform: skewX(-6deg); text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.back { border: 0; background: none; color: #fff; font-weight: 800; padding: 4px 2px 10px; font-size: 15px; }
/* Pillen & Karten */
.tc-top { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; padding: 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, .16); color: inherit; }
.tcard .pill { background: #efeaf9; color: #4b4470; }
.pill.reg { background: var(--green) !important; color: #053b19 !important; } .pill.running { background: var(--yellow) !important; color: #4a3600 !important; animation: blink 1.4s infinite; } .pill.done { background: #d9d4ea !important; color: #4b4470 !important; }
@keyframes blink { 50% { filter: brightness(1.15); transform: scale(1.04); } }
.tcard { display: grid; gap: 6px; width: 100%; text-align: left; margin: 0 0 12px; padding: 16px; border: 0; border-radius: 22px; background: var(--card); box-shadow: 0 6px 0 #d8d1ea; transition: transform .2s var(--pop); }
.tcard:active { transform: translateY(4px); box-shadow: 0 2px 0 #d8d1ea; }
.tcard b { font-size: 22px; font-weight: 900; } .tcard small { color: var(--muted); font-weight: 700; } .tcard em { color: #11873f; font-style: normal; }
.tc-avs { display: flex; margin-top: 4px; } .tc-avs .av { margin-right: -8px; box-shadow: 0 0 0 2px #fff; } .more { align-self: center; margin-left: 14px; font-weight: 800; color: var(--muted); font-size: 13px; }
.box { margin: 0 0 16px; padding: 18px; border-radius: 24px; background: var(--card); box-shadow: 0 6px 0 #d8d1ea; }
.box h2 { margin: 0 0 12px; font-size: 19px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.box.mine { background: linear-gradient(160deg, #fff7cc, #fff); box-shadow: 0 6px 0 #f0d36a; }
.box.adm { background: #1f1838; color: #fff; box-shadow: 0 6px 0 #0d0a18; } .box.adm .muted { color: #a9a2c9; }
.cnt { margin-left: auto; min-width: 30px; height: 30px; padding: 0 8px; display: grid; place-items: center; border-radius: 99px; background: var(--red); color: #fff; font-size: 15px; }
.h { margin: 22px 4px 10px; font-size: 19px; font-weight: 900; }
.muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; }
.empty { text-align: center; padding: 30px 20px; margin-bottom: 16px; border-radius: 24px; background: #fff; box-shadow: 0 6px 0 #d8d1ea; } .empty b { display: block; font-size: 19px; margin-top: 14px; } .empty p { color: var(--muted); margin: 6px 0 0; }
.rule { margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: #f3f0fa; color: #4b4470; font-size: 14px; line-height: 1.4; font-weight: 600; }
/* Buttons */
.btn { display: block; width: 100%; margin-top: 10px; padding: 14px 16px; border: 0; border-radius: 18px; font-weight: 900; font-size: 16px; background: #ece7f7; color: #2b2450; box-shadow: 0 5px 0 #cfc6e6; transition: transform .15s var(--pop); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #cfc6e6; }
.btn.go { background: linear-gradient(180deg, #ffe14d, var(--yellow)); color: #4a2a00; box-shadow: 0 5px 0 #c99a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.btn.go:active { box-shadow: 0 1px 0 #c99a00; } .btn.big { font-size: 19px; padding: 17px; } .btn:disabled { opacity: .45; }
.btn.plain { background: transparent; box-shadow: none; color: var(--muted); padding: 10px; } .box.adm .btn.plain { color: #cfc8ef; } .btn.danger { color: #ff5a6e !important; }
.btn.sm { width: auto; margin: 0; padding: 0 18px; } .row { display: flex; gap: 8px; } .row input { flex: 1; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
input { width: 100%; padding: 13px 14px; border: 2px solid #e2dcf2; border-radius: 14px; background: #fff; font-weight: 700; outline: none; color: var(--text); }
input:focus { border-color: var(--blue); } .box.adm input { background: #2c2450; border-color: #3d3466; color: #fff; }
/* Formular */
.create label { display: block; font-weight: 800; font-size: 13px; color: var(--muted); margin: 0 0 10px; } .create label input { margin-top: 5px; }
.lbl { font-weight: 800; font-size: 13px; color: var(--muted); margin: 6px 0 6px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; } .seg.small { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
.seg button { padding: 12px 8px; border: 2px solid #e2dcf2; border-radius: 14px; background: #fff; font-weight: 800; font-size: 14px; transition: all .15s var(--pop); }
.seg button.on { border-color: var(--red); background: #ffe9ec; color: var(--red2); transform: scale(1.02); }
/* Avatare */
.av { --s: 40px; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--c); color: #fff; font-weight: 900; font-size: calc(var(--s) * .42); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.av img { width: 100%; height: 100%; object-fit: cover; } .av.sm { --s: 30px; } .av.lg { --s: 64px; }
/* Startaufstellung */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-bottom: 6px; }
.racer { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 18px; background: #f6f3fc; animation: pop .5s var(--d) var(--pop) both; }
.racer b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.racer .x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #ffd5db; color: var(--red2); font-weight: 900; line-height: 1; }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(10px); } }
/* Fragezeichen-Box */
.ibox { width: 64px; height: 64px; margin: 0 auto; display: grid; place-items: center; border-radius: 14px; font-size: 38px; font-weight: 900; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .3);
  background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .1)), var(--rb); background-size: 100%, 300% 100%; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), 0 6px 0 rgba(0, 0, 0, .15); animation: ib 2s ease-in-out infinite, rb 3s linear infinite; }
.ibox.big { width: 110px; height: 110px; font-size: 64px; border-radius: 22px; } .ibox.roll { animation: none; } .ibox.roll span { animation: pop .12s ease-out; }
@keyframes ib { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
/* Turnierbaum */
.bracket { display: grid; grid-template-columns: repeat(var(--cols), minmax(210px, 1fr)); gap: 14px; overflow-x: auto; padding: 4px 4px 14px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; scroll-snap-type: x mandatory; }
.col { display: flex; flex-direction: column; scroll-snap-align: start; } .rname { text-align: center; font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.col:last-child .rname { color: var(--red); }
.ms { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
.match { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: 18px; background: #fff; text-align: left; box-shadow: 0 5px 0 #d8d1ea; transition: transform .15s var(--pop); }
.match:active { transform: translateY(3px); } .match.ready { box-shadow: 0 5px 0 #f0c000, 0 0 0 3px var(--yellow); animation: rdy 1.6s ease-in-out infinite; } .match.pending { opacity: .62; }
@keyframes rdy { 50% { box-shadow: 0 5px 0 #f0c000, 0 0 0 5px rgba(255, 208, 0, .55); } }
.mcup { display: grid; justify-items: center; align-content: center; height: 100%; min-height: 52px; border-radius: 12px; background: #f3f0fa; } .mcup span { font-size: 26px; } .mcup small { font-size: 9px; font-weight: 900; text-align: center; line-height: 1.1; color: var(--muted); }
.mcup .q { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #fff; font-size: 20px; font-weight: 900; background: var(--rb); background-size: 300%; animation: rb 3s linear infinite; }
.mrows { display: grid; gap: 4px; min-width: 0; } .mrow { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; } .mrow b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow em { font-style: normal; font-weight: 900; min-width: 26px; text-align: right; } .mrow.win b { color: #0e8a3c; } .mrow.win em { color: #0e8a3c; } .mrow.out { opacity: .45; } .mrow.out b { text-decoration: line-through; }
.mrow.tbd, .tbd { color: var(--muted); font-weight: 800; font-size: 13px; padding: 4px 2px; } .mrow em.free { font-size: 11px; color: var(--muted); }
.match.big { grid-template-columns: 70px 1fr; padding: 12px; margin-top: 4px; } .match.big .mcup span { font-size: 34px; } .match.big + .match.big { margin-top: 12px; }
/* Podium */
.podium { position: relative; overflow: hidden; background: linear-gradient(180deg, #2a1d5c, #14101f); color: #fff; box-shadow: 0 6px 0 #0d0a18; } .podium h2 { justify-content: center; font-size: 22px; } .podium .muted { color: #cfc8ef; }
.pods { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin-top: 10px; } .pod { display: grid; justify-items: center; gap: 6px; animation: pop .7s var(--pop) both; }
.pod b { font-size: 14px; text-align: center; } .pod .step { width: 100%; display: grid; place-items: center; border-radius: 14px 14px 4px 4px; font-size: 30px; font-weight: 900; color: #4a2a00; }
.p1 .step { height: 110px; background: linear-gradient(180deg, #ffe14d, #e0a800); } .p2 .step { height: 80px; background: linear-gradient(180deg, #f0f0f5, #a9a9ba); } .p3 .step { height: 60px; background: linear-gradient(180deg, #ffb27a, #c0672b); }
.p1 { animation-delay: .3s; } .p1 .av { box-shadow: 0 0 0 4px var(--yellow), 0 0 30px rgba(255, 208, 0, .6); }
.confetti { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, #ffd000 2px, transparent 3px), radial-gradient(circle, #ff3b30 2px, transparent 3px), radial-gradient(circle, #0a84ff 2px, transparent 3px), radial-gradient(circle, #34c759 2px, transparent 3px);
  background-size: 60px 60px, 80px 80px, 70px 70px, 90px 90px; background-position: 0 0, 20px 30px, 40px 10px, 10px 50px; animation: conf 6s linear infinite; opacity: .7; }
@keyframes conf { to { background-position: 0 600px, 20px 830px, 40px 710px, 10px 950px; } }
/* Hall of Fame */
.fame { display: grid; gap: 8px; } .fame button { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 0 10px; align-items: center; padding: 10px 14px; border: 0; border-radius: 18px; background: #fff; text-align: left; box-shadow: 0 4px 0 #d8d1ea; }
.fame button { display: flex; } .fame div { flex: 1; display: grid; min-width: 0; } .fame small { color: var(--muted); font-weight: 700; } .fame span { font-size: 24px; }
.tvlink { display: block; text-align: center; margin: 22px 0 0; color: var(--muted); font-weight: 800; text-decoration: none; }
/* Sheet */
#sheet { position: fixed; inset: 0; z-index: 50; pointer-events: none; } #sheet.open { pointer-events: auto; }
.sh-bg { position: absolute; inset: 0; background: rgba(20, 16, 31, .55); backdrop-filter: blur(4px); animation: fade .2s ease both; }
.sh { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; margin: 0 auto; max-width: 640px; padding: 16px 18px calc(24px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: #fff; animation: up .35s var(--pop) both; }
@keyframes up { from { transform: translateY(100%); } } @keyframes fade { from { opacity: 0; } }
.sh-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .sh-h b { font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.sh-h button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f0ecf8; font-size: 16px; }
.vs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 6px 0 14px; } .vs > div { display: grid; justify-items: center; gap: 4px; max-width: 90px; } .vs b { font-size: 14px; text-align: center; }
.vs i { font-style: normal; font-weight: 900; font-size: 18px; color: var(--red); transform: skewX(-10deg); } .vs.one { flex-direction: column; } .vs.one b { font-size: 20px; }
.cupbox { display: grid; place-items: center; min-height: 130px; margin: 6px 0 4px; } .cupbox.reveal .cup { animation: pop .6s var(--pop); }
.cup { display: grid; justify-items: center; gap: 4px; padding: 16px 20px; width: 100%; border-radius: 22px; background: linear-gradient(160deg, #fff7cc, #ffe680); box-shadow: 0 6px 0 #e0b800; }
.cup > span { font-size: 54px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .15)); } .cup b { font-size: 24px; font-weight: 900; transform: skewX(-6deg); color: #6a3d00; }
.cup ol { margin: 6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; counter-reset: t; }
.cup li { counter-increment: t; padding: 7px 9px; border-radius: 12px; background: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 800; color: #5a4300; } .cup li::before { content: counter(t) ". "; color: var(--red); }
.sh h3 { margin: 18px 0 4px; text-align: center; font-size: 17px; font-weight: 900; }
.pts { display: grid; gap: 8px; margin-top: 10px; } .pts label { display: grid; grid-template-columns: auto 1fr 96px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 16px; background: #f6f3fc; }
.pts input { text-align: center; font-size: 22px; font-weight: 900; padding: 8px; }
.tie { margin-top: 12px; padding: 14px; border-radius: 18px; background: #fff3cd; text-align: center; } .tie p { margin: 4px 0 6px; font-size: 14px; } .tiebtns { display: grid; gap: 6px; } .tiebtns .btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--text); margin: 0; }
.res { display: grid; gap: 6px; margin-top: 8px; } .res > div { display: grid; grid-template-columns: 26px auto 1fr auto auto; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 16px; background: #f6f3fc; }
.res span { font-weight: 900; color: var(--muted); } .res em { font-style: normal; font-weight: 900; } .res i { font-style: normal; font-weight: 900; color: #0e8a3c; font-size: 13px; } .res .win { background: #e3f9ea; }
.login .ulist { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; margin: 10px 0; } .ulist button { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-radius: 14px; background: #f6f3fc; text-align: left; font-weight: 800; }
.login form { display: grid; gap: 4px; }
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 99; transform: translate(-50%, 140%); padding: 12px 18px; border-radius: 99px; background: #14101f; color: #fff; font-weight: 800; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: transform .35s var(--pop); max-width: 90vw; text-align: center; }
#toast.show { transform: translate(-50%, 0); } #toast.bad { background: var(--red); }
/* ---------- TV ---------- */
body.tv { overflow: hidden; height: 100vh; background: radial-gradient(circle at 15% 0, rgba(255, 208, 0, .25), transparent 40%), radial-gradient(circle at 100% 100%, rgba(10, 124, 255, .3), transparent 45%), linear-gradient(160deg, #2a1d5c, #14101f); color: #fff; }
.tvw { height: 100vh; display: grid; grid-template-rows: auto 1fr; padding: 3vh 3vw; gap: 2.4vh; }
.tvh { display: flex; align-items: center; gap: 2vw; } .tvh .logo b, .tvh .logo i { font-size: 5vh; } .tvh .flag { width: 6vh; height: 4.4vh; }
.tvh h1 { flex: 1; margin: 0; font-size: 4.4vh; font-weight: 900; transform: skewX(-6deg); text-align: center; } .tvh .qr { display: flex; align-items: center; gap: 1.2vw; background: #fff; color: var(--text); padding: 1vh 1.4vh 1vh 2vh; border-radius: 2vh; font-weight: 900; font-size: 2vh; }
.tvh .qr #qr, .tvh .qr svg { display: block; width: 11vh; height: 11vh; } .tvb { min-height: 0; display: grid; grid-template-columns: 1fr 34vw; gap: 2.4vw; }
.tvb.solo { grid-template-columns: 1fr; }
.tv .bracket { margin: 0; padding: 0; height: 100%; overflow: hidden; grid-template-columns: repeat(var(--cols), 1fr); gap: 1.4vw; }
.tv .rname { color: #cfc8ef; font-size: 1.8vh; } .tv .match { box-shadow: 0 .6vh 0 rgba(0, 0, 0, .3); padding: 1vh; border-radius: 2vh; } .tv .match.ready { box-shadow: 0 .6vh 0 #c99a00, 0 0 0 .4vh var(--yellow); }
.tv .mrow { font-size: 2vh; color: var(--text); } .tv .mrow b { color: var(--text); } .tv .mrow.win b, .tv .mrow.win em { color: #0e8a3c; } .tv .av.sm { --s: 3.4vh; } .tv .mcup span { font-size: 3.6vh; } .tv .ms { gap: 1.4vh; }
.side { display: flex; flex-direction: column; gap: 2vh; min-height: 0; } .now { padding: 2.4vh; border-radius: 3vh; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .3vh rgba(255, 255, 255, .12); text-align: center; }
.now h2 { margin: 0 0 1.6vh; font-size: 2.4vh; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); } .now .vs { gap: 1.4vw; } .now .vs b { font-size: 2.2vh; color: #fff; } .now .vs i { font-size: 3vh; color: var(--yellow); }
.tv .av.lg { --s: 10vh; } .tv .cupbox { min-height: 22vh; } .tv .cup { color: var(--text); } .tv .cup > span { font-size: 9vh; } .tv .cup b { font-size: 3.6vh; } .tv .cup li { font-size: 1.8vh; } .tv .ibox.big { width: 16vh; height: 16vh; font-size: 10vh; border-radius: 3vh; }
.tvreg { display: grid; place-content: center; justify-items: center; text-align: center; gap: 3vh; } .tvreg h2 { margin: 0; font-size: 6vh; font-weight: 900; transform: skewX(-6deg); } .tvreg p { margin: 0; font-size: 2.8vh; color: #cfc8ef; }
.tvgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vh; max-width: 90vw; } .tvgrid .racer { background: rgba(255, 255, 255, .1); padding: 2vh 1.4vw; min-width: 14vh; } .tvgrid .av { --s: 9vh; } .tvgrid b { font-size: 2.2vh; }
.tv .podium { height: 100%; display: grid; align-content: center; border-radius: 3vh; } .tv .podium h2 { font-size: 6vh; } .tv .pods { max-width: 110vh; margin: 4vh auto 0; width: 100%; } .tv .pod b { font-size: 3vh; } .tv .pod .av { --s: 16vh; }
.tv .p1 .step { height: 26vh; } .tv .p2 .step { height: 19vh; } .tv .p3 .step { height: 14vh; } .tv .pod .step { font-size: 8vh; } .tv .podium p { font-size: 2.6vh; }
.fs { position: fixed; right: 1.4vw; bottom: 1.4vh; border: 0; background: rgba(255, 255, 255, .1); color: #fff; border-radius: 1.4vh; padding: 1vh 1.4vh; font-size: 2vh; opacity: .4; }
.vs.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .vs.four > div { max-width: none; } .vs.four b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tv .mrow { font-size: 2.4vh; } .tv .av.sm { --s: 4vh; } .tv .mrows { gap: .6vh; } .tv .mcup { min-height: 7vh; } .tv .match { grid-template-columns: 8vh 1fr; }
.tv .vs.four { grid-template-columns: repeat(2, 1fr); row-gap: 2vh; }