/* Rounded motorsport surfaces and restrained geometric graphics. */
:root { --radius-card: 18px; --radius-banner: 24px; --panel: #18181f; }
body { background-color: #101016; }
.switcher { padding: 8px; gap: 8px; background: #111117; }
.switcher a { border-radius: 12px; border-bottom: 0; padding: 15px 12px; }
.switcher a.active { border-bottom: 0; box-shadow: inset 0 0 0 1px #ffffff26; }
.switcher a.active::after { left: 24%; right: 24%; bottom: 5px; border-radius: 4px; }
.site-header {
  border-radius: 0 0 24px 24px;
  background-color: var(--accent);
  background-image: repeating-linear-gradient(135deg, transparent 0 135px, #ffffff06 135px 165px, transparent 165px 175px, #00000007 175px 183px, transparent 183px 290px);
  box-shadow: 0 12px 32px #0003;
}
.navigation { padding-bottom: 12px; gap: 6px; }
.navigation a { border: 0; border-radius: 999px; padding: 12px 16px; }
.navigation a.active { border: 0; background: #ffffff29; box-shadow: inset 0 0 0 1px #ffffff25; }
.navigation a::after { left: 22px; right: 22px; bottom: 6px; border-radius: 3px; }
.discord-link { border-radius: 999px; border-color: #ffffff30; }
.page-heading, .event-hero { border-radius: var(--radius-banner); box-shadow: 0 14px 35px #0002; }
.event-hero { padding: 38px 40px; }
.event-hero::before, .page-heading::before {
  background-color: var(--accent); background-blend-mode: luminosity;
  opacity: .2; filter: blur(5px); pointer-events: none;
}
.event-hero h1 { max-width: 950px; letter-spacing: -.8px; }
.event-hero .eyebrow { display: inline-flex; padding: 9px 13px; border: 1px solid #ffffff35; border-radius: 999px; background: #00000012; }
.event-hero .countdown { margin-top: 20px; }
.countdown div { border-radius: 14px; border: 1px solid #ffffff18; box-shadow: inset 0 1px #ffffff09; }
.panel, .driver-card, .team-card, .prize-pool {
  border-radius: var(--radius-card);
  background-color: var(--panel);
  box-shadow: 0 6px 22px #0002, inset 0 1px 0 #ffffff06;
}
.panel, .prize-pool { border-color: color-mix(in srgb, var(--accent) 35%, #303039); }
.panel-title { font-weight: 700; }
.driver-card { border-top-width: 3px; }
.team-card { border-left-width: 4px; }
.team-boss { border-radius: 9px; }
.event-row { border-radius: 14px; border-left-width: 4px; }
.event-round { background: #ffffff07; border-radius: 10px; padding: 10px 8px; text-align: center; }
.tabs:not(.line) button { border-radius: 999px; padding: 11px 17px; }
.tabs.line { gap: 8px; padding-bottom: 8px; }
.tabs.line button { border-radius: 999px; border-bottom: 0; padding: 12px 18px; }
.tabs.line button.selected { border-bottom: 0; background: color-mix(in srgb, var(--accent) 13%, transparent); }
.tabs.line button::after { bottom: 5px; left: 24px; right: 24px; border-radius: 3px; }
.table-wrap { border-radius: 16px; background: #121218; border: 1px solid #ffffff0d; padding: 0 10px 8px; }
tbody tr:last-child td { border-bottom: 0; }
.prize-pool { position: relative; overflow: hidden; isolation: isolate; border-width: 1px; }
.prize-pool::before {
  content: ''; position: absolute; width: 320px; height: 320px; right: -170px; top: -170px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 50%;
  box-shadow: 0 0 0 24px #ffffff03, 0 0 0 48px #ffffff02, 0 0 0 72px #ffffff01;
  z-index: -1; pointer-events: none;
}
.prize-award { padding: 12px 16px; border-radius: 12px; background: #ffffff04; }
.prize-awards { gap: 16px; }
.text-link { border-radius: 999px; padding: 8px 12px; background: #ffffff05; }
.rulebook .rule h3 { letter-spacing: -.2px; }
footer { margin-top: 40px; background: #101016b3; }
@media(max-width:850px) { .navigation { padding: 0 12px 12px; } }
@media(max-width:520px) {
  :root { --radius-card: 14px; --radius-banner: 18px; }
  .switcher { gap: 6px; padding: 6px; }
  .switcher a { font-size: .8125rem; border-radius: 10px; }
  .navigation { gap: 4px; }
  .navigation a { padding: 10px 12px; }
  .event-hero { padding: 26px 20px; }
  .event-hero h1 { letter-spacing: -.4px; }
  .countdown div { border-radius: 10px; }
  .prize-awards { width: 100%; flex-direction: column; gap: 10px; }
  .prize-award { padding: 12px; }
}

/* Supplied character artwork stays wholly within the next-event banner. */
.event-hero.with-characters{min-height:410px;isolation:isolate}
.with-characters .hero-copy{width:55%;position:relative;z-index:2}
.with-characters h1{font-size:clamp(2rem,3.2vw,3rem)}
.event-hero .hero-characters{position:absolute;inset:12px 0 0 auto;width:45%;z-index:1;overflow:hidden;pointer-events:none;isolation:isolate}
.hero-character{position:absolute;bottom:0;left:50%;width:64%;height:100%;object-fit:contain;object-position:center bottom;transform:translateX(-50%);filter:drop-shadow(0 10px 14px #0004)}
.character-left{left:32%;z-index:1;height:93%}
.character-right{left:68%;z-index:2;height:93%}
.character-front{z-index:3}
@media(max-width:850px){
 .event-hero.with-characters{min-height:0}
 .with-characters .hero-copy{width:100%}
 .event-hero .hero-characters{position:relative;inset:auto;width:100%;height:300px;margin:18px 0 -28px}
}
@media(max-width:520px){.event-hero .hero-characters{height:250px;margin-bottom:-26px}}
/* Formula 1 next-event banner uses the blurred circuit's original colours. */
body[data-championship="formula-1"] .event-hero{background:#141820}
body[data-championship="formula-1"] .event-hero::before{background-color:transparent;background-image:linear-gradient(90deg,#080b13c9,#080b1360),url('/race-circuit.png');background-size:cover;background-position:center;background-blend-mode:normal;opacity:1;filter:blur(6px);transform:scale(1.05)}
/* Avatar roster cards: team colour, readable details, and contained portraits. */
.driver-grid{gap:20px}
.portrait-card{position:relative;min-height:280px;padding:22px 18px;overflow:hidden;isolation:isolate;border:1px solid #ffffff15;border-top:0;border-radius:16px;background:linear-gradient(100deg,color-mix(in srgb,var(--driver-team) 35%,#070b14) 0%,color-mix(in srgb,var(--driver-team) 50%,#070b14) 45%,var(--driver-team) 100%);box-shadow:0 8px 24px #0003}
.portrait-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#ffffff20 .6px,transparent .8px);background-size:3px 3px;mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none;z-index:-1}
.driver-info{position:relative;z-index:2;width:55%;min-height:236px;display:flex;flex-direction:column;align-items:flex-start;text-shadow:0 1px 6px #0008}
.portrait-card h2{font-size:1.22rem;font-weight:800;text-transform:none;line-height:1.2;margin:0 0 7px;overflow-wrap:anywhere;letter-spacing:-.3px}
.portrait-card .driver-team-name{font-size:.76rem;font-weight:600;line-height:1.4;color:#fff;margin:0 0 16px}
.driver-number{display:grid;gap:5px}
.driver-number small{font-size:.6rem;letter-spacing:1.2px;color:#ffffffbb}
.driver-number strong{font:800 1.7rem Consolas,monospace;color:white}
.driver-card-points{display:flex;align-items:baseline;gap:7px;margin-top:auto;padding-top:18px}
.driver-card-points strong{font-size:1.5rem;font-variant-numeric:tabular-nums}
.driver-card-points span{font-size:.65rem;letter-spacing:.6px}
.driver-portrait{position:absolute;z-index:1;bottom:0;right:-3%;width:66%;height:96%;object-fit:contain;object-position:center bottom;filter:drop-shadow(-4px 4px 12px #0004)}
.driver-avatar-missing{position:absolute;right:0;bottom:0;width:45%;height:100%;display:grid;place-items:center;font-size:.85rem;text-align:center;color:#ffffff88}
.driver-avatar-missing strong{font-size:1.7rem;line-height:1.8}
@media(max-width:1100px){.driver-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.driver-grid{grid-template-columns:1fr}.portrait-card{min-height:270px}.driver-info{min-height:226px}}
.driver-team-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.driver-team-groups .driver-team-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.driver-reserve{margin-top:auto;padding-top:18px;font-size:.65rem;letter-spacing:1px;color:#ffffffbb}
@media(max-width:1100px){.driver-team-groups{grid-template-columns:1fr}}
@media(max-width:600px){.driver-team-groups .driver-team-group{grid-template-columns:1fr}}
/* The supplied car is a contained decorative motif across championship pages. */
.page-heading::after{content:'';position:absolute;right:12px;top:-24px;width:270px;height:160px;background:url('/racing-car.png') center/contain no-repeat;pointer-events:none;opacity:.9;filter:drop-shadow(0 8px 10px #0004)}
.page-heading{padding-right:260px}
.prize-pool::after{content:'';display:block;width:210px;height:115px;flex:0 0 210px;background:url('/racing-car.png') center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 8px 12px #0007)}
footer::before{content:'';display:block;width:200px;height:110px;margin:-10px auto 8px;background:url('/racing-car.png') center/contain no-repeat;opacity:.65;pointer-events:none}
body[data-championship="super-formula"] .event-hero::after{content:'';position:absolute;right:12px;bottom:0;width:42%;height:100%;background:url('/racing-car.png') center/contain no-repeat;pointer-events:none;opacity:.9;z-index:0}
@media(max-width:700px){.page-heading{padding-right:120px}.page-heading::after{width:160px;height:110px;right:-16px;top:0;opacity:.6}.prize-pool::after{width:170px;height:90px;flex-basis:170px;margin-left:auto}body[data-championship="super-formula"] .event-hero::after{opacity:.15;width:65%}}