/* Race presentation, lineup reveal and photo finish */

.lineup-reveal{
  position:absolute;inset:0;z-index:9;display:none;
  align-items:center;justify-content:center;overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%,rgba(205,127,50,.18),transparent 34%),
    rgba(5,4,3,.88);
  backdrop-filter:blur(3px)
}
.lineup-reveal.show{display:flex}
.lineup-stage{
  width:94%;height:92%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;position:relative
}
.lineup-kicker{
  font-size:13px;color:#ffbd78;font-weight:1000;letter-spacing:3px;
  text-transform:uppercase;opacity:0;transform:translateY(-10px);
  transition:.35s ease
}
.lineup-title{
  font-size:clamp(30px,4.3vw,58px);font-weight:1000;letter-spacing:1px;
  margin-top:2px;text-align:center;opacity:0;transform:scale(.92);
  transition:.4s ease;text-shadow:0 5px 30px rgba(0,0,0,.7)
}
.lineup-title.ready,.lineup-kicker.ready{opacity:1;transform:none}
.lineup-cards{
  width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;margin-top:22px;align-items:end
}
.lineup-card{
  --accent:#cd7f32;
  position:relative;min-width:0;height:260px;padding:10px;
  border:1px solid color-mix(in srgb,var(--accent) 70%,#fff 10%);
  border-radius:15px;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,#18110c),#0b0907 72%);
  box-shadow:0 18px 50px rgba(0,0,0,.46),0 0 28px color-mix(in srgb,var(--accent) 17%,transparent);
  opacity:0;
  transform:translateY(80px) rotate(var(--tilt,0deg)) scale(.78);
  transition:
    opacity .42s ease,
    transform .52s cubic-bezier(.2,.9,.2,1.18),
    filter .3s ease;
  overflow:hidden
}
.lineup-card:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 28%);
  pointer-events:none
}
.lineup-card.revealed{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg)) scale(1)}
.lineup-card.final{filter:brightness(1.08);box-shadow:0 18px 55px rgba(0,0,0,.48),0 0 35px color-mix(in srgb,var(--accent) 32%,transparent)}
.lineup-number{
  position:absolute;right:9px;top:8px;color:rgba(255,255,255,.24);
  font-size:31px;font-weight:1000
}
.lineup-avatar{
  height:105px;display:grid;place-items:center;
  font-size:62px;filter:drop-shadow(0 8px 9px rgba(0,0,0,.5))
}
.lineup-name{
  font-size:clamp(15px,1.5vw,22px);font-weight:1000;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.lineup-trait{
  color:#d6c5b4;font-size:10px;text-align:center;height:28px;
  margin-top:3px;overflow:hidden
}
.lineup-stat{
  margin-top:9px;padding:7px 8px;border-radius:9px;
  border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.28)
}
.lineup-stat-label{
  display:flex;justify-content:space-between;align-items:center;
  gap:6px;font-size:9px;color:#c9b7a8;font-weight:900;letter-spacing:.6px
}
.lineup-stat-value{font-size:13px;color:#fff}
.lineup-bar{height:5px;margin-top:5px;border-radius:999px;background:#241a13;overflow:hidden}
.lineup-bar > div{
  height:100%;border-radius:999px;background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 50%,transparent)
}
.grid-set{
  height:38px;margin-top:19px;font-size:clamp(17px,2vw,27px);
  font-weight:1000;letter-spacing:2px;color:#ffd6a9;
  opacity:0;transform:scale(.8);transition:.34s ease
}
.grid-set.show{opacity:1;transform:scale(1)}
.spark{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:#ffba69;box-shadow:0 0 12px #ff9d42;
  pointer-events:none;animation:sparkFly .75s ease-out forwards
}
@keyframes sparkFly{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1.3)}
}
@media(max-width:900px){
  .lineup-cards{gap:5px}
  .lineup-card{height:220px;padding:7px}
  .lineup-avatar{height:85px;font-size:48px}
  .lineup-trait{display:none}
}

.photo-finish{
  position:absolute;inset:0;z-index:8;display:none;place-items:center;
  background:rgba(0,0,0,.42);backdrop-filter:blur(1px)
}
.photo-finish.show{display:grid}
.photo-card{
  min-width:min(560px,88%);padding:24px 28px;border-radius:18px;text-align:center;
  border:2px solid rgba(255,255,255,.78);
  background:linear-gradient(180deg,rgba(20,15,11,.96),rgba(8,7,6,.98));
  box-shadow:0 0 80px rgba(255,255,255,.16),0 30px 70px rgba(0,0,0,.55)
}
.photo-title{font-size:42px;font-weight:1000;letter-spacing:1px}
.photo-sub{margin-top:7px;color:#d9cabb;font-size:14px;font-weight:800}
.photo-result{margin-top:16px;font-size:25px;font-weight:1000;color:var(--yellow);min-height:32px}
.photo-flash{animation:photoFlash .18s ease}
@keyframes photoFlash{0%{filter:brightness(2.6)}100%{filter:brightness(1)}}

.event{margin-top:11px;min-height:72px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:#100d0a;font-size:19px;font-weight:1000}
.event.hot{border-color:#82491f;box-shadow:inset 0 0 38px rgba(205,127,50,.10)}
.event.danger{border-color:#813333;box-shadow:inset 0 0 38px rgba(255,60,60,.08)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.tag{padding:5px 8px;border-radius:999px;border:1px solid var(--line);background:#120e0b;color:var(--muted);font-size:11px}


/* v4.9 — portrait artwork in the pre-race lineup */
.lineup-avatar{overflow:hidden;border-radius:10px}
.lineup-portrait{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 16%;
  transform:scale(1.45)
}