/* =======================================================
   Pit Zero Pro — FRONTEND (single fixed 420×600 frame)
   Rules:
   - ZERO scrolling inside frame
   - JS must never set heights
   - Content must fit the frame
======================================================= */

.pitzero-pro-app{
  max-width: 420px;
  margin: 0 auto;
  padding: 12px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.pitzero-pro-frame{
  width: 420px;
  max-width: 100%;
  height: 600px;              /* HARD LOCK */
  background: radial-gradient(1200px 800px at 30% 0%, #1a1b1e 0%, #0c0d10 40%, #07080a 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  overflow: hidden;           /* IMPORTANT */
  position: relative;
}

/* --- Screen layout (router swaps these) --- */
.pzp-screen{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Top persistent bar */
.pzp-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 8px 12px;
}

.pzp-avatar{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  flex: 0 0 auto;
}
.pzp-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Small HUD area to the right of avatar */
.pzp-hud{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* HUD toggles stacked vertically */
.pzp-toggles{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.pzp-toggle{
  display: inline-flex;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}

.pzp-toggle button{
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.75);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.pzp-toggle button.is-active{
  color: #101113;
  background: linear-gradient(180deg, #f5d46a 0%, #c09b2f 100%);
}

/* Body area (everything below topbar) */
.pzp-body{
  flex: 1 1 auto;
  padding: 8px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0; /* keeps flexbox from forcing overflow */
}

/* =======================================================
   Start Screen
======================================================= */
.pzp-start-spacer{
  flex: 1 1 auto;
}
.pzp-start-title{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  opacity: .95;
}
.pzp-start-sub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  font-weight: 700;
  line-height: 1.35;
}

.pzp-footer{
  padding: 10px 12px 12px 12px;
}

.pzp-btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  padding: 14px 14px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  user-select: none;
}

.pzp-btn--primary{
  color: #101113;
  background: linear-gradient(180deg, #f5d46a 0%, #c09b2f 100%);
}
.pzp-btn--ghost{
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.06);
}
.pzp-btn-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* =======================================================
   Results Screen
======================================================= */
.pzp-screen--results{
  background:
    radial-gradient(110% 90% at 50% 0%, rgba(210,32,32,0.28) 0%, rgba(18,20,24,0.98) 62%),
    linear-gradient(180deg, #171b22 0%, #0b0d12 100%);
}

.pzp-results-body{
  padding: 12px 12px 10px 12px;
}

.pzp-results-card{
  height: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(180deg, rgba(183,0,0,0.94) 0%, rgba(98,0,0,0.95) 16%, rgba(14,17,22,0.98) 58%),
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
  box-shadow: 0 18px 34px rgba(0,0,0,0.38);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
}

.pzp-results-headline{
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 1;
  color: #fff;
  text-align: center;
}

.pzp-results-section{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pzp-results-label{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .78;
}

.pzp-results-total{
  font-size: 46px;
  line-height: .95;
  font-weight: 1000;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.pzp-results-position-line{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.pzp-results-position{
  grid-column: 1;
  justify-self: start;
  font-size: 28px;
  line-height: 1;
  font-weight: 1000;
  color: #c09b2f;
}

.pzp-results-position-sep{
  opacity: .7;
  font-weight: 900;
}

.pzp-results-position-time{
  grid-column: 2;
  justify-self: center;
  font-size: 28px;
  line-height: 1;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

.pzp-results-position-spacer{
  grid-column: 3;
}

.pzp-results-posgain{
  font-size: 14px;
  line-height: 1;
  font-weight: 1000;
  color: #51ff98;
}

.pzp-results-target-main{
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pzp-results-target-delta{
  font-size: 14px;
  font-weight: 1000;
  color: rgba(255,255,255,0.95);
  font-variant-numeric: tabular-nums;
}

.pzp-results-rival-snap{
  margin-top: 4px;
}

.pzp-results-label--center{
  text-align: center;
  color: #fff;
  opacity: 1;
}

.pzp-results-rival-delta-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.pzp-results-rival-delta-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}

.pzp-results-rival-delta-value{
  font-size: 13px;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.95);
}

.pzp-results-divider{
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.42), rgba(255,255,255,0));
}

.pzp-results-stages{
  display: grid;
  gap: 6px;
}

.pzp-results-stage-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.pzp-results-stage-name{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .03em;
  text-align: left;
  justify-self: start;
}

.pzp-results-stage-time{
  font-size: 14px;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pzp-results-stage-triangle{
  font-size: 11px;
  line-height: 1;
  transform: translateY(-1px);
}

.pzp-results-stage-triangle--up{
  color: #ff4d4f;
}

.pzp-results-stage-triangle--down{
  color: #3ddc84;
}

.pzp-results-total-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.pzp-results-total-label{
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  justify-self: start;
}

.pzp-results-total-value{
  font-size: 16px;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

.pzp-results-pb-time{
  font-size: 24px;
  line-height: 1;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

.pzp-results-pb .pzp-results-label,
.pzp-results-pb-time{
  color: #c09b2f;
}

.pzp-results-pb-delta{
  font-size: 13px;
  font-weight: 900;
  opacity: .9;
}

.pzp-results-footer{
  padding-top: 8px;
}

.pzp-results-actions .pzp-btn{
  padding: 12px 12px;
  font-size: 12px;
}

/* =======================================================
   Overview: Snapshot (3 rows) — no scroll
======================================================= */
.pzp-snap-wrap{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pzp-snap{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Reuse leaderboard classes, but tighten it for the frame */
.pitzero-lb-row.pzp-snap-row{
  display: grid;
  grid-template-columns: 22px 40px 1fr;
  grid-template-areas:
    "rank avatar main"
    "rank avatar stages";
  gap: 6px 10px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.pitzero-lb-row.pzp-snap-row.is-you{
  background: rgba(255,255,255,0.08);
  border-color: rgba(245,212,106,0.35);
  box-shadow: 0 0 0 1px rgba(245,212,106,0.12) inset;
}

/* Optional: podium glow only for rank 1–3 */
.pitzero-lb-row.pzp-snap-row.is-podium-1{ box-shadow: 0 0 0 1px rgba(245,212,106,0.20) inset; }
.pitzero-lb-row.pzp-snap-row.is-podium-2{ box-shadow: 0 0 0 1px rgba(200,206,214,0.18) inset; }
.pitzero-lb-row.pzp-snap-row.is-podium-3{ box-shadow: 0 0 0 1px rgba(205,127,50,0.18) inset; }

.pitzero-lb-rank{
  grid-area: rank;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
}
.pitzero-lb-avatar{ grid-area: avatar; }
.pitzero-lb-avatar-img{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:block;
}
.pitzero-lb-main{ grid-area: main; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pitzero-lb-name{
  font-size: 12px;
  font-weight: 1000;
  color: #fff;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}
.pitzero-lb-total-time{
  font-size: 12px;
  font-weight: 1000;
  color: #fff;
  opacity: .9;
}

.pitzero-lb-stages{
  grid-area: stages;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.pitzero-lb-stage{
  border-radius: 10px;
  padding: 6px 6px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  gap: 2px;
  align-items:center;
  justify-content:center;
  min-width: 0;
}

.pitzero-lb-stage span{
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.pitzero-lb-stage strong{
  font-size: 10px;
  font-weight: 1000;
  color: rgba(255,255,255,0.92);
}

/* Medal classes (same names you already use) */
.pitzero-lb-stage.medal-gold{ border-color: rgba(245,212,106,0.35); }
.pitzero-lb-stage.medal-silver{ border-color: rgba(200,206,214,0.30); }
.pitzero-lb-stage.medal-bronze{ border-color: rgba(205,127,50,0.30); }

/* =======================================================
   Full Leaderboard Shortcode
======================================================= */
.pitzero-leaderboard{
  max-width: 900px;
  margin: 0 auto;
  padding: 12px;
  color: #fff;
}

.pitzero-leaderboard .pitzero-lb-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pitzero-leaderboard .pitzero-lb-controls{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.pitzero-leaderboard .pitzero-lb-toggle{
  display: inline-flex;
  gap: 6px;
}

.pitzero-leaderboard .pitzero-lb-tab{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pitzero-leaderboard .pitzero-lb-tab.is-active{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
}

.pitzero-leaderboard .pitzero-lb-title{
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pitzero-leaderboard .pitzero-lb-sub{
  font-size: 12px;
  opacity: .78;
  margin-bottom: 10px;
}

.pitzero-leaderboard .pitzero-lb-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pitzero-leaderboard .pitzero-lb-row{
  display: grid;
  grid-template-columns: 28px 46px minmax(0, 1fr);
  grid-template-areas:
    "rank avatar main"
    "rank avatar stages";
  gap: 6px 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.pitzero-leaderboard .pitzero-lb-rank{
  grid-area: rank;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
}

.pitzero-leaderboard .pitzero-lb-avatar{
  grid-area: avatar;
}

.pitzero-leaderboard .pitzero-lb-avatar-img{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: block;
}

.pitzero-leaderboard .pitzero-lb-main{
  grid-area: main;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pitzero-leaderboard .pitzero-lb-name{
  font-size: 12px;
  font-weight: 1000;
  color: #fff;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pitzero-leaderboard .pitzero-lb-total{
  text-align: right;
}

.pitzero-leaderboard .pitzero-lb-total-time{
  font-size: 14px;
  font-weight: 1000;
  color: #fff;
  opacity: .94;
}

.pitzero-leaderboard .pitzero-lb-lastset{
  font-size: 11px;
  opacity: .72;
}

.pitzero-leaderboard .pitzero-lb-stages{
  grid-area: stages;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.pitzero-leaderboard .pitzero-lb-empty{
  padding: 14px 10px;
  opacity: .82;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Legacy leaderboard compatibility selectors from old Pit Zero */
.pitzero-leaderboard .pitzero-lb-tabs{
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.pitzero-leaderboard .pitzero-lb-head{
  font-size: 12px;
  opacity: 0.85;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.pitzero-leaderboard .pitzero-lb-driver{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pitzero-leaderboard .pitzero-lb-s,
.pitzero-leaderboard .pitzero-lb-pen{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.pitzero-leaderboard .pitzero-lb-final{
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

.pitzero-leaderboard .pitzero-lb-last{
  font-size: 11px;
  opacity: 0.75;
  margin-top: 2px;
}

@media (max-width: 720px){
  .pitzero-leaderboard .pitzero-lb-row{
    grid-template-columns: 28px 40px minmax(0, 1fr);
    grid-template-areas:
      "rank avatar main"
      "rank avatar stages";
    gap: 8px 10px;
  }
}

/* =======================================================
   Imported Leaderboard Visual Theme (from Additional CSS)
======================================================= */
.pitzero-lb{
  max-width: 980px;
  margin: 0 auto;
  padding: 14px;
}

.pitzero-lb .pitzero-lb-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pitzero-lb .pitzero-lb-title{
  font-weight: 1000;
  font-size: 20px;
  color: #fff;
}

.pitzero-lb .pitzero-lb-toggle{
  display: flex;
  gap: 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 6px;
  border-radius: 999px;
}

.pitzero-lb .pitzero-lb-tab{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  color: #fff;
  text-decoration: none !important;
  background: transparent;
}

.pitzero-lb .pitzero-lb-tab.is-active{
  background: #b30000;
  color: #fff;
}

.pitzero-lb .pitzero-lb-row{
  display: grid;
  grid-template-columns: 34px 64px 1fr 280px;
  grid-template-areas: "rank avatar main stages";
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.45);
  border: 2px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
  backdrop-filter: blur(6px);
  transition: transform .15s ease, box-shadow .15s ease;
}

.pitzero-lb .pitzero-lb-rank{
  font-weight: 1000;
  color: rgba(255,255,255,0.75);
}

.pitzero-lb .pitzero-lb-avatar img,
.pitzero-lb .pitzero-lb-avatar .avatar{
  border-radius: 12px !important;
  display: block;
}

.pitzero-lb .pitzero-lb-name{
  font-weight: 1000;
  color: #fff;
  margin-bottom: 4px;
}

.pitzero-lb .pitzero-lb-total-time{
  font-weight: 1000;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}

.pitzero-lb .pitzero-lb-lastset{
  font-size: 11px;
  opacity: 0.75;
  margin-top: 4px;
  color: #fff;
}

.pitzero-lb .pitzero-lb-stages{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.pitzero-lb .pitzero-lb-stage{
  text-align: center;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.pitzero-lb .pitzero-lb-stage span{
  display: block;
  font-size: 10px;
  opacity: 0.65;
  margin-bottom: 3px;
  color: #fff;
}

.pitzero-lb .pitzero-lb-stage strong{
  display: block;
  font-weight: 1000;
  font-size: 13px;
  color: #fff;
}

@media (max-width: 720px){
  .pitzero-lb .pitzero-lb-row{
    grid-template-columns: 28px 56px 1fr;
    grid-template-areas:
      "rank avatar main"
      "stages stages stages";
  }
  .pitzero-lb .pitzero-lb-stages{
    grid-column: 1 / -1;
  }
}

/* Podium borders + rank tint */
.pitzero-lb .pitzero-lb-list > .pitzero-lb-row:nth-child(1){
  border-color: #d4af37;
  box-shadow: 0 0 0 2px rgba(212,175,55,.35), 0 12px 30px rgba(212,175,55,.25);
}
.pitzero-lb .pitzero-lb-list > .pitzero-lb-row:nth-child(2){
  border-color: #cfd8dc;
  box-shadow: 0 0 0 2px rgba(207,216,220,.35), 0 10px 26px rgba(207,216,220,.2);
}
.pitzero-lb .pitzero-lb-list > .pitzero-lb-row:nth-child(3){
  border-color: #cd7f32;
  box-shadow: 0 0 0 2px rgba(205,127,50,.35), 0 10px 24px rgba(205,127,50,.2);
}
.pitzero-lb .pitzero-lb-list > .pitzero-lb-row:nth-child(1) .pitzero-lb-rank{ color:#d4af37; }
.pitzero-lb .pitzero-lb-list > .pitzero-lb-row:nth-child(2) .pitzero-lb-rank{ color:#cfd8dc; }
.pitzero-lb .pitzero-lb-list > .pitzero-lb-row:nth-child(3) .pitzero-lb-rank{ color:#cd7f32; }

/* True center title / right-aligned toggles */
.pitzero-lb .pitzero-lb-head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 12px;
}

.pitzero-lb .pitzero-lb-title{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Teko", sans-serif;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  pointer-events: none;
}

@media (max-width: 640px){
  .pitzero-lb .pitzero-lb-title{
    display: none;
  }
}

/* Subtle medals */
.pitzero-lb .pitzero-lb-stage.medal-gold{
  border: 1px solid rgba(192,155,47,.85);
  background: rgba(192,155,47,.10);
  box-shadow: 0 0 0 1px rgba(192,155,47,.10) inset;
}
.pitzero-lb .pitzero-lb-stage.medal-silver{
  border: 1px solid rgba(192,192,192,.75);
  background: rgba(192,192,192,.08);
  box-shadow: 0 0 0 1px rgba(192,192,192,.08) inset;
}
.pitzero-lb .pitzero-lb-stage.medal-bronze{
  border: 1px solid rgba(205,127,50,.80);
  background: rgba(205,127,50,.09);
  box-shadow: 0 0 0 1px rgba(205,127,50,.08) inset;
}

@media (max-width: 720px){
  .pitzero-lb .pitzero-lb-controls{
    gap: 8px !important;
  }
  .pitzero-lb .pitzero-lb-toggle{
    padding: 5px;
  }
  .pitzero-lb .pitzero-lb-tab{
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* Keep this scoped: first toggle group (scope) all-time active = gold */
.pitzero-lb .pitzero-lb-head .pitzero-lb-toggle:first-of-type .pitzero-lb-tab.is-active[href*="scope=all"]{
  background: #c09b2f !important;
  color: #fff !important;
}

/* =======================================================
   Practice screen
======================================================= */
.pzp-practice-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* =======================================================
   Small utility
======================================================= */
.pzp-top-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
}
.pzp-mini-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.90);
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  cursor:pointer;
}

/* =======================================================
   Stage 1
======================================================= */
.pzp-stage1-body{
  gap: 8px;
}

.pzp-stage1-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pzp-stage1-head-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pzp-stage1-title{
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.pzp-stage1-title--counter{
  text-align: right;
  white-space: nowrap;
}

.pzp-stage1-instruction{
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
}

.pzp-stage1-arena{
  --pzp-s1-scroll-tile: 1024px;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(380px 180px at 50% 10%, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
    linear-gradient(180deg, rgba(12,14,18,0.92), rgba(9,10,13,0.98));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pzp-stage1-scroll-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image: url("../img/stage1-scroll-bg.webp");
  background-image: -webkit-image-set(
    url("../img/stage1-scroll-bg.webp") type("image/webp"),
    url("../img/stage1-scroll-bg.png") type("image/png")
  );
  background-image: image-set(
    url("../img/stage1-scroll-bg.webp") type("image/webp"),
    url("../img/stage1-scroll-bg.png") type("image/png")
  );
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: var(--pzp-s1-scroll-tile) 100%;
  animation: pzp-s1-bg-scroll 3s linear infinite;
  animation-play-state: paused;
}

.pzp-stage1-scroll-bg.is-running{
  animation-play-state: running;
}

.pzp-stage1-car-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.72;
  background-image: url("../img/f1-car-rear-half.webp");
  background-image: -webkit-image-set(
    url("../img/f1-car-rear-half.webp") type("image/webp"),
    url("../img/f1-car-rear-half.png") type("image/png")
  );
  background-image: image-set(
    url("../img/f1-car-rear-half.webp") type("image/webp"),
    url("../img/f1-car-rear-half.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: saturate(1.05) contrast(1.08);
}

.pzp-stage1-hub-wrap{
  position: relative;
  width: 140px;
  height: 140px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .95;
}

.pzp-stage1-brake{
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 3px solid rgba(230,235,240,0.55);
  background:
    radial-gradient(circle at 50% 50%, rgba(180,190,198,0.35), rgba(90,100,110,0.16) 60%, rgba(20,22,26,0.4) 100%);
}

.pzp-stage1-caliper{
  position: absolute;
  right: 6px;
  top: 38px;
  width: 26px;
  height: 64px;
  border-radius: 9px;
  background: linear-gradient(180deg, #be2a2a 0%, #7f1818 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset;
}

.pzp-stage1-hub-core{
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  background: radial-gradient(circle at 45% 38%, rgba(250,250,250,0.45), rgba(80,88,95,0.55));
}

.pzp-stage1-glint{
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 55% 45%, rgba(255,255,255,0.7), rgba(255,255,255,0) 45%);
}

.pzp-stage1-wheel{
  --pzp-s1-x: 0px;
  --pzp-s1-rot: 0deg;
  position: absolute;
  z-index: 4;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  border: 8px solid #1e2126;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.08) inset,
    0 10px 20px rgba(0,0,0,0.45);
  background:
    radial-gradient(circle at 50% 50%, #616a73 0 22%, #2e343a 22% 40%, #11151a 40% 100%);
  transform: translate3d(var(--pzp-s1-x),0,0) rotate(var(--pzp-s1-rot));
  transition: transform 110ms linear, left 520ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
  left: calc(50% - 86px);
  top: calc(50% - 86px);
  overflow: hidden;
}

.pzp-stage1-wheel.has-image{
  background: #11151a;
}

.pzp-stage1-wheel-img{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(1.04) contrast(1.04);
  z-index: 0;
}

.pzp-stage1-wheel.has-image .pzp-stage1-wheel-img{
  opacity: 1;
}

.pzp-stage1-wheel-cue{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.pzp-stage1-wheel-cue::before{
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 3px solid rgba(245,212,106,0.95);
  box-shadow:
    0 0 12px rgba(245,212,106,0.9),
    0 0 24px rgba(245,212,106,0.7),
    0 0 40px rgba(255,255,255,0.35);
}

.pzp-stage1-wheel-cue::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,1), rgba(245,212,106,0.95) 45%, rgba(245,212,106,0) 75%);
  box-shadow: 0 0 18px rgba(255,255,255,0.95);
}

.pzp-stage1-wheel.is-cue-active .pzp-stage1-wheel-cue{
  opacity: 1;
  animation: pzp-s1-wheel-cue-pulse 760ms ease-in-out infinite;
}

.pzp-stage1-wheel::before,
.pzp-stage1-wheel::after{
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 1;
  pointer-events: none;
}

.pzp-stage1-wheel::after{
  inset: 36px;
  border-color: rgba(255,255,255,0.11);
}

.pzp-stage1-wheel.is-entering{
  left: -190px;
  transition: transform 110ms linear, left 900ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
}

.pzp-stage1-wheel.is-spinning{
  animation: pzp-s1-spin 780ms linear infinite;
}

.pzp-stage1-wheel.is-stop-settle{
  animation: pzp-s1-settle 160ms ease-out 1;
}

.pzp-stage1-wheel.is-removing{
  animation: pzp-s1-remove 380ms cubic-bezier(.2,.9,.3,1) forwards;
}

.pzp-stage1-wheel.is-new-entry{
  left: -190px;
}

.pzp-stage1-wheel.is-new-in{
  left: calc(50% - 96px);
}

.pzp-stage1-wheel.is-rocking{
  transition: transform 90ms linear;
}

.pzp-stage1-wheel.is-cue-shift{
  left: calc(50% - 88px);
}

.pzp-stage1-wheel.is-bump{
  animation: pzp-s1-bump 120ms ease-out 1;
}

.pzp-stage1-wheel.is-mounted{
  left: calc(50% - 86px);
}

.pzp-stage1-wheel.is-slam{
  animation: pzp-s1-slam 190ms cubic-bezier(.12,.86,.22,1) 1;
}

.pzp-stage1-hub-wrap.is-stop{
  filter: brightness(1.2);
}

.pzp-stage1-hub-wrap.is-cue .pzp-stage1-glint{
  opacity: 1;
  animation: pzp-s1-cue-pulse 920ms ease-in-out infinite;
}

.pzp-stage1-hub-wrap.is-cue .pzp-stage1-hub-core{
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.55) inset,
    0 0 12px rgba(255,255,255,0.48),
    0 0 24px rgba(245,212,106,0.42);
}

.pzp-stage1-hub-wrap.is-mounted{
  filter: brightness(1.15);
}

.pzp-stage1-feedback-layer{
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.pzp-stage1-feedback{
  position: absolute;
  left: 50%;
  top: 33%;
  transform: translate(-50%, 0);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f5f8ff;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(8,10,14,0.86);
  animation: pzp-s1-feedback 620ms ease-out forwards;
  white-space: nowrap;
}

.pzp-stage1-feedback.is-warn{
  color: #ffd6d6;
  border-color: rgba(255,96,96,0.38);
}

.pzp-stage1-feedback.is-result{
  color: #d4f7dc;
  border-color: rgba(92,215,134,0.35);
}

.pzp-stage1-score{
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(7,10,16,0.88);
  border: 1px solid rgba(245,212,106,0.34);
  opacity: 0;
  transition: opacity 180ms ease;
}

.pzp-stage1-score.is-visible{
  opacity: 1;
}

.pzp-stage1-action{
  transition: opacity 180ms ease, transform 180ms ease;
}

.pzp-stage1-action.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.pzp-stage1-action.is-fade-in{
  animation: pzp-s1-action-in 220ms ease-out 1;
}

@keyframes pzp-s1-spin{
  from { transform: translate3d(var(--pzp-s1-x),0,0) rotate(0deg); }
  to { transform: translate3d(var(--pzp-s1-x),0,0) rotate(360deg); }
}

@keyframes pzp-s1-settle{
  0%   { transform: translate3d(var(--pzp-s1-x),0,0) rotate(0deg); }
  40%  { transform: translate3d(var(--pzp-s1-x),0,0) rotate(8deg); }
  100% { transform: translate3d(var(--pzp-s1-x),0,0) rotate(0deg); }
}

@keyframes pzp-s1-remove{
  0%   { transform: translate3d(var(--pzp-s1-x),0,0) rotate(var(--pzp-s1-rot)); opacity: 1; }
  25%  { transform: translate3d(calc(var(--pzp-s1-x) + 4px),0,0) rotate(calc(var(--pzp-s1-rot) + 5deg)); }
  100% { transform: translate3d(calc(var(--pzp-s1-x) + 210px),0,0) rotate(calc(var(--pzp-s1-rot) + 18deg)); opacity: 0; }
}

@keyframes pzp-s1-bump{
  0% { transform: translate3d(var(--pzp-s1-x),0,0) rotate(var(--pzp-s1-rot)); }
  50% { transform: translate3d(calc(var(--pzp-s1-x) + 10px),0,0) rotate(var(--pzp-s1-rot)); }
  100% { transform: translate3d(var(--pzp-s1-x),0,0) rotate(var(--pzp-s1-rot)); }
}

@keyframes pzp-s1-slam{
  0% { transform: translate3d(14px,0,0) rotate(4deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

@keyframes pzp-s1-flash{
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pzp-s1-cue-pulse{
  0% { opacity: 0.30; transform: scale(0.98); }
  50% { opacity: 0.95; transform: scale(1.04); }
  100% { opacity: 0.30; transform: scale(0.98); }
}

@keyframes pzp-s1-wheel-cue-pulse{
  0% { transform: scale(0.98); filter: brightness(0.9); }
  50% { transform: scale(1.03); filter: brightness(1.25); }
  100% { transform: scale(0.98); filter: brightness(0.9); }
}

@keyframes pzp-s1-feedback{
  0% { opacity: 0; transform: translate(-50%, 8px); }
  18% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -18px); }
}

@keyframes pzp-s1-action-in{
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pzp-s1-bg-scroll{
  from { background-position-x: 0; }
  to { background-position-x: calc(-1 * var(--pzp-s1-scroll-tile)); }
}

/* =======================================================
   Stage 2
======================================================= */
.pzp-stage2-body{
  gap: 8px;
}

.pzp-stage2-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pzp-stage2-head-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pzp-stage2-title{
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.pzp-stage2-title--counter{
  text-align: right;
  white-space: nowrap;
}

.pzp-stage2-instruction{
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
}

.pzp-stage2-arena{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(10,13,18,0.92), rgba(8,10,14,0.98));
  overflow: hidden;
}

.pzp-stage2-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.pzp-stage2-ring{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 182px;
  height: 182px;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  transition: opacity 180ms ease;
}

.pzp-stage2-ring.is-visible{
  opacity: 1;
}

.pzp-stage2-ring svg{
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.pzp-stage2-ring-track{
  fill: none;
  stroke: rgba(255,255,255,0.16);
  stroke-width: 10;
}

.pzp-stage2-ring-progress{
  fill: none;
  stroke: #ff5555;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke 120ms linear;
}

.pzp-stage2-nut{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  z-index: 3;
  clip-path: polygon(24% 4%, 76% 4%, 98% 50%, 76% 96%, 24% 96%, 2% 50%);
  background: linear-gradient(180deg, #b8c0c8 0%, #858f99 100%);
  border: 2px solid rgba(222,228,236,0.45);
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.28) inset,
    0 3px 8px rgba(0,0,0,0.30);
}

.pzp-stage2-nut.is-spinning{
  animation: pzp-s2-nut-spin 120ms linear infinite;
}

.pzp-stage2-gun{
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 264px;
  height: 180px;
  z-index: 4;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate3d(0,0,0) rotate(-8deg);
  transition: left 420ms cubic-bezier(.2,.85,.2,1), top 420ms cubic-bezier(.2,.85,.2,1), bottom 420ms cubic-bezier(.2,.85,.2,1), transform 140ms ease;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,0.45));
}

.pzp-stage2-gun.is-at-hub{
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.pzp-stage2-gun.is-retract{
  transform: translate(calc(-50% - 16px), -50%) rotate(-8deg);
}

.pzp-stage2-feedback-layer{
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.pzp-stage2-feedback{
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, 0);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f5f8ff;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(8,10,14,0.86);
  animation: pzp-s1-feedback 620ms ease-out forwards;
  white-space: nowrap;
}

.pzp-stage2-feedback.is-warn{
  color: #ffd6d6;
  border-color: rgba(255,96,96,0.38);
}

.pzp-stage2-score{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 7;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(7,10,16,0.88);
  border: 1px solid rgba(245,212,106,0.34);
  opacity: 0;
  transition: opacity 180ms ease;
}

.pzp-stage2-score.is-visible{
  opacity: 1;
}

.pzp-stage2-action.is-disabled{
  opacity: 0.52;
  pointer-events: none;
}

@keyframes pzp-s2-nut-spin{
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =======================================================
   Stage 3
======================================================= */
.pzp-stage3-body{
  gap: 8px;
}

.pzp-stage3-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pzp-stage3-head-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pzp-stage3-title{
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.pzp-stage3-title--counter{
  text-align: right;
  white-space: nowrap;
}

.pzp-stage3-instruction{
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
}

.pzp-stage3-arena{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(340px 180px at 50% 12%, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
    linear-gradient(180deg, rgba(11,14,20,0.92), rgba(8,10,14,0.98));
  overflow: hidden;
}

.pzp-stage3-ready-hero{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background-image: url("../img/radio.webp");
  background-image: -webkit-image-set(
    url("../img/radio.webp") type("image/webp"),
    url("../img/radio.png") type("image/png")
  );
  background-image: image-set(
    url("../img/radio.webp") type("image/webp"),
    url("../img/radio.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.42));
  transition: opacity 180ms ease;
}

.pzp-stage3-arena[data-stage3-state="READY"] .pzp-stage3-ready-hero{
  opacity: 1;
}

.pzp-stage3-preview-wrap{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.pzp-stage3-preview-wrap.is-visible{
  opacity: 1;
}

.pzp-stage3-countdown{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 46px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow:
    0 0 10px rgba(255,255,255,0.38),
    0 0 22px rgba(255,255,255,0.24);
  opacity: 0;
  pointer-events: none;
}

.pzp-stage3-countdown.is-visible{
  opacity: 1;
}

.pzp-stage3-countdown.is-pop{
  animation: pzp-s3-count-pop 220ms ease-out;
}

.pzp-stage3-grid{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 280px;
  max-width: calc(100% - 28px);
  max-height: calc(100% - 28px);
  transform: translate(-50%, -50%) scale(0.97);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "t1 t2 t3"
    "t4 tg t6"
    "t7 t8 t9";
  gap: 10px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.pzp-stage3-grid.is-visible{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.pzp-stage3-grid.is-locked{
  pointer-events: none;
}

.pzp-stage3-grid.is-prep .pzp-stage3-tile--grid{
  border-color: rgba(255,74,74,0.90);
  box-shadow:
    0 0 0 1px rgba(255,120,120,0.26) inset,
    0 0 14px rgba(255,74,74,0.34);
}

.pzp-stage3-grid-gap{
  grid-area: tg;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.09);
  box-sizing: border-box;
}

.pzp-stage3-tile{
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.20);
  background:
    linear-gradient(180deg, rgba(245,248,252,0.10), rgba(255,255,255,0.03)),
    linear-gradient(180deg, rgba(20,24,30,0.98), rgba(12,14,18,0.98));
  color: #f4f8ff;
  font-size: 26px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 8px 16px rgba(0,0,0,0.35);
}

.pzp-stage3-tile.has-image{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: transparent;
  text-shadow: none;
}

.pzp-stage3-tile--grid{
  appearance: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 90ms ease, filter 120ms ease, border-color 140ms ease;
}

.pzp-stage3-tile--grid:active{
  transform: translateY(1px) scale(0.99);
}

.pzp-stage3-tile--preview{
  width: 164px;
  height: 164px;
  font-size: 42px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.07) inset,
    0 12px 22px rgba(0,0,0,0.42);
}

.pzp-stage3-tile.is-flash{
  animation: pzp-s3-tile-flash 220ms ease-out;
}

.pzp-stage3-tile.is-correct{
  border-color: rgba(92,215,134,0.62);
  filter: brightness(1.14);
  box-shadow:
    0 0 0 1px rgba(129,240,168,0.22) inset,
    0 0 16px rgba(92,215,134,0.34);
}

.pzp-stage3-tile.is-wrong{
  border-color: rgba(255,98,98,0.62);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(255,145,145,0.18) inset,
    0 0 16px rgba(255,96,96,0.32);
}

.pzp-stage3-feedback-layer{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.pzp-stage3-feedback{
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translate(-50%, 0);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffd6d6;
  border: 1px solid rgba(255,96,96,0.38);
  background: rgba(8,10,14,0.86);
  white-space: nowrap;
  animation: pzp-s1-feedback 620ms ease-out forwards;
}

.pzp-stage3-score{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 6;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(7,10,16,0.88);
  border: 1px solid rgba(245,212,106,0.34);
  opacity: 0;
  transition: opacity 180ms ease;
}

.pzp-stage3-score.is-visible{
  opacity: 1;
}

.pzp-stage3-action{
  transition: opacity 180ms ease, transform 180ms ease;
}

.pzp-stage3-action.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.pzp-stage3-action.is-disabled{
  opacity: 0.52;
  pointer-events: none;
}

@keyframes pzp-s3-count-pop{
  0% { transform: translate(-50%, -50%) scale(0.82); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes pzp-s3-tile-flash{
  0% { filter: brightness(0.96); transform: scale(0.98); }
  100% { filter: brightness(1.14); transform: scale(1); }
}

/* =======================================================
   Stage 4
======================================================= */
.pzp-stage4-body{
  gap: 8px;
}

.pzp-stage4-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pzp-stage4-head-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pzp-stage4-title{
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.pzp-stage4-title--counter{
  text-align: right;
  white-space: nowrap;
}

.pzp-stage4-instruction{
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
}

.pzp-stage4-arena{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  background:
    radial-gradient(360px 180px at 50% 8%, rgba(255,255,255,0.07), rgba(255,255,255,0.01)),
    linear-gradient(180deg, rgba(9,12,18,0.96), rgba(7,9,13,0.98));
}

.pzp-stage4-motion{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.pzp-stage4-motion.is-launching{
  animation: none;
}

.pzp-stage4-bg{
  position: absolute;
  inset: -10%;
  background:
    linear-gradient(180deg, rgba(185,190,198,0.12), rgba(24,28,34,0.10)),
    repeating-linear-gradient(
      180deg,
      rgba(240,246,255,0.08) 0 10px,
      rgba(10,12,17,0.06) 10px 30px
    ),
    linear-gradient(180deg, #1f262f 0%, #121821 100%);
  background-position: center 0%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(1.06) contrast(1.03);
  transform-origin: 50% 50%;
  transform: translate3d(0,0,0) scale(1);
  backface-visibility: hidden;
  will-change: transform;
}

.pzp-stage4-bg.has-image{
  background-position: center 0%;
  background-size: cover;
}

.pzp-stage4-motion.is-launching .pzp-stage4-bg{
  animation: pzp-s4-launch-zoom 4200ms cubic-bezier(.10,.46,.18,1) forwards;
}

.pzp-stage4-light-unit{
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  z-index: 8;
  width: 108px;
  border-radius: 28px;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(22,26,33,0.94), rgba(12,15,20,0.94));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 10px 18px rgba(0,0,0,0.42),
    0 0 0 1px rgba(255,255,255,0.05) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: opacity 260ms ease;
}

.pzp-stage4-light-unit.is-fading{
  opacity: 0.58;
}

.pzp-stage4-light{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(8,10,13,0.92);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.7);
  transition: background 80ms linear, box-shadow 100ms ease, filter 100ms ease;
}

.pzp-stage4-light--red{
  background-color: rgba(84,16,16,0.55);
}

.pzp-stage4-light--amber{
  background-color: rgba(88,66,14,0.40);
}

.pzp-stage4-light--green{
  background-color: rgba(16,76,28,0.52);
}

.pzp-stage4-light--red.is-active{
  background: radial-gradient(circle at 42% 34%, #ffd6d6 0%, #ff4b4b 45%, #8e1414 100%);
  box-shadow:
    0 0 10px rgba(255,58,58,0.88),
    0 0 20px rgba(255,58,58,0.56),
    0 0 34px rgba(255,58,58,0.34),
    inset 0 0 5px rgba(255,230,230,0.86);
}

.pzp-stage4-light--green.is-active{
  background: radial-gradient(circle at 42% 34%, #dcffe6 0%, #2fe96d 45%, #0f7a2c 100%);
  box-shadow:
    0 0 10px rgba(62,238,121,0.84),
    0 0 22px rgba(62,238,121,0.52),
    0 0 34px rgba(62,238,121,0.30),
    inset 0 0 5px rgba(230,255,239,0.84);
}

.pzp-stage4-cockpit{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 33.333%;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(24,29,36,0) 0%, rgba(8,10,14,0.82) 38%),
    linear-gradient(180deg, rgba(23,28,34,0.96), rgba(8,11,15,0.97));
  border-top: 1px solid rgba(255,255,255,0.10);
}

.pzp-stage4-cockpit-img{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: none;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateY(-38%);
  filter: saturate(1.04) contrast(1.05) drop-shadow(0 -10px 14px rgba(0,0,0,0.35));
}

.pzp-stage4-cockpit.has-image{
  background: none;
  border-top-color: rgba(255,255,255,0.08);
}

.pzp-stage4-cockpit.has-image .pzp-stage4-cockpit-img{
  display: block;
}

.pzp-stage4-feedback-layer{
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

.pzp-stage4-feedback{
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translate(-50%, 0);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffd6d6;
  border: 1px solid rgba(255,96,96,0.38);
  background: rgba(8,10,14,0.86);
  white-space: nowrap;
  animation: pzp-s1-feedback 620ms ease-out forwards;
}

.pzp-stage4-feedback.is-warn{
  color: #ffd6d6;
  border-color: rgba(255,96,96,0.38);
}

.pzp-stage4-score{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 10;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(7,10,16,0.88);
  border: 1px solid rgba(245,212,106,0.34);
  opacity: 0;
  transition: opacity 180ms ease;
}

.pzp-stage4-score.is-visible{
  opacity: 1;
}

.pzp-stage4-action.is-disabled{
  opacity: 0.52;
  pointer-events: none;
}

@keyframes pzp-s4-launch-zoom{
  0% {
    transform: translate3d(0,0,0) scale(1);
  }
  100% {
    transform: translate3d(0,0,0) scale(1.4);
  }
}

/* Gate screen (logged out) */
.pzp-screen--gate{
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.pzp-gate-card{
  width: 100%;
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  text-align:center;
}
.pzp-gate-title{
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.pzp-gate-sub{
  margin-top: 6px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}

/* Responsive: keep within smaller phones */
@media (max-width: 380px){
  .pitzero-pro-app{ padding: 10px; }
  .pitzero-lb-name{ max-width: 140px; }
  .pitzero-pro-frame{ border-radius: 16px; }
}

/* Final override: imported leaderboard visuals */
.pitzero-leaderboard.pitzero-lb .pitzero-lb-tab.is-active{
  background: #b30000;
  color: #fff;
}

.pitzero-leaderboard.pitzero-lb .pitzero-lb-head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 12px;
}

.pitzero-leaderboard.pitzero-lb .pitzero-lb-title{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Teko", sans-serif;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
}

@media (max-width: 640px){
  .pitzero-leaderboard.pitzero-lb .pitzero-lb-title{
    display: none;
  }
}

.pitzero-leaderboard.pitzero-lb .pitzero-lb-head .pitzero-lb-toggle:first-of-type .pitzero-lb-tab.is-active[href*="scope=all"]{
  background: #c09b2f !important;
  color: #fff !important;
}

/* Desktop tune: slightly smaller toggles, larger driver names */
@media (min-width: 721px){
  .pitzero-leaderboard.pitzero-lb .pitzero-lb-toggle{
    padding: 4px;
    gap: 5px;
  }

  .pitzero-leaderboard.pitzero-lb .pitzero-lb-tab{
    padding: 6px 9px;
    font-size: 11px;
  }

  .pitzero-leaderboard.pitzero-lb .pitzero-lb-name{
    font-size: 20px;
    line-height: 1.05;
  }
}

/* Mobile tune: larger driver names */
@media (max-width: 720px){
  .pitzero-leaderboard.pitzero-lb .pitzero-lb-name{
    font-size: 20px;
    line-height: 1.08;
  }
}