/* ============================================================
   Digital Pit Wall — dual-car telemetry board
   Modeled on a race-strategy pit-wall screen, themed for
   Grove Racing (#19 blue vs #26 gold), self-contained.
   ============================================================ */
:root{
  --pw-bg:#0f141b;
  --pw-bg2:#12181f;
  --pw-panel:rgba(255,255,255,.018);
  --pw-line:rgba(255,255,255,.07);
  --pw-line2:rgba(255,255,255,.12);
  --pw-text:#e9edf3;
  --pw-muted:#7c8698;
  --pw-a:#33a6ee;   /* car #19 blue  */
  --pw-a-dim:rgba(51,166,238,.16);
  --pw-b:#f5c518;   /* car #26 gold  */
  --pw-b-dim:rgba(245,197,24,.16);
  --pw-red:#ff5a52;
  --pw-green:#4fd08a;
}

.pw-body{
  background:radial-gradient(1200px 700px at 50% -10%, #182029 0%, var(--pw-bg) 55%, #0b0f14 100%);
  color:var(--pw-text);
  font-family:"Titillium Web","Segoe UI Semibold",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
}
.pw-mini-label{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pw-muted); font-weight:600; margin-bottom:4px; line-height:1.2;
}

/* ---------------- control strip ---------------- */
.pw-controls{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  padding:14px 26px; border-bottom:1px solid var(--pw-line);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.pw-ctl{display:flex; flex-direction:column; gap:4px;}
.pw-ctl span{font-size:10px; letter-spacing:.16em; color:var(--pw-muted); font-weight:600;}
.pw-ctl select{
  background:#0c1219; color:var(--pw-text); border:1px solid var(--pw-line2);
  border-radius:6px; padding:8px 12px; font-family:inherit; font-size:13px; min-width:170px;
}
.pw-btn{
  border:1px solid var(--pw-line2); border-radius:6px; padding:9px 20px; cursor:pointer;
  font-family:inherit; font-weight:700; letter-spacing:.08em; font-size:13px; background:#141b23; color:var(--pw-text);
}
.pw-btn.go{background:var(--pw-a); border-color:var(--pw-a); color:#04121d;}
.pw-btn.go:disabled{opacity:.4; cursor:not-allowed;}
.pw-btn.stop{background:transparent;}
.pw-btn:hover:not(:disabled){filter:brightness(1.12);}
.pw-status{
  margin-left:auto; font-size:11px; letter-spacing:.14em; color:var(--pw-muted);
  text-transform:uppercase; align-self:center;
}
.pw-status.live{color:var(--pw-green);}
.pw-status.live::before{content:"● "; color:var(--pw-green);}

/* ---------------- main 3-column stage ---------------- */
.pw-stage{
  display:grid; grid-template-columns:1fr 1.22fr 1fr; gap:0;
  padding:0; align-items:stretch;
}
.pw-car{padding:22px 26px; display:flex; flex-direction:column; gap:16px; position:relative;}
.pw-left{border-right:1px solid var(--pw-line);}
.pw-right{border-left:1px solid var(--pw-line);}
.pw-right{ text-align:right; }

.pw-team{font-size:12px; letter-spacing:.28em; font-weight:700; color:var(--pw-muted);}
.pw-left  .pw-team{color:var(--pw-a);}
.pw-right .pw-team{color:var(--pw-b);}

.pw-driver-row,.pw-posgap,.pw-laprow{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.pw-driver{font-size:26px; font-weight:900; letter-spacing:.02em; line-height:1;}
.pw-left  .pw-driver{color:var(--pw-a);}
.pw-right .pw-driver{color:var(--pw-b);}
.pw-num{
  font-weight:700; font-size:15px; padding:4px 10px; border-radius:5px; align-self:flex-start;
  background:var(--pw-a-dim); color:var(--pw-a);
}
.pw-right .pw-num{background:var(--pw-b-dim); color:var(--pw-b);}

.pw-pos{font-size:64px; font-weight:900; line-height:.85; letter-spacing:-.02em;}
.pw-gap{font-size:22px; font-weight:700; align-self:flex-end; letter-spacing:.02em;}
.pw-left  .pw-gap{color:var(--pw-a);}
.pw-right .pw-gap{color:var(--pw-b);}
.pw-gap.lead{color:var(--pw-green);}

.pw-lap{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums;}
.pw-lap.best{color:var(--pw-text);}

.pw-big{font-size:44px; font-weight:900; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.pw-unit{font-size:15px; font-weight:600; color:var(--pw-muted); margin-left:6px; letter-spacing:.06em;}

/* 3D presentation bay + sculpted top-down car */
.pw-carart{
  height:190px; display:flex; align-items:center; justify-content:center;
  margin:0; perspective:700px;
}
.pw-car-bay{
  width:min(100%,300px); height:184px; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.075); border-radius:16px;
  background:radial-gradient(ellipse at 50% 10%,color-mix(in srgb,var(--car-accent) 13%,transparent),transparent 55%),
             linear-gradient(180deg,#111820 0%,#090e14 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 14px 30px rgba(0,0,0,.2);
}
.pw-bay-light{
  position:absolute; left:50%; top:-56px; width:180px; height:205px; transform:translateX(-50%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--car-accent) 18%,transparent),transparent 82%);
  clip-path:polygon(35% 0,65% 0,100% 100%,0 100%); filter:blur(12px); opacity:.8;
}
.pw-bay-floor{
  position:absolute; inset:42% -15% -24%; transform:rotateX(64deg); transform-origin:50% 100%;
  border-top:1px solid color-mix(in srgb,var(--car-accent) 25%,transparent);
  background:repeating-linear-gradient(90deg,transparent 0 49px,rgba(255,255,255,.035) 50px),
             repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.045) 32px);
  -webkit-mask-image:linear-gradient(to top,#000,transparent 95%); mask-image:linear-gradient(to top,#000,transparent 95%);
}
.pw-bay-floor i{position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(255,255,255,.035); transform-origin:top;}
.pw-bay-floor i:nth-child(1){transform:rotate(28deg)} .pw-bay-floor i:nth-child(2){transform:rotate(14deg)}
.pw-bay-floor i:nth-child(4){transform:rotate(-14deg)} .pw-bay-floor i:nth-child(5){transform:rotate(-28deg)}
.pw-road-lines{
  position:absolute; z-index:1; inset:18% 8% -18%;
  transform:perspective(260px) rotateX(61deg); transform-origin:50% 100%;
  pointer-events:none; opacity:.72;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 28%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 28%,#000 100%);
}
.pw-road-lines i{
  position:absolute; top:-48px; bottom:-48px; width:2px;
  background:repeating-linear-gradient(to bottom,rgba(225,232,238,.76) 0 13px,transparent 13px 48px);
  background-position:0 var(--road-shift); box-shadow:0 0 2px rgba(220,232,242,.16);
}
.pw-road-lines i:first-child{left:15%; transform:rotate(-5deg); transform-origin:bottom;}
.pw-road-lines i:last-child{right:15%; transform:rotate(5deg); transform-origin:bottom;}
.pw-car-model{
  position:absolute; z-index:2; left:50%; top:-27px; height:236px; width:auto;
  transform:translateX(-50%) perspective(260px) rotateX(61deg); transform-origin:50% 96%;
  filter:drop-shadow(0 19px 9px rgba(0,0,0,.82)); transition:transform .35s ease,filter .35s ease;
}
.pw-car-bay::after{
  content:""; position:absolute; z-index:1; left:50%; bottom:8px; width:116px; height:24px;
  transform:translateX(-50%) perspective(240px) rotateX(64deg);
  background:radial-gradient(ellipse,rgba(0,0,0,.86),rgba(0,0,0,0) 72%); filter:blur(3px);
}
.pw-car-bay:hover .pw-car-model{transform:translateX(-50%) perspective(260px) rotateX(59deg) translateY(-2px); filter:drop-shadow(0 22px 11px rgba(0,0,0,.84));}
.pw-car-shell{transform-origin:90px 130px;}
.pw-right .pw-car-shell{transform:rotate(.9deg);}
.pw-audio-toggle{
  display:flex; align-items:center; gap:8px; width:max-content; margin:-8px auto 0;
  color:var(--pw-muted); font-size:10px; font-weight:700; letter-spacing:.14em;
  cursor:pointer; user-select:none;
}
.pw-audio-toggle input{position:absolute; opacity:0; pointer-events:none;}
.pw-audio-toggle span{width:24px; height:10px; border:1px solid rgba(255,255,255,.22); position:relative; background:#0a0f14;}
.pw-audio-toggle span::after{content:""; position:absolute; width:6px; height:6px; left:2px; top:1px; background:#596371; transition:transform .15s,background .15s;}
.pw-audio-toggle input:checked+span::after{transform:translateX(12px); background:var(--car-sound,var(--pw-a)); box-shadow:0 0 7px var(--car-sound,var(--pw-a));}
.pw-left .pw-audio-toggle{--car-sound:var(--pw-a)}
.pw-right .pw-audio-toggle{--car-sound:var(--pw-b)}

/* engine block: gauge + pedals */
.pw-engine{display:flex; gap:16px; align-items:center;}
.pw-right .pw-engine{flex-direction:row-reverse;}
.pw-gauge{width:120px; flex:0 0 120px;}
.pw-pedals{flex:1; display:flex; flex-direction:column; gap:10px;}
.pw-pedal{display:flex; flex-direction:column; gap:4px;}
.pw-bar{height:6px; border-radius:1px; background:rgba(255,255,255,.055); overflow:hidden; position:relative;}
.pw-bar.wide{height:7px;}
.pw-bar .fill{display:block; height:100%; width:0%; border-radius:0; transition:width .12s linear;}
.pw-right .pw-bar .fill{margin-left:auto;}
.fill.thr{background:linear-gradient(90deg,#2c9a5f,#4fd08a);}
.fill.brk{background:linear-gradient(90deg,#c33,#ff6a60);}
.fill.fuel{background:linear-gradient(90deg,#2c9a5f,#8fd94f);}
.fill.life-a{background:linear-gradient(90deg,#1f6ea0,var(--pw-a));}
.fill.life-b{background:linear-gradient(90deg,#a8850f,var(--pw-b));}

.pw-fuel .pw-pit{margin-top:6px; font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--pw-muted);}
.pw-fuel .pw-pit.pit{color:var(--pw-red);}
.pw-fuel .pw-pit.ok{color:var(--pw-green);}

/* ---------------- center ---------------- */
.pw-center{padding:22px 20px; display:flex; flex-direction:column; gap:16px;}
.pw-center-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;}
.pw-circuit-name{font-size:19px; font-weight:700; letter-spacing:.02em;}
.pw-lapcount{text-align:center;}
.pw-lapno{font-size:34px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums;}
.pw-lapof{font-size:15px; color:var(--pw-muted); font-weight:600;}
.pw-weather{text-align:right;}
.pw-weather-val{font-size:22px; font-weight:700;}
.pw-weather-val em{font-size:12px; font-style:normal; color:var(--pw-muted); letter-spacing:.08em; text-transform:uppercase; margin-left:4px;}
.pw-weather-sub{font-size:10px; color:var(--pw-muted); letter-spacing:.1em; margin-top:2px;}

.pw-map-wrap{
  background:var(--pw-panel); border:1px solid var(--pw-line); border-radius:12px;
  padding:8px; flex:0 0 auto;
}
#c-map{width:100%; height:230px; display:block;}
#c-map .track-base{fill:none; stroke:rgba(210,220,230,.42); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round;}
#c-map .track-glow{fill:none; stroke:rgba(210,220,230,.055); stroke-width:5.5; stroke-linejoin:round; stroke-linecap:round; filter:none;}
#c-map .dot-a{fill:var(--pw-a); stroke:#071018; stroke-width:.8;}
#c-map .dot-b{fill:var(--pw-b); stroke:#171304; stroke-width:.8;}

.pw-trace{background:var(--pw-panel); border:1px solid var(--pw-line); border-radius:12px; padding:10px 12px;}
#c-trace{width:100%; height:150px; display:block;}
.dot-a,.dot-b{display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle;}
.dot-a{background:var(--pw-a);} .dot-b{background:var(--pw-b);}

.pw-raw{background:var(--pw-panel); border:1px solid var(--pw-line); border-radius:12px; padding:10px 14px;}
.pw-raw-tbl{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums;}
.pw-raw-tbl th{text-align:left; font-weight:600; color:var(--pw-muted); font-size:12px; padding:3px 0; letter-spacing:.04em;}
.pw-raw-tbl td{text-align:right; font-size:14px; font-weight:700; padding:3px 8px; width:70px;}
.pw-raw-tbl td.a{color:var(--pw-a);} .pw-raw-tbl td.b{color:var(--pw-b);}
.pw-raw-tbl td.u{color:var(--pw-muted); font-weight:600; font-size:11px; width:40px;}
.pw-datarate{margin-top:8px; font-size:11px; letter-spacing:.12em; color:var(--pw-muted);}
.pw-datarate strong{color:var(--pw-text);}

/* ---------------- bottom band ---------------- */
.pw-band{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:0;
  border-top:1px solid var(--pw-line); border-bottom:1px solid var(--pw-line);
}
.pw-band-cell{padding:16px 26px; border-right:1px solid var(--pw-line);}
.pw-band-cell:last-child{border-right:none;}
.pw-tyres{display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:220px;}
.pw-tyres i{
  display:block; height:52px; border-radius:8px; background:var(--thermal-fallback,#1a222b);
  border:1px solid var(--pw-line2); position:relative; font-style:normal; overflow:hidden;
  box-shadow:inset 0 0 12px rgba(0,0,0,.48),0 0 0 1px rgba(0,0,0,.25);
}
.pw-tyres i::after{
  content:attr(data-lbl); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:2; font-size:12px; font-weight:900; color:#fff; letter-spacing:.04em;
  text-shadow:0 1px 3px #000,0 0 7px #000;
}
.pw-tyres canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.pw-tyres i::before{content:""; position:absolute; z-index:1; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -10px 16px rgba(0,0,0,.25); pointer-events:none;}
.pw-life-row{display:flex; flex-direction:column; gap:8px;}
.pw-life{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700;}
.pw-life span{width:34px; color:var(--pw-muted);}
.pw-life .pw-bar{flex:1;}
.pw-life b{width:44px; text-align:right; font-variant-numeric:tabular-nums;}
.pw-pitwin{display:flex; gap:14px; margin-top:4px;}
.pw-pitwin b{font-size:14px; font-weight:700; letter-spacing:.04em;}
.pw-pitwin b.a{color:var(--pw-a);} .pw-pitwin b.b{color:var(--pw-b);}

/* ---------------- predictive timeline ---------------- */
.pw-timeline{padding:16px 26px 26px;}
.pw-ticks{display:flex; align-items:flex-end; gap:3px; height:56px; margin-top:14px;}
.pw-ticks .tk{flex:1; height:42%; background:rgba(255,255,255,.10); border-radius:0; position:relative; min-width:4px;}
.pw-ticks .tk.done{height:64%; background:rgba(255,255,255,.30);}
.pw-ticks .tk.now{height:100%; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.5);}
.pw-ticks .tk .mk{position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:9px;}
.pw-ticks .tk.pit-a{box-shadow:inset 0 -18px 0 var(--pw-a-dim);}
.pw-ticks .tk.pit-b{box-shadow:inset 0 -18px 0 var(--pw-b-dim);}
.pw-ticks .tk .lbl{position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); font-size:9px; color:var(--pw-muted);}

/* ---------------- responsive ---------------- */
@media(max-width:1080px){
  .pw-stage{grid-template-columns:1fr;}
  .pw-left{border-right:none; border-bottom:1px solid var(--pw-line);}
  .pw-right{border-left:none; border-top:1px solid var(--pw-line); text-align:left;}
  .pw-right .pw-team,.pw-right .pw-driver-row,.pw-right .pw-posgap,.pw-right .pw-engine{flex-direction:row; text-align:left;}
  .pw-band{grid-template-columns:1fr;}
  .pw-band-cell{border-right:none; border-bottom:1px solid var(--pw-line);}
}