/* RaceReadyCheck — brand stylesheet (vanilla, self-contained) */
:root{
  --green:#1ab35b; --green-d:#0e7d4a; --cyan:#00a5d2; --cyan-d:#0b6b86; --teal-d:#0b3b40;
  --ink:#08252b; --muted:#5f7d7b; --line:#e4efec; --card:#ffffff;
  --accent:#1ad06a;
  --shadow-text:1px 1px 2px rgba(0,25,28,.55);
  --shadow-card:0 14px 34px rgba(0,30,32,.28);
  --radius:16px;
  --font:"Montserrat","Arial Black","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:#fff; min-height:100vh; line-height:1.6;
  background:url("../img/bg.svg") center center / cover fixed no-repeat, #0d7a6e;
  display:flex; flex-direction:column;   /* sticky footer: push .footer to the bottom */
}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px;width:100%;flex:1 0 auto;box-sizing:border-box}
.footer{flex-shrink:0}

/* nav */
.nav{display:flex;align-items:center;gap:14px;padding:16px 0;flex-wrap:wrap;position:relative}
.navroom{position:absolute;left:50%;transform:translateX(-50%);font-weight:800;font-size:36px;letter-spacing:.02em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.28);white-space:nowrap;max-width:40%;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.brandlock{display:flex;align-items:center;gap:13px}
.nav .logo{width:106px;height:106px;filter:drop-shadow(0 4px 10px rgba(0,25,28,.4))}
.brand{display:flex;flex-direction:column;line-height:.96;font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;text-shadow:var(--shadow-text)}
.brand span{font-size:36px}
.nav .sp{flex:1}
/* tabs live on their own centered row so the account stays pinned right */
.tabbar{display:flex;justify-content:center;flex-wrap:wrap;padding:0 0 10px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tab{border:none;background:rgba(255,255,255,.14);color:#fff;font-family:var(--font);font-weight:700;
  font-size:13px;text-transform:uppercase;letter-spacing:.03em;padding:9px 14px;border-radius:10px;cursor:pointer}
.tab:hover{background:rgba(255,255,255,.24)}
.tab.active{background:#fff;color:var(--cyan-d)}
/* quick-switch buttons for your active lobbies (left of Home, pipe-separated) */
.lobbytabs{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.lobbytab{border:none;background:rgba(255,255,255,.14);color:#fff;font-family:var(--font);font-weight:800;
  font-size:13px;padding:9px 13px;border-radius:10px;cursor:pointer;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobbytab:hover{background:rgba(255,255,255,.26)}
.lobbytab.on{background:#fff;color:var(--green-d)}
.lobbypipe{color:rgba(255,255,255,.5);font-weight:800;padding:0 2px;user-select:none}

/* cross-link to LetsRollTonight (styled like LRT: red->purple) — small, in the nav */
.xlink{display:inline-flex;align-items:center;gap:7px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:11.5px;padding:7px 13px;border-radius:22px;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#ed1c24,#591d85);border:2px solid rgba(255,255,255,.5);box-shadow:var(--shadow-card)}
.xlink:hover{border-color:#fff}
.xlink .dot{width:8px;height:8px;border-radius:50%;background:#fff}

/* hero */
.hero{text-align:center;padding:30px 0 26px}
.hero h1{font-weight:800;font-size:clamp(32px,6vw,56px);line-height:1.05;margin:0 auto;max-width:820px;
  text-transform:uppercase;text-shadow:var(--shadow-text)}
.accent{display:block;width:120px;height:6px;background:var(--accent);border-radius:3px;margin:18px auto 0;box-shadow:var(--shadow-text)}
.hero p{font-weight:600;font-size:clamp(15px,2.3vw,19px);max-width:660px;margin:18px auto 0;text-shadow:var(--shadow-text);opacity:.97}

/* sections */
.view{display:none;padding-bottom:60px}
.view.active{display:block}
.view-head{text-align:center;margin:8px 0 22px}
.view-head h2{font-weight:800;font-size:clamp(22px,3.5vw,30px);text-transform:uppercase;text-shadow:var(--shadow-text);margin:0}
.view-head p{font-weight:600;opacity:.92;text-shadow:var(--shadow-text);margin:6px 0 0}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px}
.controls input,.controls select{font-family:var(--font);font-weight:600;font-size:14px;padding:10px 12px;border:none;
  border-radius:10px;color:var(--ink);min-width:140px}
.controls input{flex:1;max-width:320px}
.chip{border:none;background:rgba(255,255,255,.16);color:#fff;font-family:var(--font);font-weight:700;font-size:13px;
  padding:9px 13px;border-radius:20px;cursor:pointer;text-shadow:var(--shadow-text)}
.chip.on{background:#fff;color:var(--cyan-d);text-shadow:none}

/* class badges */
.cls{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;padding:0 7px;border-radius:7px;
  font-weight:800;font-size:13px;color:#fff}
.cls-D{background:#7b8a93} .cls-C{background:#c77f33} .cls-B{background:#d6a72b} .cls-A{background:#c0392b}
.cls-S1{background:#8e44ad} .cls-S2{background:#2e6fd0} .cls-R{background:#12a37a} .cls-X{background:#222b33}

/* cards grid for cars */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.carcard{background:var(--card);color:var(--ink);border-radius:12px;box-shadow:var(--shadow-card);padding:12px 14px;
  display:flex;align-items:center;gap:10px}
.carcard .ci{flex:1;min-width:0}
.carcard .cname{font-weight:700;font-size:14px;line-height:1.25}
.carcard .cmeta{font-size:12px;color:var(--muted);font-weight:600;margin-top:3px}
.carcard .pi{font-weight:800;font-size:13px;color:var(--ink);background:#eef5f3;border-radius:6px;padding:3px 8px}
.star{border:none;background:none;cursor:pointer;font-size:20px;line-height:1;color:#c7d3d0}
.star.on{color:#f5b301}
.count{text-align:center;font-weight:600;opacity:.85;text-shadow:var(--shadow-text);margin-bottom:14px;font-size:14px}

/* ready check */
.rc-card{background:var(--card);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-card);
  max-width:680px;margin:0 auto;overflow:hidden}
.rc-head{background:linear-gradient(135deg,var(--green-d),var(--cyan));color:#fff;padding:16px 20px;font-weight:800;font-size:18px}
.rc-body{padding:16px 18px}
.pinned{background:#e9fff3;border:2px solid #1ad06a;border-radius:10px;padding:12px 14px;margin-bottom:14px}
.pinned .tag{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--green-d)}
.rc-list{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.rc-list li{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.rc-list li:last-child{border-bottom:none}
.rc-list .cn{flex:1;font-weight:600;font-size:14px}

/* garage grid */
.garage{overflow-x:auto}
.gtable{border-collapse:separate;border-spacing:6px;min-width:760px;margin:0 auto}
.gtable th{color:#fff;font-weight:800;font-size:12px;text-transform:uppercase;text-shadow:var(--shadow-text);padding:6px}
.gtable td{background:var(--card);color:var(--ink);border-radius:10px;padding:8px 10px;min-width:120px;vertical-align:top;cursor:pointer}
.gtable td:hover{outline:2px solid var(--accent)}
.gtable .gc{font-weight:700;font-size:12.5px;line-height:1.25}
.gtable .gp{font-size:11px;color:var(--muted);font-weight:700;margin-top:3px}
.gtable .gempty{color:#aab8b5;font-weight:700;font-size:13px}
.gtable td.set{background:#eafff4;box-shadow:inset 0 0 0 2px #b6f0d2}

/* races gallery */
.races{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.race{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-card);cursor:pointer}
.race img{width:100%;height:130px;object-fit:cover;display:block;background:#0b3b40}
.race .rn{color:var(--ink);font-weight:700;font-size:13px;padding:9px 11px}

/* tunes */
.tunes-credit{display:flex;align-items:flex-start;gap:10px;width:fit-content;max-width:100%;margin:0 auto 14px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:12px;box-shadow:var(--shadow-card);padding:12px 16px;color:var(--ink);font-weight:600;font-size:13.5px;line-height:1.5}
.tunes-credit .tc-ico{font-size:18px;line-height:1.3}
.tunes-credit b{font-weight:800}
.tunes-credit a{color:var(--green-d);font-weight:800;text-decoration:underline}
.tunes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;align-items:stretch}
.tune{display:flex;flex-direction:column;background:var(--card);color:var(--ink);border-radius:12px;box-shadow:var(--shadow-card);padding:13px 15px}
.tune-h{display:flex;align-items:flex-start;gap:8px}
.tune-h .cls{flex:0 0 auto}
.tune-h .tc{font-weight:800;font-size:14px;line-height:1.25}
.tune-meta{margin:9px 0 11px;display:flex;flex-direction:column;gap:3px}
.tune-meta .tmv{font-size:12px;color:var(--muted);font-weight:600;line-height:1.3}
.tune-meta .tby{color:var(--ink);opacity:.85}
.tune-meta .tinfo{font-style:italic;color:#e07b1f;font-weight:700}
.tune .share{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-weight:800;
  letter-spacing:.06em;font-size:14px;padding:7px 12px;border-radius:8px;cursor:pointer}
.tune .share:hover{background:var(--cyan-d)}

/* modal / lightbox / picker */
.modal{position:fixed;inset:0;background:rgba(0,20,22,.62);display:none;align-items:center;justify-content:center;padding:20px;z-index:60}
.modal.show{display:flex}
.modal .box{background:var(--card);color:var(--ink);border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.45);
  max-width:560px;width:100%;max-height:84vh;overflow:auto;position:relative}
.modal .lb-img{max-width:92vw;max-height:84vh;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal .mhead{padding:16px 18px;font-weight:800;font-size:17px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.modal .mbody{padding:8px 12px}
.modal .pick{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.modal .pick:hover{background:#eafff4}
.modal .pick .cn{flex:1;font-weight:600;font-size:14px}
.modal .pick.tuned{background:#eafff4;box-shadow:inset 0 0 0 2px #b6f0d2}
.tunebadge{display:inline-block;font-size:10px;font-weight:800;color:#0e7d4a;background:#d6f5e4;border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:middle}
.modal .pick .picktunes{display:block;font-size:11px;font-weight:700;color:#0e7d4a;line-height:1.4;margin-top:2px}
/* tune block shown under a car in the Eligible / go-to picker modals */
.ctunes{display:block;margin-top:4px}
.ctune{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;margin-top:3px;font-size:11.5px;line-height:1.3}
.ctune-code{border:none;background:#16302c;color:#9ff7c6;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:11px;padding:2px 8px;border-radius:6px;cursor:pointer;white-space:nowrap}
.ctune-code:hover{background:#1d423b}
.ctune-by{font-weight:700;color:#0e7d4a}
.ctune-note{flex-basis:100%;color:var(--muted);font-weight:600}
.pickfilters{margin:8px 0 2px}
.pickfilters label{min-width:96px;font-size:10px}
.pickfilters select{padding:6px 8px;font-size:12.5px}
.mclose{position:absolute;top:12px;right:14px;border:none;background:none;font-size:24px;font-weight:800;cursor:pointer;color:#345}
.psearch{width:100%;border:2px solid #e3eeec;border-radius:10px;padding:10px;font-family:var(--font);font-weight:600;margin:10px 0}
.mclear{display:block;width:100%;border:none;background:#f0d6d6;color:#a01228;font-weight:800;padding:10px;border-radius:8px;cursor:pointer;margin:8px 0}
/* in-room popup panels (Eligible Cars / My Garage / Routes & Map) */
.panelrow{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 2px}
.panelrow label{display:flex;flex-direction:column;gap:3px;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);flex:1;min-width:120px}
.panelrow select,.rmapsel{width:100%;border:2px solid #e3eeec;border-radius:10px;padding:9px;font-family:var(--font);font-weight:700;font-size:14px;background:#fff;color:var(--ink)}
.rmapsel{margin:4px 0 12px}
.gtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.modal .box.rmap{max-width:760px}
.rmapimg{display:block;max-width:100%;max-height:62vh;width:auto;height:auto;margin:0 auto;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.rmapname{text-align:center;font-weight:800;font-size:18px;margin:10px 0 2px}
.rmapset{width:100%;margin-top:12px}

/* side docks — persistent Routes/Map panels that flank the centered room (720px).
   They fill the gutter on each side (≈2x wider on big screens) with a ~quarter-inch gap
   between all three windows, and start below the nav/tabs so they don't obstruct them. */
/* Four quadrants flank the centre column, LOCKED to its measured rect (--qcol-* set by
   syncQuadFrame in app.js) so they stay aligned with it and scroll with the page. */
.dockpanel{position:absolute;z-index:55;display:flex;flex-direction:column;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:none;overflow:hidden;
  --qgap:12px;
  --qw:min(560px, calc(var(--qcol-left, 360px) - 22px));
  --qh:calc((var(--qcol-h, 600px) - var(--qgap)) / 2);
  transition:top .38s cubic-bezier(.34,.1,.2,1), left .38s cubic-bezier(.34,.1,.2,1), height .38s cubic-bezier(.34,.1,.2,1), opacity .28s}
.dq-l{left:calc(var(--qcol-left) - 14px - var(--qw));width:var(--qw)}
.dq-r{left:calc(var(--qcol-right) + 14px);width:var(--qw)}
.dq-top{top:var(--qcol-top);height:var(--qh)}
.dq-bottom{top:calc(var(--qcol-top) + var(--qh) + var(--qgap));height:var(--qh)}
/* only panel open on its side → fill the whole column height (bottom lines up with the centre card) */
.dq-solo{top:var(--qcol-top);height:var(--qcol-h)}
.dockhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;font-weight:800;font-size:15px;border-bottom:1px solid var(--line);background:#fff;flex-shrink:0}
.dockx{border:none;background:none;font-size:22px;font-weight:800;cursor:pointer;color:#345;line-height:1;padding:0 4px}
.dockx:hover{color:var(--green-d)}
.dockbody{padding:12px;overflow:auto;flex:1;min-height:0}
.dockbody .rmapsel{width:100%;margin:0 0 10px}
/* not enough room to flank — stack as full-width top/bottom sheets. */
@media (max-width:1200px){
  .dockpanel{position:fixed;left:8px;right:8px;width:auto;max-width:none;height:auto;transition:opacity .25s}
  .dq-l,.dq-r{left:8px;right:8px;width:auto}
  .dq-top{top:132px;height:auto;max-height:40vh}
  .dq-bottom{top:auto;bottom:8px;height:auto;max-height:44vh}
  .dq-solo{top:132px;bottom:auto;height:auto;max-height:84vh}
  .rmapimg{max-height:34vh}
}

/* "pin open" button in the race-settings header + the pinned columns shown as quadrant panels */
.box.rsbox .rspin{position:absolute;left:14px;top:11px;z-index:2;border:none;background:#eef4f2;color:var(--green-d);font-family:var(--font);font-weight:800;font-size:12px;border-radius:8px;padding:6px 12px;cursor:pointer}
.box.rsbox .rspin:hover{background:#dfeee9}
.rspinned .dockbody{padding:11px 15px}
.rspinned .rscol{padding:0;border:none;display:block}
.rspinned .rscolbtn{margin-top:14px}
/* interactive race map (overview dock): hi-res map + zoom + plotted pins */
/* the room card + 4 flanking panels are tiled cells — no drop shadows between them */
#lobbyRoot > .lobby-card{box-shadow:none}
/* route panel: like the overview map — dropdown + zoom bar + meta + button static, image pane zoomable */
#dock-route .dockbody{display:flex;flex-direction:column;padding:10px;gap:8px;overflow:hidden}
#dock-route .rmapsel,#dock-route .mapzoom,.rmapmeta,#dock-route .rmapset{flex-shrink:0}
.rmapmeta{text-align:center}
.rmapmeta .rmapname{margin:6px 0 2px}
#dock-route .rmapset{margin-top:2px}
#dock-route .mapscroll{min-height:100px}
#dock-map .dockbody{display:flex;flex-direction:column;padding:10px;overflow:hidden;position:relative}
/* "Set race" floats over the bottom-right of the full map */
.mapsetbtn{position:absolute;right:34px;bottom:34px;z-index:6;width:auto;white-space:nowrap;padding:8px 15px;font-size:10.5px;border-radius:18px;box-shadow:0 5px 14px rgba(0,0,0,.35)}
/* "Current race" floats over the bottom-left of the full map — resets the selection */
.mapcurbtn{position:absolute;left:18px;bottom:34px;z-index:6;border:none;background:rgba(17,51,58,.92);color:#fff;font-family:var(--font);font-weight:800;font-size:10.5px;white-space:nowrap;padding:8px 14px;border-radius:18px;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.35)}
.mapcurbtn:hover{background:rgba(17,51,58,1)}
.mapcurbtn.attn{background:#e0890f;box-shadow:0 0 0 2px #fff,0 5px 14px rgba(0,0,0,.4);animation:curpulse 1.6s ease-in-out infinite}
@keyframes curpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.mapzoom{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-shrink:0}
.mzbtn{width:30px;height:30px;border:none;border-radius:8px;background:#eafff4;color:var(--green-d);font-weight:900;font-size:18px;line-height:1;cursor:pointer;box-shadow:inset 0 0 0 2px #b6f0d2}
.mzbtn:hover{background:#d9fbe9}
.mzlbl{font-weight:800;font-size:13px;min-width:34px;text-align:center}
.mzhint{font-size:11px;color:var(--muted);margin-left:auto}
.mapscroll{flex:1;min-height:240px;overflow:auto;border-radius:10px;background:#fff;-webkit-overflow-scrolling:touch;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mapscroll.grabbing{cursor:grabbing}
.mapwrap{position:relative;width:100%;margin:0 auto}
.dockmap{width:100%;display:block;-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}
.mappins{position:absolute;inset:0;pointer-events:none}
.mappin{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:#ffd24a;border:2px solid #11161c;padding:0;cursor:pointer;pointer-events:auto;box-shadow:0 0 0 2px rgba(0,0,0,.45)}
.mappin:hover{filter:brightness(1.3);z-index:4}
.mappin.sel{border-color:#fff;width:17px;height:17px;z-index:5;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 0 4px #fff}
.mplabel{position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);white-space:nowrap;background:rgba(0,0,0,.82);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;display:none;pointer-events:none}
.mappin.sel .mplabel,.mappin:hover .mplabel{display:block}
/* persistent green marker on the room's actual current race (when you're browsing elsewhere) */
.mappin.curpin:not(.sel){border-color:#eafff4;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 0 4px #1ab35b}
.mappin.curpin:not(.sel) .mplabel{display:block;background:#0e7d4a}
/* Route-map banner: tells you whether you're on the current race or just browsing */
.routebanner{flex-shrink:0;font-size:11.5px;font-weight:700;line-height:1.35;border-radius:8px;padding:6px 10px}
.routebanner.cur{background:#eafff4;color:#0e7d4a}
.routebanner.browsing{background:#fdeccb;color:#7a4e08;box-shadow:inset 0 0 0 2px #f0c477}
#dock-route.browsing{box-shadow:inset 0 0 0 2px #f0c477}
/* race-type legend under the map zoom bar */
.maplegend{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;margin-bottom:8px;flex-shrink:0}
.mlg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:inherit;cursor:pointer;opacity:1;user-select:none}
.mlg.off{opacity:.35}
.mlgsw{width:11px;height:11px;border-radius:50%;border:2px solid #11161c;box-shadow:0 0 0 1px rgba(0,0,0,.35);flex-shrink:0}
.mappin.hidden{display:none}

/* tunes list: garage button + tune share shown in garage cells */
.tunebtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}
.tunegar{border:none;background:#eafff4;color:var(--green-d);font-family:var(--font);font-weight:800;font-size:12.5px;padding:7px 11px;border-radius:9px;cursor:pointer;box-shadow:inset 0 0 0 2px #b6f0d2}
.tunegar:hover{background:#d9fbe9}
.tune .tube{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:9px;background:#fff;border:1px solid var(--line);line-height:0;text-decoration:none}
.tune .tube:hover{background:#fff0f0;border-color:#f00}
.gtable .gp.gtune{color:#0e7d4a;font-weight:700;white-space:normal;line-height:1.25}
.gtable td.tuned{box-shadow:inset 0 0 0 2px #5bd6a0}
.rc-list li.tuned{background:#eafff4;box-shadow:inset 0 0 0 2px #b6f0d2;border-radius:8px}

.footer{text-align:center;padding:40px 22px 30px;font-weight:600;font-size:13px;opacity:.85;text-shadow:var(--shadow-text)}
.footer .foot-tag{font-weight:800;font-size:14px;margin-bottom:12px}
.footer .foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;margin-bottom:14px;font-weight:700;font-size:13px}
.footer .foot-nav a{color:#bff3d6;text-decoration:none}
.footer .foot-nav a:not(:first-child)::before{content:"·";margin:0 11px;opacity:.5;font-weight:700;display:inline-block}
.footer .foot-nav a:hover{text-decoration:underline}
.footer .foot-legal{font-size:10px;opacity:.82;line-height:1.55;max-width:620px;margin:0 auto 5px}
.footer .foot-legal a{color:#bff3d6;font-weight:700;text-decoration:none}
.footer .foot-legal a:hover{text-decoration:underline}

/* ===== account area (nav) ===== */
.acct{display:flex;align-items:center;gap:10px}
.acct .login{border:none;background:rgba(255,255,255,.16);color:#fff;font-family:var(--font);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.03em;padding:9px 14px;border-radius:10px;cursor:pointer}
.acct .login.primary{background:#fff;color:var(--cyan-d)}
.acct .me{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border-radius:24px;padding:5px 12px 5px 5px;cursor:pointer}
.acct .me .uname{font-weight:800;font-size:13px;color:#fff;text-shadow:var(--shadow-text)}

/* avatar */
.av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;color:#fff;overflow:hidden;background:#0b3b40;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.av img{width:100%;height:100%;object-fit:cover}
.av.sm{width:26px;height:26px;font-size:14px}
.av.lg{width:64px;height:64px;font-size:32px}

/* ===== auth / forms ===== */
.form{padding:6px 18px 18px}
.form label{display:block;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:12px 0 5px}
.form input{width:100%;border:2px solid var(--line);border-radius:10px;padding:11px 12px;font-family:var(--font);font-weight:600;font-size:15px;color:var(--ink)}
.form input:focus{outline:none;border-color:var(--cyan)}
.form .go{width:100%;border:none;background:linear-gradient(135deg,var(--green-d),var(--cyan));color:#fff;font-family:var(--font);
  font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:15px;padding:13px;border-radius:11px;cursor:pointer;margin-top:18px}
.form .go:disabled{opacity:.6;cursor:default}
.form .alt{text-align:center;margin-top:14px;font-weight:600;font-size:13px;color:var(--muted)}
.form .alt a{color:var(--cyan-d);font-weight:800;cursor:pointer}
.form .err{background:#fdecec;color:#b01228;border-radius:9px;padding:9px 11px;font-weight:700;font-size:13px;margin-top:12px;display:none}
.form .err.show{display:block}
.av-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:6px;max-height:236px;overflow-y:auto;padding:2px 4px 2px 2px}
.av-pick{display:flex;align-items:center;justify-content:center;background:#eef5f3;border-radius:12px;padding:7px;cursor:pointer;border:2px solid transparent}
.av-pick.on{border-color:var(--green);background:#eafff4}
.av-pick .av.lg{width:46px;height:46px;font-size:24px}
.sw-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-top:6px}
.sw{width:100%;aspect-ratio:1/1;max-width:30px;border-radius:50%;cursor:pointer;border:3px solid transparent;box-sizing:border-box}
.sw.on{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset}

/* ===== lobby ===== */
.lobby{max-width:720px;margin:0 auto}
.lobby-card{background:var(--card);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:16px}
.lobby-card .lc-head{background:linear-gradient(135deg,var(--green-d),var(--cyan));color:#fff;padding:16px 20px}
.lobby-card .lc-head h3{margin:0;font-weight:800;font-size:20px}
.lobby-card .lc-body{padding:16px 18px}
.codepill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border-radius:9px;padding:6px 12px;
  font-weight:900;letter-spacing:.12em;font-size:18px;cursor:pointer;margin-top:8px}
.codepill .cp-hint{font-weight:600;letter-spacing:0;font-size:11px;opacity:.85}
.setcoderow{margin-bottom:6px}
.setcoderow .codepill{margin-top:0;background:linear-gradient(135deg,var(--green-d),var(--cyan));color:#fff}
.racetag{display:inline-block;margin-top:8px;font-weight:700;font-size:13px;opacity:.95}

.choice{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.choice{grid-template-columns:1fr}}

.members{list-style:none;margin:14px 0 0;padding:0}
.members li{display:flex;align-items:center;gap:12px;padding:11px 6px;border-bottom:1px solid var(--line)}
.members li:last-child{border-bottom:none}
.members .uname{flex:1;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;min-width:0}
.members .uname .carname{display:block;font-weight:600;font-size:12px;color:var(--muted)}
.dot-on{width:9px;height:9px;border-radius:50%;background:#19c463;box-shadow:0 0 0 3px rgba(25,196,99,.22);flex:0 0 auto}
.dot-off{width:9px;height:9px;border-radius:50%;background:#c2cfcc;flex:0 0 auto}
.hostbadge{font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#b07b12;background:#fff3da;border-radius:5px;padding:2px 6px}
.rstate{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:5px 10px;border-radius:20px}
.rstate.yes{background:#e9fff3;color:#0e7d4a}
.rstate.no{background:#fff1f1;color:#b85b5b}
.rstate.pass{background:#eef1f4;color:#7a8a92}
/* whole member row reflects ready state (with a small reinforcing tick) */
.members li.memrow{border-radius:8px;transition:background .15s ease}
.members li.ready{background:#e9fff3;box-shadow:inset 4px 0 0 #19c463}
.members li.notready{background:#fff6f6;box-shadow:inset 4px 0 0 #e7a6a6}
.members li.passing{opacity:.62}
.rtick{flex:0 0 auto;font-weight:900;font-size:18px;width:26px;text-align:center}
.rtick.yes{color:#0e7d4a}
.rtick.no{color:#cdb6b6;font-size:15px}
.rtick.pass{color:#7a8a92;font-weight:800;font-size:12px;width:auto}
.members .uname .carname.carhidden{font-style:italic;opacity:.85}
.carhint{font-style:italic;color:#9bb0ad;font-weight:600}
.carclear{border:none;background:#f0d9d9;color:#9b3b3b;font-family:var(--font);font-weight:800;font-size:10px;line-height:1;padding:2px 6px;border-radius:6px;cursor:pointer;margin-left:6px;vertical-align:middle}
.carclear:hover{background:#e6c5c5}
.members .uname .carname.carnone{font-style:italic;opacity:.6}
.carsetup{display:inline-block;margin-top:2px;border:none;background:var(--green-d);color:#fff;font-family:var(--font);font-weight:800;font-size:11.5px;padding:3px 11px;border-radius:7px;cursor:pointer;white-space:nowrap}
.carsetup:hover{background:var(--green)}
/* Mobile: smaller names, and drop the car onto its own full-width line so it reads cleanly */
@media (max-width:560px){
  .members li{gap:9px;padding:10px 4px}
  .members .uname{flex-wrap:wrap;font-size:13.5px;gap:4px 6px}
  .members .uname .carname{flex-basis:100%;font-size:11.5px;line-height:1.3;margin-top:1px}
}
/* members header + small show/hide car toggle */
.memhead{display:flex;align-items:center;justify-content:space-between;margin-top:16px;margin-bottom:2px;
  font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.carvis{border:none;background:#eef1f4;color:#5d6f77;font-family:var(--font);font-weight:800;font-size:12px;
  padding:5px 11px;border-radius:8px;cursor:pointer;text-transform:none;letter-spacing:0}
.carvis:hover{background:#e2e8ea}
.carvis.off{background:#fdeee0;color:#9a6a1c}
/* settings: invite / bridge actions + bridge instructions */
.setactions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.setactions .acctbtn{width:100%}
.setchk{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;margin-top:9px;cursor:pointer;color:var(--ink)}
.setchk input{width:16px;height:16px;flex:0 0 auto}
/* small LRT-style share code + instant-save feedback */
.lscode{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.lscode b{letter-spacing:.08em;color:var(--green-d)}
.namerow{display:flex;align-items:center;gap:10px}
.namerow .finp{flex:1}
.setsaved{font-weight:800;font-size:12px;color:var(--green-d);opacity:0;transition:opacity .2s;white-space:nowrap}
.setsaved.show{opacity:1}
.bridgebox{background:#f3f8f7;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:10px;font-size:13px;line-height:1.5}
.bridgebox p{margin:0 0 8px}
.bridgebox a{color:var(--cyan-d);font-weight:700}
/* FH6 race summary (room view) */
.racebox{margin-top:10px;background:rgba(255,255,255,.14);border-radius:10px;padding:12px 14px}
.racebox .rs-now{font-weight:800;font-size:14px}
.racebox .rs-now-head{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin-bottom:7px}
.racebox .rs-now-fields{display:flex;flex-direction:column;gap:3px}
.racebox .rs-frow{display:flex;align-items:baseline;gap:10px}
.racebox .rs-flbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;opacity:.6;min-width:70px}
.racebox .rs-fval{font-size:17px;font-weight:800;line-height:1.25;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.racebox .rs-rng{font-weight:700;font-size:12.5px;margin-top:12px}
.racebox .rs-dim{font-weight:600;opacity:.85}
.racebox .rs-poss{cursor:help;outline:none}
.rs-poss-hint{display:inline-block;margin-left:6px;font-weight:800;opacity:.75;font-size:12px}
.racebox .rs-poss:hover .rs-poss-hint,.racebox .rs-poss:focus .rs-poss-hint{opacity:1}
/* fixed-positioned popup — set inline by JS; escapes the card's overflow:hidden */
.rs-poss-pop{z-index:60;min-width:240px;max-width:340px;max-height:60vh;overflow:auto;background:#fff;color:var(--ink);
  border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.35);padding:12px 14px;font-weight:600}
.rsp-head{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--green-d);margin-bottom:4px}
.rsp-note{font-size:11.5px;color:var(--muted);margin-bottom:8px}
.rsp-row{display:flex;flex-direction:column;gap:1px;padding:5px 0;border-top:1px solid var(--line)}
.rsp-cat{font-weight:800;font-size:13px;color:var(--ink)}
.rsp-meta{font-size:11.5px;color:var(--muted);font-weight:600}
/* pass-this-race toggle */
.passbtn{display:block;width:100%;margin:10px 0 4px;border:2px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--font);font-weight:800;font-size:14px;padding:11px;border-radius:12px;cursor:pointer}
.passbtn:hover{border-color:var(--cyan-d)}
.passbtn.on{background:#eef1f4;color:#5d6f77;border-color:#cfd8dc}
/* browser card activity lines */
.rc-act{font-weight:800;font-size:12.5px;color:var(--green-d);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-pool{font-weight:700;font-size:11.5px;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* stacked labelled race summary on a room browser card */
.rc-fields{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.rc-fields .rcf-row{display:flex;align-items:baseline;gap:8px;min-width:0}
.rc-fields .rcf-l{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);min-width:54px;flex:none}
.rc-fields .rcf-v{font-weight:800;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* race settings modal — sizes to content (no inner scrollbar); dropdowns overlay/flip instead */
.box.rsbox{max-width:1560px;width:96vw;max-height:94vh;overflow:visible}
.box.rsbox .mhead{text-transform:uppercase;font-size:19px;letter-spacing:.04em;border-radius:var(--radius) var(--radius) 0 0;text-align:center}
.box.rsbox .mhead .rssaved{text-transform:none;letter-spacing:0;font-size:12px;padding-top:3px}
.rsbody{overflow:visible}
.rscols{display:flex;align-items:stretch}
.rscol{flex:1;min-width:0;display:flex;flex-direction:column;padding:4px 20px}
.rscol:first-child{padding-left:12px}
.rscol:last-child{padding-right:12px}
.rscol+.rscol{border-left:4px solid transparent;border-image:linear-gradient(180deg,var(--green,#1ab35b),#16c5d4) 1}
.rscolbtn{margin-top:auto;width:100%}
.rssaved{font-size:12px;font-weight:600;color:var(--muted);padding-top:12px;text-align:center;transition:color .2s}
.rssaved.on{color:var(--accent,#0a7);font-weight:800}
@media(max-width:680px){
  .rscols{flex-direction:column}
  .rscol+.rscol{border-left:none;border-top:4px solid transparent;border-image:linear-gradient(90deg,var(--green,#1ab35b),#16c5d4) 1;margin-top:12px;padding-top:14px;padding-left:2px}
  .rscolbtn{margin-top:16px}
  /* stacked columns can get tall — restore scrolling on small screens */
  .box.rsbox{overflow:auto;max-height:90vh}
  .rsbody{overflow:auto;max-height:82vh}
}
.rssec{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:16px;background:#fbfdfc}
.rslbl{font-weight:800;font-size:15px;margin-bottom:11px;padding-bottom:8px;border-bottom:2px solid var(--line);text-transform:uppercase;letter-spacing:.03em;color:var(--green-d)}
.rsgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px 12px}
.rstrio{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px 12px}
.rslbl.rslbl-flex{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rsclear{border:none;background:#f0d9d9;color:#9b3b3b;border-radius:8px;font-family:var(--font);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.02em;padding:5px 11px;cursor:pointer}
.rsclear:hover{background:#e6c5c5}
.rsfield{display:flex;flex-direction:column;gap:4px;min-width:0}
.rsfield.wide{grid-column:1 / -1}
.rsfield>span{font-weight:800;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rsfield .finp{width:100%}
.rssub{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:2px}
.rsrow{display:flex;gap:8px;flex-wrap:wrap}
.rsrow .finp{flex:1;min-width:120px}
.rsmini{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:4px 0 2px;display:flex;align-items:center;gap:6px}
.rsmini.rsmini-cat{margin-top:7px}
.rspair{display:flex;gap:16px}
.rspaircol{flex:1;min-width:0}
.rschks{display:flex;flex-wrap:wrap;gap:2px 18px}
.rschk{display:inline-flex;align-items:center;gap:7px;background:none;border-radius:0;padding:2px 2px;font-weight:600;font-size:13px;cursor:pointer}
.rschk:hover{color:var(--accent,#0a7)}
.rscatgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px 16px;max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.rscat .rschk{background:none;padding:4px 2px;font-weight:600;font-size:12.5px}
.rstiny{border:none;background:#e7eeec;border-radius:6px;font-weight:800;font-size:11px;padding:3px 8px;cursor:pointer;color:var(--green-d)}
.rsfilter{flex:1;min-width:80px;border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-family:var(--font);font-size:12px}
.rsinline{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;color:var(--muted)}
.rsunit{font-weight:700;font-size:12.5px;color:var(--muted)}
.rsactions{align-items:center}
.rshint{font-weight:600;font-size:9.5px;text-transform:none;letter-spacing:0;color:var(--muted);font-style:normal;opacity:.8}
/* searchable dropdown (Category multi, Track Name single) */
.ssel{position:relative;width:100%}
.ssel-trig{display:flex;flex-wrap:wrap;align-items:center;gap:5px;width:100%;min-height:40px;border:2px solid var(--line);border-radius:10px;background:#fff;padding:7px 10px;font-family:var(--font);font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;text-align:left;box-sizing:border-box}
.ssel-trig:hover{border-color:var(--green,#1ab35b)}
.ssel-arr{margin-left:auto;color:var(--muted);font-size:12px;padding-left:6px}
.ssel-ph{color:var(--muted);font-weight:600}
.ssel-val{font-weight:700}
.ssel-chip{display:inline-flex;align-items:center;gap:5px;background:#eef4f2;border-radius:7px;padding:3px 8px;font-size:12.5px;font-weight:700}
.ssel-chip b{cursor:pointer;color:var(--muted);font-weight:800;font-size:14px;line-height:1}
.ssel-chip b:hover{color:#c0392b}
.ssel-pop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:80;background:#fff;border:2px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.20);padding:8px}
.ssel-pop.up{top:auto;bottom:calc(100% + 4px)}
.ssel-search{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:var(--font);font-size:13px;box-sizing:border-box;margin-bottom:6px}
.ssel-list{max-height:210px;overflow:auto}
.ssel-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;font-weight:600;font-size:13.5px;cursor:pointer}
.ssel-opt:hover{background:#f1f5f4}
.ssel-opt.on{color:var(--green-d);font-weight:800}
.ssel-box{width:15px;height:15px;border:2px solid var(--line);border-radius:4px;flex:none;position:relative}
.ssel-opt.on .ssel-box{background:var(--green,#1ab35b);border-color:var(--green,#1ab35b)}
.ssel-opt.on .ssel-box::after{content:"✓";position:absolute;inset:0;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center}
.ssel-none{padding:8px 9px;color:var(--muted);font-size:13px}
.ssel-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.ssel-foothint{font-size:11.5px;color:var(--muted);font-weight:600}
.ssel-done{border:none;background:var(--green,#1ab35b);color:#fff;font-weight:800;font-size:12.5px;border-radius:8px;padding:6px 16px;cursor:pointer}
.ssel-done:hover{filter:brightness(1.05)}

.bigready{width:100%;border:none;border-radius:13px;padding:18px;font-family:var(--font);font-weight:900;font-size:20px;
  text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:#fff;margin-top:16px;transition:transform .08s}
.bigready:active{transform:scale(.99)}
.bigready.off{background:linear-gradient(135deg,#0e7d4a,#1ab35b)}
.bigready.on{background:linear-gradient(135deg,#b03a3a,#d86a3a)}
.allready{background:#e9fff3;border:2px solid var(--green);color:var(--green-d);border-radius:12px;padding:13px;text-align:center;
  font-weight:800;margin-top:14px}
.countbig{text-align:center;font-weight:900;font-size:54px;color:var(--green-d);margin:10px 0}
/* non-FH6 deadline bar (LRT-style live countdown) + the set-timer modal */
.rdeadbar{background:linear-gradient(90deg,var(--green-d),var(--cyan));color:#fff;text-align:center;font-weight:800;font-size:18px;padding:12px 14px;border-radius:12px;margin-bottom:12px;line-height:1.2}
.rdeadbar .cd-ico{margin-right:5px}
.rdeadbar .cd-time{color:#eafff4}
.rdeadbar .cd-dl{font-weight:600;opacity:.9;font-size:13px;display:block;margin-top:2px}
.rdeadbar.done{background:linear-gradient(90deg,#0e7d4a,#19c463)}
.rdeadbar.urgent{animation:cdpulse 1s infinite}
@keyframes cdpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
/* two-phase race start */
.rdeadbar .cd-head{font-size:18px}
.rdeadbar .cd-sub{font-weight:600;font-size:12.5px;opacity:.92;margin-top:4px;line-height:1.3}
.rdeadbar.standby{background:linear-gradient(90deg,#b8860b,#d9a520)}
.rdeadbar.final{background:linear-gradient(90deg,#c0392b,#e74c3c);animation:cdflash .6s steps(1) infinite}
.rdeadbar.final .cd-head{font-size:22px;letter-spacing:.02em}
.rdeadbar.go{background:linear-gradient(90deg,#0e7d4a,#1ed760);font-size:26px;animation:cdpulse .5s infinite}
@keyframes cdflash{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4)}}
/* full-screen flash for chime nudge + GO */
.rrc-flash{position:fixed;inset:0;z-index:90;pointer-events:none;animation:rrcflash .9s ease-out forwards}
.rrc-flash.nudge{background:radial-gradient(circle,rgba(231,196,60,.45),rgba(231,196,60,0) 70%)}
.rrc-flash.go{background:radial-gradient(circle,rgba(30,215,96,.5),rgba(30,215,96,0) 70%)}
@keyframes rrcflash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.dlcur{font-weight:700;font-size:13px;margin-bottom:10px;color:var(--ink)}
.dlcur.dlnone{color:var(--muted);font-weight:600}
.dlrow{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-weight:700;font-size:14px;color:var(--muted)}
.dlrow .finp{flex:1;min-width:0;padding:10px 12px;font-size:15px}
.dlrow input.dlnum{flex:0 0 auto;width:96px;text-align:center}
.dlrow input#tTime{width:150px;text-align:left}
.dlrow .mini{flex:0 0 auto}
.hostbar{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.hb-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.hb-lbl{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);min-width:96px}
.hb-sp{flex:1}
.hb-row .startbtn{padding:8px 13px;font-size:12px}
.hb-row .bigbtn2.rollbig{padding:8px 15px;font-size:12.5px}
.hb-row .startmode .sm-opt{padding:7px 11px;font-size:11.5px}
.hb-row .bico{font-size:1.45em;vertical-align:-0.13em;margin-right:1px}
.hostbar select{font-family:var(--font);font-weight:600;padding:9px 10px;border:2px solid var(--line);border-radius:9px;color:var(--ink)}
.startbtn{border:none;background:var(--ink);color:#fff;font-family:var(--font);font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;font-size:14px;padding:11px 18px;border-radius:10px;cursor:pointer}
.linkbtn{background:none;border:none;color:var(--muted);font-family:var(--font);font-weight:700;text-decoration:underline;cursor:pointer;font-size:13px}
.tokbox{background:var(--ink);color:#9ff7c6;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:13px;
  padding:11px;border-radius:9px;word-break:break-all;margin-top:8px;cursor:pointer}

/* ===== social: nav bell, account grid, friends, notifications, steam, games ===== */
.acct .bell{position:relative;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:16px;width:38px;height:38px;
  border-radius:10px;cursor:pointer;line-height:1}
.acct .bell:hover{background:rgba(255,255,255,.26)}
.acct .me{position:relative}
.nbadge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#e8442f;color:#fff;
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(0,40,42,.6)}

.acctgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acctbtn{border:2px solid var(--line);background:#fff;color:var(--ink);font-family:var(--font);font-weight:700;font-size:13px;
  padding:11px 10px;border-radius:10px;cursor:pointer;text-align:left}
.mglog{background:#0e1b1a;color:#bfe9d0;border-radius:10px;padding:11px 13px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;margin-top:12px;max-height:300px;overflow:auto}
.mglog.err{color:#ffb3c0}
.acctbtn:hover{border-color:var(--cyan)}

.inp2:focus{outline:none;border-color:var(--cyan)}
.sechead{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:16px 0 6px}
/* shareable friend ID */
.myfid{font-weight:700;font-size:13px;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.myfid code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;font-size:15px;letter-spacing:.08em;background:#eafff4;color:var(--green-d);border:1px solid #b6f0d2;border-radius:7px;padding:3px 9px}
.myfid-hint{flex:1 1 100%;font-weight:600;font-size:11.5px;color:var(--muted)}
.frow{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:none}
.frow .uname{flex:1;font-weight:700;font-size:14px;display:flex;flex-direction:column;min-width:0}
.frow .uname .sub{font-weight:600;font-size:12px;color:var(--muted)}
.frow.unread{background:#eafff4;border-radius:8px}
.mini{border:none;font-family:var(--font);font-weight:800;font-size:12px;padding:7px 12px;border-radius:8px;cursor:pointer;margin-left:6px}
.mini.ok{background:var(--green-d);color:#fff}
.mini.no{background:#f0d6d6;color:#a01228}
.mini.danger{background:#fff1f1;color:#b85b5b}
/* member management rows (settings modal) */
.mrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:none}
.mrow .mname{flex:1;font-weight:700;font-size:14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .mini{margin-left:0}
.adminbadge{font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#b07b12;background:#fff3da;border-radius:5px;padding:2px 6px}
.mempty{color:var(--muted);font-weight:600;font-size:13px;padding:6px 0}
.pendtag{font-weight:700;font-size:11px;color:var(--muted);background:#eef5f3;border-radius:6px;padding:4px 8px}

.gamechips{display:flex;flex-wrap:wrap;gap:6px}
.gamechip{font-weight:700;font-size:12px;padding:6px 10px;border-radius:18px;background:#eef5f3;color:#3a5b57}
.gamechip.all{background:#e9fff3;color:var(--green-d);box-shadow:inset 0 0 0 2px #b6f0d2}

/* ===== rooms dashboard ===== */
.dashwrap{color:#fff;text-align:center;padding:30px;font-weight:600;text-shadow:var(--shadow-text)}
.dashhead2{margin:18px 0 12px}
.dashhead2 h3{margin:0;font-size:20px;text-transform:uppercase;text-shadow:var(--shadow-text)}
.dashsep2{height:2px;background:rgba(255,255,255,.22);border-radius:2px;margin:26px 0 4px}
.joinrow{display:flex;gap:10px;align-items:center;max-width:520px;margin:0 auto 14px}
.joinrow .inp{flex:1}
.roomgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;align-items:start}
.roomcard{position:relative;text-align:left;border:none;cursor:pointer;background:var(--card);color:var(--ink);border-radius:14px;
  box-shadow:var(--shadow-card);padding:16px;display:flex;flex-direction:column;gap:6px;min-height:150px;font-family:var(--font)}
.roomcard:hover{outline:3px solid var(--cyan)}
.rc-name{font-weight:800;font-size:17px;line-height:1.2;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rc-sub{font-weight:600;font-size:12.5px;color:var(--muted)}
.rc-code{margin-top:auto;font-weight:800;letter-spacing:.1em;font-size:12px;color:var(--cyan-d)}
.cardgear{position:absolute;top:8px;right:8px;border:none;background:#eef5f3;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:15px}
.cardgear:hover{background:#dcebe7}
.newtile2{align-items:center;justify-content:center;text-align:center;border:2px dashed #b6d6cf;background:rgba(255,255,255,.6);color:var(--cyan-d);font-weight:800}
.newtile2 .nt-plus{font-size:30px;line-height:1}
.bigcreate2{text-align:center;color:#fff;padding:40px 20px;text-shadow:var(--shadow-text)}
.bigcreate2 h2{font-size:clamp(24px,4vw,34px);text-transform:uppercase;margin:0 0 8px}
.bigcreate2 p{font-weight:600;max-width:480px;margin:0 auto 20px;opacity:.95}
.bigbtn2{border:none;cursor:pointer;font-family:var(--font);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:15px;color:#fff;
  padding:14px 24px;border-radius:28px;background:linear-gradient(135deg,var(--green-d),var(--cyan));box-shadow:var(--shadow-card)}
.bigbtn2:disabled{opacity:.6;cursor:default}
.bigbtn2.rollbig{width:auto;white-space:nowrap;padding:11px 20px;font-size:14px;border-radius:24px}
/* Short/Long start-mode toggle next to Start Race */
.startmode{display:inline-flex;border:2px solid var(--line);border-radius:10px;overflow:hidden;margin-right:8px}
.startmode .sm-opt{border:none;background:#fff;color:var(--muted);font-family:var(--font);font-weight:800;font-size:12px;padding:9px 13px;cursor:pointer;line-height:1}
.startmode .sm-opt+.sm-opt{border-left:2px solid var(--line)}
.startmode .sm-opt.on{background:linear-gradient(135deg,var(--green-d),var(--cyan));color:#fff}
/* first-room CTA with a blurred sample room behind it (mirrors LRT's empty state) */
.bigcreate2.hasghost{position:relative;overflow:hidden;min-height:540px;display:flex;align-items:center;justify-content:center;padding:36px 18px}
.ghostroom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:26px;
  filter:blur(3px) saturate(.95);opacity:.5;pointer-events:none;user-select:none}
.ghostroom .lobby-card{max-width:520px;width:100%;transform:scale(.8);transform-origin:center;margin:0}
.bigcreate2-inner{position:relative;z-index:2;max-width:560px;padding:34px 30px;border-radius:26px;
  background:radial-gradient(circle at center, rgba(5,38,30,.82), rgba(5,38,30,.45) 68%, rgba(5,38,30,0))}

/* room: gear + FH6 tools */
.roomback{background:rgba(255,255,255,.18);border:none;color:#fff;font-family:var(--font);font-weight:800;font-size:13px;
  padding:6px 12px;border-radius:18px;cursor:pointer;margin-bottom:10px}
.roomback:hover{background:rgba(255,255,255,.3)}
.lc-headrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lobby-card .lc-head h3.lc-name{text-align:left;font-size:23px;line-height:1.1}
.lc-toolrow{margin-top:8px}
.lc-headrow h3{margin:0}
.roomgear{display:inline-flex;align-items:center;gap:6px;border:none;background:rgba(255,255,255,.22);color:#fff;border-radius:8px;height:32px;padding:0 12px;cursor:pointer;font-family:var(--font);font-weight:800;font-size:12.5px;white-space:nowrap}
.roomgear:hover{background:rgba(255,255,255,.34)}
.lc-hkrow{display:flex;align-items:center;gap:8px}
.hkchip{display:inline-flex;align-items:center;gap:6px;border:none;background:rgba(255,255,255,.22);color:#fff;border-radius:8px;height:32px;padding:0 12px;cursor:pointer;font-family:var(--font);font-weight:800;font-size:12.5px;white-space:nowrap}
.hkchip:hover{background:rgba(255,255,255,.34)}
.hkkey{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.hkkey:empty{display:none}
.hkk{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.92)}
.hkk kbd{font-family:var(--font);font-size:10.5px;font-weight:800;background:rgba(255,255,255,.92);color:var(--green-d);border-radius:5px;padding:2px 6px;line-height:1.5}
.hkchip.on{background:rgba(255,255,255,.95);color:var(--green-d)}
/* the hotkeys live in their own skinny card at the bottom of a room */
.hkcard{margin-top:-6px}
.hkcard .hkcard-in{display:flex;align-items:center;gap:12px;padding:11px 16px}
.hkcard .hkkey{flex:1;min-width:0}
.hkcard .hkk{color:var(--muted)}
.hkcard .hkk kbd{background:#eef4f2;color:var(--ink);border:1px solid var(--line)}
.hkcard .hkchip{flex:none;height:34px}
.hkcard .hkchip.on{background:#e8f5ef;color:var(--green-d)}
.hkcard .hkchip.setup{background:linear-gradient(135deg,var(--green-d),var(--cyan));color:#fff}
.hkcard .hkchip.setup:hover{filter:brightness(1.06)}
.hkupdate{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:8px;background:#e0890f;color:#fff;font-weight:800;font-size:12.5px;text-decoration:none;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.2);animation:curpulse 1.8s ease-in-out infinite}
.hkupdate:hover{background:#c9780b}
.hkupdate[hidden]{display:none}   /* author display: must re-honor the hidden attribute (it overrides UA [hidden]) */
.hkdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.hkdot.on{background:#16c060;box-shadow:0 0 0 3px rgba(22,192,96,.25)}
.hkdot.off{background:#d6a23a}
.fh6tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fh6tools button{flex:1 1 auto;border:none;cursor:pointer;font-family:var(--font);font-weight:800;font-size:13px;color:#fff;
  padding:11px 12px;border-radius:10px;background:linear-gradient(135deg,var(--green-d),var(--cyan))}
.fh6tools button:hover{filter:brightness(1.07)}

/* FH6 toggle (teal → hot pink) */
.fh6toggle{display:flex;align-items:center;gap:10px;cursor:pointer;margin-top:14px;font-weight:700}
.fh6toggle input{display:none}
.fh6track{width:48px;height:26px;border-radius:14px;background:#c7d3d0;position:relative;transition:background .2s;flex:0 0 auto}
.fh6knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.fh6toggle input:checked + .fh6track{background:linear-gradient(135deg,#00c2d6,#ff2d8e)}
.fh6toggle input:checked + .fh6track .fh6knob{left:25px}
.fh6lbl{font-size:14px;color:var(--ink)}
.fh6hint{font-size:12px;color:var(--muted);font-weight:600;margin-top:6px}
.fh6badge{background:linear-gradient(135deg,#00c2d6,#ff2d8e);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;letter-spacing:.04em}

/* modal form bits */
.flbl{display:block;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.finp{width:100%;border:2px solid var(--line);border-radius:10px;padding:11px;font-family:var(--font);font-weight:600;font-size:15px;color:var(--ink);box-sizing:border-box}
.finp:focus{outline:none;border-color:var(--cyan)}
.danger2{color:#c0392b;text-align:center;display:block;width:100%}
.err{display:none;background:#fdecec;color:#b01228;border-radius:9px;padding:9px 11px;font-weight:700;font-size:13px;margin-top:10px}
.err.show{display:block}

@media (max-width:720px){
  .nav{gap:8px;padding:12px 0}
  .nav .logo{width:40px;height:40px}.brand span{font-size:19px}.navroom{font-size:19px;max-width:38%}
  .brandlock{gap:8px}
  .tab{font-size:12px;padding:7px 10px}
  .acct .me .uname{font-size:12px}
}

/* ===== guest landing (logged-out marketing + ready-check demo) ===== */
#rrcLanding{display:none}
body.guest #rrcLanding{display:block}
body.guest .tabbar{display:none}
body.guest .view{display:none !important}
/* Direct-link public access to the Tunes page for logged-out visitors (shared with creators):
   show the Tunes view through the guest landing. No nav link exposes it; account-only actions prompt sign-up. */
body.guest.pubtunes #rrcLanding{display:none}
body.guest.pubtunes .view[data-view="tunes"]{display:block !important}
#rrcLanding{max-width:1040px;margin:0 auto;padding-bottom:10px}
#rrcLanding .accent{background:linear-gradient(90deg,var(--green-d),var(--cyan))}
#rrcLanding .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:800;font-size:16px;padding:13px 24px;border-radius:12px;border:none;cursor:pointer;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--green-d),var(--cyan));color:#fff;box-shadow:var(--shadow-card)}
.btn-ghost{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);text-shadow:var(--shadow-text)}
.section-title{text-align:center;font-weight:800;font-size:clamp(23px,4vw,32px);text-transform:uppercase;text-shadow:var(--shadow-text);margin:48px 0 6px}
.section-sub{text-align:center;font-weight:600;color:#fff;opacity:.95;text-shadow:var(--shadow-text);max-width:680px;margin:0 auto 18px}
.section-sub.tagline{font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:1}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0}
.step{background:var(--card);border-radius:14px;padding:20px;box-shadow:var(--shadow-card)}
.step .num{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--green-d),var(--cyan));margin-bottom:11px}
.step h3{margin:0 0 6px;font-size:18px;font-weight:800;color:var(--ink)}
.step p{margin:0;color:var(--muted);font-weight:600;font-size:14px;line-height:1.55}
.demo-toggle{display:flex;justify-content:center;margin:6px 0 18px}
.demo-toggle input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.seg{display:inline-flex;border-radius:11px;overflow:hidden;cursor:pointer;font-weight:800;font-size:13px;user-select:none;background:var(--card);box-shadow:var(--shadow-card)}
.seg span{padding:10px 18px;color:var(--muted);transition:background .15s,color .15s}
.demo-toggle input:checked + .seg .seg-on{background:linear-gradient(135deg,var(--green-d),var(--cyan));color:#fff}
.demo-toggle input:not(:checked) + .seg .seg-off{background:linear-gradient(135deg,var(--green-d),var(--cyan));color:#fff}
.demo-stage{display:grid;grid-template-columns:1fr minmax(330px,430px) 1fr;gap:18px;align-items:start}
.demo-stage .rules{background:var(--card);border-radius:14px;padding:18px;box-shadow:var(--shadow-card)}
.demo-stage .rules h3{margin:0 0 8px;font-size:16px;font-weight:800;color:var(--ink)}
.demo-stage .rules ul{margin:0;padding-left:18px;color:var(--muted);font-weight:600;font-size:13.5px;line-height:1.65}
.demo-center{display:flex;flex-direction:column;gap:10px;min-width:0}
.roomwrap .lobby-card{margin:0}
.garagenote{margin:0;font-size:12.5px;font-weight:600;color:#fff;opacity:.96;text-shadow:var(--shadow-text);line-height:1.5;text-align:center;background:rgba(255,255,255,.14);border-radius:11px;padding:11px 13px}
.garagenote strong{color:#fff}
.demo-room .carname.justfilled{animation:carfill .85s ease}
@keyframes carfill{0%{color:var(--green-d);transform:translateX(-4px);opacity:.15}40%{color:var(--green-d);opacity:1}100%{color:var(--muted);transform:none}}
.demo-room .lc-headrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.demo-room .roomcode{font-weight:800;font-size:12px;letter-spacing:.06em;background:rgba(255,255,255,.18);padding:4px 9px;border-radius:7px;flex:0 0 auto}
.demo-room .racebox{margin-top:10px}
.demo-room #dmRace.rolling{opacity:.6;transition:opacity .08s}

/* slot-machine roll effect (shared: landing demo + live room race line) */
.slot-spin{filter:blur(.5px);opacity:.92;will-change:transform,filter}
.slot-jit{transform:translateY(-2px)}
.slot-spin,.slot-jit{transition:transform .05s linear}
.slot-lock{animation:slotpop .62s cubic-bezier(.2,1.3,.4,1);text-shadow:0 0 16px rgba(255,255,255,.75)}
@keyframes slotpop{0%{transform:scale(1)}22%{transform:scale(1.16)}55%{transform:scale(.97)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .slot-spin,.slot-jit,.slot-lock{animation:none;filter:none;transform:none;transition:none;text-shadow:inherit}
}
.demo-room .rtally{text-align:center;font-weight:700;color:var(--muted);margin-top:10px}
.demo-room .memhead{display:flex;justify-content:space-between;font-weight:800;text-transform:uppercase;font-size:12px;color:var(--muted);margin-top:14px}
.demo-room .memrow.dmaway{opacity:.6}
.demo-room .hblabel{font-weight:800;font-size:12px;text-transform:uppercase;color:var(--muted)}
.demo-room .hbspace{flex:1}
.demo-room .startbtn.alt{background:#33464a}
.demo-room .die{font-size:1.3em;vertical-align:-2px}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:10px}
.fcard{background:var(--card);border-radius:14px;padding:18px;text-align:center;box-shadow:var(--shadow-card)}
.fcard .fico{font-size:28px}
.fcard h4{margin:9px 0 4px;font-size:15px;font-weight:800;color:var(--ink)}
.fcard p{margin:0;font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.45}
@media (max-width:900px){
  .steps{grid-template-columns:1fr}
  .demo-stage{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===== Telemetry tab + live HUD ===== */
.telhead{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.telhead h2{margin:0}
.telsetupbtn{background:rgba(255,255,255,.16);color:#fff;font-weight:800;font-size:14px;padding:9px 16px;border-radius:20px;text-decoration:none;text-shadow:var(--shadow-text);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.telsetupbtn:hover{background:rgba(255,255,255,.28)}
.telupdate{margin-left:8px;background:#e0890f;color:#fff;font-weight:800;font-size:14px;padding:9px 16px;border-radius:20px;text-decoration:none;text-shadow:var(--shadow-text);box-shadow:0 2px 8px rgba(0,0,0,.25);animation:curpulse 1.8s ease-in-out infinite}
.telupdate:hover{background:#c9780b}
.telsub{font-weight:600;color:#fff;opacity:.92;text-shadow:var(--shadow-text);margin:6px 0 16px;text-align:center}
.telstate{margin-left:7px;font-size:11px;font-weight:900;vertical-align:1px}
.telstate.rec{color:#ff4d4d;animation:telpulse 1.1s infinite}
.telstate.live{color:var(--green-d)}
@keyframes telpulse{0%,100%{opacity:1}50%{opacity:.3}}
#telRoot{max-width:920px;margin:0 auto}
.telbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.telpill{font-weight:800;font-size:13px;padding:7px 13px;border-radius:20px;background:rgba(255,255,255,.16);color:#fff;text-shadow:var(--shadow-text)}
.telpill.ok{background:#0e7d4a}
.telpill.rec{background:#b03a3a;animation:telpulse 1.1s infinite}
.telpill.off{background:rgba(255,255,255,.16)}
.telbarhint{font-size:12px;font-weight:600;color:#fff;opacity:.9;text-shadow:var(--shadow-text)}
.telload{position:relative;display:flex;flex-direction:column;gap:8px;margin-bottom:14px;background:var(--card);border-radius:14px;box-shadow:var(--shadow-card);padding:9px 12px}
.telload-caret{margin-left:6px;font-size:11px;opacity:.7;transition:transform .15s}
.telload-btn[aria-expanded="true"] .telload-caret{transform:rotate(180deg)}
.telload-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.telload-btn{display:inline-flex;align-items:center;gap:8px;background:#eef5f3;border:2px solid var(--line);border-radius:12px;padding:9px 15px;cursor:pointer;color:var(--ink);font-family:var(--font);font-weight:800;font-size:13.5px}
.telload-btn:hover{border-color:var(--green)}
.telload-count{font-weight:700;font-size:12.5px;color:var(--muted)}
.telload-spacer{flex:1 1 auto}
.telload-live{border:none;background:var(--green-d);color:#fff;font-family:var(--font);font-weight:800;font-size:12px;padding:7px 13px;border-radius:9px;cursor:pointer}
.telload-live:hover{background:var(--green)}
.telload-link{border:none;background:transparent;color:var(--green-d);font-family:var(--font);font-weight:700;font-size:12.5px;cursor:pointer;text-decoration:underline}
.telload-file{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);border-radius:9px;padding:6px 11px;cursor:pointer;color:var(--muted);font-family:var(--font);font-weight:700;font-size:12px}
.telload-file:hover{border-color:var(--green);color:var(--ink)}
.telload-tip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-weight:600;font-size:12px}
.telload-tip code{background:#eef5f3;border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:11.5px;color:var(--ink);font-weight:700}
.telload-copy{border:none;background:var(--green-d);color:#fff;font-family:var(--font);font-weight:800;font-size:11px;padding:3px 9px;border-radius:6px;cursor:pointer}
.telload-copy:hover{background:var(--green)}
.telload-msg{background:#fff4f4;border:1px solid #f0c0c0;border-radius:10px;padding:7px 12px;color:#b23030;font-weight:700;font-size:12.5px}
/* "Files" dropdown menu (Windows-style), with the session list as a side fly-out */
.telmenu{position:absolute;left:12px;top:100%;margin-top:6px;z-index:60;width:240px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.20);padding:6px}
.telmenu-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:transparent;color:var(--ink);font-family:var(--font);font-weight:700;font-size:13px;padding:9px 11px;border-radius:8px;cursor:pointer}
.telmenu-item:hover{background:#eef5f3}
.telmenu-item .tm-arrow{margin-left:auto;color:var(--muted);font-weight:800}
.telmenu-item[aria-expanded="true"]{background:#eef5f3}
.telmenu-sep{height:1px;background:var(--line);margin:5px 6px}
.telmenu-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted);font-weight:600;padding:6px 11px}
.telmenu-foot code{background:#eef5f3;border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:10.5px;color:var(--ink);font-weight:700}
/* session list — fly-out beside the menu, collapsed until "Open recording" */
.telsessions{display:none;flex-direction:column;gap:6px}
/* compare-sessions modal */
.cmpov{position:fixed;inset:0;z-index:120;background:rgba(0,20,22,.62);display:flex;align-items:center;justify-content:center;padding:20px}
.cmpbox{background:var(--card);color:var(--ink);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.45);width:100%;max-width:680px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.cmphead{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;font-weight:800;font-size:18px;border-bottom:1px solid var(--line)}
.cmpx{border:none;background:none;font-size:24px;font-weight:800;cursor:pointer;color:#345;line-height:1}
.cmpbody{padding:16px 18px;overflow:auto}
.cmp-lbl{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.cmp-list{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow:auto}
.cmp-pick{display:flex;align-items:center;gap:10px;background:#eef5f3;border-radius:9px;padding:9px 12px;cursor:pointer;font-size:13px;user-select:none}
.cmp-pick:hover{background:#e3efeb}
.cmp-pick.on{background:#d8efe6;box-shadow:inset 0 0 0 2px var(--green-d)}
.cmp-when{font-weight:800}
.cmp-meta{color:var(--muted);font-weight:600;margin-left:auto;font-size:12px;white-space:nowrap}
.cmp-sel{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;min-height:30px;align-items:center}
.cmp-empty{color:var(--muted);font-size:12px;font-weight:600}
.cmp-sw{display:inline-block;width:12px;height:12px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
/* compare-mode lap panel: one row per recording */
.ls-cmphead{font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:4px 2px 6px}
.ls-cmp{display:flex;align-items:center;gap:9px;padding:7px 6px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:6px}
.ls-cmp:hover{background:#eef5f3}
.ls-cmp.foc{background:#e8f3ff;box-shadow:inset 0 0 0 2px #9cc4ec}
.ls-cmp .ls-sw{width:13px;height:13px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.ls-cmp .ls-cmpcar{flex:1;min-width:0;font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-cmp .ls-t{font-weight:800;font-variant-numeric:tabular-nums}
.ls-cmp .ls-d{color:var(--muted);font-weight:700;font-size:11.5px;min-width:54px;text-align:right}
/* compare map legend = colored dots */
.map-leg .lg-cmp{font-size:14px;line-height:1;margin:0 1px}
.map-leg .lg-cmp.foc{text-shadow:0 0 0 #000;transform:scale(1.35);display:inline-block}
.cmp-chip{display:inline-flex;align-items:center;gap:7px;background:#e8f5ef;color:var(--green-d);border-radius:20px;padding:5px 8px 5px 11px;font-size:12.5px;font-weight:700}
.cmp-chip b{background:var(--green-d);color:#fff;border-radius:12px;padding:1px 8px;font-size:10.5px;text-transform:uppercase}
.cmp-chipx{border:none;background:none;color:var(--green-d);font-size:17px;font-weight:800;cursor:pointer;line-height:1;padding:0 2px}
.cmp-ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.cmp-hint{font-weight:600;font-size:12px;color:var(--muted)}
.cmp-mlbl{font-weight:700;font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.cmp-mlbl select{font-family:var(--font);font-weight:600;padding:8px 10px;border:2px solid var(--line);border-radius:9px;color:var(--ink)}
.cmp-go{margin-left:auto;width:auto;white-space:nowrap;padding:11px 22px;font-size:14px;border-radius:24px}
.cmp-go:disabled{opacity:.5;cursor:default}
.cmp-out{margin-top:16px}
.cmp-msg{color:var(--muted);font-weight:700;font-size:13px;text-align:center;padding:12px}
.cmp-swap{margin-left:10px;border:none;background:rgb(150,70,235);color:#fff;font-family:var(--font);font-weight:800;font-size:12px;padding:3px 12px;border-radius:14px;cursor:pointer;white-space:nowrap}
.cmp-swap:hover{background:rgb(126,52,205)}
.tel-rename{cursor:pointer;border-radius:5px;padding:0 4px;transition:background .12s}
.tel-rename:hover{background:#eef5f3;color:var(--ink)}
.tel-rename-inp{font-family:var(--font);font-weight:700;font-size:inherit;color:var(--ink);border:1px solid var(--accent);border-radius:5px;background:#fff;padding:1px 6px;min-width:140px}
.tel-rename-inp:focus{outline:none}
.cmptab{width:100%;border-collapse:collapse;font-size:13px}
.cmptab th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:6px 8px;border-bottom:2px solid var(--line)}
.cmptab td{padding:8px;border-bottom:1px solid var(--line);font-weight:700}
.cmptab tr.cmp-best td{background:#e8f5ef;color:var(--green-d)}
.cmp-na{color:var(--muted);font-weight:600}
.cmp-foot{margin-top:8px;font-size:11px;color:var(--muted)}
.telsessions.open{display:flex;position:absolute;left:264px;top:100%;margin-top:6px;z-index:60;width:420px;max-width:70vw;
  max-height:62vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.20);padding:12px}
.tels-row{position:relative;display:flex;flex-direction:column;gap:3px;align-items:flex-start;background:#eef5f3;border-radius:9px;padding:9px 40px 9px 12px;font-family:var(--font);color:var(--ink)}
.tels-row[data-s]{cursor:pointer}
.tels-row[data-s]:hover{background:#dff0ea}
.tels-row.active{outline:2px solid var(--cyan);outline-offset:-2px;background:#e8fbff}
.tels-row.empty{opacity:.5}
.tels-del{position:absolute;top:7px;right:7px;border:none;background:transparent;color:var(--muted);font-size:14px;line-height:1;cursor:pointer;border-radius:7px;padding:5px 7px}
.tels-del:hover{background:#fbe3e0;color:#c0392b}
.tels-main{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:13px}
.tels-when{font-weight:800}
.tels-car{font-weight:700;color:var(--green-d)}
.tels-dur,.tels-laps{font-weight:700;color:var(--muted)}
.tels-sub{font-weight:600;font-size:11px;color:var(--muted)}
.tels-hint{color:var(--muted);font-weight:600;font-size:12.5px;padding:6px 4px}
.telhbrow{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-card);margin-bottom:14px;cursor:pointer;color:var(--ink);font-weight:600;font-size:13.5px}
.telhbrow input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--green)}
.telhbrow b{font-weight:800}
.telnotfound{background:var(--card);border-radius:14px;padding:22px;box-shadow:var(--shadow-card);text-align:center;color:var(--ink)}
.telnf-big{font-weight:800;font-size:20px;margin-bottom:6px}
.telnotfound p{margin:0 auto;max-width:540px;color:var(--muted);font-weight:600;font-size:14px}

.telperf{display:flex;gap:14px;margin-bottom:14px}
.perf-cell{flex:1;background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-card);color:var(--ink);text-align:center}
.perf-lbl{font-weight:800;font-size:11px;letter-spacing:.05em;opacity:.6;text-transform:uppercase}
/* adjustable consistency gate (in the consistency card) */
.gate-row{margin-top:7px;display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap;font-weight:700;font-size:10.5px;color:var(--muted)}
.gate-inp{width:48px;font-family:var(--font);font-weight:800;font-size:11px;text-align:center;border:1px solid var(--line);border-radius:6px;padding:1px 3px;color:var(--ink);background:#fff}
.gate-inp:focus{outline:2px solid var(--cyan)}
.gate-status{font-weight:800;margin-left:5px}
.gate-status.on{color:var(--green-d)}
.gate-status.off{color:#c0871a}
.perf-big{font-weight:900;font-size:clamp(28px,5vw,44px);line-height:1.05;margin:4px 0 2px;color:var(--ink)}
.perf-big.good{color:var(--green-d)}
.perf-big.ok{color:#c0871a}
.perf-big.bad{color:#c0392b}
.perf-sub{font-size:11.5px;font-weight:600;opacity:.6}
.vario-btn{margin-top:6px;border:none;border-radius:8px;background:#eef5f3;color:var(--ink);font-family:var(--font);font-weight:800;font-size:11px;padding:5px 10px;cursor:pointer}
.vario-btn:hover{background:#e1eee9}
.vario-btn.on{background:var(--green-d);color:#fff}
@media (max-width:760px){ .telperf{flex-wrap:wrap} .perf-cell{flex:1 1 45%} }
/* ----- tune sheet (below the live telemetry) ----- */
/* tune sheet — compact click-to-edit spreadsheet, styled to match the lap-times card */
.tunesheet{background:var(--card);border-radius:14px;box-shadow:var(--shadow-card);color:var(--ink);padding:12px 14px;margin-top:18px;box-sizing:border-box}
.ts-head{display:flex;align-items:center;gap:10px;margin-bottom:3px}
.ts-head h3{margin:0;font-weight:800;font-size:15px;color:var(--ink)}
.ts-saved{font-size:11px;font-weight:800;color:var(--green-d)}
.ts-clear{margin-left:auto;background:#eef5f3;color:var(--ink);border:1px solid var(--line);border-radius:8px;font-family:var(--font);font-weight:800;font-size:11px;padding:4px 10px;cursor:pointer}
.ts-clear:hover{background:#e1eee9}
.ts-sub{font-weight:600;font-size:11px;color:var(--muted);margin:0 0 8px}
.tsec{font-weight:800;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line);padding:9px 2px 3px;margin-top:2px}
.ts-meta{display:flex;flex-direction:column;gap:8px;padding:8px 2px 2px}
.tsm-row{display:flex;align-items:center;gap:10px;font-size:11.5px}
.tsm-row.tsm-wide{align-items:flex-start}
.tsm-row>span{color:var(--muted);font-weight:700;flex:0 0 78px}
.tsm-inp,.tsm-notes{font-family:var(--font);font-size:12px;color:var(--ink);border:1px solid var(--line);border-radius:6px;background:#fff;padding:5px 8px;flex:1 1 auto;min-width:0}
.tsm-inp{font-weight:800}
.tsm-notes{font-weight:600;resize:vertical;line-height:1.4}
.tsm-inp:focus,.tsm-notes:focus{outline:none;border-color:var(--accent)}
.trows{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.tcell{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 2px;border-bottom:1px solid var(--line);font-size:11.5px;min-width:0}
.tcell-wide{grid-column:1 / -1}
.tcl{color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.tcv{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;color:var(--muted);opacity:.22;cursor:text;flex:0 0 auto;min-width:50px;padding:1px 4px;border-radius:5px}
.tcv.set{color:var(--ink);opacity:1}
.tcv:hover{background:#eef5f3;opacity:.8}
.tcv.set:hover{opacity:1}
.tcell-sel .tcv{display:none}
.tsel{font-family:var(--font);font-weight:800;font-size:11.5px;color:var(--ink);border:1px solid var(--line);border-radius:6px;background:#fff;padding:2px 5px;cursor:pointer;flex:0 0 auto}
.tcedit{font-family:var(--font);font-weight:800;font-size:11.5px;text-align:right;width:66px;border:2px solid var(--cyan);border-radius:5px;padding:1px 4px;color:var(--ink);background:#fff;box-sizing:border-box}
.tcedit:focus{outline:none}
.telmain{display:flex;gap:14px;align-items:stretch}
/* these use display:flex/grid which would otherwise defeat the [hidden] attribute */
.telhud[hidden],.lapsheet[hidden],.telperf[hidden],.telnotfound[hidden],.telhbrow[hidden],.telmain[hidden]{display:none}
.telhud{flex:1;min-width:0;background:var(--card);border-radius:16px;padding:16px;box-shadow:var(--shadow-card);color:var(--ink)}
.lapsheet{flex:0 0 226px;background:var(--card);border-radius:16px;padding:14px;box-shadow:var(--shadow-card);color:var(--ink);display:flex;flex-direction:column;min-height:0}
.lapsheet-head{font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.lapsheet-hint{font-weight:600;font-size:10px;opacity:.7;letter-spacing:0;text-transform:none}
.lapsheet-cond{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;font-weight:800;font-size:13px}
.lapsheet-cond span{background:#eef5f3;border-radius:8px;padding:4px 9px}
.lapsheet-cond i{font-style:normal;font-weight:600;opacity:.7;font-size:11px}
.lapsheet-cond .dim{background:none;color:var(--muted);font-weight:600;font-size:11px}
.lapsheet-list li{cursor:pointer}
.lapsheet-list li.bad{opacity:.45}
.lapsheet-list li.bad .ls-d{color:#c0871a}
.lapsheet-list li.bad.pb{opacity:.45}
.lapsheet-delta{font-weight:900;font-size:30px;line-height:1;padding:10px;border-radius:10px;background:#eef5f3;text-align:center}
.lapsheet-delta.good{color:var(--green-d)}
.lapsheet-delta.bad{color:#c0392b}
.lapsheet-sum{display:flex;justify-content:space-between;gap:8px;margin:10px 0;font-size:12px;font-weight:600;opacity:.9}
.lapsheet-sum b{font-weight:800}
.lapsheet-list{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:0}
.lapsheet-list li{display:flex;justify-content:space-between;align-items:center;gap:6px;font-weight:700;font-size:13px;padding:6px;border-bottom:1px solid var(--line)}
.lapsheet-list li:last-child{border-bottom:none}
.lapsheet-list li.pb{background:#e9fff3;color:var(--green-d);border-radius:7px}
.lapsheet-list li.sel{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:7px;background:#e8fbff}
.lapsheet-list .ls-n{opacity:.65;flex:0 0 32px}
.lapsheet-list .ls-t{flex:1;text-align:right}
.lapsheet-list .ls-d{flex:0 0 46px;text-align:right;opacity:.85}
/* loaded analysis view: widen the container + 3 stacked columns.
   left = Files cell + tune card · middle = HUD+map · right = 3 perf cards + lap card */
body.tel-loaded .wrap{max-width:1600px}
body.tel-loaded #telRoot{max-width:none;margin:0}   /* #telRoot is normally capped at 920px — release it so the columns fill the wide view */
body.tel-loaded .telmain{align-items:flex-start;gap:16px}
.telcol{display:flex;flex-direction:column;gap:14px;min-width:0}   /* a stacked column: floating cell + main card */
body.tel-loaded #telColL{flex:0 0 380px}
body.tel-loaded #telColR{flex:0 0 460px}
body.tel-loaded .telhud{flex:1 1 auto;min-width:0}   /* middle shrinks ~15% as the sides widen */
/* coplanar cards — flat, with a thin border instead of a drop shadow, so nothing casts onto the card stacked under it */
body.tel-loaded .telload,body.tel-loaded .tunesheet,body.tel-loaded .telhud,
body.tel-loaded #telColR #telPerf .perf-cell,body.tel-loaded #telColR .lapsheet{box-shadow:none;border:1px solid var(--line);box-sizing:border-box}
body.tel-loaded #telColL .telload{margin:0}   /* Files = a floating cell the width of the tune card */
body.tel-loaded #telColL #tuneSheet{flex:1 1 auto;min-height:0;overflow:hidden}
body.tel-loaded #tuneSheet .tunesheet{margin-top:0;height:100%;display:flex;flex-direction:column;overflow:hidden}   /* fixed rounded card; body scrolls, corners stay */
body.tel-loaded #tuneSheet .ts-body{flex:1 1 auto;min-height:0;overflow:auto}
/* the 3 perf cards float as separate small cards above the lap card */
body.tel-loaded #telColR #telPerf{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:0}
body.tel-loaded #telColR #telPerf .perf-cell{padding:8px 9px;border-radius:11px}
body.tel-loaded #telColR #telPerf .perf-lbl{font-size:8.5px;letter-spacing:.02em}
body.tel-loaded #telColR #telPerf .perf-big{font-size:19px;margin:2px 0 1px}
body.tel-loaded #telColR #telPerf .perf-sub{font-size:9px;line-height:1.25}
body.tel-loaded #telColR #telPerf .vario-btn{margin-top:4px;font-size:9px;padding:3px 7px}
body.tel-loaded #telColR .lapsheet{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.tel-loaded .lapsheet-list li{display:grid;grid-template-columns:22px 38px 1fr 1fr 1fr 52px 42px 26px;gap:7px;align-items:center}
@media (max-width:1180px){   /* too narrow for 3 columns — stack them */
  body.tel-loaded .telmain{flex-direction:column}
  body.tel-loaded #telColL,body.tel-loaded #telColR{flex:1 1 auto;width:100%;height:auto !important}
}
/* channel graphs — full-width distance-based strip below the columns (review mode) */
.telchannels{margin-top:16px;background:var(--card);border-radius:14px;box-shadow:var(--shadow-card);padding:12px 14px;color:var(--ink)}
body.tel-loaded .telchannels{box-shadow:none;border:1px solid var(--line)}
.telchan-head{display:flex;align-items:center;gap:10px;font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.telchan-hint{font-weight:600;font-size:11px;text-transform:none;letter-spacing:0;opacity:.8}
.telchan-stats{margin-left:14px;font-weight:700;font-size:10.5px;text-transform:none;letter-spacing:0;color:var(--green-d)}
.telchan-leg{margin-left:auto;display:flex;align-items:center;gap:5px;font-weight:700;font-size:10.5px;text-transform:none;letter-spacing:0}
.telchan-leg .cl{width:14px;height:3px;border-radius:2px;display:inline-block}
.telchan-leg .cl-sel{background:#1769c4}
.telchan-leg .cl-best{background:#b9c7c3}
.telchannels canvas{width:100%;height:auto;display:block;cursor:ew-resize;touch-action:none}
.lapsheet-list .ls-s{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;opacity:.85}
.lapsheet-list .ls-s.best{color:#7a2bb5;opacity:1;font-weight:800}
.lapsheet-list li.ls-head{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.03em;cursor:default;border-bottom:2px solid var(--line)}
.lapsheet-list li.ls-head:hover{background:none}
.lapsheet-list li.ls-head .ls-s{opacity:1}
.lapsheet-list li.ls-ideal{color:var(--green-d);font-weight:800;border-top:2px solid var(--line);cursor:default}
.lapsheet-list li.ls-ideal:hover{background:none}
.lapsheet-list li.ls-ideal .ls-s{color:var(--green-d);opacity:1}
.ls-w{flex:0 0 auto;border:none;background:transparent;font-size:14px;line-height:1;padding:2px 3px;cursor:pointer;border-radius:6px}
.ls-w:hover{background:#e4efec}
.ls-w.lock{box-shadow:inset 0 0 0 2px var(--cyan)}
.ls-x{flex:0 0 auto;border:none;background:transparent;color:var(--muted);font-family:var(--font);font-weight:800;font-size:13px;line-height:1;padding:3px 5px;cursor:pointer;border-radius:6px}
.ls-x:hover{background:#fbe3e0;color:#c0392b}
.ls-x.on{color:var(--green-d)}
.ls-x.on:hover{background:#d6ffe9;color:var(--green-d)}
.ls-x-off{color:#b9ccc7;cursor:default}
.lapsheet-list .ls-empty{justify-content:center;color:var(--muted);font-weight:600}
@media (max-width:760px){ .telmain{flex-direction:column} .lapsheet{flex:1 1 auto;width:100%;max-height:none} }
.hud-top{display:grid;grid-template-columns:1fr 1fr 1.8fr;gap:8px;margin-bottom:10px}
.hud-cell{background:#eef5f3;border-radius:10px;padding:5px 12px;text-align:center;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}
.hud-big{font-weight:900;font-size:clamp(19px,2.8vw,26px);line-height:1}
.hud-gear .hud-big{color:var(--green-d)}
.hud-lbl{font-weight:800;font-size:10px;letter-spacing:.06em;color:var(--muted)}
.hud-rpm{flex-direction:column;align-items:stretch;gap:3px;padding:6px 10px}
.hud-rpmbar{height:8px;border-radius:5px;background:#e4efec;overflow:hidden;margin:0}
.hud-rpmbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#1fae5a,#00a5d2);transition:width .05s linear}
.hud-rpmbar span.redline{background:linear-gradient(90deg,#e8a02c,#ff3b3b);box-shadow:0 0 12px #ff3b3b}
.hud-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:10px}
.hud-inp{display:flex;align-items:center;gap:8px}
.hud-inplbl{font-weight:800;font-size:11px;width:30px;color:var(--muted)}
.hud-bar{flex:1;height:14px;border-radius:7px;background:#e4efec;overflow:hidden}
.hud-bar span{display:block;height:100%;width:0;transition:width .05s linear}
.hud-bar.thr span{background:#1fae5a}
.hud-bar.brk span{background:#d23b3b}
.hud-bar.hbr span{background:#e8a02c}
.hud-hbarm{display:flex;align-items:center;gap:10px;margin-bottom:12px;background:#fff3e0;border:1px solid #f0c66a;border-radius:10px;padding:8px 12px}
.hud-hbarm[hidden]{display:none}
.hud-hbarm-lbl{font-weight:800;font-size:11px;letter-spacing:.03em;white-space:nowrap;color:#b5631a}
.hud-hbarm-bar{flex:1;height:9px;border-radius:5px;background:#f3e6cf;overflow:hidden}
.hud-hbarm-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#e8a02c,#ff3b3b);transition:width .06s linear}
.hud-hbarm.fired .hud-hbarm-lbl{color:var(--green-d)}
.hud-hbarm.fired .hud-hbarm-bar span{background:#19c463}
.hud-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hud-card{background:#eef5f3;border-radius:12px;padding:12px}
.hud-cardlbl{font-weight:800;font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.gbox{position:relative;width:100%;aspect-ratio:1/1;max-height:120px;background:#e4efec;border-radius:10px;background-image:linear-gradient(#cfe3dd 1px,transparent 1px),linear-gradient(90deg,#cfe3dd 1px,transparent 1px);background-size:50% 50%}
.gdot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(26,179,91,.45);transform:translate(-50%,-50%);left:50%;top:50%;transition:left .05s linear,top .05s linear}
.hud-gnum{text-align:center;font-weight:700;font-size:12px;margin-top:6px;color:var(--muted)}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tt{font-weight:800;font-size:16px;text-align:center;padding:9px 0;border-radius:8px;background:#8fa6a1;color:#fff}
.tgrid-lbl{text-align:center;font-size:10px;font-weight:700;color:var(--muted);margin-top:6px}
/* understeer ↔ oversteer balance meter (shares the tire-temp card) */
.hud-sublbl{font-weight:800;font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.hud-sublbl span{font-weight:600;font-size:9px;letter-spacing:0;text-transform:none;opacity:.75;margin-left:4px}
.balmeter{position:relative;height:10px;border-radius:5px;margin:9px 0 5px;background:linear-gradient(90deg,#e8a02c,#e4efec 45%,#e4efec 55%,#d23b3b)}
.balmeter::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:#9fb0ad;transform:translateX(-50%)}
.balmeter-dot{position:absolute;top:50%;left:50%;width:13px;height:13px;border-radius:50%;background:#11333a;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.balmeter-foot{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:700;color:var(--muted)}
.balmeter-foot b{font-size:11px;color:var(--ink);text-transform:uppercase}
.lapmode{font-weight:700;font-size:10px;opacity:.6;letter-spacing:.02em}
.hud-map{background:#eef5f3;border-radius:12px;padding:12px;margin-top:12px}
.hud-map canvas{display:block;width:100%;height:auto;background:#fff;border-radius:8px;margin-top:8px;border:1px solid var(--line);touch-action:none}
.map-leg{float:right;display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:9.5px;letter-spacing:0;color:var(--muted)}
.map-leg .lg{display:inline-block;width:18px;height:6px;border-radius:3px;margin:0 4px 0 7px}
.map-leg .lg-g{background:linear-gradient(90deg,rgb(190,235,205),rgb(26,179,91))}
.map-leg .lg-r{background:linear-gradient(90deg,rgb(245,195,195),rgb(210,45,45))}
.map-leg .lg-spd{background:linear-gradient(90deg,hsl(220,72%,48%),hsl(110,72%,48%),hsl(0,72%,48%))}
.map-leg .lg-apex{width:9px;height:9px;border-radius:50%;background:#11333a;border:1.5px solid #fff;margin:0 4px 0 8px}
.map-leg .lg-ov{background:repeating-linear-gradient(90deg,rgb(150,70,235) 0 5px,transparent 5px 8px)}
.map-mode{float:right;margin-left:8px;border:none;background:var(--green-d);color:#fff;font-family:var(--font);font-weight:800;font-size:10.5px;letter-spacing:.02em;padding:3px 11px;border-radius:8px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.map-mode:hover{background:var(--green)}
.lap-row{display:flex;justify-content:space-between;font-weight:600;font-size:13px;padding:3px 0;border-bottom:1px solid var(--line)}
.lap-row:last-child{border-bottom:none}
.lap-row b{font-weight:800}
.hud-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.hud-onpill{font-weight:800;font-size:12px;padding:6px 12px;border-radius:16px;background:#dfeae7;color:var(--muted)}
.hud-onpill.on{background:#0e7d4a;color:#fff}
.hud-extra{font-weight:600;font-size:12px;color:var(--muted)}
.hud-reset{margin-left:auto;background:#33464a;color:#eafff4;border:none;border-radius:9px;font-family:var(--font);font-weight:800;font-size:12px;padding:8px 14px;cursor:pointer}
.hud-reset:hover{background:#3e545a}

.telsetup{margin-top:16px;background:var(--card);border-radius:14px;box-shadow:var(--shadow-card);color:var(--ink);overflow:hidden}
.telsetup summary{cursor:pointer;font-weight:800;font-size:15px;padding:14px 18px;list-style:none}
.telsetup summary::-webkit-details-marker{display:none}
.telsteps{margin:0;padding:0 22px 6px 40px;color:var(--ink)}
.telsteps li{font-weight:600;font-size:14px;line-height:1.55;margin-bottom:9px}
.telsteps a{color:var(--cyan-d);font-weight:800}
.telportnote{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:3px}
.teloptional{margin:4px 18px 16px;border-top:1px dashed var(--line);padding-top:12px}
.teloptlbl{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.teloptional p{margin:6px 0 8px;font-size:13px;font-weight:600;color:var(--ink);line-height:1.5}
.teltok{margin-top:8px}
.teltokhint{font-weight:700;font-size:12px;color:#b07b12;margin-bottom:4px}
.telerr{color:#c0392b;font-weight:700;font-size:13px}
.telwarn{margin:6px 18px 16px;background:#fff7e9;border:1px solid #f0c66a;border-radius:10px;padding:11px 13px;font-size:12.5px;font-weight:600;color:#7a4d00;line-height:1.5}
@media (max-width:760px){
  .hud-top{grid-template-columns:1fr 1fr}
  .hud-rpm{grid-column:1/-1}
  .hud-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .telstate.rec,.telpill.rec{animation:none}
  .hud-rpmbar span,.hud-bar span,.gdot{transition:none}
}

/* ---------- RRCwin: desktop windows + dock (winman.js) ---------- */
#rrcDesktop{position:fixed;inset:0;pointer-events:none;z-index:800}
#rrcDesktop .rwin{pointer-events:auto}
.rwin{position:absolute;display:flex;flex-direction:column;min-width:150px;min-height:80px;
  background:var(--card,#fff);border:1px solid var(--line,#d9e6e3);border-radius:12px;color:var(--ink,#16302c);
  box-shadow:0 18px 46px rgba(10,40,40,.28);overflow:hidden}   /* dark text by default (page default is white for the teal bg) */
.rwin[hidden]{display:none}   /* author display:flex overrides the UA [hidden] rule — restore it so minimize actually hides */
.rwin.rwin-max{left:12px!important;top:12px!important;width:calc(100vw - 24px)!important;height:calc(100vh - 84px)!important}
.rwin-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(180deg,#f4faf8,#eaf3f0);
  border-bottom:1px solid var(--line,#d9e6e3);cursor:move;user-select:none;flex-shrink:0}
.rwin-ico{font-size:15px;line-height:1}
.rwin-title{font-weight:800;font-size:14px;color:var(--ink,#16302c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rwin-sp{margin-left:auto}
.rwin-btn{border:none;background:none;width:26px;height:24px;border-radius:6px;font-size:18px;font-weight:800;line-height:1;
  cursor:pointer;color:#345;display:flex;align-items:center;justify-content:center}
.rwin-btn:hover{background:rgba(0,0,0,.08)}
.rwin-x:hover{background:#f3d2d2;color:#b8332f}
.rwin-body{flex:1;min-height:0;overflow:auto;position:relative}
.winpanel{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}   /* migrated dock/panel bodies fill the window */
.winpad{padding:12px}   /* room-section windows (race info, etc.) — simple padded content */
/* tighten the outlier font sizes inside the settings windows (headers 15, dropdowns 15, triggers 14) → 13, for a consistent smaller scale */
.rwin .rslbl,.rwin .finp,.rwin .ssel-trig{font-size:13px}
/* the current-race summary was white-on-teal inside the room card; give it its own teal card in the window */
.rwin .racebox{background:linear-gradient(135deg,var(--green-d),var(--cyan));color:#fff;border-radius:10px;padding:14px 16px}
.rwin .hkk{color:var(--ink,#16302c)}   /* hotkey legend labels were white for the dark strip — make them dark in the window */
/* Hotkeys window: two-column legend — action name on the left, key on the right, divider between rows */
.rwin .hkkey{display:block}
.rwin .hkrow{display:flex;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line);cursor:grab}
.rwin .hkrow:last-child{border-bottom:none}
.rwin .hkrow.hkdragging{opacity:.45;background:rgba(0,0,0,.05);cursor:grabbing}
.rwin .hkgrip{flex:none;color:var(--muted);font-size:13px;line-height:1;opacity:.55;user-select:none;letter-spacing:-1px}
.rwin .hkname{flex:1;font-weight:700;font-size:13px;color:var(--ink)}
.rwin .hkrow kbd{font-family:var(--font);font-size:11px;font-weight:800;background:#eef4f2;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:2px 7px;white-space:nowrap}
.rwin .hkchip.setup{background:linear-gradient(135deg,var(--green-d),var(--cyan));color:#fff}   /* readable setup chip on the white window */
.rwin-rz{position:absolute;z-index:2}
.rwin-rz-n{top:-3px;left:8px;right:8px;height:7px;cursor:ns-resize}
.rwin-rz-s{bottom:-3px;left:8px;right:8px;height:7px;cursor:ns-resize}
.rwin-rz-e{right:-3px;top:8px;bottom:8px;width:7px;cursor:ew-resize}
.rwin-rz-w{left:-3px;top:8px;bottom:8px;width:7px;cursor:ew-resize}
.rwin-rz-ne{top:-3px;right:-3px;width:14px;height:14px;cursor:nesw-resize}
.rwin-rz-nw{top:-3px;left:-3px;width:14px;height:14px;cursor:nwse-resize}
.rwin-rz-se{bottom:-3px;right:-3px;width:14px;height:14px;cursor:nwse-resize}
.rwin-rz-sw{bottom:-3px;left:-3px;width:14px;height:14px;cursor:nesw-resize}
.rwin-max .rwin-rz{display:none}
body.rwin-dragging{user-select:none}
body.rwin-dragging iframe{pointer-events:none}

#rrcDock{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:900;display:flex;gap:6px;
  background:rgba(18,44,40,.92);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:6px 8px;
  box-shadow:0 12px 30px rgba(0,0,0,.30);max-width:calc(100vw - 20px);overflow-x:auto}
#rrcDock[hidden]{display:none}
.rdock-btn{display:flex;align-items:center;gap:6px;border:none;background:transparent;color:#dff4ec;
  font-family:var(--font,inherit);font-weight:700;font-size:12.5px;padding:7px 11px;border-radius:10px;cursor:pointer;white-space:nowrap}
.rdock-btn:hover{background:rgba(255,255,255,.10)}
.rdock-btn.open{background:rgba(255,255,255,.14)}
.rdock-btn.active{background:#1ab35b;color:#08130e}
.rdock-btn.min{opacity:.65}
.rdock-ico{font-size:14px;line-height:1}
.rdock-tile{font-size:17px;font-weight:800;padding:7px 11px}
.rdock-tile.active{background:#1ab35b;color:#08130e}
.rdock-sep{width:1px;background:rgba(255,255,255,.22);margin:4px 3px;align-self:stretch;flex:none}
.rdock-grid{display:flex;align-items:center;gap:3px;color:#dff4ec;font-weight:800;font-size:12px;flex:none}
.rdock-glbl{opacity:.72;font-size:10px;text-transform:uppercase;letter-spacing:.03em;margin:0 2px 0 8px}
.rdock-grid b{min-width:14px;text-align:center}
.rdock-gbtn{border:none;background:rgba(255,255,255,.14);color:#dff4ec;width:21px;height:23px;border-radius:6px;font-weight:800;font-size:15px;line-height:1;cursor:pointer;padding:0}
.rdock-gbtn:hover{background:rgba(255,255,255,.28)}
body.rwin-tiling .rwin-rz{display:none}   /* tiling controls size — no manual resize */
body.rwin-tiling .rwin{transition:left .14s cubic-bezier(.34,.1,.2,1),top .14s cubic-bezier(.34,.1,.2,1),width .14s cubic-bezier(.34,.1,.2,1),height .14s cubic-bezier(.34,.1,.2,1)}
.rwin.rwin-tiledrag{transition:none!important;z-index:9998!important;opacity:.92;box-shadow:0 22px 60px rgba(10,40,40,.42)}
.rdock-btn.badge{position:relative}
.rdock-btn.badge::after{content:"";position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:#f5a623;box-shadow:0 0 0 2px rgba(18,44,40,.92),0 0 8px #f5a623;animation:rdockpulse 1.6s ease-in-out infinite}
@keyframes rdockpulse{0%,100%{opacity:1}50%{opacity:.45}}
/* drag a car from Eligible Cars onto a Garage slot */
.rc-list li[draggable]{cursor:grab}
.rc-list li[draggable]:active{cursor:grabbing}
.gtable td.gincompat{opacity:.3;filter:grayscale(.7);transition:opacity .12s}   /* wrong class for the dragged car */
.gtable td.gcompat{outline:2px dashed var(--green,#1ab35b);outline-offset:-3px;cursor:copy}
.gtable td.gdrop{background:rgba(26,179,91,.22)}
.gtable td{position:relative}
.gclear{position:absolute;top:2px;right:3px;border:none;background:rgba(0,0,0,.10);color:#b8332f;border-radius:5px;width:19px;height:19px;font-size:14px;font-weight:800;line-height:1;cursor:pointer;padding:0;z-index:2;display:flex;align-items:center;justify-content:center}
.gclear:hover{background:#f3d2d2}
.elgset{border:none;background:var(--green-d,#0e7d4a);color:#fff;font-weight:800;font-size:12px;border-radius:7px;padding:5px 11px;cursor:pointer;margin:0 8px;flex:none;white-space:nowrap}
.elgset:hover{filter:brightness(1.12)}

body.rwin-small #rrcDesktop{position:static;pointer-events:auto}
body.rwin-small .rwin{position:relative!important;left:auto!important;top:auto!important;
  width:auto!important;height:auto!important;max-height:none;margin:8px;box-shadow:0 6px 18px rgba(10,40,40,.16)}
body.rwin-small .rwin-rz{display:none}
body.rwin-small .rwin-head{cursor:default}
body.rwin-small #rrcDock{left:8px;right:8px;transform:none;bottom:8px;justify-content:flex-start}