/* ============================================================
   RealRacer.ai — device mockups (CSS, no images)
   Phone + watch + broadcast HUD chip. Product-truth widgets used
   in the home "garage" collage and the sim/circuit device sections.
   ============================================================ */
.dl{font-family:var(--label);font-size:8px;letter-spacing:0.2em;color:var(--faint);text-transform:uppercase;text-align:center}

/* phone */
.phone{width:272px;height:560px;background:#060609;border:3px solid #1d1d28;border-radius:42px;
  padding:14px 12px;box-shadow:0 24px 70px rgba(0,0,0,0.55);position:relative;overflow:hidden;flex-shrink:0}
.phone::before{content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);width:86px;height:22px;background:#0c0c12;border-radius:12px;z-index:2}
.pscreen{width:100%;height:100%;background:linear-gradient(180deg,#0a0a11,#07070b);border-radius:30px;
  padding:40px 16px 16px;display:flex;flex-direction:column;font-family:var(--mono);overflow:hidden}
.p-status{display:flex;justify-content:space-between;align-items:center;font-family:var(--label);font-size:9px;color:var(--faint);letter-spacing:0.08em;margin-bottom:12px}
.p-live{color:#ff5b5b}.p-live::before{content:'\25CF ';font-size:8px}
.p-venue{font-family:var(--label);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:14px}
.p-delta{font-weight:700;font-size:64px;line-height:1.05;color:var(--purple);text-align:center;letter-spacing:-0.04em;font-variant-numeric:tabular-nums;margin-bottom:12px;font-family:var(--mono)}
.p-rows{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:6px;font-family:var(--mono)}
.p-rows b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.p-rows .pred b{color:var(--purple)}
.p-sect{display:flex;gap:6px;margin:12px 0 16px}
.p-sect i{height:6px;border-radius:4px;flex:1;display:block}
.p-sect .s1{background:var(--purple)}.p-sect .s2{background:var(--green)}.p-sect .s3{background:var(--orange)}
.p-tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:auto}
.p-tile{background:#0e0e16;border:1px solid var(--border);border-radius:10px;padding:10px 8px}
.p-tile .tl{font-family:var(--label);font-size:7.5px;letter-spacing:0.12em;color:var(--faint);text-transform:uppercase;margin-bottom:4px}
.p-tile .tv{font-weight:700;font-size:17px;color:var(--text);font-variant-numeric:tabular-nums;font-family:var(--mono)}
.p-tile .tv.gain{color:var(--green)}
.p-coachcard{background:#0e0e16;border:1px solid var(--border);border-left:3px solid var(--green);border-radius:10px;padding:12px;margin-bottom:10px}
.p-coachcard .cl{font-family:var(--label);font-size:7.5px;letter-spacing:0.14em;color:var(--green);text-transform:uppercase;margin-bottom:6px}
.p-coachcard .ct{font-family:var(--body);font-size:11.5px;color:var(--muted);line-height:1.5}
.p-coachcard .ct b{color:var(--text)}
.p-corner{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:#0e0e16;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;font-size:11px;font-family:var(--mono)}
.p-corner .cn{font-family:var(--label);font-size:9px;letter-spacing:0.1em;color:var(--muted)}
.p-corner .cv{font-weight:700;font-variant-numeric:tabular-nums}
.p-corner .cv.gain{color:var(--green)}.p-corner .cv.loss{color:var(--red)}
.p-pb{display:inline-flex;align-self:center;font-family:var(--label);font-size:8.5px;letter-spacing:0.14em;color:var(--purple);
  border:1px solid rgba(180,106,255,0.5);border-radius:100px;padding:4px 12px;margin:0 auto 12px;text-transform:uppercase}
.p-talk{margin-top:auto;background:var(--green);color:#0a0a10;border-radius:10px;text-align:center;font-family:var(--label);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;padding:11px 0}

/* watch */
.watch{width:224px;height:268px;background:#060609;border:3px solid #1d1d28;border-radius:56px;padding:12px;
  box-shadow:0 24px 70px rgba(0,0,0,0.55);position:relative;flex-shrink:0}
.watch::after{content:'';position:absolute;right:-9px;top:70px;width:6px;height:34px;background:#1d1d28;border-radius:3px}
.wscreen{width:100%;height:100%;background:linear-gradient(180deg,#0a0a11,#07070b);border-radius:44px;padding:18px 16px 14px;display:flex;flex-direction:column;font-family:var(--mono);overflow:hidden}
.w-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--label);font-size:8px;color:var(--muted);letter-spacing:0.1em;margin-bottom:8px}
.w-hz{color:var(--accent);border:1px solid rgba(var(--accent-rgb),0.5);border-radius:100px;padding:1px 7px}
.w-hr{color:var(--green)}
.w-delta{font-weight:700;font-size:40px;line-height:1;color:var(--purple);letter-spacing:-0.04em;font-variant-numeric:tabular-nums;margin-bottom:6px;font-family:var(--mono)}
.w-row{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:4px;font-family:var(--mono)}
.w-row b{color:var(--text);font-variant-numeric:tabular-nums}
.w-best{font-family:var(--label);font-size:7px;letter-spacing:0.12em;color:var(--purple);border:1px solid rgba(180,106,255,0.5);border-radius:100px;padding:2px 8px;text-transform:uppercase}
.w-sect{display:flex;gap:4px;margin:8px 0}
.w-sect i{height:4px;border-radius:3px;flex:1;display:block}
.w-sect .s1{background:var(--purple)}.w-sect .s2{background:var(--accent)}
.w-spot{margin-top:auto;background:#0e0e16;border:1px solid var(--border);border-left:2px solid var(--cyan);border-radius:8px;padding:8px 9px;font-family:var(--body);font-size:9.5px;color:var(--muted);line-height:1.4}
.w-spot b{display:block;font-family:var(--label);font-size:6.5px;letter-spacing:0.14em;color:var(--cyan);text-transform:uppercase;margin-bottom:3px}

/* collage — fg/bg device mix (home garage) */
.collage{position:relative;height:660px;max-width:880px;margin:0 auto}
.collage .bgp{position:absolute;left:3%;top:48px;transform:rotate(-7deg) scale(0.92);opacity:0.35;filter:saturate(0.75);z-index:1}
.collage .fgp{position:absolute;left:50%;transform:translateX(-58%);top:0;z-index:3}
.collage .fgw{position:absolute;right:5%;bottom:44px;z-index:4;transform:rotate(5deg)}
.collage::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:120px;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;z-index:5}
.collage-tags{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.device-tag{font-family:var(--label);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;padding:5px 12px;border-radius:100px}
.device-tag.live{color:var(--green);border:1px solid rgba(0,200,100,0.45)}
.device-tag.rolling{color:var(--amber);border:1px solid rgba(251,191,36,0.45)}
.devices-note{margin-top:16px;text-align:center;font-size:13px;color:var(--faint)}

/* broadcast HUD chip (sim) */
.hudchip{background:rgba(10,10,16,0.78);border:1px solid var(--border);border-radius:14px;padding:26px 30px}
.hudchip .hl{font-family:var(--label);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.hudchip .hv{font-family:var(--mono);font-weight:700;font-size:44px;line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.hudchip .hv.best{color:var(--purple);font-size:30px}
.hudchip .sectors{display:flex;gap:8px;margin-top:16px}
.hudchip .sectors span{height:6px;border-radius:4px;flex:1}
.hudchip .sectors .s1{background:var(--purple)}.hudchip .sectors .s2{background:var(--green)}.hudchip .sectors .s3{background:var(--orange)}

/* devices row (sim/circuit) */
.devices-wrap{display:flex;gap:28px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.device-col{display:flex;flex-direction:column;align-items:center;gap:16px}

@media (max-width:880px){
  .collage{height:auto;display:flex;flex-direction:column;align-items:center;gap:24px}
  .collage .bgp{display:none}
  .collage .fgp,.collage .fgw{position:static;transform:none}
  .collage::after{display:none}
}